/* v4.5 — approved compositions. Layout rules live here, after the base styles. */
.nav-label-short{display:none}
.hero{height:100svh;min-height:0;display:flex;flex-direction:column;padding:0;isolation:isolate}
.hero-stage{position:relative;z-index:2;flex:1;min-height:0;display:grid;grid-template-columns:56% 40%;grid-template-rows:minmax(0,1fr);gap:4%;align-items:end;padding:clamp(130px,16svh,160px) 3.5% 65px}
.hero-content{position:static;inset:auto;width:auto;max-width:none;margin:0;min-width:0;align-self:start}
.hero-kicker{font-size:clamp(20px,2.1vw,34px);line-height:1.2;letter-spacing:.06em;margin:0 0 clamp(20px,4svh,40px);gap:12px}
.hero h1{display:block;font-size:min(11.5vw,calc((100svh - 400px)/2.05),192px);font-weight:900;line-height:.82;letter-spacing:-.055em;color:#fff;margin:0 0 16px;text-shadow:none}
.hero .title-line{display:block;width:fit-content;padding:.03em .15em .08em .11em;border-radius:.2em;background:linear-gradient(110deg,#00a5ab,#00949f);-webkit-text-stroke:0;text-shadow:none;animation:none}
.hero .title-row{display:flex;align-items:center;gap:.09em;margin-top:.065em}
.hero .star{position:static;width:.44em;height:.44em;margin:0;flex:none}
.hero-invite{display:table;width:fit-content;max-width:100%;padding:7px 19px;margin:0;background:#fffbedf5;border-radius:40px;font-size:clamp(18px,1.9vw,30px);font-weight:900;line-height:1.3;box-shadow:none;animation:none}
.hero .date-card{position:static;inset:auto;display:flex;flex-direction:column;width:100%;max-width:none;min-width:0;margin:0;padding:12px 24px 15px;border-radius:clamp(36px,4vw,65px);gap:0;animation:none;align-self:end;container-type:inline-size;background:#fffaf0bf;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.hero .date-day{font-size:19cqi;line-height:.9;letter-spacing:-.035em;font-weight:900;white-space:nowrap}
.hero .date-card>strong{font-size:40cqi;line-height:.82;letter-spacing:-.07em;margin:5px 0 0}
.hero .date-year{font-size:11.5cqi;line-height:.9;margin:3px 0 0}
.hero .date-time{--date-time-size:14.2cqi;font-size:var(--date-time-size);line-height:1;width:100%;white-space:nowrap;border-top:1px solid var(--gold);margin:9px 0 0;padding-top:8px}
/* The German time includes "Uhr", so fit the full line to the date card. */
.hero .date-time:lang(de){font-size:min(var(--date-time-size),12.4cqi)}
.hero-bottom{position:relative;inset:auto;flex:none;display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);min-height:110px;padding:20px 4%;gap:20px;background:#fffdf6ed;border-top:1px solid #fff;backdrop-filter:blur(9px)}
.hero-bottom>.hero-notice{display:flex;align-items:center;gap:16px;padding:0;margin:0;max-width:none;font-size:clamp(22px,1.65vw,26px);line-height:1.3;font-weight:700;text-align:left;color:var(--ink)}
.hero-bottom>strong{grid-column:1;grid-row:1}.hero-bottom>span{grid-column:3;grid-row:1;justify-self:end}
.hero-notice>img{width:clamp(48px,3.4vw,56px);height:clamp(48px,3.4vw,56px);flex:none}
.scroll-cue{grid-area:auto;position:absolute;left:50%;right:auto;top:-56px;bottom:auto;margin:0 0 0 -56px;width:112px;height:112px;border:3px solid #e9b33c;outline:2px solid #fff;outline-offset:-6px;background:#009ba7;box-shadow:0 6px 12px #003f4830;z-index:4;animation:gentle-scroll 2.4s ease-in-out infinite}
.scroll-cue .icon{width:58px;height:58px;stroke-width:2.7}
@keyframes gentle-scroll{0%,100%{transform:translateY(-1px) scale(1);box-shadow:0 5px 13px #005b6d26}50%{transform:translateY(1px) scale(1.04);box-shadow:0 7px 17px #005b6d30}}
.floating{background:#009ba7;color:#fff;border:1px solid #ffffffb3;box-shadow:0 6px 24px #00495645;font-size:17px;gap:18px;padding:9px 10px 9px 25px;bottom:max(20px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right))}
.floating b{width:48px;height:48px;background:#ffffff14;color:#ffcf55}.floating .icon{width:30px;height:30px}
.floating:hover{background:#007e89;box-shadow:0 8px 28px #00495655}
/* Children: traced silhouettes, not a pair of rounded rectangular cards. */
.children{padding:12px 2.7% 50px;background:#fff;isolation:isolate}
.children-wave-top{position:absolute;inset:0 0 auto;width:100%;height:115px;z-index:-1}
.children .section-heading{margin:0 auto 26px}
.children .section-heading h2{font-size:clamp(48px,5.4vw,86px);line-height:1.15;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px;letter-spacing:-.04em;color:#008e99;text-shadow:0 3px 0 #00647512}
.children .section-heading h2:before,.children .section-heading h2:after{content:'';width:38px;height:44px;background:url('heading-splash.svg') center/contain no-repeat;flex:none}
.children .section-heading h2:after{transform:scaleX(-1)}
.children .section-heading .star{width:.44em;height:.44em;margin:-.35em 0 0 -.08em;align-self:center}
.children .section-heading>p{font-size:clamp(24px,2.7vw,42px);font-weight:900;line-height:1.25}
.children-grid{max-width:1500px;display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:3%;align-items:stretch}
.kids-visual{min-height:0;height:auto;align-self:stretch;margin:22px 0 5px;isolation:isolate}
.kids-visual:before{inset:-18px -22px -20px -14px;border-radius:0;background:#c7f3ef;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);-webkit-mask:url('kids-photo-shape.svg') center/100% 100% no-repeat;mask:url('kids-photo-shape.svg') center/100% 100% no-repeat;transform:rotate(1deg)}
.kids-visual:after{inset:-19px -3px -15px -3px;border:0;border-radius:0;background:url('kids-photo-outline.svg') center/100% 100% no-repeat;transform:none}
.kids-shape{border-radius:0;-webkit-mask:url('kids-photo-shape.svg') center/100% 100% no-repeat;mask:url('kids-photo-shape.svg') center/100% 100% no-repeat}
.kids-shape>img{object-position:64% center;filter:brightness(1.05) saturate(1.05)}
.balloons{width:clamp(110px,11vw,175px);height:clamp(175px,18vw,280px);top:-66px;left:0}
.kids-copy{display:flex;flex-direction:column;justify-content:flex-start;padding:0;min-width:0}
.kids-invite{font-size:clamp(18px,1.8vw,28px);line-height:1.35;margin:0 0 18px}
.activity-group{position:relative;isolation:isolate;display:flex;align-items:center;gap:20px;padding:4px 22px 8px 12px;margin:0;min-height:0;background:none;border-radius:0}
.activity-group:before{content:'';position:absolute;inset:0 -13px 0 -12px;background:url('activities-shape.svg') center/100% 100% no-repeat;border-radius:0;z-index:-1;transform:none}
.activity-group:after{content:'✦';position:absolute;right:10%;top:-25px;font-size:38px;color:#e3a51e}
.activity-group>img{width:25%;max-width:none;height:clamp(175px,14.5vw,230px);object-fit:contain;flex:none}
.activity-group ul{font-size:clamp(22px,2.5vw,39px);line-height:1.25;letter-spacing:-.035em;flex:1}
.activity-group li+li{margin-top:17px}
.nikolaus-feature{display:flex;align-items:center;isolation:isolate;min-height:0;padding:0 12px 0 0;gap:10px;margin:-8px 0 0}
.nikolaus-feature:before{inset:30px -14px 0 -34px;background:url('nikolaus-shape.svg') center/100% 100% no-repeat;border:0;border-radius:0;transform:none}
.nikolaus-feature>img{width:40%;height:clamp(300px,25.5vw,405px);max-height:none;object-fit:contain;align-self:end;object-position:bottom;animation:none}
.nikolaus-feature>div{padding-top:34px;text-align:left;min-width:0}
.nikolaus-feature p{font-size:clamp(18px,1.9vw,29px);line-height:1.3;margin:0 0 24px}
.nikolaus-feature strong{font-size:clamp(42px,5.8vw,90px);line-height:1.08;margin-top:10px;white-space:nowrap}
.nikolaus-feature .button{width:100%;font-size:clamp(14px,1.6vw,24px);padding:18px 24px;gap:18px;box-shadow:0 3px 0 #fff;line-height:1.3}
.nikolaus-feature .icon{width:29px;height:29px;flex:none}
.nikolaus-feature .little-star{right:0;top:17px;font-size:48px}
.children-wave{height:55px}
@media(min-width:781px) and (max-height:740px){
 .header{top:14px;min-height:70px;padding-block:7px}.brand img{width:130px}
 .hero-stage{padding-top:105px;padding-bottom:45px;grid-template-columns:55% 41%}
 .hero-kicker{font-size:21px;margin-bottom:15px}
 .hero h1{font-size:min(10.5vw,calc((100svh - 340px)/2.05));margin-bottom:12px}
 .hero-invite{font-size:20px;padding:6px 15px}
 .hero .date-card{max-width:400px;justify-self:end;padding:10px 20px}
 .hero-bottom{min-height:98px;padding:13px 3.5%;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);gap:16px}
 .scroll-cue{width:76px;height:76px;top:-38px;margin-left:-38px}.scroll-cue .icon{width:40px;height:40px}
}
@media(max-width:1050px) and (min-width:781px){
 .children{padding-inline:3%}.children-grid{gap:3%}
 .activity-group{gap:10px;padding-right:12px}.activity-group ul{font-size:22px}.activity-group>img{height:185px}
 .nikolaus-feature>img{height:285px}.nikolaus-feature p{font-size:17px}.nikolaus-feature strong{font-size:46px}
 .nikolaus-feature .button{font-size:14px;padding:14px;gap:8px}
}
/* Mobile: a single calm vertical axis, with the booking action only in the header. */
@media(max-width:780px){
 .header{top:0;left:0;right:0;width:100%;min-height:66px;padding:10px 13px;gap:9px;border:0;border-radius:0;background:#fffdf8d9;box-shadow:none;backdrop-filter:blur(10px)}
 .brand{flex:none}.brand img{width:104px;height:auto}
 .languages{margin-left:auto;gap:3px}.languages a{display:flex;align-items:center;gap:3px;padding:7px 6px;min-height:38px}.languages span{font-size:18px}.languages small{font-size:10px}
 .nav-register{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 12px;font-size:14px;gap:0;border-radius:15px;white-space:nowrap}
 .nav-register .icon,.nav-label-full{display:none}.nav-label-short{display:inline}
 .hero{height:100svh;min-height:0}
 .hero-image img{object-position:59% center}
 .hero-shade{background:linear-gradient(180deg,#fff0 15%,#fff8 42%,#fffaf0e6 95%),linear-gradient(90deg,#fff9,#fff0 85%)}
 .hero-stage{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;padding:82px 20px 36px;flex:1;min-height:0}
 .hero-content{display:contents}
 .hero-kicker{font-size:clamp(18px,4.8vw,24px);letter-spacing:.05em;line-height:1.2;gap:0;margin:0;justify-content:center}
 .hero-kicker .gold-dot{display:none}
 .hero h1{display:flex;flex-direction:column;align-items:center;gap:0;font-size:clamp(40px,min(19vw,calc((100svh - 450px)/3)),90px);line-height:.9;margin:0;letter-spacing:-.055em}
 .hero .title-line{padding:.03em .17em .09em .12em;border-radius:.24em}
 .hero .title-row{margin-top:.065em;gap:.12em;justify-content:center}
 .hero .star{width:.38em;height:.38em;margin:0}
 .hero-invite{display:block;max-width:330px;width:100%;font-size:20px;font-weight:700;line-height:1.25;text-align:center;margin:0;padding:0;background:none;border-radius:0}
 .hero .date-card{position:relative;inset:auto;display:flex;align-self:center;width:230px;max-width:100%;margin:2px 0 0;padding:12px 20px 13px;border-radius:28px;gap:0;background:#fffaf0c9;border:1.5px solid #dea62c}
 .hero .date-day{font-size:24px;line-height:1;letter-spacing:0;margin:0}
 .hero .date-card>strong{font-size:68px;line-height:.95;margin:4px 0 0;letter-spacing:-.06em}
 .hero .date-year{font-size:27px;line-height:1;margin:0}
 .hero .date-time{--date-time-size:24px;line-height:1.1;margin:8px 0 0;padding-top:7px}
 .hero-bottom{display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-height:0;padding:25px 18px 15px;gap:9px;background:#fffdf6f0}
 .hero-bottom>.hero-notice{display:flex;align-items:center;justify-content:flex-start;align-self:center;font-size:17px;line-height:1.3;text-align:left;margin:0;width:100%;max-width:470px;gap:12px;padding:0}
 .hero-notice>img{width:32px;height:32px}
 .scroll-cue{width:48px;height:48px;top:-24px;margin-left:-24px;border-width:2px;outline-offset:-4px}.scroll-cue .icon{width:29px;height:29px;stroke-width:2.5}
 .floating{font-size:16px;gap:12px;padding:8px 9px 8px 20px;right:max(13px,env(safe-area-inset-right));bottom:max(13px,env(safe-area-inset-bottom))}.floating b{width:42px;height:42px}
 .children{padding:32px 23px 60px}.children-wave-top{height:65px}.children .section-heading{margin-bottom:28px}
 .children .section-heading h2{font-size:clamp(37px,8.8vw,60px);gap:5px;margin-bottom:10px}.children .section-heading h2:before,.children .section-heading h2:after{width:20px;height:28px}
 .children .section-heading>p{font-size:clamp(22px,4.5vw,30px)}
 .children-grid{grid-template-columns:minmax(0,1fr);gap:30px;max-width:650px}
 .kids-visual{height:clamp(280px,80vw,470px);min-height:0;margin:15px 6px 8px}
 .kids-shape>img{object-position:64% center}.balloons{width:100px;height:160px;top:-38px;left:-17px}
 .kids-copy{padding:0}.kids-invite{font-size:18px;line-height:1.5;margin-bottom:20px}
 .activity-group{padding:14px 7px 14px 0;gap:10px;margin:0;min-height:0}
 .activity-group>img{width:24%;height:155px}.activity-group ul{font-size:clamp(20px,5vw,28px);line-height:1.3}.activity-group li+li{margin-top:13px}
 .activity-group:after{font-size:29px;top:-17px;right:5%}
 .nikolaus-feature{gap:6px;padding-right:0;min-height:0;width:100%;max-width:none;margin:0}
 .nikolaus-feature:before{inset:25px -10px 0 -17px}.nikolaus-feature>img{width:44%;height:auto;aspect-ratio:637/850;flex:none}
 .nikolaus-feature>div{padding-top:30px}.nikolaus-feature p{font-size:17px;margin-bottom:16px}.nikolaus-feature strong{font-size:clamp(30px,8vw,50px);margin-top:6px}
 .nikolaus-feature .button{font-size:13px;padding:12px 10px;gap:6px}.nikolaus-feature .icon{width:18px;height:18px}.nikolaus-feature .little-star{font-size:34px;top:4px}
 .drawer-bar{padding-inline:20px;min-height:70px}.drawer-content{padding-top:24px}
}
@media(max-width:780px) and (max-height:740px){
 .header{min-height:58px;padding-block:7px}.hero-stage{padding-top:70px;gap:8px;padding-bottom:32px}
 .hero-invite{font-size:18px;max-width:300px}.hero-kicker{font-size:18px}
 .hero .date-card{width:205px;padding:9px 18px}.hero .date-day{font-size:20px}.hero .date-card>strong{font-size:56px}.hero .date-year{font-size:24px}.hero .date-time{--date-time-size:21px;margin-top:6px;padding-top:5px}
 .hero-bottom{padding-top:25px;padding-bottom:12px;gap:8px}
}
@media(max-width:780px) and (max-height:620px){
 .hero-stage{gap:6px;padding:66px 16px 29px}.hero h1{font-size:40px}.hero-invite{font-size:17px;max-width:290px}
 .hero .date-card{width:185px;padding:7px 15px}.hero .date-day{font-size:17px}.hero .date-card>strong{font-size:45px}.hero .date-year{font-size:20px}.hero .date-time{--date-time-size:19px;margin-top:4px;padding-top:4px}
 .hero-bottom{padding:24px 15px 9px;gap:6px}.hero-bottom>.hero-notice{gap:10px}.hero-notice>img{width:28px;height:28px}
}
@media(max-width:359px){
 .header{padding-inline:8px;gap:5px}.brand img{width:85px}.languages a{padding:6px 4px;gap:2px}.languages span{font-size:16px}.languages small{font-size:9px}.nav-register{font-size:12px;padding:9px;min-height:38px}
 .children{padding-inline:19px}.nikolaus-feature p{font-size:15px}.nikolaus-feature strong{font-size:31px}.nikolaus-feature .button{font-size:12px}
}
/* Very wide/short windows use a compact two-column hero, never a horizontal date strip. */
@media(orientation:landscape) and (max-height:590px){
 .header{top:8px;left:3%;right:3%;width:auto;min-height:50px;padding:5px 14px;border-radius:18px;gap:10px}.brand img{width:90px}
 .languages a{min-height:34px;padding:6px}.nav-register{display:inline-flex;font-size:13px;min-height:36px;padding:9px 15px}.nav-register .icon{width:18px;height:18px}
 .hero-stage{display:grid;grid-template-columns:57% 39%;grid-template-rows:minmax(0,1fr);align-items:center;justify-content:initial;padding:75px 4% 29px;gap:4%}
 .hero-content{display:block;align-self:center}.hero-kicker{font-size:17px;justify-content:flex-start;margin:0 0 10px}
 .hero h1{display:flex;flex-direction:row;align-items:center;gap:7px;font-size:clamp(32px,8.3svh,45px);margin:0 0 12px}.hero .title-row{margin:0}.hero .title-line{padding:.05em .15em .12em}
 .hero-invite{font-size:17px;text-align:left;max-width:360px;padding:5px 10px;background:#fffbeddf;border-radius:18px}
 .hero .date-card{grid-column:2;grid-row:1;align-self:center;position:static;width:100%;max-width:240px;padding:8px 13px;justify-self:end;margin:0;border-radius:28px}
 .hero .date-day{font-size:22px}.hero .date-card>strong{font-size:60px}.hero .date-year{font-size:25px}.hero .date-time{--date-time-size:23px;margin-top:5px;padding-top:5px}
 .hero-bottom{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);min-height:78px;padding:10px 4%;gap:10px}
 .hero-bottom>.hero-notice{font-size:17px;line-height:1.2;gap:7px}.hero-notice>img{width:28px;height:28px}
 .scroll-cue{width:48px;height:48px;top:-24px;margin-left:-24px}.scroll-cue .icon{width:28px;height:28px}
}

/* Keep the header outside the scrolling region, including during loading. */
body.drawer-open{position:fixed;left:0;right:0;overflow:hidden;width:100%}
.drawer{top:var(--drawer-top,0px);bottom:auto;height:var(--drawer-height,100dvh);display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none}
.drawer-bar{position:relative;top:auto;flex:0 0 auto;min-height:72px;padding:14px 24px; padding-top:max(14px,env(safe-area-inset-top));z-index:5;background:#fff;isolation:isolate}
.drawer-bar .close{flex:none;min-width:44px;min-height:44px}
.drawer-content{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:auto;scroll-padding-block:20px;padding-bottom:max(40px,env(safe-area-inset-bottom))}
.nikolaus-drawer .drawer-content{width:100%;margin:0 auto}
.profile-picture{top:0}
.fancybox__container{top:var(--drawer-top,0px)!important;height:var(--drawer-height,100dvh)!important;bottom:auto!important}
#gallery-close{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:10}

.drawer-bar>div{min-width:0;padding-right:15px}.drawer-context{display:block;font-size:10px;line-height:1.3;letter-spacing:.08em;color:#467b82}.drawer-title{display:block;font-size:15px;line-height:1.3;letter-spacing:0;font-weight:700;margin-top:3px;color:var(--ink)}
.gallery-drawer .drawer-title{color:#fff}.gallery-drawer .drawer-context{color:#cde7e9}

body.drawer-open .floating{display:none;opacity:0;visibility:hidden;pointer-events:none}

/* v4.5.1: use the spare portrait height above AND below the hero content. */
@media(max-width:780px) and (orientation:portrait){
 .hero-stage{justify-content:center;justify-content:safe center}
}
/* Only the five requested drawers have a one-line compact header. */
#panel-registration .drawer-bar,#panel-kindergarten .drawer-bar,
#panel-psy .drawer-bar,#panel-xef .drawer-bar,#panel-nikolaus .drawer-bar{
 min-height:64px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:10px
}

/* v4.5.2: legible invitation below the date in the stacked mobile hero. */
@media(max-width:780px){
 .hero-invite{width:fit-content;padding:6px 12px;background:#fffbed;border-radius:20px;color:var(--ink);font-weight:800}
}
@media(max-width:780px) and (orientation:portrait){
 .hero-invite{order:2;flex-shrink:0}
}
@media(max-width:780px) and (max-height:660px) and (orientation:portrait){
 .hero-stage{gap:4px;padding-top:66px}
}