body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
.glightbox-container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999!important;overflow:hidden;-ms-touch-action:none;touch-action:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;outline:0}.glightbox-container.inactive{display:none}.glightbox-container .gcontainer{position:relative;width:100%;height:100%;z-index:9999;overflow:hidden}.glightbox-container .gslider{-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;height:100%;left:0;top:0;width:100%;position:relative;overflow:hidden;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.glightbox-container .gslide{width:100%;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0}.glightbox-container .gslide.current{opacity:1;z-index:99999;position:relative}.glightbox-container .gslide.prev{opacity:1;z-index:9999}.glightbox-container .gslide-inner-content{width:100%}.glightbox-container .ginner-container{position:relative;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100%;margin:auto;height:100vh}.glightbox-container .ginner-container.gvideo-container{width:100%}.glightbox-container .ginner-container.desc-bottom,.glightbox-container .ginner-container.desc-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.glightbox-container .ginner-container.desc-left,.glightbox-container .ginner-container.desc-right{max-width:100%!important}.gslide iframe,.gslide video{outline:0!important;border:none;min-height:165px;-webkit-overflow-scrolling:touch;-ms-touch-action:auto;touch-action:auto}.gslide:not(.current){pointer-events:none}.gslide-image{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.gslide-image img{max-height:100vh;display:block;padding:0;float:none;outline:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100vw;width:auto;height:auto;-o-object-fit:cover;object-fit:cover;-ms-touch-action:none;touch-action:none;margin:auto;min-width:200px}.desc-bottom .gslide-image img,.desc-top .gslide-image img{width:auto}.desc-left .gslide-image img,.desc-right .gslide-image img{width:auto;max-width:100%}.gslide-image img.zoomable{position:relative}.gslide-image img.dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.gslide-video{position:relative;max-width:100vh;width:100%!important}.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster{display:none}.gslide-video .gvideo-wrapper{width:100%;margin:auto}.gslide-video::before{content:'';position:absolute;width:100%;height:100%;background:rgba(255,0,0,.34);display:none}.gslide-video.playing::before{display:none}.gslide-video.fullscreen{max-width:100%!important;min-width:100%;height:75vh}.gslide-video.fullscreen video{max-width:100%!important;width:100%!important}.gslide-inline{background:#fff;text-align:left;max-height:calc(100vh - 40px);overflow:auto;max-width:100%;margin:auto}.gslide-inline .ginlined-content{padding:20px;width:100%}.gslide-inline .dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.ginlined-content{overflow:auto;display:block!important;opacity:1}.gslide-external{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;min-width:100%;background:#fff;padding:0;overflow:auto;max-height:75vh;height:100%}.gslide-media{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto}.zoomed .gslide-media{-webkit-box-shadow:none!important;box-shadow:none!important}.desc-bottom .gslide-media,.desc-top .gslide-media{margin:0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gslide-description{position:relative;-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%}.gslide-description.description-left,.gslide-description.description-right{max-width:100%}.gslide-description.description-bottom,.gslide-description.description-top{margin:0 auto;width:100%}.gslide-description p{margin-bottom:12px}.gslide-description p:last-child{margin-bottom:0}.zoomed .gslide-description{display:none}.glightbox-button-hidden{display:none}.glightbox-mobile .glightbox-container .gslide-description{height:auto!important;width:100%;position:absolute;bottom:0;padding:19px 11px;max-width:100vw!important;-webkit-box-ordinal-group:3!important;-ms-flex-order:2!important;order:2!important;max-height:78vh;overflow:auto!important;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.75)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%);-webkit-transition:opacity .3s linear;transition:opacity .3s linear;padding-bottom:50px}.glightbox-mobile .glightbox-container .gslide-title{color:#fff;font-size:1em}.glightbox-mobile .glightbox-container .gslide-desc{color:#a1a1a1}.glightbox-mobile .glightbox-container .gslide-desc a{color:#fff;font-weight:700}.glightbox-mobile .glightbox-container .gslide-desc *{color:inherit}.glightbox-mobile .glightbox-container .gslide-desc .desc-more{color:#fff;opacity:.4}.gdesc-open .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:.4}.gdesc-open .gdesc-inner{padding-bottom:30px}.gdesc-closed .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.greset{-webkit-transition:all .3s ease;transition:all .3s ease}.gabsolute{position:absolute}.grelative{position:relative}.glightbox-desc{display:none!important}.glightbox-open{overflow:hidden}.gloader{height:25px;width:25px;-webkit-animation:lightboxLoader .8s infinite linear;animation:lightboxLoader .8s infinite linear;border:2px solid #fff;border-right-color:transparent;border-radius:50%;position:absolute;display:block;z-index:9999;left:0;right:0;margin:0 auto;top:47%}.goverlay{width:100%;height:calc(100vh + 1px);position:fixed;top:-1px;left:0;background:#000;will-change:opacity}.glightbox-mobile .goverlay{background:#000}.gclose,.gnext,.gprev{z-index:99999;cursor:pointer;width:26px;height:44px;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gclose svg,.gnext svg,.gprev svg{display:block;width:25px;height:auto;margin:0;padding:0}.gclose.disabled,.gnext.disabled,.gprev.disabled{opacity:.1}.gclose .garrow,.gnext .garrow,.gprev .garrow{stroke:#fff}.gbtn.focused{outline:2px solid #0f3d81}iframe.wait-autoplay{opacity:0}.glightbox-closing .gclose,.glightbox-closing .gnext,.glightbox-closing .gprev{opacity:0!important}.glightbox-clean .gslide-description{background:#fff}.glightbox-clean .gdesc-inner{padding:22px 20px}.glightbox-clean .gslide-title{font-size:1em;font-weight:400;font-family:arial;color:#000;margin-bottom:19px;line-height:1.4em}.glightbox-clean .gslide-desc{font-size:.86em;margin-bottom:0;font-family:arial;line-height:1.4em}.glightbox-clean .gslide-video{background:#000}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.75);border-radius:4px}.glightbox-clean .gclose path,.glightbox-clean .gnext path,.glightbox-clean .gprev path{fill:#fff}.glightbox-clean .gprev{position:absolute;top:-100%;left:30px;width:40px;height:50px}.glightbox-clean .gnext{position:absolute;top:-100%;right:30px;width:40px;height:50px}.glightbox-clean .gclose{width:35px;height:35px;top:15px;right:10px;position:absolute}.glightbox-clean .gclose svg{width:18px;height:auto}.glightbox-clean .gclose:hover{opacity:1}.gfadeIn{-webkit-animation:gfadeIn .5s ease;animation:gfadeIn .5s ease}.gfadeOut{-webkit-animation:gfadeOut .5s ease;animation:gfadeOut .5s ease}.gslideOutLeft{-webkit-animation:gslideOutLeft .3s ease;animation:gslideOutLeft .3s ease}.gslideInLeft{-webkit-animation:gslideInLeft .3s ease;animation:gslideInLeft .3s ease}.gslideOutRight{-webkit-animation:gslideOutRight .3s ease;animation:gslideOutRight .3s ease}.gslideInRight{-webkit-animation:gslideInRight .3s ease;animation:gslideInRight .3s ease}.gzoomIn{-webkit-animation:gzoomIn .5s ease;animation:gzoomIn .5s ease}.gzoomOut{-webkit-animation:gzoomOut .5s ease;animation:gzoomOut .5s ease}@-webkit-keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes gfadeIn{from{opacity:0}to{opacity:1}}@keyframes gfadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes gfadeOut{from{opacity:1}to{opacity:0}}@keyframes gfadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@-webkit-keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@-webkit-keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@-webkit-keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@media (min-width:769px){.glightbox-container .ginner-container{width:auto;height:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.glightbox-container .ginner-container.desc-top .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-top .gslide-image,.glightbox-container .ginner-container.desc-top .gslide-image img{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.glightbox-container .ginner-container.desc-left .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-left .gslide-image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.gslide-image img{max-height:97vh;max-width:100%}.gslide-image img.zoomable{cursor:-webkit-zoom-in;cursor:zoom-in}.zoomed .gslide-image img.zoomable{cursor:-webkit-grab;cursor:grab}.gslide-inline{max-height:95vh}.gslide-external{max-height:100vh}.gslide-description.description-left,.gslide-description.description-right{max-width:275px}.glightbox-open{height:auto}.goverlay{background:rgba(0,0,0,.92)}.glightbox-clean .gslide-media{-webkit-box-shadow:1px 2px 9px 0 rgba(0,0,0,.65);box-shadow:1px 2px 9px 0 rgba(0,0,0,.65)}.glightbox-clean .description-left .gdesc-inner,.glightbox-clean .description-right .gdesc-inner{position:absolute;height:100%;overflow-y:auto}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.32)}.glightbox-clean .gclose:hover,.glightbox-clean .gnext:hover,.glightbox-clean .gprev:hover{background-color:rgba(0,0,0,.7)}.glightbox-clean .gprev{top:45%}.glightbox-clean .gnext{top:45%}}@media (min-width:992px){.glightbox-clean .gclose{opacity:.7;right:20px}}@media screen and (max-height:420px){.goverlay{background:#000}}
/* ============================================================
Reset — Tags tragen KEINE Gestalt. Ein h2→p-Wechsel ändert
nichts; alles Sichtbare kommt aus Klassen (KWER-Standard).
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
ul, ol { list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
/* Prosa-Defaults NUR im RTE-Scope: Absatz- und Listenverhalten für Editoren */
.content-text p + p { margin-top: var(--space-sm, 1.5rem); }
.content-text:not([class*=" "]) a { text-decoration: underline; } /* nur unklassierte Fließtexte */
/* Contao rendert Sprunglinks („Navigation überspringen") mit .invisible.
Ohne Core-CSS wären sie sichtbar — hier korrekt visuell ausblenden,
für Screenreader/Tastatur aber erreichbar halten. */
.invisible {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ============================================================
Breitlehenalm Redesign 2026 — Design-Tokens & Basis
KWER · Quelle: XD 26_KWER_SD_Breitlehenalm_V03
Prozentwerte/Clamps mit „gemessen“-Kommentar stammen aus der
Pixel-Messung des Design-Stitches (1920px-Referenz).
Breakpoint der Site: 991px.
============================================================ */
:root {
/* Farben */
--c-green: #666E5E;
--c-beige: #FAF7F5;
--c-ink: #121212;
--c-white: #FFFFFF;
--c-sage: #B4CFAB; /* Hover-Tint fuer weisse Icons/Pfeile — helles Salbei aus der Gruen-Familie */
/* --c-sage als filter-Kette (Icons sind ![]()
): erst brightness(0), dann Farbe aufbauen */
--sage-filter: brightness(0) invert(76%) sepia(14%) saturate(400%) hue-rotate(60deg);
/* Schriften — PP-Webfonts folgen, bis dahin Fallback-Stack */
--ff-display: "PP Right Didone", Didot, "Bodoni MT", "Times New Roman", serif;
--ff-body: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;
--ff-script: "The Billion Monoline", "Snell Roundhand", cursive;
/* Typo-Skala (1920er-Design → fluid) */
/* Alle Werte aus dem Design gemessen (Zeilen-Pitch ÷ 1.05) */
/* Alle Grade + Zeilenhöhen direkt aus dem XD-Spec-Panel (Regel: Zeilenhöhe = Grad − 10px) */
--fs-hero: clamp(2.75rem, 7.8vw, 9.375rem); /* 150/140 — Hero Startseite */
--fs-hero-fluid: max(2.75rem, 7.8vw); /* wie fs-hero, waechst aber ueber 1920 hinaus (User 05.08.) */
--fs-display-1-fluid: max(2.4rem, 6.25vw); /* wie fs-display-1, ohne Cap */
--fs-display-1: clamp(2.4rem, 6.25vw, 7.5rem); /* 120/110 — Seitentitel Startseite + Hero Unterseiten */
--fs-display-2: clamp(2rem, 4.17vw, 5rem); /* 80/70 — Sektions-Headlines + Unterseiten-H1 */
--fs-display-3: clamp(1.75rem, 3.125vw, 3.75rem); /* 60/50 — Kartentitel */
--fs-display-2s: clamp(1.85rem, 3.65vw, 4.375rem); /* 70/60 — Zwischentitel */
--fs-lead-lg: clamp(1.4rem, 1.98vw, 2.375rem); /* 38 — großer Vorspann */
--fs-foot-nav: clamp(1.15rem, 1.46vw, 1.75rem); /* 28/28 — Footer-Hauptnavigation (XD-Spec) */
--fs-lead: clamp(1.125rem, 1.6vw, 1.5625rem); /* 25 */
--fs-body: clamp(1.0625rem, 1.15vw, 1.375rem); /* 22 */
--fs-small: 1.125rem; /* 18 */
/* Abstände */
--space-2xs: .5rem;
--space-xs: 1rem;
--space-sm: 1.5rem;
--space-md: 2.5rem;
--space-lg: 4rem;
--space-xl: 6.5rem;
--space-2xl: clamp(5rem, 11vw, 12.5rem);
/* Satzspiegel: 1840px Inhalt @1920 (gemessen: 40px Außenabstand) */
--wrap-max: 150rem;
--wrap-pad: clamp(1.25rem, 2.1vw, 2.5rem);
/* Icon-Größen (gemessen) */
--icon-fact: 17px;
--icon-social: 22px;
--icon-rail: 22px; /* gemessen im Design (Icons 19-22) */
--burger-w: 30px;
/* Zimmerkarten: dieselben Stufen fuer Raster und Rail.
--room-cols = volle Spalten, --room-rail-cols erlaubt den Peek auf Mobil. */
--room-cols: 1;
--room-rail-cols: 1.15;
--room-gap: 24px;
--room-img-ar: 1.2; /* Bildgroesse „Karte 6:5" */
/* Pfeil-Abstand zur Bildkante: 30 @1920 (gemessen). Rail und Kontakt-Leiste
haengen beide an der rechten Inhaltskante, deshalb nie naeher als Rail + Luft. */
--room-nav-inset: max(clamp(.9rem, 1.56vw, 1.875rem), calc(var(--icon-rail) + .5rem));
/* Slider-Pfeile (Optik einheitlich, Herkunft: Bildslider) */
--arrow-box: clamp(1.75rem, 2.29vw, 2.75rem); /* 44 @1920, skaliert mit */
--arrow-glyph: clamp(1.5rem, 2.08vw, 2.5rem); /* XD: Chevron 41 hoch @1920 */
--arrow-pitch: clamp(1.25rem, 1.77vw, 2.125rem); /* Luecke ~13px, proportional */
--gap-media: clamp(2.5rem, 6.5vw, 9rem); /* Spaltenabstand Zweispalter — leicht erhoeht 18.08. (User Katja: Text zu nah an Bildern), vorher 2rem/6vw/8rem */
}
/* Kartenstufen: 3 Spalten ab 1400, 2 ab 768, darunter 1 (Rail mit Peek).
Gelten fuer Raster UND Rail - eine Quelle. */
@media (min-width: 768px) { :root { --room-cols: 2; --room-rail-cols: 2; --room-gap: 32px; } }
@media (min-width: 1400px) { :root { --room-cols: 3; --room-rail-cols: 3; --room-gap: 38px; } } /* 38 = gemessen im Design */
/* --- PP-Webfonts (Dateien seit 04.08. in files/fonts/) --- */
@font-face { font-family: "PP Right Didone"; src: url("../../files/fonts/PPRightDidone-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("../../files/fonts/PPNeueMontreal-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("../../files/fonts/PPNeueMontreal-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("../../files/fonts/PPNeueMontreal-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* ============================================================
Basis
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* In-Text-Links (RTE-Prosa) muessen als Links erkennbar sein (User 05.08., Lage & Anreise) */
.rte a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.rte a:hover { text-decoration-thickness: 2px; }
.site-foot .rte a:not(:hover) { text-decoration: none; } /* Footer behaelt seine eigene Link-Sprache */
body {
margin: 0;
font-family: var(--ff-body);
font-size: var(--fs-body);
line-height: 1.455; /* XD: 22/32 */
letter-spacing: .03em; /* XD: Zeichenabstand 30 auf ALLEN Montreal-Texten */
color: var(--c-ink);
background: var(--c-white);
-webkit-font-smoothing: antialiased;
}
/* em-letter-spacing vererbt als px -> auf abweichenden Groessen neu deklarieren (skaliert dann mit) */
.lead, .lead-lg, .eyebrow, .eyebrow-line, .mod_breadcrumb,
.foot-legal ul, .foot-col-legal .foot-copy p, .room-facts--intro, .tile-cap p {
letter-spacing: .03em;
}
img { max-width: 100%; height: auto; display: block; }
/* ============================================================
Sektionen (Klassen am Artikel bzw. an der Elementgruppe)
============================================================ */
.sec { --sec-pad: clamp(2.5rem, 5.2vw, 6.25rem); position: relative; padding-block: var(--sec-pad); } /* weiß: 100 @1920 (gemessen) */
.sec--green, .sec--beige { --sec-pad: clamp(1.5rem, 2.2vw, 2.6rem); padding-block: var(--sec-pad); } /* farbig: 40 @1920 (gemessen) */
.sec--compact { --sec-pad: clamp(1.5rem, 2.2vw, 2.6rem); } /* weiße Sektion mit dem kompakten Farb-Sektions-Padding (gleicher Rhythmus/Bildgröße neben beigen Sektionen, User 20.08.) */
.sec--green { background: var(--c-green); color: var(--c-white); }
.sec--beige { background: var(--c-beige); }
/* Textfarben-Grundregel (User 20.08.: „never black on beige"): auf beige IMMER grün,
auf grün weiß (oben), auf weiß schwarz (body-Default). Deckt .sec--beige UND die
eigenständig beige Preis-/Zusatzinfo-Sektion (season-sec) ab. Headlines/Body/Pill-Ränder
erben currentColor -> alles folgt automatisch, keine text-green-Klasse je Element nötig. */
.sec--beige,
.sec.room-weitere,
.sec:has(> .wrap.intro-split.season-sec) { color: var(--c-green); }
.sec--flush { --sec-pad: 0rem; padding-block: 0; }
/* Oberes Padding weg: zwei weisse Sektionen stapeln sonst 2x Padding (Skala 200) — nur wo gewollt eng (Home Intro -> Lageplan, User 17.09.) */
.sec--no-pad-top { padding-top: 0; }
/* Rhythmus-Vereinheitlichung (User 06.08., Skala 140/200/180): pad-lg (85) und
pad-y-xl (XD 183) auf das Standard-Sektions-Padding normalisiert — die Klassen
bleiben im Backend vergeben, wirken aber nicht mehr abweichend. */
.pad-lg { padding-block: var(--sec-pad); }
.pad-y-xl { padding-block: var(--sec-pad); }
/* Farbband auf Farbband: beide Pads (2x42) ergeben nur ~84 Ink-Abstand — auf 140
anheben, ohne weissen Streifen (padding statt margin, Baender bleiben buendig) */
:is(.sec--green, .sec--beige) + :is(.sec--green, .sec--beige) { padding-top: calc(var(--sec-pad) + clamp(2rem, 2.95vw, 3.5rem)); }
/* Letzte Sektion vor dem Footer: einheitlich 180 (Zimmer-Detailseiten regelt .room-weitere) */
#main .mod_article:last-child:not(:has(.room-weitere)) { padding-bottom: clamp(4.5rem, 9.375vw, 11.25rem); }
/* Teaser-Sektion mit symmetrischem Abstand: oberer = unterer (Footer-Abstand). (User 20.08.) */
#main .mod_article.cta-symmetric { padding-top: clamp(4.5rem, 9.375vw, 11.25rem); }
/* Anker-Ziel auf WEISSEN Sektionen: Luft als margin-top statt padding-top — der Anker scrollt zur
Border-Box, landet also UNTER dem Margin knapp ueberm Inhalt; Rhythmus bleibt (margin+pad = alter pad).
⚠️ Nur fuer weiss-auf-weiss: bei farbigen Sektionen zeigt der Margin den Body-Hintergrund. */
.pad-t-sm { padding-top: var(--space-sm); }
.m-t-anchor { margin-top: clamp(2rem, 8.28vw, 9.94rem); }
.wrap {
max-width: var(--wrap-max);
margin-inline: auto;
padding-inline: var(--wrap-pad);
}
/* Zweispalter Bild|Text — Kinder: beliebige Core-Elemente */
.sec-media-text {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap-media);
align-items: center;
}
.sec-media-text > * { min-width: 0; }
.sec-media-text.is-reversed > *:first-child { order: 2; }
.sec-media-text .content-image img,
.sec-media-text .content-swiper img { width: 100%; }
.align-start { align-items: start; }
/* „Ein Platz voller Freude"-Intro auf der Zimmer-Übersicht: großzügiger Abstand über der
Headline und unter dem Text (wie Screendesign/Word-Doc). Scoped auf die EINZIGE beige
Sektion mit Raster (= dieser Intro-Block). Skaliert per clamp, mobil moderat. (User 19.08.) */
.sec--beige:has(.room-grid) .sec-media-text.align-start {
margin-top: clamp(3rem, 5.5vw, 6.5rem);
margin-bottom: clamp(4rem, 9.6vw, 11.5rem);
}
/* Nachhaltigkeit: reiner Text|Text-Zweispalter. Die Bloecke fuellen die 1fr-Spalte und behalten
damit EXAKT die Original-Spaltenbreite (Header bleiben einzeilig wie im Ausgangsdesign). Der
groessere Mittelabstand entsteht, indem die Sektion an den Bildschirmrand gezogen wird
(padding-inline runter auf einen schmalen Rand) und die zurueckgewonnene Randbreite komplett in
den column-gap wandert: gap = gap-media + 2*(wrap-pad - Rand). Dadurch sind die Bloecke bei JEDER
Viewportbreite gleich breit wie vor der Abstandsaenderung, nur der Mittelabstand waechst
(~86->139px @1440, ~187px @1920). Nur Desktop (>=992px); mobil unveraendert. (User katja, 18.08.) */
@media (min-width: 992px) {
.sec-media-text.sec-split-text {
padding-inline: var(--space-sm); /* war 4px -> Text klebte auf jeder Desktop-Breite am Bildschirmrand (User 17.09., Option A) */
column-gap: calc(var(--gap-media) + 2 * (var(--wrap-pad) - var(--space-sm)));
}
}
/* Flush-Zweispalter: Bild läuft bis ~30px an den Viewport-Rand (gemessen) */
.media-flush-left,
.media-flush-right {
position: relative;
display: grid;
align-items: center;
gap: clamp(2rem, 5vw, 7rem);
}
.media-flush-left > *, .media-flush-right > * { min-width: 0; }
.media-flush-left { grid-template-columns: minmax(0, 47.2%) minmax(0, 1fr); padding-left: clamp(.5rem, 1.56vw, 1.875rem); padding-right: var(--wrap-pad); } /* Bild 873 @1920 (gemessen) */
.media-flush-right { grid-template-columns: minmax(0, 1fr) minmax(0, 47.2%); padding-right: clamp(.5rem, 1.56vw, 1.875rem); padding-left: var(--wrap-pad); }
.media-flush--narrow { grid-template-columns: minmax(0, 37%) minmax(0, 1fr); } /* Winter-Bild 702 (gemessen) */
.media-flush-left > :last-child,
.media-flush-right > :first-child { max-width: 46rem; }
/* Flush-right: Textspalte startet links -> braucht den Design-Einzug (~183 @1920) auf Desktop,
sonst klebt sie am wrap-pad (User 05.08., gilt strukturell). narrow-r hat den Einzug schon als padding;
.sec--green-Varianten (Wellness/B&B, XD-vermessen 8.3%) ueberschreiben weiter unten — Reihenfolge nicht tauschen. */
.media-flush-right:not(.media-flush--narrow-r) > :first-child { margin-left: clamp(1.5rem, 8vw, 10rem); }
@media (max-width: 991px) { .media-flush-right:not(.media-flush--narrow-r) > :first-child { margin-left: 0; } }
.media-flush-left .content-image img,
.media-flush-left .content-swiper img,
.media-flush-right .content-image img,
.media-flush-right .content-swiper img { width: 100%; }
/* Grüne Sektionen: Textblock eingerückt + begrenzt (gemessen) */
.sec--green .media-flush-left > :last-child { max-width: 30rem; margin-left: 14%; }
.sec--green .media-flush-right > :first-child { max-width: 37rem; margin-left: 8.3%; }
.media-flush--narrow > :last-child { max-width: 50rem; margin-left: 7.5%; }
/* Apres-Ski: Bild mit 40er-Inset im gruenen Band (XD: 870x900 @40, Text x1098 w635, zentriert) */
.media-inset-left {
position: relative;
display: grid;
grid-template-columns: minmax(0, 47.3%) minmax(0, 1fr);
gap: clamp(2rem, 9.79vw, 11.75rem);
align-items: center;
padding-inline: clamp(1rem, 2.08vw, 2.5rem);
}
.media-inset-left > * { min-width: 0; }
.media-inset-left > :last-child { max-width: 39.7rem; }
.media-inset-left .content-swiper img, .media-inset-left .content-image img { width: 100%; }
/* Gespiegelte Variante: Text links, Bild rechts (Layout-Abwechslung aufeinanderfolgender Sektionen) */
.media-inset-right {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 47.3%);
gap: clamp(2rem, 9.79vw, 11.75rem);
align-items: center;
padding-inline: clamp(1rem, 2.08vw, 2.5rem);
}
.media-inset-right > * { min-width: 0; }
.media-inset-right > :first-child { max-width: 39.7rem; justify-self: end; }
.media-inset-right .content-swiper img, .media-inset-right .content-image img { width: 100%; }
/* Schmankerl: Textspalte breit, Bild schmaeler + rechts 40 vom Rand (XD: 700x900, nicht 50/50) */
.media-flush--narrow-r { grid-template-columns: minmax(0, 1fr) minmax(0, 41.25%); padding-left: clamp(1.25rem, 9.53vw, 11.44rem); padding-right: clamp(.5rem, 2.08vw, 2.5rem); } /* XD: Text x183, Bild 700, rechts 40 */
.media-flush--narrow-r > :first-child { max-width: 48.8rem; }
/* Bild-Ratios fuer Media-Spalten (Design-Crops, Slides bleiben proportional hochgeladen) */
.ratio-87-90 img { aspect-ratio: 87 / 90; object-fit: cover; }
.ratio-87-100 img { aspect-ratio: 87 / 100; object-fit: cover; }
.ratio-7-9 img { aspect-ratio: 7 / 9; object-fit: cover; }
/* Grosse Screens (User 06.08.): Media-Sektionen wachsen nicht ueber den Viewport —
Portrait-Medien werden mit der Spaltenbreite sonst hoeher als 100vh (z. B. Wellness
auf 2560). Kappe = 100svh MINUS Sektions-Padding (--sec-pad, erbt vom Artikel),
damit das sichtbare Farbband inkl. Padding in den Viewport passt; Crop via object-fit. */
@media (min-width: 992px) {
.media-flush-left .content-image img,
.media-flush-left .content-swiper img,
.media-flush-right .content-image img,
.media-flush-right .content-swiper img,
.media-inset-left .content-image img,
.media-inset-left .content-swiper img,
.media-inset-right .content-image img,
.media-inset-right .content-swiper img { max-height: calc(100svh - 2 * var(--sec-pad, 0rem)); object-fit: cover; }
}
/* ============================================================
Typo-Klassen (über Klassenfeld / Style-Selector vergeben)
============================================================ */
.headline-hero, .headline-1, .headline-2, .headline-3 {
font-family: var(--ff-display);
font-weight: 500;
letter-spacing: 0;
margin-block: 0 var(--space-md);
}
/* XD-Grade waren 150/140 .933 · 120/110 .917 · 80/70 .875 · 60/50 .833; PP Right Didone hat
lange Unterlängen (Kap.-zu-g-Extent = 0.877em), daher berührten sich g/ß/y bei mehrzeiligen
Headlines. Einheitlich auf .94 angehoben = knapp über der Berühr-Grenze, kleiner Luftspalt
(~0.063em), nicht locker. (User 20.08.) */
.headline-hero { line-height: .94; }
.headline-1 { line-height: .94; }
.headline-2 { line-height: .94; }
.headline-3 { line-height: .94; }
.headline-hero { font-size: var(--fs-hero); }
.headline-1 { font-size: var(--fs-display-1); }
.headline-2 { font-size: var(--fs-display-2); }
.headline-3 { font-size: var(--fs-display-3); }
.headline-2s { /* 70/60 — Zwischentitel (XD: Geschichte, Genusszeit, Momente, Dual-CTA) */
font-family: var(--ff-display);
font-weight: 500;
letter-spacing: 0;
margin-block: 0 var(--space-md);
font-size: var(--fs-display-2s);
line-height: .94; /* XD 70/60 = .857; angehoben wie die anderen Headlines (Unterlängen-Clearance) */
}
.eyebrow { font-size: var(--fs-lead); line-height: 1.16; } /* XD: 25/29 */
.eyebrow :is(p, h4) { margin: 0 0 var(--space-sm); }
.lead { font-size: var(--fs-lead); line-height: 1.16; } /* XD: 25/29 */
.lead-lg { font-size: var(--fs-lead-lg); line-height: 1.263; } /* XD: 38/48 */
.script { font-family: var(--ff-script); font-size: clamp(2.2rem, 3.39vw, 4.0625rem); line-height: .846; letter-spacing: 0; } /* XD: 65/55 (Fallback; Signatur ist jetzt SVG) */
.img-signature { width: clamp(10rem, 13vw, 15.6rem); margin-left: auto; margin-right: calc(var(--sec-pad) - var(--wrap-pad)); } /* Familie-Luerzer-Signatur, 250 @1920, rechtsbuendig */
/* Handschrift-Reveal (User 18.09.): das ![]()
wird per JS durch ein Inline-SVG ersetzt,
das den Schriftzug beim Einscrollen wie von Hand nachzeichnet (Maske in Strichbreite
entlang der Centerline, stroke-dashoffset). Ohne JS bleibt das ![]()
sichtbar.
Das Inline-SVG fuellt die Wrapper-Breite genau wie zuvor das ![]()
. */
.img-signature svg { display: block; width: 100%; height: auto; }
.script p { margin: 0; }
.text-green { color: var(--c-green); }
.text-white { color: var(--c-white); }
.text-right { text-align: right; }
.text-center { text-align: center; }
/* ============================================================
Button (Pill) — auf Hyperlink-Element per Klasse
============================================================ */
.btn-pill { display: inline-flex; border: 0; padding: 0; background: none; }
.btn-pill a {
display: inline-flex;
align-items: center;
gap: .7em;
padding: 1em 2em;
border: 1px solid currentColor;
border-radius: 999px;
font-size: var(--fs-body);
line-height: 1;
color: inherit;
text-decoration: none;
background: transparent;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-pill a::before {
content: "";
width: .82em;
aspect-ratio: 20.244 / 10.416;
-webkit-mask: url("../../files/grafiken/icons/button-icon-black.svg") no-repeat center / contain;
mask: url("../../files/grafiken/icons/button-icon-black.svg") no-repeat center / contain;
background-color: currentColor;
}
/* Anker nach UNTEN auf derselben Seite: Pfeil-Icon zeigt runter (Aufwaerts-Anker wie „Zur Uebersicht" behalten den Standard) */
.btn-down a::before { transform: rotate(180deg); }
.btn-pill a:hover { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.sec--green .btn-pill a:hover { background: var(--c-white); color: var(--c-green); border-color: var(--c-white); }
.btn-pill.text-green a:hover { background: var(--c-green); color: var(--c-white); border-color: var(--c-green); }
/* Sektion mit gruener Headline -> Buttons automatisch gruen (User 04.08.) */
.sec:not(.sec--green):has(.headline-2.text-green, .headline-3.text-green) .btn-pill a { color: var(--c-green); }
.sec:not(.sec--green):has(.headline-2.text-green, .headline-3.text-green) .btn-pill a:hover { background: var(--c-green); color: var(--c-white); border-color: var(--c-green); }
/* Buttons nebeneinander */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
/* ============================================================
Utilities (Style-Selector-Registry)
============================================================ */
.space-top-sm { margin-top: var(--space-sm); }
.space-top-md { margin-top: var(--space-md); }
.space-top-lg { margin-top: var(--space-lg); }
.space-top-xl { margin-top: var(--space-xl); }
.space-top-2xl { margin-top: clamp(5rem, 12.5vw, 15rem); } /* Kulinarik-Bildreihe: 240 (gemessen) */
.space-bottom-sm { margin-bottom: var(--space-sm); }
.space-bottom-md { margin-bottom: var(--space-md); }
.space-bottom-lg { margin-bottom: var(--space-lg); }
.space-bottom-xl { margin-bottom: var(--space-xl); }
.space-none { margin-block: 0; }
.pos-rel { position: relative; }
/* ============================================================
Kopfzeile über dem Hero (Modul „Kopfzeile“)
============================================================ */
.site-head {
position: fixed; /* pinned morph (06.08.) — war absolute */
top: 0; left: 0; right: 0;
z-index: 40;
/* 2 Zeilen: Navs oben (untereinander bündig), Logo mittig über beide Zeilen */
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto auto;
align-items: center;
column-gap: var(--space-md);
padding: 1.9rem var(--wrap-pad) 0;
color: var(--c-white);
font-size: var(--fs-body);
font-weight: 500;
line-height: 1; /* XD: Medium 22/22 */
}
.site-head-nav { grid-row: 1; display: flex; align-items: center; gap: 1.7rem; height: 1.75rem; } /* 28px = Burger-Hoehe (heutige Zeilenhoehe); im Sticky-Morph KONSTANT — Nav-Zeile bewegt sich nie */
.site-head-nav:not(.site-head-nav--right) { grid-column: 1; }
.site-head-nav--right { grid-column: 3; justify-content: flex-end; }
.site-head a { color: inherit; text-decoration: none; }
.site-logo { grid-column: 2; grid-row: 1 / span 2; align-self: start; display: block; }
.site-logo img { width: auto; height: clamp(4.5rem, 10.7vw, 12.8rem); } /* 205 @1920 (gemessen) */
.burger { display: inline-flex; flex-direction: column; gap: 7px; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.burger span { display: block; width: var(--burger-w); height: 2px; background: currentColor; }
/* ============================================================
Hero (Artikel in der Header-Sektion)
============================================================ */
.blh-hero { position: relative; }
.blh-hero .content-image { margin: 0; }
.blh-hero img { width: 100%; height: 100svh; object-fit: cover; }
/* Tint ueber allen Hero-Bildern/-Videos: weisser Text (Kopfzeile + Claims) bleibt lesbar —
oben/unten staerker (Nav bzw. Claims), Mitte dezent (gleiche Sprache wie Menue-Overlay-Media) */
.blh-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(rgba(18, 18, 18, .48), rgba(18, 18, 18, .24) 34%, rgba(18, 18, 18, .24) 62%, rgba(18, 18, 18, .46)); /* verstaerkt 18.08. (User Katja: Schrift teils schwer lesbar) — vorher .35/.12/.12/.3 */
}
/* „Coming Soon / Neu ab Winter 2026/27"-Störer auf der Startseite: natives Bild-CE (3202, class
hero-cs) in der Hero-Gruppe, Bild verlinkt auf die Buchung. SVG aus der Live-Site, Kreis grün.
Unten links wie im Original, leicht gedreht; Hover: etwas größer + stärker gedreht. */
.blh-hero .hero-cs { /* content-image-Wrapper des Bild-CE */
position: absolute;
left: clamp(1.25rem, 3vw, 4rem);
bottom: clamp(1.25rem, 3.5vw, 4.5rem);
width: clamp(6.5rem, 13vw, 15rem);
margin: 0;
z-index: 2;
}
.blh-hero .hero-cs figure { margin: 0; }
.blh-hero .hero-cs img {
display: block;
width: 100%;
height: auto;
/* Das SVG ist bereits ~8° schräg gezeichnet (wie Live) -> ohne CSS-Rotation = schräg auf Load. */
transform: rotate(-10deg);
transform-origin: center;
transition: transform .3s ease;
}
.blh-hero .hero-cs a:hover img { transform: rotate(0deg) scale(1.05); } /* Hover: die SVG-Schräge geradedrehen + leicht größer */
.hero-claim {
position: absolute;
z-index: 2; /* ueber dem Hero-Tint */
color: var(--c-white);
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-hero-fluid);
line-height: .933;
}
.hero-claim { letter-spacing: 0; }
.hero-claim :is(p, h1, h2) { margin: 0; }
.hero-claim--br { bottom: 3%; right: var(--wrap-pad); text-align: right; }
/* Hover-Zustaende Chrome (User 05.08.): Text-Links -> Underline (wie .menu-head), Icons -> Salbei-Tint statt Grau */
.site-head-nav a { text-decoration: none; transition: text-decoration-color .15s ease; }
.site-head-nav a:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
/* Sprachwechsler (changelanguage-Modul, {{insert_module}} in der Kopfzeile vor dem Burger):
zeigt nur die jeweils andere Sprache (hideActiveLanguage) als Textlink in der Nav-Zeile. */
.site-lang { display: inline-flex; align-items: center; }
.site-lang ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.7rem; }
.site-lang li { margin: 0; padding: 0; }
.contact-rail a img, .site-menu__social img, .foot-social img { transition: filter .2s ease; }
.site-menu__social a:hover img, .foot-social a:hover img { filter: var(--sage-filter); }
.contact-rail a:hover img { filter: var(--sage-filter) drop-shadow(0 0 3px rgba(0,0,0,.4)); }
/* ============================================================
Sticky-Kopfzeile (06.08.): ab Scroll kehren NUR die Nav-Zeilen als
fixierter Balken zurueck — das grosse Center-Logo bleibt beim Hero.
Klassen html.head-mini / html.head-tint kommen aus dem Menue-Overlay-Script.
============================================================ */
/* Pinned Morph: Kopfzeile ist IMMER fixed; ZWEI entkoppelte Scroll-Zustaende
(Sequenz kommt aus den Schwellen, keine transition-delays):
- html.head-mini (ab 20px): Logo schrumpft 205->44 — Wachsen startet exakt am Seitenanfang
- html.head-tint (ab 250px): gruener Balken rein/raus — wechselt frueher beim Hochscrollen */
.site-head { position: fixed; transition: padding .3s ease, background-color .25s ease, transform .28s ease; }
/* Beim Runterscrollen versteckt sich der Balken (volle 100vh fuer die Sektionen),
beim Hochscrollen kommt er sofort zurueck (Klasse aus dem Overlay-Script) */
html.head-hidden .site-head { transform: translateY(-100%); }
.site-logo { transition: margin .3s ease; }
.site-logo img { transition: height .3s ease; }
html.head-tint .site-head {
/* padding-top + Nav-Zeile = KONSTANT (wie ungescrollt) -> Nav-Links stehen pixelfest;
nur padding-bottom waechst (Balken schliesst symmetrisch um die Nav-Mitte 44.4px) */
padding: 1.9rem var(--wrap-pad) 1.4rem;
background: var(--c-green);
}
/* Logo bleibt als Home-Link in der Mitte — stark verkleinert (205px -> 44px),
negative margin zentriert es auf die Nav-Zeilen-Mitte: -(44-28)/2 */
html.head-mini .site-logo { margin-top: -.5rem; }
html.head-mini .site-logo img { height: 2.75rem; }
@media (max-width: 991px) {
html.head-tint .site-head { padding: 1.2rem var(--wrap-pad); } /* mobile Basis-Padding beibehalten */
}
@media (prefers-reduced-motion: reduce) {
.site-head, .site-logo, .site-logo img, .contact-rail { transition: none; }
}
/* Offenes Menue: Original-Anordnung (2 Zeilen, transparent) — die Socials-Zeile
im Overlay ist auf das site-head-Padding ausgerichtet; fixed, damit die
Buchungs-Links auch im gescrollten Zustand ueber dem Overlay liegen */
html.menu-open .site-head {
position: fixed;
grid-template-rows: auto auto;
padding: 1.9rem var(--wrap-pad) 0;
background: transparent;
animation: none;
transform: none; /* offenes Menue zeigt die Kopfzeile immer */
}
html.menu-open .site-head-nav { height: 1.75rem; }
html.menu-open .site-logo { margin-top: 0; }
/* Anker-Ziele landen unter dem Balken (Balkenhoehe ~4.5rem + Luft) */
[id] { scroll-margin-top: 5.75rem; }
/* Kontakt-Rail (Modul „Kontakt-Rail“) — bewusst fixed: bleibt beim Scrollen sichtbar (Design) */
.contact-rail {
position: fixed;
top: 50%;
translate: 0 -50%;
/* Design: Icon-Rechtskante 42.5 von der Viewport-Kante = buendig mit der
Inhaltsspalte (Aussenabstand 40). Vorher 2.9vw -> lag ueber den Slider-Pfeilen. */
right: var(--wrap-pad);
z-index: 60;
display: flex;
flex-direction: column;
gap: clamp(1.3rem, 1.72vw, 2.0625rem); /* Icon-Pitch 55 @1920 (gemessen) */
margin: 0;
width: var(--icon-rail);
/* Die Leiste selbst faengt keine Klicks ab, nur ihre Icons */
pointer-events: none;
}
.contact-rail a { display: block; width: var(--icon-rail); height: var(--icon-rail); pointer-events: auto; }
/* Mobil (User 06.08.): Rail wird zur gruenen Bottom-Bar — versteckt sich beim
Runterscrollen, kommt beim Hochscrollen zurueck (gleiches Signal wie der Header-Balken).
Bis 1023: auf Tablet-Breiten lief die seitliche Rail ueber Formularfelder/Preiskarten (Inhalt bis ~22px darunter) */
@media (max-width: 1023px) {
.contact-rail {
flex-direction: row;
top: auto;
bottom: 0;
left: 0;
right: 0;
width: auto;
translate: none;
align-items: stretch;
gap: 0;
padding: 0 0 env(safe-area-inset-bottom, 0px);
background: var(--c-green);
transition: transform .28s ease;
}
html.head-hidden .contact-rail { transform: translateY(100%); }
/* 3 gleich breite Bloecke mit Trennlinien, Icon mittig */
.contact-rail a {
flex: 1;
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
padding-block: 1.1rem;
}
.contact-rail a + a { border-left: 1px solid rgba(255, 255, 255, .3); }
.contact-rail a img { width: 1.5rem; height: 1.5rem; filter: brightness(0) invert(1); } /* a img: Basis-.contact-rail-img-Regel (100%) steht NACH diesem Block */
/* Freiraum unter dem Footer, damit die fixe Kontakt-Bottom-Bar (~59px) den Abschluss
(Legal-Links + KWER-Credit) nicht überdeckt. */
.site-foot { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
/* Startseiten-Hero (100svh) endet an der Bottom-Bar-Oberkante (Bar = 2x1.1rem Padding + 1.5rem Icon = 3.7rem), sonst verdeckte sie Claim + Badge (User 17.09.) */
.blh-hero img { height: calc(100svh - 3.7rem - env(safe-area-inset-bottom, 0px)); }
/* Offenes Menue liegt ueber der Bottom-Bar (User 17.09.; Overlay z 50) */
html.menu-open .contact-rail { z-index: 45; }
}
.contact-rail img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(0,0,0,.4)); }
/* ============================================================
Breadcrumb (Modul im Layout, vor den Artikeln)
============================================================ */
.mod_breadcrumb {
max-width: var(--wrap-max);
margin-inline: auto;
padding-inline: var(--wrap-pad);
padding-top: clamp(1rem, 2.1vw, 2.5rem);
font-size: var(--fs-small);
line-height: 1; /* XD: 18/18 */
}
.mod_breadcrumb :is(ul, ol) { list-style: none; display: flex; flex-wrap: wrap; gap: .45em; margin: 0; padding: 0; }
.mod_breadcrumb li:not(:first-child)::before { content: "|"; margin-right: .45em; }
.mod_breadcrumb li.active { text-transform: uppercase; letter-spacing: .04em; }
.mod_breadcrumb a { color: inherit; text-decoration: none; }
/* ============================================================
Bildslider (core swiper): Pfeile + Punkte unten links im Bild
============================================================ */
.img-slider { position: relative; }
/* Pfeil-Masse teilen sich Bildslider und Zimmer-Rail (--arrow-*) */
/* Subpixel-Versicherung: 1px an der rechten Slider-Kante clippen — je nach Zoom/DPR kann
sonst ein Streifen des Folgeslides durchscheinen (Integer-Slidebreiten vs. fraktionaler Container);
dazu roundLengths:true im swiper-Template-Override */
.content-swiper .swiper { clip-path: inset(0 1px 0 0); }
.img-slider .swiper-button-prev,
.img-slider .swiper-button-next { top: auto; bottom: 1rem; width: var(--arrow-box); height: var(--arrow-box); color: var(--c-white); }
.img-slider .swiper-button-prev { left: 1rem; }
.img-slider .swiper-button-next { left: calc(1rem + var(--arrow-pitch)); right: auto; }
.img-slider .swiper-navigation-icon { display: none; }
.img-slider .swiper-button-prev::after, .img-slider .swiper-button-next::after {
content: "";
height: var(--arrow-glyph);
aspect-ratio: 19.703 / 38.293;
-webkit-mask: url("../../files/grafiken/icons/arrow-right.svg") no-repeat center / contain;
mask: url("../../files/grafiken/icons/arrow-right.svg") no-repeat center / contain;
background-color: currentColor;
}
.img-slider .swiper-button-prev::after {
-webkit-mask-image: url("../../files/grafiken/icons/arrow-left.svg");
mask-image: url("../../files/grafiken/icons/arrow-left.svg");
}
.img-slider .swiper-button-disabled { pointer-events: auto; cursor: auto; } /* Klick schlucken statt zur Lightbox durchfallen */
.img-slider .swiper-pagination { display: none; } /* Design: nur Pfeile, keine Punkte */
/* ============================================================
Intro-Editorial (alle Werte gemessen @1920)
============================================================ */
.col-push-label { padding-top: clamp(2.5rem, 3.9vw, 4.7rem); } /* H1 beginnt auf Render-Höhe */
.col-r-align { width: 75%; margin-left: auto; } /* Label+Render rechtsbündig, 652 breit */
.img-render { width: 75%; margin-left: auto; }
.img-slider--intro { width: 81%; margin-left: auto; } /* Slider 702, rechtsbündig in Spalte */
.col-slider-r { width: 81%; margin-left: auto; } /* Von-der-Alm-Spalte: Slider + „Ein Haus"-Heading in EINER Box -> immer bündig */
.img-narrow { width: 46%; margin: var(--space-lg) auto 0 25%; } /* Skifahrerin 400, eingerückt */
/* „Ein Haus voller Geschichten“: linksbündig zur Slider-Kante, Button darunter rechts */
.row-split {
display: grid;
grid-template-columns: 1fr auto;
row-gap: var(--space-sm);
padding-inline: var(--wrap-pad) calc(var(--wrap-pad) + 3.3%);
}
.row-split > * { min-width: 0; }
.row-split > :first-child { grid-column: 1; grid-row: 1; }
.row-split > :last-child { grid-column: 2; grid-row: 2; justify-self: end; }
/* ============================================================
Sektions-Spezifisches (alle Werte gemessen @1920)
============================================================ */
.col-indent { padding-left: 24%; } /* Geschichte/Familie: linke Spalte eingerückt auf x≈250 */
.col-indent-sm { padding-left: 9%; }
.img-hist { width: 89%; margin-left: 0; margin-top: var(--space-xl); }
.img-fam { width: 100%; }
/* .img-fam-r: Klasse bleibt am CE (Mobile-Reihenfolge, s. u.), Desktop keine Breitenregel mehr — Design = volle Spaltenbreite (User 02.09.) */
/* CTA-Spalte (Auszeit): Inhalt eingerueckt -> Padding statt Bild-Margin */
.col-align-img { padding-left: 10%; }
.img-bobby { width: 80%; margin-left: 0; }
.col-push-lg { padding-top: clamp(4rem, 10.4vw, 12.5rem); } /* Kulinarik-Text: 200 unter Sektionsbeginn (XD 7469-7269) */
.col-center { display: flex; flex-direction: column; align-items: center; }
.col-center > * { width: clamp(280px, 20.9vw, 400px); } /* Food-Block 400 (gemessen) */
/* Zeile Headline links / Button rechts (Zimmer-Kopf) */
.row-split-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); flex-wrap: wrap; }
@media (max-width: 767px) { .row-split-top > * { margin-bottom: 0; } .row-split-top { margin-bottom: var(--space-md); } } /* Button bricht unter die Headline: Zeilen-gap trennt beide, Abstand zum Folgenden kommt von der Gruppe statt 0 unter dem Button (User 17.09., Webcams/Home/Weitere Zimmer) */
/* ============================================================
Dach-Deko als ::after am ANKER (04.08., XD-geklickt: 144x46)
roof-tr = Sektion top-right (80/80) [Artikel-Klasse]
roof-img-tl = Bild: haengt -38 ueber die LINKE Kante, 80 unter Oberkante
roof-img-tr = Bild/Slider: +103 ueber die RECHTE Kante, 160 unter Oberkante
Farbe: schwarz; auf sec--green weiss.
============================================================ */
.roof-tr, .roof-img-tl, .roof-img-tr, .roof-tr--head { position: relative; }
.roof-tr::after, .roof-img-tl::after, .roof-img-tr::after, .roof-tr--head::after {
content: "";
position: absolute;
z-index: 2;
width: clamp(6rem, 7.5vw, 9rem); /* 144 @1920 */
aspect-ratio: 143.505 / 45.636;
background: url("../../files/grafiken/logo/breitlehenalm-dach-schwarz.svg") no-repeat center / contain;
}
.sec--green.roof-tr::after, .sec--green.roof-tr--head::after, .sec--green .roof-img-tl::after, .sec--green .roof-img-tr::after {
background-image: url("../../files/grafiken/logo/breitlehenalm-dach-weiss.svg");
}
.roof-tr::after { top: clamp(2.5rem, 4.17vw, 5rem); right: clamp(2.5rem, 4.17vw, 5rem); }
.roof-tr--head::after { top: 1.375rem; right: clamp(2.5rem, 4.17vw, 5rem); } /* Seitenkopf: Artikel-top +22 (XD 880 = Intro-Start 858 + 22) */
.roof-img-tl::after { top: clamp(2.5rem, 4.17vw, 5rem); left: 0; transform: translateX(-26%); } /* Ueberhang -38 = 26% der Dachbreite */
.roof-img-tr::after { top: clamp(2.5rem, 4.17vw, 5rem); right: 0; transform: translateX(72%); } /* Ueberhang +104 = 72% der Dachbreite */
.roof--low::after { top: clamp(5rem, 8.33vw, 10rem); } /* Modifier: Dach tiefer (XD Genusszeit 160) */
@media (max-width: 991px) {
/* Gestapelte Bilder sind (fast) full-bleed: Ueberhang einziehen, damit das Dach nicht am Viewport abgeschnitten wird */
.roof-img-tl::after { transform: translateX(0); }
.roof-img-tr::after { transform: translateX(0); }
.roof-tr--head::after { content: none; } /* Seitenkopf-Dach kollidiert gestapelt mit langen H2-Zeilen */
}
/* Dach-Deko (Platzhalter-SVG bis Logokoffer); Versatz über transform statt negativer Offsets */
.roof-mark { position: absolute; width: clamp(60px, 5.7vw, 110px); z-index: 5; margin: 0; }
.roof-mark img { width: 100%; height: auto; }
.roof-mark--tr { top: clamp(1.5rem, 3.3vw, 4rem); right: var(--wrap-pad); }
.roof-mark--mid { top: 0; left: 48.5%; transform: translateY(-60%); }
.roof-mark--skier { top: 0; left: 8%; transform: translateY(-40%); }
/* Bildbreite in Spalten (gemessen) */
.img-w85 { width: 85%; }
@media (max-width: 991px) { .img-w85 { width: 100%; } }
/* Hero-Banner auf Unterseiten: Foto 1920×800 (gemessen) statt Vollbild */
.blh-hero--banner img { height: auto; }
@media (max-width: 991px) { .blh-hero--banner img { height: 50svh; object-fit: cover; } .hero-claim--banner { font-size: min(var(--fs-display-1-fluid), 10vw); } } /* Claim: „Stornobedingungen" passte @320 nicht (User 17.09.) */
/* Video-Hero (Familienhotel): verhaelt sich wie das Banner-Bild — 12:5-Format, cover, mobil 50svh */
.blh-hero .content-player { margin: 0; }
.blh-hero video { display: block; width: 100%; object-fit: cover; }
.blh-hero--banner video { aspect-ratio: 1920 / 800; height: auto; }
@media (max-width: 991px) { .blh-hero--banner video { aspect-ratio: auto; height: 50svh; } }
.hero-claim--banner {
top: 50%; /* vertikal mittig im Hero-Banner (ein- wie zweizeilig), User 18.09. */
transform: translateY(-50%);
left: var(--wrap-pad); /* XD: left 40px */
font-size: var(--fs-display-1-fluid);
line-height: .917; /* 120/110 */
}
/* ============================================================
Zimmer-Raster (Übersichtsseite) — gleiche Karte wie der Slider
Gemessen: 3 Spalten à 588, Spaltenabstand 38, Zeilen-Pitch 874
============================================================ */
.room-grid {
max-width: var(--wrap-max);
margin-inline: auto;
padding-inline: var(--wrap-pad);
margin-top: clamp(2rem, 4vw, 4.8rem);
display: grid;
grid-template-columns: repeat(var(--room-cols), minmax(0, 1fr));
column-gap: var(--room-gap);
row-gap: clamp(2.5rem, 6.5vw, 7.75rem);
align-items: stretch; /* Karten einer Reihe gleich hoch */
}
/* Spaltenzahl kommt aus --room-cols (siehe Tokens), nur der Zeilenabstand variiert */
@media (max-width: 1399px) { .room-grid { row-gap: var(--space-lg); } }
/* Modul-Überschrift über dem Raster (roomType-Split): gleiche Wrap-Breite + Innenabstand
wie die Karten, damit sie bündig mit dem Karteninhalt steht statt am linken Rand.
Abstand oben trennt vom Grid darüber; Abstand nach unten liefert .room-grid__head + .room-grid. */
.room-grid__head {
max-width: var(--wrap-max);
margin-inline: auto;
padding-inline: var(--wrap-pad);
margin-top: clamp(3rem, 6vw, 7rem);
margin-bottom: 0;
}
.room-grid__head + .room-grid { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
/* ============================================================
Zimmer-Rail (Startseite) — dasselbe Raster wie die Uebersicht,
nur einzeilig mit nativem Scroll-Snap statt Slider-Bibliothek.
Templates: mod_newslist_roomslider / news_roomcard
============================================================ */
.room-slider {
max-width: var(--wrap-max);
margin-inline: auto;
padding-inline: var(--wrap-pad);
margin-top: clamp(2rem, 2.6vw, 3.1rem);
}
.room-rail-wrap { position: relative; }
.room-rail {
display: grid;
align-items: stretch;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--room-rail-cols) - 1) * var(--room-gap)) / var(--room-rail-cols));
column-gap: var(--room-gap);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: 2px; /* Safari: Scrollport rundet auf ganze Pixel, Karten sind subpixel-hoch -> unterster Button-Rand (1px) wurde auf der Startseite bei manchen Breiten abgeschnitten (User 17.09.) */
}
.room-rail::-webkit-scrollbar { display: none; }
.room-rail > .room-card { scroll-snap-align: start; }
/* Pfeile sitzen laut Design unten rechts IM Bild der letzten sichtbaren Karte.
Die Box endet an der Bildunterkante: padding-top-Prozente beziehen sich auf
die BREITE, also Kartenbreite / Bildseitenverhaeltnis. */
.room-nav {
position: absolute;
inset: 0 0 auto 0;
height: 0;
padding-top: calc((100% - (var(--room-rail-cols) - 1) * var(--room-gap)) / var(--room-rail-cols) / var(--room-img-ar));
pointer-events: none;
z-index: 10;
}
.room-arrow {
position: absolute;
bottom: var(--room-nav-inset);
width: var(--arrow-box);
height: var(--arrow-box);
padding: 0;
border: 0;
background: none;
color: var(--c-white);
cursor: pointer;
pointer-events: auto;
transition: opacity .2s ease;
}
.room-arrow[disabled] { opacity: .35; cursor: auto; }
.room-arrow--next { right: var(--room-nav-inset); }
.room-arrow--prev { right: calc(var(--room-nav-inset) + var(--arrow-pitch)); rotate: 180deg; }
/* Nichts zu scrollen -> keine Pfeile (entspricht Swipers Lock-Verhalten) */
.room-slider--static .room-nav { display: none; }
/* Karte: identisch in Rail und Raster.
KEIN height:100% — in einem Container mit unbestimmter Hoehe schaltet das
das Stretch ab und Fakten/Buttons fluchten nicht mehr. Grid streckt selbst. */
.room-card { display: flex; flex-direction: column; }
.room-card .content-image img,
.room-card .image_container img { width: 100%; height: auto; display: block; } /* Karte: Bild füllt die (nun breitere) Kartenspalte statt bei 600px zu stoppen; height:auto überschreibt das feste height-Attribut */
.room-card h3 { margin: var(--space-sm) 0 1.875rem; width: min-content; } /* XD: 30 unter dem Titel (2-zeilig gemessen). width:min-content => Name oben / Typ unten, einheitlich 2-zeilig ohne Umbenennen; "40 m²" haelt per nbsp zusammen (User Katja/Vinzenz 18.08.) */
/* Groessen-Titel ("Appartement 40 m²" u. Ae., enthalten eine Zahl): NICHT erzwungen umbrechen –
einzeilig, solange Platz ist; wird die Spalte zu schmal, faellt nur "40 m²" (nbsp) in Zeile 2.
Namens-Titel ("AlmHerz Appartement") bleiben bewusst 2-zeilig (Regel oben). (User 20.08.) */
.room-card h3.room-card__title--size { width: auto; }
.room-card h3 a { color: inherit; text-decoration: none; }
/* „Bed & Breakfast"-Störer NUR auf Zimmer-Karten (.room-card--bnb); SVG 1:1 aus der Live-Site,
Kreis auf das neue Grün (#666E5E) rekoloriert. Über der oberen linken Bildecke, leicht gedreht. */
.room-card--bnb { position: relative; }
.room-card__badge {
position: absolute;
top: clamp(-1.75rem, -1.4vw, -1rem); /* ragt oben über die Bildkante hinaus */
left: clamp(0.5rem, 1vw, 1.25rem);
width: clamp(6rem, 10.5vw, 10rem); /* groesser (96–160px) */
aspect-ratio: 1;
background: url("../../files/grafiken/bed-breakfast-final.svg") center / contain no-repeat;
transform: rotate(-10deg);
pointer-events: none;
z-index: 2;
}
html[lang="en"] .room-card__badge { background-image: url("../../files/grafiken/bed-breakfast-en-final.svg"); } /* EN-Variante des Stoerers */
/* In horizontalen Scrollern (Home-Slider, „Weitere Zimmer") erzwingt overflow-x:auto ein
vertikales Clipping -> dort den Störer bündig statt überstehend platzieren (sonst oben gekappt). */
.room-rail .room-card__badge,
.room-slider .room-card__badge { top: clamp(1rem, 1.6vw, 1.75rem); }
.room-facts { font-size: var(--fs-body); margin: auto 0 var(--space-sm); display: flex; gap: 1.4rem; flex-wrap: wrap; }
.room-fact { display: inline-flex; align-items: center; gap: .45em; }
.room-fact img { width: var(--icon-fact); height: var(--icon-fact); object-fit: contain; }
/* ============================================================
Footer (Geometrie gemessen: linke Spalte bis 41%, rechter Block ab 43%)
============================================================ */
.site-foot { background: var(--c-green); color: var(--c-white); }
.site-foot a { color: inherit; text-decoration: none; transition: text-decoration-color .15s ease; }
/* Footer-Text-Links: Hover wie Kopfzeile (Underline); Icon-Links (foot-social) haben den Salbei-Tint */
.site-foot a:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
.foot-social a:hover, .foot-brand a:hover, .site-foot a:has(> img):hover { text-decoration: none; }
/* KWER-Credit: Logo in Zeilenhoehe, Hover = Salbei wie die anderen Icon-Links */
.foot-kwer a img { height: .85em; width: auto; display: inline-block; vertical-align: -.04em; transition: opacity .2s ease; }
.foot-kwer a:hover img { opacity: .75; } /* kein Farb-Filter: das Mark traegt KWER-Lime (Brand) */
/* KWER-Credit animiert (copyright.php = SVGator + jQuery-Hover, KWER-Standard wie z.B. jules).
Buchstaben starten opacity:0 und faden beim Hover ein, Pfeil-Mark ist Default sichtbar. */
.foot-kwer .kwer-copyright svg { height: .85em; width: auto; display: block; overflow: visible; }
.foot-kwer .kwer-copyright svg path, .foot-kwer .kwer-copyright svg polygon { fill: currentColor; }
.foot-kwer .kwer-copyright:hover { opacity: .75; }
.foot-links { overflow: visible; } /* Core-mod_navigation bringt overflow:hidden mit -> clippt den Underline-Hover der unteren Zeile */
.foot-contact a:hover { text-decoration-thickness: .045em; text-underline-offset: .08em; } /* Display-Groesse: Linie dicker + naeher (em-skaliert) */
.foot-wrap {
max-width: var(--wrap-max);
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 41%) minmax(0, 1fr);
grid-template-areas: "brand nav" "brand contact" "legal legal";
row-gap: clamp(1.5rem, 2vw, 2.5rem);
column-gap: var(--space-lg);
align-items: start;
padding: clamp(3.5rem, 4.2vw, 5rem) var(--wrap-pad) 2.5rem;
}
.foot-wrap > * { min-width: 0; }
.foot-col-brand { grid-area: brand; }
.foot-brand p { margin: 0 0 var(--space-lg); }
.foot-brand img { width: clamp(6.5rem, 8.6vw, 10.3rem); height: auto; } /* 165 @1920 (gemessen) */
.foot-col-nav { grid-area: nav; }
.foot-links { font-size: var(--fs-small); }
.foot-links--heads { font-size: var(--fs-foot-nav); line-height: 1; letter-spacing: .03em; } /* XD: 28px/28px, 0.84px */
.foot-links ul { list-style: none; margin: 0; padding: 0; }
/* 3 inhaltsbreite Spalten, spaltenweise gefüllt (Paarung wie im Design);
space-between → erste Spalte an der linken, letzte an der rechten Kante */
.foot-links--heads ul {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
grid-auto-flow: column;
justify-content: space-between;
column-gap: clamp(1.5rem, 2.6vw, 3.1rem);
row-gap: .72em;
}
.foot-links--heads ul li { white-space: nowrap; }
/* 992-1279 (war 1140; DE ragte bis ~1240 ueber die Spalte, User 17.09.): Nav-Spalte (513px @1024) fasst die 3 nowrap-Spalten (~690px) nicht ->
2x3-Anordnung in diesem Band (behebt echten Horizontal-Scroll, z. B. Windows-Scrollbars) */
@media (min-width: 992px) and (max-width: 1279px) {
.foot-links--heads { font-size: 1.35rem; }
.foot-links--heads ul { grid-template-columns: auto auto; grid-template-rows: auto auto auto; }
}
.foot-contact-row { grid-area: contact; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); flex-wrap: wrap; margin-top: clamp(1rem, 1.6vw, 1.9rem); } /* XD: Socials buendig mit der Nummer-Oberkante */
.foot-contact { font-family: var(--ff-display); font-weight: 500; font-size: clamp(2rem, 4.2vw, 5rem); line-height: .875; letter-spacing: 0; } /* XD: 80/70 */
.foot-contact p { margin: 0; }
.foot-social p { margin: 0; display: flex; gap: 1.1rem; }
.foot-social img { width: var(--icon-social); height: var(--icon-social); }
.foot-col-legal {
grid-area: legal;
display: grid;
grid-template-columns: minmax(0, 41%) auto auto auto minmax(0, 1fr);
column-gap: clamp(1.5rem, 2.2vw, 2.6rem);
align-items: end;
margin-top: clamp(2.5rem, 4vw, 4.8rem);
}
.foot-col-legal .foot-copy p { margin: 0; font-size: 1.25rem; line-height: 1; opacity: .85; } /* XD: 20/20 */
.foot-legal ul { list-style: none; display: grid; gap: .45em; margin: 0; padding: 0; font-size: 1.25rem; line-height: 1; } /* XD: 20/20 */
.foot-kwer { justify-self: end; }
.foot-kwer p { margin: 0; font-size: calc(var(--fs-small) * .85); display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; } /* Credit kleiner als der uebrige Footer (User 21.09.); die beiden SVGs haengen per .85em daran und skalieren mit */
.foot-kwer a { display: inline-flex; align-items: center; gap: .3em; } /* Wortmarke + Mark (Agentur-Standard, zwei SVGs) */
/* ============================================================
Responsive (Breakpoint 991px)
============================================================ */
@media (max-width: 991px) {
.sec-media-text { grid-template-columns: 1fr; }
.media-inset-left, .media-inset-right { grid-template-columns: 1fr; padding-inline: 0; gap: 0; }
.media-inset-left > :last-child { max-width: none; padding: var(--space-md) var(--wrap-pad) var(--space-sm); }
.media-inset-right > :first-child { max-width: none; justify-self: stretch; padding: var(--space-md) var(--wrap-pad) var(--space-sm); }
.media-inset-right > .content-image, .media-inset-right > .content-swiper { order: -1; } /* mobil: Bild zuerst wie bei -left */
.sec-media-text.is-reversed > *:first-child { order: 0; }
/* Desktop-Flips (Bild links/rechts im Wechsel) duerfen mobil KEINE zwei Bilder
aufeinander stapeln -> ALLE Media-Text-Sektionen stapeln einheitlich Bild zuerst.
Reine Medienspalten (nur Bild/Swiper) werden vorgezogen; gemischte Spalten
(Bild + Text/Caption) bleiben in DOM-Reihenfolge. */
:is(.sec-media-text, .media-flush-left, .media-flush-right, .media-inset-left, .media-inset-right) > :is(.content-image, .content-swiper,
div:has(> .content-image, > .content-swiper):not(:has(> .content-text, > .content-headline, > .content-hyperlink, > .content-element-group)):not(.pos-rel)) { order: -1; }
/* Erste Sektion nach dem Hero: fuehrt sie mit einem SLIDER (nur Zimmer-Uebersicht),
stapelt mobil sonst Bild direkt unters Hero-Bild -> Text zuerst */
#main .inside > .mod_article:nth-child(-n+2) :is(.media-flush-left, .media-flush-right) > div:has(> .content-swiper):not(:has(> .content-text)) { order: 1; } /* Breadcrumb-Modul steht VOR dem Artikel */
/* Zwei-Bild-Sektionen (je Spalte ein Bild, z. B. Geschichte/Familie/Kulinarik Startseite):
Bild der zweiten Spalte hinter deren Text schieben, damit nie zwei Bilder aufeinander stossen */
.sec-media-text > div:has(> .img-fam-r), .col-center { display: flex; flex-direction: column; }
.sec-media-text > div > .img-fam-r { order: 1; }
.sec-media-text > div > .img-signature { order: 2; }
.col-center > .img-food { order: 1; }
/* Nach unten verschobenes Bild in einer Flex-Spalte hatte 0 Abstand zum Text/Button davor (User 17.09.,
Home Familie/Auszeit/Genusszeit + Heustadl Momente) -> Abstand wie Editor-Klasse .space-top-md
(Klasse selbst geht nicht: auf Desktop steht das Bild oben in der Spalte) */
.sec-media-text > div > .img-fam-r,
.col-center > .img-food,
.img-hist { margin-top: var(--space-md); }
.media-flush-left, .media-flush-right { grid-template-columns: 1fr; padding-inline: var(--wrap-pad); row-gap: var(--space-md); } /* war 0 -> Bilder/Slider liefen mobil randlos; jetzt normaler Seitenrand wie alle Sektionen (User 17.09.) */
.media-flush-left > :last-child, .media-flush-right > :first-child { max-width: none; }
.sec--green .media-flush-left > :last-child, .sec--green .media-flush-right > :first-child, .media-flush--narrow > :last-child { margin-left: 0; max-width: none; }
/* Gestapelte Zweispalter: EIN Abstandsmechanismus (User 17.09., „items belong together but look separate").
Vorher addierten sich Headline-Margin + space-top-Klasse (Flex/inline-flex kollabiert nicht), Grid-Gap +
Spalten-Randmargins, col-pad-y-Puffer und Desktop-Versaetze zu 80-144px. Jetzt: Spaltenabstand = row-gap,
Headline -> Folgeelement = dessen space-top-Klasse. Desktop unveraendert. */
:is(.headline-1, .headline-2, .headline-2s, .headline-3):has(+ :is(.space-top-md, .space-top-lg, .space-top-xl)) { margin-bottom: 0; }
:is(.sec-media-text, .media-flush-left, .media-flush-right, .intro-split:not(.season-sec)) > :not(:last-child),
:is(.sec-media-text, .media-flush-left, .media-flush-right, .intro-split:not(.season-sec)) > :not(:last-child) > :last-child,
:is(.sec-media-text, .media-flush-left, .media-flush-right, .intro-split:not(.season-sec)) > :not(:last-child) > :last-child > :last-child { margin-bottom: 0; }
:is(.sec-media-text, .media-flush-left, .media-flush-right, .intro-split:not(.season-sec)) > * > :first-child:not(.img-food, .img-fam-r),
:is(.sec-media-text, .media-flush-left, .media-flush-right) > * > :is(.img-food, .img-fam-r):first-child + * { margin-top: 0; } /* per order nach unten geschobene Bilder: erstes sichtbares Element */
.col-indent, .col-indent-sm, .col-align-img { padding-left: 0; }
.col-push-label, .col-push-lg { padding-top: 0; }
.col-center > * { width: 100%; }
.row-split { padding-inline: var(--wrap-pad); margin-top: var(--space-md); row-gap: 0; } /* war 0 -> Button „Jetzt Urlaub buchen" klebte am rechten Rand (User 17.09.; Klasse nur dort im Einsatz) */
.img-render, .img-slider--intro, .img-narrow, .img-hist, .img-fam, .img-bobby, .img-fam-r, .col-r-align, .col-slider-r { width: 100%; margin-left: 0; }
.site-head { padding: 1.2rem var(--wrap-pad); }
.site-head-nav a { display: none; }
.site-head-nav .site-lang a { display: inline; } /* Sprachwechsler bleibt mobil sichtbar */
.site-logo img { height: 3.6rem; }
.foot-wrap { grid-template-columns: 1fr; grid-template-areas: "brand" "nav" "contact" "legal"; }
.foot-contact { font-size: min(2rem, 8.5vw); } /* E-Mail (32px = 313px breit) passte unter ~366px nicht -> Seitwaerts-Scroll @320 (User 17.09.) */
.foot-links--heads ul { grid-template-columns: auto; grid-template-rows: none; grid-auto-flow: row; justify-content: start; }
.foot-col-legal { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
.foot-kwer { margin-top: clamp(2rem, 7vw, 3.25rem); } /* mobil: mehr Luft ueber "created by" */
}
/* ============================================================
Menü-Overlay (Modul „Menü-Overlay“, Templates mod_menuoverlay/nav_menuoverlay)
Geometrie gemessen: Panel 47.7%, Untermenü-Spalte ab 56% des Panels
============================================================ */
.site-menu {
position: fixed;
inset: 0;
z-index: 50;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
visibility: hidden;
opacity: 0;
transition: opacity .3s ease, visibility 0s linear .3s;
pointer-events: none;
}
html.menu-open .site-menu { visibility: visible; opacity: 1; transition: opacity .3s ease; pointer-events: auto; }
html.menu-open { overflow: hidden; }
.site-menu__panel {
position: relative;
background: var(--c-green);
color: var(--c-white);
padding: var(--space-md) var(--wrap-pad);
overflow-y: auto;
min-width: 47.7%;
max-width: 100%;
display: flex;
align-items: center;
gap: clamp(1.5rem, 3vw, 3.5rem);
}
.site-menu__roof { position: absolute; top: var(--space-md); left: var(--wrap-pad); width: clamp(60px, 6.2vw, 120px); display: block; }
.site-menu__roof img { width: 100%; }
.site-menu__panel > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.8rem, 1.4vw, 1.7rem); flex-shrink: 0; }
.menu-head {
cursor: default;
width: fit-content;
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-display-3);
line-height: .867; /* XD: 60/52 */
color: inherit;
text-align: left;
padding: 0;
}
.menu-head:hover, li.open > .menu-head { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; }
/* Alle Untermenüs liegen unsichtbar übereinander in EINER Grid-Zelle:
die Spalte ist immer so breit wie das breiteste Untermenü → Bild bleibt stabil */
.site-menu__subcol { align-self: stretch; min-width: 0; display: grid; }
.site-menu__panel .level_2 {
grid-area: 1 / 1;
align-self: start;
display: grid;
gap: .7em;
visibility: hidden;
list-style: none;
margin: 0;
padding: 0;
width: max-content;
max-width: 100%;
}
.site-menu__panel .level_2.show { visibility: visible; }
/* Aktiv-Zustand (Untermenü/Unterstrich/Bild) wird per JS gesetzt und bleibt nach dem Hover bestehen */
.site-menu__panel .level_2 a { font-size: var(--fs-body); line-height: 1; position: relative; display: inline-block; padding-left: 1.6em; } /* XD: 22/22 */
.site-menu__panel .level_2 a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: .82em;
aspect-ratio: 20.244 / 10.416;
-webkit-mask: url("../../files/grafiken/icons/button-icon-black.svg") no-repeat center / contain;
mask: url("../../files/grafiken/icons/button-icon-black.svg") no-repeat center / contain;
background-color: currentColor;
transform: translateY(-50%) rotate(90deg);
opacity: 0;
transition: opacity .15s ease;
}
.site-menu__panel .level_2 a:hover::before,
.site-menu__panel .level_2 :is(li.active, li.trail) > a::before { opacity: 1; }
.site-menu__media { position: relative; overflow: hidden; }
/* Scrims: Weisse UI (CTA unten, Socials/X oben) bleibt auf hellen Fotos lesbar; auf dunklen unsichtbar */
.site-menu__media::before,
.site-menu__media::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: clamp(6rem, 12vh, 10rem);
pointer-events: none;
z-index: 1;
}
.site-menu__media::before { top: 0; background: linear-gradient(rgba(18, 18, 18, .35), transparent); }
.site-menu__media::after { bottom: 0; background: linear-gradient(transparent, rgba(18, 18, 18, .4)); }
.site-menu__top, .site-menu__cta { z-index: 2; }
.site-menu__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .3s ease;
}
.site-menu__img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bildwechsel rein per CSS: Punkt N offen -> Bild N sichtbar; ohne offenen Punkt -> Ruhebild (letztes picture) */
.site-menu:not(:has(.site-menu__panel > ul > li.open)) .site-menu__media > picture:last-of-type,
.site-menu:has(.site-menu__panel > ul > li:nth-child(1).open) .site-menu__media > picture:nth-of-type(1),
.site-menu:has(.site-menu__panel > ul > li:nth-child(2).open) .site-menu__media > picture:nth-of-type(2),
.site-menu:has(.site-menu__panel > ul > li:nth-child(3).open) .site-menu__media > picture:nth-of-type(3),
.site-menu:has(.site-menu__panel > ul > li:nth-child(4).open) .site-menu__media > picture:nth-of-type(4),
.site-menu:has(.site-menu__panel > ul > li:nth-child(5).open) .site-menu__media > picture:nth-of-type(5),
.site-menu:has(.site-menu__panel > ul > li:nth-child(6).open) .site-menu__media > picture:nth-of-type(6),
.site-menu:has(.site-menu__panel > ul > li:nth-child(7).open) .site-menu__media > picture:nth-of-type(7),
.site-menu:has(.site-menu__panel > ul > li:nth-child(8).open) .site-menu__media > picture:nth-of-type(8) { opacity: 1; }
.site-menu:has(.site-menu__panel > ul > li[data-idx="0"].open) .site-menu__img[data-idx~="0"],
.site-menu:has(.site-menu__panel > ul > li[data-idx="1"].open) .site-menu__img[data-idx~="1"],
.site-menu:has(.site-menu__panel > ul > li[data-idx="2"].open) .site-menu__img[data-idx~="2"],
.site-menu:has(.site-menu__panel > ul > li[data-idx="3"].open) .site-menu__img[data-idx~="3"],
.site-menu:has(.site-menu__panel > ul > li[data-idx="4"].open) .site-menu__img[data-idx~="4"],
.site-menu:has(.site-menu__panel > ul > li[data-idx="5"].open) .site-menu__img[data-idx~="5"],
.site-menu:has(.site-menu__panel > ul > li[data-idx="6"].open) .site-menu__img[data-idx~="6"],
.site-menu:has(.site-menu__panel > ul > li[data-idx="7"].open) .site-menu__img[data-idx~="7"] { opacity: 1; }
.site-menu__top {
position: absolute;
top: 0; left: 0; right: 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 1.9rem var(--wrap-pad) 0; /* = .site-head-Padding -> Socials auf der Zeile von Onlinebuchung/Anfrage */
color: var(--c-white);
font-size: var(--fs-small);
}
.site-menu__social { display: flex; gap: 1.1rem; }
.site-menu__social img { width: var(--icon-social); height: var(--icon-social); }
.site-menu__cta { position: absolute; bottom: clamp(1.5rem, 3vw, 3.6rem); left: var(--wrap-pad); color: var(--c-white); }
/* CTA lag als transparente Outline-Pill auf dem Foto und ging unter (User 06.08.) -> solide weiss */
.site-menu__cta a { background: var(--c-white); color: var(--c-green); border-color: var(--c-white); }
.site-menu__cta a:hover { background: var(--c-green); color: var(--c-white); border-color: var(--c-green); }
@media (max-width: 991px) {
.site-menu { grid-template-columns: 1fr; }
.site-menu__media { display: none; }
.site-menu__panel > ul { max-width: none; }
.site-menu__panel { flex-direction: column; align-items: flex-start; justify-content: flex-start; padding-top: 5rem; }
.site-menu__subcol { align-self: auto; display: block; }
.site-menu__panel .level_2 { width: auto; visibility: visible; display: none; }
.site-menu__panel .level_2.show { display: grid; }
.site-menu__panel { padding-top: 5rem; }
.site-menu__panel::after { content: ""; }
/* Mobil: Menue vertikal mittig (User 17.09.). Gleiches Padding oben/unten = Mitte des Viewports;
Auto-Margins statt justify-content:center, damit ein langes offenes Untermenue oben nicht
abgeschnitten wird (zentrierter Flex-Overflow). Leere Untermenue-Spalte + Spacer-Pseudo
nehmen sonst 2x gap Platz und schieben die Liste nach oben. */
.site-menu__panel { padding-bottom: 5rem; }
.site-menu__panel::after { content: none; }
.site-menu__panel > ul { margin-block: auto; gap: var(--space-sm); } /* mehr Luft zwischen Hauptpunkten mobil (User 17.09., war .8rem) */
/* Akkordeon: Untermenue haengt im Hauptpunkt (JS verschiebt es nur ab 992 in die Spalte) */
.site-menu__subcol { display: none; }
/* Akkordeon weich: Hoehe (--sub-h per JS = scrollHeight), Abstand und Deckkraft animiert;
zu = visibility hidden (nicht fokussierbar), erst nach der Animation */
.site-menu__panel > ul > li > .level_2 {
display: grid;
overflow: hidden;
height: 0;
margin: 0;
opacity: 0;
visibility: hidden;
transition: height .38s cubic-bezier(.4, 0, .2, 1), margin .38s cubic-bezier(.4, 0, .2, 1), opacity .25s ease, visibility 0s linear .38s;
}
.site-menu__panel > ul > li > .level_2.show {
height: var(--sub-h, auto);
margin: var(--space-xs) 0 0;
opacity: 1;
visibility: visible;
transition: height .38s cubic-bezier(.4, 0, .2, 1), margin .38s cubic-bezier(.4, 0, .2, 1), opacity .3s ease .08s, visibility 0s;
}
/* Chevron (gleiches Icon wie Pill-Buttons) VOR dem Wort: zu = nach unten, offen = nach oben */
.site-menu__panel > ul > li:has(> .level_2) > .menu-head { display: inline-flex; align-items: center; gap: .38em; }
.site-menu__panel > ul > li:has(> .level_2) > .menu-head::after {
content: "";
order: -1; /* Chevron vor dem Wort (User 17.09.) */
flex-shrink: 0;
width: .5em;
aspect-ratio: 20.244 / 10.416;
-webkit-mask: url("../../files/grafiken/icons/button-icon-black.svg") no-repeat center / contain;
mask: url("../../files/grafiken/icons/button-icon-black.svg") no-repeat center / contain;
background-color: currentColor;
transform: rotate(180deg);
transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}
.site-menu__panel > ul > li.open > .menu-head::after { transform: rotate(0deg); }
/* Unterpunkt-Text buendig mit dem Hauptpunkt-Text: Einzug = Chevron-Breite + Gap (.5em + .38em der Headline-Schrift) */
.site-menu__panel > ul > li > .level_2 a { padding-left: calc(var(--fs-display-3) * .88); }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
.site-menu__panel > ul > li > .level_2,
.site-menu__panel > ul > li > .level_2.show,
.site-menu__panel > ul > li > .menu-head::after { transition: none; }
}
/* Offenes Menü: Kopfzeile bleibt an Ort und Stelle über dem Overlay;
linke Links + Logo unsichtbar (visibility erhält das Layout), Burger wird zum X */
html.menu-open .site-head { z-index: 55; right: var(--sbw, 0px); pointer-events: none; }
html.menu-open .site-head-nav--right :is(a, button) { pointer-events: auto; } /* nur die Elemente, nicht die Box — sonst schluckt der leere Nav-Bereich die Menue-Socials */
html.menu-open .contact-rail { margin-right: var(--sbw, 0px); }
html.menu-open .site-head-nav:not(.site-head-nav--right),
html.menu-open .site-logo { visibility: hidden; }
.burger span { transition: transform .25s ease; }
html.menu-open .burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
html.menu-open .burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
/* ============================================================
Zimmer-Detailseite (Templates news_roomhero / news_roomdetail /
mod_newslist_roomweitere). Werte aus dem XD-AlmHerz-Artboard gemessen.
============================================================ */
/* Hero: Banner 1920×800, Zimmername unten links (Didone weiss).
Overlay-Mechanik = die bestehende .blh-hero/.hero-claim-Konvention der Startseite. */
.blh-hero--room img { width: 100%; height: auto; }
.hero-claim--room {
top: 50%;
bottom: auto;
transform: translateY(-50%);
left: var(--wrap-pad);
right: auto;
text-align: left;
z-index: 2;
}
/* max-width laesst den Zimmernamen wie im Design auf zwei Zeilen umbrechen */
.hero-claim--room h1 { margin: 0; max-width: 7em; font-size: var(--fs-display-1-fluid); line-height: .917; color: var(--c-white); }
/* Intro: 2x2-Raster. Fakten (Zeile 1) sitzen ueber dem Slider und sind wie er
rechtsbuendig (75%); der Textblock links ist vertikal auf den SLIDER zentriert
(Zeile 2) — die Fakten zaehlen dabei NICHT mit (User 03.08.). */
.room-intro__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
column-gap: var(--gap-media);
}
.room-intro__grid > * { min-width: 0; }
.room-intro__text { grid-column: 1; grid-row: 2; align-self: center; }
.room-facts--intro { grid-column: 2; grid-row: 1; width: 75%; margin: 0 0 var(--space-sm) auto; font-size: var(--fs-lead); line-height: 1.16; } /* XD: 25/29 */
.room-card .room-facts, .room-card .btn-pill a { color: var(--c-green); } /* XD: Karten-Fakten + -Buttons #666E5E */
.room-card .btn-pill a:hover { background: var(--c-green); color: var(--c-white); border-color: var(--c-green); }
.room-intro__grid > .blh-gallery--intro { grid-column: 2; grid-row: 2; align-self: center; width: 75%; margin-left: auto; } /* rechtsbuendig, Bild 76% der Spalte (gemessen) */
.room-intro__lead { margin-top: var(--space-md); } /* volle Spaltenbreite = buendig mit der Headline (User 06.08., war 32rem) */
.room-intro__cta { margin-top: var(--space-lg); }
/* Galerie-Slider (Scroll-Snap). Bild + Pfeile liegen in EINER Grid-Zelle
uebereinander (kein absolute); Pfeile unten links im Bild wie der Bildslider. */
.blh-gallery { display: grid; }
.blh-gallery__track {
grid-area: 1 / 1;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.blh-gallery__track::-webkit-scrollbar { display: none; }
.blh-gallery__track > img,
.blh-gallery__track > a { width: 100%; scroll-snap-align: start; }
.blh-gallery__track > a { display: block; }
.blh-gallery__track img { width: 100%; object-fit: cover; display: block; }
.blh-gallery--intro .blh-gallery__track img { aspect-ratio: 3 / 4; } /* Hochformat 3:4 (gemessen 0.74) */
.blh-gallery--ausst .blh-gallery__track img { aspect-ratio: 1 / 1; } /* Quadrat (gemessen ~0.94) */
.blh-gallery__nav {
grid-area: 1 / 1;
align-self: end;
justify-self: start;
margin: 0 0 var(--space-xs) var(--space-xs);
display: flex;
}
.blh-gallery__arrow + .blh-gallery__arrow { margin-left: calc(var(--arrow-pitch) - var(--arrow-box)); } /* Zentren exakt pitch auseinander; negativ = bewusste Box-Ueberlappung wie beim Zimmer-Rail */
.blh-gallery__arrow {
width: var(--arrow-box);
height: var(--arrow-box);
padding: 0;
border: 0;
background: none;
color: var(--c-white);
cursor: pointer;
transition: opacity .2s ease;
}
.blh-gallery__arrow::before, .room-arrow::before {
content: "";
display: block;
width: 100%;
height: 100%;
-webkit-mask: url("../../files/grafiken/icons/arrow-right.svg") no-repeat center / contain;
mask: url("../../files/grafiken/icons/arrow-right.svg") no-repeat center / contain;
background-color: currentColor;
pointer-events: none;
}
.blh-gallery__arrow--prev { rotate: 180deg; }
/* Pfeil-Hover: Nudge in Laufrichtung + opacity (User 05.08.). --prev bei Galerie/Rail ist rotiert -> +3px nudgt visuell links */
.img-slider .swiper-button-prev::after, .img-slider .swiper-button-next::after,
.blh-gallery__arrow::before, .room-arrow::before { transition: transform .2s ease, background-color .2s ease; }
.img-slider .swiper-button-next:not(.swiper-button-disabled):hover::after { transform: translateX(3px); background-color: var(--c-sage); }
.img-slider .swiper-button-prev:not(.swiper-button-disabled):hover::after { transform: translateX(-3px); background-color: var(--c-sage); }
.blh-gallery__arrow:not([disabled]):hover::before, .room-arrow:not([disabled]):hover::before { transform: translateX(3px); background-color: var(--c-sage); }
.blh-gallery__arrow[disabled] { opacity: .35; cursor: auto; } /* disabled-Button schluckt den Klick (kein Durchfallen auf den Lightbox-Link) */
/* Ausstattungsdetails: gruen, Galerie flush-left, Liste + CTA rechts.
Nutzt .sec--green + .media-flush-left (Spalten/Einrueckung dort). */
/* Textspalte (Eyebrow + Headline + Liste + CTA) breiter: die generische
.media-flush-left > :last-child-Regel kappt sie auf 30rem/margin-left 14% -> Items
brachen teils auf 3 Zeilen (User Katja/Vinzenz 18.08.). Nur .room-ausst__text
ueberschreiben (andere media-flush-left-Seiten unberuehrt). Nur Desktop. */
@media (min-width: 992px) {
.media-flush-left.room-ausst__grid > .room-ausst__text { max-width: 46rem; margin-left: 4%; }
}
.room-ausst__text .eyebrow { margin: 0 0 var(--space-sm); }
/* Grundriss-Hinweis unter den Ausstattungsdetails (User 02.09.: „ganz klein"), nur wenn ein Grundriss gesetzt ist */
.room-ausst__note { font-size: .875rem; line-height: 1.4; opacity: .85; margin: var(--space-sm) 0 0; }
.feat-list {
list-style: none;
margin: var(--space-md) 0;
padding: 0;
display: grid;
gap: .55em; /* XD: Zeilen-Pitch 44 = lh 32 + 12 */
font-size: var(--fs-body);
}
/* Kein flex: sonst werden -Praefix und Resttext eigene Flex-Items (Zwei-Spalten-Bruch).
Icon absolut, oben an der ersten Zeile ausgerichtet (auch bei mehrzeiligen Items). */
.feat-list li { position: relative; padding-left: 1.32em; }
.feat-list:last-child { margin-bottom: 0; } /* Rhythmus: Trailing-Margin verfaelscht sonst die Sektionsgrenze (+40) */
/* feat-list auch als CE-Klasse nutzbar (Klasse am Wrapper-div, ul im RTE ohne Klasse) */
.feat-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.feat-list p + ul { margin-top: var(--space-sm); } /* Luft zwischen Intro-Absatz und Liste */
.feat-list li::before {
content: "";
position: absolute;
left: 0;
top: .42em;
width: .62em;
aspect-ratio: 13.687 / 12.301;
-webkit-mask: url("../../files/grafiken/icons/icon-x.svg") no-repeat center / contain;
mask: url("../../files/grafiken/icons/icon-x.svg") no-repeat center / contain;
background-color: currentColor;
opacity: .85;
}
/* Geschichte-Timeline (Gastgeber & Geschichte) — Live-Layout (blht) ans neue CD adaptiert:
Mittellinie 2px ink, Kreis-Node mit gruenem Dach-Signet, Jahre in Display-Font,
Bilder ohne Radius/Schatten. Zeilen sind Text-CEs mit addImage (figure + .rte als Grid-Kinder). */
.blh-tl { max-width: 66rem; margin: var(--space-lg) auto 0; }
.blh-tl .tl-row {
position: relative;
display: grid;
grid-template-columns: 1fr 5.25rem 1fr;
column-gap: var(--space-md);
align-items: center;
margin-bottom: clamp(3rem, 5.2vw, 5rem);
}
.blh-tl .tl-row::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: calc(-1 * clamp(3rem, 5.2vw, 5rem));
width: 2px;
background: var(--c-ink);
transform: translateX(-1px);
}
.blh-tl .tl-first::before { top: 50%; }
.blh-tl .tl-last { margin-bottom: 0; }
.blh-tl .tl-last::before { bottom: 50%; }
.blh-tl .tl-row::after {
content: "";
grid-area: 1 / 2;
place-self: center;
z-index: 2;
width: 5.25rem;
height: 5.25rem;
border-radius: 50%;
border: 2px solid var(--c-ink);
background: var(--c-white) url("../../files/grafiken/logo/breitlehenalm-dach-gruen.svg") center / 52% no-repeat;
}
.blh-tl .tl-row > figure { grid-row: 1; margin: 0; }
.blh-tl .tl-row > .rte { grid-row: 1; }
.blh-tl .tl-img-l > figure { grid-column: 1; }
.blh-tl .tl-img-l > .rte { grid-column: 3; }
.blh-tl .tl-img-r > figure { grid-column: 3; }
.blh-tl .tl-img-r > .rte { grid-column: 1; text-align: right; }
.blh-tl img { display: block; width: 100%; height: auto; }
.blh-tl h3 {
margin: 0 0 .35em;
font-family: var(--ff-display);
font-weight: 500;
font-size: var(--fs-display-3);
line-height: .833;
color: var(--c-green);
}
.blh-tl p { margin: 0; }
@media (max-width: 991px) {
.blh-tl .tl-row { grid-template-columns: 3.25rem 1fr; align-items: start; }
.blh-tl .tl-row::before { left: 1.625rem; }
.blh-tl .tl-first::before { top: 1.625rem; }
.blh-tl .tl-last::before { bottom: calc(100% - 1.625rem); }
.blh-tl .tl-row::after { grid-area: 1 / 1; place-self: start center; width: 3.25rem; height: 3.25rem; }
.blh-tl .tl-row > figure { grid-row: 1; margin-bottom: var(--space-sm); }
.blh-tl .tl-img-l > figure, .blh-tl .tl-img-r > figure { grid-column: 2; }
.blh-tl .tl-row > .rte { grid-row: auto; }
.blh-tl .tl-img-l > .rte, .blh-tl .tl-img-r > .rte { grid-column: 2; text-align: left; }
}
/* Solo-CTA (zentrierter Text-Block mit Button; Alt-Content: Tisch-reservieren-CTA Heustadl) */
.cta-solo { padding-block: clamp(3.75rem, 7.8vw, 9.375rem); text-align: center; }
.cta-solo p { max-width: 40rem; margin-inline: auto; }
.cta-solo .btn-row { justify-content: center; }
/* Weitere Zimmer: Ueberschrift + dieselbe Rail wie die Startseite */
.room-weitere { padding-block: clamp(3.75rem, 7.8vw, 9.375rem) clamp(4.5rem, 9.375vw, 11.25rem); background: var(--c-beige); } /* XD: 150 (+40 Gruen) / unten 180 = Footer-Rhythmus. Beiger BG (User 20.08.), damit die gruenen Karten-/Sektions-Titel der Regel „gruen auf beige" folgen. */
.room-weitere__title { margin-bottom: 0; }
.room-weitere .room-slider { margin-top: var(--space-lg); }
@media (max-width: 991px) {
.room-intro__grid { grid-template-columns: 1fr; grid-template-rows: none; }
.room-intro__text { grid-column: 1; grid-row: auto; align-self: auto; }
.room-facts--intro { grid-column: 1; grid-row: auto; width: 100%; margin: var(--space-md) 0; } /* gestapelt folgt sie dem Button „Anfragen" -> Abstand oben (User 17.09.) */
.room-intro__grid > .blh-gallery--intro { grid-column: 1; grid-row: auto; align-self: auto; width: 100%; margin-left: 0; }
.blh-hero--room img { height: 50svh; object-fit: cover; }
}
/* ============================================================
Restaurant & Skihütte Heustadl (Seite 14)
============================================================ */
.eyebrow-line { font-size: var(--fs-lead); line-height: 1.16; margin: 0 0 var(--space-sm); }
/* Das Restaurant — Intro: Headline links (schmaler), Text rechts breiter/tiefer (38px, gemessen) */
.intro-split {
display: grid;
grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
column-gap: clamp(2rem, 4vw, 5rem);
align-items: start;
}
.intro-split > * { min-width: 0; }
.intro-split__text { max-width: 57rem; padding-top: clamp(2rem, 6.5vw, 7.5rem); } /* Text beginnt tiefer als die Headline (top 1126 vs Headline, gemessen) */
/* Anreise-Optionen (Lage & Anreise): ausgewogene 2-Spalten-Liste (Multicol) statt des
unausgewogenen sec-media-text-Splits (links 720 / rechts 336px). Items bleiben intakt.
(User/Katja 19.08.) */
.anreise-list .rte { columns: 2; column-gap: clamp(2rem, 4vw, 4rem); }
.anreise-list .rte > p {
break-inside: avoid;
margin: 0 0 var(--space-md);
padding: 0 0 var(--space-sm);
border-bottom: 2px solid currentColor; /* Trennlinie wie beim Akkordeon (currentColor = grün) */
}
.anreise-list .rte > p strong { /* Verkehrsmittel-Titel im Akkordeon-Header-Stil */
display: block;
margin-bottom: .5em;
font-weight: 400;
font-size: var(--fs-lead-lg);
line-height: 1.263;
letter-spacing: .03em;
}
@media (max-width: 767px) { .anreise-list .rte { columns: 1; } }
@media (max-width: 991px) {
.intro-split { grid-template-columns: 1fr; }
.intro-split__text { max-width: none; padding-top: var(--space-md); }
.intro-split__text.space-top-lg { margin-top: 0; } /* Desktop-Ausgleich neben der hohen H1 — gestapelt verdoppelt er nur den Abstand */
}
/* Ein Tag im Heustadl — 4 Karten (Bild + Uhrzeit + Label) */
.tile-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: var(--room-gap);
row-gap: var(--space-lg);
margin-top: var(--space-lg);
}
.mod_article > .tile-grid:first-child,
.mod_article > .content-element-group:first-child > .tile-grid:first-child { margin-top: 0; } /* Rhythmus: Grid ohne Heading davor (Saison-Uebersicht) startet an der Sektionskante */
.tile-grid > * { min-width: 0; }
.tile-card { display: flex; flex-direction: column; }
.tile-card .content-image img { width: 100%; aspect-ratio: 15 / 16; object-fit: cover; } /* gemessen ~0.92 */
.tile-cap { margin-top: var(--space-sm); }
.tile-cap .ohead { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-display-3); line-height: .833; letter-spacing: 0; margin: 0; } /* XD: 60/50 */
.tile-cap p { font-size: var(--fs-lead); line-height: 1.16; margin: .3em 0 0; } /* Kachel-Label, XD: 25/29 */
.tile-grid--3 { grid-template-columns: repeat(3, 1fr); } /* Timeline Gastgeber-Seite: 9 Karten = 3x3 */
.tile-cap h3 { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-display-3); line-height: .833; letter-spacing: 0; margin: 0; } /* Jahreszahlen wie .ohead */
.tile-grid--3 .tile-cap p { font-size: var(--fs-body); line-height: 1.45; letter-spacing: .03em; margin: .4em 0 0; } /* Timeline-Absaetze in Fliesstextgroesse */
@media (max-width: 991px) { .tile-grid, .tile-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tile-grid { grid-template-columns: 1fr; } }
/* Après-Ski: Textspalte breiter (Design) */
.sec--green .media-flush-left > .col-wide { max-width: 44rem; margin-left: 7%; }
/* Schmankerl-Karte als Akkordeon (details/summary; XD: Zeile 38px, Breite 781, 165 drueber) */
.menu-accordion {
max-width: 48.8rem;
margin-top: var(--space-md); /* XD: gleiche Luft wie Linie->Buttons (40) */
border-bottom: 0; /* handorgel-Stock-CSS bringt 1px mit -> waere Doppellinie unter der letzten Sektion */
}
/* Linie pro Sektion, UNTER dem Content (zu = direkt unter der Zeile). Geschlossener Content ist
display:none -> Linie sitzt dann am Header; offen wandert sie ans Content-Ende. */
.menu-accordion .handorgel__header:not(.handorgel__header--open) { border-bottom: 2px solid currentColor; }
.menu-accordion--tight { margin-top: var(--space-md); max-width: 46rem; } /* Akkordeon im Spaltenkontext; 46rem haelt Abstand zur Kontakt-Rail */
.menu-accordion .handorgel__header {
margin: 0;
font-family: inherit;
font-weight: 400;
font-size: var(--fs-lead-lg);
line-height: 1.263;
letter-spacing: .03em;
}
.menu-accordion .handorgel__header__button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding: .5em .12em .2em 0;
border: 0;
background: none;
font: inherit;
letter-spacing: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.menu-accordion .handorgel__header__button::after {
content: "";
width: .6em;
aspect-ratio: 20.244 / 10.416;
flex: none;
margin-right: .12em; /* Luft: Pfeil clippt sonst am overflow-hidden-Parent */
-webkit-mask: url("../../files/grafiken/icons/button-icon-black.svg") no-repeat center / contain;
mask: url("../../files/grafiken/icons/button-icon-black.svg") no-repeat center / contain;
background-color: currentColor;
transform: rotate(180deg); /* zu = Pfeil nach unten */
transition: transform .3s ease;
}
.menu-accordion .handorgel__header--open .handorgel__header__button::after,
.menu-accordion .handorgel__header--opened .handorgel__header__button::after { transform: rotate(0deg); }
.menu-accordion .handorgel__header__button:focus { outline: none; }
.menu-accordion .handorgel__header__button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.menu-accordion .handorgel__content { border: 0; border-bottom: 2px solid currentColor; background: none; }
.menu-accordion .handorgel__content__inner { padding: var(--space-sm) 0; }
/* Schmankerl — 2 gestapelte Fotos in der rechten Spalte */
.schmankerl-imgs { display: grid; gap: var(--room-gap); }
.schmankerl-imgs .content-image img { width: 100%; }
/* Preise: Saison-Karten + Preistabellen */
.price-card { border: 1px solid currentColor; padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.price-card :is(h2, h3) { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-display-3); line-height: .9; letter-spacing: 0; margin: 0 0 .2em; }
.price-card p { margin: 0 0 .4em; }
.price-card .btn-row { margin-top: auto; padding-top: var(--space-sm); }
/* Zurueck-zur-Uebersicht-Button: oben rechts auf Hoehe der Saison-Ueberschrift */
.season-sec { position: relative; }
.season-top { position: absolute; top: 0; right: var(--wrap-pad); }
@media (max-width: 991px) { .season-top { position: static; display: inline-block; margin: var(--space-xs) 0; } }
/* Saison-Subheads (Doppelzimmer/Appartements) ueber den Preistabellen */
.price-subhead h4 {
margin: 0 0 .3em;
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(1.6rem, 2.2vw, 2.65rem); /* ~42 @1920, eine Stufe unter Saison-h3 (50/60) */
line-height: .9;
}
.price-subhead p { margin: 0; }
/* Beige Saison-Sektionen: kompletter Text gruen (XD-Muster der Beige-Sektionen — Heading, Text, Buttons);
Buttons werden schon via :has(.headline-3.text-green) gruen. Tabellenlinien folgen der Textfarbe. */
.sec--beige .season-sec { color: var(--c-green); }
.sec--beige .season-sec .price-table th,
.sec--beige .season-sec .price-table td { border-bottom-color: color-mix(in srgb, currentColor 30%, transparent); }
/* Zusatzinfos-Sektion (#zusatzinfo = einzige .intro-split.season-sec): der Zweispalter liess
die linke Spalte fast leer (~945px Weissraum, User Katja: „zu viel Weissraum"). Jetzt Headline
oben (Zur-Uebersicht-Button rechts), Fliesstext volle Breite, ab Tablet 2-spaltig → Sektion
~40% kuerzer. Eigener beiger Hintergrund grenzt sie ab. (User Katja/Vinzenz 18.08.) */
.sec:has(> .wrap.intro-split.season-sec) { background: var(--c-beige); }
.intro-split.season-sec { display: block; }
.intro-split.season-sec > .content-element-group:first-child { display: inline-block; }
.intro-split.season-sec .season-top { float: right; }
.intro-split.season-sec .intro-split__text { max-width: none; padding-top: var(--space-md); clear: both; }
@media (min-width: 768px) {
.intro-split.season-sec .intro-split__text > .content-text .rte { columns: 2; column-gap: clamp(2rem, 5vw, 5rem); }
.intro-split.season-sec .intro-split__text > .content-text .rte > p { break-inside: avoid; }
}
/* Preistabellen im Live-Look (User 06.08.): keine Spalten-Labels, Name fett + Personen
als 2. Zeile in Spalte 1, Preis fett rechts (Appartements: "fuer N Personen" darueber,
Ski Opening: bis-3/ab-4-Label je Zelle darueber), jede 2. Zeile getoent. */
.price-table table { width: 100%; border-collapse: collapse; }
.price-table td {
text-align: left;
padding: .75em .6em .8em .8em;
border-bottom: 1px solid rgba(18, 18, 18, .25);
vertical-align: top;
}
.price-table tr:nth-child(odd) { background: rgba(18, 18, 18, .05); } /* Zebra wie live (dort 33/33/33 5%) */
.price-table td:last-child { text-align: right; padding-right: clamp(2rem, 3vw, 3.5rem); } /* Luft zur Kontakt-Rail */
.price-table td strong { font-weight: 700; }
@media (min-width: 992px) {
.price-table table { table-layout: fixed; }
.price-table td:last-child { width: 26%; }
/* Ski Opening (3 Spalten): zwei Preisspalten, beide rechtsbuendig, gemeinsame Rechtskante */
.price-table table:has(td:nth-child(3)) td:nth-child(2) { width: 16%; text-align: right; }
.price-table table:has(td:nth-child(3)) td:last-child { width: 16%; }
}
.price-table { margin-top: var(--space-xs); overflow-x: auto; }
@media (max-width: 560px) {
/* Ski-Opening-Tabellen (3 Spalten): Labels "bis 3 Tage"/"ab 4 Tagen" brauchen Platz,
sonst brechen die Zellen auf 4 Zeilen um */
.price-table table:has(td:nth-child(3)) { table-layout: fixed; }
.price-table table:has(td:nth-child(3)) td:nth-child(2) { width: 29%; text-align: right; padding-right: .5em; }
.price-table table:has(td:nth-child(3)) td:last-child { width: 30%; text-align: right; padding-right: .5em; }
.price-table table:has(td:nth-child(3)) td { padding-inline: .45em; font-size: .9375em; }
}
/* ============================================================
Formulare (.blh-form — Kontakt/Anfrage)
============================================================ */
.blh-form .widget { margin-bottom: .8rem; }
/* Floating Labels: Label liegt wie ein Platzhalter im Feld und schrumpft nach oben,
sobald fokussiert oder gefuellt (Leer-placeholder auf den Feldern -> :placeholder-shown) */
.blh-form :is(.widget-text, .widget-textarea, .widget-calendarfield) { position: relative; }
.blh-form :is(.widget-text, .widget-textarea, .widget-calendarfield) label {
position: absolute;
left: 1em;
top: 1em;
margin: 0;
font-size: var(--fs-body);
line-height: 1.3;
color: rgba(18, 18, 18, .55);
pointer-events: none;
transform-origin: left top;
transition: transform .16s ease, color .16s ease;
}
.blh-form :is(.widget-text, .widget-textarea, .widget-calendarfield):has(:is(input, textarea):focus) label,
.blh-form :is(.widget-text, .widget-textarea, .widget-calendarfield):has(:is(input, textarea):not(:placeholder-shown)) label {
transform: translateY(-.55em) scale(.68);
color: rgba(18, 18, 18, .65);
}
.blh-form input[type="text"],
.blh-form input[type="email"],
.blh-form input[type="tel"],
.blh-form textarea {
width: 100%;
font: inherit;
color: var(--c-ink);
background: var(--c-white);
border: 1px solid rgba(18, 18, 18, .25);
border-radius: 0;
padding: 1.45em 1em .55em;
transition: border-color .15s ease;
}
.blh-form input:focus, .blh-form textarea:focus { outline: none; border-color: var(--c-green); }
.blh-form textarea { min-height: 8em; resize: vertical; }
.blh-form fieldset { border: 0; padding: 0; margin: 0; background: none; }
.blh-form .widget-checkbox { font-size: var(--fs-small); }
.blh-form .widget-checkbox label { display: inline; font-size: inherit; margin: 0; }
.blh-form .widget-checkbox input { accent-color: var(--c-green); margin-right: .5em; }
.blh-form .widget-checkbox a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.blh-form button[type="submit"] {
display: inline-flex;
align-items: center;
gap: .7em;
padding: 1em 2em;
border: 1px solid currentColor;
border-radius: 999px;
font: inherit;
line-height: 1;
color: inherit;
background: transparent;
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.blh-form button[type="submit"]::before {
content: "";
width: .82em;
aspect-ratio: 20.244 / 10.416;
-webkit-mask: url("../../files/grafiken/icons/button-icon-black.svg") no-repeat center / contain;
mask: url("../../files/grafiken/icons/button-icon-black.svg") no-repeat center / contain;
background-color: currentColor;
}
.blh-form button[type="submit"]:hover { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
/* Honeypot: Feld unsichtbar aus dem Fluss (Hook lehnt gefuellte Submits ab) */
.blh-form .widget:has(> input.hp-field), .blh-form .hp-field {
position: absolute !important;
left: -9999px !important;
width: 1px; height: 1px;
overflow: hidden;
}
.blh-form .widget.error input, .blh-form .widget.error textarea { border-color: #A4453B; }
.blh-form p.error { color: #A4453B; font-size: var(--fs-small); margin: .35em 0 0; }
/* --- Anfrageformular: 2-spaltig, Sektions-Headings, Radio, Zimmer-Picker --- */
.form-wrap { max-width: 62rem; }
.blh-form--anfrage .formbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; align-items: start; }
.blh-form--anfrage .formbody > * { grid-column: 1 / -1; }
.blh-form--anfrage .formbody > .widget.w-half,
.blh-form--anfrage .formbody > .widget.w-quarter { grid-column: auto / span 1; }
@media (max-width: 640px) { .blh-form--anfrage .formbody > .widget.w-half, .blh-form--anfrage .formbody > .widget.w-quarter { grid-column: 1 / -1; } } /* Spezifitaet muss die w-half-Regel schlagen */
.blh-form .form-sec :is(h2, h3) { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-display-3); margin: 1.2em 0 .6em; }
.blh-form .formbody > div:first-of-type.form-sec :is(h2, h3) { margin-top: 0; } /* :first-child griff nicht — hidden inputs stehen davor */
.blh-form .widget-submit { margin-bottom: 0; }
.sitemap-tree ul { margin-bottom: 0; }
.sitemap-tree li:last-child { margin-bottom: 0; }
/* Radio-Gruppe minimal inline (User-Entscheid): zwei Custom-Radios mit Labels nebeneinander,
keine Gruppe-Beschriftung. Markup: fieldset.radio_container > legend + span(input+label) */
.blh-form .radio_container { border: 0; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6em 2.5rem; }
.blh-form .radio_container > legend {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.blh-form .radio_container > span { display: inline-flex; align-items: center; gap: .55em; }
.blh-form .radio_container > span label { margin: 0; font-size: var(--fs-body); cursor: pointer; }
.blh-form .radio_container input {
appearance: none;
width: 1.25em;
height: 1.25em;
margin: 0;
border: 1px solid rgba(18, 18, 18, .4);
border-radius: 50%;
background: var(--c-white);
display: grid;
place-content: center;
cursor: pointer;
transition: border-color .15s ease;
}
.blh-form .radio_container input::before {
content: "";
width: .6em;
height: .6em;
border-radius: 50%;
background: var(--c-green);
transform: scale(0);
transition: transform .12s ease;
}
.blh-form .radio_container input:checked { border-color: var(--c-green); }
.blh-form .radio_container input:checked::before { transform: scale(1); }
.blh-form .radio_container input:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }
.blh-form select {
appearance: none;
width: 100%;
font: inherit;
color: var(--c-ink);
background: var(--c-white);
border: 1px solid rgba(18, 18, 18, .25);
border-radius: 0;
padding: .75em 2.6em .75em .9em;
transition: border-color .15s ease;
cursor: pointer;
}
.blh-form select:focus { outline: none; border-color: var(--c-green); }
.blh-form select:disabled { opacity: .45; cursor: not-allowed; }
/* Select-Wrapper traegt das Dach-Chevron (Selects koennen keine Pseudo-Elemente) */
.rp-selectwrap { position: relative; display: block; }
.rp-selectwrap::after {
content: "";
position: absolute;
right: 1em;
top: 50%;
width: .82em;
aspect-ratio: 20.244 / 10.416;
translate: 0 -50%;
transform: rotate(180deg);
-webkit-mask: url("../../files/grafiken/icons/button-icon-black.svg") no-repeat center / contain;
mask: url("../../files/grafiken/icons/button-icon-black.svg") no-repeat center / contain;
background-color: var(--c-ink);
pointer-events: none;
}
.rp-selectwrap:has(select:disabled)::after { opacity: .45; }
/* Personen-Zelle: Select + (bei "Individuelle Anzahl") Freitext-Zahlenfeld gestapelt */
.rp-personcell { display: grid; gap: .5rem; }
.rp-roomcell { display: grid; }
.rp-custom, .rp-roomcount {
width: 100%;
font: inherit;
color: var(--c-ink);
background: var(--c-white);
border: 1px solid rgba(18, 18, 18, .25);
border-radius: 0;
padding: .75em .9em;
transition: border-color .15s ease;
display: none; /* nur im Custom-Modus sichtbar (siehe .rp-row--custom) */
}
.rp-custom:focus, .rp-roomcount:focus { outline: none; border-color: var(--c-green); }
/* Individuelle Anzahl: Personen-Zahlenfeld + "Anzahl Zimmer" statt Zimmer-Dropdown */
.room-picker__row.rp-row--custom .rp-custom,
.room-picker__row.rp-row--custom .rp-roomcount { display: block; }
.room-picker__row.rp-row--custom .rp-roomwrap { display: none; }
/* Individuelle Anzahl: "+ Zimmer hinzufuegen" ausblenden */
.room-picker.rp-has-custom .room-picker__add { display: none; }
.room-picker__row {
position: relative;
display: grid;
grid-template-columns: minmax(9em, 1fr) 2fr;
gap: .6rem;
align-items: center;
margin-bottom: .6rem;
}
/* Remove-Button ausserhalb der Feldflucht — Zimmer-Select endet buendig mit den anderen Feldern */
.room-picker__row .rp-remove { position: absolute; right: -2.2em; top: 50%; translate: 0 -50%; }
@media (max-width: 640px) {
.room-picker__row { grid-template-columns: 1fr; }
/* Platz fuer den Entfernen-Button nur, wenn es mehrere Zeilen gibt */
.room-picker__rows:has(> :nth-child(2)) .room-picker__row { padding-right: 2em; }
.room-picker__row .rp-remove { right: -.4em; }
}
.rp-remove {
border: 0;
background: none;
font-size: 1.5rem;
line-height: 1;
padding: .2em .35em;
cursor: pointer;
color: rgba(18, 18, 18, .55);
}
.rp-remove:hover { color: var(--c-ink); }
.room-picker__add {
border: 0;
background: none;
font: inherit;
font-size: var(--fs-small);
padding: .2em 0;
cursor: pointer;
color: var(--c-green);
text-decoration: underline;
text-underline-offset: .18em;
}
.room-picker__add:hover { color: var(--c-ink); }
.blh-form .widget-calendarfield input { background-image: none; }
/* Kurze Seiten: Footer klebt unten (statt Weissraum unterm Footer) */
#wrapper { min-height: 100svh; display: flex; flex-direction: column; }
#container { flex: 1 0 auto; }
/* Sitemap-Baum (Modul mod_sitemap): eingerueckte Ebenen, Links wie Prosa */
.sitemap-tree ul { list-style: none; margin: 0; padding: 0; }
.sitemap-tree ul ul { padding-left: 1.5rem; }
.sitemap-tree li { margin: .45em 0; }
.sitemap-tree a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.sitemap-tree a:hover { text-decoration-thickness: 2px; }
/* Rechtstexte: lesbare Zeilenlaenge + gestylte Zwischentitel */
.prose-narrow :is(p, li) { overflow-wrap: anywhere; } /* lange URLs (Datenschutz) brechen statt zu ueberlaufen */
.prose-narrow { max-width: 56rem; }
.prose-narrow h1 {
margin: 0 0 .45em;
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(2.2rem, 3.1vw, 3.75rem);
line-height: 1;
}
.prose-narrow h2 {
margin: var(--space-lg) 0 .4em;
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(1.6rem, 1.9vw, 2.3rem);
line-height: 1;
}
.prose-narrow h3 {
margin: var(--space-md) 0 .35em;
font-family: var(--ff-display);
font-weight: 500;
font-size: clamp(1.3rem, 1.5vw, 1.8rem);
line-height: 1.05;
}
/* Anfahrtsplan: selbst gehostetes Leaflet + OSM-Tiles (wie live/con4gis, ohne dessen Stack).
Verhalten wie live: KEIN Wheel-Zoom (nur +/- Buttons), Desktop-Drag pannt;
Touch-Geraete bekommen Zwei-Finger-Gestensteuerung (gesture-handling). */
.map-embed .osm-map { width: 100%; height: clamp(320px, 36vw, 560px); }
.map-embed { margin-top: clamp(1.5rem, 3vw, 4rem); } /* Abstand zur SVG-Karte darüber; 20.08. reduziert (User: weniger Platz über der Karte) */
/* Webcam-Embeds (Live-Bild + feratel-iframe) */
.webcam-embed img, .webcam-embed iframe { width: 100%; border: 0; display: block; }
.webcam-embed img { height: auto; max-width: 640px; } /* Hotel-Cam liefert nur 640x480 — nicht hochskalieren */
/* Impressionen: Galerie-Raster (Core gallery-CE, 3 Spalten, Lightbox via fullsize) */
.gallery-grid ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--room-gap); list-style: none; margin: 0; padding: 0; }
.gallery-grid li { margin: 0; }
.gallery-grid figure { margin: 0; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991px) { .gallery-grid ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gallery-grid ul { grid-template-columns: 1fr; } }
/* Dual-CTA — zwei Blöcke nebeneinander (Wohnen / Genuss) */
.cta-dual { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 13.44vw, 16.125rem); } /* XD: 258 */
.cta-dual > * { min-width: 0; }
.cta-block .content-image img { width: 100%; }
.cta-block h2 { margin-top: var(--space-md); }
/* umgekehrter Block: Ueberschrift oben, Bild unten */
.cta-block--rev h2 { margin-top: clamp(2rem, 3.91vw, 4.7rem); } /* XD: Heading 75 unter Sektionsstart */
.cta-block--rev .content-image { margin-top: var(--space-md); width: 73%; } /* XD: 588/806, Luft rechts */
@media (max-width: 991px) {
.cta-dual { grid-template-columns: 1fr; row-gap: var(--space-xl); }
/* gestapelt sollen BEIDE Kacheln Bild -> Heading -> Button lesen (Desktop-.--rev hat Bild unten) */
.cta-block--rev { display: flex; flex-direction: column; }
.cta-block--rev .content-image { order: -1; margin-top: 0; width: 100%; }
.cta-block--rev h2 { margin-top: var(--space-md); }
}
/* Media-Text: Bild fuellt die Texthoehe (kein fixes Ratio; Text setzt die Hoehe) */
.sec-fill { align-items: stretch; }
.sec-fill .content-image,
.sec-fill .content-image figure { height: 100%; margin: 0; display: block; }
.sec-fill .content-image img,
.sec-fill .content-image picture { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Slider fuellen ebenfalls die Texthoehe */
.sec-fill .content-swiper, .sec-fill .content-swiper .swiper, .sec-fill .content-swiper .swiper-wrapper { height: 100%; }
.sec-fill .swiper-slide { height: 100%; }
.sec-fill .swiper-slide figure, .sec-fill .swiper-slide .content-image { height: 100%; margin: 0; }
.sec-fill .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Textblock mit grossem Abstand oben/unten -> bestimmt die (Bild-)Hoehe (nur Desktop, s. u.) */
/* Media-Text-Sektionen: feste Mindesthoehe, Textspalte vertikal ZENTRIERT (User 05.08.).
Medien fuellen die Zelle absolut und diktieren die Zeilenhoehe nicht mehr;
waechst der Text, waechst die Sektion (col-pad-y = Wachstums-Puffer). */
@media (min-width: 992px) {
.col-pad-y { padding-block: clamp(3rem, 6.5vw, 8.5rem); } /* Zentrierpuffer; gestapelt (mobil) ohne -- addierte sich sonst zum Spaltenabstand (User 17.09.) */
.sec-media-text.sec-fill { min-height: 90svh; }
.sec-fill > .col-pad-y { display: flex; flex-direction: column; justify-content: center; }
.sec-fill > div:has(> .content-swiper), .sec-fill > div:has(> .content-image) { position: relative; min-height: 100%; }
.sec-fill > div:has(> .content-swiper) > .content-swiper,
.sec-fill > div:has(> .content-image) > .content-image { position: absolute; inset: 0; }
}
@media (max-width: 991px) {
.sec-fill .content-image, .sec-fill .content-image img, .sec-fill .content-swiper img { height: auto; }
.sec-fill .content-swiper img { aspect-ratio: 1; } /* Slider mit Hoch- + Querformat sprangen mobil (233 vs 525px) -> alle Slides quadratisch + cover wie am Desktop (User 17.09.) */
}
/* Media-Text-Sektionen: Medienspalte breiter als die Textspalte, damit das hohe Bild/der
Slider auf grossen Screens nicht als schmaler Streifen wirkt (User: zu schmal auf grossen
Screens, 18.08.). Ordnungs-agnostisch: die Spalte MIT dem Medium (erstes ODER letztes Kind)
bekommt 58%, der Text 42%. Trifft ausschliesslich .sec-media-text.sec-fill mit direktem
Medien-Kind; Text|Text-Sektionen und Mobil (<992px, einspaltig) bleiben unveraendert. */
@media (min-width: 992px) {
.sec-media-text.sec-fill:has(> div:first-child > :is(.content-image, .content-swiper)) {
grid-template-columns: 0.58fr 0.42fr;
}
.sec-media-text.sec-fill:has(> div:last-child > :is(.content-image, .content-swiper)) {
grid-template-columns: 0.42fr 0.58fr;
}
}
/* Heustadl Momente: rechte Spalte (Dessert + Titel) vertikal zentriert + Luft oben */
.media-flush-left > .col-center { align-self: center; }
.col-center > :last-child { margin-bottom: 0; } /* letzte Headline ohne Unterrand -> sichtbare Zentrierung symmetrisch */
/* Textspalte weiter eingerueckt (Design: Text beginnt ~10% v.l.; Bild bleibt buendig rechts) */
.col-inset { margin-left: clamp(1.5rem, 8vw, 10rem); }
@media (max-width: 991px) { .col-inset { margin-left: 0; } }
/* Text-RECHTS-Variante (Media zuerst im DOM): Einzug spiegeln — Luft gehoert nach aussen (rechts),
nicht zwischen Media und Text (User 05.08., Philosophie/Winteraktiv/Kinderland) */
@media (min-width: 992px) {
.sec-fill > div:has(> .content-swiper, > .content-image) ~ .col-inset { margin-left: 0; margin-right: clamp(1.5rem, 8vw, 10rem); }
}
/* Hero-Banner: Headline vertikal zentriert (Design) — nur Heustadl, NICHT die Zimmer-Heroes (bottom-anchored) */
.hero-claim--vcenter { top: 50%; bottom: auto; left: var(--wrap-pad); right: auto; text-align: left; transform: translateY(-50%); z-index: 2; }
.hero-claim--vcenter :is(h1, h2, p) { margin: 0; font-size: var(--fs-display-1-fluid); line-height: .917; color: var(--c-white); }
.hero-claim--hero.hero-claim--vcenter :is(h1, h2, p) { font-size: var(--fs-hero-fluid); line-height: .933; } /* Startseiten-Claim: Hero-Skala 150 wie --br */
/* Heustadl-Intro (Seite 14, Artikel 401 .heustadl-tr): gruenes Heustadl-Logo LINKS unter
der Headline, Unterkante buendig mit den Buttons (User 18.09.). Die Buttons sitzen an der
Unterkante der (hoeheren) Textspalte -> Logo absolut an .intro-split mit bottom:0 = Buttons. */
.heustadl-tr .intro-split { position: relative; }
.heustadl-tr .intro-split::after {
content: "";
position: absolute;
z-index: 2;
left: var(--wrap-pad); /* linksbuendig mit der Headline (Wrap-Innenabstand) */
bottom: 0;
width: clamp(8rem, 13vw, 15rem); /* Basis (auch gestapelt <=991px: ~128px) */
aspect-ratio: 140.2 / 145.7;
background: url("../../files/grafiken/heustadl_logo_green.svg") no-repeat left bottom / contain;
}
/* Desktop 992–1449px: Logo etwas groesser; ab 1450px wieder etwas kleiner (User 18.09.) */
@media (min-width: 992px) {
.heustadl-tr .intro-split::after { width: clamp(11rem, 16vw, 14.5rem); }
}
@media (min-width: 1450px) {
.heustadl-tr .intro-split::after { width: clamp(13.3rem, 12.5vw, 15rem); }
}
/* Gestapelt (<=991px): Logo sichtbar, ueber der Headline (order:-1 holt das ::after im
1-spaltigen Grid nach ganz oben) und etwas groesser als auf dem Desktop-Basiswert. */
@media (max-width: 991px) {
.heustadl-tr .intro-split::after {
position: static;
order: -1;
justify-self: start;
width: clamp(8.5rem, 37vw, 10.5rem);
margin: 0 0 var(--space-md);
}
}
/* Phone (<=767px): Logo noch etwas kleiner (User 18.09.) */
@media (max-width: 767px) {
.heustadl-tr .intro-split::after { width: clamp(7.5rem, 32vw, 9.5rem); }
}
/* ============================================================
Cookiebar (oveleon 2.3, Template cookiebar/default) — Haus-Look:
Karte unten, Display-Headline, Ink-Text, Akzeptieren = gruen, Speichern = Outline,
kein Schliessen-X (wird vom Bundle-JS unbedingt injiziert -> per CSS weg).
Datei bleibt unlayered wie die Bundle-default.css, sonst verlieren die Regeln.
============================================================ */
.contao-cookiebar { --ccb-bg: var(--c-white); --ccb-focus-clr: var(--c-green); font-family: var(--ff-body); color: var(--c-ink); }
.contao-cookiebar .cc-inner { max-width: 44rem; padding: 2rem 2.25rem; border-radius: 1.25rem; box-shadow: 0 12px 40px rgba(18, 18, 18, .18); font-size: var(--fs-small); line-height: 1.45; }
.contao-cookiebar .cc-head h3 { margin: 0 0 .5rem; font-family: var(--ff-display); font-weight: 400; font-size: var(--fs-lead-lg); line-height: 1.05; color: var(--c-ink); }
.contao-cookiebar .cc-head p { margin: 0; }
.contao-cookiebar .cc-btn { border-radius: 999px; padding: .85em 1.6em; font-family: var(--ff-body); font-size: var(--fs-small); font-weight: 500; line-height: 1; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.contao-cookiebar .cc-footer .cc-btn.save { background: transparent; border: 1px solid var(--c-ink); color: var(--c-ink); }
.contao-cookiebar .cc-footer .cc-btn.save:hover { background: var(--c-beige); }
.contao-cookiebar .cc-footer .cc-btn.success { background: var(--c-green); border-color: var(--c-green); color: var(--c-white); }
.contao-cookiebar .cc-footer .cc-btn.success:hover { background: var(--c-sage); border-color: var(--c-sage); color: var(--c-ink); }
.contao-cookiebar .cc-info a { color: var(--c-green); text-decoration: none; }
.contao-cookiebar .cc-info a:hover { text-decoration: underline; }
.contao-cookiebar .cc-close { display: none; }
/* OSM-Karte: Placeholder bis zur Zustimmung (Leaflet-Init haengt am Cookie „OpenStreetMap") */
.osm-map__consent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md, 1.5rem); height: 100%; min-height: 24rem; padding: var(--space-lg, 2rem); background: var(--c-beige); text-align: center; }
.osm-map__consent p { margin: 0; max-width: 32rem; }