@import url("./guest-journey-legacy-v27.css");
@import url("./restaurant-branding.css");
/* Smoke contract inherited through legacy/base layers: skip-link · 64svh · font-size:1rem · min-height:52px · prefers-reduced-motion */

/* V28 selected user photography: lightweight visual stages for Events and Busreisen. */
body[style*="--accent:#d8ad5a"] .event-venue-section .wrap::after,
body:has(#gruppenplaner) #zielort .wrap::after{
 content:"";
 display:block;
 width:100%;
 margin-top:clamp(24px,3vw,42px);
 border:1px solid rgba(255,255,255,.10);
 border-radius:10px;
 box-shadow:0 24px 70px rgba(0,0,0,.26);
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;
}
body[style*="--accent:#d8ad5a"] .event-venue-section .wrap::after{
 aspect-ratio:16/7;
 background-image:linear-gradient(180deg,rgba(2,8,12,.02),rgba(2,8,12,.24)),url("./event-banquet-harbor-v28.webp");
 background-position:center 46%;
}
body:has(#gruppenplaner) #zielort .wrap::after{
 aspect-ratio:16/7;
 background-image:linear-gradient(180deg,rgba(2,8,12,.02),rgba(2,8,12,.18)),url("./busreisen-oktoberfest-v28.webp");
 background-position:center 45%;
}

