/* Black Eagle design system (decisions round 1 + 2, 2026-10-04; docs/website/design-system.md).
   build.py prepends this file to every section's <style>, so every snippet stays self-contained.
   Sections use the tokens and the be-* components below instead of their own values. */

.sh-sec{
  /* grid: one content column, one left edge */
  --be-max:1120px; --be-gutter:24px;
  /* colour: four text colours, one surface */
  --be-ink:#141414; --be-grey:#6e6e73; --be-faint:#a1a1a6; --be-white:#fff; --be-white-2:rgba(255,255,255,.72); /* muted text on photos/dark */
  --be-band:#f4f3ea; --be-line:rgba(20,20,20,.1);
  /* type: five sizes (+ the 19 px intro step); phones in the clamp minimum */
  --be-fs-display:clamp(40px,4.45vw,64px); --be-fs-h:clamp(32px,3.35vw,48px); --be-fs-title:clamp(20px,1.55vw,22px);
  --be-fs-intro:clamp(17px,1.35vw,19px); --be-fs-body:clamp(16px,1.2vw,17px); --be-fs-small:14px;
  /* radius: cards/photos, small boxes, pills */
  --be-r:20px; --be-r-sm:12px; --be-r-pill:999px;
  /* motion: the hero's spring and ease */
  --be-spring:cubic-bezier(.3,1.6,.5,1); --be-ease:cubic-bezier(.25,.1,.25,1);
  /* liquid glass (the hero card language) */
  --be-glass:rgba(20,20,20,.06); --be-glass-hover:rgba(20,20,20,.11);
  --be-glass-dark:rgba(255,255,255,.12); --be-glass-dark-hover:rgba(255,255,255,.2);
  --be-edge:linear-gradient(115deg,transparent 32%,rgba(20,20,20,.28) 44%,rgba(20,20,20,.7) 50%,rgba(20,20,20,.28) 56%,transparent 68%);
  --be-edge-dark:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 44%,#fff 50%,rgba(255,255,255,.55) 56%,transparent 68%);
  font-family:Inter,system-ui,-apple-system,sans-serif;
}
@media(min-width:768px){ .sh-sec{--be-gutter:48px} }
.sh-sec.be-band,.sh-sec .be-band{background:var(--be-band)}

/* layout */
.sh-sec .be-wrap{width:min(var(--be-max),100% - 2*var(--be-gutter));margin-inline:auto}

/* headline: black line + grey line, left by default; .be-center only for amenities, hosts and the closing CTA */
.sh-sec .be-h{margin:0;font-size:var(--be-fs-h);font-weight:600;line-height:1.08;letter-spacing:-.025em;color:var(--be-ink);text-wrap:balance}
.sh-sec .be-h .m{display:block;color:var(--be-faint)}
.sh-sec .be-h.be-display{font-size:var(--be-fs-display)}
.sh-sec .be-intro{margin:16px 0 0;font-size:var(--be-fs-intro);line-height:1.5;color:var(--be-grey);max-width:640px}
.sh-sec .be-center{text-align:center}.sh-sec .be-center .be-intro{margin-inline:auto}
.sh-sec .be-title{font-size:var(--be-fs-title);font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--be-ink)}

/* buttons: four building blocks */
.sh-sec .be-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;
  border:0;border-radius:var(--be-r-pill);font:600 15px/1 Inter,system-ui,sans-serif;letter-spacing:-.005em;white-space:nowrap;
  text-decoration:none;cursor:pointer;background:var(--be-ink);color:#fff;
  transition:background .18s ease,color .18s ease,transform .22s var(--be-spring),box-shadow .2s ease}
