@view-transition{navigation:auto}
    /* Structure tokens. Colours, fonts and the radius base are per-site and
       arrive inline from themeCss(); everything here derives from them, so a
       theme is a data change, not a stylesheet change. */
    :root{
      --step--1:clamp(.8rem,.78rem + .1vw,.86rem);
      --step-0:clamp(1rem,.97rem + .15vw,1.08rem);
      --step-1:clamp(1.14rem,1.09rem + .25vw,1.3rem);
      --step-2:clamp(1.3rem,1.2rem + .5vw,1.6rem);
      --step-3:clamp(1.55rem,1.35rem + 1vw,2.1rem);
      --step-4:clamp(1.9rem,1.6rem + 1.5vw,2.8rem);
      --step-5:clamp(2.3rem,1.8rem + 2.6vw,4rem);
      --step-6:clamp(2.8rem,2rem + 4vw,5.4rem);
      --space-1:.35rem;--space-2:.6rem;--space-3:.9rem;--space-4:1.25rem;--space-5:1.75rem;
      --space-6:clamp(2rem,4vw,3rem);--space-7:clamp(2.5rem,6vw,4.5rem);--space-8:clamp(3.5rem,8vw,6.5rem);
      --radius-sm:calc(var(--radius)*.55);--radius-md:var(--radius);--radius-lg:calc(var(--radius)*1.5);--radius-xl:min(calc(var(--radius)*2.4),2.25rem);--radius-pill:999px;
      --shadow-card:0 2px 2px rgba(0,0,0,.05);--shadow-lift:0 8px 22px rgba(10,8,6,.12);--shadow-float:0 18px 44px rgba(10,8,6,.18);
      --content-max:1180px;--measure:66ch
    }
    *{box-sizing:border-box}html{max-width:100%}body{max-width:100%;margin:0;background:var(--background);color:var(--text);font-family:var(--body);line-height:1.6;overflow-wrap:anywhere;word-break:break-word}a{color:inherit}img{display:block;max-width:100%}
    :is(a,button,input,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:1rem;top:-5rem;background:var(--surface);padding:.7rem 1rem;z-index:50}.skip-link:focus{top:1rem}
    .site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--background) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}.header-inner{max-width:var(--content-max);margin:auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.header-inner>*,.hero>*,.module-heading>*,.contact>*,.footer-inner>*{min-width:0}.site-brand{max-width:100%;overflow-wrap:anywhere;text-decoration:none;font-family:var(--heading);font-size:var(--step-1);font-weight:800}.site-nav{min-width:0;max-width:100%;display:flex;flex-wrap:wrap;gap:.35rem}.site-nav a{min-width:0;max-width:100%;overflow-wrap:anywhere;padding:.45rem .75rem;border-radius:var(--radius-btn);text-decoration:none;font-weight:650}.site-nav a[aria-current="page"],.site-nav a:hover{background:var(--surface-muted)}
    /* Ueber dem Hero-Bild liegt nichts: hat die Seite ein Titelbild, faellt die
       Leiste aus dem Fluss und legt sich transparent hinein. Der Hero beginnt
       damit bei y=0, das Faktenband rueckt in den ersten Bildschirm. */
    .site-header--over{position:absolute;left:0;right:0;top:0;background:none;backdrop-filter:none;border-bottom:0;color:#fff}
    .site-header--over .site-nav a[aria-current="page"],.site-header--over .site-nav a:hover{background:rgba(255,255,255,.2)}
    /* Breakout grid: main no longer caps width itself, so a module can reach the
       viewport edge. Previously max-width on main made full-bleed impossible for
       anything, the hero included. Default column is the measured content track;
       .module--bleed opts into the full track. */
    main{max-width:none;margin:0;padding:0;display:grid;grid-template-columns:[full-start] minmax(var(--space-4),1fr) [content-start] minmax(0,var(--content-max)) [content-end] minmax(var(--space-4),1fr) [full-end]}
    main>*{grid-column:content}main>.module--bleed{grid-column:full}.page-title{margin:var(--space-6) 0 var(--space-2)}.page-title h1{font-family:var(--heading);font-size:var(--step-5);letter-spacing:-.04em;line-height:1.05;margin:0}.module{min-width:0;margin:var(--space-6) 0}.module h1,.module h2,.module h3{max-width:100%;overflow-wrap:anywhere;font-family:var(--heading);line-height:1.1;margin:0 0 var(--space-3)}
    .module h1,.module h2,.page-title h1{text-wrap:balance}
    /* Four levels, not one. A hero headline and a "Check-in & Check-out"
       sub-heading were both rendering as display type, which is why a page of
       three short paragraphs read as three billboards. */
    .module h1{font-size:var(--step-6);letter-spacing:-.045em;line-height:1.05}.module h2{font-size:var(--step-4);letter-spacing:-.03em}.prose h2,.faq h2,.module-heading h2{font-size:var(--step-3);letter-spacing:-.02em}.module h3{font-size:var(--step-2)}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:var(--step--1);font-weight:800;color:var(--primary-text);margin:0 0 .75rem}.eyebrow::before{content:'';display:inline-block;width:.55em;height:.55em;margin-right:.55em;border-radius:50%;background:var(--accent)}.hero{min-height:min(72vh,720px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding:clamp(2rem,6vw,5rem) 0}.hero-center{grid-template-columns:1fr;text-align:center}.hero-center .hero-copy{max-width:850px;margin:auto}.hero-body{font-size:var(--step-1);max-width:58ch}.hero-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-xl);box-shadow:0 28px 80px color-mix(in srgb,var(--accent) 28%,transparent)}
    .hero-cover{position:relative;display:flex;align-items:flex-end;min-height:min(84vh,820px);margin-top:1rem;padding:0;border-radius:var(--radius-xl);overflow:hidden}
    /* Cover-Hero nach dem Muster der Destination-Pages: unter 760 px randlos
       und eckig, darueber vom Viewportrand eingerueckt und gerundet. */
    .module--bleed.hero-cover{margin-top:0;border-radius:0}
    @media(min-width:760px){.module--bleed.hero-cover{margin:0 var(--space-4);border-radius:var(--radius-xl)}}
    .module--bleed .hero-copy{max-width:var(--content-max);margin-inline:auto;width:100%}.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    /* Doppelter Verlauf wie die ds-SectionHero: Abdunklung von unten plus eine
       linke Wischkante, damit die Copy auch auf hellen Motiven traegt. */
    .hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,.4) 0%,rgba(10,8,6,.08) 34%,rgba(10,8,6,.78) 100%),linear-gradient(90deg,rgba(10,8,6,.42) 0%,rgba(10,8,6,.08) 46%,transparent 72%)}
    .hero-cover .hero-copy{position:relative;max-width:860px;padding:clamp(1.75rem,5vw,4rem);color:#fff}.hero-cover h1,.hero-cover h2{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}.hero-cover .eyebrow{color:#fff}.hero-cover .hero-body{color:rgba(255,255,255,.94)}.hero-cover .button-secondary{background:rgba(255,255,255,.94);border:0;color:#1c1712}
    [data-module-id="home-reviews"] .content-card{border-left:4px solid var(--accent)}[data-module-id="home-reviews"] .content-card p{font-size:var(--step-0);font-style:italic}[data-module-id="home-reviews"] .content-card p::before{content:'« '}[data-module-id="home-reviews"] .content-card p::after{content:' »'}[data-module-id="home-reviews"] .content-card h3{font-family:inherit;font-size:.95rem;font-weight:700;opacity:.75}
    .contact.contact-inquiry{flex-direction:column;align-items:stretch;gap:1.5rem;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-xl);padding:clamp(var(--space-4),4vw,var(--space-6))}.contact.contact-inquiry .inquiry-form{background:transparent;border:1px solid var(--border);border-radius:var(--radius-md);padding:clamp(1rem,2.5vw,1.6rem)}.contact-head{min-width:0;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;flex-wrap:wrap}.contact-head>*{min-width:0}
    .inquiry-form,.booking-form{min-width:0;background:var(--surface);color:var(--text);border-radius:var(--radius-lg);padding:clamp(1.25rem,3vw,2rem);display:grid;gap:1rem}.inquiry-form h3{margin:0}
    .inquiry-grid,.booking-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:.8rem}
    .inquiry-form label,.booking-form label{display:grid;gap:.35rem;font-size:.85rem;font-weight:700}
    .inquiry-form input,.inquiry-form textarea,.booking-form input,.booking-form textarea{min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem .85rem;font:inherit;background:var(--background);color:var(--text);transition:border-color .15s ease}
    .inquiry-form input:focus-visible,.inquiry-form textarea:focus-visible,.booking-form input:focus-visible,.booking-form textarea:focus-visible{outline-offset:0;border-color:var(--accent)}
    .inquiry-website{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
    .inquiry-status,.booking-status{margin:0;font-weight:700;display:none}.inquiry-status.is-visible,.booking-status.is-visible{display:block}
    .inquiry-form .button,.booking-form .button{justify-self:start}
    /* The booking module is already a surface card, so the form inside it drops
       its own card chrome — surface on surface only blurs the two together. */
    .booking{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:clamp(var(--space-4),4vw,var(--space-7))}
    .booking .booking-form{background:transparent;padding:0}
    .booking-price{margin:0 0 var(--space-4);font-size:var(--step-1);font-weight:800;color:var(--primary-text)}
    .booking-calendar{display:grid;gap:.6rem;margin-bottom:var(--space-4)}
    .cal-nav{display:flex;justify-content:space-between}
    .cal-nav-button{width:2.4rem;height:2.4rem;border:1px solid var(--border);border-radius:999px;background:var(--background);color:var(--text);font-size:1.15rem;line-height:1;cursor:pointer}
    .cal-nav-button:disabled{opacity:.35;cursor:default}
    .cal-months{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
    .cal-months .cal-month:nth-child(2){display:none}
    @media(min-width:640px){.cal-months .cal-month:nth-child(2){display:block}}
    .cal-title{margin:0 0 .5rem;font-weight:750;text-transform:capitalize}
    .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
    .cal-weekday{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-text);text-align:center;padding:.2rem 0}
    .cal-day{aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:.55rem;background:transparent;color:var(--text);font:inherit;font-size:.88rem;font-variant-numeric:tabular-nums;cursor:pointer}
    .cal-day:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 20%,transparent)}
    .cal-day:disabled{color:color-mix(in srgb,var(--text) 30%,transparent);cursor:default}
    .cal-day.cal-occupied{text-decoration:line-through;background:color-mix(in srgb,var(--text) 7%,transparent)}
    .cal-day.cal-outside{opacity:.45}
    .cal-day.cal-in-range{background:color-mix(in srgb,var(--accent) 24%,transparent);border-radius:0}
    .cal-day.cal-start,.cal-day.cal-end{background:var(--accent);color:var(--surface);font-weight:800}
    .cal-day.cal-start{border-radius:.55rem 0 0 .55rem}
    .cal-day.cal-end{border-radius:0 .55rem .55rem 0}
    .actions,.contact-actions{min-width:0;display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}.button{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal;text-align:center;display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;border:0;border-radius:var(--radius-btn);padding:.8rem 1.3rem;font:inherit;font-weight:750;text-decoration:none;cursor:pointer;transition:background .15s ease,box-shadow .15s ease,transform .1s ease}.button:active{transform:scale(.98)}.button-primary{background:var(--primary);color:var(--on-primary)}.button-secondary{background:var(--surface);border:1px solid var(--border)}
    @media(hover:hover){.button-primary:hover{background:color-mix(in srgb,var(--primary) 86%,#000)}.button-secondary:hover{background:var(--surface-muted)}}
    @media(prefers-reduced-motion:reduce){.button:active{transform:none}}
    .prose{white-space:pre-line}.prose-narrow{max-width:760px}.prose p,.section-intro{font-size:var(--step-1)}.section-intro{color:var(--muted-text)}.gallery-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:var(--space-3)}.gallery-head h2{margin:0}
    .gallery-nav{display:flex;gap:.5rem;flex:none}
    .gallery-arrow{width:2.6rem;height:2.6rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer}
    .gallery-arrow:hover{background:var(--surface-muted)}
    .gallery-arrow:disabled{opacity:.35;cursor:default}
    /* Horizontale Galerie: eine Reihe grosser Bilder mit Snap statt eines
       Kachelrasters, das jedes Bild briefmarkengross zeigte. */
    .gallery{display:grid;grid-auto-flow:column;grid-auto-columns:min(70%,560px);gap:.8rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 25%,transparent) transparent}
    .gallery img{scroll-snap-align:center;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-md)}
    .gallery:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
    @media (max-width:640px){.gallery{grid-auto-columns:88%}}
    .gallery-more{display:none}
    /* Ab 900 px wird die Reihe zur Collage der ds-DetailGallery: ein grosses
       Motiv links ueber zwei Reihen, vier kleine rechts, Rundung am Container
       statt an den Kacheln. Bilder ab dem sechsten bleiben dem Dialog
       vorbehalten (display:none laedt sie dank loading=lazy nie). */
    @media (min-width:900px){
      .gallery--collage{grid-auto-flow:row;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:12/5;gap:4px;overflow:hidden;position:relative;border-radius:var(--radius-xl);padding-bottom:0;scroll-snap-type:none}
      .gallery--collage img{height:100%;aspect-ratio:auto;border-radius:0}
      .gallery--collage img:first-child{grid-row:span 2}
      .gallery--collage img:nth-child(n+6){display:none}
      .gallery-section--collage .gallery-nav{display:none}
      /* Unten LINKS: rechts unten klebt ab 1000 px die schwebende
         Buchungskarte, die den Knopf sonst verdeckt. */
      .gallery--collage .gallery-more{position:absolute;left:.9rem;bottom:.9rem;display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--border);border-radius:var(--radius-btn);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);color:var(--text);padding:.55rem 1rem;font:inherit;font-size:.9rem;font-weight:750;cursor:pointer;box-shadow:var(--shadow-lift)}
      .gallery--collage .gallery-more:hover{background:var(--surface)}
    }
    .gallery-dialog{border:0;border-radius:var(--radius-lg);padding:0;width:min(940px,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);background:var(--surface);color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.35)}
    .gallery-dialog::backdrop{background:rgba(12,10,8,.6);backdrop-filter:blur(3px)}
    .gallery-dialog-close{position:sticky;top:.6rem;margin-left:auto;margin-right:.6rem;z-index:1;display:block;width:2.2rem;height:2.2rem;border:0;border-radius:999px;background:color-mix(in srgb,var(--background) 85%,transparent);color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer}
    .gallery-dialog-list{display:grid;gap:.5rem;padding:0 .75rem .75rem}
    .gallery-dialog-list img{width:100%;height:auto;border-radius:var(--radius-sm)}
    .amenity-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--space-4);align-items:start}
    /* Ausstattung als getoente Bereichskarten (GuestReady-Muster) statt
       einzelner Pillen pro Eintrag — eine Flaeche pro Bereich, ruhige Liste. */
    .amenity-group{background:var(--surface-muted);border-radius:var(--radius-lg);padding:1.15rem 1.25rem}
    .amenity-group h3{margin:0 0 .7rem;font-family:var(--heading);font-size:var(--step-0);letter-spacing:.01em}
    .amenities{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}.amenities li{min-width:0;display:flex;align-items:center;gap:.65rem;padding:.1rem 0}.amenities li svg{flex:none;color:var(--accent)}.amenities li span{min-width:0;overflow-wrap:anywhere}
    /* Faktenband als Chip-Reihe, die auf Desktop in die Hero-Unterkante
       ragt — die vier Zahlen stehen im ersten Bildschirm. */
    .facts-band{display:flex;flex-wrap:wrap;gap:.6rem;padding:0;background:none}
    .facts-band .fact{display:flex;align-items:center;gap:.6rem;font-size:var(--step-0);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:.6rem 1rem;box-shadow:var(--shadow-card)}.facts-band .fact svg{flex:none;color:var(--accent)}.facts-band .fact b{font-variant-numeric:tabular-nums}
    .hero-cover+.facts-band{position:relative;z-index:3;margin-top:-1.25rem}
    @media(min-width:900px){.hero-cover+.facts-band{margin-top:-1.7rem}}
    /* Persistent booking CTA: bottom bar in the mobile thumb zone, floating
       card on desktop. The anchor target scrolls with headroom; smooth only
       when motion is welcome. */
    .booking{scroll-margin-top:2rem}
    @media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
    /* Untere Navigation fürs Handy — Daumenzone statt Kopfleiste. Ab 760 px
       übernimmt wieder die Kopfnavigation; die Leiste verschwindet ganz. */
    .bottom-nav{display:none}
    @media (max-width:760px){
      /* Schwebende Glas-Pille wie die TabBar der Swiss-Activities-App: 60 px
         hoch, voll gerundet, 16 px Seitenabstand, und sie ueberlappt die
         Home-Indicator-Zone statt am Rand zu kleben (App: BAR_HEIGHT 60,
         H_MARGIN 16, max(12, safeArea - 20)). */
      .bottom-nav{position:fixed;left:1rem;right:1rem;bottom:max(.75rem,calc(env(safe-area-inset-bottom) - 1.25rem));z-index:46;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;height:3.75rem;border-radius:1.875rem;background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid var(--border);box-shadow:0 8px 20px rgba(20,16,12,.28)}
      /* Ohne Backdrop-Filter waere die Pille durchsichtig statt milchig. */
      @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.bottom-nav{background:color-mix(in srgb,var(--surface) 96%,transparent)}}
      .bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.4rem .25rem;text-decoration:none;font-size:.66rem;font-weight:650;line-height:1.1;color:var(--muted-text)}
      .bottom-nav a svg{flex:none;width:1.125rem;height:1.125rem}
      .bottom-nav a[aria-current="page"]{color:var(--primary-text)}
      .bottom-nav a:active{transform:scale(.96)}
      .bottom-nav .bottom-nav-book{background:var(--primary);color:var(--on-primary);margin:.375rem;border-radius:1.5rem}
      .bottom-nav .bottom-nav-book svg{color:var(--on-primary)}
      /* Die Pille schwebt — ohne eigenen Radius wuerde der Buchen-Block ueber
         die Rundung hinauslaufen. */
      .bottom-nav>:first-child{border-top-left-radius:1.875rem;border-bottom-left-radius:1.875rem}
      .bottom-nav>:last-child:not(.bottom-nav-book){border-top-right-radius:1.875rem;border-bottom-right-radius:1.875rem}
      /* Die Leiste trägt den Buchungsweg schon — zwei Balken übereinander
         hätten sich verdeckt. */
      .has-bottom-nav .booking-cta{display:none}
      /* App-Mass: Pille 60 + Abstand unten 12 + Luft darueber 12 = 84 px. Der
         zweite Selektor muss mit: .has-booking-cta setzt spaeter im Stylesheet
         96px und gewaenne sonst. */
      .has-bottom-nav,.has-bottom-nav.has-booking-cta{padding-bottom:calc(5.25rem + env(safe-area-inset-bottom))}
      /* Auf dem Handy traegt die untere Leiste die Navigation, und die
         Wortmarke wiederholt nur die H1 im Bild — der Kopf ueber dem Hero
         entfaellt, statt sich auf die Hero-Copy zu legen. */
      .site-header--over{display:none}
      .has-bottom-nav .site-footer{margin-bottom:.5rem}
      /* Kopfnavigation ist neben der unteren Leiste doppelt — und kostete auf
         dem Handy fast ein Drittel des ersten Bildschirms. Der Kopf behält
         nur die Wortmarke. */
      .has-bottom-nav .site-header .site-nav{display:none}
      .has-bottom-nav .header-inner{padding:.75rem 1.1rem}
    }
    @media (prefers-reduced-motion:reduce){.bottom-nav a:active{transform:none}}
    .has-booking-cta{padding-bottom:96px}
    .booking-cta{position:fixed;inset:auto 0 0 0;z-index:45;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem max(1rem,env(safe-area-inset-right)) max(.8rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--border)}
    .booking-cta.is-parked{opacity:0;pointer-events:none;transition:opacity .2s ease}
    .booking-cta-copy{min-width:0;display:grid;gap:.1rem;line-height:1.3}.booking-cta-copy b{font-size:.95rem;overflow-wrap:anywhere}.booking-cta-copy small{font-size:.72rem;color:var(--muted-text)}
    .booking-cta .button{flex:none;min-height:48px;padding:.85rem 1.4rem}
    @media(min-width:1000px){.has-booking-cta{padding-bottom:0}.booking-cta{inset:auto 1.6rem 1.6rem auto;max-width:340px;flex-direction:column;align-items:stretch;text-align:left;gap:.7rem;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-float);padding:1.15rem 1.25rem}.booking-cta .button{width:100%}.booking-cta-copy b{font-size:var(--step-1)}}
    /* Analog grain over the whole page — the anti-template, anti-AI texture.
       Data-URI turbulence, so the CSP never sees an external asset; sits below
       the sticky chrome and never intercepts a tap. */
    body::after{content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
    /* Photos dim slightly on dark grounds; the cover scrim deepens so white
       hero copy keeps its contrast. */
    @media(prefers-color-scheme:dark){img{filter:brightness(.9)}.hero-scrim{background:linear-gradient(180deg,rgba(8,7,5,.5) 0%,rgba(8,7,5,.2) 30%,rgba(8,7,5,.8) 100%),linear-gradient(90deg,rgba(8,7,5,.45) 0%,rgba(8,7,5,.1) 46%,transparent 72%)}body::after{opacity:.07}}
    /* Scroll reveals: compositor-driven, no JS, and only where both the engine
       and the visitor welcome motion. Firefox and reduced-motion users get the
       finished page, never a hidden one. */
    @media(prefers-reduced-motion:no-preference){@supports (animation-timeline: view()){
      main>.module{animation:site-reveal auto linear both;animation-timeline:view();animation-range:entry 0% entry 28%}
      @keyframes site-reveal{from{opacity:.001;transform:translateY(18px)}to{opacity:1;transform:none}}
    }}
    .content-cards{min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:1.1rem}
    .experience-grid{min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:1rem}
    /* Karten-Anatomie der ds-ActivityCard: ruhige Karte mit Hairline und
       flachem Schatten, Bild 12 px eingerueckt, Hover-Lift nur auf echten
       Pointern. Der Akzentbalken oben ist Geschichte — Akzent traegt jetzt
       nur noch, was Bedeutung hat (Eyebrow, Icons, Fokus). */
    .content-card{min-width:0;height:100%;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;border:1px solid var(--border);box-shadow:var(--shadow-card);transition:box-shadow .2s ease,transform .2s ease}
    .content-card img{width:calc(100% - 1.5rem);margin:.75rem .75rem 0;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:calc(var(--radius-lg) - .4rem)}
    .content-card>div{min-width:0;flex:1;display:grid;gap:.4rem;padding:1rem 1.05rem 1.15rem}
    @media(hover:hover) and (min-width:1024px){.content-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}}
    .content-card h3{margin:0;font-size:var(--step-1)}
    .content-card p{margin:0;font-size:.92rem;line-height:1.55;color:var(--muted-text);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
    [data-module-id="property-spaces"] .content-card img,[data-module-id="region-seasons"] .content-card img{height:230px}
    /* Wegweiser-Kacheln der Landingpage: zwei grosse Bildkarten, deren ganze
       Flaeche ein Ziel ist — der Link darunter wird zum Pfeil-Schlusspunkt. */
    [data-module-id="home-explore"] .content-cards{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:1.25rem}
    [data-module-id="home-explore"] .content-card img{width:100%;margin:0;aspect-ratio:16/9;border-radius:0}
    [data-module-id="home-explore"] .content-card>div{padding:1.15rem 1.25rem 1.3rem}
    [data-module-id="home-explore"] .content-card h3{font-size:var(--step-2)}
    [data-module-id="home-explore"] .content-card a{font-weight:750;color:var(--primary-text);text-decoration:none;margin-top:.35rem}
    [data-module-id="home-explore"] .content-card a::after{content:' →'}
    [data-module-id="home-explore"] .content-card a:hover{text-decoration:underline;text-underline-offset:3px}
    /* ds-ActivityCard-Anatomie (ds.swissactivities.com): ruhige Karte ohne
       Akzentbalken, 4:3-Bild, Titel, Rating, Preisfuss hinter Trennlinie. */
    /* position:relative ist Pflicht: die .sr-only-Spans der Bewertung sind
       absolut positioniert und haengen sonst am Dokument statt an der Karte.
       In der horizontal scrollenden Reihe entkommen sie damit dem Clipping und
       blaehen die Seite auf Kartenposition + Breite auf (gemessen 1004px statt
       440px) — iOS Safari weitet daraufhin den Viewport und zoomt die ganze
       Seite auf 44% heraus. */
    .experience-card{position:relative;min-width:0;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-card);transition:box-shadow .15s ease,transform .15s ease}
    @media(hover:hover) and (min-width:1024px){.experience-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}}
    @media (prefers-reduced-motion:reduce){.experience-card,.experience-card:hover,.content-card,.content-card:hover{transform:none}}
    .not-found{max-width:var(--content-max);margin:0 auto;padding:var(--space-8) var(--space-4);text-align:center;display:grid;gap:var(--space-3);justify-items:center}
    .not-found h1{font-family:var(--heading);font-size:var(--step-4);margin:0}
    /* Ausdruck: Karten-Reihen auflösen (sonst druckt nur die erste Spalte),
       Live-Module und Sticky-CTA weglassen, Farbflächen sparen. */
    @media print{
      .experience-row{display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,1fr);grid-auto-columns:auto;overflow:visible}
      .booking-cta,.skip-link,.site-search,.chat-form,.suggestions,.experience-book,.experience-dialog,.gallery-dialog,.gallery-more{display:none}
      /* color:inherit muss mit: die ins Bild gelegte Leiste schreibt weiss,
         auf Papier waere das unsichtbar. */
      .site-header{position:static;color:inherit}
      .contact,.weather-module,.live-module.weather-module{background:none;color:var(--text);padding:0}
      .experience-card,.content-card{break-inside:avoid;box-shadow:none}
      a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;word-break:break-all}
    }
    .experience-open{display:flex;flex-direction:column;flex:1;min-width:0;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.experience-open--static{cursor:default}.experience-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    .experience-media{display:block;aspect-ratio:4/3;background:var(--surface-muted)}.experience-media img{width:100%;height:100%;object-fit:cover;display:block}.experience-media-fallback{display:flex;height:100%;align-items:center;justify-content:center;color:var(--muted-text)}
    .experience-media--broken{background:var(--surface-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23909090' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 3 4 8 5-5 5 15H2L8 3z'/%3E%3C/svg%3E") center/2.4rem no-repeat}
    .experience-body{min-width:0;display:flex;flex-direction:column;gap:.3rem;padding:1rem .9rem .9rem;flex:1}.experience-title{font-weight:650;font-size:1.02rem;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
    .experience-fact{min-width:0;display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--muted-text)}.experience-fact svg{flex:none;color:color-mix(in srgb,var(--text) 45%,transparent)}
    /* Nicht buchbar heisst: kein Preisfuss, kein Rating — dafuer der Faktenblock
       des Design-Systems (Ort · Distanz, Zeitraum, Kategorie) in 12px/6px. */
    .experience-card--poi .experience-body{gap:.375rem}
    .experience-card--poi .experience-fact{font-size:.75rem;gap:.375rem;line-height:1.4;color:var(--muted-text)}
    .experience-rating{display:flex;align-items:center;gap:.3rem;margin-top:.1rem;font-size:.85rem;color:var(--muted-text)}.experience-star{width:.95em;height:.95em;color:#f5b942}
    .experience-subtitle{font-size:.85rem;color:var(--muted-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .experience-note{font-size:.85rem;font-style:italic;color:var(--primary-text)}
    .experience-foot{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;padding:.75rem .9rem .85rem;margin-top:auto;border-top:1px solid var(--border)}.experience-price-label{font-size:.85rem;color:var(--muted-text)}.experience-price{font-weight:750;font-size:1.02rem;color:var(--text)}
    .experience-book{padding:0 1rem 1rem}.experience-book swiss-activities-widget{display:block}
    .experience-dialog{border:0;border-radius:var(--radius-lg);padding:0;max-width:min(560px,calc(100vw - 2rem));width:100%;background:var(--surface);color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.35)}
    .experience-dialog::backdrop{background:rgba(12,10,8,.55);backdrop-filter:blur(3px)}
    .experience-dialog-close{position:absolute;top:.6rem;right:.6rem;z-index:1;width:2.2rem;height:2.2rem;border:0;border-radius:999px;background:color-mix(in srgb,var(--background) 82%,transparent);color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer}
    .experience-dialog-media{aspect-ratio:16/9;background:var(--surface-muted)}.experience-dialog-media img{width:100%;height:100%;object-fit:cover}
    .experience-dialog-body{display:grid;gap:.55rem;padding:1.2rem 1.3rem 1.4rem}
    .experience-dialog-title{margin:0;font-family:var(--heading);font-size:var(--step-2);line-height:1.2}
    .experience-dialog-facts{margin:0;color:var(--muted-text)}.experience-dialog-facts[hidden],.experience-dialog-stats[hidden]{display:none}
    .experience-dialog-stats{margin:0;font-weight:700}
    .experience-dialog-book swiss-activities-widget{display:block;margin-top:.4rem}
    .experience-featured-list{min-width:0;display:grid;gap:1rem;margin:1.4rem 0 1.6rem}
    .experience-featured{min-width:0;display:grid;grid-template-columns:minmax(150px,240px) 1fr;background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;border:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 12px 32px -20px color-mix(in srgb,var(--accent) 50%,transparent)}
    .experience-featured-media{min-height:100%}.experience-featured-media img{width:100%;height:100%;object-fit:cover;display:block}
    .experience-featured-body{min-width:0;display:flex;flex-direction:column;gap:.55rem;padding:1.1rem 1.2rem}
    /* Badge-Schrift dunkler als der Akzent selbst: auf der 12%-Waschung muss
       sie 4.5:1 halten, was kraeftige Akzentfarben allein nicht schaffen. */
    .experience-featured-badge{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 68%,var(--text));background:color-mix(in srgb,var(--accent) 12%,transparent);padding:.3rem .65rem;border-radius:999px}
    .experience-featured-title{font-family:var(--heading);font-size:1.25rem;font-weight:750;color:inherit;text-decoration:none;line-height:1.25}
    .experience-featured-note{margin:0;font-style:italic;color:var(--muted-text);line-height:1.5}
    .experience-featured-meta{display:flex;align-items:baseline;gap:.9rem}
    .experience-featured .experience-book{padding:0;margin-top:.3rem}
    /* Der Erlebnis-Feed steht frei auf der Seite: als eine grosse weisse Box
       las sich die ganze Region-Seite wie ein einziger Datenblock. Die Karten
       selbst bleiben Flächen — der Rhythmus kommt aus den Sektionstiteln. */
    .live-module[data-live-module="discovery"]{background:transparent;border:0;border-radius:0;padding:0}
    .experience-section{min-width:0;margin-top:2.8rem}.experience-section:first-of-type{margin-top:1.5rem}.experience-section h3{margin:0 0 1.1rem;font-family:var(--heading);font-size:var(--step-2);letter-spacing:-.015em}
    .experience-row{min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:min(300px,80vw);gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:.15rem .15rem 1rem;margin:-.15rem -.15rem 0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 25%,transparent) transparent}
    .experience-row .experience-card{scroll-snap-align:start}
    /* Anschnitt der naechsten Karte: ohne ihn wirkt die Reihe auf dem Handy wie
       eine einspaltige Liste und 5 von 6 Karten bleiben unentdeckt. Muss nach
       der Basisregel stehen — sonst gewinnt deren min(300px,80vw). */
    @media (max-width:640px){.experience-row{grid-auto-columns:82vw}}
    .faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:1rem 1.2rem;margin:.7rem 0}.faq summary{font-weight:750;cursor:pointer}.contact,.weather-module{background:var(--primary);color:var(--on-primary);border-radius:var(--radius-xl);padding:clamp(1.5rem,5vw,4rem);display:flex;justify-content:space-between;gap:2rem;align-items:center}.contact-head .button-primary{background:var(--surface);color:var(--primary-text)}
    .live-module,.concierge{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:clamp(1.25rem,4vw,3rem)}.live-module.weather-module{background:var(--primary);color:var(--on-primary)}.weather-module .eyebrow{color:var(--on-primary)}.weather-result{font-size:var(--step-1);font-weight:750}.weather-attribution{display:block;margin-top:.35rem;font-size:.75rem;font-weight:400;opacity:.8}.module-heading{min-width:0;display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.live-badge{flex:0 0 auto;border:1px solid color-mix(in srgb,var(--primary-text) 50%,transparent);color:var(--primary-text);border-radius:999px;padding:.25rem .6rem;font-size:.75rem;font-weight:800}.site-search,.chat-form{min-width:0;display:flex;gap:.6rem}.site-search input,.chat-form input{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-btn);padding:.85rem 1rem;font:inherit;background:var(--background);color:var(--text)}.search-results{min-width:0;margin-top:1rem;display:grid;gap:.6rem}.search-result{min-width:0;display:block;width:100%;padding:1rem;border:0;border-radius:var(--radius-md);background:var(--background);color:inherit;font:inherit;text-align:left;cursor:pointer}.suggestions{min-width:0;display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0}.suggestions button{min-width:0;max-width:100%;overflow-wrap:anywhere;border:1px solid var(--border);border-radius:999px;background:transparent;padding:.55rem .8rem;color:inherit;cursor:pointer}.chat-log{min-width:0;display:grid;gap:.7rem;max-height:360px;overflow:auto;margin:1rem 0}.chat-message{min-width:0;overflow-wrap:anywhere;padding:.8rem 1rem;border-radius:var(--radius-md);max-width:85%;white-space:pre-wrap}.chat-user{background:var(--primary);color:var(--on-primary);margin-left:auto}.chat-assistant{background:var(--background)}.module-empty{color:var(--text)}
    .preview-banner{position:sticky;top:0;z-index:40;background:#15110c;color:#fff;text-align:center;padding:.55rem;font-weight:750}.preview-banner+.site-header{position:relative;top:auto}
    /* In der Vorschau liegt der Hinweisstreifen darueber — die ins Bild
       gelegte Leiste rueckt um dessen Hoehe (.55rem Polster + Zeile) nach
       unten, sonst verdeckt sie ihn. */
    .preview-banner+.site-header--over{position:absolute;top:2.5rem}.site-footer{margin-top:var(--space-8);background:var(--surface-muted);border-top:1px solid var(--border)}.footer-inner{max-width:var(--content-max);margin:auto;padding:2.25rem 1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}.footer-inner a,.footer-powered{font-weight:750}.footer-powered{color:var(--muted-text)}
    @media(max-width:760px){.site-header{position:static}.header-inner{align-items:flex-start;flex-direction:column}.site-nav{max-width:100%;flex-wrap:wrap}.hero{grid-template-columns:1fr;min-height:auto}.hero-cover{min-height:70vh;border-radius:var(--radius-lg)}.hero-media{order:-1}.hero-media img{aspect-ratio:16/10}.contact,.weather-module{align-items:flex-start;flex-direction:column}.site-search,.chat-form{align-items:stretch;flex-direction:column}.site-search .button,.chat-form .button{width:100%}.experience-featured{grid-template-columns:1fr}.experience-featured-media{aspect-ratio:16/9}}
  
    body[data-template="alpin_chalet"] .module h1,body[data-template="alpin_chalet"] .module h2{letter-spacing:-.02em}
    body[data-template="alpin_chalet"] .hero-media img{box-shadow:0 18px 44px color-mix(in srgb,var(--primary) 32%,transparent)}
  
    body[data-template="modern"] .module h1{letter-spacing:-.055em}
    body[data-template="modern"] .module h2{letter-spacing:-.045em}
    body[data-template="modern"] .eyebrow{letter-spacing:.18em}
    body[data-template="modern"] .eyebrow::before{border-radius:0}
    body[data-template="modern"] .hero-media img{box-shadow:none}
  
    body[data-template="boutique"] .module h1,body[data-template="boutique"] .module h2{letter-spacing:-.015em;line-height:1.12}
    body[data-template="boutique"] .module h2::after{content:'';display:block;width:3.5rem;height:2px;background:var(--accent);margin-top:.9rem}
    body[data-template="boutique"] .eyebrow{letter-spacing:.22em}
    body[data-template="boutique"] .hero-media img{border-radius:12rem 12rem 1rem 1rem}
    body[data-template="boutique"] .module{margin:clamp(1.6rem,3.5vw,3rem) 0}
  
    body[data-template="classic_hotel"] .module h1{font-size:clamp(2.4rem,6vw,4.6rem);letter-spacing:-.015em}
    body[data-template="classic_hotel"] .module h2{font-size:clamp(1.8rem,4vw,2.9rem);letter-spacing:-.01em}
    body[data-template="classic_hotel"] .site-nav a{text-transform:uppercase;font-size:.82rem;letter-spacing:.08em}
    body[data-template="classic_hotel"] .hero-media img{box-shadow:0 20px 50px color-mix(in srgb,var(--text) 25%,transparent)}
  
    body[data-template="swiss_minimal"] .module h1{letter-spacing:-.04em}
    body[data-template="swiss_minimal"] .module h2{letter-spacing:-.03em}
    body[data-template="swiss_minimal"] .eyebrow{letter-spacing:.2em}
    body[data-template="swiss_minimal"] .eyebrow::before{border-radius:0}
    body[data-template="swiss_minimal"] .hero-media img{box-shadow:none}
  
    body[data-template="editorial"] .module h1,body[data-template="editorial"] .module h2{letter-spacing:-.015em;line-height:1.1}
    body[data-template="editorial"] .module h2::after{content:'';display:block;width:3rem;height:2px;background:var(--accent);margin-top:.8rem}
    body[data-template="editorial"] .eyebrow{letter-spacing:.2em}
  
    body[data-template="biophilic"] .module h1,body[data-template="biophilic"] .module h2{letter-spacing:-.02em}
    body[data-template="biophilic"] .hero-media img{box-shadow:0 18px 44px color-mix(in srgb,var(--primary) 26%,transparent)}
  
    body[data-template="riviera"] .module h1,body[data-template="riviera"] .module h2{letter-spacing:-.025em}
    body[data-template="riviera"] .hero-media img{box-shadow:0 16px 40px color-mix(in srgb,var(--accent) 24%,transparent)}
  
    body[data-template="midnight"] .module h1{letter-spacing:-.02em}
    body[data-template="midnight"] .module h2{letter-spacing:-.01em}
    body[data-template="midnight"] .site-nav a{letter-spacing:.04em}
    body[data-template="midnight"] .hero-media img{box-shadow:0 20px 50px color-mix(in srgb,var(--text) 30%,transparent)}
  
    body[data-template="bento"] .module h1,body[data-template="bento"] .module h2{letter-spacing:-.03em}
  
    body[data-template="luxus"] .module h1,body[data-template="luxus"] .module h2{letter-spacing:-.01em;line-height:1.12}
    body[data-template="luxus"] .module h2::after{content:'';display:block;width:2.75rem;height:2px;background:var(--accent);margin-top:.85rem}
    body[data-template="luxus"] .eyebrow{letter-spacing:.22em}
  
    body[data-template="vintage"] .eyebrow{letter-spacing:.16em}
    body[data-template="vintage"] .module h1,body[data-template="vintage"] .module h2{letter-spacing:0}
  
    body[data-template="salbei"] .eyebrow{letter-spacing:.18em}
  
    body[data-template="tangerine"] .module h1,body[data-template="tangerine"] .module h2{letter-spacing:-.03em}
  
    body[data-template="graphit"] .eyebrow{letter-spacing:.2em}
    body[data-template="graphit"] .eyebrow::before{border-radius:0}
    body[data-template="graphit"] .hero-media img{box-shadow:none}