@font-face{font-family:"Nunito Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/nunito-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/nunito-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/nunito-sans-latin-600-normal.woff2) format("woff2")}
:root{color-scheme:dark;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
*{box-sizing:border-box}
body{--bg1:#2b2038;--bg2:#443158;--acc:#d3cae1;--sub:#cfc5dc;--ink:#f8f2fa;--yb1:#1a2a37;--yb2:#2c4557;--y1:#80a2b9;--y2:#36546d;--yacc:#cfe4f0;--ysub:#bfd2de;
 --h1:#d3cae1;--h2:#a08cbc;--hkt:#2a1c3c;--hkt2:#3d2d54;--hfa:#5f4a80;--hfb:#7d67a3;--hexp:250px;
 --t1:var(--h1);--t2:var(--h2);--kt:var(--hkt);--kt2:var(--hkt2);--fa:var(--hfa);--fb:var(--hfb);--chipbg:#ffffff70;--chipfg:#2a1c3c;
 margin:0;color:var(--ink);font:400 16px/1.6 "Nunito Sans",system-ui,Arial,sans-serif;background:linear-gradient(170deg,var(--bg1),var(--bg2));min-height:100vh}
body[data-page=yoga]{--t1:var(--y1);--t2:var(--y2);--bg1:var(--yb1);--bg2:var(--yb2);--acc:var(--yacc);--sub:var(--ysub);--kt:#fff;--kt2:#ffffffdd;--fa:#2f5169;--fb:#4c7692;--chipbg:#ffffff26;--chipfg:#fff}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:500;line-height:1.15;margin:0;color:var(--acc)}
a{color:inherit;text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}.narrow{max-width:720px}
/* Icons als Datei (Maske) – Farbe kommt aus dem Text */
.ic{display:block;width:100%;height:100%;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.i-b{--m:url(icons/icon_schwangerschaft.svg)}.i-w{--m:url(icons/icon_wochenbett.svg)}.i-s{--m:url(icons/icon_stillen.svg)}.i-c{--m:url(icons/icon_kurse.svg)}.i-f{--m:url(icons/icon_flow-schwangerschaft.svg)}.i-r{--m:url(icons/icon_flow-rueckbildung.svg)}.i-t{--m:url(icons/icon_flow-sab.svg)}
/* Kopfzeile */
header{position:fixed;top:0;left:0;right:0;z-index:30;padding-top:env(safe-area-inset-top,0px);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
body:not(.top) header,body:not(.start) header{background:color-mix(in srgb,var(--bg1) 92%,transparent);backdrop-filter:blur(10px);border-color:#ffffff1c}
.bar{position:relative;display:flex;align-items:center;gap:12px;height:70px}
.logo{flex:none;display:block;height:52px;border-radius:12px;overflow:hidden;cursor:pointer;transition:height .35s}
.logo img{height:100%;width:auto;display:block}
.brand{display:block;flex:1;min-width:0;line-height:1.2;cursor:pointer}
.brand b{display:block;font:600 20px Fraunces,Georgia,serif;color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:font-size .35s}
.brand span{font-size:13px;color:var(--sub);display:block;transition:font-size .35s}
.burger{flex:none;width:48px;height:48px;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger i{display:block;width:26px;height:2.5px;background:var(--acc);border-radius:2px;transition:.25s}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
body.start.top .bar{height:auto;flex-direction:column;justify-content:center;gap:8px;padding:20px 0 12px}
body.start.top .logo{height:96px}
body.start.top .brand{flex:none;text-align:center;max-width:100%}
body.start.top .brand b{font-size:clamp(34px,9vw,52px);white-space:normal;font-weight:400}
body.start.top .brand span{font-size:22px}
body.start.top .burger{position:absolute;top:10px;right:-8px}
main{padding-top:calc(88px + env(safe-area-inset-top,0px))}
body.start main{padding-top:calc(var(--hexp) + env(safe-area-inset-top,0px))}
/* Menü */
nav{position:fixed;left:0;right:0;bottom:0;background:var(--bg1);padding:8px 20px 90px;opacity:0;visibility:hidden;transition:.25s;overflow:auto;z-index:29}
nav.open{opacity:1;visibility:visible}
body[data-page=home] nav[data-for=yoga],body[data-page=yoga] nav[data-for=home]{display:none}
nav a{display:flex;align-items:center;gap:14px;max-width:960px;margin:0 auto;font:500 21px "Nunito Sans",system-ui,sans-serif;color:var(--acc);padding:10px 4px;border-bottom:1px solid #ffffff1c;cursor:pointer}
nav a.s{font-size:16px;font-weight:400;color:var(--sub);border:0;padding:8px 4px}
nav .mi{display:flex;flex:none;width:44px;height:38px;align-items:center;justify-content:center}
nav .mi .ic{width:30px;height:34px;color:var(--acc)}
nav .mi img{height:38px;width:auto;max-width:44px;border-radius:12px;display:block}
/* Seiten */
.pg{display:none}.pg.on{display:block}
.hero{padding:6px 0;text-align:center}
.hero h1{font-size:clamp(34px,9vw,52px);margin-bottom:16px}
.foto{width:min(100%,360px);aspect-ratio:4/3;margin:0 auto 18px;border-radius:30px;overflow:hidden;box-shadow:0 18px 40px -18px #000}
.foto img,.tile img{width:100%;height:100%;object-fit:cover;display:block}
.hero p{margin:0 auto 10px;max-width:46ch;color:var(--sub)}.hero p b{color:var(--acc)}
h2.t{font-size:clamp(30px,7vw,40px);text-align:center;margin:34px 0 18px}
.phead{text-align:center;padding:4px 0 14px}.phead h1{font-size:clamp(32px,8vw,46px)}
.pico{display:block;width:72px;height:72px;margin:0 auto 10px;color:var(--acc)}.pico img{height:100%;width:auto;display:block;margin:0 auto;border-radius:16px}
/* Kacheln */
.grid{display:grid;grid-template-columns:minmax(0,460px);justify-content:center;gap:14px}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,300px));gap:16px}}
.k{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;padding:16px;border-radius:24px;cursor:pointer;color:var(--kt);
 background:radial-gradient(120% 90% at 0% 0%,#ffffff33,transparent 55%),radial-gradient(100% 80% at 100% 100%,#00000030,transparent 60%),linear-gradient(150deg,var(--t1),var(--t2));
 border:1px solid #ffffff26;box-shadow:0 14px 30px -18px #000;transition:transform .2s,box-shadow .2s}
.k:hover,.tile:hover{transform:translateY(-3px);box-shadow:0 18px 34px -16px #000}
.k .ico{grid-row:1/6;width:56px;height:60px;display:flex;align-items:center;justify-content:center;color:var(--kt)}
.ico img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;border-radius:12px}
.k h3,.k p,.k .m{grid-column:2}
.k h3{font-size:clamp(17px,4.9vw,21px);color:var(--kt);overflow-wrap:break-word;hyphens:auto}
.k p{margin:0;font-size:14.5px;line-height:1.45;color:var(--kt2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.k .m{padding-top:2px;font-weight:600;font-size:14px;color:var(--kt)}
.nb{white-space:nowrap}
.more{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.mwrap{overflow:hidden;min-height:0}
.open>.more{grid-template-rows:1fr}
.k.open:hover,.tile.open:hover{transform:none}
.k .pbody{--pt:var(--kt2);--ph:var(--kt);padding:12px 0 6px;border-top:1px solid #ffffff40;margin-top:12px;cursor:default}
@media(min-width:640px){
 .k{display:flex;flex-direction:column;align-items:stretch;padding:18px 16px;gap:6px}
 .k .ico{width:58px;height:62px;justify-content:flex-start;margin-bottom:2px}.k .m{margin-top:auto}
 .k.open{grid-column:1/-1}}
.k.yoga,.k.hb{background:radial-gradient(120% 90% at 0% 0%,#ffffff33,transparent 55%),radial-gradient(100% 80% at 100% 100%,#00000030,transparent 60%),linear-gradient(150deg,var(--y1),var(--y2));--kt:#fff;--kt2:#ffffffdd}
.k.hb{background:radial-gradient(120% 90% at 0% 0%,#ffffff33,transparent 55%),radial-gradient(100% 80% at 100% 100%,#00000030,transparent 60%),linear-gradient(150deg,var(--h1),var(--h2));--kt:var(--hkt);--kt2:var(--hkt2)}
.absatz{margin:26px 0 0;padding-top:22px;border-top:1px dashed #ffffff30}
.absatz .k{max-width:460px;margin:0 auto}
@media(min-width:640px){.absatz .k{max-width:300px}}
.tile{display:flex;flex-direction:column;max-width:616px;margin:34px auto 0;border-radius:24px;overflow:hidden;cursor:pointer;border:1px solid #ffffff26;transition:transform .2s,box-shadow .2s;color:var(--kt);
 background:radial-gradient(120% 90% at 0% 0%,#ffffff33,transparent 55%),radial-gradient(100% 80% at 100% 100%,#00000030,transparent 60%),linear-gradient(150deg,var(--t1),var(--t2))}
.tile img{aspect-ratio:16/10;height:auto;object-position:50% 25%}
.tile .tx{padding:16px 18px 20px}.tile .pbody{--pt:var(--kt2);--ph:var(--kt);padding:12px 18px 16px;border-top:1px solid #ffffff40;cursor:default}.tile h3{font-size:26px;margin-bottom:4px;color:var(--kt)}.tile p{margin:0 0 6px;color:var(--kt2)}.tile .m{font-weight:600;font-size:14px}
/* Unterseiten */
.pbody{--pt:var(--sub);--ph:var(--acc);color:var(--pt)}
.pbody h3{font-size:24px;color:var(--ph);margin:26px 0 8px}.pbody>h3:first-child{margin-top:0}
.pbody p{margin:0 0 10px;color:var(--pt);font-size:16px}.pbody b{color:var(--ph)}
.pbody a.lnk{text-decoration:underline;font-weight:600;color:var(--ph);cursor:pointer}
.pbody ul.bul{list-style:none;margin:8px 0 6px;padding:0;columns:2 220px;column-gap:24px}
.pbody ul.bul li{padding:2px 0 2px 18px;position:relative;break-inside:avoid;font-size:15.5px;color:var(--pt)}
.pbody ul.bul li:before{content:"•";position:absolute;left:4px;color:var(--ph)}
.pbody ul.zeit{list-style:none;margin:10px 0;padding:0}
.pbody ul.zeit li{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:5px 0;color:var(--pt);border-bottom:1px solid #ffffff1c}
.pbody ul.zeit li b{color:var(--ph)}
.pbody .info{margin:14px 0;padding:12px 16px;border-radius:16px;background:#ffffff1a;color:var(--pt)}.pbody .info p{margin:0 0 4px;font-size:15px}.pbody .info b{color:var(--ph)}
.k .pbody p,.tile .pbody p{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:15px;line-height:1.55;color:var(--kt2)}
.k .pbody h3,.tile .pbody h3{font-size:21px;color:var(--kt)}
.k .pbody .info,.tile .pbody .info{background:var(--chipbg);color:var(--chipfg)}.k .pbody .info p,.k .pbody .info b,.tile .pbody .info p,.tile .pbody .info b{color:inherit}
.pbody a.close{display:inline-block;margin-top:8px;font-weight:600;text-decoration:underline;cursor:pointer}
.back{display:inline-block;margin:22px 0 0;color:var(--acc);cursor:pointer;font-weight:600}
.todo{background:#ffd54a33;border-radius:6px;padding:0 4px;color:#ffe9a6}
/* Kurse-Karten */
.kc{margin:0 0 14px;padding:20px 20px 16px;border-radius:24px;color:var(--kt);border:1px solid #ffffff26;box-shadow:0 14px 30px -20px #000;
 background:radial-gradient(120% 90% at 0% 0%,#ffffff33,transparent 55%),radial-gradient(100% 80% at 100% 100%,#00000026,transparent 60%),linear-gradient(150deg,var(--t1),var(--t2))}
.kc h3{font-size:24px;margin:0 0 8px;color:var(--kt)}
.kc p{margin:0 0 10px;color:var(--kt2);font-size:15.5px}.kc b{color:var(--kt)}.kc a.lnk{text-decoration:underline;font-weight:600;color:var(--kt)}
.kc ul{list-style:none;margin:10px 0 4px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.kc li{background:var(--chipbg);color:var(--chipfg);border-radius:12px;padding:8px 12px;font-size:14.5px}.kc li b{color:inherit}
/* Fußleiste */
.foot{margin-top:44px;text-align:center;color:#fff;padding:90px 0 40px;border-radius:40px 40px 0 0;background:linear-gradient(180deg,transparent 0,var(--fa) 38%,var(--fb) 100%)}
.foot h2{font-size:34px;margin-bottom:10px;color:#fff}.foot p{margin:0 0 4px}
.foot img{width:96px;height:auto;border-radius:14px;display:block;margin:22px auto 12px}
.foot .fl a{margin:0 8px;font-size:14px;opacity:.9;cursor:pointer;text-decoration:underline}
.fab{position:fixed;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);z-index:15;background:linear-gradient(150deg,var(--t1),var(--t2));border:1px solid #fff4;color:var(--kt);font-weight:600;padding:13px 22px;border-radius:99px;box-shadow:0 8px 22px -8px #000}
details.demo{position:fixed;left:10px;bottom:10px;z-index:60;background:#000c;color:#fff;border-radius:14px;padding:6px 10px;font-size:13px;max-width:calc(100vw - 20px)}
details.demo summary{cursor:pointer;padding:4px}.demo div{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}
.demo button{font:inherit;border:1px solid #fff8;background:transparent;color:#fff;padding:4px 11px;border-radius:99px;cursor:pointer}.demo button[aria-pressed=true]{background:#fff;color:#000}
