@font-face{font-family:Stars;src:url(assets/stars.otf)}@font-face{font-family:Poppins;font-weight:300;src:url(assets/poppins-300.ttf)}@font-face{font-family:Poppins;font-weight:500;src:url(assets/poppins-500.ttf)}@font-face{font-family:Poppins;font-weight:700;src:url(assets/poppins-700.ttf)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5d6ea;font-family:Poppins,sans-serif;font-weight:300;color:#b77618}.desktop{display:block;width:100%;height:auto}.desktop a{cursor:pointer}.mobile{display:none}a{color:inherit}a:focus-visible,button:focus-visible{outline:3px solid #8d0f12;outline-offset:5px}dialog{max-width:580px;width:calc(100% - 32px);border:2px solid #e25523;border-radius:24px;padding:36px;background:#f5d6ea;color:#8d0f12;font-family:Poppins}dialog::backdrop{background:#400c2866}dialog h2{font-family:Stars;font-size:46px;margin:0 0 20px;font-weight:normal}dialog p{line-height:1.7}.close{float:right;background:none;border:0;font-size:30px;cursor:pointer;color:inherit}.button{border:2px solid #e25523;border-radius:999px;color:#e25523;padding:10px 22px;text-decoration:none;display:inline-block;font-size:15px}.button:hover{background:#e25523;color:#f5d6ea}.actions{display:flex;gap:12px;flex-wrap:wrap}form{display:grid;gap:14px}label{display:grid;gap:6px}input,textarea,button{font:inherit}input,textarea{width:100%;padding:12px;border:1px solid #b77618;border-radius:9px;background:#fff9fd}form button{background:none;cursor:pointer}small{display:block;line-height:1.7}.mobile section{padding:40px 24px}.mobile h1,.mobile h2{font-family:Stars;font-weight:normal;color:#8d0f12;font-size:65px;line-height:1;margin:24px 0}.mobile h1{color:#e25523;font-size:90px}.mobile p{font-size:17px;line-height:1.75}.round{width:80%;aspect-ratio:1;object-fit:cover;border-radius:50%;display:block;margin:auto}.hero .round{object-position:50% 38%}.mobile header{text-align:center;padding:20px;border-top:12px solid #8d0f12}.logo{width:100px}.mobile nav{display:flex;justify-content:center;gap:16px;margin-top:20px;font-size:13px;color:#e25523}.mobile nav a{text-decoration:none}.mobile .circle{border-radius:50%;background:#e25523;color:#f5d6ea;width:290px;height:290px;margin:40px auto 0;display:grid;place-content:center;text-align:center;padding:30px;font-size:60px}.mobile strong{font-family:Stars;font-size:34px;font-weight:normal}.mobile footer{background:#8d0f12;color:white;padding:25px;display:flex;gap:30px;font-size:13px}@media(max-width:700px){.desktop{display:none}.mobile{display:block}dialog{padding:25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Mobile composition follows the asymmetry, overlaps and circular imagery of XD. */
@media(max-width:700px){
 body{overflow-x:clip}.mobile{overflow:hidden}.mobile section{position:relative;padding:0;margin:0}.mobile header{display:grid;grid-template-columns:1fr 1fr 78px 1fr 1fr;align-items:center;gap:6px;padding:20px 14px 12px;border-top-width:10px}.mobile header>a{grid-column:3;grid-row:1}.mobile header .logo{width:72px}.mobile nav{display:contents}.mobile header nav a{font-size:clamp(10px,2.5vw,15px);grid-row:1}.mobile header nav a:nth-child(1){grid-column:1}.mobile header nav a:nth-child(2){grid-column:2}.mobile header nav a:nth-child(3){grid-column:4}.mobile header nav a:nth-child(4){grid-column:5}
 .mobile p{font-size:clamp(14px,3.55vw,20px);line-height:1.65;margin:0 0 1.3em}.mobile .button{font-size:clamp(11px,2.85vw,16px);padding:7px 14px;border-width:1.5px;white-space:nowrap}.mobile h1,.mobile h2{margin:0;font-weight:normal}.mobile .round{margin:0;width:100%;height:auto;aspect-ratio:1}.doodle{position:absolute;width:clamp(30px,9vw,65px);height:auto;color:#e25523;pointer-events:none}
 .mobile .hero{height:clamp(335px,83vw,535px);margin:5px 0 0}.hero>.round{position:absolute;left:5%;top:8%;width:56%;transform:scaleX(-1);object-position:50% 36%}.mobile .hero .greeting{position:absolute;left:35%;top:9%;font-size:clamp(74px,20vw,140px);line-height:.91;z-index:1}.hero>p{position:absolute;right:7%;top:49%;width:40%;text-align:right;font-size:clamp(13px,3.4vw,22px);line-height:1.45}.hero>.button{position:absolute;right:7%;top:83%}.hero .motif-one{left:1%;top:1%;color:#b77618;transform:rotate(20deg)}.hero .motif-two{left:43%;top:60%;color:#b77618}
 .category-strip{display:flex!important;position:relative;justify-content:space-between;gap:3%;padding:0 7%;margin:8px 0 60px;isolation:isolate}.category-strip:before{content:'';position:absolute;left:0;right:0;top:22%;height:28%;background:#8d0f12;z-index:-1}.category-strip a{display:flex;flex-direction:column;align-items:center;width:31%;text-decoration:none}.category-strip img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover}.category-strip a:nth-child(3) img{object-position:50% 25%}.category-strip span{font-family:Stars;font-size:clamp(15px,4.2vw,25px);margin-top:12px;color:#b77618}
 .mobile .intro-composition{padding:0 0 55px;min-height:400px}.intro-composition .section-copy{width:52%;margin-left:8%;position:relative;z-index:1}.intro-composition p{font-size:clamp(13px,3.3vw,20px);line-height:1.6}.mobile .intro-composition .circle{position:absolute;left:58%;top:8px;width:clamp(195px,55vw,365px);height:clamp(195px,55vw,365px);margin:0;padding:24px;font-size:clamp(41px,11.6vw,76px);line-height:1.05;text-align:center;display:block;padding-top:7%;border-radius:50%}.intro-composition .motif-one{left:46%;top:-38px;color:#b77618}.intro-composition .motif-two{left:59%;top:-34px}
 .mobile .about-composition{padding-top:8px;padding-bottom:68px}.about-composition>.round{position:absolute;top:0;left:8%;width:45%}.mobile .about-composition h2{position:relative;margin-left:34%;padding-top:20%;width:60%;font-size:clamp(48px,13.2vw,92px);line-height:1.03;text-align:right;z-index:1}.about-composition .section-copy{width:82%;margin:28px 8% 0 10%;text-align:right}.about-composition .motif-one{left:78%;top:16%;transform:rotate(-15deg)}.about-composition .motif-two{left:2%;top:32%;color:#b77618;transform:rotate(20deg)}
 .mobile .courses-composition{padding:0 8% 85px}.courses-composition>.round{position:absolute;right:8%;top:0;width:42%;object-position:50% 50%}.mobile .courses-composition h2{width:62%;padding-top:9%;font-size:clamp(56px,16vw,108px);line-height:1.02;position:relative;z-index:1}.courses-composition .section-copy{margin-top:35px}.mobile strong{font-size:clamp(27px,7vw,42px);line-height:1.25}.courses-composition .actions{gap:16px;justify-content:flex-start;margin-top:25px}.courses-composition .motif-one{left:22%;top:-24px;color:#b77618}.courses-composition .motif-two{right:41%;top:31%;color:#b77618;transform:rotate(-25deg)}
 .mobile .advice-composition{padding:0 8% 60px}.advice-composition>.round{position:absolute;left:8%;top:15px;width:42%}.mobile .advice-composition h2{position:relative;z-index:1;padding-top:22%;margin-left:29%;width:76%;font-size:clamp(55px,14.4vw,97px);line-height:1.02}.advice-composition .section-copy{margin-top:45px;text-align:right}.advice-composition .actions{justify-content:flex-end;gap:18px;margin-top:30px}.whatsapp-bubble{position:absolute;right:-7%;top:-30px;width:clamp(105px,29vw,195px);height:clamp(105px,29vw,195px);border-radius:50%;background:#c1d6ff;color:#e25523;font-size:clamp(10px,2.55vw,17px);line-height:1.35;text-decoration:none;text-align:center;display:flex;align-items:center;justify-content:center;transform:rotate(15deg);font-weight:500}.advice-composition .motif-one{left:46%;top:4%;transform:rotate(-12deg)}.advice-composition .motif-two{left:24%;top:70%;transform:rotate(20deg)}
 .mobile footer{font-size:12px;padding:24px 8%;gap:32px}.mobile section[id]{scroll-margin-top:20px}
}
/* Keep the greeting beside the portrait and ornaments in the surrounding space. */
@media(max-width:700px){
 .mobile .hero .greeting{left:61%;top:8%;font-size:clamp(66px,18vw,126px);line-height:.95}
 .hero>p{right:5%;width:34%;font-size:clamp(12px,3.2vw,21px)}
 .hero>.button{right:5%}
 .hero .motif-one{left:1%;top:0;width:7vw}
 .hero .motif-two{left:3%;top:auto;bottom:9%;width:7vw}
 .intro-composition .section-copy{width:44%}
 .mobile .intro-composition .circle{left:55%;top:0;width:55vw;height:55vw;padding:0;display:flex;align-items:center;justify-content:center;font-size:10vw;line-height:1.04;text-align:center}
 .intro-composition .motif-one{left:44%;top:-42px;width:7vw}
 .intro-composition .motif-two{left:53%;top:-30px;width:7vw}
 .about-composition .motif-one{left:auto;right:3%;top:2%;width:7vw}
 .about-composition .motif-two{left:1%;top:46vw;width:7vw}
 .courses-composition .motif-one{left:24%;top:-32px;width:7vw}
 .courses-composition .motif-two{right:7%;top:48vw;width:7vw}
 .advice-composition .motif-one{left:48%;top:-18px;width:7vw}
 .advice-composition .motif-two{left:1%;top:auto;bottom:20px;width:7vw}
}
/* Justified paragraphs and a fully visible contact circle. */
.mobile p,dialog p,dialog small{text-align:justify;text-align-last:start;hyphens:auto;overflow-wrap:break-word}
.umlaut-u{position:relative;font-style:normal}
.umlaut-u:before,.umlaut-u:after{content:'';position:absolute;bottom:.56em;width:.065em;height:.065em;border-radius:50%;background:currentColor}
.umlaut-u:before{left:.1em}.umlaut-u:after{left:.29em}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
@media(max-width:700px){.mobile .whatsapp-bubble{right:4%;font-size:clamp(10px,2.55vw,17px)}.mobile .section-copy p,.mobile .hero>p{text-align:justify;text-align-last:start}}

/* German hyphenation for both variants; desktop paragraphs use real text flow. */
.desktop-copy{overflow:visible}.desktop-copy p{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;overflow-wrap:normal}.mobile .section-copy p,.mobile .hero>p{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;overflow-wrap:normal}
/* Smaller desktop content, with full-width bands and edge-cropped artwork. */
@media(min-width:701px){svg.desktop{width:64%;margin-inline:auto;overflow:visible;clip-path:inset(0 -28.125%)}}
@media(max-width:700px){.category-strip .portrait-crop{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden}.category-strip .portrait-crop img{position:absolute;width:170%;height:auto;aspect-ratio:auto;max-width:none;left:-31.6%;top:-26.5%;border-radius:0}}

/* Mobile-only refinements: visible umlaut, greeting overlap and aligned actions. */
@media(max-width:700px){
 .mobile .category-strip .umlaut-u{display:inline-block}
 .mobile .category-strip .umlaut-u:before,.mobile .category-strip .umlaut-u:after{bottom:.82em;width:.085em;height:.085em}
 .mobile .hero .greeting{left:54%}
 .mobile .hero>.button{left:61%;right:auto}
 .mobile .actions{flex-direction:column;align-items:flex-start;justify-content:flex-start}
 .mobile .actions>.button{margin-left:0;margin-right:0}
}

/* Mobile: smaller portrait, more space for the introduction, bold outlined actions. */
@media(max-width:700px){
 .mobile .hero{height:clamp(350px,90vw,590px)}
 .mobile .hero>.round{width:48%;left:5%;top:8%}
 .mobile .hero .greeting{left:49%;top:8%}
 .mobile .hero>p{left:55%;right:auto;width:40%;top:49%}
 .mobile .hero>.button{left:55%;right:auto;top:84%}
 .button,.mobile .button{font-weight:700;border-width:3px}
 .close{font-weight:700}
}

/* Mobile ornaments use existing edge whitespace without reserving layout space. */
@media(max-width:700px){
 .mobile .doodle{width:clamp(34px,9vw,56px)}
 .mobile .doodle path{stroke-width:6}
 .mobile .hero{margin-bottom:24px}
 .mobile .hero .motif-one{left:7%;right:auto;top:76%;bottom:auto}
 .mobile .hero .motif-two{display:none}
 .mobile .intro-composition .motif-one{left:auto;right:7%;top:65vw;bottom:auto}
 .mobile .intro-composition .motif-two{left:auto;right:22%;top:auto;bottom:16px}
 .mobile .about-composition .motif-one{left:auto;right:4%;top:2%;bottom:auto}
 .mobile .about-composition .motif-two{left:3%;right:auto;top:auto;bottom:16px}
 .mobile .courses-composition .motif-one{left:auto;right:3%;top:47vw;bottom:auto}
 .mobile .courses-composition .motif-two{left:auto;right:8%;top:auto;bottom:64px}
 .mobile .advice-composition .motif-one{left:2%;right:auto;top:48vw;bottom:auto}
 .mobile .advice-composition .motif-two{left:auto;right:8%;top:auto;bottom:16px}
}

/* Consistent mobile rhythm, based on the course section's action spacing. */
@media(max-width:700px){
 .mobile{--copy-action-gap:25px;--action-gap:16px;--section-gap:60px}
 .mobile .section-copy>.actions{margin-top:var(--copy-action-gap);gap:var(--action-gap)}
 .mobile .section-copy>p:last-of-type{margin-bottom:0}
 .mobile .intro-composition,.mobile .about-composition,.mobile .courses-composition,.mobile .advice-composition{padding-bottom:var(--section-gap)}
 .mobile .category-strip{margin-bottom:var(--section-gap)}
 .mobile .hero-copy{position:absolute;left:55%;top:49%;width:40%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--copy-action-gap)}
 .mobile .hero-copy>p{margin:0;width:100%;font-size:clamp(12px,3.2vw,21px);line-height:1.45;text-align:justify;text-align-last:start;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;overflow-wrap:normal}
 .mobile .hero-copy>.button{position:static;margin:0}
}

/* Visible search heading; greeting keeps its existing display typography. */
@media(max-width:700px){.mobile .hero .greeting{font-family:Stars;font-weight:normal;color:#e25523;margin:0}}

.mobile footer{flex-wrap:wrap}
.mobile footer,.mobile footer a{font-size:9pt}

/* Fine, centered H1 in the existing red mobile header strip. */
/* Align header title and footer links consistently on mobile. */
@media(max-width:700px){.mobile .site-search-heading{justify-content:center;text-align:center}.mobile footer{justify-content:center;flex-wrap:wrap;row-gap:12px;text-align:center}}
@media(max-width:700px){.mobile .site-search-heading{display:flex;align-items:center;justify-content:center;min-height:22px;padding:2px 12px;margin:0;background:#8d0f12;color:#f5d6ea;font-family:Poppins,sans-serif;font-size:clamp(9px,2.3vw,12px);font-weight:300;line-height:1.3;letter-spacing:.03em;text-align:center}.mobile header{border-top:0}}


/* Mobile hero: ornament above the greeting; menu follows the contact button. */
@media(max-width:700px){
 .mobile .hero{height:auto;padding-top:clamp(171.5px,44.1vw,289.1px);padding-bottom:24px;margin-bottom:0}
 .mobile .hero-copy{position:relative;top:auto}
 .mobile .hero>.round,.mobile .hero .greeting{top:clamp(28px,7.2vw,47.2px)}
 .mobile .hero .motif-one{left:auto;right:12%;top:0;bottom:auto}
 .mobile .hero .motif-two{display:block;left:auto;right:4%;top:clamp(80px,20vw,140px);bottom:auto}
}

/* Full supplied logo with name underneath, mobile navigation only. */
/* Consistent mobile text rhythm; bullet spacing must not be justified. */
@media(max-width:700px){
 .mobile{--heading-copy-gap:35px;--paragraph-gap:1.3em}
 .mobile .about-composition .section-copy,
 .mobile .courses-composition .section-copy,
 .mobile .advice-composition .section-copy{margin-top:var(--heading-copy-gap)}
 .mobile .section-copy>p{margin-bottom:var(--paragraph-gap)}
 .mobile .section-copy>p:last-of-type{margin-bottom:0}
 .mobile .section-copy>.workshop-intro{margin-bottom:0}
 .mobile .workshop-list{margin:0;padding:0;list-style:none;font-size:clamp(14px,3.55vw,20px);line-height:1.65}
 .mobile .workshop-list li{display:grid;grid-template-columns:.65em minmax(0,1fr);column-gap:.3em;margin:0;padding:0;align-items:start}
 .mobile .workshop-list li::before{content:'•';text-align:left}
 .mobile .workshop-list li>span{min-width:0;text-align:justify;text-align-last:start;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;overflow-wrap:normal}
}
@media(max-width:700px){.mobile header{grid-template-columns:minmax(0,1fr) minmax(0,1fr) clamp(106px,29vw,132px) minmax(0,1fr) minmax(0,1fr)}.mobile header .complete-mobile-logo{display:block;width:100%;height:auto;overflow:visible}}
/* Split 6px divider at the previous menu position; generous space around the logo. */
.direct-contact-dialog{max-width:540px}.direct-contact-dialog h2{font:normal 46px/1.1 Stars,sans-serif;margin:0 32px 18px 0}.direct-contact-actions{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:24px}.direct-contact-actions .button{font-weight:700;border-width:3px;text-align:center;cursor:pointer;background:transparent}.direct-contact-actions .button:hover{background:#e25523;color:#f5d6ea}.direct-contact-dialog .direct-contact-note{font-size:12px;margin:20px 0 0}.direct-contact-dialog #copy-contact-status:empty{display:none}
@media(max-width:700px){.mobile header::before,.mobile header::after{content:'';display:block;grid-row:1;height:6px;width:calc(100% - 24px);background:#e25523;align-self:center}.mobile header::before{grid-column:1 / 3;justify-self:start}.mobile header::after{grid-column:4 / 6;justify-self:end}}

/* Keep the entire mobile contact circle above overlapping section headings. */
@media(max-width:700px){.mobile .whatsapp-bubble{z-index:3;pointer-events:auto;cursor:pointer;touch-action:manipulation;clip-path:circle(50%)}}