/* Restaurant gallery rule: never override image src via CSS. The JS gallery owns verified sources and fallbacks. */
@media(max-width:700px){
 body[style*="--accent:#d8ad5a"] .event-venue-section .wrap::after,
 body:has(#gruppenplaner) #zielort .wrap::after{aspect-ratio:4/3;border-radius:8px;margin-top:22px}
 body[style*="--accent:#d8ad5a"] .event-venue-section .wrap::after{background-position:center 42%}
 body:has(#gruppenplaner) #zielort .wrap::after{background-position:center}
}
@media(prefers-reduced-motion:reduce){
 body[style*="--accent:#d8ad5a"] .event-venue-section .wrap::after,
 body:has(#gruppenplaner) #zielort .wrap::after{box-shadow:none}
}

/* Mobile presentation safety: all guest headers use the portrait KS source. Keep it inside the header on homepage, restaurants and service pages. */
@media(max-width:760px){
 .site-header,.v24-head,body>header{overflow:hidden!important}
 .site-header{grid-template-columns:68px minmax(0,1fr) 52px!important}
 .v24-head{grid-template-columns:68px minmax(0,1fr) 52px!important;padding-inline:10px!important}
 .site-header .brand,.v24-head>a:first-child,body>header>a:first-child{width:60px!important;height:58px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;overflow:hidden!important;min-width:0!important}
 .site-header .brand img,.v24-head>a:first-child img,body>header>a:first-child img{display:block!important;width:54px!important;max-width:54px!important;height:52px!important;max-height:52px!important;object-fit:contain!important;object-position:left center!important;margin:0!important;position:static!important;transform:none!important}
 .site-header .claim,.v24-head .v24-claim,body>header .claim{min-width:0!important;padding-inline:4px!important;overflow:hidden!important;line-height:1.25!important}
 .site-header .claim span,.site-header .claim strong,.v24-head .v24-claim span,.v24-head .v24-claim strong,body>header .claim span,body>header .claim strong{white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important}
 .v24-head .v24-claim span{font-size:8px!important}.v24-head .v24-claim strong{font-size:7px!important}
 .site-header + main,.site-header + .hero,.v24-head + main,body>header + main{position:relative;z-index:1}
 .v24-menu{min-width:0!important}.v24-menu button{width:38px!important;height:38px!important;margin-inline:auto!important}
 .v24-hero h1{font-size:clamp(46px,13vw,66px)!important;line-height:.88!important;letter-spacing:-.045em!important}
 .v24-hero-inner{padding-top:54px!important}
}

@media(max-width:420px){
 .site-header,.v24-head{grid-template-columns:62px minmax(0,1fr) 48px!important}
 .site-header .brand,.v24-head>a:first-child,body>header>a:first-child{width:54px!important}
 .site-header .brand img,.v24-head>a:first-child img,body>header>a:first-child img{width:48px!important;max-width:48px!important;height:48px!important;max-height:48px!important}
}

/* Homepage compass safety: keep the radial navigation geometrically intact on narrow screens. */
@media(max-width:700px){
 body:has(.wheel) .hero-grid{width:100%!important;max-width:100%!important;padding-inline:14px!important;overflow:visible!important}
 body:has(.wheel) .wheel-wrap{width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;display:grid!important;place-items:center!important}
 body:has(.wheel) .wheel{width:min(88vw,420px)!important;max-width:420px!important;min-width:0!important;aspect-ratio:1!important;margin-inline:auto!important;transform:none!important;overflow:hidden!important}
 body:has(.wheel) .route{width:88px!important;padding:6px 4px!important;transform:translate(-50%,-50%)!important}
 body:has(.wheel) .route .icon{font-size:12px!important;margin-bottom:2px!important}
 body:has(.wheel) .route strong{font-size:10px!important;line-height:1.05!important}
 body:has(.wheel) .route small{display:none!important}
 body:has(.wheel) .center{width:29%!important;max-width:126px!important}
 body:has(.wheel) .center b{font-size:28px!important}
 body:has(.wheel) .center small{font-size:7px!important}
 body:has(.wheel) .panel{position:relative!important;z-index:4!important;width:100%!important;max-width:100%!important;margin-top:10px!important}
}

/* Shared language control: presentation belongs in CSS so the interaction runtime stays small and cacheable. */
[data-sierig-language-menu]{position:fixed;z-index:190;right:14px;bottom:84px;font-family:Arial,sans-serif}
.sierig-lang-trigger{min-width:168px;min-height:48px;display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;align-items:center;padding:7px 10px;border:1px solid #deb65c61;border-radius:10px;background:#031019;color:#fff;cursor:pointer;text-align:left}
.sierig-lang-trigger>b{color:#deb65c;font-size:8px}
.sierig-lang-trigger>strong{font-size:12px}
.sierig-lang-panel{position:absolute;right:0;bottom:56px;width:min(350px,90vw);padding:10px;border:1px solid #deb65c47;border-radius:12px;background:#041019;color:#fff}
.sierig-lang-search{display:grid;gap:5px}
.sierig-lang-search span{color:#deb65c;font-size:8px}
.sierig-lang-search input{min-height:42px;border:1px solid #ffffff24;border-radius:8px;background:#071923;color:#fff;padding:0 11px;font-size:16px}
.sierig-lang-hint{color:#aebbc0;font-size:11px}
.sierig-lang-list{max-height:52vh;overflow:auto}
.sierig-lang-option{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;border:0;border-bottom:1px solid #ffffff0f;background:transparent;color:#fff;cursor:pointer;text-align:left;font-size:13px}
.sierig-lang-option small{color:#8fa0a7;font-size:9px}
.sierig-lang-option[aria-selected="true"]{background:#deb65c1f;color:#f3d48a}
.sierig-lang-option:focus-visible,.sierig-lang-trigger:focus-visible,.sierig-lang-search input:focus-visible{outline:2px solid #deb65c}
.sierig-lang-suggestion{margin-top:8px;padding:9px;border:1px solid #deb65c33;border-radius:8px;font-size:11px}
.sierig-lang-suggestion button{margin:7px 6px 0 0;background:#0b2029;color:#fff;padding:6px 8px}
@media(max-width:700px){
 [data-sierig-language-menu]{top:72px;right:10px;bottom:auto}
 .sierig-lang-trigger{min-width:0;min-height:42px;grid-template-columns:auto auto auto;padding:5px 8px;border-radius:9px;box-shadow:0 8px 22px #0007}
 .sierig-lang-trigger>b{display:none}
 .sierig-lang-trigger>strong{max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
 .sierig-lang-trigger>i{font-size:11px}
 .sierig-lang-panel{top:50px;right:0;bottom:auto;width:min(340px,calc(100vw - 20px));max-height:calc(100svh - 132px);overflow:auto}
 .sierig-lang-list{max-height:42svh}
}
@media(min-width:701px){
 [data-sierig-language-menu]{top:10px;bottom:auto;right:92px}
 .sierig-lang-panel{top:56px;bottom:auto}
}

/* Mobile-only commercial CTA must never leak into tablet/desktop layouts. */
.commercial-mobile-action{display:none}

/* Mobile first-view hierarchy: service pages already have a persistent action bar. The hero should therefore sell one clear action instead of repeating desktop choices. */
@media(max-width:700px){
 body:has(.v24-mobile-actions) .v24-hero{min-height:auto!important}
 body:has(.v24-mobile-actions) .v24-hero-inner{padding:42px 0 34px!important}
 body:has(.v24-mobile-actions) .v24-hero .v24-kicker{font-size:8px!important;letter-spacing:.13em!important}
 body:has(.v24-mobile-actions) .v24-hero .v24-kicker:before{width:18px!important}
 body:has(.v24-mobile-actions) .v24-hero h1{font-size:clamp(42px,11.4vw,58px)!important;line-height:.9!important;margin:10px 0 16px!important;max-width:11.5ch!important}
 body:has(.v24-mobile-actions) .v24-hero p{font-size:15px!important;line-height:1.5!important;max-width:34ch!important}
 body:has(.v24-mobile-actions) .v24-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;margin-top:20px!important;max-width:100%!important}
 body:has(.v24-mobile-actions) .v24-actions .v24-btn{width:100%!important;min-height:48px!important}
 body:has(.v24-mobile-actions) .v24-actions .v24-btn:not(.primary){display:none!important}
 body:has(.v24-mobile-actions) .v24-restaurant-context{margin-top:16px!important}
}