/* Shared contact-link hover treatment. */
.contact-info a,.contact-route a.button.outline{transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.contact-info a:hover,.contact-info a:focus-visible{color:#a67b55;border-color:#a67b55;transform:translateX(4px)}
.contact-info a:hover .contact-icon,.contact-info a:focus-visible .contact-icon{transform:scale(1.08)}
.contact-info .contact-icon{transition:transform .2s ease}
.contact-route a.button.outline:hover,.contact-route a.button.outline:focus-visible{background:#a67b55;color:#fff;border-color:#a67b55;transform:translateY(-2px);box-shadow:0 6px 16px #5b422833}

/* Sitewide motion: restrained, editorial and respectful of reduced-motion preferences. */
body{animation:site-page-in .65s cubic-bezier(.22,1,.36,1) both}
.hero-copy>*{animation:site-hero-in .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--hero-delay,0ms) + var(--delay,0ms))}
.hero-copy .eyebrow{--delay:80ms}.hero-copy h1{--delay:150ms}.hero-copy .rule{--delay:220ms}.hero-copy .hero-text{--delay:290ms}
.motion-ready .site-reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),transform .75s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms)}
.motion-ready .site-reveal.is-visible{opacity:1;transform:none}
.motion-ready .service-card,.motion-ready .gallery-item{transition:opacity .75s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),transform .75s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),color .25s ease}
.service-card:hover .card-heading,.gallery-item:hover>span{color:#a67b55}
.button,.header-cta,.desktop-nav a,.mobile-menu a,.hotel-footer-nav a{transition:color .25s ease,background-color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.button:hover,.button:focus-visible{transform:translateY(-2px);box-shadow:0 8px 20px #5b42282b}
@keyframes site-page-in{from{opacity:0}to{opacity:1}}
@keyframes site-hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body,.hero-copy>*,.motion-ready .site-reveal,.motion-ready .service-card,.motion-ready .gallery-item{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}
.menu-toggle{display:none!important}@media(max-width:1023px){.menu-toggle{display:grid!important}}@media(min-width:1024px){.desktop-nav{display:flex!important}}
.gallery{display:none!important}.gallery-item,.service-card{cursor:default!important}.gallery-item .image-arrow,.service-card .image-arrow{display:none!important}
.service-card{cursor:pointer!important}
.privacy-consent{display:block!important}.privacy-consent input[type=checkbox]{display:inline-block!important;vertical-align:middle;margin:0 8px 0 0}.privacy-consent a{display:inline!important}
.privacy-consent a{transition:color .2s ease,background-color .2s ease,text-decoration-color .2s ease}.privacy-consent a:hover,.privacy-consent a:focus-visible{color:#a67b55;text-decoration-color:#a67b55}
.privacy-consent a:hover,.privacy-consent a:focus-visible{color:#a67b55!important;text-decoration-color:#a67b55!important}
.privacy-consent a:hover,.privacy-consent a:focus-visible{background-color:#a67b55!important;color:#fff!important;padding:1px 4px;border-radius:2px}
.privacy-consent a:hover,.privacy-consent a:focus-visible{background-color:transparent!important;color:inherit!important;padding:0;border-radius:0;text-decoration:underline;text-decoration-color:#a67b55!important;text-decoration-thickness:1px;text-underline-offset:3px}

/* Off-canvas menu matched to the supplied portrait reference. */
.offcanvas-menu{--menu-cream:#f1eadf;--menu-gold:#b6814e;--menu-unit:min(1vw,9px);position:fixed;inset:0;z-index:1000!important;background:#211e15!important;color:var(--menu-cream)!important;padding:0!important;overflow:auto!important;overscroll-behavior:contain}
.offcanvas-menu[hidden]{display:none!important}
.offcanvas-menu::before{display:none}
.offcanvas-menu-shell{position:relative;display:flex;flex-direction:column;width:min(100%,900px);min-height:max(100dvh,calc(195.4 * var(--menu-unit)));margin:0 auto;padding:0;background:linear-gradient(to bottom,#211e15 0%,#211e15ed 59%,#211e154d 100%),url('/assets/offcanvas-workbench-20261029.webp?v=ff27105e3c1951ff') center bottom/100% 100% no-repeat}
.offcanvas-menu-head{position:relative;display:flex;align-items:center;flex:none;min-height:calc(22.8 * var(--menu-unit));margin:0 calc(7 * var(--menu-unit));padding:calc(4.3 * var(--menu-unit)) 0 calc(4.2 * var(--menu-unit));border-bottom:1px solid #c8b89b99}
.offcanvas-menu-brand{display:flex!important;align-items:center;gap:calc(1.8 * var(--menu-unit));width:max-content;max-width:calc(100% - 44px);color:inherit!important}
.offcanvas-menu-logo{display:block;width:calc(22 * var(--menu-unit));height:auto;margin-left:calc(-.8 * var(--menu-unit))}
.offcanvas-menu-trade{display:block;width:calc(38.6 * var(--menu-unit));height:auto;filter:brightness(0) invert(1);opacity:1}
.offcanvas-menu-close{position:absolute;top:50%;right:calc(-.7 * var(--menu-unit));transform:translateY(-50%);width:max(36px,calc(7.8 * var(--menu-unit)));height:max(36px,calc(7.8 * var(--menu-unit)));padding:0;border:0;background:transparent;color:var(--menu-cream);cursor:pointer}
.offcanvas-menu-close span{position:absolute;top:50%;left:10%;width:80%;height:1.5px;background:currentColor}
.offcanvas-menu-close span:first-child{transform:rotate(45deg)}.offcanvas-menu-close span:last-child{transform:rotate(-45deg)}
.offcanvas-menu-body{display:flex;flex:1;flex-direction:column;gap:0;width:100%;padding:0;min-width:0}
.offcanvas-menu-nav{display:grid;grid-template-rows:19.8fr 23.5fr 18.9fr 18.9fr 20.2fr;flex:1;align-items:stretch;justify-content:stretch;gap:0;min-height:calc(101.3 * var(--menu-unit));width:auto;max-width:none!important;margin:0 calc(7 * var(--menu-unit))}
.offcanvas-menu-nav a{position:relative;display:flex!important;flex:1;align-items:center;width:100%;max-width:none;min-width:0;min-height:0;margin:0;padding:calc(5 * var(--menu-unit)) calc(5 * var(--menu-unit)) calc(3 * var(--menu-unit)) calc(.8 * var(--menu-unit))!important;border:0!important;border-bottom:1px solid #c8b89b40!important;color:var(--menu-cream)!important;font:400 calc(6.65 * var(--menu-unit))/1 'Nimbus Roman','Times New Roman',Times,serif!important;letter-spacing:0;text-transform:uppercase;text-wrap:initial}
.offcanvas-menu-nav a:nth-child(2){flex:1.25;min-height:0}
.offcanvas-menu-nav a:last-child{border-bottom:0!important}
.offcanvas-menu-nav a::after,.offcanvas-menu-contact-actions>a::after{content:'';display:block;position:absolute;right:calc(1.2 * var(--menu-unit));top:50%;width:calc(2.3 * var(--menu-unit));height:calc(2.3 * var(--menu-unit));margin:0;border:solid var(--menu-gold);border-width:2px 2px 0 0;background:none;transform:translateY(-50%) rotate(45deg);transition:none}
.offcanvas-menu-nav a:hover,.offcanvas-menu-nav a:focus-visible{color:#fff!important;background:#ffffff06;transform:none!important}
.offcanvas-menu-lower{display:grid;grid-template-columns:calc(33 * var(--menu-unit)) minmax(0,1fr);align-items:start;gap:calc(7 * var(--menu-unit));flex:none;min-height:calc(59.8 * var(--menu-unit));width:100%;border-top:1px solid #c8b89b99;padding:calc(7.8 * var(--menu-unit)) calc(6.2 * var(--menu-unit)) calc(17 * var(--menu-unit)) calc(6.5 * var(--menu-unit))}
.offcanvas-menu-seal{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;margin:0;border:1px solid #f1eadf;border-radius:50%;background:transparent;box-shadow:none}
.offcanvas-menu-seal img{display:block;width:84%;height:auto;filter:url(#handwerk-white-script)}
.offcanvas-menu-contact{display:flex;flex-direction:column;align-items:stretch;gap:calc(2 * var(--menu-unit));width:100%;min-width:0;padding-top:calc(1 * var(--menu-unit))}
.offcanvas-menu .offcanvas-menu-contact-heading{margin:0;color:var(--menu-cream);font:400 calc(2.85 * var(--menu-unit))/1.45 var(--sans);letter-spacing:.15em;text-transform:uppercase}
.offcanvas-menu-contact-actions{display:flex;flex-direction:column;gap:calc(1.8 * var(--menu-unit));width:100%;margin:0;border:0;background:none;box-shadow:none}
.offcanvas-menu-contact-actions>a{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:calc(4.5 * var(--menu-unit));min-height:max(40px,calc(9.2 * var(--menu-unit)));padding:calc(1.6 * var(--menu-unit)) calc(7 * var(--menu-unit)) calc(1.6 * var(--menu-unit)) calc(4.3 * var(--menu-unit))!important;border:1px solid #c8b89b99!important;background:#211e1540;color:var(--menu-cream)!important;text-align:left;font:400 calc(3.4 * var(--menu-unit))/1.2 'Nimbus Roman','Times New Roman',Times,serif;letter-spacing:0;text-transform:none}
.offcanvas-menu-contact-actions>a::after{right:calc(4.5 * var(--menu-unit));width:calc(1.7 * var(--menu-unit));height:calc(1.7 * var(--menu-unit))}
.offcanvas-menu-contact-actions>a:hover,.offcanvas-menu-contact-actions>a:focus-visible{background:#ffffff10!important;color:#fff!important;transform:none!important}
.offcanvas-menu-contact svg{display:block;width:calc(3.8 * var(--menu-unit));height:calc(3.8 * var(--menu-unit));fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.offcanvas-menu-legal{display:flex;align-items:center;justify-content:center;flex:none;gap:calc(2 * var(--menu-unit));min-height:calc(11.5 * var(--menu-unit));width:100%;margin:0;border-top:1px solid #c8b89b99;background:#211e1540;color:var(--menu-cream);font:400 calc(2.7 * var(--menu-unit))/1.2 'Nimbus Roman','Times New Roman',Times,serif}
.offcanvas-menu-legal a{color:inherit!important}
.offcanvas-menu :focus-visible{outline:2px solid #d9c7ad;outline-offset:4px}
@media(max-width:360px){.offcanvas-menu-contact-actions>a{gap:10px;padding-left:10px!important;padding-right:20px!important;font-size:13px}.offcanvas-menu-contact-actions>a::after{right:10px}.offcanvas-menu .offcanvas-menu-contact-heading{font-size:10px}.offcanvas-menu-legal{font-size:12px}}

/* Center and stack the complete footer on mobile and tablet. */
@media(max-width:1023px){
 .hotel-footer .hotel-footer-main{grid-template-columns:minmax(0,1fr);grid-template-areas:"identity" "nav" "craft";gap:34px;text-align:center}
 .hotel-footer .hotel-footer-identity{min-width:0}
 .hotel-footer .hotel-footer-brand{margin-inline:auto;flex-direction:column;align-items:center;gap:14px;max-width:100%}
 .hotel-footer .hotel-footer-origin{max-width:100%}
 .hotel-footer .hotel-footer-nav{width:100%;max-width:300px;justify-self:center;align-items:center;border-top:0;padding-top:0}
 .hotel-footer .hotel-footer-nav a{justify-content:center;text-align:center;position:relative;padding-inline:24px}
 .hotel-footer .hotel-footer-nav a>span{position:absolute;right:0}
 .hotel-footer .hotel-footer-craft{grid-area:craft;grid-column:auto;display:flex;flex-direction:column;align-items:center;gap:0;border-top:0;padding-top:0;text-align:center}
 .hotel-footer .hotel-footer-craft .eyebrow{margin:5px 0 24px;flex-basis:auto}
 .hotel-footer .hotel-footer-craft .handwerk-logo{margin:0 0 22px}
 .hotel-footer .hotel-footer-craft>p:last-child{margin:0;text-align:center}
}

/* The header contact CTA yields to the burger navigation. */
@media(max-width:1023px){header .header-cta{display:none!important}}

/* Fit the entire offcanvas to the available width AND height. */
.offcanvas-menu{--menu-unit:min(1vw,.47dvh,9px);height:100dvh;overflow:hidden!important}
.offcanvas-menu-shell{height:100dvh;min-height:0;max-height:100dvh}
.offcanvas-menu-body{min-height:0}
.offcanvas-menu-nav{min-height:0}
.offcanvas-menu-nav a{font-size:max(18px,calc(6.65 * var(--menu-unit)))!important}
.offcanvas-menu-contact-actions>a{font-size:max(12px,calc(3.4 * var(--menu-unit)))}
.offcanvas-menu .offcanvas-menu-contact-heading{font-size:max(10px,calc(2.85 * var(--menu-unit)))}
.offcanvas-menu-legal{font-size:max(11px,calc(2.7 * var(--menu-unit)))}
@media(max-height:700px) and (min-aspect-ratio:1/1){
 .offcanvas-menu{--menu-unit:min(1vw,1dvh,7px)}
 .offcanvas-menu-shell{width:min(100%,1000px)}
 .offcanvas-menu-head{min-height:0;height:clamp(50px,18dvh,100px);padding:8px 0;margin-inline:5%;flex-shrink:0}
 .offcanvas-menu-logo{width:clamp(58px,19dvh,110px)}
 .offcanvas-menu-trade{width:clamp(120px,32dvh,210px)}
 .offcanvas-menu-close{width:36px;height:36px;right:0}
 .offcanvas-menu-body{display:grid;grid-template-columns:1.15fr 1fr;gap:5%;padding:12px 5%;align-items:stretch}
 .offcanvas-menu-nav{margin:0;min-height:0}
 .offcanvas-menu-nav a{font-size:clamp(16px,5dvh,30px)!important;padding:4px 24px 4px 0!important}
 .offcanvas-menu-nav a::after{right:6px;width:8px;height:8px}
 .offcanvas-menu-lower{min-height:0;border-top:0;border-left:1px solid #c8b89b40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 0 0 8%}
 .offcanvas-menu-seal{width:clamp(54px,20dvh,110px);flex:none}
 .offcanvas-menu-contact{padding:0;gap:8px}
 .offcanvas-menu .offcanvas-menu-contact-heading{font-size:clamp(10px,2.6dvh,13px);line-height:1.3}
 .offcanvas-menu-contact-heading br{display:none}
 .offcanvas-menu-contact-actions{gap:6px}
 .offcanvas-menu-contact-actions>a{min-height:30px;padding:6px 28px 6px 10px!important;gap:10px;font-size:clamp(12px,3.5dvh,17px)}
 .offcanvas-menu-contact svg{width:16px;height:16px}
 .offcanvas-menu-contact-actions>a::after{right:12px;width:6px;height:6px}
 .offcanvas-menu-legal{min-height:30px;font-size:11px;gap:10px}
}
@media(max-height:300px) and (min-aspect-ratio:1/1){
 .offcanvas-menu-head{height:44px;padding:5px 0}
 .offcanvas-menu-logo{width:50px}
 .offcanvas-menu-trade{width:110px}
 .offcanvas-menu-brand{max-width:calc(100% - 86px)}
 .offcanvas-menu-nav a{font-size:clamp(11px,4.5dvh,14px)!important;padding-block:2px!important}
 .offcanvas-menu-seal{position:absolute;top:6px;right:58px;width:32px}
 .offcanvas-menu-legal{min-height:24px;font-size:10px}
}

/* Match the desktop header contact CTA green, including interaction states. */
.offcanvas-menu-contact-actions>a,
.offcanvas-menu-contact-actions>a:hover,
.offcanvas-menu-contact-actions>a:focus-visible{background:#02582d!important;color:#fff7ee!important}

/* Keep email and telephone next to each other in the mobile contact block. */
@media(max-width:600px){
 .contact-info .contact-direct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:clamp(8px,3vw,18px);align-items:start}
 .contact-info .contact-direct>a{min-width:0;white-space:nowrap;font-size:clamp(9.5px,3vw,12px);gap:4px;justify-self:start}
 .contact-info .contact-direct .contact-icon{width:clamp(14px,4vw,18px);height:clamp(14px,4vw,18px);flex:none}
}

/* Mobile direct contacts belong below opening hours in the right column. */
@media(max-width:600px){
 .contact-info .contact-direct{grid-column:2;grid-row:3/5;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;margin-top:12px;align-self:start}
 .contact-info .contact-direct>a{font-size:clamp(9px,2.8vw,12px);white-space:nowrap;max-width:100%}
}

/* Three equal mobile contact actions below both visit/hours columns. */
@media(max-width:600px){
 .contact-info .contact-direct{display:contents}
 .contact-info>a:nth-child(3){grid-column:5/7;grid-row:5;align-self:stretch;justify-self:stretch;margin-top:18px}
 .contact-info .contact-direct>a{grid-row:5;align-self:stretch;justify-self:stretch;margin-top:18px}
 .hotel-page .contact-info{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:8px}
 .contact-info>.eyebrow:first-child,.contact-info>p:nth-child(2){grid-column:1/4}
 .contact-info>.hours,.contact-info>p:nth-child(5){grid-column:4/7}
 .contact-info .contact-direct>a[href^="mailto:"]{grid-column:1/3}
 .contact-info .contact-direct>a[href^="tel:"]{grid-column:3/5}
 .contact-info>a:nth-child(3),.contact-info .contact-direct>a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-width:0;min-height:72px;padding:12px 6px;border:1px solid #02582d;background:#02582d;color:#fff7ee;
  font-size:12px;line-height:1.2;text-align:center;white-space:normal;transform:none;
 }
 .contact-info>a:nth-child(3):hover,.contact-info .contact-direct>a:hover{background:#064626;transform:none}
 .contact-info>a:nth-child(3):focus-visible,.contact-info .contact-direct>a:focus-visible{outline:2px solid #a67b55;outline-offset:3px}
 .contact-info>a:nth-child(3) .contact-icon,.contact-info .contact-direct>a .contact-icon{width:21px;height:21px;filter:brightness(0) invert(1)}
 .contact-info>a:nth-child(3)>span,.contact-info .contact-direct>a>span{font-size:0;line-height:0}
 .contact-info>a:nth-child(3)>span::after{content:'Anfahrt';font-size:12px;line-height:1.2}
 .contact-info .contact-direct>a[href^="mailto:"]>span::after{content:'E-Mail';font-size:12px;line-height:1.2}
 .contact-info .contact-direct>a[href^="tel:"]>span::after{content:'Telefon';font-size:12px;line-height:1.2}
}

/* Never split the postal code from its town. Mobile uses a separate address line. */
.contact-info .contact-postal{white-space:nowrap}
@media(max-width:600px){
 .contact-info .contact-address-separator{display:none}
 .contact-info .contact-postal{display:block}
 .contact-postal+br{display:none}
 .contact-info .contact-postal+br{display:none}
}
.contact-info{container-type:inline-size}
@container(max-width:220px){
 .contact-address-separator{display:none}
 .contact-postal{display:block}
 .contact-postal+br{display:none}
}

/* Use the same CSS copper variable and hover as the Nachricht-senden button. */
@media(max-width:600px){
 .contact-info>a:nth-child(3),.contact-info .contact-direct>a{background:var(--copper);border-color:var(--copper)}
 .contact-info>a:nth-child(3):hover,.contact-info .contact-direct>a:hover{background:#8c6546;border-color:#8c6546}
}

/* Always stack mobile contact information: hours first, address second. */
@media(max-width:600px){
 .hotel-page .contact-info>.hours{grid-column:1/-1;grid-row:1;margin-top:0}
 .hotel-page .contact-info>p:nth-child(5){grid-column:1/-1;grid-row:2}
 .hotel-page .contact-info>.eyebrow:first-child{grid-column:1/-1;grid-row:3;margin-top:24px}
 .hotel-page .contact-info>p:nth-child(2){grid-column:1/-1;grid-row:4}
}

/* Always center mobile contact information, independent of text wrapping. */
@media(max-width:600px){.hotel-page .contact-info>p{text-align:center}}

/* Match address typography to opening hours in the mobile contact block. */
@media(max-width:600px){.hotel-page .contact-info>p:nth-child(2){font-size:14px}}

/* Three-line burger; preserve the expanded close transformation. */
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-7px) rotate(-45deg)}

/* Keep the offcanvas contact heading on one complete, responsive line. */
.offcanvas-menu-contact{container-type:inline-size}
.offcanvas-menu .offcanvas-menu-contact-heading{white-space:nowrap;font-size:min(max(10px,calc(2.85 * var(--menu-unit))),5.4cqw);letter-spacing:.06em}

/* Copyright left; legal links flush right, without a back-to-top link. */
.hotel-footer .hotel-footer-legal{margin-left:auto;justify-content:flex-end}

/* Match the unscrolled mobile header to its sticky background. */
@media(max-width:600px){.hotel-page .header{background:#201c17f7}}

/* Font-independent northeast arrows: never rendered as iOS emoji. */
.ui-arrow{display:inline-block;width:.85em;height:.85em;vertical-align:-.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;flex:none}

/* Keep the root within the viewport without disabling vertical scroll or pinch zoom. */
html,body{overflow-x:hidden;overscroll-behavior-x:none}
@supports(overflow-x:clip){html,body{overflow-x:clip}}