.sh-sec .be-btn svg{width:18px;height:18px;flex-shrink:0;transition:transform .22s var(--be-spring)}
.sh-sec .be-btn:hover{background:#2a2a2a}
.sh-sec .be-btn:hover svg:last-child:not(.be-turn){transform:translateX(3px)}  /* .be-turn: chevrons/+/× that rotate instead */
.sh-sec .be-btn:active{transform:scale(.96)}
.sh-sec .be-btn:focus-visible,.sh-sec .be-link:focus-visible,.sh-sec .be-icon:focus-visible,.sh-sec .be-chip:focus-visible{outline:2px solid var(--be-ink);outline-offset:3px}
/* vendor CSS squares every focused element to 6 px: keep pills and circles round */
.sh-sec .be-btn:focus-visible,.sh-sec .be-chip:focus-visible{border-radius:var(--be-r-pill)}
.sh-sec .be-icon:focus-visible{border-radius:50%}
.sh-sec .be-on-dark:focus-visible,.sh-sec .be-on-dark :focus-visible{outline-color:#fff}
/* primary on a photo or dark surface */
.sh-sec .be-btn.be-on-dark{background:#fff;color:var(--be-ink)}
.sh-sec .be-btn.be-on-dark:hover{background:rgba(255,255,255,.88)}

/* secondary = liquid glass: soft fill, blur, the hero's shimmering edge */
.sh-sec .be-btn.be-soft,.sh-sec .be-icon,.sh-sec .be-chip{background:var(--be-glass);color:var(--be-ink);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.sh-sec .be-btn.be-soft{overflow:hidden}
.sh-sec .be-btn.be-soft:hover,.sh-sec .be-chip:hover{background:var(--be-glass-hover)}
.sh-sec .be-btn.be-soft.be-on-dark,.sh-sec .be-icon.be-on-dark,.sh-sec .be-chip.be-on-dark{background:var(--be-glass-dark);color:#fff}
.sh-sec .be-btn.be-soft.be-on-dark:hover,.sh-sec .be-chip.be-on-dark:hover{background:var(--be-glass-dark-hover)}
.sh-sec .be-glint{position:relative;overflow:hidden}
.sh-sec .be-btn.be-soft::after,.sh-sec .be-glint::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--be-edge);background-size:300% 100%;background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  opacity:0;animation:beSysEdge 13s linear infinite;animation-delay:var(--be-edge-delay,0s)}
.sh-sec .be-on-dark.be-soft::after,.sh-sec .be-on-dark .be-glint::after,.sh-sec .be-glint.be-on-dark::after{background:var(--be-edge-dark);background-size:300% 100%;background-repeat:no-repeat}
.sh-sec .be-btn.be-soft:hover::after,.sh-sec .be-glint:hover::after{animation:none;opacity:0}
@keyframes beSysEdge{0%{background-position:135% 0;opacity:0}3%{opacity:1}20%{background-position:-135% 0;opacity:1}23%,100%{background-position:-135% 0;opacity:0}}

/* text link with arrow */
.sh-sec .be-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--be-ink);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:3px;cursor:pointer}
.sh-sec .be-link svg{width:16px;height:16px;transition:transform .22s var(--be-spring)}
.sh-sec .be-link:hover svg:not(.be-turn){transform:translateX(3px)}
.sh-sec .be-link.be-on-dark{color:#fff}

/* round icon button, 44 px: arrows, +, ×, steppers (the hero's bubbles) */
.sh-sec .be-icon{width:44px;height:44px;text-decoration:none;flex-shrink:0;padding:0;border:0;border-radius:50%;display:inline-grid;place-items:center;cursor:pointer;
  font:500 20px/1 Inter,system-ui,sans-serif;transition:background .15s ease,color .15s ease,transform .18s var(--be-spring),opacity .15s ease}
.sh-sec .be-icon svg{width:20px;height:20px}
.sh-sec .be-icon:hover:not(:disabled){background:var(--be-ink);color:#fff}
.sh-sec .be-icon.be-on-dark:hover:not(:disabled){background:#fff;color:var(--be-ink)}
.sh-sec .be-icon:active:not(:disabled){transform:scale(.86)}
.sh-sec .be-icon:disabled{opacity:.3;cursor:not-allowed}

/* chip / filter / tab: glass pill, active = solid */
.sh-sec .be-chip{text-decoration:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:0;border-radius:var(--be-r-pill);
  font:500 14px/1 Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:background .18s ease,color .18s ease,transform .18s var(--be-spring)}
.sh-sec .be-chip:active{transform:scale(.95)}
.sh-sec .be-chip.is-on,.sh-sec .be-chip[aria-pressed="true"],.sh-sec .be-chip[aria-selected="true"],.sh-sec .be-chip[aria-current]:not([aria-current="false"]){background:var(--be-ink);color:#fff}
.sh-sec .be-chip.be-on-dark.is-on,.sh-sec .be-chip.be-on-dark[aria-pressed="true"],.sh-sec .be-chip.be-on-dark[aria-selected="true"],.sh-sec .be-chip.be-on-dark[aria-current]:not([aria-current="false"]){background:#fff;color:var(--be-ink)}

@media(prefers-reduced-motion:reduce){
  .sh-sec .be-btn.be-soft::after,.sh-sec .be-glint::after{animation:none}
  .sh-sec .be-btn,.sh-sec .be-icon,.sh-sec .be-chip,.sh-sec .be-btn svg,.sh-sec .be-link svg{transition:none}
}

/* iOS Safari: no grey tap flash over pills, cards and links (the controls have their own :active states) */
.sh-sec a,.sh-sec button,.sh-sec summary,.sh-sec label{-webkit-tap-highlight-color:transparent}
/* phones: 44 px tap targets (Apple HIG). Chips grow 4 px; text links get an invisible hit area around them,
   so the layout does not move */
@media(max-width:767px){
  .sh-sec .be-chip{height:44px}
  .sh-sec .be-link{position:relative}
  .sh-sec .be-link::before{content:"";position:absolute;inset:-12px -6px}
}

/* ---- Right-to-left (Arabic pages: <html lang="ar" dir="rtl">). Every rule starts with [dir=rtl] or :lang(ar), so
   German and English pages render exactly as before. Section-specific mirroring lives at the end of each section's extra.css. ---- */
/* Forward/back arrows and prev/next chevrons point the other way. The individual `scale` property composes with every
   `transform` the sections set on these icons, so the hover nudges (translateX(3px), translate(2px,-2px)) move them
   towards the reading direction too. Logos, flags, stars, photos, the map and the WhatsApp glyph stay as they are. */
[dir=rtl] .sh-sec svg:has(path[d^="M5 12h14M13 6"],path[d^="M5 12h14M12 5"],path[d^="M15 18l-6-6"],path[d^="M15 6l-6 6"],path[d^="M9 6l6 6"],path[d^="M7 17 17 7"]){scale:-1 1}
/* Arabic script is cursive: no tracking (it tears the joins apart), no faux italics; uppercase has no meaning there */
.sh-sec :lang(ar){letter-spacing:0!important;font-style:normal!important;text-transform:none!important}
/* a bare phone number stays "+43 681 …" instead of being reordered by the RTL paragraph */
[dir=rtl] .sh-sec a[href^="tel:"]:not(:has(*)){direction:ltr;unicode-bidi:isolate}

/* Guide pages (docs/geo/pages, built by site/build.py --guides): one reading column, no hero photo, system tokens only.
   Scoped to .sh-p-guide; the page also loads system.css and the nav/footer/phone-bar CSS. */
.sh-p-guide .gd{padding:clamp(24px,4vw,56px) 0 clamp(56px,8vw,104px)}
.sh-p-guide .gd-col{width:min(760px,100% - 2*var(--be-gutter));margin-inline:auto}
.sh-p-guide .gd-crumb{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;font-size:var(--be-fs-small);color:var(--be-grey)}
.sh-p-guide .gd-crumb a{color:inherit;text-decoration:none}
.sh-p-guide .gd-crumb a:hover{color:var(--be-ink);text-decoration:underline;text-underline-offset:3px}
.sh-p-guide .gd-crumb [aria-current]{color:var(--be-ink);font-weight:500}
.sh-p-guide .gd h1{margin:0;font-size:var(--be-fs-h);font-weight:600;line-height:1.1;letter-spacing:-.025em;color:var(--be-ink);text-wrap:balance}
.sh-p-guide .gd-by{margin:14px 0 0;font-size:var(--be-fs-small);color:var(--be-grey)}
.sh-p-guide .gd-by a{color:var(--be-ink);text-underline-offset:3px}
.sh-p-guide .gd-body{margin-top:clamp(24px,3vw,36px);font-size:var(--be-fs-body);line-height:1.65;color:var(--be-ink)}
.sh-p-guide .gd-body>p:first-child{font-size:var(--be-fs-intro);line-height:1.55}
.sh-p-guide .gd-body p{margin:0 0 1em}
.sh-p-guide .gd-body h2{margin:clamp(36px,5vw,56px) 0 14px;font-size:var(--be-fs-title);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.sh-p-guide .gd-body h3{margin:24px 0 8px;font-size:var(--be-fs-body);font-weight:600;line-height:1.4}
.sh-p-guide .gd-body ul,.sh-p-guide .gd-body ol{margin:0 0 1em;padding-inline-start:1.3em}
.sh-p-guide .gd-body li{margin:0 0 .45em}
.sh-p-guide .gd-body a{color:var(--be-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--be-line)}
.sh-p-guide .gd-body a:hover{text-decoration-color:currentColor}
.sh-p-guide .gd-table{margin:0 0 1.2em;overflow-x:auto;-webkit-overflow-scrolling:touch}
.sh-p-guide .gd-table table{width:100%;border-collapse:collapse;font-size:var(--be-fs-small);line-height:1.45}
.sh-p-guide .gd-table th,.sh-p-guide .gd-table td{padding:9px 0;padding-inline-end:12px;border-bottom:1px solid var(--be-line);text-align:start;vertical-align:top}
.sh-p-guide .gd-table thead th{font-weight:600;color:var(--be-grey);border-bottom-color:var(--be-ink)}
.sh-p-guide .gd-faq h3{margin-top:22px}
.sh-p-guide .gd-faq p{margin:0}
.sh-p-guide .gd-rel{margin-top:clamp(40px,6vw,64px);padding-top:24px;border-top:1px solid var(--be-line)}
.sh-p-guide .gd-rel h2{margin:0 0 14px;font-size:var(--be-fs-title);font-weight:600}
.sh-p-guide .gd-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.sh-p-guide .gd-list a{display:block;padding:16px 18px;border:1px solid var(--be-line);border-radius:var(--be-r-sm);color:var(--be-ink);text-decoration:none}
.sh-p-guide .gd-list a:hover{border-color:var(--be-ink)}
.sh-p-guide .gd-list b{display:block;font-weight:600;line-height:1.35}
.sh-p-guide .gd-list span{display:block;margin-top:4px;font-size:var(--be-fs-small);line-height:1.5;color:var(--be-grey)}
@media(min-width:768px){.sh-p-guide .gd-rel .gd-list{grid-template-columns:1fr 1fr}}


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Black Eagle design system (decisions round 1 + 2, 2026-10-04; docs/website/design-system.md).
   build.py prepends this file to every section's <style>, so every snippet stays self-contained.
   Sections use the tokens and the be-* components below instead of their own values. */

.sh-sec{
  /* grid: one content column, one left edge */
  --be-max:1120px; --be-gutter:24px;
  /* colour: four text colours, one surface */
  --be-ink:#141414; --be-grey:#6e6e73; --be-faint:#a1a1a6; --be-white:#fff; --be-white-2:rgba(255,255,255,.72); /* muted text on photos/dark */
  --be-band:#f4f3ea; --be-line:rgba(20,20,20,.1);
  /* type: five sizes (+ the 19 px intro step); phones in the clamp minimum */
  --be-fs-display:clamp(40px,4.45vw,64px); --be-fs-h:clamp(32px,3.35vw,48px); --be-fs-title:clamp(20px,1.55vw,22px);
  --be-fs-intro:clamp(17px,1.35vw,19px); --be-fs-body:clamp(16px,1.2vw,17px); --be-fs-small:14px;
  /* radius: cards/photos, small boxes, pills */
  --be-r:20px; --be-r-sm:12px; --be-r-pill:999px;
  /* motion: the hero's spring and ease */
  --be-spring:cubic-bezier(.3,1.6,.5,1); --be-ease:cubic-bezier(.25,.1,.25,1);
  /* liquid glass (the hero card language) */
  --be-glass:rgba(20,20,20,.06); --be-glass-hover:rgba(20,20,20,.11);
  --be-glass-dark:rgba(255,255,255,.12); --be-glass-dark-hover:rgba(255,255,255,.2);
  --be-edge:linear-gradient(115deg,transparent 32%,rgba(20,20,20,.28) 44%,rgba(20,20,20,.7) 50%,rgba(20,20,20,.28) 56%,transparent 68%);
  --be-edge-dark:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 44%,#fff 50%,rgba(255,255,255,.55) 56%,transparent 68%);
  font-family:Inter,system-ui,-apple-system,sans-serif;
}
@media(min-width:768px){ .sh-sec{--be-gutter:48px} }
.sh-sec.be-band,.sh-sec .be-band{background:var(--be-band)}

/* layout */
.sh-sec .be-wrap{width:min(var(--be-max),100% - 2*var(--be-gutter));margin-inline:auto}

/* headline: black line + grey line, left by default; .be-center only for amenities, hosts and the closing CTA */
.sh-sec .be-h{margin:0;font-size:var(--be-fs-h);font-weight:600;line-height:1.08;letter-spacing:-.025em;color:var(--be-ink);text-wrap:balance}
.sh-sec .be-h .m{display:block;color:var(--be-faint)}
.sh-sec .be-h.be-display{font-size:var(--be-fs-display)}
.sh-sec .be-intro{margin:16px 0 0;font-size:var(--be-fs-intro);line-height:1.5;color:var(--be-grey);max-width:640px}
.sh-sec .be-center{text-align:center}.sh-sec .be-center .be-intro{margin-inline:auto}
.sh-sec .be-title{font-size:var(--be-fs-title);font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--be-ink)}

/* buttons: four building blocks */
.sh-sec .be-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;
  border:0;border-radius:var(--be-r-pill);font:600 15px/1 Inter,system-ui,sans-serif;letter-spacing:-.005em;white-space:nowrap;
  text-decoration:none;cursor:pointer;background:var(--be-ink);color:#fff;
  transition:background .18s ease,color .18s ease,transform .22s var(--be-spring),box-shadow .2s ease}
.sh-sec .be-btn svg{width:18px;height:18px;flex-shrink:0;transition:transform .22s var(--be-spring)}
.sh-sec .be-btn:hover{background:#2a2a2a}
.sh-sec .be-btn:hover svg:last-child:not(.be-turn){transform:translateX(3px)}  /* .be-turn: chevrons/+/× that rotate instead */
.sh-sec .be-btn:active{transform:scale(.96)}
.sh-sec .be-btn:focus-visible,.sh-sec .be-link:focus-visible,.sh-sec .be-icon:focus-visible,.sh-sec .be-chip:focus-visible{outline:2px solid var(--be-ink);outline-offset:3px}
/* vendor CSS squares every focused element to 6 px: keep pills and circles round */
.sh-sec .be-btn:focus-visible,.sh-sec .be-chip:focus-visible{border-radius:var(--be-r-pill)}
.sh-sec .be-icon:focus-visible{border-radius:50%}
.sh-sec .be-on-dark:focus-visible,.sh-sec .be-on-dark :focus-visible{outline-color:#fff}
/* primary on a photo or dark surface */
.sh-sec .be-btn.be-on-dark{background:#fff;color:var(--be-ink)}
.sh-sec .be-btn.be-on-dark:hover{background:rgba(255,255,255,.88)}

/* secondary = liquid glass: soft fill, blur, the hero's shimmering edge */
.sh-sec .be-btn.be-soft,.sh-sec .be-icon,.sh-sec .be-chip{background:var(--be-glass);color:var(--be-ink);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.sh-sec .be-btn.be-soft{overflow:hidden}
.sh-sec .be-btn.be-soft:hover,.sh-sec .be-chip:hover{background:var(--be-glass-hover)}
.sh-sec .be-btn.be-soft.be-on-dark,.sh-sec .be-icon.be-on-dark,.sh-sec .be-chip.be-on-dark{background:var(--be-glass-dark);color:#fff}
.sh-sec .be-btn.be-soft.be-on-dark:hover,.sh-sec .be-chip.be-on-dark:hover{background:var(--be-glass-dark-hover)}
.sh-sec .be-glint{position:relative;overflow:hidden}
.sh-sec .be-btn.be-soft::after,.sh-sec .be-glint::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--be-edge);background-size:300% 100%;background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  opacity:0;animation:beSysEdge 13s linear infinite;animation-delay:var(--be-edge-delay,0s)}
.sh-sec .be-on-dark.be-soft::after,.sh-sec .be-on-dark .be-glint::after,.sh-sec .be-glint.be-on-dark::after{background:var(--be-edge-dark);background-size:300% 100%;background-repeat:no-repeat}
.sh-sec .be-btn.be-soft:hover::after,.sh-sec .be-glint:hover::after{animation:none;opacity:0}
@keyframes beSysEdge{0%{background-position:135% 0;opacity:0}3%{opacity:1}20%{background-position:-135% 0;opacity:1}23%,100%{background-position:-135% 0;opacity:0}}

/* text link with arrow */
.sh-sec .be-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--be-ink);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:3px;cursor:pointer}
.sh-sec .be-link svg{width:16px;height:16px;transition:transform .22s var(--be-spring)}
.sh-sec .be-link:hover svg:not(.be-turn){transform:translateX(3px)}
.sh-sec .be-link.be-on-dark{color:#fff}

/* round icon button, 44 px: arrows, +, ×, steppers (the hero's bubbles) */
.sh-sec .be-icon{width:44px;height:44px;text-decoration:none;flex-shrink:0;padding:0;border:0;border-radius:50%;display:inline-grid;place-items:center;cursor:pointer;
  font:500 20px/1 Inter,system-ui,sans-serif;transition:background .15s ease,color .15s ease,transform .18s var(--be-spring),opacity .15s ease}
.sh-sec .be-icon svg{width:20px;height:20px}
.sh-sec .be-icon:hover:not(:disabled){background:var(--be-ink);color:#fff}
.sh-sec .be-icon.be-on-dark:hover:not(:disabled){background:#fff;color:var(--be-ink)}
.sh-sec .be-icon:active:not(:disabled){transform:scale(.86)}
.sh-sec .be-icon:disabled{opacity:.3;cursor:not-allowed}

/* chip / filter / tab: glass pill, active = solid */
.sh-sec .be-chip{text-decoration:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:0;border-radius:var(--be-r-pill);
  font:500 14px/1 Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:background .18s ease,color .18s ease,transform .18s var(--be-spring)}
.sh-sec .be-chip:active{transform:scale(.95)}
.sh-sec .be-chip.is-on,.sh-sec .be-chip[aria-pressed="true"],.sh-sec .be-chip[aria-selected="true"],.sh-sec .be-chip[aria-current]:not([aria-current="false"]){background:var(--be-ink);color:#fff}
.sh-sec .be-chip.be-on-dark.is-on,.sh-sec .be-chip.be-on-dark[aria-pressed="true"],.sh-sec .be-chip.be-on-dark[aria-selected="true"],.sh-sec .be-chip.be-on-dark[aria-current]:not([aria-current="false"]){background:#fff;color:var(--be-ink)}

@media(prefers-reduced-motion:reduce){
  .sh-sec .be-btn.be-soft::after,.sh-sec .be-glint::after{animation:none}
  .sh-sec .be-btn,.sh-sec .be-icon,.sh-sec .be-chip,.sh-sec .be-btn svg,.sh-sec .be-link svg{transition:none}
}

/* iOS Safari: no grey tap flash over pills, cards and links (the controls have their own :active states) */
.sh-sec a,.sh-sec button,.sh-sec summary,.sh-sec label{-webkit-tap-highlight-color:transparent}
/* phones: 44 px tap targets (Apple HIG). Chips grow 4 px; text links get an invisible hit area around them,
   so the layout does not move */
@media(max-width:767px){
  .sh-sec .be-chip{height:44px}
  .sh-sec .be-link{position:relative}
  .sh-sec .be-link::before{content:"";position:absolute;inset:-12px -6px}
}

/* ---- Right-to-left (Arabic pages: <html lang="ar" dir="rtl">). Every rule starts with [dir=rtl] or :lang(ar), so
   German and English pages render exactly as before. Section-specific mirroring lives at the end of each section's extra.css. ---- */
/* Forward/back arrows and prev/next chevrons point the other way. The individual `scale` property composes with every
   `transform` the sections set on these icons, so the hover nudges (translateX(3px), translate(2px,-2px)) move them
   towards the reading direction too. Logos, flags, stars, photos, the map and the WhatsApp glyph stay as they are. */
[dir=rtl] .sh-sec svg:has(path[d^="M5 12h14M13 6"],path[d^="M5 12h14M12 5"],path[d^="M15 18l-6-6"],path[d^="M15 6l-6 6"],path[d^="M9 6l6 6"],path[d^="M7 17 17 7"]){scale:-1 1}
/* Arabic script is cursive: no tracking (it tears the joins apart), no faux italics; uppercase has no meaning there */
.sh-sec :lang(ar){letter-spacing:0!important;font-style:normal!important;text-transform:none!important}
/* a bare phone number stays "+43 681 …" instead of being reordered by the RTL paragraph */
[dir=rtl] .sh-sec a[href^="tel:"]:not(:has(*)){direction:ltr;unicode-bidi:isolate}


.sh-p-02-navbar{--ink:#141414;--text:#1a1a1a;--muted:#6f6f6f;--faint:#9a9a9a;
    --line:#e5e5e5;--surface:#f5f5f5;--chip:#ededed;--page:#fff;}
.sh-p-02-navbar, .sh-p-02-navbar *{box-sizing:border-box;margin:0;padding:0}
.sh-p-02-navbar{font-family:"Inter",-apple-system,system-ui,sans-serif;background:#ffffff;color:var(--text);
    -webkit-font-smoothing:antialiased;padding:28px 20px 60px;overflow-x:clip}
.sh-p-02-navbar .lib{max-width:1600px;margin:0 auto}
.sh-p-02-navbar .sec-nav{display:flex;justify-content:center;padding:20px 20px 0}
.sh-p-02-navbar .navbar{width:100%;max-width:1040px;height:60px;background:var(--ink);color:#fff;border-radius:999px;
    display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 20px}
.sh-p-02-navbar .logo{display:flex;align-items:center;gap:10px}
.sh-p-02-navbar .logo .m{width:30px;height:30px;border-radius:8px;background:#fff;color:var(--ink);display:grid;place-items:center}
.sh-p-02-navbar .logo .m svg{width:16px;height:16px}
.sh-p-02-navbar .logo .wm{font-weight:600;font-size:16px;color:#f3f3f3}
.sh-p-02-navbar .logo .wm small{display:block;font-size:9px;font-weight:500;color:#8a8a8a;letter-spacing:.16em;text-transform:uppercase;margin-top:-2px}
.sh-p-02-navbar .nav-cta{background:#fff;color:var(--ink);border:none;border-radius:999px;height:40px;padding:0 20px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}
.sh-p-02-navbar .nav-cta:hover{background:#e9e9e9}
.sh-p-02-navbar h1{font-weight:600;letter-spacing:-.03em;color:#121212;line-height:1.06}
@supports (animation-timeline:view()){
@keyframes step-exit{to{transform:scale(.965);opacity:.85}}
}
@media(max-width:860px){
@supports (animation-timeline:view()){.step-card{animation:none}}
}
@keyframes fbZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes revscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sphA{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-34px)}}
@keyframes sphB{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,30px)}}
@keyframes bawipe{0%,100%{clip-path:inset(0 70% 0 0)}50%{clip-path:inset(0 15% 0 0)}}
@keyframes bahandle{0%,100%{left:30%}50%{left:85%}}
.sh-p-02-navbar{scroll-behavior:smooth}
.sh-p-02-navbar{padding:0 20px 0}
.sh-p-02-navbar .lib{max-width:1600px;margin:0 auto}
.sh-p-02-navbar .sec-nav{position:sticky;top:0;z-index:60;padding:24px 0 0;justify-content:center}
.sh-p-02-navbar .navbar{max-width:none;padding-left:32px;background:transparent;
  transition:max-width .38s cubic-bezier(.4,0,.2,1),padding-left .38s cubic-bezier(.4,0,.2,1),
             transform .32s ease,background .28s ease,backdrop-filter .28s ease}
.sh-p-02-navbar .sec-nav.scrolled .navbar{max-width:1180px;padding-left:20px;transform:translateY(-8px);
  background:rgba(20,20,20,.3);-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%)}
.sh-p-02-navbar .navbar .logo .m{width:38px;height:30px;border-radius:9px}
.sh-p-02-navbar .navbar .logo .wm{font-size:17px}
@media(min-width:1704px){
.sh-p-02-navbar .sec-nav:not(.scrolled) .navbar{padding-left:0}
}
.sh-p-02-navbar .nav-links{display:flex;gap:26px;align-items:center;margin-left:34px}
.sh-p-02-navbar .nav-links a{color:#e8e8e8;text-decoration:none;font-size:14px;font-weight:500;transition:.15s}
.sh-p-02-navbar .nav-links a:hover{color:#fff}
.sh-p-02-navbar .nav-right{display:flex;align-items:center;gap:14px}
.sh-p-02-navbar .nav-tel{color:#f2f2f2;text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}
.sh-p-02-navbar .navbar .logo .wm{font-weight:500}
.sh-p-02-navbar .sec-nav.over-light .navbar{background:rgba(20,20,20,.72)}
@media(max-width:900px){
.sh-p-02-navbar .nav-links,
.sh-p-02-navbar .nav-tel{display:none}
}
@keyframes heroDrift{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes huDraw{to{stroke-dashoffset:0}}
@keyframes tileEdge{0%{background-position:135% 0;opacity:0}
  3%{opacity:1}
  20%{background-position:-135% 0;opacity:1}
  23%{background-position:-135% 0;opacity:0}
  100%{background-position:-135% 0;opacity:0}}
@media(max-width:820px){
.sh-p-02-navbar{padding-bottom:86px}
}
@media (prefers-reduced-motion: reduce){
.sh-p-02-navbar, .sh-p-02-navbar *,
.sh-p-02-navbar *::before,
.sh-p-02-navbar *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
.sh-p-02-navbar :focus-visible{outline:2px solid #141414;outline-offset:3px;border-radius:6px}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.3)}
  4%{opacity:.9;transform:translate(calc(var(--dx)*.18),calc(var(--dy)*.18)) scale(1)}
  20%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)}}
.sh-p-02-navbar .sec-nav.over-light .navbar{background:rgba(255,255,255,.72);
  box-shadow:0 1px 0 rgba(20,20,20,.06), 0 8px 24px -16px rgba(20,20,20,.35)}
.sh-p-02-navbar .sec-nav.over-light .nav-links a{color:#5f5f5c}
.sh-p-02-navbar .sec-nav.over-light .nav-links a:hover{color:#141414}
.sh-p-02-navbar .sec-nav.over-light .nav-tel{color:#141414}
.sh-p-02-navbar .sec-nav.over-light .logo .wm{color:#141414}
.sh-p-02-navbar .sec-nav.over-light .logo .m{background:var(--ink);color:#fff}
.sh-p-02-navbar .sec-nav.over-light .nav-cta{background:var(--ink);color:#fff}
.sh-p-02-navbar{--gutter:20px;--edge:max(var(--gutter), calc((100vw - 1600px) / 2))}
.sh-p-02-navbar{padding-left:var(--gutter);padding-right:var(--gutter)}
@media (min-width:821px) and (max-width:1600px){
.sh-p-02-navbar{--gutter:clamp(48px,5.6vw,90px)}
}
.sh-p-02-navbar{--gutter:40px}
@media (max-width:820px){
.sh-p-02-navbar{--gutter:20px}
}
@media (min-width:821px) and (max-width:1600px){
.sh-p-02-navbar{--gutter:clamp(48px,5.6vw,90px)}
}
@keyframes pinRise{from{opacity:0;transform:translateY(14px) scale(.5)}
  to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pinPulse{0%,100%{opacity:.06}50%{opacity:.14}}
@keyframes stampSpin{to{transform:rotate(360deg)}}
.sh-p-02-navbar :target{scroll-margin-top:clamp(96px,9vw,128px)}
@keyframes barRise{to{transform:scaleY(1)}}
@keyframes barDrift{from{transform:scaleY(1)}to{transform:scaleY(.94)}}
.sh-p-02-navbar{overflow-x:visible}
.sh-p-02-navbar{overflow-x:clip}
.sh-p-02-navbar .foot .logo{gap:13px}
.sh-p-02-navbar .foot .logo .m{width:42px;height:42px;border-radius:12px}
.sh-p-02-navbar .foot .logo .m svg{width:23px;height:23px}
.sh-p-02-navbar .foot .logo .wm{font-size:22px;line-height:1.1}
.sh-p-02-navbar .foot .logo .m{background:#fff!important;color:#141414!important}
.sh-p-02-navbar .foot .logo .wm{color:#fff!important}
.sh-p-02-navbar{--sec-gap:clamp(120px,14vw,200px)}
.sh-p-02-navbar input::placeholder{color:#b9b7b0}
@media(max-width:999px){
.sh-p-02-navbar{padding-bottom:0}
.sh-p-02-navbar .lib{padding-bottom:0}
}
.sh-p-02-navbar .fnl{min-height:100vh;display:flex;flex-direction:column;background:#fff}
.sh-p-02-navbar .fnl-logo .m{width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;
  display:grid;place-items:center}
.sh-p-02-navbar .fnl-logo .m svg{width:19px;height:19px}
.sh-p-02-navbar .fnl-logo .wm{font-size:18px;font-weight:600;letter-spacing:-.02em}
@keyframes dmRing{to{stroke-dashoffset:0}}
@keyframes dmTick{to{stroke-dashoffset:0}}
@keyframes dmRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:640px){
.sh-p-02-navbar .sh-quiz .fnl-logo .wm{display:none}
}
.sh-p-02-navbar .sh-quiz .fnl.is-end .fnl-nav{display:none}
@keyframes cfPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0)}
  14%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1) rotate(var(--r))}}
.sh-p-02-navbar .sh-quiz .fnl{min-height:0}
.sh-p-02-navbar .sh-quiz [data-step=calc]{text-align:center}
@keyframes cSpin{to{transform:rotate(360deg)}}
@keyframes cPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.72}}
@keyframes cOrbit{to{transform:rotate(360deg)}}
@keyframes csIn{to{opacity:1}}
@media(max-width:760px){
.sh-p-02-navbar .sh-quiz [data-step=calc],
.sh-p-02-navbar .sh-quiz [data-step=done],
.sh-p-02-navbar .sh-quiz [data-step=rent]{padding-top:clamp(20px,6vw,36px)}
}
.sh-p-02-navbar .sh-quiz [data-step=nocov]{text-align:center}
.sh-p-02-navbar .sh-quiz [data-step=design]{text-align:center}
@keyframes dsnDraw{to{stroke-dashoffset:0}}
@keyframes dsnPop{from{opacity:0}to{opacity:1}}
@keyframes dsnScan{0%{transform:translateY(34px);opacity:0}
  12%{opacity:.85}88%{opacity:.85}100%{transform:translateY(112px);opacity:0}}
@keyframes dhDraw{to{stroke-dashoffset:0}}
@keyframes dhPop{to{opacity:1}}
@keyframes dhRay{to{opacity:1}}
@keyframes dhSpin{to{transform:rotate(360deg)}}
@keyframes dhScan{0%{transform:translateY(40px);opacity:0}
  14%{opacity:.9}86%{opacity:.9}100%{transform:translateY(186px);opacity:0}}
@keyframes ncTick{to{stroke-dashoffset:0}}
@keyframes hlDraw{to{stroke-dashoffset:0}}
@keyframes pvIn{from{opacity:0}to{opacity:1}}
@keyframes rayIn{to{opacity:1}}
@keyframes sunSpin{to{transform:rotate(360deg)}}
@keyframes qOut{to{opacity:0;transform:translateY(-64px)}}
@keyframes qIn{from{opacity:0;transform:translateY(64px)}to{opacity:1;transform:none}}
@keyframes qOut{to{opacity:0;transform:translateY(-70px)}}
@keyframes qIn{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes qOut{0%{opacity:1}18%{opacity:0}100%{opacity:0;transform:translateY(-70px)}}
@media(max-width:760px){
.sh-p-02-navbar .sh-quiz .q2 .fnl-logo .m{background:rgba(255,255,255,.92);color:#141414}
.sh-p-02-navbar .sh-quiz .q2 .fnl-logo .wm{color:#141414}
}
.sh-p-02-navbar .sh-quiz [hidden]{display:none !important}
@media(max-width:760px){
.sh-p-02-navbar .sh-quiz .q2 .fnl-logo .m{background:var(--ink);color:#fff}
.sh-p-02-navbar .sh-quiz .q2 .fnl-logo .wm{color:#141414}
}
@media(max-width:999px){
.sh-p-02-navbar .sh-quiz .q2 .fnl-logo .m{background:var(--ink);color:#fff}
}
.sh-p-02-navbar .view[hidden]{display:none}

/* ---- spacing above and below this block ---- */
.sh-sec-02-navbar{padding-top:var(--sh-space-top,0px);padding-bottom:var(--sh-space-bottom,0px)}

/* Black Eagle additions to the Sunhaus navbar (SOL-02), on the design system (docs/website/design-system.md) */

/* In the Sunhaus page the bar is sticky over the whole page. Here every section is its
   own snippet, so the snippet wrapper is what sticks; the hero pulls itself up under it
   (vendor margin-top:-84px) exactly as before. */
.sh-sec-02-navbar{position:sticky;top:0;z-index:60;height:84px;pointer-events:none}
.sh-sec-02-navbar .sh-p-02-navbar{background:transparent;padding-left:0;padding-right:0}
.sh-p-02-navbar .navbar{pointer-events:auto}

/* grid: the bar's content sits on the 1120 column (logo at 160 px at 1440, 24 px at 390, CTA ends on the
   column's right edge). The frosted pill that appears on scroll grows outward by its padding, so nothing
   moves sideways when it fades in. */
.sh-p-02-navbar{--nv-col:min(var(--be-max),100% - 2*var(--be-gutter));--nv-pl:20px;--nv-pr:10px}
@media(max-width:767px){ .sh-p-02-navbar{--nv-pl:12px;--nv-pr:12px} }
.sh-sec-02-navbar .sh-p-02-navbar .sec-nav{justify-content:flex-start}
.sh-sec-02-navbar .sh-p-02-navbar .sec-nav .navbar{width:calc(var(--nv-col) + var(--nv-pl) + var(--nv-pr));max-width:none;
  margin-left:calc((100% - var(--nv-col)) / 2 - var(--nv-pl));padding-left:var(--nv-pl);padding-right:var(--nv-pr)}

.sh-p-02-navbar .logo{text-decoration:none}
.sh-p-02-navbar .logo .wm{white-space:nowrap;color:#fff}
.sh-p-02-navbar .logo .m svg{width:14px;height:18px}

/* links: one size, one colour (white on the photo, ink over white content) */
.sh-p-02-navbar .nav-links a{font-size:15px;font-weight:500;color:#fff;text-decoration:underline 1.5px transparent;text-underline-offset:6px;
  transition:color .45s ease,text-decoration-color .18s ease}
.sh-p-02-navbar .nav-links a:hover{color:#fff;text-decoration-color:currentColor}
.sh-p-02-navbar .sec-nav.over-light .nav-links a,.sh-p-02-navbar .sec-nav.over-light .nav-links a:hover{color:var(--be-ink)}

/* "Verfügbarkeit prüfen": compact primary .be-btn (40 px, nav only), white on the photo, ink over white content */
.sh-p-02-navbar .nav-cta.be-btn{height:40px;padding:0 20px;font-size:15px;font-weight:600}
.sh-p-02-navbar .nav-cta.be-btn:hover{background:rgba(255,255,255,.88)}
.sh-p-02-navbar .sec-nav.over-light .nav-cta.be-btn{background:var(--be-ink);color:#fff}
.sh-p-02-navbar .sec-nav.over-light .nav-cta.be-btn:hover{background:#2a2a2a}
.sh-p-02-navbar .be-short{display:none}

/* language switcher: .be-chip with round flag + code + chevron; glass menu in the nav's material */
.sh-p-02-navbar .be-lang{position:relative}
.sh-p-02-navbar .be-lang-btn.be-chip{gap:8px;padding:0 12px 0 8px}
.sh-p-02-navbar .be-lang.open .be-lang-btn.be-chip{background:var(--be-glass-dark-hover)}
.sh-p-02-navbar .be-flag{width:24px;height:24px;border-radius:50%;overflow:hidden;flex-shrink:0;display:block;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.sh-p-02-navbar .be-flag svg{width:100%;height:100%;display:block}
.sh-p-02-navbar .be-chev{width:16px;height:16px;opacity:.75;transition:transform .25s var(--be-spring)}
.sh-p-02-navbar .be-lang.open .be-chev{transform:rotate(180deg)}

.sh-p-02-navbar .be-lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:186px;padding:6px;border-radius:var(--be-r);
  background:rgba(20,20,20,.72);-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transform-origin:top right;
  transition:opacity .18s ease,transform .22s var(--be-spring),visibility 0s linear .22s}
.sh-p-02-navbar .be-lang.open .be-lang-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sh-p-02-navbar .be-lang-menu a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--be-r-sm);color:#fff;
  text-decoration:none;font-size:var(--be-fs-small);font-weight:500;transition:background .15s ease}
.sh-p-02-navbar .be-lang-menu [lang=ar]{font-size:var(--be-fs-body)}
.sh-p-02-navbar .be-lang-menu a:hover,.sh-p-02-navbar .be-lang-menu a:focus-visible{background:rgba(255,255,255,.12)}
.sh-p-02-navbar .be-lang-menu a[aria-current]{font-weight:600}
.sh-p-02-navbar .be-check{width:16px;height:16px;margin-left:auto}

/* over white content: the chip and menu switch to the light glass */
.sh-p-02-navbar .sec-nav.over-light .be-lang-btn.be-chip{background:var(--be-glass);color:var(--be-ink)}
.sh-p-02-navbar .sec-nav.over-light .be-lang-btn.be-chip:hover,.sh-p-02-navbar .sec-nav.over-light .be-lang.open .be-lang-btn.be-chip{background:var(--be-glass-hover)}
.sh-p-02-navbar .sec-nav.over-light .be-flag{box-shadow:0 0 0 1.5px var(--be-line)}
.sh-p-02-navbar .sec-nav.over-light .be-lang-menu{background:rgba(255,255,255,.86);box-shadow:0 1px 0 rgba(20,20,20,.06),0 18px 40px -18px rgba(20,20,20,.4)}
.sh-p-02-navbar .sec-nav.over-light .be-lang-menu a{color:var(--be-ink)}
.sh-p-02-navbar .sec-nav.over-light .be-lang-menu a:hover,.sh-p-02-navbar .sec-nav.over-light .be-lang-menu a:focus-visible{background:var(--be-glass)}

@media(max-width:999px){ .sh-p-02-navbar .be-lang-code{display:none} .sh-p-02-navbar .be-lang-btn.be-chip{padding:0 8px 0 8px;gap:4px} }
@media(max-width:560px){ .sh-p-02-navbar .be-long{display:none} .sh-p-02-navbar .be-short{display:inline} .sh-p-02-navbar .nav-right{gap:8px}
  .sh-p-02-navbar .nav-cta.be-btn{padding:0 16px} }
@media(max-width:420px){ .sh-p-02-navbar .be-chev{display:none} .sh-p-02-navbar .be-lang-btn.be-chip{padding:0 8px} }

/* scroll: the pill lifts and its material fades in on one curve */
.sh-sec-02-navbar .sh-p-02-navbar .sec-nav .navbar{will-change:transform;
  transition:transform .55s cubic-bezier(.22,.8,.24,1),background-color .45s ease,box-shadow .45s ease,-webkit-backdrop-filter .45s ease,backdrop-filter .45s ease}
.sh-p-02-navbar .logo .wm,.sh-p-02-navbar .logo .m{transition:color .45s ease,background-color .45s ease}
.sh-p-02-navbar .nav-cta.be-btn,.sh-p-02-navbar .be-lang-btn.be-chip{transition:color .45s ease,background-color .45s ease,box-shadow .45s ease,transform .18s var(--be-spring)}
@media(prefers-reduced-motion:reduce){ .sh-sec-02-navbar .sh-p-02-navbar .sec-nav .navbar{transition:none} }

/* keyboard focus: keep the pill shape (the vendor sets radius 6 on :focus-visible), white ring on the photo */
.sh-p-02-navbar .be-chip:focus-visible,.sh-p-02-navbar .be-btn:focus-visible{border-radius:var(--be-r-pill)}
.sh-p-02-navbar .sec-nav:not(.over-light) .be-on-dark:focus-visible,.sh-p-02-navbar .sec-nav:not(.over-light) .logo:focus-visible,
.sh-p-02-navbar .sec-nav:not(.over-light) .nav-links a:focus-visible{outline-color:#fff}

/* narrow phones (360-389): logo, flag and "Jetzt buchen" keep a 12 px breath instead of touching.
   Mark 34x28, wordmark 16 px, CTA side padding 14 px */
@media(max-width:389px){
  .sh-p-02-navbar .navbar .logo{gap:8px}
  .sh-p-02-navbar .navbar .logo .m{width:34px;height:28px;border-radius:8px}
  .sh-p-02-navbar .navbar .logo .wm{font-size:16px}
  .sh-p-02-navbar .nav-cta.be-btn{padding:0 14px}
}

/* phones: tucked away while scrolling down (nav/extra.js), back on scroll up */
.sh-sec-02-navbar{transition:transform .35s cubic-bezier(.22,.8,.24,1)}
@media(max-width:767px){ .sh-sec-02-navbar.is-tucked{transform:translateY(-110%)} }
@media(prefers-reduced-motion:reduce){ .sh-sec-02-navbar{transition:none} }

/* languages that do not exist yet stay in the markup with [hidden] (their pages would be 404s) */
.sh-p-02-navbar .be-lang-menu a[hidden]{display:none}

/* phone menu (≤900 px, where the vendor hides the links): a 44 px button in the pill opens a full-width sheet
   from the top in the booking sheet's dark glass. nav/extra.js fills it from .nav-links on first open and closes
   it on a link, ×, Esc or a tap outside. Desktop never shows the button. */
.sh-p-02-navbar .nav-menu-btn.be-chip{display:none}  /* .be-chip: every later snippet repeats system.css */
@media(max-width:900px){
  .sh-p-02-navbar .nav-menu-btn.be-chip{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;
    transition:color .45s ease,background-color .45s ease,transform .18s var(--be-spring)}
  .sh-p-02-navbar .nav-menu-btn svg{width:22px;height:22px}
  .sh-p-02-navbar .sec-nav.over-light .nav-menu-btn.be-chip{background:var(--be-glass);color:var(--be-ink)}
  .sh-p-02-navbar .sec-nav.over-light .nav-menu-btn.be-chip:hover{background:var(--be-glass-hover)}
}
.sh-p-02-navbar .nav-sheet{position:fixed;inset:0 0 auto;width:100%;max-width:none;max-height:100dvh;margin:0;padding:0;border:0;
  background:none;color:#fff;overflow:visible;pointer-events:auto}
.sh-p-02-navbar .nav-sheet::backdrop{background:rgba(12,12,14,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease}
.sh-p-02-navbar .nav-sheet.is-open::backdrop{opacity:1}
.sh-p-02-navbar .nav-sheet-in{position:relative;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top) + 76px) var(--be-gutter) 28px;border-radius:0 0 var(--be-r) var(--be-r);
  background:rgba(16,16,16,.9);-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6);transform:translateY(-100%);transition:transform .42s cubic-bezier(.22,.8,.24,1)}
.sh-p-02-navbar .nav-sheet.is-open .nav-sheet-in{transform:none}
/* phones: solid, no backdrop-filter: Safari 26+ colours the area behind the clock from the solid fixed box at the top edge,
   a backdrop-filter there leaves it white (r19, site/system/bars.js); the blur behind 90 % black hardly showed */
@media(max-width:767px){ .sh-p-02-navbar .nav-sheet-in{background:#161616;-webkit-backdrop-filter:none;backdrop-filter:none} }
.sh-p-02-navbar .nav-sheet-x.be-icon{position:absolute;top:calc(env(safe-area-inset-top) + 20px);right:max(12px,calc(var(--be-gutter) - 12px))}
.sh-p-02-navbar .nav-sheet-links{display:flex;flex-direction:column}
.sh-p-02-navbar .nav-sheet-links a{display:block;padding:9px 0;color:#fff;text-decoration:none;font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.02em}
.sh-p-02-navbar .nav-sheet-more{display:inline-block;margin-top:18px;padding:11px 0;color:var(--be-white-2);text-decoration:none;font-size:17px;font-weight:500}
.sh-p-02-navbar .nav-sheet-links a:active,.sh-p-02-navbar .nav-sheet-more:active{opacity:.6}
.sh-p-02-navbar .nav-sheet-lang{display:flex;gap:8px;margin-top:14px}
.sh-p-02-navbar .nav-sheet-lang:empty{display:none}
.sh-p-02-navbar .nav-sheet-lang a{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 10px;border-radius:var(--be-r-pill);
  background:var(--be-glass-dark);color:#fff;text-decoration:none;font-size:14px;font-weight:500}
.sh-p-02-navbar .nav-sheet-lang a[aria-current]{background:#fff;color:var(--be-ink)}
.sh-p-02-navbar .nav-sheet-links a,.sh-p-02-navbar .nav-sheet-more,.sh-p-02-navbar .nav-sheet-lang{opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .4s cubic-bezier(.22,.8,.24,1)}
.sh-p-02-navbar .nav-sheet.is-open .nav-sheet-links a,.sh-p-02-navbar .nav-sheet.is-open .nav-sheet-more,.sh-p-02-navbar .nav-sheet.is-open .nav-sheet-lang{opacity:1;transform:none}
.sh-p-02-navbar .nav-sheet.is-open .nav-sheet-links a:nth-child(2){transition-delay:.03s}
.sh-p-02-navbar .nav-sheet.is-open .nav-sheet-links a:nth-child(3){transition-delay:.06s}
.sh-p-02-navbar .nav-sheet.is-open .nav-sheet-links a:nth-child(4){transition-delay:.09s}
.sh-p-02-navbar .nav-sheet.is-open .nav-sheet-links a:nth-child(5){transition-delay:.12s}
.sh-p-02-navbar .nav-sheet.is-open .nav-sheet-links a:nth-child(n+6),.sh-p-02-navbar .nav-sheet.is-open .nav-sheet-more,.sh-p-02-navbar .nav-sheet.is-open .nav-sheet-lang{transition-delay:.15s}
.sh-p-02-navbar .nav-sheet :focus-visible{outline-color:#fff}
@media(prefers-reduced-motion:reduce){
  .sh-p-02-navbar .nav-sheet-in,.sh-p-02-navbar .nav-sheet::backdrop,.sh-p-02-navbar .nav-sheet-links a,.sh-p-02-navbar .nav-sheet-more,.sh-p-02-navbar .nav-sheet-lang{transition:none}
}

@media(max-width:767px){
  /* the flag chip moves into the menu sheet (a language row shows there once a second language exists) */
  .sh-p-02-navbar .nav-right .be-lang{display:none}
  /* 44 px tap targets (Apple HIG): the CTA keeps its look, only taller */
  .sh-p-02-navbar .nav-cta.be-btn{height:44px}
  /* the bottom bar already offers booking: no second "Jetzt buchen" in the pill while the bar is on. It fades and keeps
     its place (it used to drop out with display:none, a hard pop in the pill and a layout shift on every switch) */
  .sh-p-02-navbar .nav-cta.be-btn{transition:color .45s ease,background-color .45s ease,box-shadow .45s ease,transform .25s ease,opacity .25s ease,visibility 0s}
  body:has(.wb.bar-on) .sh-p-02-navbar .nav-cta.be-btn{opacity:0;visibility:hidden;transform:scale(.92);pointer-events:none;
    transition:color .45s ease,background-color .45s ease,box-shadow .45s ease,transform .25s ease,opacity .25s ease,visibility 0s linear .25s}
}
/* phones: the logo link gets a 44 px hit area (it is 30 px high), same look */
@media(max-width:767px){
  .sh-p-02-navbar .navbar .logo{position:relative}
  .sh-p-02-navbar .navbar .logo::before{content:"";position:absolute;inset:-7px -4px}
}

/* RTL (Arabic, dir=rtl; inert elsewhere): the bar sits on the column from the right (logo right, CTA left),
   the language menu opens from the chip's left edge, the phone sheet's × moves to the left */
[dir=rtl] .sh-sec-02-navbar .sh-p-02-navbar .sec-nav .navbar{margin-left:0;margin-right:calc((100% - var(--nv-col)) / 2 - var(--nv-pl));
  padding-left:var(--nv-pr);padding-right:var(--nv-pl)}
[dir=rtl] .sh-p-02-navbar .nav-links{margin-left:0;margin-right:34px}
[dir=rtl] .sh-p-02-navbar .be-lang-btn.be-chip{padding:0 8px 0 12px}
[dir=rtl] .sh-p-02-navbar .be-lang-menu{right:auto;left:0;transform-origin:top left}
[dir=rtl] .sh-p-02-navbar .be-check{margin-left:0;margin-right:auto}
[dir=rtl] .sh-p-02-navbar .nav-sheet-x.be-icon{right:auto;left:max(12px,calc(var(--be-gutter) - 12px))}
[dir=rtl] .sh-p-02-navbar .nav-sheet-lang a{padding:0 10px 0 14px}
@media(max-width:999px){ [dir=rtl] .sh-p-02-navbar .be-lang-btn.be-chip{padding:0 8px} }


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Black Eagle design system (decisions round 1 + 2, 2026-10-04; docs/website/design-system.md).
   build.py prepends this file to every section's <style>, so every snippet stays self-contained.
   Sections use the tokens and the be-* components below instead of their own values. */

.sh-sec{
  /* grid: one content column, one left edge */
  --be-max:1120px; --be-gutter:24px;
  /* colour: four text colours, one surface */
  --be-ink:#141414; --be-grey:#6e6e73; --be-faint:#a1a1a6; --be-white:#fff; --be-white-2:rgba(255,255,255,.72); /* muted text on photos/dark */
  --be-band:#f4f3ea; --be-line:rgba(20,20,20,.1);
  /* type: five sizes (+ the 19 px intro step); phones in the clamp minimum */
  --be-fs-display:clamp(40px,4.45vw,64px); --be-fs-h:clamp(32px,3.35vw,48px); --be-fs-title:clamp(20px,1.55vw,22px);
  --be-fs-intro:clamp(17px,1.35vw,19px); --be-fs-body:clamp(16px,1.2vw,17px); --be-fs-small:14px;
  /* radius: cards/photos, small boxes, pills */
  --be-r:20px; --be-r-sm:12px; --be-r-pill:999px;
  /* motion: the hero's spring and ease */
  --be-spring:cubic-bezier(.3,1.6,.5,1); --be-ease:cubic-bezier(.25,.1,.25,1);
  /* liquid glass (the hero card language) */
  --be-glass:rgba(20,20,20,.06); --be-glass-hover:rgba(20,20,20,.11);
  --be-glass-dark:rgba(255,255,255,.12); --be-glass-dark-hover:rgba(255,255,255,.2);
  --be-edge:linear-gradient(115deg,transparent 32%,rgba(20,20,20,.28) 44%,rgba(20,20,20,.7) 50%,rgba(20,20,20,.28) 56%,transparent 68%);
  --be-edge-dark:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 44%,#fff 50%,rgba(255,255,255,.55) 56%,transparent 68%);
  font-family:Inter,system-ui,-apple-system,sans-serif;
}
@media(min-width:768px){ .sh-sec{--be-gutter:48px} }
.sh-sec.be-band,.sh-sec .be-band{background:var(--be-band)}

/* layout */
.sh-sec .be-wrap{width:min(var(--be-max),100% - 2*var(--be-gutter));margin-inline:auto}

/* headline: black line + grey line, left by default; .be-center only for amenities, hosts and the closing CTA */
.sh-sec .be-h{margin:0;font-size:var(--be-fs-h);font-weight:600;line-height:1.08;letter-spacing:-.025em;color:var(--be-ink);text-wrap:balance}
.sh-sec .be-h .m{display:block;color:var(--be-faint)}
.sh-sec .be-h.be-display{font-size:var(--be-fs-display)}
.sh-sec .be-intro{margin:16px 0 0;font-size:var(--be-fs-intro);line-height:1.5;color:var(--be-grey);max-width:640px}
.sh-sec .be-center{text-align:center}.sh-sec .be-center .be-intro{margin-inline:auto}
.sh-sec .be-title{font-size:var(--be-fs-title);font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--be-ink)}

/* buttons: four building blocks */
.sh-sec .be-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;
  border:0;border-radius:var(--be-r-pill);font:600 15px/1 Inter,system-ui,sans-serif;letter-spacing:-.005em;white-space:nowrap;
  text-decoration:none;cursor:pointer;background:var(--be-ink);color:#fff;
  transition:background .18s ease,color .18s ease,transform .22s var(--be-spring),box-shadow .2s ease}
.sh-sec .be-btn svg{width:18px;height:18px;flex-shrink:0;transition:transform .22s var(--be-spring)}
.sh-sec .be-btn:hover{background:#2a2a2a}
.sh-sec .be-btn:hover svg:last-child:not(.be-turn){transform:translateX(3px)}  /* .be-turn: chevrons/+/× that rotate instead */
.sh-sec .be-btn:active{transform:scale(.96)}
.sh-sec .be-btn:focus-visible,.sh-sec .be-link:focus-visible,.sh-sec .be-icon:focus-visible,.sh-sec .be-chip:focus-visible{outline:2px solid var(--be-ink);outline-offset:3px}
/* vendor CSS squares every focused element to 6 px: keep pills and circles round */
.sh-sec .be-btn:focus-visible,.sh-sec .be-chip:focus-visible{border-radius:var(--be-r-pill)}
.sh-sec .be-icon:focus-visible{border-radius:50%}
.sh-sec .be-on-dark:focus-visible,.sh-sec .be-on-dark :focus-visible{outline-color:#fff}
/* primary on a photo or dark surface */
.sh-sec .be-btn.be-on-dark{background:#fff;color:var(--be-ink)}
.sh-sec .be-btn.be-on-dark:hover{background:rgba(255,255,255,.88)}

/* secondary = liquid glass: soft fill, blur, the hero's shimmering edge */
.sh-sec .be-btn.be-soft,.sh-sec .be-icon,.sh-sec .be-chip{background:var(--be-glass);color:var(--be-ink);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.sh-sec .be-btn.be-soft{overflow:hidden}
.sh-sec .be-btn.be-soft:hover,.sh-sec .be-chip:hover{background:var(--be-glass-hover)}
.sh-sec .be-btn.be-soft.be-on-dark,.sh-sec .be-icon.be-on-dark,.sh-sec .be-chip.be-on-dark{background:var(--be-glass-dark);color:#fff}
.sh-sec .be-btn.be-soft.be-on-dark:hover,.sh-sec .be-chip.be-on-dark:hover{background:var(--be-glass-dark-hover)}
.sh-sec .be-glint{position:relative;overflow:hidden}
.sh-sec .be-btn.be-soft::after,.sh-sec .be-glint::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--be-edge);background-size:300% 100%;background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  opacity:0;animation:beSysEdge 13s linear infinite;animation-delay:var(--be-edge-delay,0s)}
.sh-sec .be-on-dark.be-soft::after,.sh-sec .be-on-dark .be-glint::after,.sh-sec .be-glint.be-on-dark::after{background:var(--be-edge-dark);background-size:300% 100%;background-repeat:no-repeat}
.sh-sec .be-btn.be-soft:hover::after,.sh-sec .be-glint:hover::after{animation:none;opacity:0}
@keyframes beSysEdge{0%{background-position:135% 0;opacity:0}3%{opacity:1}20%{background-position:-135% 0;opacity:1}23%,100%{background-position:-135% 0;opacity:0}}

/* text link with arrow */
.sh-sec .be-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--be-ink);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:3px;cursor:pointer}
.sh-sec .be-link svg{width:16px;height:16px;transition:transform .22s var(--be-spring)}
.sh-sec .be-link:hover svg:not(.be-turn){transform:translateX(3px)}
.sh-sec .be-link.be-on-dark{color:#fff}

/* round icon button, 44 px: arrows, +, ×, steppers (the hero's bubbles) */
.sh-sec .be-icon{width:44px;height:44px;text-decoration:none;flex-shrink:0;padding:0;border:0;border-radius:50%;display:inline-grid;place-items:center;cursor:pointer;
  font:500 20px/1 Inter,system-ui,sans-serif;transition:background .15s ease,color .15s ease,transform .18s var(--be-spring),opacity .15s ease}
.sh-sec .be-icon svg{width:20px;height:20px}
.sh-sec .be-icon:hover:not(:disabled){background:var(--be-ink);color:#fff}
.sh-sec .be-icon.be-on-dark:hover:not(:disabled){background:#fff;color:var(--be-ink)}
.sh-sec .be-icon:active:not(:disabled){transform:scale(.86)}
.sh-sec .be-icon:disabled{opacity:.3;cursor:not-allowed}

/* chip / filter / tab: glass pill, active = solid */
.sh-sec .be-chip{text-decoration:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:0;border-radius:var(--be-r-pill);
  font:500 14px/1 Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:background .18s ease,color .18s ease,transform .18s var(--be-spring)}
.sh-sec .be-chip:active{transform:scale(.95)}
.sh-sec .be-chip.is-on,.sh-sec .be-chip[aria-pressed="true"],.sh-sec .be-chip[aria-selected="true"],.sh-sec .be-chip[aria-current]:not([aria-current="false"]){background:var(--be-ink);color:#fff}
.sh-sec .be-chip.be-on-dark.is-on,.sh-sec .be-chip.be-on-dark[aria-pressed="true"],.sh-sec .be-chip.be-on-dark[aria-selected="true"],.sh-sec .be-chip.be-on-dark[aria-current]:not([aria-current="false"]){background:#fff;color:var(--be-ink)}

@media(prefers-reduced-motion:reduce){
  .sh-sec .be-btn.be-soft::after,.sh-sec .be-glint::after{animation:none}
  .sh-sec .be-btn,.sh-sec .be-icon,.sh-sec .be-chip,.sh-sec .be-btn svg,.sh-sec .be-link svg{transition:none}
}

/* iOS Safari: no grey tap flash over pills, cards and links (the controls have their own :active states) */
.sh-sec a,.sh-sec button,.sh-sec summary,.sh-sec label{-webkit-tap-highlight-color:transparent}
/* phones: 44 px tap targets (Apple HIG). Chips grow 4 px; text links get an invisible hit area around them,
   so the layout does not move */
@media(max-width:767px){
  .sh-sec .be-chip{height:44px}
  .sh-sec .be-link{position:relative}
  .sh-sec .be-link::before{content:"";position:absolute;inset:-12px -6px}
}

/* ---- Right-to-left (Arabic pages: <html lang="ar" dir="rtl">). Every rule starts with [dir=rtl] or :lang(ar), so
   German and English pages render exactly as before. Section-specific mirroring lives at the end of each section's extra.css. ---- */
/* Forward/back arrows and prev/next chevrons point the other way. The individual `scale` property composes with every
   `transform` the sections set on these icons, so the hover nudges (translateX(3px), translate(2px,-2px)) move them
   towards the reading direction too. Logos, flags, stars, photos, the map and the WhatsApp glyph stay as they are. */
[dir=rtl] .sh-sec svg:has(path[d^="M5 12h14M13 6"],path[d^="M5 12h14M12 5"],path[d^="M15 18l-6-6"],path[d^="M15 6l-6 6"],path[d^="M9 6l6 6"],path[d^="M7 17 17 7"]){scale:-1 1}
/* Arabic script is cursive: no tracking (it tears the joins apart), no faux italics; uppercase has no meaning there */
.sh-sec :lang(ar){letter-spacing:0!important;font-style:normal!important;text-transform:none!important}
/* a bare phone number stays "+43 681 …" instead of being reordered by the RTL paragraph */
[dir=rtl] .sh-sec a[href^="tel:"]:not(:has(*)){direction:ltr;unicode-bidi:isolate}


.sh-p-16-footer{--ink:#141414;--text:#1a1a1a;--muted:#6f6f6f;--faint:#9a9a9a;
    --line:#e5e5e5;--surface:#f5f5f5;--chip:#ededed;--page:#fff;}
.sh-p-16-footer, .sh-p-16-footer *{box-sizing:border-box;margin:0;padding:0}
.sh-p-16-footer{font-family:"Inter",-apple-system,system-ui,sans-serif;background:#ffffff;color:var(--text);
    -webkit-font-smoothing:antialiased;padding:28px 20px 60px;overflow-x:clip}
.sh-p-16-footer .lib{max-width:1600px;margin:0 auto}
.sh-p-16-footer .logo{display:flex;align-items:center;gap:10px}
.sh-p-16-footer .logo .m{width:30px;height:30px;border-radius:8px;background:#fff;color:var(--ink);display:grid;place-items:center}
.sh-p-16-footer .logo .m svg{width:16px;height:16px}
.sh-p-16-footer .logo .wm{font-weight:600;font-size:16px;color:#f3f3f3}
.sh-p-16-footer .logo .wm small{display:block;font-size:9px;font-weight:500;color:#8a8a8a;letter-spacing:.16em;text-transform:uppercase;margin-top:-2px}
.sh-p-16-footer h1{font-weight:600;letter-spacing:-.03em;color:#121212;line-height:1.06}
@supports (animation-timeline:view()){
@keyframes step-exit{to{transform:scale(.965);opacity:.85}}
}
@media(max-width:860px){
@supports (animation-timeline:view()){.step-card{animation:none}}
}
@keyframes fbZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes revscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sphA{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-34px)}}
@keyframes sphB{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,30px)}}
@keyframes bawipe{0%,100%{clip-path:inset(0 70% 0 0)}50%{clip-path:inset(0 15% 0 0)}}
@keyframes bahandle{0%,100%{left:30%}50%{left:85%}}
.sh-p-16-footer{scroll-behavior:smooth}
.sh-p-16-footer{padding:0 20px 0}
.sh-p-16-footer .lib{max-width:1600px;margin:0 auto}
.sh-p-16-footer .navbar .logo .m{width:38px;height:30px;border-radius:9px}
.sh-p-16-footer .navbar .logo .wm{font-size:17px}
.sh-p-16-footer .navbar .logo .wm{font-weight:500}
@keyframes heroDrift{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes huDraw{to{stroke-dashoffset:0}}
@keyframes tileEdge{0%{background-position:135% 0;opacity:0}
  3%{opacity:1}
  20%{background-position:-135% 0;opacity:1}
  23%{background-position:-135% 0;opacity:0}
  100%{background-position:-135% 0;opacity:0}}
.sh-p-16-footer .foot{margin-top:120px;border-top:1px solid var(--line);padding:44px 0 34px}
.sh-p-16-footer .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:44px}
.sh-p-16-footer .foot-brand{max-width:300px}
.sh-p-16-footer .foot-brand p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:16px 0 0}
.sh-p-16-footer .foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.sh-p-16-footer .foot-col h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9a9a97;font-weight:700;margin:0 0 16px}
.sh-p-16-footer .foot-col a{display:block;color:#4f4f4c;text-decoration:none;font-size:14.5px;margin-bottom:11px;transition:.15s}
.sh-p-16-footer .foot-col a:hover{color:#141414}
.sh-p-16-footer .foot-btm{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px;font-size:13px;color:#9a9a97}
.sh-p-16-footer .foot-btm .legal{display:flex;gap:20px;flex-wrap:wrap}
.sh-p-16-footer .foot-btm a{color:#9a9a97;text-decoration:none}
.sh-p-16-footer .foot-btm a:hover{color:#5f5f5c}
.sh-p-16-footer .foot-disc{font-size:12px;color:#b0b0ac;line-height:1.6;margin-top:22px;max-width:90ch}
@media(max-width:820px){
.sh-p-16-footer{padding-bottom:86px}
}
@media (prefers-reduced-motion: reduce){
.sh-p-16-footer, .sh-p-16-footer *,
.sh-p-16-footer *::before,
.sh-p-16-footer *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
.sh-p-16-footer :focus-visible{outline:2px solid #141414;outline-offset:3px;border-radius:6px}
@media(max-width:640px){
.sh-p-16-footer .foot-cols{gap:34px}
}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.3)}
  4%{opacity:.9;transform:translate(calc(var(--dx)*.18),calc(var(--dy)*.18)) scale(1)}
  20%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)}}
.sh-p-16-footer .sec-nav.over-light .logo .wm{color:#141414}
.sh-p-16-footer .sec-nav.over-light .logo .m{background:var(--ink);color:#fff}
.sh-p-16-footer{--gutter:20px;--edge:max(var(--gutter), calc((100vw - 1600px) / 2))}
.sh-p-16-footer{padding-left:var(--gutter);padding-right:var(--gutter)}
@media (min-width:821px) and (max-width:1600px){
.sh-p-16-footer{--gutter:clamp(48px,5.6vw,90px)}
}
.sh-p-16-footer{--gutter:40px}
@media (max-width:820px){
.sh-p-16-footer{--gutter:20px}
}
@media (min-width:821px) and (max-width:1600px){
.sh-p-16-footer{--gutter:clamp(48px,5.6vw,90px)}
}
@keyframes pinRise{from{opacity:0;transform:translateY(14px) scale(.5)}
  to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pinPulse{0%,100%{opacity:.06}50%{opacity:.14}}
@keyframes stampSpin{to{transform:rotate(360deg)}}
.sh-p-16-footer :target{scroll-margin-top:clamp(96px,9vw,128px)}
@keyframes barRise{to{transform:scaleY(1)}}
@keyframes barDrift{from{transform:scaleY(1)}to{transform:scaleY(.94)}}
.sh-p-16-footer{overflow-x:visible}
.sh-p-16-footer{overflow-x:clip}
.sh-p-16-footer .foot{padding-top:clamp(72px,7.6vw,116px);padding-bottom:clamp(48px,5vw,72px)}
.sh-p-16-footer .foot-top{gap:clamp(40px,5vw,88px)}
.sh-p-16-footer .foot .logo{gap:13px}
.sh-p-16-footer .foot .logo .m{width:42px;height:42px;border-radius:12px}
.sh-p-16-footer .foot .logo .m svg{width:23px;height:23px}
.sh-p-16-footer .foot .logo .wm{font-size:22px;line-height:1.1}
.sh-p-16-footer .foot-brand p{margin-top:18px;max-width:44ch}
.sh-p-16-footer .foot{background:#141414;color:rgba(255,255,255,.68)}
.sh-p-16-footer .foot .logo .m{background:#fff!important;color:#141414!important}
.sh-p-16-footer .foot .logo .wm{color:#fff!important}
.sh-p-16-footer .foot a{color:rgba(255,255,255,.68)}
.sh-p-16-footer .foot a:hover{color:#fff}
.sh-p-16-footer .foot h4,
.sh-p-16-footer .foot b,
.sh-p-16-footer .foot strong{color:#fff}
.sh-p-16-footer .foot-top{border-color:rgba(255,255,255,.14)}
.sh-p-16-footer .foot{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:var(--edge);padding-right:var(--edge);border-radius:0}
.sh-p-16-footer .foot > *{max-width:1600px;margin-left:auto;margin-right:auto;width:100%}
.sh-p-16-footer .foot p,
.sh-p-16-footer .foot li,
.sh-p-16-footer .foot span,
.sh-p-16-footer .foot small{color:rgba(255,255,255,.62)}
.sh-p-16-footer .foot .foot-brand p{color:rgba(255,255,255,.62)}
.sh-p-16-footer .book + .foot{margin-top:0}
.sh-p-16-footer{--sec-gap:clamp(120px,14vw,200px)}
.sh-p-16-footer .book + .foot{margin-top:0}
.sh-p-16-footer .foot{padding-top:clamp(88px,9vw,136px);padding-bottom:clamp(56px,5.6vw,84px)}
.sh-p-16-footer .foot-top{gap:clamp(48px,5.6vw,96px);padding-bottom:clamp(44px,4.6vw,68px);
  border-bottom:1px solid rgba(255,255,255,.10)}
.sh-p-16-footer .foot h4{font-size:12.5px;letter-spacing:.16em;margin-bottom:20px}
.sh-p-16-footer .foot-col a,
.sh-p-16-footer .foot-col li{font-size:16px;line-height:1.5}
.sh-p-16-footer .foot-col li + li,
.sh-p-16-footer .foot-col a + a{margin-top:14px}
.sh-p-16-footer .foot-col ul{display:flex;flex-direction:column;gap:14px}
.sh-p-16-footer .foot-brand p{font-size:16px;line-height:1.65}
.sh-p-16-footer .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.sh-p-16-footer .foot h4{font-size:16px;font-weight:600;letter-spacing:-.005em;text-transform:none;
  color:#fff;margin-bottom:18px}
.sh-p-16-footer .foot-top{border-bottom:none;padding-bottom:clamp(40px,4.4vw,64px)}
@media(max-width:700px){
.sh-p-16-footer .foot-cols{grid-template-columns:1fr 1fr}
}
.sh-p-16-footer .foot-btm{border-top:1px solid rgba(255,255,255,.09);padding-top:clamp(26px,2.8vw,38px);
  border-bottom:none}
.sh-p-16-footer .foot-btm a{font-size:15px}
.sh-p-16-footer input::placeholder{color:#b9b7b0}
@media(max-width:999px){
.sh-p-16-footer .foot{margin-bottom:0}
.sh-p-16-footer{padding-bottom:0}
.sh-p-16-footer .lib{padding-bottom:0}
}
.sh-p-16-footer .fnl{min-height:100vh;display:flex;flex-direction:column;background:#fff}
.sh-p-16-footer .fnl-logo .m{width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;
  display:grid;place-items:center}
.sh-p-16-footer .fnl-logo .m svg{width:19px;height:19px}
.sh-p-16-footer .fnl-logo .wm{font-size:18px;font-weight:600;letter-spacing:-.02em}
@keyframes dmRing{to{stroke-dashoffset:0}}
@keyframes dmTick{to{stroke-dashoffset:0}}
@keyframes dmRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:640px){
.sh-p-16-footer .sh-quiz .fnl-logo .wm{display:none}
}
.sh-p-16-footer .sh-quiz .fnl.is-end .fnl-nav{display:none}
@keyframes cfPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0)}
  14%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1) rotate(var(--r))}}
.sh-p-16-footer .sh-quiz .fnl{min-height:0}
.sh-p-16-footer .sh-quiz [data-step=calc]{text-align:center}
@keyframes cSpin{to{transform:rotate(360deg)}}
@keyframes cPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.72}}
@keyframes cOrbit{to{transform:rotate(360deg)}}
@keyframes csIn{to{opacity:1}}
@media(max-width:760px){
.sh-p-16-footer .sh-quiz [data-step=calc],
.sh-p-16-footer .sh-quiz [data-step=done],
.sh-p-16-footer .sh-quiz [data-step=rent]{padding-top:clamp(20px,6vw,36px)}
}
.sh-p-16-footer .sh-quiz [data-step=nocov]{text-align:center}
.sh-p-16-footer .sh-quiz [data-step=design]{text-align:center}
@keyframes dsnDraw{to{stroke-dashoffset:0}}
@keyframes dsnPop{from{opacity:0}to{opacity:1}}
@keyframes dsnScan{0%{transform:translateY(34px);opacity:0}
  12%{opacity:.85}88%{opacity:.85}100%{transform:translateY(112px);opacity:0}}
@keyframes dhDraw{to{stroke-dashoffset:0}}
@keyframes dhPop{to{opacity:1}}
@keyframes dhRay{to{opacity:1}}
@keyframes dhSpin{to{transform:rotate(360deg)}}
@keyframes dhScan{0%{transform:translateY(40px);opacity:0}
  14%{opacity:.9}86%{opacity:.9}100%{transform:translateY(186px);opacity:0}}
@keyframes ncTick{to{stroke-dashoffset:0}}
@keyframes hlDraw{to{stroke-dashoffset:0}}
@keyframes pvIn{from{opacity:0}to{opacity:1}}
@keyframes rayIn{to{opacity:1}}
@keyframes sunSpin{to{transform:rotate(360deg)}}
@keyframes qOut{to{opacity:0;transform:translateY(-64px)}}
@keyframes qIn{from{opacity:0;transform:translateY(64px)}to{opacity:1;transform:none}}
@keyframes qOut{to{opacity:0;transform:translateY(-70px)}}
@keyframes qIn{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes qOut{0%{opacity:1}18%{opacity:0}100%{opacity:0;transform:translateY(-70px)}}
@media(max-width:760px){
.sh-p-16-footer .sh-quiz .q2 .fnl-logo .m{background:rgba(255,255,255,.92);color:#141414}
.sh-p-16-footer .sh-quiz .q2 .fnl-logo .wm{color:#141414}
}
.sh-p-16-footer .sh-quiz [hidden]{display:none !important}
@media(max-width:760px){
.sh-p-16-footer .sh-quiz .q2 .fnl-logo .m{background:var(--ink);color:#fff}
.sh-p-16-footer .sh-quiz .q2 .fnl-logo .wm{color:#141414}
}
@media(max-width:999px){
.sh-p-16-footer .sh-quiz .q2 .fnl-logo .m{background:var(--ink);color:#fff}
}
.sh-p-16-footer .view[hidden]{display:none}
/* ---- spacing above and below this block ---- */
.sh-sec-16-footer{padding-top:var(--sh-space-top,0px);padding-bottom:var(--sh-space-bottom,0px)}

/* Black Eagle footer + optional closing CTA, one of three parts:
   cta-season (B, home: full-bleed season photo + guests form), cta-photo (A) and cta-hosts (C) (alternatives, not on home).
   Built on the design system (system.css): content on the 1120 column, text 14 / legal 12, be-btn / be-icon / be-chip / be-link.
   The footer's own classes (be-foot-*) replace the vendor's .foot/.foot-col, so the SOL-16 vendor rules no longer apply.
   Season (docs/website/seasons.md): dark footer in winter, light (--be-band) in summer; extra.js adds .be-foot--light and
   removes .be-on-dark from the footer's controls. Two text colours per theme: winter white + faint, summer ink + grey
   (faint stands in for grey on the dark footer, where #6e6e73 would not pass contrast). */

.sh-p-16-footer .be-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sh-p-16-footer{--be-overlap:clamp(96px,10vw,160px);
  --f-bg:var(--be-ink);--f-ink:#fff;--f-text:var(--be-faint);--f-line:rgba(255,255,255,.12)}
.sh-p-16-footer:has(.be-foot--light){--f-bg:var(--be-band);--f-ink:var(--be-ink);--f-text:var(--be-grey);--f-line:var(--be-line)}

/* ---- shared CTA pieces ---- */
.sh-p-16-footer .be-cta{position:relative;z-index:1;padding-top:clamp(0px,1vw,16px)}
.sh-p-16-footer .be-cta-photo,.sh-p-16-footer .be-cta-hosts{margin-bottom:calc(-1 * var(--be-overlap))}
.sh-p-16-footer .be-cta-eyebrow{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px;border-radius:999px;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:#fff;font-size:13px;font-weight:500;letter-spacing:.02em;margin-bottom:24px}
.sh-p-16-footer .be-cta-eyebrow b{font-weight:700}
.sh-p-16-footer .be-cta-eyebrow i{font-style:normal;opacity:.55}
.sh-p-16-footer .be-cta-eyebrow svg{width:16px;height:16px}
.sh-p-16-footer .be-cta-eyebrow > span{display:inline-flex;align-items:center;gap:8px}
.sh-p-16-footer .be-cta h2{font-size:clamp(32px,4.4vw,60px);font-weight:600;letter-spacing:-.03em;line-height:1.05;color:#fff;text-wrap:balance}
.sh-p-16-footer .be-cta h2 span{color:rgba(255,255,255,.62)}
.sh-p-16-footer .be-cta .sub{color:rgba(255,255,255,.86);margin:20px auto 0;font-size:clamp(16px,1.6vw,19px);line-height:1.55;max-width:50ch;text-wrap:pretty}
.sh-p-16-footer .cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#fff;color:#141414;border:0;border-radius:999px;
  padding:0 28px;height:56px;font-family:inherit;font-size:16px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;flex-shrink:0;
  transition:background .2s ease,transform .2s ease}
.sh-p-16-footer .cta-btn:hover{background:#ededeb}
.sh-p-16-footer .cta-btn svg{width:17px;height:17px;transition:transform .2s ease}
.sh-p-16-footer .cta-btn:hover svg{transform:translateX(3px)}

/* ---- A: photo card that overlaps into the footer ---- */
.sh-p-16-footer .ctap-card{position:relative;max-width:1600px;margin:0 auto;border-radius:28px;overflow:hidden;
  padding:clamp(84px,10vw,144px) clamp(24px,6vw,80px);text-align:center;background:#1a1a1a}
.sh-p-16-footer .ctap-img{position:absolute;left:0;right:0;top:-25%;width:100%;height:150%;object-fit:cover;will-change:transform;
  filter:saturate(1.04) brightness(1.02)}
.sh-p-16-footer .ctap-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,.45),rgba(20,16,12,.62))}
.sh-p-16-footer .ctap-inner{position:relative;z-index:1}
.sh-p-16-footer .be-cta-row{margin-top:34px;display:flex;align-items:center;justify-content:center;gap:14px 26px;flex-wrap:wrap}
.sh-p-16-footer .be-cta-alt{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.88);font-size:15px;font-weight:500;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.sh-p-16-footer .be-cta-alt:hover{color:#fff;border-color:#fff}
.sh-p-16-footer .be-cta-alt svg{width:17px;height:17px}

/* ---- B: full-bleed season photo with the guests form; fades into the footer ---- */
.sh-p-16-footer .be-cta-season{width:100vw;margin:0 calc(50% - 50vw) 0;min-height:clamp(560px,78vh,760px);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  padding:clamp(120px,12vw,160px) var(--be-gutter) clamp(48px,5vw,72px)}
.sh-p-16-footer .bs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-p-16-footer .be-cta-season::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,20,20,.05) 0%,rgba(20,20,20,.25) 35%,rgba(20,20,20,.78) 78%,var(--f-bg) 100%)}
.sh-p-16-footer:has(.be-foot--light) .be-cta-season{padding-bottom:clamp(96px,10vw,150px)}
/* light footer: only a soft shade behind the text, then the photo mists out into the footer colour */
.sh-p-16-footer:has(.be-foot--light) .be-cta-season::after{background:linear-gradient(180deg,transparent 72%,color-mix(in srgb,var(--f-bg) 70%,transparent) 88%,var(--f-bg) 100%),radial-gradient(ellipse 62% 42% at 50% 58%,rgba(20,20,20,.5),rgba(20,20,20,.18) 70%,transparent 100%),linear-gradient(180deg,rgba(20,20,20,0) 0%,rgba(20,20,20,.12) 50%,rgba(20,20,20,0) 80%)}
.sh-p-16-footer .be-cta-season [data-season][hidden]{display:none}
/* photo credit (TVB Mayrhofen / Mayrhofner Bergbahnen licences, docs/website/image-rights.md): small, top right, where
   the photo is clear in both seasons (the foot fades into the footer colour, light in summer). extra.js shows the credit of
   the season's photo, as with the photos; the TVB Mayrhofen credit links to www.mayrhofen.at */
.sh-p-16-footer .bs-credit{position:absolute;top:14px;right:var(--be-gutter,24px);z-index:2;font-size:10.5px;line-height:14px;font-weight:400;
  letter-spacing:.01em;white-space:nowrap;color:rgba(255,255,255,.7);text-shadow:0 0 4px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.55);text-decoration:none}
.sh-p-16-footer a.bs-credit:hover{color:#fff;text-decoration:underline}
.sh-p-16-footer a.bs-credit:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sh-p-16-footer .bs-inner{position:relative;z-index:1;width:100%;max-width:720px}
/* "Wann kommst du?": display size, centred, white on the photo */
.sh-p-16-footer .be-cta-season .be-h{color:#fff}
.sh-p-16-footer .be-cta-season .sub{max-width:560px;margin:16px auto 0;font-size:var(--be-fs-intro);line-height:1.5;color:#fff;text-wrap:pretty}
/* guests form: same card, tiles and steppers as the hero widget; tiles shimmer with .be-glint, steppers are .be-icon */
.sh-p-16-footer .bs-form{margin:32px auto 0;padding:24px;border-radius:var(--be-r);text-align:left;
  background:rgba(16,16,16,.55);-webkit-backdrop-filter:blur(30px) saturate(1.4);backdrop-filter:blur(30px) saturate(1.4)}
.sh-p-16-footer .be-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sh-p-16-footer .be-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 14px 14px 20px;border-radius:var(--be-r-sm);background:rgba(255,255,255,.08);transition:background .18s ease}
.sh-p-16-footer .be-row:hover{background:rgba(255,255,255,.14)}
.sh-p-16-footer .be-row-txt b{display:block;font-size:var(--be-fs-body);font-weight:600;color:#fff}
.sh-p-16-footer .be-row-txt span{display:block;margin-top:2px;font-size:14px;color:var(--be-faint)}
.sh-p-16-footer .be-step{display:flex;align-items:center;gap:6px;flex-shrink:0}
.sh-p-16-footer .be-step .be-icon{font-size:22px}
.sh-p-16-footer .be-step output{min-width:36px;text-align:center;font-size:var(--be-fs-title);font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.sh-p-16-footer .be-step output.pop{animation:beFootBump .34s var(--be-spring)}
@keyframes beFootBump{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
.sh-p-16-footer .bs-form .bs-go{width:100%;margin-top:16px}
.sh-p-16-footer .bs-form .be-note,.sh-p-16-footer .bs-form .be-err{margin:12px 0 0;font-size:14px;line-height:1.4;color:#fff;text-align:center}
.sh-p-16-footer .bs-form .be-err{word-break:break-all}
.sh-p-16-footer .bs-form [hidden]{display:none}

/* ---- C: a note from Josi & Willi, cream card with the engraved portrait ---- */
.sh-p-16-footer .bh-card{position:relative;max-width:1600px;margin:0 auto;border-radius:28px;background:#f3efe7;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(24px,5vw,80px);
  padding:clamp(40px,5vw,72px) clamp(24px,6vw,96px);box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
.sh-p-16-footer .bh-portrait{justify-self:center;width:min(100%,400px)}
.sh-p-16-footer .bh-portrait img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.sh-p-16-footer .bh-eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8a7f6c}
.sh-p-16-footer .be-cta-hosts h2{color:#141414;margin-top:14px}
.sh-p-16-footer .be-cta-hosts .sub{color:#4f4c45;margin:18px 0 0;max-width:42ch}
.sh-p-16-footer .bh-sign{font-family:"Caveat",cursive;font-size:clamp(30px,2.6vw,38px);font-weight:600;line-height:1;color:#2a2722;
  margin-top:18px;transform:rotate(-2deg);transform-origin:left center}
.sh-p-16-footer .bh-row{margin-top:30px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sh-p-16-footer .be-cta-hosts .cta-btn{background:#141414;color:#fff}
.sh-p-16-footer .be-cta-hosts .cta-btn:hover{background:#2c2c2c}
.sh-p-16-footer .bh-wa{display:inline-flex;align-items:center;gap:9px;height:56px;padding:0 24px 0 20px;border-radius:999px;
  border:1px solid rgba(20,20,20,.2);color:#141414;font-size:16px;font-weight:600;text-decoration:none;transition:background .2s ease}
.sh-p-16-footer .bh-wa:hover{background:rgba(20,20,20,.05)}
.sh-p-16-footer .bh-wa svg{width:20px;height:20px;color:#1f9d55}

/* ---- footer: full-bleed band, content on the 1120 column ---- */
.sh-p-16-footer .be-foot{width:100vw;margin:clamp(48px,8vw,112px) calc(50% - 50vw) 0;padding:clamp(48px,5vw,64px) var(--be-gutter) 32px;
  background:var(--f-bg);color:var(--f-text);font-size:14px;line-height:1.5}
.sh-p-16-footer .be-cta + .be-foot{margin-top:0}
.sh-p-16-footer .be-cta-photo + .be-foot,.sh-p-16-footer .be-cta-hosts + .be-foot{padding-top:calc(var(--be-overlap) + clamp(48px,5vw,64px))}
.sh-p-16-footer .be-cta-season + .be-foot{padding-top:clamp(24px,3vw,40px)}
.sh-p-16-footer .be-foot-in{max-width:var(--be-max);margin:0 auto}
.sh-p-16-footer .be-foot a:not([class]){color:var(--f-text);text-decoration:none;transition:color .15s ease}
.sh-p-16-footer .be-foot a:not([class]):hover{color:var(--f-ink)}
.sh-p-16-footer .be-foot :focus-visible{outline:2px solid var(--f-ink);outline-offset:3px}
.sh-p-16-footer .be-foot h3{margin:0 0 14px;font-size:14px;font-weight:600;line-height:1.5;color:var(--f-ink)}
.sh-p-16-footer .be-foot h3 a:not([class]){color:inherit}
.sh-p-16-footer .be-foot .be-chip,.sh-p-16-footer .be-foot .be-btn,.sh-p-16-footer .be-foot .be-icon{text-decoration:none}

/* head: logo · claim · WhatsApp, call and social on the right */
.sh-p-16-footer .be-foot-head{display:flex;align-items:center;gap:16px 28px;padding-bottom:32px;margin-bottom:40px;border-bottom:1px solid var(--f-line)}
.sh-p-16-footer .be-foot-logo{display:block;flex-shrink:0;color:var(--f-ink)}
.sh-p-16-footer .be-foot-logo svg{display:block;width:84px;height:auto}
.sh-p-16-footer .be-foot-claim{font-weight:600;color:var(--f-ink)}
.sh-p-16-footer .be-foot-claim span{font-weight:400;color:var(--f-text)}
.sh-p-16-footer .be-foot-reach{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.sh-p-16-footer .be-foot-social{display:flex;gap:8px}
.sh-p-16-footer .be-foot-social .be-icon svg{width:18px;height:18px}

/* columns: contact · apartments · two link lists */
.sh-p-16-footer .be-foot-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.2fr) minmax(0,.85fr) minmax(0,.85fr);gap:32px 40px;padding-bottom:40px}
.sh-p-16-footer .be-foot-lead{max-width:34ch;margin:0 0 14px}
.sh-p-16-footer .be-foot-lines{list-style:none;display:flex;flex-direction:column;gap:6px}
.sh-p-16-footer .be-foot-lines li{display:flex;gap:10px;align-items:flex-start}
.sh-p-16-footer .be-foot-lines .be-ic{flex-shrink:0;width:16px;height:21px;display:grid;place-items:center;color:var(--f-text)}
.sh-p-16-footer .be-foot-lines .be-ic svg{width:16px;height:16px}
.sh-p-16-footer .be-foot-addr address{font-style:normal}
.sh-p-16-footer .be-foot .be-foot-map{margin-top:8px;font-size:14px}
.sh-p-16-footer .be-foot .be-foot-map svg{width:14px;height:14px}
.sh-p-16-footer .be-foot .be-foot-map:hover svg{transform:translate(2px,-2px)}
.sh-p-16-footer .be-foot .be-link:not(.be-on-dark){color:var(--be-ink)}

/* apartments: one row per category, unit numbers as chips */
.sh-p-16-footer .be-foot-units ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.sh-p-16-footer .be-foot-units li{display:grid;grid-template-columns:92px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.sh-p-16-footer .be-foot-units b{font-weight:600;line-height:1.3;color:var(--f-ink)}
.sh-p-16-footer .be-foot-units small{grid-column:1;grid-row:2;font-size:14px;line-height:1.3;color:var(--f-text);white-space:nowrap}
.sh-p-16-footer .be-foot-units li > span{grid-column:2;grid-row:1 / span 2;display:flex;gap:6px;flex-wrap:wrap}
.sh-p-16-footer .be-foot-units .be-chip{padding:0 14px}
.sh-p-16-footer .be-foot a.be-foot-new{display:inline-flex;align-items:center;gap:10px;margin-top:16px;color:var(--f-text);text-decoration:none}
.sh-p-16-footer .be-foot a.be-foot-new:hover{color:var(--f-ink)}
.sh-p-16-footer .be-foot-new span{flex-shrink:0;padding:2px 10px;border-radius:var(--be-r-pill);background:var(--f-ink);color:var(--f-bg);font-weight:600}

.sh-p-16-footer .be-foot-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sh-p-16-footer .be-foot-links h3{margin-bottom:6px}

/* bottom row: copyright · legal (12 px) · language */
.sh-p-16-footer .be-foot-btm{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;padding-top:20px;border-top:1px solid var(--f-line);font-size:12px}
.sh-p-16-footer .be-foot-legal{display:flex;gap:20px;flex-wrap:wrap}
.sh-p-16-footer .be-foot-lang{margin-left:auto;display:flex;gap:6px}
.sh-p-16-footer .be-foot-lang .be-chip{gap:8px;padding:0 14px 0 8px}
/* languages that do not exist yet stay in the markup with [hidden] (their pages would be 404s) */
.sh-p-16-footer .be-foot-lang a[hidden]{display:none}
.sh-p-16-footer .be-flag{width:24px;height:24px;border-radius:50%;overflow:hidden;display:block;flex-shrink:0;box-shadow:0 0 0 1.5px var(--f-line)}
.sh-p-16-footer .be-flag svg{width:100%;height:100%;display:block}

@media(max-width:820px){
  .sh-p-16-footer{--be-overlap:72px}
  .sh-p-16-footer .be-cta h2{font-size:clamp(30px,8vw,38px)}
  .sh-p-16-footer .ctap-card{border-radius:22px;padding:64px 22px}
  .sh-p-16-footer .ctap-img{top:0;height:100%}
  .sh-p-16-footer .be-cta-row{flex-direction:column}
  .sh-p-16-footer .bh-card{grid-template-columns:1fr;text-align:center;border-radius:22px;padding:36px 22px 44px;gap:8px}
  .sh-p-16-footer .bh-portrait{width:min(72%,260px)}
  .sh-p-16-footer .be-cta-hosts .sub{margin:16px auto 0}
  .sh-p-16-footer .bh-sign{transform-origin:center}
  .sh-p-16-footer .bh-row{flex-direction:column;align-items:stretch}
}
@media(max-width:1100px){
  .sh-p-16-footer .be-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .sh-p-16-footer .be-cta-season{min-height:0;padding-top:min(56vw,240px)}
  .sh-p-16-footer .bs-form{padding:16px}
  .sh-p-16-footer .be-rows{grid-template-columns:1fr;gap:8px}
  .sh-p-16-footer .be-row{padding:12px 12px 12px 16px}
}
@media(max-width:767px){
  .sh-p-16-footer .be-foot{padding-top:24px}
  .sh-p-16-footer .be-foot-head{flex-wrap:wrap;padding-bottom:24px;margin-bottom:28px}
  .sh-p-16-footer .be-foot-logo svg{width:72px}
  .sh-p-16-footer .be-foot-claim{flex:1 1 0;min-width:0}
  .sh-p-16-footer .be-foot-reach{flex-basis:100%;margin-left:0}
  .sh-p-16-footer .be-foot-reach .be-btn{flex:1 1 0;min-width:0;padding:0 12px}
  /* the labels say it; without the line icons "WhatsApp" no longer overflows its pill (122 px in 115 at 390) */
  .sh-p-16-footer .be-foot-reach .be-btn svg{display:none}
  .sh-p-16-footer .be-foot-btm{flex-direction:column;align-items:flex-start}
  .sh-p-16-footer .be-foot-lang{margin-left:0;order:-1}

  /* phones (mobile concept, Nov 2026): one calm column, every tap target 44 px */
  /* closing CTA: less photo above the headline, the form closer to it */
  .sh-p-16-footer .be-cta-season{padding-top:40vw;padding-bottom:40px}
  .sh-p-16-footer .bs-form{margin-top:24px}
  /* order: apartments first (the list stays open, design system), then "Kontakt", "Urlaub planen" and "Buchen" as
     full-width rows between hairlines that open with the system's + (extra.js adds the button on phones only; without
     JS they simply show). WhatsApp and Anrufen stay one tap away in the head. */
  .sh-p-16-footer .be-foot-grid{display:flex;flex-direction:column;gap:0;padding-bottom:0}
  .sh-p-16-footer .be-foot-units{order:-1;margin-bottom:28px}
  .sh-p-16-footer .be-foot-units h3{margin-bottom:10px}
  .sh-p-16-footer .be-foot-units h3 a{position:relative}
  .sh-p-16-footer .be-foot-units h3 a::before{content:"";position:absolute;inset:-14px -8px}
  .sh-p-16-footer .be-foot-units ul{gap:10px}
  .sh-p-16-footer .be-foot-units .be-chip{height:44px;padding:0 16px}
  .sh-p-16-footer .be-foot a.be-foot-new{min-height:44px;margin-top:6px}
  .sh-p-16-footer .be-foot-contact,.sh-p-16-footer .be-foot-links{gap:0;border-top:1px solid var(--f-line)}
  .sh-p-16-footer .be-foot-contact:not(.is-acc),.sh-p-16-footer .be-foot-links:not(.is-acc){padding:16px 0}
  .sh-p-16-footer .be-foot-contact:not(.is-acc) h3,.sh-p-16-footer .be-foot-links:not(.is-acc) h3{margin-bottom:4px}
  .sh-p-16-footer .be-foot-grid .is-acc h3{width:100%;margin:0}
  .sh-p-16-footer .be-foot-grid .is-acc:not(.is-open) > :not(h3){display:none}
  .sh-p-16-footer .be-foot-grid .is-open{padding-bottom:16px}
  .sh-p-16-footer .be-foot-links > a{display:flex;align-items:center;min-height:44px}
  /* contact: phone and mail as 44 px rows, "Route planen" with a 44 px hit area */
  .sh-p-16-footer .be-foot-lead{margin-bottom:4px}
  .sh-p-16-footer .be-foot-lines{gap:0}
  .sh-p-16-footer .be-foot-lines li:not(.be-foot-addr){align-items:center}
  .sh-p-16-footer .be-foot-lines li:not(.be-foot-addr) a{display:flex;align-items:center;min-height:44px}
  .sh-p-16-footer .be-foot-addr{padding-top:11px}
  .sh-p-16-footer .be-foot .be-foot-map{position:relative;margin-top:12px}
  .sh-p-16-footer .be-foot .be-foot-map::before{content:"";position:absolute;inset:-10px -8px}
  .sh-p-16-footer .be-foot-acc{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:56px;padding:0;
    border:0;background:none;font:inherit;font-weight:600;color:var(--f-ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sh-p-16-footer .be-foot-acc:focus-visible{outline-offset:-2px;border-radius:var(--be-r-sm)}
  .sh-p-16-footer .be-foot-acc .be-icon svg{width:18px;height:18px;transition:rotate .3s var(--be-spring)}
  .sh-p-16-footer .is-open .be-foot-acc .be-icon svg{rotate:45deg}
  .sh-p-16-footer .be-foot-acc:active .be-icon{transform:scale(.86)}
  /* bottom: language chips, copyright, legal links at 14 px (no text under 14 px on phones) with 44 px tap rows */
  .sh-p-16-footer .be-foot-btm{gap:4px;padding-top:24px;font-size:14px}
  .sh-p-16-footer .be-foot-lang{margin-bottom:12px}
  .sh-p-16-footer .be-foot-lang .be-chip{height:44px}
  .sh-p-16-footer .be-foot-legal{gap:24px}
  .sh-p-16-footer .be-foot-legal a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
}
@media(prefers-reduced-motion:reduce){ .sh-p-16-footer .be-step output.pop{animation:none} .sh-p-16-footer .be-foot-acc .be-icon svg{transition:none} }
/* desktop with the floating WhatsApp button (whatsapp-b): the footer ends above it, so it never sits on the language links */
@media(min-width:768px){ body:has(.wb-fab) .sh-p-16-footer .be-foot{padding-bottom:104px} }
/* phones with the WhatsApp/booking bar (whatsapp-b): it already offers both actions, so the CTA's own WhatsApp link goes,
   and the footer ends 24 px above the bar (bar: 60 px high, max(10px, safe-area inset) from the bottom) so the legal links stay
   tappable and nothing hides behind it or the home indicator */
@media(max-width:767px){
  body:has(.wb-bar) .sh-p-16-footer .be-cta-alt{display:none}
  body:has(.wb-bar) .sh-p-16-footer .be-foot{padding-bottom:calc(max(10px,env(safe-area-inset-bottom)) + 60px + 24px)}
}

/* phones (mobile simplify concept, Michael's OK 10 Nov): "Wann kommst du?" without its subline (the guests card stays, Michael's
   phone feedback 10 Nov night #10: the button opens the hero's date step, extra.js), the claim only "Direkt beim Gastgeber gebucht.", and the apartments fold into one "Apartments +"
   row like Kontakt and Buchen (extra.js), with a link to the overview inside. Desktop keeps everything. */
.sh-p-16-footer .be-foot-claim .be-foot-claim-a{font-weight:600;color:var(--f-ink)}
.sh-p-16-footer .be-foot a.be-foot-all{display:none}
@media(max-width:767px){
  .sh-p-16-footer .be-cta-season .sub, .sh-p-16-footer .be-foot-claim-a{display:none}
  .sh-p-16-footer .be-foot-head{margin-bottom:0}
  .sh-p-16-footer .be-foot-units.is-acc{margin-bottom:0}
  .sh-p-16-footer .be-foot-units.is-acc ul{margin-top:4px}
  .sh-p-16-footer .be-foot a.be-foot-all{display:flex;align-items:center;min-height:44px;margin-top:8px;color:var(--f-text);text-decoration:none}
}

/* RTL (Arabic, dir=rtl; inert elsewhere): the guests card, the head's contact buttons and the language chips mirror;
   the photo credit stays top right, where the photo is clear */
[dir=rtl] .sh-p-16-footer .bs-form{text-align:right}
[dir=rtl] .sh-p-16-footer .be-row{padding:14px 20px 14px 14px}
[dir=rtl] .sh-p-16-footer .be-foot-reach{margin-left:0;margin-right:auto}
[dir=rtl] .sh-p-16-footer .be-foot-lang{margin-left:0;margin-right:auto}
[dir=rtl] .sh-p-16-footer .be-foot-lang .be-chip{padding:0 8px 0 14px}
[dir=rtl] .sh-p-16-footer .bh-sign{transform:rotate(2deg);transform-origin:right center}
@media(max-width:820px){
  [dir=rtl] .sh-p-16-footer .be-row{padding:12px 16px 12px 12px}
  [dir=rtl] .sh-p-16-footer .bh-sign{transform-origin:center}
}
@media(max-width:767px){
  [dir=rtl] .sh-p-16-footer .be-foot-reach,[dir=rtl] .sh-p-16-footer .be-foot-lang{margin-right:0}
  [dir=rtl] .sh-p-16-footer .be-foot-acc{text-align:right}
}


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Black Eagle design system (decisions round 1 + 2, 2026-10-04; docs/website/design-system.md).
   build.py prepends this file to every section's <style>, so every snippet stays self-contained.
   Sections use the tokens and the be-* components below instead of their own values. */

.sh-sec{
  /* grid: one content column, one left edge */
  --be-max:1120px; --be-gutter:24px;
  /* colour: four text colours, one surface */
  --be-ink:#141414; --be-grey:#6e6e73; --be-faint:#a1a1a6; --be-white:#fff; --be-white-2:rgba(255,255,255,.72); /* muted text on photos/dark */
  --be-band:#f4f3ea; --be-line:rgba(20,20,20,.1);
  /* type: five sizes (+ the 19 px intro step); phones in the clamp minimum */
  --be-fs-display:clamp(40px,4.45vw,64px); --be-fs-h:clamp(32px,3.35vw,48px); --be-fs-title:clamp(20px,1.55vw,22px);
  --be-fs-intro:clamp(17px,1.35vw,19px); --be-fs-body:clamp(16px,1.2vw,17px); --be-fs-small:14px;
  /* radius: cards/photos, small boxes, pills */
  --be-r:20px; --be-r-sm:12px; --be-r-pill:999px;
  /* motion: the hero's spring and ease */
  --be-spring:cubic-bezier(.3,1.6,.5,1); --be-ease:cubic-bezier(.25,.1,.25,1);
  /* liquid glass (the hero card language) */
  --be-glass:rgba(20,20,20,.06); --be-glass-hover:rgba(20,20,20,.11);
  --be-glass-dark:rgba(255,255,255,.12); --be-glass-dark-hover:rgba(255,255,255,.2);
  --be-edge:linear-gradient(115deg,transparent 32%,rgba(20,20,20,.28) 44%,rgba(20,20,20,.7) 50%,rgba(20,20,20,.28) 56%,transparent 68%);
  --be-edge-dark:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 44%,#fff 50%,rgba(255,255,255,.55) 56%,transparent 68%);
  font-family:Inter,system-ui,-apple-system,sans-serif;
}
@media(min-width:768px){ .sh-sec{--be-gutter:48px} }
.sh-sec.be-band,.sh-sec .be-band{background:var(--be-band)}

/* layout */
.sh-sec .be-wrap{width:min(var(--be-max),100% - 2*var(--be-gutter));margin-inline:auto}

/* headline: black line + grey line, left by default; .be-center only for amenities, hosts and the closing CTA */
.sh-sec .be-h{margin:0;font-size:var(--be-fs-h);font-weight:600;line-height:1.08;letter-spacing:-.025em;color:var(--be-ink);text-wrap:balance}
.sh-sec .be-h .m{display:block;color:var(--be-faint)}
.sh-sec .be-h.be-display{font-size:var(--be-fs-display)}
.sh-sec .be-intro{margin:16px 0 0;font-size:var(--be-fs-intro);line-height:1.5;color:var(--be-grey);max-width:640px}
.sh-sec .be-center{text-align:center}.sh-sec .be-center .be-intro{margin-inline:auto}
.sh-sec .be-title{font-size:var(--be-fs-title);font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--be-ink)}

/* buttons: four building blocks */
.sh-sec .be-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;
  border:0;border-radius:var(--be-r-pill);font:600 15px/1 Inter,system-ui,sans-serif;letter-spacing:-.005em;white-space:nowrap;
  text-decoration:none;cursor:pointer;background:var(--be-ink);color:#fff;
  transition:background .18s ease,color .18s ease,transform .22s var(--be-spring),box-shadow .2s ease}
.sh-sec .be-btn svg{width:18px;height:18px;flex-shrink:0;transition:transform .22s var(--be-spring)}
.sh-sec .be-btn:hover{background:#2a2a2a}
.sh-sec .be-btn:hover svg:last-child:not(.be-turn){transform:translateX(3px)}  /* .be-turn: chevrons/+/× that rotate instead */
.sh-sec .be-btn:active{transform:scale(.96)}
.sh-sec .be-btn:focus-visible,.sh-sec .be-link:focus-visible,.sh-sec .be-icon:focus-visible,.sh-sec .be-chip:focus-visible{outline:2px solid var(--be-ink);outline-offset:3px}
/* vendor CSS squares every focused element to 6 px: keep pills and circles round */
.sh-sec .be-btn:focus-visible,.sh-sec .be-chip:focus-visible{border-radius:var(--be-r-pill)}
.sh-sec .be-icon:focus-visible{border-radius:50%}
.sh-sec .be-on-dark:focus-visible,.sh-sec .be-on-dark :focus-visible{outline-color:#fff}
/* primary on a photo or dark surface */
.sh-sec .be-btn.be-on-dark{background:#fff;color:var(--be-ink)}
.sh-sec .be-btn.be-on-dark:hover{background:rgba(255,255,255,.88)}

/* secondary = liquid glass: soft fill, blur, the hero's shimmering edge */
.sh-sec .be-btn.be-soft,.sh-sec .be-icon,.sh-sec .be-chip{background:var(--be-glass);color:var(--be-ink);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.sh-sec .be-btn.be-soft{overflow:hidden}
.sh-sec .be-btn.be-soft:hover,.sh-sec .be-chip:hover{background:var(--be-glass-hover)}
.sh-sec .be-btn.be-soft.be-on-dark,.sh-sec .be-icon.be-on-dark,.sh-sec .be-chip.be-on-dark{background:var(--be-glass-dark);color:#fff}
.sh-sec .be-btn.be-soft.be-on-dark:hover,.sh-sec .be-chip.be-on-dark:hover{background:var(--be-glass-dark-hover)}
.sh-sec .be-glint{position:relative;overflow:hidden}
.sh-sec .be-btn.be-soft::after,.sh-sec .be-glint::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:var(--be-edge);background-size:300% 100%;background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  opacity:0;animation:beSysEdge 13s linear infinite;animation-delay:var(--be-edge-delay,0s)}
.sh-sec .be-on-dark.be-soft::after,.sh-sec .be-on-dark .be-glint::after,.sh-sec .be-glint.be-on-dark::after{background:var(--be-edge-dark);background-size:300% 100%;background-repeat:no-repeat}
.sh-sec .be-btn.be-soft:hover::after,.sh-sec .be-glint:hover::after{animation:none;opacity:0}
@keyframes beSysEdge{0%{background-position:135% 0;opacity:0}3%{opacity:1}20%{background-position:-135% 0;opacity:1}23%,100%{background-position:-135% 0;opacity:0}}

/* text link with arrow */
.sh-sec .be-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--be-ink);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:3px;cursor:pointer}
.sh-sec .be-link svg{width:16px;height:16px;transition:transform .22s var(--be-spring)}
.sh-sec .be-link:hover svg:not(.be-turn){transform:translateX(3px)}
.sh-sec .be-link.be-on-dark{color:#fff}

/* round icon button, 44 px: arrows, +, ×, steppers (the hero's bubbles) */
.sh-sec .be-icon{width:44px;height:44px;text-decoration:none;flex-shrink:0;padding:0;border:0;border-radius:50%;display:inline-grid;place-items:center;cursor:pointer;
  font:500 20px/1 Inter,system-ui,sans-serif;transition:background .15s ease,color .15s ease,transform .18s var(--be-spring),opacity .15s ease}
.sh-sec .be-icon svg{width:20px;height:20px}
.sh-sec .be-icon:hover:not(:disabled){background:var(--be-ink);color:#fff}
.sh-sec .be-icon.be-on-dark:hover:not(:disabled){background:#fff;color:var(--be-ink)}
.sh-sec .be-icon:active:not(:disabled){transform:scale(.86)}
.sh-sec .be-icon:disabled{opacity:.3;cursor:not-allowed}

/* chip / filter / tab: glass pill, active = solid */
.sh-sec .be-chip{text-decoration:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:0;border-radius:var(--be-r-pill);
  font:500 14px/1 Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:background .18s ease,color .18s ease,transform .18s var(--be-spring)}
.sh-sec .be-chip:active{transform:scale(.95)}
.sh-sec .be-chip.is-on,.sh-sec .be-chip[aria-pressed="true"],.sh-sec .be-chip[aria-selected="true"],.sh-sec .be-chip[aria-current]:not([aria-current="false"]){background:var(--be-ink);color:#fff}
.sh-sec .be-chip.be-on-dark.is-on,.sh-sec .be-chip.be-on-dark[aria-pressed="true"],.sh-sec .be-chip.be-on-dark[aria-selected="true"],.sh-sec .be-chip.be-on-dark[aria-current]:not([aria-current="false"]){background:#fff;color:var(--be-ink)}

@media(prefers-reduced-motion:reduce){
  .sh-sec .be-btn.be-soft::after,.sh-sec .be-glint::after{animation:none}
  .sh-sec .be-btn,.sh-sec .be-icon,.sh-sec .be-chip,.sh-sec .be-btn svg,.sh-sec .be-link svg{transition:none}
}

/* iOS Safari: no grey tap flash over pills, cards and links (the controls have their own :active states) */
.sh-sec a,.sh-sec button,.sh-sec summary,.sh-sec label{-webkit-tap-highlight-color:transparent}
/* phones: 44 px tap targets (Apple HIG). Chips grow 4 px; text links get an invisible hit area around them,
   so the layout does not move */
@media(max-width:767px){
  .sh-sec .be-chip{height:44px}
  .sh-sec .be-link{position:relative}
  .sh-sec .be-link::before{content:"";position:absolute;inset:-12px -6px}
}

/* ---- Right-to-left (Arabic pages: <html lang="ar" dir="rtl">). Every rule starts with [dir=rtl] or :lang(ar), so
   German and English pages render exactly as before. Section-specific mirroring lives at the end of each section's extra.css. ---- */
/* Forward/back arrows and prev/next chevrons point the other way. The individual `scale` property composes with every
   `transform` the sections set on these icons, so the hover nudges (translateX(3px), translate(2px,-2px)) move them
   towards the reading direction too. Logos, flags, stars, photos, the map and the WhatsApp glyph stay as they are. */
[dir=rtl] .sh-sec svg:has(path[d^="M5 12h14M13 6"],path[d^="M5 12h14M12 5"],path[d^="M15 18l-6-6"],path[d^="M15 6l-6 6"],path[d^="M9 6l6 6"],path[d^="M7 17 17 7"]){scale:-1 1}
/* Arabic script is cursive: no tracking (it tears the joins apart), no faux italics; uppercase has no meaning there */
.sh-sec :lang(ar){letter-spacing:0!important;font-style:normal!important;text-transform:none!important}
/* a bare phone number stays "+43 681 …" instead of being reordered by the RTL paragraph */
[dir=rtl] .sh-sec a[href^="tel:"]:not(:has(*)){direction:ltr;unicode-bidi:isolate}


/* WhatsApp widget, variant B (Michael's pick): a WhatsApp button with a short note from Josi
   that peeks on hover and stays open on click; the note's button goes into the chat. Fixed in place, it never moves.
   Phones: no WhatsApp button; a round calendar button bottom right that unfolds into the bar
   "Verfügbarkeit prüfen · Frag Josi" (design b, see the end of this file).
   Design variants via data-style on .wb: glass (dark glass card), chat (dark glass, Josi's
   text as a chat bubble), light (light frosted glass). */
.sh-p-81-whatsapp-b{--ink:var(--be-ink);--wa:#25d366;--ease:cubic-bezier(.19,1,.22,1);--spring:var(--be-spring);font-family:Inter,system-ui,-apple-system,sans-serif}
/* design system (system.css): text 14+ in white / faint on the glass, radius 20 / pill, the note's button is .be-btn.be-on-dark,
   its close cross .be-icon.be-on-dark, the phone bar's booking link .be-btn.be-on-dark. The WhatsApp glyph keeps its brand colour. */
.sh-p-81-whatsapp-b .wb{-webkit-font-smoothing:antialiased;--glass:rgba(16,16,16,.6);
  --glass-edge:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.16);--blur:blur(30px) saturate(140%)}
/* --glass/--blur: the hero booking card's milky glass (rgba(16,16,16,.55), blur 30, saturate 140);
   tint .6 instead of .55 so white text still passes contrast over a white page */
.sh-p-81-whatsapp-b .wb *{box-sizing:border-box}
.sh-p-81-whatsapp-b .wb svg{display:block;width:100%;height:100%}
.sh-p-81-whatsapp-b .wb a{text-decoration:none}
.sh-p-81-whatsapp-b .wb :focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* button: the WhatsApp logo; once the note is pinned open (click, or an automatic note) it turns
   into a close cross. While the note only peeks on hover the logo stays. Looks (data-look) keep the glyph
   green, black or white (Meta's rules). */
/* resting place: 24 px inside the bottom-right corner of the hero photo, which (Michael,
   2026-10-04) keeps the same 12 px to the browser edge on all four sides */
.sh-p-81-whatsapp-b .wb{--fab-r:36px;--fab-b:36px}
.sh-p-81-whatsapp-b .wb-fab{position:fixed;right:var(--fab-r);bottom:var(--fab-b);z-index:900;width:56px;height:56px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:var(--fab-bg);color:var(--fab-fg);box-shadow:var(--fab-shadow);animation:wbIn .45s var(--ease) backwards;
  transition:transform .3s var(--spring)}
.sh-p-81-whatsapp-b .wb-fab:hover{transform:scale(1.05)}
.sh-p-81-whatsapp-b .wb-fab:active{transform:scale(.94)}
/* keep wbIn in the list, or removing .boop would replay the entrance */
.sh-p-81-whatsapp-b .wb-fab.boop{animation:wbIn .45s var(--ease) backwards,wbBoop .5s var(--spring)}
/* now and then a light runs around the button, like the edge of the hero's guest rows */
.sh-p-81-whatsapp-b .wb-fab::after{content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 44%,#fff 50%,rgba(255,255,255,.55) 56%,transparent 68%);
  background-size:300% 100%;background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  opacity:0;animation:wbRing 9s linear 1.5s infinite}
.sh-p-81-whatsapp-b .wb.open .wb-fab::after{animation:none;opacity:0}
@keyframes wbRing{0%{background-position:135% 0;opacity:0}3%{opacity:1}20%{background-position:-135% 0;opacity:1}23%,100%{background-position:-135% 0;opacity:0}}
@keyframes wbIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes wbBoop{0%{transform:none}35%{transform:scale(.9)}70%{transform:scale(1.06)}100%{transform:none}}
.sh-p-81-whatsapp-b .wb-fab .wb-icon,.sh-p-81-whatsapp-b .wb-fab .wb-close{position:absolute;inset:0;margin:auto;transition:transform .45s var(--spring),opacity .2s ease}
.sh-p-81-whatsapp-b .wb-fab .wb-icon{width:28px;height:28px}
.sh-p-81-whatsapp-b .wb-fab .wb-close{width:20px;height:20px;color:#fff;opacity:0;transform:rotate(-90deg) scale(.4)}
.sh-p-81-whatsapp-b .wb.pinned .wb-fab .wb-icon{opacity:0;transform:rotate(90deg) scale(.4)}
.sh-p-81-whatsapp-b .wb.pinned .wb-fab .wb-close{opacity:1;transform:none}
.sh-p-81-whatsapp-b .wb{--fab-bg:var(--ink);--fab-fg:#fff;--fab-shadow:0 8px 28px rgba(0,0,0,.28)}
.sh-p-81-whatsapp-b .wb[data-look="green"]{--fab-bg:var(--wa);--fab-fg:#fff;--fab-shadow:0 8px 26px rgba(18,140,70,.35)}
.sh-p-81-whatsapp-b .wb[data-look="ink-green"]{--fab-fg:var(--wa)}
.sh-p-81-whatsapp-b .wb[data-look="white"]{--fab-bg:#fff;--fab-fg:var(--ink);--fab-shadow:0 8px 28px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.06)}
.sh-p-81-whatsapp-b .wb[data-look="white-green"]{--fab-bg:#fff;--fab-fg:#1fbe5a;--fab-shadow:0 8px 28px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.06)}
.sh-p-81-whatsapp-b .wb[data-look="glass"]{--fab-bg:rgba(20,20,20,.5);--fab-fg:#fff;--fab-shadow:0 8px 28px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.28)}
.sh-p-81-whatsapp-b .wb[data-look="glass"] .wb-fab{-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
/* glass-green (picked): the hero booking card's dark liquid glass with the green logo */
.sh-p-81-whatsapp-b .wb[data-look="glass-green"]{--fab-bg:var(--glass);--fab-fg:var(--wa);--fab-shadow:0 10px 30px -6px rgba(0,0,0,.35),var(--glass-edge)}
.sh-p-81-whatsapp-b .wb[data-look="glass-green"] .wb-fab{-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
/* glass-white (picked, Michael 2026-10-04): same glass, white logo; the running light draws the eye */
.sh-p-81-whatsapp-b .wb[data-look="glass-white"]{--fab-bg:var(--glass);--fab-fg:#fff;--fab-shadow:0 10px 30px -6px rgba(0,0,0,.35),var(--glass-edge)}
.sh-p-81-whatsapp-b .wb[data-look="glass-white"] .wb-fab{-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}

/* the note grows out of the button (clip-path from a button-sized pill to the full card), then
   its lines fade up one after the other. Closing reverses it; all CSS transitions, so a quick
   second click simply turns it around. */
.sh-p-81-whatsapp-b .wb-nudge{position:fixed;right:var(--fab-r);bottom:calc(var(--fab-b) + 70px);z-index:900;width:340px;visibility:hidden;transition:visibility 0s linear .45s}
.sh-p-81-whatsapp-b .wb.open .wb-nudge{visibility:visible;transition:visibility 0s}
.sh-p-81-whatsapp-b .wb-nudge::before{content:"";position:absolute;inset:0;border-radius:var(--be-r);pointer-events:none;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.42),0 8px 20px -10px rgba(0,0,0,.25);opacity:0;transition:opacity .2s ease}
.sh-p-81-whatsapp-b .wb.open .wb-nudge::before{opacity:1;transition:opacity .5s ease .25s}
.sh-p-81-whatsapp-b .wb-card{position:relative;overflow:hidden;padding:24px;border-radius:var(--be-r);color:#fff;
  background:var(--glass);box-shadow:var(--glass-edge);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  clip-path:inset(calc(100% - 56px) 0 0 calc(100% - 56px) round 28px);opacity:0;
  transition:clip-path .4s cubic-bezier(.5,0,.75,0) .05s,opacity .15s ease .3s}
.sh-p-81-whatsapp-b .wb.open .wb-card{clip-path:inset(0 round 20px);opacity:1;transition:clip-path .7s cubic-bezier(.16,1,.3,1),opacity .1s ease}
.sh-p-81-whatsapp-b .wb-card > *{opacity:0;transform:translateY(8px);filter:blur(3px);transition:opacity .12s ease,transform .2s ease,filter .12s ease}
.sh-p-81-whatsapp-b .wb.open .wb-card > *{opacity:1;transform:none;filter:none;
  transition:opacity .4s ease var(--d,.12s),transform .65s var(--ease) var(--d,.12s),filter .4s ease var(--d,.12s)}
.sh-p-81-whatsapp-b .wb-msg{--d:.2s}.sh-p-81-whatsapp-b .wb-nudge-go{--d:.28s}.sh-p-81-whatsapp-b .wb-nudge-x{--d:.24s}

.sh-p-81-whatsapp-b .wb-head{display:flex;align-items:center;gap:12px;padding-right:44px}
.sh-p-81-whatsapp-b .wb-head img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.sh-p-81-whatsapp-b .wb-who b{display:block;font-size:var(--be-fs-body);font-weight:600;line-height:1.25}
.sh-p-81-whatsapp-b .wb-who small{display:block;margin-top:2px;font-size:14px;line-height:1.3;color:var(--be-faint)}
.sh-p-81-whatsapp-b .wb-msg{margin:20px 0 0;font-size:14px;line-height:1.55;color:#fff}
.sh-p-81-whatsapp-b .wb-nudge-title{display:block;margin-bottom:4px;font-size:var(--be-fs-body);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:#fff}
.sh-p-81-whatsapp-b .wb-nudge-go.be-btn{display:flex;width:100%;margin-top:24px;
  transition:opacity .12s ease,transform .2s ease,filter .12s ease,background .15s ease}
.sh-p-81-whatsapp-b .wb-nudge-go svg{width:19px;height:19px;color:#1fbe5a}
.sh-p-81-whatsapp-b .wb-nudge-go.be-btn:hover svg{transform:none}
.sh-p-81-whatsapp-b .wb-nudge-x.be-icon{position:absolute;top:14px;right:14px}
.sh-p-81-whatsapp-b .wb-nudge-x.be-icon svg{width:18px;height:18px}
.sh-p-81-whatsapp-b .wb-card :focus-visible{outline-color:#fff}

/* chat: Josi's words as a message bubble under her name, like the start of a WhatsApp chat */
.sh-p-81-whatsapp-b .wb[data-style="chat"] .wb-nudge{width:330px}
.sh-p-81-whatsapp-b .wb[data-style="chat"] .wb-head img{width:34px;height:34px}
.sh-p-81-whatsapp-b .wb[data-style="chat"] .wb-msg{position:relative;margin:16px 0 0 46px;padding:12px 14px 13px;border-radius:4px 12px 12px 12px;background:rgba(255,255,255,.11);color:rgba(255,255,255,.8)}
.sh-p-81-whatsapp-b .wb[data-style="chat"] .wb-nudge-title{font-size:14px}
.sh-p-81-whatsapp-b .wb[data-style="chat"] .wb-nudge-go{height:42px;margin-left:46px;justify-content:flex-start;padding:0 16px 0 12px;width:fit-content}

/* light: frosted white glass with dark type, the button stays dark */
.sh-p-81-whatsapp-b .wb[data-style="light"] .wb-card{color:var(--ink);
  background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,255,255,0) 50%),rgba(250,250,248,.78);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%)}
.sh-p-81-whatsapp-b .wb[data-style="light"] .wb-nudge::before{box-shadow:0 26px 60px -18px rgba(0,0,0,.28),0 8px 20px -10px rgba(0,0,0,.14)}
.sh-p-81-whatsapp-b .wb[data-style="light"] .wb-head img{box-shadow:0 0 0 2px #fff}
.sh-p-81-whatsapp-b .wb[data-style="light"] .wb-who small{color:var(--be-grey)}
.sh-p-81-whatsapp-b .wb[data-style="light"] .wb-msg{color:var(--be-grey)}
.sh-p-81-whatsapp-b .wb[data-style="light"] .wb-nudge-title{color:var(--ink)}
.sh-p-81-whatsapp-b .wb[data-style="light"] .wb-nudge-go{background:var(--ink);color:#fff}
.sh-p-81-whatsapp-b .wb[data-style="light"] .wb-nudge-go:hover{background:#000}
.sh-p-81-whatsapp-b .wb[data-style="light"] .wb-nudge-x{background:var(--be-glass);color:var(--ink)}
.sh-p-81-whatsapp-b .wb[data-style="light"] .wb-nudge-x:hover{background:var(--ink);color:#fff}
.sh-p-81-whatsapp-b .wb[data-style="light"] .wb-card :focus-visible{outline-color:var(--ink)}

.sh-p-81-whatsapp-b .wb-bar{display:none}
/* phones (<768 px, the system's one breakpoint): the bar floats 10 px above the bottom edge, or right on the
   safe-area line where the screen has a home indicator (needs viewport-fit=cover; without it Safari keeps the page above
   the indicator itself and env() is 0). The footer ends 24 px above the bar (footer/extra.css). */
@media (max-width:767px){
  .sh-p-81-whatsapp-b .wb-fab{display:none}
  .sh-p-81-whatsapp-b .wb-bar{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:900;display:flex;gap:8px;padding:6px;border-radius:999px;
    background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:0 10px 34px rgba(0,0,0,.3),var(--glass-edge);
    transform:translateY(calc(100% + 24px));transition:transform .5s var(--ease)}
  .sh-p-81-whatsapp-b .wb.bar-on .wb-bar{transform:none}
  .sh-p-81-whatsapp-b .wb-bar a,.sh-p-81-whatsapp-b .wb-bar button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:var(--be-r-pill);font:inherit;font-size:15px;font-weight:600}
  .sh-p-81-whatsapp-b .wb-bar-book.be-btn{flex:1;min-width:0}
  .sh-p-81-whatsapp-b .wb-bar-wa{position:relative;padding:0 18px 0 46px;border:none;background:none;color:#fff;cursor:pointer}
  .sh-p-81-whatsapp-b .wb-bar-wa .wb-icon,.sh-p-81-whatsapp-b .wb-bar-wa .wb-close{position:absolute;left:12px;top:0;bottom:0;margin:auto;width:26px;height:26px;color:var(--fab-fg);transition:transform .45s var(--spring),opacity .2s ease}
  .sh-p-81-whatsapp-b .wb-bar-wa .wb-close{width:18px;height:18px;left:16px;color:#fff;opacity:0;transform:rotate(-90deg) scale(.4)}
  .sh-p-81-whatsapp-b .wb.pinned .wb-bar-wa .wb-icon{opacity:0;transform:rotate(90deg) scale(.4)}
  .sh-p-81-whatsapp-b .wb.pinned .wb-bar-wa .wb-close{opacity:1;transform:none}
  .sh-p-81-whatsapp-b .wb-bar :focus-visible{outline-color:#fff}
  .sh-p-81-whatsapp-b .wb-nudge{right:10px;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 70px);width:min(330px,calc(100vw - 20px))}
}
@media (prefers-reduced-motion:reduce){
  .sh-p-81-whatsapp-b .wb *,.sh-p-81-whatsapp-b .wb *::before,.sh-p-81-whatsapp-b .wb *::after{animation:none!important;transition:none!important}
}

/* phones: the bar sits over light pages most of the time; a near-solid dark pill (the hero card's ink)
   instead of thin glass, so nothing reads through it (Michael, 10 Nov: "Da erkennt man auch nichts mehr") */
@media (max-width:767px){
  .sh-p-81-whatsapp-b .wb-bar{background:rgba(20,20,20,.9)}
}

/* phone bar designs (see extra.js): extra.js always sets data-bar; b "Aufklappen" is the default (Michael's pick,
   dec_3b4b4b6bd9b7), ?bar=a|c show the other two. The plain bar above is the base all three build on. */
.sh-p-81-whatsapp-b .wb .wb-bar-cal,.sh-p-81-whatsapp-b .wb .wb-bar-short,.sh-p-81-whatsapp-b .wb .wb-bar-more{display:none}
@media (max-width:767px){
  /* shared: the bar leaves and comes back with a soft spring; hidden it takes no taps */
  .sh-p-81-whatsapp-b .wb[data-bar] .wb-bar{transition:transform .55s cubic-bezier(.32,1.2,.5,1),opacity .3s ease;opacity:0;pointer-events:none}
  .sh-p-81-whatsapp-b .wb[data-bar].bar-on .wb-bar{opacity:1;pointer-events:auto}
  .sh-p-81-whatsapp-b .wb[data-bar] .wb-bar-book,.sh-p-81-whatsapp-b .wb[data-bar] .wb-bar-wa{white-space:nowrap}

  /* A "Kleiner Knopf": two separate floating pieces, bottom right, in thumb reach: a dark "Verfügbarkeit" pill with a
     calendar and a round WhatsApp button (Josi's note opens above it) */
  .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar{left:auto;right:12px;bottom:max(12px,env(safe-area-inset-bottom));padding:0;gap:10px;border-radius:0;
    background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform:translateY(calc(100% + 28px)) scale(.9);transform-origin:100% 100%}
  .sh-p-81-whatsapp-b .wb[data-bar="a"].bar-on .wb-bar{transform:none}
  .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-book.be-btn,.sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-wa{height:52px;min-height:52px;
    background:rgba(20,20,20,.92);color:#fff;box-shadow:0 10px 28px -6px rgba(0,0,0,.4),var(--glass-edge);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
  .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-book.be-btn{flex:none;gap:9px;padding:0 20px 0 17px}
  .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-book.be-btn:hover{background:#000}
  .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-cal{display:block;width:19px;height:19px}
  .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-long{display:none}
  .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-short{display:inline}
  .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-wa{width:52px;padding:0;font-size:0}
  .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-wa .wb-icon,.sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-wa .wb-close{left:0;right:0}
  .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-wa .wb-icon{width:25px;height:25px}

  /* B "Aufklappen": folded, a 60 px round button (calendar + small WhatsApp badge) bottom right; a tap springs it
     open to the left into today's bar. The row keeps its full width the whole time and is only revealed. */
  .sh-p-81-whatsapp-b .wb[data-bar="b"] .wb-bar{left:auto;right:10px;width:60px;height:60px;justify-content:flex-end;overflow:hidden;
    transform:translateY(calc(100% + 28px)) scale(.8);transform-origin:100% 50%;
    transition:transform .55s cubic-bezier(.32,1.2,.5,1),opacity .3s ease,width .38s cubic-bezier(.4,0,.2,1)}
  .sh-p-81-whatsapp-b .wb[data-bar="b"].bar-on .wb-bar{transform:none}
  .sh-p-81-whatsapp-b .wb[data-bar="b"].bar-open .wb-bar{width:calc(100vw - 20px);
    transition:transform .55s cubic-bezier(.32,1.2,.5,1),opacity .3s ease,width .6s cubic-bezier(.3,1.25,.45,1)}
  .sh-p-81-whatsapp-b .wb[data-bar="b"] .wb-bar-in{display:flex;gap:8px;flex:none;width:calc(100vw - 32px);opacity:0;transform:translateX(16px);
    transition:opacity .15s ease,transform .3s ease}
  .sh-p-81-whatsapp-b .wb[data-bar="b"].bar-open .wb-bar-in{opacity:1;transform:none;transition:opacity .3s ease .08s,transform .55s cubic-bezier(.3,1.25,.45,1)}
  .sh-p-81-whatsapp-b .wb[data-bar="b"] .wb-bar-more{display:block;position:absolute;top:0;right:0;width:60px;height:60px;padding:0;border:none;border-radius:50%;
    background:none;color:#fff;cursor:pointer;transition:opacity .25s ease .1s,transform .45s var(--spring) .05s}
  .sh-p-81-whatsapp-b .wb[data-bar="b"].bar-open .wb-bar-more{opacity:0;transform:scale(.5) rotate(-30deg);pointer-events:none;transition:opacity .12s ease,transform .3s ease}
  .sh-p-81-whatsapp-b .wb[data-bar="b"] .wb-bar-more:active{transform:scale(.92)}
  .sh-p-81-whatsapp-b .wb[data-bar="b"] .wb-bar-more .wb-bar-cal{display:block;position:absolute;inset:0;margin:auto;width:24px;height:24px;transform:translate(-3px,-3px)}
  .sh-p-81-whatsapp-b .wb[data-bar="b"] .wb-bar-badge{position:absolute;right:9px;bottom:9px;width:19px;height:19px;padding:3px;border-radius:50%;background:var(--wa);color:#fff;
    box-shadow:0 0 0 2px rgba(20,20,20,.95)}
  /* folded, a light edge so the dark button still reads on the dark footer (lead, 10 Nov) */
  .sh-p-81-whatsapp-b .wb[data-bar="b"]:not(.bar-open) .wb-bar{box-shadow:0 10px 34px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.24),inset 0 1px 0 rgba(255,255,255,.18)}

  /* C "Nur beim Hochscrollen": today's bar unchanged in look; extra.js only shows it after a scroll up or over the
     apartments and the closing CTA */
  .sh-p-81-whatsapp-b .wb[data-bar="c"] .wb-bar{transform:translateY(calc(100% + 28px))}
  .sh-p-81-whatsapp-b .wb[data-bar="c"].bar-on .wb-bar{transform:none}
}

/* RTL (Arabic, dir=rtl; inert elsewhere): the WhatsApp button and Josi's note rest in the bottom-left corner, the note
   grows out of the button there; on phones the folded round button sits bottom left and springs open to the right */
[dir=rtl] .sh-p-81-whatsapp-b .wb-fab,[dir=rtl] .sh-p-81-whatsapp-b .wb-nudge{right:auto;left:var(--fab-r)}
[dir=rtl] .sh-p-81-whatsapp-b .wb-card{clip-path:inset(calc(100% - 56px) calc(100% - 56px) 0 0 round 28px)}
[dir=rtl] .sh-p-81-whatsapp-b .wb.open .wb-card{clip-path:inset(0 round 20px)}
[dir=rtl] .sh-p-81-whatsapp-b .wb-head{padding-right:0;padding-left:44px}
[dir=rtl] .sh-p-81-whatsapp-b .wb-nudge-x.be-icon{right:auto;left:14px}
[dir=rtl] .sh-p-81-whatsapp-b .wb[data-style="chat"] .wb-msg{margin:16px 46px 0 0;border-radius:12px 4px 12px 12px}
[dir=rtl] .sh-p-81-whatsapp-b .wb[data-style="chat"] .wb-nudge-go{margin-left:0;margin-right:46px;padding:0 12px 0 16px}
@media (max-width:767px){
  [dir=rtl] .sh-p-81-whatsapp-b .wb-bar-wa{padding:0 46px 0 18px}
  [dir=rtl] .sh-p-81-whatsapp-b .wb-bar-wa .wb-icon{left:auto;right:12px}
  [dir=rtl] .sh-p-81-whatsapp-b .wb-bar-wa .wb-close{left:auto;right:16px}
  [dir=rtl] .sh-p-81-whatsapp-b .wb-nudge{left:10px}
  [dir=rtl] .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar{right:auto;left:12px;transform-origin:0 100%}
  [dir=rtl] .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-book.be-btn{padding:0 17px 0 20px}
  [dir=rtl] .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-wa{padding:0}
  [dir=rtl] .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-wa .wb-icon,[dir=rtl] .sh-p-81-whatsapp-b .wb[data-bar="a"] .wb-bar-wa .wb-close{left:0;right:0}
  [dir=rtl] .sh-p-81-whatsapp-b .wb[data-bar="a"].bar-on .wb-bar{transform:none}
  [dir=rtl] .sh-p-81-whatsapp-b .wb[data-bar="b"] .wb-bar{right:auto;left:10px;transform-origin:0 50%}
  [dir=rtl] .sh-p-81-whatsapp-b .wb[data-bar="b"].bar-on .wb-bar{transform:none}
  [dir=rtl] .sh-p-81-whatsapp-b .wb[data-bar="b"] .wb-bar-in{transform:translateX(-16px)}
  [dir=rtl] .sh-p-81-whatsapp-b .wb[data-bar="b"].bar-open .wb-bar-in{transform:none}
  [dir=rtl] .sh-p-81-whatsapp-b .wb[data-bar="b"] .wb-bar-more{right:auto;left:0}
  [dir=rtl] .sh-p-81-whatsapp-b .wb[data-bar="b"] .wb-bar-more .wb-bar-cal{transform:translate(3px,-3px)}
  [dir=rtl] .sh-p-81-whatsapp-b .wb[data-bar="b"] .wb-bar-badge{right:auto;left:9px}
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/noto-sans-arabic-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/noto-sans-arabic-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}