/* Eigenständig geschriebene Gestaltung der VitalPro-Startseite. */
:root{--tinte:#19232d;--text:#384149;--tuerkis:#2d8188;--tuerkis-dunkel:#246169;--orange:#eb842b;--hell:#f5f6fa;--linie:#e3e7e7;--radius:30px;--schatten:0 18px 42px #1727310c}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;color:var(--text);background:#fff;font-family:Poppins,Arial,Helvetica,sans-serif;font-weight:300;font-size:18px;line-height:1.65}a{color:var(--tuerkis-dunkel);text-underline-offset:5px}img{display:block;max-width:100%;height:auto}h1,h2,h3{color:var(--tinte);font-weight:500;line-height:1.13;letter-spacing:-1.2px;margin:0 0 20px}h1{font-size:clamp(46px,5.9vw,70px);max-width:630px;letter-spacing:-2.3px}h2{font-size:clamp(32px,3.75vw,44px)}h3{font-size:27px;letter-spacing:-.8px}p{margin:0 0 22px}strong{font-weight:700}a:focus-visible,summary:focus-visible{outline:3px solid #155965;outline-offset:5px}a:hover{text-decoration:underline}.breite{width:calc(100% - 36px);max-width:1200px;margin-inline:auto}.schmal{max-width:960px}.sprunglink{position:fixed;left:20px;top:-100px;background:white;padding:12px 20px;z-index:30}.sprunglink:focus{top:12px}.kontaktleiste{background:var(--tuerkis);color:white;font-size:15px;padding:7px 0}.kontaktleiste .breite{display:flex;gap:30px;align-items:center}.kontaktleiste a{color:white;text-decoration:none}.navigation{position:sticky;top:0;z-index:10;background:#fff;box-shadow:0 2px 4px #14232c25}.navigationszeile{display:flex;gap:65px;align-items:center;min-height:78px}.navlogo{width:175px;height:auto}.navigation nav{display:flex;align-items:center;gap:45px;font-size:16px}.navigation nav>a,.leistungsmenue summary{text-decoration:none;color:var(--tuerkis-dunkel)}.leistungsmenue{position:relative}.leistungsmenue summary{cursor:pointer;text-transform:uppercase;padding:20px 0;list-style-position:inside}.menueinhalt{position:absolute;top:100%;left:-20px;min-width:265px;padding:12px;background:white;border:1px solid var(--linie);border-radius:0 0 18px 18px;box-shadow:var(--schatten)}.menueinhalt a{display:block;padding:8px 12px;text-decoration:none;border-radius:8px}.menueinhalt a:hover{background:#edf5f5}.auftakt{padding:88px 0 0;background:linear-gradient(120deg,#fff 0%,#f5fbfb 42%,#e4eff0 100%);border-top:80px solid var(--hell)}.auftaktgitter{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center}.grosslogo{width:430px;margin-bottom:42px}.augenbraue{font-size:15px;font-weight:750;text-transform:uppercase;letter-spacing:1.2px;color:var(--tinte);margin:0 0 9px;line-height:1.5}.einleitung{font-size:23px;line-height:1.6}.aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.knopf{display:inline-flex;align-items:center;justify-content:center;padding:15px 27px;border:2px solid transparent;border-radius:99px;background:var(--orange);color:#1d2630;font-weight:700;line-height:1.25;text-decoration:none;font-size:18px;min-height:56px;text-align:center;transition:background .15s}.knopf:hover{background:#f59a49;text-decoration:none}.knopf.zweitrangig{background:white;color:var(--tuerkis-dunkel);border-color:#cddfe1}.knopf.zweitrangig:hover{background:#edf6f6}.portraet{position:relative}.portraet>img{width:100%;aspect-ratio:4/5;object-fit:cover;border:10px solid #fff;border-radius:36px;box-shadow:0 25px 55px #14232c28}.namenskarte{position:absolute;bottom:30px;left:-22px;width:73%;padding:20px 23px;background:white;border-radius:27px;box-shadow:var(--schatten);line-height:1.6}.namenskarte strong{display:block;font-size:21px;color:var(--tinte)}.namenskarte span{font-size:16px}.merkmale{display:grid;grid-template-columns:repeat(4,1fr);background:white;border-radius:30px;box-shadow:0 25px 45px #15283112;margin-top:44px;position:relative;transform:translateY(1px)}.merkmale>div{padding:25px 18px;text-align:center;line-height:1.3;border-right:1px solid var(--linie)}.merkmale>div:last-child{border:0}.merkmale strong{display:block;font-size:21px;color:var(--tinte);margin-bottom:10px}.merkmale span{font-size:16px;color:#555e62}.abschnitt{padding:86px 0}.abschnittskopf{text-align:center;margin:0 auto 42px}.abschnittskopf h2{margin-bottom:20px}.abschnittskopf .einleitung{max-width:980px;margin-inline:auto}.zweispaltig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.dreispaltig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.vierspaltig{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.karte{border:1px solid var(--linie);border-radius:var(--radius);background:white;box-shadow:var(--schatten);padding:28px}.standort>img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:22px;margin-bottom:24px}.standort .augenbraue{font-size:18px}.standort h3{margin-bottom:3px}.ort{color:var(--tuerkis-dunkel);font-size:16px;margin-bottom:15px}.standorttext{font-size:19px;font-weight:600}.angebotslinks{display:grid;gap:12px;margin-top:24px}.angebotslinks a{display:flex;justify-content:space-between;gap:16px;padding:13px 16px;background:#f3f8f8;border:1px solid #e1ebeb;border-radius:17px;color:var(--tinte);font-weight:700;text-decoration:none}.angebotslinks span{color:var(--tuerkis-dunkel)}.angebotslinks a:hover{background:#e3f0f0}.beduerfnisse{background:#f8fafb}.beduerfnis{padding:25px 22px;display:flex;flex-direction:column}.beduerfnis h3{font-size:24px;line-height:1.2}.beduerfnis p{font-size:17px}.nummer{color:var(--tuerkis);font-size:17px;font-weight:700;margin-bottom:20px}.textlink{font-weight:700;text-decoration:none;font-size:18px}.beduerfnis .textlink,.zusatz .textlink{margin-top:auto}.angebotszeile{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;align-items:stretch;scroll-margin-top:110px}.angebotstext{padding:42px}.angebotstext h3{font-size:29px}.angebotstext p{font-size:19px}.hervorhebung{background:linear-gradient(110deg,#fcf6ee,#eef7f7);border:1px solid #eee8df;padding:18px 22px;border-radius:20px;font-weight:600}.vorteile{padding-left:24px;list-style:disc;margin:25px 0}.vorteile li{padding-left:6px;margin-bottom:9px}.vorteile li::marker{color:var(--tuerkis)}.angebotsbild{padding:28px 15px;border-radius:32px;background:#fff;box-shadow:var(--schatten);display:flex;align-items:center;justify-content:center}.angebotsbild img{width:100%;max-height:710px;object-fit:contain}.umgekehrt .angebotsbild{order:-1}.hinterlegt{background:var(--hell)}.zusatz{display:flex;flex-direction:column;scroll-margin-top:110px}.zusatz img{width:100%;aspect-ratio:1.25;object-fit:cover;border-radius:22px;margin-bottom:24px}.zusatz h3,.buch h3{margin-bottom:12px}.zusatz p,.buch p{font-size:19px}.buch{display:flex;flex-direction:column}.buch img{width:100%;aspect-ratio:4/5;object-fit:contain;border-radius:18px;margin-bottom:25px}.buchlinks{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:auto;padding-top:15px}.beratung{background:linear-gradient(120deg,#18232e,#184950);color:#e8f1f1}.beratung .zweispaltig{grid-template-columns:1.2fr 1fr;align-items:center;gap:55px}.beratung h2,.beratung h3{color:white}.beratung .augenbraue{color:#a8dddd}.beratungskarte{background:#ffffff19;border:1px solid #ffffff29;border-radius:30px;padding:30px}.beratung .vorteile{margin-bottom:0}.beratung .vorteile li::marker{color:#9dd6bc}.vorstellung{align-items:center;gap:50px;grid-template-columns:.85fr 1.15fr}.vorstellungsbild img{border-radius:34px;border:10px solid white;box-shadow:var(--schatten)}.qualifikationen{margin-top:10px;font-size:16px;color:var(--tuerkis-dunkel)}.fragenliste{display:grid;gap:12px}.fragenliste details{background:white;border:1px solid var(--linie);border-radius:19px;padding:0 24px}.fragenliste summary{padding:22px 0;cursor:pointer;font-size:20px;font-weight:600;color:var(--tinte);list-style-position:outside;margin-left:20px}.fragenliste details[open] summary{color:var(--tuerkis-dunkel)}.fragenliste p{padding:0 0 4px}.kontakt{background:linear-gradient(130deg,#f7fbfa,#e5f0f1)}.zentriert{justify-content:center}.direktkontakt{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin:30px 0 45px}.direktkontakt a{font-weight:700}.kontaktorte{border-top:1px solid #cddede;padding-top:35px}.kontaktorte h3{font-size:22px;letter-spacing:-.4px;margin-bottom:12px}.kontaktorte p{font-size:17px;margin-top:15px}.kontaktorte address{font-style:normal}.hinweis{padding-top:26px;margin:20px 0 0;border-top:1px solid #cddede;font-size:15px}footer{background:white;font-size:14px;padding:25px 0}footer .breite{display:flex;justify-content:space-between;gap:20px}
@media(min-width:1500px){.breite{max-width:1240px}}
@media(max-width:1100px){.auftakt{padding-top:42px}.auftaktgitter{gap:65px}.grosslogo{margin-bottom:38px}.auftakt h1{font-size:62px}.auftakt .aktionen{flex-direction:column;align-items:flex-start}.navigationszeile{gap:90px}.navigation nav{gap:44px}.vierspaltig{grid-template-columns:repeat(2,minmax(0,1fr))}.angebotstext{padding:36px}.angebotstext .aktionen{align-items:flex-start;flex-direction:column}.dreispaltig{gap:22px}.buch .knopf{font-size:17px}.beratung .zweispaltig{gap:35px}}
@media(max-width:800px){html{scroll-padding-top:155px}.kontaktleiste{font-size:13px}.kontaktleiste .breite{justify-content:center;gap:20px}.kontaktleiste span{display:none}.navigationszeile{min-height:100px;gap:9px;flex-direction:column;justify-content:center;padding:12px 0 4px}.navlogo{width:150px}.navigation nav{font-size:14px;gap:24px}.leistungsmenue summary{padding:10px 0}.menueinhalt{left:0;max-width:calc(100vw - 36px);font-size:16px}.auftakt{border-top:30px solid var(--hell);padding-top:35px}.auftaktgitter{grid-template-columns:1fr 1fr;gap:28px}.auftakt h1{font-size:46px;letter-spacing:-1.6px}.grosslogo{margin-bottom:28px}.einleitung{font-size:20px}.portraet>img{aspect-ratio:3/4;border-width:7px}.namenskarte{position:relative;bottom:25px;left:10px;width:calc(100% - 20px);margin-bottom:-25px;padding:15px}.namenskarte strong{font-size:18px}.namenskarte span{font-size:14px}.merkmale{grid-template-columns:1fr 1fr}.merkmale>div:nth-child(2){border-right:0}.merkmale>div:nth-child(-n+2){border-bottom:1px solid var(--linie)}.abschnitt{padding:60px 0}.karte{padding:22px}.standort>img{border-radius:18px}.angebotslinks a{font-size:16px;padding:12px}.standorttext{font-size:17px}.dreispaltig{grid-template-columns:repeat(2,minmax(0,1fr))}.angebotstext{padding:26px}.angebotstext p{font-size:17px}.angebotsbild{padding:15px}.beratung .zweispaltig,.vorstellung{gap:26px}.knopf{font-size:16px;padding:14px 21px}.vorstellung .einleitung{font-size:19px}.kontaktorte h3{font-size:21px}}
@media(max-width:600px){body{font-size:17px}.breite{width:calc(100% - 32px)}h2{font-size:33px;letter-spacing:-1px}h3{font-size:25px}.navigation nav{gap:17px;font-size:13px}.auftaktgitter,.zweispaltig,.vierspaltig,.dreispaltig,.angebotszeile,.beratung .zweispaltig,.vorstellung{grid-template-columns:1fr}.auftaktgitter{gap:34px}.auftakt h1{font-size:48px;line-height:1.06;max-width:390px}.grosslogo{max-width:335px;margin-bottom:30px}.augenbraue{font-size:13px}.einleitung{font-size:20px}.auftakt .aktionen{align-items:stretch}.portraet{max-width:420px;margin:0 auto 5px;width:100%}.portraet>img{aspect-ratio:1/1.08;object-position:center 30%;border-radius:28px}.namenskarte{position:absolute;bottom:18px;left:14px;width:calc(100% - 55px);margin:0}.merkmale{margin-top:26px;border-radius:23px}.merkmale>div{padding:19px 12px}.merkmale strong{font-size:17px}.merkmale span{font-size:14px}.abschnitt{padding:55px 0}.abschnittskopf{margin-bottom:30px}.abschnittskopf .einleitung{font-size:19px}.zweispaltig,.dreispaltig,.vierspaltig{gap:22px}.standort>img{max-height:480px;object-fit:cover}.beduerfnis{padding:25px}.beduerfnis h3{max-width:280px}.angebotszeile{gap:15px;margin-top:35px}.angebotstext{padding:26px 23px}.angebotstext h3{font-size:29px}.angebotstext p{font-size:18px}.angebotstext .aktionen{align-items:stretch}.angebotsbild{order:-1;padding:14px;border-radius:26px}.angebotsbild img{max-height:470px}.hervorhebung{padding:16px}.zusatz img{max-height:290px}.zusatz p,.buch p{font-size:18px}.buch img{max-height:390px}.buchlinks{align-items:stretch}.beratung .aktionen{flex-direction:column;align-items:stretch}.beratungskarte{padding:25px}.vorstellungsbild{max-width:400px;margin:auto}.fragenliste details{padding:0 19px}.fragenliste summary{font-size:18px;line-height:1.4}.kontakt .aktionen{flex-direction:column}.direktkontakt{gap:12px;flex-direction:column;align-items:center}.kontaktorte{gap:25px}.kontaktorte>div+div{border-top:1px solid #cddede;padding-top:25px}footer .breite{flex-direction:column;align-items:center;text-align:center;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{.navigation,.kontaktleiste,.aktionen,.sprunglink,footer{display:none}body{font-size:12pt}.auftakt{border:0;padding-top:0}.abschnitt{padding:25px 0}.karte{box-shadow:none}a{color:inherit}.fragenliste details>p{display:block!important}.beratung{background:white;color:var(--text)}.beratung h2,.beratung h3,.beratung .augenbraue{color:var(--tinte)}}
/* Kleine Smartphones: intrinsische Bildbreiten dürfen das Raster nicht verbreitern. */
.auftakttext{min-width:0}.grosslogo{max-width:100%}
@media(max-width:360px){.navigation nav{gap:11px;font-size:12px}.auftakt h1{font-size:43px}.merkmale strong{font-size:16px}.knopf{padding-inline:15px}.angebotslinks a{font-size:15px;gap:8px}}
.merkmale>div{min-width:0;overflow-wrap:anywhere;hyphens:auto}
@media(max-width:800px){.merkmale{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){.leistungsmenue summary{white-space:nowrap}.navigation nav{gap:14px;font-size:11px}.navigation nav>a{white-space:nowrap}}

/* Startseite: Kachelbalken zur Hälfte über den Abschnittsübergang setzen. */
.auftakt .merkmale{transform:translateY(50%)}
.auftakt + #standorte{padding-top:155px}
@media(max-width:800px){.auftakt + #standorte{padding-top:190px}}

/* Überschriften nach der gelieferten Typografievorlage. */
body h1,body h2,body h3,body h1 span{color:#006d75!important;font-family:Helvetica,Arial,sans-serif}
body h1{font-weight:500!important;font-size:84px!important;line-height:86px!important;hyphens:manual;overflow-wrap:break-word}
/* Helle Schrift erhält den Kontrast auf dunklen Beratungsflächen. */
body .beratung h2,body .beratung h3{color:#fff!important}
@media(max-width:1100px){body h1{font-size:64px!important;line-height:1.06!important}}
@media(max-width:800px){body h1{font-size:48px!important;line-height:1.08!important}}
@media(max-width:360px){body h1{font-size:40px!important;line-height:1.08!important}}

body.natugenaseite h1{hyphens:auto}

/* Einleitung im Startseiten-Hero nach Screenshot. */
.auftakt .einleitung{font-family:Poppins,Arial,sans-serif;font-weight:300;font-size:27px;line-height:42px;color:#273142}
@media(max-width:600px){.auftakt .einleitung{font-size:22px;line-height:34px}}

/* Startseitenporträt ohne Bilderrahmen. */
.auftakt .portraet>img{border:0;border-radius:0;box-shadow:none}

/* Hauptnavigation mit mehr Abstand zum Logo und deutlichem Hover. */
@media(min-width:801px){.navigation nav{margin-left:auto;gap:18px}.navigationszeile{gap:65px}}
.navigation nav>a,.leistungsmenue summary{border-radius:12px;padding:13px 18px;transition:background-color .15s,color .15s}
.navigation nav>a:hover,.navigation nav>a:focus-visible,.leistungsmenue summary:hover,.leistungsmenue summary:focus-visible,.leistungsmenue[open]>summary{background:#006d75;color:#fff;text-decoration:none}
.menueinhalt a:hover,.menueinhalt a:focus-visible{background:#006d75;color:#fff}
@media(max-width:800px){.navigation nav>a,.leistungsmenue summary{padding:10px 8px}.navigation nav{gap:12px}}
@media(max-width:360px){.navigation nav{gap:5px}.navigation nav>a,.leistungsmenue summary{padding-inline:6px}}

/* Gemeinsame Fußzeile nach der sichtbaren Originalvorlage. */
.seitenfuss{background:#f5f6fa;padding:0;color:#246169;font-size:17px}.seitenfuss .fussgitter{display:grid;grid-template-columns:1fr 1.2fr 1.35fr 1fr;gap:38px;padding-block:58px 34px;align-items:start}.seitenfuss img{width:200px}.seitenfuss h2{font:600 17px/1.4 Poppins,Arial,sans-serif;text-transform:uppercase;letter-spacing:0;color:#384149!important;margin-bottom:14px}.seitenfuss p{margin:0 0 8px}.seitenfuss address{font-style:normal;margin-bottom:8px}.seitenfuss nav a{display:block;margin:3px 0}.seitenfuss a{color:#246169;text-decoration:none}.seitenfuss a:hover{text-decoration:underline}.seitenfuss .fusshinweis{display:block;font-size:14px;padding-bottom:26px}.fussabschluss{text-align:center;border-top:7px solid #fff;padding:15px 18px;font-size:15px}.navigation nav{gap:8px}.navigation nav>a,.leistungsmenue>summary{padding-inline:12px}@media(max-width:800px){.seitenfuss .fussgitter{grid-template-columns:1fr 1fr;gap:30px;padding-top:38px}}@media(max-width:480px){.seitenfuss .fussgitter{grid-template-columns:1fr}.seitenfuss .fusshinweis{line-height:1.6}}

/* Hauptnavigation: lokal geladene Montserrat nach Kalles Vorgabe. */
@font-face{font-family:Montserrat;src:url('schriften/montserrat-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Poppins;src:url('schriften/poppins-300.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap}@font-face{font-family:Poppins;src:url('schriften/poppins-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Poppins;src:url('schriften/poppins-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
.navigation nav,.navigation nav a,.navigation .leistungsmenue summary{font-family:Montserrat,sans-serif;font-style:normal;font-weight:400;font-size:18px;line-height:20px;color:rgb(211,181,116)}
.navigation nav>a:hover,.navigation nav>a:focus-visible,.navigation .leistungsmenue summary:hover,.navigation .leistungsmenue summary:focus-visible,.navigation .leistungsmenue[open]>summary,.navigation .menueinhalt a:hover,.navigation .menueinhalt a:focus-visible{background:#006d75;color:rgb(211,181,116)}
@media(max-width:800px){.navigation nav{width:100%;flex-wrap:wrap;justify-content:center;gap:4px 10px}.navigation nav>a,.navigation .leistungsmenue summary{padding:10px 8px}.navigation .menueinhalt{max-width:calc(100vw - 36px)}}

/* Namenskachel bündig am unteren Rand des Hero-Porträts. */
.auftakt .portraet .namenskarte{position:absolute;bottom:0;margin-bottom:0}

/* Türkise Navigation, goldener Farbwechsel bei Hover und Tastaturfokus. */
.navigation nav,.navigation nav a,.navigation .leistungsmenue summary{color:#2d8188}
.navigation nav>a:hover,.navigation nav>a:focus-visible,.navigation .leistungsmenue summary:hover,.navigation .leistungsmenue summary:focus-visible,.navigation .leistungsmenue[open]>summary,.navigation .menueinhalt a:hover,.navigation .menueinhalt a:focus-visible{background:#006d75;color:#d3b574}

/* Zwei Studio-Porträts mit ruhiger Bild-Text-Aufteilung. */
.studiokopf{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:44px}.studiokopf h2{font-size:clamp(38px,4.5vw,58px);line-height:1.06;margin:12px 0 0}.studiokopf>p{max-width:490px;margin:0 0 3px;font-size:20px;line-height:1.7}.studioportraets{display:grid;gap:32px}.studioportraet{display:grid;grid-template-columns:38% 62%;background:#eff6f5;border-radius:26px;overflow:hidden}.studiofoto{min-height:480px}.studiofoto img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}.studioinhalt{padding:44px 52px;align-self:center}.studiomarke{font-size:13px;text-transform:uppercase;letter-spacing:1.6px;font-weight:600;color:#526d6b;margin-bottom:17px}.studioinhalt h3{font-size:clamp(32px,3.4vw,44px);line-height:1.1;margin-bottom:22px}.studiobeschreibung{font-weight:400;line-height:1.7;max-width:540px;margin-bottom:25px}.studioadresse{border-left:3px solid #c7ab70;padding-left:16px;margin-bottom:24px}.studioadresse strong{display:block;color:#283c3e;font-size:17px;font-weight:600}.studioadresse address{font-size:16px;font-style:normal;margin-top:3px}.studioleistungen{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}.studioleistungen a{border-bottom:1px solid #c8d9d7;text-decoration:none;padding:12px 0;font-size:16px;font-weight:500;line-height:1.45;color:#006d75;transition:color .15s,border-color .15s}.studioleistungen a:hover{color:#714f16;border-color:#a7813a;text-decoration:underline;text-underline-offset:5px}.studioirrsberg{grid-template-columns:62% 38%;background:#f7f4ee}.studioirrsberg .studiofoto{grid-column:2;grid-row:1}.studioirrsberg .studioinhalt{grid-column:1;grid-row:1}.studioirrsberg .studioleistungen a{border-bottom-color:#ddd5c6}.studioonline{font-size:14px;color:#62665f;margin:18px 0 0}.studioabschluss{display:flex;justify-content:space-between;gap:25px;align-items:center;padding:28px 4px 0;font-size:16px}.studioabschluss p{margin:0}.studioabschluss a{font-weight:600;flex-shrink:0}@media(max-width:1000px){.studioinhalt{padding:32px}.studioleistungen{gap:0 18px}.studioabschluss{align-items:start;flex-direction:column;gap:6px}}@media(max-width:700px){.studiokopf{grid-template-columns:1fr;gap:22px;margin-bottom:30px}.studiokopf>p{font-size:18px}.studioportraet,.studioirrsberg{grid-template-columns:1fr}.studiofoto{height:340px;min-height:0}.studiofoto img{object-position:center 30%}.studioirrsberg .studiofoto,.studioirrsberg .studioinhalt{grid-column:auto;grid-row:auto}.studioinhalt{padding:30px 24px}.studioinhalt h3{font-size:36px}.studiomarke{font-size:11px;letter-spacing:1.2px}.studioadresse address{font-size:15px}.studioleistungen a{font-size:15px}.studioabschluss{font-size:15px}.studioabschluss a{flex-shrink:1}.studioportraets{gap:26px}}

/* Deutlich erkennbare Angebotsbuttons innerhalb der Studio-Porträts. */
.studioleistungen{gap:12px}
.studioleistungen a,.studioirrsberg .studioleistungen a{display:flex;align-items:center;justify-content:center;min-height:54px;padding:13px 16px;border:1.5px solid #2d8188;border-radius:12px;background:#fff;color:#006d75;font-weight:600;text-align:center;text-decoration:none;box-shadow:0 3px 8px #173f4010;transition:background-color .15s,color .15s,box-shadow .15s}
.studioleistungen a:hover,.studioleistungen a:focus-visible{background:#006d75;color:#fff;border-color:#006d75;text-decoration:none;box-shadow:0 5px 12px #173f4025}
.studioleistungen a:focus-visible{outline:3px solid #c7ab70;outline-offset:3px}
@media(max-width:400px){.studioleistungen{grid-template-columns:1fr}.studioleistungen a{min-height:48px}}

/* Werbekennzeichnung vor Partnerlinks (NatuGena, Neurotunes): sichtbar, vor dem Link, ohne den Lesefluss zu stören. */
.werbung{display:inline-block;margin:6px 0 0;padding:3px 10px;border:1px solid #cddfe1;border-radius:99px;background:#f5f6fa;color:#506668;font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;line-height:1.5}.werbung+.aktionen{margin-top:12px}.werbung.zentriert{display:table;margin-inline:auto}.zusatz .werbung{margin-top:auto;align-self:flex-start}.zusatz .werbung+.textlink{margin-top:8px}

/* Navigation mittig zur Seitenbreite, unabhängig vom Logo (Kalle, 20.09.2026): drei Spalten, das Menü sitzt in der mittleren. */
@media(min-width:801px){.navigationszeile{display:grid;grid-template-columns:1fr auto 1fr;gap:20px}.navigation nav{margin-left:0;justify-self:center}}

/* Bewegung (Kalle, 20.09.2026): ruhig, nur opacity und transform, kein Layoutruckeln.
   1. Auftakt blendet beim Laden gestaffelt ein. 2. Abschnitte erscheinen beim Scrollen (Klasse
   .erscheint setzt bedienung.js, .sichtbar der IntersectionObserver). 3. Karten, Knöpfe, Bilder
   und Textlinks reagieren auf Berührung. 4. Auftakt- und Kontaktfläche driften sehr langsam.
   prefers-reduced-motion schaltet alles ab (Regel am Ende). */
@keyframes einblenden{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes drift{from{background-position:0% 50%}to{background-position:100% 50%}}
.auftakt .grosslogo,.auftakt .augenbraue,.auftakt h1,.auftakt .einleitung,.auftakt .aktionen,.auftakt .portraet,.auftakt .merkmale>div{animation:einblenden .8s cubic-bezier(.22,.61,.36,1) backwards}
.auftakt .augenbraue{animation-delay:.1s}.auftakt h1{animation-delay:.2s}.auftakt .einleitung{animation-delay:.32s}.auftakt .aktionen{animation-delay:.44s}.auftakt .portraet{animation-delay:.28s}.auftakt .merkmale>div{animation-delay:.6s}.auftakt .merkmale>div:nth-child(2){animation-delay:.7s}.auftakt .merkmale>div:nth-child(3){animation-delay:.8s}.auftakt .merkmale>div:nth-child(4){animation-delay:.9s}
.js .erscheint{opacity:0}.js .erscheint.sichtbar{opacity:1;animation:einblenden .75s cubic-bezier(.22,.61,.36,1) backwards;animation-delay:var(--verzoegerung,0s)}
.karte{transition:transform .3s ease,box-shadow .3s ease}.karte:hover{transform:translateY(-4px);box-shadow:0 26px 50px #17273118}
.knopf{transition:background-color .2s,transform .2s,box-shadow .2s}.knopf:hover{transform:translateY(-2px);box-shadow:0 10px 22px #eb842b40}.knopf.zweitrangig:hover{box-shadow:0 10px 22px #2d818826}
.textlink{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 2px;transition:background-size .3s ease,color .2s}.textlink:hover{background-size:100% 2px}
.zusatz img,.buch img,.standort>img,.angebotsbild img,.studiofoto img,.vorstellungsbild img{transition:transform .6s ease}.karte:hover img,.angebotsbild:hover img,.studioportraet:hover .studiofoto img{transform:scale(1.03)}.studiofoto{overflow:hidden}
.fragenliste details[open]>p{animation:einblenden .35s ease backwards}
.auftakt{background-size:170% 170%;animation:drift 26s ease-in-out infinite alternate}.kontakt{background-size:200% 200%;animation:drift 20s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.js .erscheint{opacity:1}.karte:hover,.knopf:hover,.karte:hover img,.angebotsbild:hover img,.studioportraet:hover .studiofoto img{transform:none}}
/* Drei Menüpunkte passen am Handy in eine Zeile, wenn der Abstand kleiner ist. */
@media(max-width:480px){.navigation nav{gap:4px 6px}.navigation nav,.navigation nav a,.navigation .leistungsmenue summary{font-size:14px}.navigation nav>a,.navigation .leistungsmenue summary{padding-inline:6px}}
/* Hero-Porträt vollständig zeigen: eigenes Seitenverhältnis (560 × 671) statt erzwungener 4:5-Beschneidung, auch am Handy. */
.auftakt .portraet>img{aspect-ratio:auto;height:auto;object-fit:contain;object-position:center bottom}
/* Namenskachel mittig an der Unterkante des Hero-Porträts, flach gehalten, damit sie das Logo am Shirt nicht verdeckt (Kalle, 20.09.2026). */
.auftakt .portraet .namenskarte{left:50%;transform:translateX(-50%);bottom:0;width:max-content;max-width:94%;padding:10px 22px 11px;line-height:1.35;text-align:center;margin:0;border-radius:20px}
.auftakt .portraet .namenskarte strong{font-size:19px}.auftakt .portraet .namenskarte span{font-size:14px}
@media(max-width:600px){.auftakt .portraet .namenskarte{padding:8px 14px 9px}.auftakt .portraet .namenskarte strong{font-size:17px}.auftakt .portraet .namenskarte span{font-size:13px}}
/* Untermenü: mehr Luft zwischen den Einträgen, Hover nur als helle Fläche mit dunklerem Türkis statt Vollfarbe (Kalle, 20.09.2026). */
.navigation .menueinhalt{padding:14px 12px;min-width:290px}.navigation .menueinhalt a{padding:12px 16px;line-height:1.35}
.navigation .menueinhalt a:hover,.navigation .menueinhalt a:focus-visible{background:#edf5f5;color:var(--tuerkis-dunkel)}

/* „Nach oben“-Knopf, wird von bedienung.js eingefügt und ab 600 px Scrollweg eingeblendet. */
.nachoben{position:fixed;right:22px;bottom:22px;z-index:50;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--tuerkis-dunkel);color:#fff;font-size:22px;line-height:1;text-decoration:none;box-shadow:0 12px 28px #1727312e;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .3s,background-color .2s}
.nachoben.sichtbar{opacity:1;transform:none;pointer-events:auto}.nachoben:hover,.nachoben:focus-visible{background:var(--tuerkis);color:#fff}
@media(max-width:600px){.nachoben{right:14px;bottom:14px;width:44px;height:44px;font-size:20px}}
@media print{.nachoben{display:none}}
/* Dunkle Fußzeile in #184148 (Kalle, 20.09.2026): helle Schrift, weißes Logo aus Kalles Freisteller (bilder/logo-weiss.png). */
.seitenfuss{background:#184148;color:#dfeaeb}.seitenfuss h2{color:#fff!important}.seitenfuss a{color:#fff}.seitenfuss a:hover{color:#f3d9bf}
.seitenfuss .fussgitter>a{display:inline-block;justify-self:start;margin-top:4px}.seitenfuss img{width:210px}
.seitenfuss .fusshinweis{color:#c7d8da}.fussabschluss{border-top:1px solid #ffffff26;color:#c7d8da}
@media(max-width:480px){.seitenfuss .fussgitter>a{justify-self:center}}
/* Kachelbalken mit sichtbarem Rahmen: feine türkise Linie, Trennlinien im gleichen Ton, etwas kräftigerer Schatten (Kalle, 20.09.2026). */
.merkmale{border:1px solid #cddfe1;box-shadow:0 22px 48px #15283118;overflow:hidden}.merkmale>div{border-color:#cddfe1}
@media(max-width:800px){.merkmale>div:nth-child(-n+2){border-bottom-color:#cddfe1}}
/* Startseite: nach Wegfall der doppelten Kontaktzeile Abstand zu den Standortadressen halten. */
.kontakt .kontaktorte{margin-top:40px}
/* Vier Menüpunkte am Handy als zwei gleichmäßige Zeilen (Home · Leistungen / Fragen & Antworten · Kontakt). */
@media(max-width:480px){.navigation nav{display:grid;grid-template-columns:auto auto;justify-content:center;gap:2px 14px}}
/* Das aufgeklappte Leistungsmenü hängt am Handy unter der ganzen Menüzeile, damit es rechts nicht abgeschnitten wird. */
@media(max-width:480px){.navigation nav{position:relative}.navigation .leistungsmenue{position:static}.navigation .menueinhalt{left:0;right:0;top:100%;min-width:0;max-width:none}}
/* Standortadressen im Kontaktabschnitt als zwei helle Karten wie auf vitalpro.at, ohne Linie darunter (Kalle, 20.09.2026). */
.kontakt .kontaktorte{border-top:0;padding-top:0;margin-top:34px;gap:28px}.kontakt .kontaktorte>div{background:#f5f7fa;border:1px solid #dbe4e6;border-radius:24px;padding:30px 32px}.kontakt .kontaktorte>div+div{border-top:1px solid #dbe4e6;padding-top:30px}.kontakt .kontaktorte h3{margin-bottom:14px}.kontakt .kontaktorte p{margin-bottom:0}.kontakt .hinweis{border-top:0;padding-top:0;margin-top:34px}
@media(max-width:600px){.kontakt .kontaktorte>div{padding:24px 22px}}
/* Navigationsleiste etwas höher (Kalle, 20.09.2026): 96 statt 78 px am Desktop, Sprungziele entsprechend tiefer. */
@media(min-width:801px){.navigationszeile{min-height:96px}html{scroll-padding-top:128px}}
/* Werbekennzeichnung immer in eigener Zeile über dem Link, nie daneben. */
.werbung{display:table;margin:0 0 10px}.werbung+.aktionen{margin-top:10px}.werbung.zentriert{margin-inline:auto}
/* Fließtext in Poppins Light (Kalle, 20.09.2026): Fettes in SemiBold statt Bold, damit es nicht klobig wird. */
strong,b,.knopf,.textlink,.augenbraue,.werbung,.fragenliste summary,.namenskarte strong,.merkmale strong{font-weight:600}
/* Veranstaltungsfenster (Tag der offenen Tür, bis 25.09.2026): <dialog>, öffnet bedienung.js; Datum steht im HTML (data-bis). */
.hinweisfenster{border:0;border-radius:28px;padding:0;width:min(940px,calc(100% - 32px));max-height:calc(100vh - 32px);background:#fff;box-shadow:0 30px 80px #00000066;overflow:hidden}.hinweisfenster::backdrop{background:#0b1f24b3}.hinweisfenster form{margin:0}
.fensterinhalt{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center}.fensterinhalt img{width:100%;height:100%;max-height:calc(100vh - 32px);object-fit:cover;object-position:top;display:block}.fensterinhalt>div{padding:40px 38px}.fensterinhalt h2{font-size:34px;margin-bottom:12px}.fensterdatum{font-weight:600;color:var(--tuerkis-dunkel);margin-bottom:16px}.fensterinhalt .aktionen{margin-top:22px}
.schliessen{position:absolute;top:12px;right:12px;z-index:1;width:42px;height:42px;border:0;border-radius:50%;background:#ffffffe6;color:var(--tinte);font:400 28px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 4px 14px #0003}.schliessen:hover{background:#fff}
@media(max-width:760px){.hinweisfenster{border-radius:20px;overflow:auto}.fensterinhalt{grid-template-columns:1fr}.fensterinhalt img{max-height:44vh}.fensterinhalt>div{padding:22px 20px 26px}.fensterinhalt h2{font-size:28px}.fensterinhalt .aktionen{flex-direction:column}.fensterinhalt .knopf{width:100%}}
/* Studio-Karten der Startseite: Adresse zuerst und präsent (Kalle, 20.09.2026). */
.studioinhalt .studioadresse{order:-1;border-left:0;padding:0;margin:0 0 18px}.studioinhalt .studioadresse strong{font-size:26px;line-height:1.2;color:var(--tuerkis-dunkel);letter-spacing:-.4px}.studioinhalt .studioadresse address{font-size:19px;font-weight:400;color:var(--tinte);margin-top:6px}.studioinhalt .studiomarke{margin-top:4px}
@media(max-width:600px){.studioinhalt .studioadresse strong{font-size:22px}.studioinhalt .studioadresse address{font-size:17px}}
/* Veranstaltungsfenster größer, Hintergrund dunkler (Kalle, 20.09.2026). */
.hinweisfenster{width:min(1180px,calc(100% - 32px))}.hinweisfenster::backdrop{background:#04141ae0}.fensterinhalt{grid-template-columns:1fr 1fr}.fensterinhalt>div{padding:52px 50px}.fensterinhalt h2{font-size:42px}.fensterdatum{font-size:20px}.fensterinhalt p{font-size:19px}
@media(max-width:760px){.fensterinhalt>div{padding:22px 20px 26px}.fensterinhalt h2{font-size:28px}.fensterdatum{font-size:18px}.fensterinhalt p{font-size:17px}}
/* Handy: Fenster einspaltig (die spätere Zweispalten-Regel hatte die Handy-Regel überstimmt), Flyer oben, Text darunter. */
@media(max-width:760px){.fensterinhalt{grid-template-columns:1fr;align-items:start}.fensterinhalt img{max-height:46vh;object-fit:cover;object-position:top}.fensterinhalt>div{padding:22px 20px 26px}.fensterinhalt h2{font-size:30px}}
/* Kachelbalken am Handy: Inhalt senkrecht mittig, Schrift so, dass „Ansprechpartnerin“ nicht getrennt wird (Kalle, 20.09.2026). */
@media(max-width:800px){.merkmale>div{display:flex;flex-direction:column;justify-content:center;hyphens:manual;overflow-wrap:normal}}
@media(max-width:480px){.merkmale>div{padding:16px 8px}.merkmale strong{font-size:15px;margin-bottom:6px}.merkmale span{font-size:13px}}

/* ── Hamburger-Menü am Handy (Kalle, 20.09.2026) ──────────────────────────────
   Bis 800 px: Logo links, ☰-Knopf rechts, das Menü klappt darunter über die
   volle Breite auf (bedienung.js schaltet .offen und aria-expanded). Ohne
   JavaScript bleibt das Menü sichtbar (Klasse .js fehlt). Das ☰ ist ein
   Textzeichen, kein gezeichnetes Icon. Steht bewusst am Ende der Datei. */
.menueknopf{display:none}
@media(max-width:800px){
  .navigationszeile{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;min-height:0;padding:10px 0;gap:0}
  .navlogo{width:150px}
  .menueknopf{display:inline-flex;align-items:center;gap:8px;border:1px solid #cddfe1;border-radius:12px;background:#fff;color:var(--tuerkis-dunkel);font:600 15px/1 Poppins,Arial,sans-serif;padding:10px 14px;cursor:pointer}
  .menueknopf span[aria-hidden]{font-size:22px;line-height:1}
  .menueknopf[aria-expanded="true"]{background:var(--tuerkis-dunkel);color:#fff;border-color:var(--tuerkis-dunkel)}
  .js .navigation nav{display:none}
  .navigation nav.offen{display:flex}
  .navigation nav{flex-direction:column;align-items:stretch;width:100%;flex-basis:100%;margin:10px 0 4px;padding:6px 0 0;border-top:1px solid var(--linie);gap:0;position:static}
  .navigation nav>a,.navigation .leistungsmenue summary{display:block;padding:13px 10px;font-size:17px;border-radius:10px;text-align:left}
  .navigation .leistungsmenue{position:static}
  .navigation .menueinhalt{position:static;left:auto;right:auto;top:auto;min-width:0;max-width:none;margin:0 0 6px 10px;padding:4px 0 4px 12px;border:0;border-left:2px solid var(--linie);border-radius:0;box-shadow:none;background:transparent}
  .navigation .menueinhalt a{padding:10px 10px;font-size:16px}
}
@media(max-width:800px){html{scroll-padding-top:100px}}
/* Offenes Handy-Menü darf höher sein als der Bildschirm: dann scrollt es in sich, sonst ist das Ende der Liste unerreichbar (Kalle, 20.09.2026). */
@media(max-width:800px){.navigation nav.offen{flex-wrap:nowrap;max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px}}
/* Handy: „Leistungen“ ist ein Menüpunkt wie die anderen, mit großem Pfeil rechts; zugeklappt ▾, aufgeklappt ▴. Safari-Marker aus. */
@media(max-width:800px){.navigation .leistungsmenue summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:13px 10px}.navigation .leistungsmenue summary::-webkit-details-marker{display:none}.navigation .leistungsmenue summary::after{content:"\25BE";font-size:26px;line-height:1;color:var(--tuerkis)}.navigation .leistungsmenue[open]>summary::after{content:"\25B4"}.navigation .leistungsmenue[open]>summary{background:#edf5f5;color:var(--tuerkis-dunkel)}.navigation .menueinhalt{margin:4px 0 8px 10px;padding:2px 0 2px 14px;border-left:2px solid #cddfe1}.navigation .menueinhalt a{padding:12px 10px;font-size:17px}}