:root{--ink:#173c43;--paper:#fbfcf9;--accent:#2586a4;--orange:#f39f4a;--line:#b5cbcc}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 -apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif}a{color:inherit;text-underline-offset:5px}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:6px}header{padding:28px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{text-decoration:none;font:27px Georgia,serif;line-height:1.1;white-space:nowrap}.brand span{display:block;font:12px/2.5 sans-serif;letter-spacing:.16em;text-transform:uppercase}nav{display:flex;gap:32px;font-size:14px}nav a{text-decoration:none}nav a:hover{text-decoration:underline}.eyebrow{font:12px/1.7 sans-serif;letter-spacing:.18em;text-transform:uppercase;margin:0 0 26px}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:Georgia,serif;font-weight:400;line-height:1.07}h1{font-size:clamp(55px,6.6vw,108px);letter-spacing:-.045em}h2{font-size:clamp(40px,4vw,64px);letter-spacing:-.035em}h3{font-size:32px}em{font-weight:400}p+p{margin-top:20px}.hero{position:relative;overflow:hidden;min-height:690px}.hero-copy{position:relative;z-index:1}.hero-copy>p:not(.eyebrow):not(.signature){max-width:490px;margin:32px 0}.button{display:inline-flex;gap:30px;align-items:center;background:var(--ink);color:var(--paper);padding:15px 24px;text-decoration:none;font-size:14px;border-radius:2px}.button:hover{background:var(--accent)}.bottomline{position:absolute;bottom:30px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:13px}.signature{font:italic 26px Georgia,serif;margin-top:32px!important}.approach,.offers,.about,.contact{padding:100px 7%}.approach{display:grid;grid-template-columns:1fr 1fr;gap:24px 7%}.approach>.eyebrow{grid-column:1/-1}.approach-copy{max-width:570px}.approach details{margin-top:30px}details{border-top:1px solid var(--line);padding:15px 0}summary{cursor:pointer;font-size:14px}details p{font-size:16px;margin:18px 0}details a{font-size:14px}.offers{background:#edf4f2}.sectionhead{margin-bottom:50px}.offergrid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.offergrid article{border-top:1px solid var(--line);padding-top:20px}.number{display:block;font-size:12px;margin-bottom:35px;color:var(--accent)}.offergrid h3{margin-bottom:20px}.offergrid p{min-height:65px;margin-bottom:30px}.offergrid details p{min-height:0}.about{display:grid;grid-template-columns:.8fr 1fr;align-items:center;gap:10%}.about>img{width:100%;max-height:600px;object-fit:cover}.about h2{font-size:clamp(34px,3.7vw,58px);margin-bottom:30px}.about p:not(.eyebrow){max-width:550px}.contact{text-align:center;background:#81d7e3}.contact p:not(.eyebrow){margin:25px 0}.phone{display:block;margin-top:22px;font-size:15px}footer{display:flex;justify-content:space-between;gap:24px;padding:35px 5%;font-size:12px;flex-wrap:wrap}.motion{position:fixed;bottom:12px;right:12px;z-index:5;background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:9px 13px;border-radius:30px;font-size:12px;cursor:pointer}.skip{position:absolute;top:-100px}.skip:focus{top:0;z-index:9;background:white;padding:12px}.breathe{animation:breathe 12s ease-in-out infinite}@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}.paused *{animation-play-state:paused!important}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
/* 01 — Freiraum: a spacious, full-bleed colour field. */
.freiraum .hero{margin:0 20px;background:#d4edeb;min-height:740px}.freiraum .art{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.85;object-position:75% 50%}.freiraum .hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#eaf5eeeF 0%,#eaf5eec9 35%,transparent 70%)}.freiraum .hero-copy{padding:95px 6%;z-index:2}.freiraum .hero h1 em{color:#226b7c}.freiraum .bottomline{z-index:2}.freiraum .offers{border-radius:120px 0 0 0}.freiraum .about>img{border-radius:50% 50% 2px 2px}.freiraum .contact{background:#dbe4da}
/* 02 — Begegnung: editorial portrait and white space. */
.begegnung{--paper:#fffefb;--ink:#243a3b}.begegnung header{border-bottom:1px solid var(--line);margin:0 5%;padding:28px 0}.begegnung .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:5%;padding:65px 5% 55px;min-height:730px}.begegnung .hero-copy{padding:35px 0}.begegnung h1 em{color:#2586a4}.begegnung figure{position:relative;padding:0 20px 20px 0}.begegnung figure:after{content:'';position:absolute;inset:30px 0 0 30px;background:var(--orange);z-index:-1}.begegnung figure img{width:100%;height:560px;object-fit:cover}.begegnung figcaption{font-size:12px;margin-top:12px}.begegnung .approach{border-top:1px solid var(--line);margin:0 5%;padding:90px 0}.begegnung .offers{background:#dbe4da}.begegnung .offergrid article{background:var(--paper);padding:30px}.begegnung .about img{max-height:460px;object-position:50% 30%}.begegnung .contact{background:#f1ede4}
/* 03 — Mittelpunkt: concentric space, low light. */
.mittelpunkt{--ink:#eaf5ee;--paper:#102f39;--accent:#81d7e3;--line:#47676d}.mittelpunkt header{border-bottom:1px solid #36545d}.mittelpunkt .hero{min-height:780px}.mittelpunkt .hero-copy{padding:75px 8%;max-width:900px}.mittelpunkt h1{font-size:clamp(62px,7.3vw,115px)}.mittelpunkt h1 em{color:#81d7e3}.mittelpunkt .rings{position:absolute;right:-180px;top:50px;width:760px;height:760px;border:1px solid #81d7e370;border-radius:50%;background:radial-gradient(circle,#2586a430,transparent 64%)}.rings i{position:absolute;inset:12%;border:1px solid #81d7e34a;border-radius:50%}.rings i:nth-child(2){inset:24%}.rings i:nth-child(3){inset:36%;border-color:#f39f4a99}.mittelpunkt .button{background:#81d7e3;color:#102f39}.mittelpunkt .offers{background:#193e49}.mittelpunkt .about>img{filter:saturate(.7);border-radius:45% 45% 0 0}.mittelpunkt .contact{background:#2586a4;color:#fff}.mittelpunkt .contact .button{background:#102f39;color:white}
/* 04 — Aufrichtung: an ascending typographic composition. */
.aufrichtung{--paper:#fbfcf9;--ink:#174b56}.aufrichtung header{background:#f39f4a}.aufrichtung .brand{font-family:Arial,sans-serif;font-weight:700}.aufrichtung .hero{display:grid;grid-template-columns:1fr 30%;min-height:700px}.aufrichtung .hero-copy{padding:70px 5vw}.aufrichtung h1{font-family:Arial,sans-serif;font-weight:600;font-size:clamp(48px,6.2vw,98px);line-height:1.14;letter-spacing:-.07em}.aufrichtung h1 span{display:block}.aufrichtung h1 span:nth-child(2){margin-left:3vw}.aufrichtung h1 span:nth-child(3){margin-left:6vw;color:#2586a4}.aufrichtung .herorow{margin-top:55px}.aufrichtung .herorow .button{margin-top:25px}.aufrichtung aside{position:relative;overflow:hidden;background:#81d7e3;padding:35px;display:flex;flex-direction:column;justify-content:space-between}.aufrichtung aside img{width:150%;position:absolute;left:-20%;top:12%;height:58%;object-fit:cover;border-radius:50%;mix-blend-mode:multiply}.aufrichtung aside span{font-size:12px;position:relative;z-index:1}.aufrichtung aside p{font-size:25px;line-height:1.3;position:relative}.aufrichtung h2,.aufrichtung h3{font-family:Arial,sans-serif;letter-spacing:-.055em}.aufrichtung .approach{background:#174b56;color:white;--line:#689198}.aufrichtung .offers{background:#f39f4a}.aufrichtung .offergrid{gap:0}.aufrichtung .offergrid article{padding:28px;border-top:2px solid var(--ink);border-right:1px solid #174b5655}.aufrichtung .number{color:var(--ink)}.aufrichtung .contact{background:#dbe4da}
/* 05 — Eigenklang: personal correspondence on soft green paper. */
.eigenklang{--paper:#dbe4da;--ink:#354b49;--line:#9caea3}.eigenklang header{margin:0 5%;padding:28px 0;border-bottom:1px solid var(--line)}.eigenklang .brand{font-style:italic}.eigenklang .hero{text-align:center;padding:65px 5% 70px;min-height:750px}.eigenklang h1{font-size:clamp(50px,5.8vw,88px);line-height:1.16}.eigenklang h1 em{font-size:.8em}.eigenklang .letter{max-width:690px;margin:45px auto 0;display:grid;grid-template-columns:100px 1fr;gap:30px;text-align:left}.eigenklang .letter img{width:100px;height:130px;border-radius:50%;object-fit:cover}.eigenklang .letter p{font-size:16px}.textlink{display:inline-block;margin-top:20px;font-size:14px}.eigenklang .about{border-top:1px solid var(--line);margin:0 7%;padding:80px 0}.eigenklang .about>img{aspect-ratio:1;object-fit:cover;border-radius:50%}.eigenklang .approach{background:#f8f9f3}.eigenklang .offers{background:transparent}.eigenklang .offergrid{display:block}.eigenklang .offergrid article{display:grid;grid-template-columns:50px 1fr 1fr;gap:25px;padding:30px 0}.eigenklang .offergrid details{grid-column:2/-1}.eigenklang .offergrid p{margin:0;min-height:0}.eigenklang .number{margin:0}.eigenklang .contact{margin:0 4% 25px;background:#f8f9f3;border-radius:50% 50% 0 0;padding-top:110px}
@media(max-width:760px){header{padding:22px 6%;display:block}.brand{font-size:25px}nav{gap:20px;margin-top:16px;flex-wrap:wrap;font-size:13px}.hero{min-height:0!important}h1{font-size:55px}h2{font-size:40px}.hero-copy>p:not(.eyebrow){font-size:16px}.eyebrow{font-size:11px}.approach,.offers,.about,.contact{padding:65px 7%;display:block}.approach h2{margin-bottom:28px}.offergrid{grid-template-columns:1fr;gap:30px}.offergrid h3{font-size:31px}.number{margin-bottom:15px}.offergrid p{min-height:0}.about>img{max-height:420px;margin-bottom:35px}.bottomline{position:relative;left:auto;right:auto;bottom:auto;padding:0 7% 25px;gap:15px;font-size:11px}.bottomline span:last-child{display:none}.freiraum .hero{margin:0 10px}.freiraum .hero-copy{padding:65px 7% 50px}.freiraum .hero:after{background:#eaf5eea8}.freiraum .art{object-position:38% 50%}.freiraum .offers{border-radius:60px 0 0 0}.begegnung .hero{display:flex;flex-direction:column;padding:15px 6% 40px}.begegnung .hero-copy{padding:40px 0}.begegnung figure img{height:420px}.begegnung .approach{padding:60px 0}.mittelpunkt .hero-copy{padding:55px 7%}.mittelpunkt h1{font-size:65px}.mittelpunkt .rings{width:520px;height:520px;right:-280px;top:65px}.aufrichtung .hero{grid-template-columns:1fr}.aufrichtung .hero-copy{padding:50px 7%}.aufrichtung h1{font-size:clamp(45px,11vw,78px)}.aufrichtung aside{min-height:210px;padding:25px 7%}.aufrichtung aside img{width:60%;left:50%;height:130%;top:-15%}.aufrichtung aside p{margin-top:30px;font-size:24px}.aufrichtung .herorow{margin-top:30px}.aufrichtung .offergrid article{border-right:0;padding:25px 0}.eigenklang .hero{padding:50px 7%}.eigenklang h1{font-size:48px}.eigenklang .letter{grid-template-columns:65px 1fr;gap:18px}.eigenklang .letter img{width:65px;height:90px}.eigenklang .about{padding:60px 0}.eigenklang .offergrid article{grid-template-columns:30px 1fr;gap:15px}.eigenklang .offergrid article>p{grid-column:2}.eigenklang .contact{border-radius:90px 90px 0 0;padding:65px 8%}footer{padding-bottom:75px;font-size:11px;display:block}footer>*{display:block;margin-bottom:10px}.motion{font-size:11px}}
.practice{padding:90px 7%;display:grid;grid-template-columns:.7fr 1.3fr;gap:8%;align-items:center;background:#e0eeeb}.practice h2{margin-bottom:25px}.practice img{width:100%;max-height:470px;object-fit:cover}.practice figcaption{font-size:12px;margin-top:10px}.practice p:not(.eyebrow){max-width:320px}.mittelpunkt .practice{background:#0c2831}.begegnung .practice{background:#faf8f1}.aufrichtung .practice{background:#dbe4da}.eigenklang .practice{background:transparent;border-top:1px solid var(--line)}@media(max-width:760px){.practice{display:block;padding:60px 7%}.practice figure{margin-top:30px}.practice img{max-height:350px}}
/* 06 — Verbindung: Bärbels Auswahl. */
.verbindung .hero{margin:0 20px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:5%;padding:65px 6%;background:#d9eeea;min-height:730px}.verbindung .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}.verbindung .hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#edf6eedb, #edf6ee66 60%,transparent)}.verbindung .hero-copy{z-index:2}.verbindung h1{font-size:clamp(70px,7.5vw,115px);line-height:.98}.verbindung h1 em{color:#226b7c}.verbindung .hero-copy>p:not(.eyebrow){font-size:21px;line-height:1.55;margin:28px 0}.verbindung .hero-portrait{position:relative;z-index:2;margin:15px 0}.verbindung .hero-portrait img{display:block;width:100%;height:530px;object-fit:cover;border-radius:48% 48% 2px 2px}.verbindung figcaption{font-size:13px;margin-top:12px}.verbindung .shared-foundation{max-width:700px;margin-top:25px;font-size:21px}.verbindung .offers{background:#dbe4da}.verbindung .contact{background:#81d7e3}.verbindung .about>img{border-radius:48% 48% 0 0}@media(max-width:760px){.verbindung .hero{margin:0 10px;display:block;padding:50px 7%}.verbindung h1{font-size:76px}.verbindung .hero-copy>p:not(.eyebrow){font-size:19px}.verbindung .hero-portrait{margin-top:40px}.verbindung .hero-portrait img{height:auto;max-height:460px;object-fit:cover}.verbindung .shared-foundation{font-size:18px}}
/* Mehr Luft und kontinuierliche Farbräume statt getrennter Flächen. */
.verbindung{background:#f3f7ef}.verbindung main{background:radial-gradient(ellipse 90% 12% at 100% 27%,#81d7e353,transparent),radial-gradient(ellipse 90% 17% at 0% 47%,#dbe4dac9,transparent),radial-gradient(ellipse 85% 12% at 90% 69%,#f39f4a24,transparent),linear-gradient(#edf6ee,#f7f8f0 24%,#e2eeea 45%,#f4f6ed 67%,#d7ece8);overflow:hidden}.verbindung header{padding:32px 6% 15px;background:#edf6ee}.verbindung nav{gap:38px}.verbindung .hero{margin:0;padding:65px 8% 150px;gap:8%;background:transparent;overflow:visible}.verbindung .hero .art{height:100%;mask-image:linear-gradient(#000 60%,transparent 99%);-webkit-mask-image:linear-gradient(#000 60%,transparent 99%);object-position:center}.verbindung .hero:after{background:linear-gradient(90deg,#edf6eed9,transparent 85%);mask-image:linear-gradient(#000 60%,transparent 99%)}.verbindung .hero-portrait{transform:rotate(2deg);padding-top:20px}.verbindung .hero-portrait img{height:510px;border-radius:46% 54% 44% 56% / 40% 44% 56% 60%;box-shadow:0 30px 70px #245c6312}.verbindung .hero-portrait figcaption{margin:22px 0 0 12%;font-style:italic}.verbindung .button{background:transparent;color:var(--ink);padding:16px 0;gap:30px;border-radius:0;position:relative;font-size:16px;min-height:54px;text-decoration:none}.verbindung .button:after{content:'';position:absolute;bottom:5px;left:0;right:55px;height:1px;background:currentColor;opacity:.35;transition:right .3s,opacity .3s}.verbindung .button span{display:inline-grid;place-items:center;width:45px;height:45px;border:1px solid #2586a44d;border-radius:50%;font-size:20px;transition:transform .3s,background .3s}.verbindung .button:hover{background:transparent}.verbindung .button:hover span{transform:translate(4px,-3px);background:#81d7e333}.verbindung .button:hover:after{right:35px;opacity:.8}.verbindung .approach,.verbindung .offers,.verbindung .practice,.verbindung .about,.verbindung .contact{background:transparent;padding:120px 9%;border:0}.verbindung .approach{gap:40px 12%}.verbindung .offers{padding-top:140px;padding-bottom:150px}.verbindung .sectionhead{max-width:760px;margin-bottom:85px}.verbindung .offergrid{gap:6%}.verbindung .offergrid article{border:0;padding:0}.verbindung .offergrid article:nth-child(2){padding-top:65px}.verbindung .offergrid article:nth-child(3){padding-top:130px}.verbindung .number{font:italic 28px Georgia,serif;color:#2586a4;margin-bottom:32px}.verbindung details{border:0;padding-top:15px}.verbindung summary{padding:12px 0;list-style:none;display:flex;gap:25px;align-items:center;font-size:15px}.verbindung summary::-webkit-details-marker{display:none}.verbindung summary:after{content:'+';font:26px Georgia,serif;color:#2586a4}.verbindung details[open]>summary:after{content:'−'}.verbindung .practice{gap:12%;padding-top:65px}.verbindung .practice img{border-radius:48% 52% 45% 55% / 12% 15% 13% 18%}.verbindung .about{gap:13%;padding-top:170px;padding-bottom:170px}.verbindung .about>img{border-radius:48% 52% 55% 45% / 40% 40% 60% 60%}.verbindung .contact{padding-top:110px;padding-bottom:140px}.verbindung .contact h2{font-size:clamp(45px,5vw,78px)}.verbindung .contact .button{margin-top:12px}.verbindung footer{background:#d7ece8;border:0}.verbindung .motion{background:#f3f7efd9;border-color:#2586a426;padding:10px 17px}.introduction-film{padding:0 10% 80px;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:12%;position:relative}.film-heading h2{font-size:clamp(35px,3.5vw,56px);margin-bottom:25px}.film-heading>p:last-child{font-size:17px}.film-space{position:relative;aspect-ratio:1.45;overflow:hidden;border-radius:43% 57% 48% 52% / 15% 20% 20% 20%;background:#dbe4da}.film-space img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}.film-space:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#173c43d9)}.film-space figcaption{position:absolute;bottom:26px;left:9%;right:7%;z-index:1;color:white}.film-space figcaption span{display:block;font:26px Georgia,serif}.film-space small{display:block;font-size:12px;margin-top:7px}@media(max-width:760px){.verbindung header{padding:25px 7% 10px}.verbindung nav{gap:20px}.verbindung .hero{padding:50px 8% 95px}.verbindung .hero-portrait{max-width:380px;margin:45px auto 0;transform:rotate(1deg)}.verbindung .hero-portrait img{height:auto}.verbindung .hero-copy>p:not(.eyebrow){margin:30px 0 20px}.verbindung .approach,.verbindung .offers,.verbindung .practice,.verbindung .about,.verbindung .contact{padding:80px 8%}.verbindung .offergrid{gap:50px}.verbindung .offergrid article:nth-child(n){padding-top:0}.verbindung .sectionhead{margin-bottom:50px}.verbindung .number{margin-bottom:18px}.verbindung .offergrid h3{margin-bottom:17px}.verbindung .offergrid p{margin-bottom:15px}.verbindung .button{font-size:15px;gap:20px}.introduction-film{padding:0 8% 40px;display:flex;flex-direction:column;gap:30px;align-items:stretch}.film-space{aspect-ratio:1.25}.film-space figcaption{bottom:20px}.film-space small{font-size:11px}.verbindung .practice figure{margin-top:35px}.verbindung .about>img{margin-bottom:50px}.verbindung .contact{padding-top:65px;padding-bottom:100px}}
.verbindung .introduction-film{grid-template-columns:1.15fr .85fr;padding-left:14%;padding-right:14%;gap:15%;padding-bottom:100px}.verbindung .film-space{aspect-ratio:9/16;max-width:350px;width:100%;justify-self:center;border-radius:45% 55% 42% 58% / 9% 11% 9% 12%;transform:rotate(-3deg)}.verbindung .film-space img{object-position:50% 50%}.verbindung main{position:relative;background:radial-gradient(ellipse 95% 13% at 110% 29%,#81d7e363,transparent),radial-gradient(ellipse 100% 18% at -10% 48%,#dbe4daee,transparent),radial-gradient(ellipse 95% 12% at 100% 72%,#f39f4a25,transparent),linear-gradient(166deg,#edf6ee 5%,#f7f8f0 27%,#deefea 46%,#f6f7ee 64%,#cde9e5 96%)}.verbindung .offers .sectionhead{transform:rotate(-2deg);transform-origin:left center}.verbindung .practice figure{transform:rotate(2deg)}.verbindung details[open]{animation:unfold .45s ease-out}.verbindung details[open] p{animation:unfold .45s ease-out}@keyframes unfold{from{opacity:.2;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:760px){.verbindung .introduction-film{padding:0 9% 60px;gap:35px}.verbindung .film-space{width:82%;max-width:300px;align-self:center}.verbindung .practice figure{transform:rotate(1deg)}}
/* Durchgehender transparenter Farbhintergrund aus Bärbels Vorlage. */
.verbindung{isolation:isolate;position:relative;background:#f3f7ef}.verbindung:before{content:'';position:fixed;inset:-3%;z-index:-1;pointer-events:none;background:url('assets/farbkomposition.jpg') center center/cover no-repeat;opacity:.17;animation:ambient-colour 22s ease-in-out infinite}.verbindung main{background:transparent}.verbindung header,.verbindung footer{background:transparent}.verbindung .approach,.verbindung .offers,.verbindung .practice,.verbindung .about,.verbindung .contact,.verbindung .introduction-film{background:transparent}.verbindung .hero .art{opacity:.62}.verbindung .hero:after{background:linear-gradient(90deg,#edf6eeb0,transparent 85%)}@keyframes ambient-colour{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}@media(prefers-reduced-motion:reduce){.verbindung:before{animation:none!important}}.verbindung.paused:before{animation-play-state:paused!important}
/* Vollständiges Startporträt ohne Beschnitt des Kopfes. */
.verbindung .hero-portrait{transform:none;padding-top:0;max-width:460px;justify-self:center;width:100%}.verbindung .hero-portrait img{height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:center top;border-radius:30% 34% 28% 32% / 12% 14% 17% 19%}.verbindung .hero-portrait figcaption{margin-top:18px}@media(max-width:760px){.verbindung .hero-portrait{max-width:360px;transform:none}.verbindung .hero-portrait img{height:auto;max-height:none;object-fit:contain}}
.verbindung .offers .sectionhead{transform:none}
.verbindung .discovery-section{padding:70px 8% 110px;display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;align-items:center}.discovery-intro h2{margin-bottom:30px}.discovery-intro h2 em{color:#2586a4}.discovery-note{font-size:14px;max-width:290px;opacity:.8;margin-top:30px!important}.discovery{padding:50px 45px;background:#ffffff85;border:1px solid #ffffffa0;border-radius:35px 80px 45px 60px;box-shadow:0 20px 70px #2586a408;min-width:0}.discovery h3{font-size:39px;line-height:1.12;outline:none}.discovery-instruction{margin:25px 0!important;font-size:17px;line-height:1.75}.discovery button{font:inherit;color:#173c43;cursor:pointer;min-height:44px}.discovery-start{border:0;border-bottom:1px solid #2586a477;background:transparent;padding:15px 0;display:flex;gap:25px;align-items:center}.discovery-start span{font-size:25px}.discovery-progress{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;color:#226b7c;margin-bottom:28px}.discovery-progress>span:last-child{display:flex;gap:6px}.discovery-progress i{height:4px;width:20px;background:#dbe4da;border-radius:4px}.discovery-progress i.active{background:#2586a4}.discovery fieldset{border:0;padding:0;margin:30px 0}.discovery legend{font-size:15px;margin-bottom:15px}.discovery-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.discovery-choices button{font-size:14px;text-align:left;padding:15px 18px;border:1px solid #2586a437;background:#ffffff65;border-radius:18px;transition:background .2s,transform .2s}.discovery-choices button:hover{background:#81d7e345;transform:translateY(-2px)}.discovery-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:12px;margin-top:25px}.discovery-bottom button{background:transparent;border:0;padding:8px 0;font-size:13px;text-decoration:underline;text-underline-offset:5px}.discovery-bottom a{font-size:14px}.discovery-privacy{font-size:12px;margin-top:25px!important;opacity:.75}.discovery-observations{margin:25px 0}.discovery-observations>div{padding:12px 0;border-bottom:1px solid #2586a421}.discovery-observations dt{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#226b7c}.discovery-observations dd{margin:5px 0 0;font-size:16px}.discovery-takeaway{padding:22px;background:#81d7e325;border-radius:22px;margin:25px 0}.discovery h4{font:25px Georgia,serif;margin:0 0 15px}.discovery-takeaway p,.discovery-context{font-size:15px}.discovery h3{animation:unfold .4s ease-out}@media(max-width:760px){.verbindung .discovery-section{padding:35px 7% 80px;display:block}.discovery-intro{margin-bottom:40px}.discovery-note{max-width:100%}.discovery{padding:32px 23px;border-radius:25px 45px 30px 40px}.discovery h3{font-size:33px}.discovery-choices{grid-template-columns:1fr}.discovery-instruction{font-size:16px}.discovery-progress{font-size:11px}}
.verbindung .about>img{height:auto;max-height:none;object-fit:contain;border-radius:25% 30% 27% 24% / 12% 14% 16% 18%}
.email-address{display:block;margin-top:22px;font-size:15px;overflow-wrap:anywhere}
.social-links{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:36px;margin-top:45px}.social-links a,.social-pending{font-size:14px;padding:12px 4px}.social-links a{text-decoration:none;border-bottom:1px solid #2586a444}.social-links a:hover{color:#2586a4}.social-links a span{margin-left:10px}.social-pending{opacity:.65}.social-pending small{display:block;font-size:11px}@media(max-width:760px){.social-links{gap:22px}}
.verbindung .hero-copy>p.location-intro{font-size:15px;line-height:1.6;margin:0 0 28px;color:#226b7c;letter-spacing:.02em}.verbindung .questions{padding:90px 9%;display:grid;grid-template-columns:1fr 1.1fr;gap:30px 8%}.verbindung .questions>.eyebrow{grid-column:1/-1}.verbindung .question-list details{padding:12px 0;border-bottom:1px solid #2586a426}.verbindung .question-list summary{justify-content:space-between;gap:24px;font-size:17px;line-height:1.5}.verbindung .contact-locations{font-size:17px;line-height:1.7}.verbindung .hero-portrait img,.verbindung .about>img,.verbindung .practice img{height:auto}@media(max-width:760px){.verbindung .questions{display:block;padding:65px 8%}.verbindung .questions h2{margin-bottom:30px}.verbindung .hero-copy>p.location-intro{font-size:14px}.verbindung .question-list summary{font-size:16px}}
/* Ruhigere Abschnittsfolge: zusätzliche Luft, weich auslaufende Farbnuancen.
   Entdeckungsreise einschließlich ihrer Abstände bleibt unverändert. */
.verbindung .introduction-film {
  margin-top: clamp(24px, 3vw, 48px);
  margin-bottom: clamp(28px, 4vw, 64px);
}
.verbindung :is(.approach, .offers, .practice, .about, .questions, .contact) {
  padding-top: clamp(140px, 12vw, 180px);
  padding-bottom: clamp(140px, 12vw, 180px);
}
.verbindung .approach {
  background: radial-gradient(ellipse at 20% 50%, rgba(129, 215, 227, .11), transparent 72%);
}
.verbindung .offers {
  background: radial-gradient(ellipse at 80% 50%, rgba(219, 228, 218, .23), transparent 72%);
}
.verbindung .practice {
  background: radial-gradient(ellipse at 25% 50%, rgba(243, 159, 74, .055), transparent 72%);
}
.verbindung .about {
  background: radial-gradient(ellipse at 80% 50%, rgba(129, 215, 227, .085), transparent 72%);
}
.verbindung .questions {
  background: radial-gradient(ellipse at 20% 50%, rgba(219, 228, 218, .20), transparent 72%);
}
.verbindung .contact {
  background: radial-gradient(ellipse at 60% 55%, rgba(129, 215, 227, .13), transparent 72%);
}
@media (max-width: 760px) {
  .verbindung .introduction-film { margin-top: 16px; margin-bottom: 28px; }
  .verbindung :is(.approach, .offers, .practice, .about, .questions, .contact) {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
/* Zweiter Abschnitt: links Film, rechts Einladung; Lesereihenfolge mobil erhalten. */
.verbindung .introduction-film { grid-template-columns: .85fr 1.15fr; }
.verbindung .introduction-film .film-space { grid-column: 1; grid-row: 1; }
.verbindung .introduction-film .film-heading { grid-column: 2; grid-row: 1; }
.verbindung .voices {
  padding: clamp(140px, 12vw, 180px) 9%;
  background: radial-gradient(ellipse at 65% 50%, rgba(243,159,74,.055), transparent 72%);
}
.verbindung .voices-heading { margin-bottom: 65px; }
.verbindung .voices-heading > p:last-child { margin-top: 25px; font-size: 16px; }
.verbindung .voices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 65px 10%; }
.verbindung .voices-grid figure { margin: 0; }
.verbindung .voices-grid blockquote { margin: 0; }
.verbindung .voices-grid blockquote p { font: 26px/1.5 Georgia, serif; }
.verbindung .voices-grid figcaption { margin-top: 22px; font-size: 14px; color: #226b7c; }
@media (max-width: 760px) {
  .verbindung .introduction-film { display: flex; flex-direction: column; }
  .verbindung .voices { padding: 100px 8%; }
  .verbindung .voices-heading { margin-bottom: 45px; }
  .verbindung .voices-grid { grid-template-columns: 1fr; gap: 45px; }
  .verbindung .voices-grid blockquote p { font-size: 23px; }
}
.verbindung .social-links { align-items: center; }
.verbindung .social-links a, .verbindung .social-pending { display: inline-flex; align-items: center; gap: 10px; }
.verbindung .social-links .brand-icon { width: 21px; height: 21px; object-fit: contain; flex: none; }
.verbindung .social-links a > span { margin-left: 0; }
/* Sichtbare Atemlinie gliedert die Abschnitte, ohne den Farbraum zu unterbrechen. */
.verbindung :is(.approach, .offers, .practice, .about, .voices, .questions, .contact) {
  position: relative;
  padding-top: 125px;
  padding-bottom: 100px;
}
.verbindung :is(.approach, .offers, .practice, .about, .voices, .questions, .contact)::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(220px, 27vw, 360px);
  height: 64px;
  background: none center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 760px) {
  .verbindung :is(.approach, .offers, .practice, .about, .voices, .questions, .contact) {
    padding-top: 105px;
    padding-bottom: 75px;
  }
  .verbindung :is(.approach, .offers, .practice, .about, .voices, .questions, .contact)::before {
    width: 220px;
    height: 52px;
  }
}
/* Persönliche Stimmen als ruhige Übergänge zwischen den Inhaltsbereichen. */
.verbindung .quote-island {
  position: relative;
  margin: 5px auto 15px;
  padding: 55px 10% 65px;
  max-width: 1120px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(129,215,227,.13), transparent 72%);
}
.verbindung .quote-island::before {
  content: '';
  display: block;
  width: 150px;
  height: 40px;
  margin: 0 auto 24px;
  background: none center / contain no-repeat;
}
.verbindung .quote-island figure, .verbindung .quote-island blockquote { margin: 0; }
.verbindung .quote-island blockquote p { font: 29px/1.48 Georgia, serif; }
.verbindung .quote-island figcaption { margin-top: 22px; font-size: 14px; color: #226b7c; }
.verbindung .quote-island + :is(.practice, .about, .questions, .contact)::before { display: none; }
.verbindung .quote-island + :is(.practice, .about, .questions, .contact) { padding-top: 75px; }
.verbindung .singing-voices { max-width: 1300px; background: radial-gradient(ellipse at center, rgba(243,159,74,.075), transparent 72%); }
.verbindung .singing-voices > div { display: grid; grid-template-columns: 1.2fr .8fr; gap: 65px; align-items: center; }
.verbindung .singing-voices blockquote p { font-size: 26px; }
.verbindung .quote-source { display: inline-block; margin-top: 30px; font-size: 12px; }
@media (max-width: 760px) {
  .verbindung .quote-island { padding: 35px 9% 45px; margin: 0 auto; }
  .verbindung .quote-island blockquote p { font-size: 24px; }
  .verbindung .singing-voices > div { grid-template-columns: 1fr; gap: 38px; }
  .verbindung .quote-island + :is(.practice, .about, .questions, .contact) { padding-top: 55px; }
}
.verbindung .singing-voices > div { display: block; max-width: 760px; margin: 0 auto; }
/* Vollständige Originaltexte: gut lesbare aufklappbare Abschnitte. */
.verbindung .original-copy { max-width: 760px; }
.verbindung .original-copy p { white-space: pre-line; font-size: 17px; line-height: 1.8; margin: 20px 0; }
.verbindung .original-offer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 55px 7%; align-items: start; }
.verbindung .original-offer-list article { padding-top: 25px; border-top: 1px solid #2586a433; min-width: 0; }
.verbindung .original-offer-list h3 { font-size: 29px; line-height: 1.25; }
.verbindung .original-offer-list article:has(details[open]) { grid-column: 1 / -1; }
.verbindung .original-offer-list details[open] .original-copy { max-width: 900px; }
.verbindung .original-questions .question-list { min-width: 0; }
.verbindung .question-group + .question-group { margin-top: 45px; }
.verbindung .question-group h3 { font-size: 25px; line-height: 1.35; margin-bottom: 20px; }
.verbindung .original-approach .approach-copy { max-width: none; }
/* Ansatz: Themen links, Überschrift rechts; mobil bleibt die Lesereihenfolge erhalten. */
.verbindung #weg.original-approach > .approach-intro,
.verbindung #weg.original-approach > .approach-copy { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 761px) {
  .verbindung #weg.original-approach { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .verbindung #weg.original-approach > .eyebrow { grid-column: 2; grid-row: 1; }
  .verbindung #weg.original-approach > .approach-intro { grid-column: 2; grid-row: 2; }
  .verbindung #weg.original-approach > .approach-copy { grid-column: 1; grid-row: 2; }
}
.verbindung .original-approach summary { font-size: 17px; line-height: 1.5; }
.verbindung .blog-planned { text-align: center; padding: 65px 9%; }
.verbindung .blog-planned p:last-child { margin-top: 25px; }
.verbindung .contact > details { text-align: left; max-width: 850px; margin: 55px auto 0; }
.verbindung nav { flex-wrap: wrap; }
@media(max-width:760px) {
  .verbindung .original-offer-list { grid-template-columns: 1fr; gap: 35px; }
  .verbindung .original-offer-list h3 { font-size: 26px; }
  .verbindung .original-copy p { font-size: 16px; }
  .verbindung .blog-planned { padding: 55px 8%; }
}
/* Zitatinseln als deutlich erkennbare, ruhige Farbakzente. */
.verbindung .quote-island {
  width: calc(100% - 14%);
  max-width: 1120px;
  margin: 28px auto;
  padding: 42px 7% 48px;
  background: rgba(129, 215, 227, .30);
  border: 1px solid rgba(37, 134, 164, .10);
  border-radius: 8% 14% 10% 12% / 24% 20% 26% 22%;
}
.verbindung .quote-island blockquote p { color: #215e6c; }
.verbindung .quote-island figcaption { color: #254d55; letter-spacing: .035em; }
.verbindung .quote-island:nth-of-type(even) { background: rgba(219, 228, 218, .65); }
.verbindung .singing-voices { background: rgba(243, 159, 74, .17); }
.verbindung .quote-island::before { margin-bottom: 18px; }
.verbindung .blog-planned {
  width: calc(100% - 18%);
  margin: 25px auto;
  padding: 55px 6%;
  border-top: 1px solid #2586a43d;
  border-bottom: 1px solid #2586a43d;
}
@media(max-width:760px) {
  .verbindung .quote-island { width: 88%; padding: 32px 7% 38px; margin: 22px auto; border-radius: 24px 44px 30px 38px; }
  .verbindung .quote-island blockquote p { font-size: 23px; }
  .verbindung .blog-planned { width: 84%; padding: 42px 3%; }
}
.verbindung .quote-island blockquote p { color: #173f4b; }
/* Farbige Zitatinseln bleiben durchsichtig: das atmende Muster scheint durch. */
.verbindung .quote-island { background: rgba(129, 215, 227, .22); }
.verbindung .quote-island:nth-of-type(even) { background: rgba(219, 228, 218, .28); }
.verbindung .quote-island.singing-voices { background: rgba(243, 159, 74, .13); }
/* Finaler Schwung: klarer Bogen, keine Kreise/Punkte. Ein Zeichen je Übergang. */
.verbindung main > section:not(.hero):not(.discovery-section) { position: relative; }
.verbindung main > section:not(.hero):not(.discovery-section)::before {
  content: ''; display: block; position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%); width: clamp(230px, 29vw, 360px); height: 64px;
  background: none center / contain no-repeat; pointer-events: none;
}
.verbindung main > .quote-island + section:not(.hero):not(.discovery-section)::before { display: none; }
.verbindung .quote-island::before { width: 230px; height: 48px; }
.verbindung .introduction-film { padding-top: 100px; }
.verbindung .blog-planned { border: 0; padding-top: 100px; }
.verbindung .social-links a { gap: 12px; padding: 15px 13px; min-height: 64px; border: 1px solid #2586a430; border-radius: 16px; background: #ffffff85; }
.verbindung .social-links .brand-icon { display: block; visibility: visible; opacity: 1; width: 32px; height: 32px; min-width: 32px; flex: 0 0 32px; fill: currentColor; }
.verbindung .social-links a[href*="linkedin.com"] .brand-icon { color: #0a66c2; }
.verbindung .social-links a[href*="facebook.com"] .brand-icon { color: #0866ff; }
.verbindung .social-links a[href*="instagram.com"] .brand-icon { color: #a52c70; }
@media(max-width:760px) {
  .verbindung main > section:not(.hero):not(.discovery-section)::before { width: 230px; height: 50px; }
  .verbindung .quote-island::before { width: 190px; height: 40px; }
  .verbindung .social-links { gap: 12px; }
  .verbindung .social-links a { padding: 12px; }
}

/* Seerose im freien Raum unter der Ansatzüberschrift. */
.verbindung #weg .approach-seerose { width: min(100%, 340px); margin: 38px auto 0; }
.verbindung #weg .approach-seerose img { display: block; width: 100%; height: auto; border-radius: 44% 46% 42% 48% / 12% 16% 14% 12%; }
@media (max-width: 760px) {
  .verbindung #weg .approach-seerose { width: min(82%, 300px); margin: 30px auto 38px; }
}

/* Bärbels gezielte Atemräume zwischen den Abschnitten, 10. September. */
.verbindung #video { padding-bottom: clamp(120px, 11vw, 170px); }
.verbindung .quote-island:has(+ .discovery-section) { margin-bottom: clamp(110px, 11vw, 165px); }
.verbindung .singing-voices + .practice,
.verbindung .quote-island + #baerbel { padding-top: clamp(155px, 14vw, 210px); }
.verbindung #blog { margin-top: clamp(125px, 12vw, 180px); }
.verbindung #kontakt { padding-top: clamp(170px, 15vw, 225px); }

/* Angebote: jede Nummer eine eigene Zeile, abwechselnd links und rechts. */
.verbindung #angebote .sectionhead { margin-bottom: 74px; }
.verbindung #angebote .original-offer-list {
  display: flex; flex-direction: column; gap: 48px; counter-reset: angebot;
}
.verbindung #angebote .original-offer-list article:nth-child(n) {
  position: relative; counter-increment: angebot; align-self: flex-start;
  width: 76%; max-width: 780px; min-width: 0; margin: 0;
  padding: 36px clamp(24px, 4vw, 52px) 28px clamp(65px, 7vw, 90px);
  border: 1px solid #2586a426; border-radius: 26px;
  background: linear-gradient(110deg, #81d7e324, #dbe4da18);
}
.verbindung #angebote .original-offer-list article:nth-child(even) { align-self: flex-end; }
.verbindung #angebote .original-offer-list article::before {
  content: counter(angebot, decimal-leading-zero); position: absolute; left: 25px; top: 42px;
  font: italic 23px/1 Georgia, serif; color: #2586a4;
}
.verbindung #angebote .original-offer-list h3 {
  font-size: clamp(27px, 2.6vw, 38px); line-height: 1.25;
  letter-spacing: -.025em; overflow-wrap: anywhere; text-wrap: balance;
}
.verbindung #angebote .original-offer-list details { margin-top: 15px; padding-top: 0; }
.verbindung #angebote .original-offer-list summary { width: fit-content; gap: 20px; padding: 10px 2px; color: #226b7c; }
.verbindung #angebote .original-offer-list summary::after {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px;
  border: 1px solid #2586a44d; border-radius: 50%; font-size: 24px;
  transition: background .2s ease, transform .2s ease;
}
.verbindung #angebote .original-offer-list summary:hover::after { background: #81d7e340; transform: rotate(8deg); }
.verbindung #angebote .original-offer-list details[open] summary { border-bottom: 1px solid #2586a440; }
.verbindung #angebote .original-offer-list .original-copy { max-width: 760px; overflow-wrap: anywhere; }
@media(max-width:760px) {
  .verbindung #video { padding-bottom: 100px; }
  .verbindung .quote-island:has(+ .discovery-section) { margin-bottom: 95px; }
  .verbindung .singing-voices + .practice,
  .verbindung .quote-island + #baerbel { padding-top: 125px; }
  .verbindung #blog { margin-top: 100px; }
  .verbindung #kontakt { padding-top: 140px; }
  .verbindung #angebote .sectionhead { margin-bottom: 56px; }
  .verbindung #angebote .original-offer-list { gap: 30px; }
  .verbindung #angebote .original-offer-list article:nth-child(n) {
    width: 100%; max-width: none; align-self: stretch; padding: 28px 20px 22px 52px;
  }
  .verbindung #angebote .original-offer-list article::before { left: 14px; top: 34px; font-size: 19px; }
  .verbindung #angebote .original-offer-list h3 { font-size: 27px; }
}

/* Der Blog erhält den gleichen feinen Abschnittsbogen auch nach einer Zitatinsel. */
.verbindung main > .quote-island + #blog.blog-planned::before { display: block; }

/* Mehr Luft zwischen sichtbarer E-Mail und Social-Media-Reihe. */
.verbindung #kontakt > .email-address + .social-links { margin-top: 85px; }
@media (max-width: 760px) {
  .verbindung #kontakt > .email-address + .social-links { margin-top: 65px; }
}

/* Ursprüngliche Georgia: kursiv und um 2px vergrößert. */
.verbindung > header > .brand { font-size: 29px; font-style: italic; }
@media (max-width: 760px) {
  .verbindung > header > .brand { font-size: 27px; }
}

/* Nur der Trennbogen zwischen Einstieg und Vorstellungsvideo: etwas höher. */
.verbindung main > #video.introduction-film::before { top: -90px; }

/* Nur die beiden Hero-Zeilen: jeweils 2px größer. */
.verbindung .hero-copy > p.location-intro { font-size: 17px; }
@media (max-width: 760px) {
  .verbindung .hero-copy > p.location-intro { font-size: 16px; }
}

/* 11. September: drei gezielte Übergänge um Ansatz und Entdeckungsreise. */
.verbindung main > #weg.original-approach { padding-bottom: 280px; }
.verbindung main > #weg + .quote-island:has(+ .discovery-section) {
  margin-bottom: clamp(170px, calc(11vw + 60px), 225px);
}
.verbindung main > .discovery-section:has(+ #angebote) { padding-bottom: 230px; }
@media (max-width: 760px) {
  .verbindung main > #weg.original-approach { padding-bottom: 210px; }
  .verbindung main > #weg + .quote-island:has(+ .discovery-section) { margin-bottom: 155px; }
  .verbindung main > .discovery-section:has(+ #angebote) { padding-bottom: 170px; }
}

/* Nur Ornament zwischen Entdeckungsreise und Angeboten, Abstände bleiben erhalten. */
.verbindung main > .discovery-section + #angebote::before { top: -64px; }
@media (max-width: 760px) {
  .verbindung main > .discovery-section + #angebote::before { top: -40px; }
}

/* Nur Übergang Sabines Zitat zum Über-mich-Abschnitt. */
.verbindung main > .quote-island + #baerbel { padding-top: clamp(190px, calc(14vw + 35px), 245px); }
@media (max-width: 760px) {
  .verbindung main > .quote-island + #baerbel { padding-top: 155px; }
}

/* Q&A: vier Themengruppen nacheinander, abwechselnd links und rechts. */
.verbindung #fragen { display: block; }
.verbindung #fragen > h2 { margin-bottom: 76px; }
.verbindung #fragen > .question-list { display: flex; flex-direction: column; gap: 48px; padding-top: 0; }
.verbindung #fragen .question-group {
  width: 76%; max-width: 780px; min-width: 0; margin: 0; align-self: flex-start;
}
.verbindung #fragen .question-group:nth-child(even) { align-self: flex-end; }
.verbindung #fragen .question-group h3 { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .verbindung #fragen > h2 { margin-bottom: 55px; }
  .verbindung #fragen > .question-list { gap: 35px; }
  .verbindung #fragen .question-group { width: 100%; max-width: none; align-self: stretch; }
}

/* Alle Zitatinseln ohne Ornament; dessen Platz bleibt für unveränderte Abstände erhalten. */
.verbindung .quote-island::before { background-image: none; }

/* Mehr Raum und ein Abschnittsbogen nach der Gesangsstimme, außerhalb des Zitats. */
.verbindung main > .singing-voices + .practice {
  padding-top: clamp(221px, calc(14vw + 66px), 276px);
}
.verbindung main > .quote-island.singing-voices + section.practice::before {
  display: block;
  top: calc(clamp(221px, calc(14vw + 66px), 276px) / 2 - 32px);
}
@media (max-width: 760px) {
  .verbindung main > .singing-voices + .practice { padding-top: 177px; }
  .verbindung main > .quote-island.singing-voices + section.practice::before { top: 63.5px; }
}

/* Nach dem letzten Angebot etwas mehr Raum vor der Gesangsstimme. */
.verbindung main > #angebote:has(+ .singing-voices) { padding-bottom: 116px; }
@media (max-width: 760px) {
  .verbindung main > #angebote:has(+ .singing-voices) { padding-bottom: 87px; }
}

/* Abschnittsbogen nach Sabines Zitat, mittig im bestehenden Über-mich-Abstand. */
.verbindung main > .quote-island + section#baerbel::before {
  display: block;
  top: calc(clamp(190px, calc(14vw + 35px), 245px) / 2 - 32px);
}
@media (max-width: 760px) {
  .verbindung main > .quote-island + section#baerbel::before { top: 52.5px; }
}

/* Nach Matthias' Zitat: mehr Raum und ein mittiger Abschnittsbogen vor Q&A. */
.verbindung main > .quote-island + section#fragen { padding-top: 165px; }
.verbindung main > .quote-island + section#fragen::before { display: block; top: 25.5px; }
@media (max-width: 760px) {
  .verbindung main > .quote-island + section#fragen { padding-top: 120px; }
  .verbindung main > .quote-island + section#fragen::before { top: 17.5px; }
}

/* Nur das Q&A-Label deutlicher lesbar. */
.verbindung #fragen > p.eyebrow { font-size: 18px; }
@media (max-width: 760px) {
  .verbindung #fragen > p.eyebrow { font-size: 16px; }
}

/* Claudia-Übergang: davor etwas kürzer, danach mehr Raum mit mittigem Bogen. */
.verbindung main > #weg.original-approach { padding-bottom: 110px; }
.verbindung main > #weg + .quote-island:has(+ .discovery-section) {
  margin-bottom: clamp(230px, calc(11vw + 120px), 285px);
}
.verbindung main > #weg + .quote-island + .discovery-section { position: relative; }
.verbindung main > #weg + .quote-island + .discovery-section::before {
  content: ''; display: block; position: absolute; left: 50%;
  transform: translateX(-50%); width: clamp(230px, 29vw, 360px); height: 64px;
  top: calc((70px - clamp(230px, calc(11vw + 120px), 285px) - 64px) / 2);
  background: none center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 760px) {
  .verbindung main > #weg.original-approach { padding-bottom: 80px; }
  .verbindung main > #weg + .quote-island:has(+ .discovery-section) { margin-bottom: 200px; }
  .verbindung main > #weg + .quote-island + .discovery-section::before {
    width: 230px; height: 50px; top: -107.5px;
  }
}

/* Einstieg zum Video: etwas mehr Raum, Bogen über die gesamte Abstandsstrecke zentriert. */
.verbindung main > #video.introduction-film { margin-top: clamp(72px, calc(3vw + 48px), 96px); }
.verbindung main > #video.introduction-film::before {
  top: calc((100px - 150px - clamp(72px, calc(3vw + 48px), 96px) - 64px) / 2);
}
@media (max-width: 760px) {
  .verbindung main > #video.introduction-film { margin-top: 46px; }
  .verbindung main > #video.introduction-film::before { top: -45.5px; }
}

/* Ansatz: Themen etwas tiefer; zwei Themenüberschriften einheitlich in Versalien. */
.verbindung #weg > .approach-copy > details:nth-child(3) > summary { text-transform: none; }
.verbindung #weg > .approach-copy > details:nth-child(4) > summary .career-title { text-transform: uppercase; }
@media (min-width: 761px) {
  .verbindung #weg > .approach-copy { padding-top: 32px; }
}

/* Nur der Trennschwung vor dem Vorstellungsvideo entfällt. */
.verbindung main > #video.introduction-film::before { display: none; }

/* Desktop: Inhalt innerhalb des Hero-Hintergrunds 36px tiefer. */
@media (min-width: 761px) {
  .verbindung main > .hero { padding-top: 101px; }
}

/* DOCX-Formatierung ausschließlich im Ansatz-Konzepttext. */
.verbindung #weg .concept-docx :is(p,li) { line-height: 1.5; }
.verbindung #weg .concept-docx ul { margin: 20px 0; padding-left: 1.5em; }
.verbindung #weg .concept-docx li { margin: 0 0 .4em; }
.verbindung #weg .concept-docx em { font-style: italic; }
.verbindung #weg .concept-docx strong { font-weight: 700; }

/* Nur Abstand nach Wirkungsliste vor weiteren Informationen im Konzept. */
.verbindung #weg .concept-docx > p.concept-more-info { margin-top: 44px; }

/* Nur die Namenszeile unter dem ersten Hero-Porträt. */
.verbindung .hero > .hero-portrait > figcaption { margin-left: calc(12% + 16px); font-size: 15px; }

/* Eigenständiges Zitat nur unter dem ausgeklappten Gesangsangebot. */
.verbindung #angebote .singing-offer-quote { margin: 36px 0 8px; padding: 24px 28px; background: rgba(243,159,74,.13); border-radius: 24px 36px 28px 32px; }
.verbindung #angebote .singing-offer-quote blockquote { margin: 0; }
.verbindung #angebote .singing-offer-quote blockquote p { margin: 0; color: #173f4b; font: 26px/1.5 Georgia, serif; }
.verbindung #angebote .singing-offer-quote figcaption { margin-top: 22px; font-size: 14px; color: #254d55; letter-spacing: .035em; }

/* Namenszeile nur im separaten orangefarbenen Atem-/Gesangsblock. */
.verbindung .quote-island.singing-voices figcaption { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; font-style: normal; font-weight: 400; }

/* Nur separater orangefarbener Dreizeiler nach den Angeboten. */
.verbindung main > .quote-island.singing-voices > div { position: relative; top: -16px; }
.verbindung main > .quote-island.singing-voices blockquote p { font-size: 30px; font-style: italic; line-height: 40.48px; }
.verbindung main > .quote-island.singing-voices figcaption { font-size: 16px; font-style: italic; line-height: 23.1px; margin-top: 16px; }
@media (max-width: 760px) {
  .verbindung main > .quote-island.singing-voices blockquote p { font-size: 27px; line-height: 36.04px; }
}

/* Nur der separate Dreizeiler: ruhiges Hellblau mit weichem Licht aus der Mitte. */
.verbindung main > .quote-island.singing-voices { background: none; isolation: isolate; border-color: transparent; }
.verbindung main > .quote-island.singing-voices::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(249, 254, 255, .98) 0%, rgba(190, 224, 240, .52) 48%, rgba(190, 224, 240, .12) 100%);
  -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at center, #000 55%, transparent 100%);
}

/* Word-Formatierung nur im Ansatz-Modul Atem und seine Wirkung. */
.verbindung #weg .wirkung-docx :is(p,li) { line-height: 1.5; margin: 0; }
.verbindung #weg .wirkung-docx ul { margin: 0; padding-left: 1.5em; list-style-type: disc; }
.verbindung #weg .wirkung-docx > .docx-gap { margin-top: 1.5em; }
.verbindung #weg .wirkung-docx strong { font-weight: 700; }
.verbindung #weg .wirkung-docx em { font-style: italic; }

/* Word-Formatierung nur im Ansatz-Modul Das Besondere dieser Atem- und Körperarbeit. */
.verbindung #weg .besonderes-docx :is(p,li) { line-height: 1.5; margin: 0; }
.verbindung #weg .besonderes-docx ul { margin: 0; padding-left: 1.5em; list-style-type: disc; }
.verbindung #weg .besonderes-docx > .docx-gap { margin-top: 1.5em; }
.verbindung #weg .besonderes-docx strong { font-weight: 700; }
.verbindung #weg .besonderes-docx em { font-style: italic; }

/* Headerprobe: aufrechter Name und originaler handschriftlicher Untertitel. */
.verbindung > header > .brand { font-style: normal; }
.verbindung > header > .brand > span { line-height: 1; margin-top: 5px; }
.verbindung > header > .brand .header-wordmark { display: block; width: 210px; height: auto; max-width: calc(88vw - 4px); }

/* Nur handschriftlicher Header-Untertitel: leicht nach rechts oben ansteigend. */
.verbindung > header > .brand .header-wordmark { transform: rotate(-3deg); transform-origin: center; }


/* Nur die Hero-Bezeichnung zwei Pixel größer; Ortszeile unverändert. */
.verbindung .hero-copy > p.location-intro > .hero-designation { font-size: 19px; }
@media (max-width: 760px) {
  .verbindung .hero-copy > p.location-intro > .hero-designation { font-size: 18px; }
}



/* Unmaskiertes Startporträt mit hellem, leicht rechts versetztem Schatten. */
.verbindung .hero > .hero-portrait > img { box-shadow: 10px 8px 24px rgba(36, 92, 99, .16); }

/* Word-Formatierung nur im Ansatz-Modul Wirkungsebenen der Atem- und Körperarbeit. */
.verbindung #weg .wirkungsebenen-docx :is(p,li) { line-height: 1.5; margin: 0; }
.verbindung #weg .wirkungsebenen-docx ul { margin: 0; padding-left: 1.5em; list-style-type: disc; }
.verbindung #weg .wirkungsebenen-docx > .docx-gap { margin-top: 1.5em; }
.verbindung #weg .wirkungsebenen-docx strong { font-weight: 700; }
.verbindung #weg .wirkungsebenen-docx em { font-style: italic; }

/* Nur Abstand unmittelbar nach der Beispiele-Einleitung. */
.verbindung #weg .wirkungsebenen-docx > p.examples-intro { margin-bottom: 28px; }

/* Atem wird Erfahrung: gleiche Schriftgröße wie Q&A. */
.verbindung main > section.practice > div > p.eyebrow { font-size: 16px; }
@media (max-width: 760px) {
  .verbindung main > section.practice > div > p.eyebrow { font-size: 14px; }
}

/* Word-Formatierung nur im Ansatz-Modul Webinar Die Kraft des Atems. */
.verbindung #angebote .webinar-docx :is(p,li) { line-height: 1.5; margin: 0; }
.verbindung #angebote .webinar-docx ul { margin: 0; padding-left: 1.5em; list-style-type: disc; }
.verbindung #angebote .webinar-docx > .docx-gap { margin-top: 1.5em; }
.verbindung #angebote .webinar-docx strong { font-weight: 700; }
.verbindung #angebote .webinar-docx em { font-style: italic; }

/* Word-Formatierung nur im Ansatz-Modul Workshop intensive. */
.verbindung #angebote .workshop-intensive-docx :is(p,li) { line-height: 1.5; margin: 0; white-space: pre-wrap; tab-size: 4; }
.verbindung #angebote .workshop-intensive-docx ul { margin: 0; padding-left: 1.5em; list-style-type: disc; }
.verbindung #angebote .workshop-intensive-docx > .docx-gap { margin-top: 1.5em; }
.verbindung #angebote .workshop-intensive-docx strong { font-weight: 700; }
.verbindung #angebote .workshop-intensive-docx em { font-style: italic; }

/* Word-Formatierung nur im Ansatz-Modul Retreat. */
.verbindung #angebote .retreat-docx :is(p,li) { line-height: 1.5; margin: 0; white-space: pre-wrap; tab-size: 4; }
.verbindung #angebote .retreat-docx ul { margin: 0; padding-left: 1.5em; list-style-type: disc; }
.verbindung #angebote .retreat-docx > .docx-gap { margin-top: 1.5em; }
.verbindung #angebote .retreat-docx strong { font-weight: 700; }
.verbindung #angebote .retreat-docx em { font-style: italic; }

/* Originale Strich-Aufzählungen im Retreat nach der ersten Punktliste. */
.verbindung #angebote .retreat-docx > ul:not(:first-of-type) > li::marker { content: "-  "; }

/* Word-Formatierung nur im Ansatz-Modul Retreat. */
.verbindung #angebote .einzelcoaching-docx :is(p,li) { line-height: 1.5; margin: 0; white-space: pre-wrap; tab-size: 4; }
.verbindung #angebote .einzelcoaching-docx :is(ul,ol) { margin: 0; padding-left: 1.5em; }
.verbindung #angebote .einzelcoaching-docx > .docx-gap { margin-top: 1.5em; }
.verbindung #angebote .einzelcoaching-docx strong { font-weight: 700; }
.verbindung #angebote .einzelcoaching-docx em { font-style: italic; }

/* Originale Strichliste nur bei der Einzelcoaching-Zielgruppe. */
.verbindung #angebote .einzelcoaching-docx > ul:last-of-type > li::marker { content: "-  "; }

/* Word-Formatierung nur im Ansatz-Modul Atempause. */
.verbindung #angebote .atempause-docx :is(p,li) { line-height: 1.5; margin: 0; white-space: pre-wrap; tab-size: 4; }
.verbindung #angebote .atempause-docx ul { margin: 0; padding-left: 1.5em; list-style-type: disc; }
.verbindung #angebote .atempause-docx > .docx-gap { margin-top: 1.5em; }
.verbindung #angebote .atempause-docx strong { font-weight: 700; }
.verbindung #angebote .atempause-docx em { font-style: italic; }

/* Webinar: gleicher Abstand nach der Themenliste wie davor. */
.verbindung #angebote .webinar-docx > ul.docx-gap { margin-bottom: 1.5em; }

/* Word-Formatierung nur im Ansatz-Modul Retreat. */
.verbindung #angebote .workshopreihe-docx :is(p,li) { line-height: 1.5; margin: 0; white-space: pre-wrap; tab-size: 4; }
.verbindung #angebote .workshopreihe-docx :is(ul,ol) { margin: 0; padding-left: 1.5em; }
.verbindung #angebote .workshopreihe-docx > .docx-gap { margin-top: 1.5em; }
.verbindung #angebote .workshopreihe-docx strong { font-weight: 700; }
.verbindung #angebote .workshopreihe-docx em { font-style: italic; }

/* Einheitlicher Textbeginn in aufgeklappten Bereichen; innere Abstände bleiben erhalten. */
.verbindung main details > summary + .original-copy { padding-top: 24px; }
.verbindung main details > summary + .original-copy > p:first-child,
.verbindung main details > summary + .original-copy > div > p:first-child { margin-top: 0; }
.verbindung main details > summary + p { margin-top: 24px; }

/* Atempause: leere Zeile aus endständigem Word-Umbruch vor den beiden Folgeabschnitten. */
.verbindung #angebote .atempause-docx > ul + p { margin-top: 1.5em; }

/* Nur drei gezielte Abstandsgruppen im Retreat. */
.verbindung #angebote .retreat-docx > p:nth-child(2) { margin-top: 24px; }
.verbindung #angebote .retreat-docx > p:nth-child(12) { margin-top: 24px; }
.verbindung #angebote .retreat-docx > p:nth-child(n+13):nth-child(-n+15) { margin-top: 4px; }

/* Retreat: kleiner Folgeabstand im abschließenden Teilnahmeabschnitt. */
.verbindung #angebote .retreat-docx > p:nth-last-child(2) + p:last-child { margin-top: 4px; }

/* Angebotsprüfung: nur bisher abstandslose Informations- und Listenfolgen. */
.verbindung #angebote .webinar-docx > p:nth-child(8) { margin-top: 24px; }
.verbindung #angebote .webinar-docx > p:nth-child(n+9):nth-child(-n+11),
.verbindung #angebote .workshop-intensive-docx > p:is(:nth-child(9), :nth-child(11), :nth-child(12)),
.verbindung #angebote .einzelcoaching-docx > p:is(:nth-child(5), :nth-child(6), :nth-child(9)),
.verbindung #angebote .workshopreihe-docx > p:is(:nth-child(7), :nth-child(8), :nth-child(9), :nth-child(13)),
.verbindung #angebote .atempause-docx > p:nth-child(6) { margin-top: 4px; }
.verbindung #angebote :is(.webinar-docx, .workshop-intensive-docx, .einzelcoaching-docx, .workshopreihe-docx) > ul > li + li { margin-top: 4px; }
.verbindung #angebote :is(.einzelcoaching-docx, .workshopreihe-docx) > ol > li + li { margin-top: 24px; }

/* Schriftprobe 15. September: nur Retreat-Fließtext, vorhandene Größen bewahren. */
.verbindung #angebote .retreat-docx {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
}
.verbindung #angebote .retreat-docx em { font-weight: inherit; }

/* Retreat-Schriftprobe: etwas kleiner, passend für Absätze und Listen. */
.verbindung #angebote .retreat-docx,
.verbindung #angebote .retreat-docx :is(p, li) { font-size: 16px; }
@media (max-width: 760px) {
  .verbindung #angebote .retreat-docx,
  .verbindung #angebote .retreat-docx :is(p, li) { font-size: 15px; }
}

/* Akzeptierte Retreat-Schrift für Fließtexte; Überschriften und Titel bewahren. */
body.verbindung {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
}
.verbindung > header,
.verbindung main summary,
.verbindung main .eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-weight: 400;
}
.verbindung > header > .brand { font-family: Georgia, serif; }
.verbindung main .eyebrow { font-family: sans-serif; }
/* Explizite bisherige Zitat-Schriften ersetzen; deren Größen bleiben erhalten. */
.verbindung main :is(blockquote p, figcaption) {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 300 !important;
}
.verbindung main :is(p, li, dd, figcaption) em { font-weight: inherit; }
.verbindung .original-copy :is(p, li) { font-size: 16px; }
.verbindung .film-heading > p:last-child,
.verbindung .discovery-instruction,
.verbindung .contact-locations { font-size: 16px; }
@media (max-width: 760px) {
  body.verbindung { font-size: 15px; }
  .verbindung .original-copy :is(p, li),
  .verbindung .film-heading > p:last-child,
  .verbindung .discovery-instruction,
  .verbindung .contact-locations { font-size: 15px; }
}

/* Mein Anliegen dauerhaft sichtbar statt als Aufklappmenü. */
.verbindung #baerbel .personal-concern { margin-bottom: 15px; }
.verbindung #baerbel .personal-concern > h3 {
  margin: 0;
  padding: 12px 0;
  font: 400 15px/1.65 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
.verbindung #baerbel .personal-concern > .original-copy { padding-top: 0; }
.verbindung #baerbel .personal-concern > .original-copy > p:first-child { margin-top: 0; }

/* Absatzgliederung aus Mein Anliegen ist es.docx. */
.verbindung #baerbel .concern-docx > p { margin: 0; }
.verbindung #baerbel .concern-docx > p.concern-gap-1 { margin-top: 1.8em; }
.verbindung #baerbel .concern-docx > p.concern-gap-2 { margin-top: 1.8em; }

/* Zusätzlicher Menüpunkt Termine: Header darf auf mittleren Breiten umbrechen. */
@media (min-width: 761px) and (max-width: 1200px) {
  .verbindung > header:has(nav a[href="termine.html"]) { flex-wrap: wrap; }
}

/* Atem und Beruf: Einladung auch bei geschlossenem Aufklapptext sichtbar. */
.verbindung #weg summary.career-summary { align-items: flex-start; }
.verbindung #weg .career-summary > span { min-width: 0; }
.verbindung #weg .career-title { display: block; }
.verbindung #weg .career-teaser {
  display: block;
  margin-top: 12px;
  font: 300 16px/1.65 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.verbindung #weg summary.career-summary::after { flex-shrink: 0; }
@media (max-width: 760px) {
  .verbindung #weg .career-teaser { font-size: 15px; }
}

/* Probe: deutlicher Lesehinweis unter Atem und Beruf. */
.verbindung #weg summary.career-summary::after { content: none; }
.verbindung #weg .career-toggle {
  display: block;
  width: fit-content;
  margin-top: 16px;
  padding: 8px 0;
  color: #226b7c;
  font: 400 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.verbindung #weg .career-open { display: none; }
.verbindung #weg details[open] > .career-summary .career-closed { display: none; }
.verbindung #weg details[open] > .career-summary .career-open { display: inline; }
.verbindung #weg .career-summary:hover .career-toggle { color: #173c43; }

/* Fünf Ansatz-Titel in Versalien; Einleitungen bleiben normal geschrieben. */
.verbindung #weg summary.career-summary .career-title { text-transform: uppercase; }
/* Einheitliche Lesehinweise für alle übrigen Aufklappbereiche. */
.verbindung main details > summary.reading-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.verbindung main details > summary.reading-summary::after { content: none !important; display: none !important; }
.verbindung main .reading-toggle {
  display: block;
  width: fit-content;
  margin-top: 16px;
  padding: 8px 0;
  color: #226b7c;
  font: 400 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.verbindung main .reading-only .reading-toggle { margin-top: 0; }
.verbindung main .reading-open { display: none; }
.verbindung main details[open] > summary .reading-closed { display: none; }
.verbindung main details[open] > summary .reading-open { display: inline; }
.verbindung main summary:hover .reading-toggle { color: #173c43; }

/* Seerose näher an die Höhe des ersten Weiterlesen-Hinweises rücken. */
@media (min-width: 761px) {
  .verbindung #weg .approach-seerose { margin-top: 208px; }
}

/* Grafischer Versuch: geschwungener Farbfluss unter der Seerose. */
.verbindung #weg > .approach-intro { position: relative; }
.verbindung #weg .approach-colour-flow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(94%, 390px);
  pointer-events: none;
}
.verbindung #weg .approach-colour-flow[hidden] { display: none; }
.verbindung #weg .approach-colour-flow img { display: block; width: 100%; height: 100%; }
@media (max-width: 760px) {
  .verbindung #weg .approach-colour-flow { display: none; }
}

/* Farbkomposition auch unter den übrigen großen Abschnittsüberschriften. */
.verbindung main > section:not(.hero):not(.dates-home) h2 {
  position: relative;
  isolation: isolate;
}
.verbindung main > section:not(.hero):not(.dates-home) h2::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(108%, var(--heading-art-width, 440px));
  aspect-ratio: 3 / 2;
  left: -5%;
  top: 50%;
  transform: translateX(-60px) translateY(-43%) rotate(-7deg) scaleX(-1);
  background: url("assets/farbkomposition.jpg") center / cover no-repeat;
  opacity: .62;
  border-radius: 44% 56% 48% 52% / 45% 43% 57% 55%;
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 48%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 48%, transparent 100%);
}
.verbindung #video h2 { --heading-art-width: 410px; }
.verbindung #weg h2 { --heading-art-width: 440px; }
.verbindung .discovery-section h2 { --heading-art-width: 360px; }
.verbindung #angebote h2 { --heading-art-width: 350px; }
.verbindung .practice h2 { --heading-art-width: 580px; }
.verbindung #baerbel h2 { --heading-art-width: 460px; }
.verbindung #fragen h2 { --heading-art-width: 410px; }
.verbindung #blog h2 { --heading-art-width: 470px; }
.verbindung #kontakt h2 { --heading-art-width: 590px; }
.verbindung main > :is(.practice, .about) h2::before {
  left: 2%;
  transform: translateX(-60px) translateY(-40%) rotate(7deg) scaleX(-1);
}
.verbindung main > :is(#blog, #kontakt) h2::before {
  left: 50%;
  transform: translateX(-60px) translate(-50%, -43%) rotate(-5deg) scaleX(-1);
}
@media (max-width: 760px) {
  .verbindung main > section:not(.hero):not(.dates-home) h2::before {
    width: min(105%, 340px);
  }
}

/* Praxisüberschrift: Farbkomposition etwas großzügiger. */
@media (min-width: 761px) {
  .verbindung main > section.practice:not(.hero):not(.dates-home) h2::before { width: min(145%, 580px); left: calc(-5% - 48px); transform: translateX(-60px) translateY(-52%) rotate(7deg) scaleX(-1); }
}

/* Feedback-Zitate: lichtvolle Melierung und sanfter Schatten bei erhaltener Kontur. */
.verbindung main > .quote-island:not(.singing-voices),
.verbindung #angebote .singing-offer-quote {
  position: relative;
  isolation: isolate;
  background: transparent;
  border-color: rgba(77, 132, 151, .22);
  box-shadow: 0 9px 28px rgba(52, 99, 114, .09), 0 2px 7px rgba(52, 99, 114, .035);
}
.verbindung #angebote .singing-offer-quote {
  box-shadow: inset 0 0 0 1px rgba(77, 132, 151, .22), 0 9px 28px rgba(52, 99, 114, .09), 0 2px 7px rgba(52, 99, 114, .035);
}
.verbindung main > .quote-island:not(.singing-voices)::after,
.verbindung #angebote .singing-offer-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 30% 72% at 21% 31%, #f3fafb 0%, rgba(243,250,251,.94) 24%, rgba(243,250,251,.48) 58%, transparent 100%),
    radial-gradient(ellipse 28% 76% at 77% 75%, #f2f9fa 0%, rgba(242,249,250,.90) 22%, rgba(242,249,250,.40) 60%, transparent 100%),
    radial-gradient(ellipse 22% 50% at 94% 12%, rgba(243,250,251,.92) 0%, transparent 100%),
    radial-gradient(ellipse 30% 52% at 46% 97%, rgba(241,249,245,.85) 0%, transparent 100%),
    radial-gradient(ellipse 32% 72% at 51% 26%, rgba(223,239,245,.90) 0%, transparent 100%),
    #e6f1f3;
}

/* Einzelkorrekturen der Farbflächen: nur horizontale Position. */
.verbindung #angebote h2::before,
.verbindung main > section.practice h2::before { translate: 24px 0; }
.verbindung #baerbel h2::before { translate: -24px 0; }

/* Weitere horizontale Feinabstimmung einzelner Überschriftenflächen. */
.verbindung #video h2::before,
.verbindung #weg h2::before { translate: -12px 0; }
.verbindung #kontakt h2::before { translate: -48px 0; }

/* Seerosen-Probe: hauchzarter Farbschimmer um die vorhandene Bildkontur. */
.verbindung #weg .approach-seerose {
  position: relative;
  isolation: isolate;
  border-radius: 44% 46% 42% 48% / 12% 16% 14% 12%;
}
.verbindung #weg .approach-seerose::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(145deg,
    rgba(129, 215, 227, .46) 0%,
    rgba(183, 210, 191, .40) 47%,
    rgba(243, 181, 104, .25) 78%,
    rgba(129, 215, 227, .32) 100%);
  filter: blur(7px);
}

/* Praxisbild: Unterschrift horizontal zur Bildmitte ausrichten. */
.verbindung main > section.practice > figure > figcaption { text-align: center; transform: rotate(-2deg); transform-origin: center; }
@media (max-width: 760px) {
  .verbindung main > section.practice > figure > figcaption { transform: rotate(-1deg); }
}

/* Newsletter: persönliche Einladung zwischen Blog und Terminen. */
.verbindung main > .newsletter-invitation {
  display: block; padding: 150px 6vw 100px; margin: 0 auto;
  max-width: 1240px; box-sizing: border-box;
}
.verbindung .newsletter-panel {
  padding: clamp(36px, 6vw, 76px); text-align: center;
  border-radius: 48% 44% 40px 40px / 28px 36px 40px 40px;
  border: 1px solid rgba(75, 130, 136, .14);
  background: radial-gradient(ellipse at 18% 18%, rgba(243,225,184,.30), transparent 65%),
    linear-gradient(130deg, rgba(226,241,236,.66), rgba(206,231,237,.48));
}
.verbindung .newsletter-panel h2 { margin: 16px 0 28px; font-size: clamp(36px, 4.5vw, 62px); }
.verbindung .newsletter-intro { max-width: 650px; margin: 0 auto 34px; font-size: 20px; line-height: 1.65; }
.verbindung .newsletter-fields { max-width: 540px; margin: 0 auto; text-align: left; }
.verbindung .newsletter-fields label { display: block; font-size: 16px; margin-bottom: 10px; }
.verbindung .newsletter-fields input {
  display: block; width: 100%; box-sizing: border-box; padding: 17px 20px;
  border: 1px solid rgba(23,60,67,.30); border-radius: 8px;
  background: rgba(255,255,255,.55); color: #173c43; font: inherit; opacity: 1;
}
.verbindung .newsletter-fields button {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; margin-top: 16px; padding: 18px 22px; border: 0; border-radius: 8px;
  background: #244f55; color: #fff; font: inherit; font-size: 18px; text-align: left; opacity: 1;
}
.verbindung .newsletter-note { margin: 22px 0 0; font-size: 14px; }
.verbindung .newsletter-preview { margin: 8px 0 0; font-size: 14px; color: #49676b; }
@media (max-width: 760px) {
  .verbindung main > .newsletter-invitation { padding: 90px 6vw 64px; }
  .verbindung .newsletter-panel { padding: 36px 22px; border-radius: 24px; }
  .verbindung .newsletter-intro { font-size: 18px; }
}

/* Newsletter: offener weißer Bogen statt Kreisen hinter der Überschrift. */
.verbindung main > #newsletter.newsletter-invitation h2::before { content: none; }
.verbindung .newsletter-panel {
  position: relative; isolation: isolate; background: transparent;
  border-color: transparent;
}
.verbindung .newsletter-panel::before {
  content: ""; position: absolute; inset: -12px; z-index: -1;
  pointer-events: none;
  background: url('assets/farbkomposition.jpg') center / cover no-repeat;
  opacity: .36;
  border-radius: 46% 48% 45% 47% / 42% 43% 48% 48%;
  -webkit-mask-image: radial-gradient(ellipse, #000 57%, transparent 74%);
  mask-image: radial-gradient(ellipse, #000 57%, transparent 74%);
}

/* Aktueller Workshop: sanftes laufendes Band unter der Kopfzeile. */
.verbindung .workshop-ribbon {
  margin: 16px 0 0; padding: 18px 0; overflow: hidden;
  border-radius: 50% 45% 48% 52% / 12px 9px 12px 9px;
  background: linear-gradient(105deg, rgba(129,215,227,.22), rgba(170,209,201,.36), rgba(235,213,167,.20));
  border-block: 1px solid rgba(75,130,136,.13);
}
.verbindung .workshop-ribbon-link { display: block; color: #fffaf0; text-decoration: none; }
.verbindung .workshop-ribbon-track { display: flex; width: max-content; animation: workshop-scroll 32s linear infinite; }
.verbindung .workshop-ribbon-group { flex: 0 0 auto; padding-right: 80px; }
.verbindung .workshop-ribbon-item { display: flex; align-items: center; gap: 32px; white-space: nowrap; font-size: 16px; }
.verbindung .workshop-ribbon-item strong { font-weight: 500; letter-spacing: .05em; }
.verbindung .ribbon-link-label { text-decoration: underline; text-underline-offset: 5px; }
.verbindung .workshop-ribbon:hover .workshop-ribbon-track,
.verbindung .workshop-ribbon:focus-within .workshop-ribbon-track { animation-play-state: paused; }
@keyframes workshop-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .verbindung .workshop-ribbon-track { animation: none; width: auto; }
  .verbindung .workshop-ribbon-group { padding: 0 24px; width: 100%; }
  .verbindung .workshop-ribbon-group[aria-hidden] { display: none; }
  .verbindung .workshop-ribbon-item { flex-wrap: wrap; justify-content: center; gap: 8px 24px; white-space: normal; text-align: center; }
}
@media (max-width: 760px) {
  .verbindung .workshop-ribbon-item { font-size: 14px; gap: 24px; }
}

/* Banner-Probe: leichte Außenwelle und transparente goldene Gegenwelle. */
.verbindung .workshop-ribbon {
  position: relative; isolation: isolate; padding: 29px 0;
  border: 0; border-radius: 0; background: transparent;
}
.verbindung .workshop-ribbon::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('assets/workshop-wellen.svg') center / 100% 100% no-repeat;
}

/* Goldwelle schwingt unabhängig vom lesbaren Termintext. */
.verbindung .workshop-ribbon::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('assets/workshop-goldwelle.svg') 0 center / 720px 100% repeat-x;
  animation: workshop-gold-sway 12s linear infinite;
}
@keyframes workshop-gold-sway {
  from { background-position: 0 center; }
  to { background-position: -720px center; }
}
.verbindung.paused .workshop-ribbon::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .verbindung .workshop-ribbon::after { animation: none; }
}

/* Zwei eigenständig verlinkte Termine, gleiche ruhige Laufgeschwindigkeit. */
.verbindung .workshop-ribbon-group { display: flex; align-items: center; gap: 80px; }
.verbindung .workshop-ribbon-item { color: #fffaf0; text-decoration: none; }
.verbindung .workshop-ribbon-track { animation-duration: 60s; }
@media (prefers-reduced-motion: reduce) {
  .verbindung .workshop-ribbon-group { flex-direction: column; gap: 20px; }
  .verbindung .workshop-ribbon-group[aria-hidden] { display: none; }
}

/* WordPress-Vorschau: Verwaltungsleiste nicht ueber den Seitenkopf legen. */
html:has(> body.verbindung.admin-bar) { scroll-padding-top: 62px; }
@media (max-width: 782px) {
  html:has(> body.verbindung.admin-bar) { scroll-padding-top: 76px; }
}
@media (max-width: 600px) {
  body.verbindung.admin-bar #wpadminbar { position: fixed; top: 0; }
}

/* Teilnahmehinweis im Kontakt: helle Flaeche mit weich transparentem Rand. */
body.verbindung #kontakt > details {box-sizing:border-box;padding:15px 0;border:0;box-shadow:none;background:transparent;}
body.verbindung #kontakt > details > summary.reading-summary {box-sizing:border-box;width:max-content;max-width:100%;padding:16px 20px;background:transparent;}
body.verbindung #kontakt > details > summary.reading-summary > .reading-title {padding:8px 20px;margin:-8px -20px;background:radial-gradient(ellipse at center,rgba(255,255,255,.76) 0%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.20) 70%,rgba(255,255,255,0) 88%);}