/* De Google Fonts-import stond hier als @import. Dat is een extra wachtronde: de browser
haalt eerst dit bestand op, ontdekt dan pas de import en gaat opnieuw op pad. GTmetrix
noemde het bij de top-issues ("Avoid CSS @import", FCP en LCP). Hij staat nu als gewone
link in de kop, met preconnect ervoor, zodat hij parallel laadt. Zie chamanna-fonts.php. */
/* ===== trouwe kloon chamanna.at ===== */
body{font-family:"Open Sans",sans-serif;color:#4e4849;font-size:15px;line-height:1.65;background:#fff}
a{color:#b62b41;text-decoration:none}
a:hover{color:#b62b41;text-decoration:none}
.ast-container{max-width:1000px !important}
h1,h2,h3,h4{font-family:"Open Sans Condensed","Open Sans",sans-serif;font-weight:300;color:#4e4849}
h1{font-size:25px} h2{font-size:21px} h3{font-size:18px} h4{font-size:17px}
.entry-content h1,.entry-content h2,.entry-content h3,h1,h2,h3{font-family:"Open Sans Condensed","Open Sans",sans-serif !important;font-weight:300 !important}
.entry-content h4{font-weight:700}
/* ===== compacte donkere kopbalk, eigen brede container ===== */
.site-header{background:#5b5556;box-shadow:none}
.ast-primary-header-bar,.main-header-bar{background:#5b5556 !important;border-bottom:0;padding:0}
.site-header .ast-container{max-width:1100px !important}
.ast-primary-header-bar{min-height:130px}
/* logo: wit kader dat over de slider hangt, zonder site-titel ernaast */
.site-title,.site-description{display:none !important}
.site-branding{
background:#fff;width:228px;height:213px;display:flex;align-items:center;justify-content:center;
padding:0;margin:0 60px -96px 0;align-self:flex-start;position:relative;z-index:60;box-shadow:0 0 21px rgba(0,0,0,.58)}
.custom-logo,.site-branding img{width:136px !important;height:auto !important;max-width:136px !important;max-height:none !important}
/* menu: één regel, kapitaal, groot zoals het origineel */
.main-header-menu{flex-wrap:nowrap}
.main-header-menu > .menu-item{align-items:stretch}
.main-header-menu > .menu-item > .menu-link{
font-family:"Open Sans Condensed","Open Sans",sans-serif;font-weight:300;font-size:22px;
letter-spacing:.03em;color:#fff !important;text-transform:uppercase;
padding:0 20px;min-height:130px;display:flex;align-items:center}
.main-header-menu > .menu-item:hover > .menu-link,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link{background:#494344;color:#fff !important}
/* uitklaplijst: wit met donkere kapitalen, zoals het origineel */
.main-header-menu .sub-menu{background:#fff !important;box-shadow:0 6px 18px rgba(0,0,0,.25);width:200px}
.main-header-menu .sub-menu .menu-item{background:#fff}
.main-header-menu .sub-menu .menu-link{
font-family:"Open Sans Condensed","Open Sans",sans-serif;font-weight:300;font-size:17px;
text-transform:uppercase;letter-spacing:.03em;color:#4e4849 !important;
background:#fff !important;min-height:0;padding:13px 22px;display:block}
.main-header-menu .sub-menu .menu-link:hover{color:#b62b41 !important}
/* geen pijltjes bij de hoofdmenu-items, zoals het origineel */
.ast-header-navigation-arrow,.main-header-menu .menu-item .dropdown-menu-toggle,.main-header-menu .sub-arrow{display:none !important}
.ast-mobile-menu-buttons .menu-toggle{color:#fff}
/* ===== de grote fotoslider ===== */
.cha-slider{position:relative;width:100%;height:clamp(460px,86vh,940px);overflow:hidden;background:#3a3536}
.cha-slide{position:absolute;inset:0;background-size:cover;background-position:center;
opacity:0;transition:opacity 1.1s ease;display:flex;align-items:center;justify-content:center}
.cha-slide.aan{opacity:1}
.cha-cap{
font-family:Georgia,"Times New Roman",serif;color:#fff;font-weight:400;text-align:center;padding:0 70px;
font-size:clamp(22px,3.2vw,40px);line-height:1.3;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.cha-pijl{
position:absolute;top:50%;transform:translateY(-50%);z-index:5;
width:46px;height:46px;border:0;cursor:pointer;font-size:24px;line-height:1;
background:rgba(43,38,39,.85);color:#fff;transition:background .2s}
.cha-pijl:hover{background:rgba(43,38,39,1)}
.cha-vorige{left:16px}
.cha-volgende{right:16px}
@media(max-width:920px){
.ast-primary-header-bar{min-height:76px}
.main-header-menu > .menu-item > .menu-link{min-height:76px}
.site-branding{width:150px;height:140px;padding:0;margin:0 14px -58px 0;box-shadow:0 0 16px rgba(0,0,0,.5)}
.custom-logo,.site-branding img{width:90px !important;height:auto !important;max-width:90px !important;max-height:none !important}
.cha-slider{height:60vh}
.cha-cap{padding:0 56px}
}
/* inhoud */
.entry-header{display:none}
.cha-links a{color:#b62b41;font-weight:600}
.cha-links a::before{content:"203A 0a0";font-weight:700}
.cha-list{list-style:none;padding-left:2px}
.cha-list li{padding-left:16px;position:relative;margin-bottom:6px}
.cha-list li::before{content:"2022";color:#b62b41;position:absolute;left:0}
.entry-content ul:not(.cha-list) li::marker{color:#b62b41}
.wp-block-button__link{border-radius:3px;padding:10px 22px;font-size:15px}
.has-chamanna-rot-background-color{background-color:#b62b41 !important}
.entry-content .wp-block-button__link:not(.has-background){background:#b62b41;color:#fff}
.wp-block-button.is-style-outline .wp-block-button__link{border-color:#b62b41;color:#b62b41}
/* ===== voettekst: bergbeeld als brede achtergrond, tekst erin ===== */
.cha-footer{
width:100%;margin-top:56px;background-color:#2f2a2b;background-size:cover;background-position:center;
color:#e6e1e2;text-align:center}
.cha-footer-binnen{
max-width:720px;margin:0 auto;padding:64px 20px 44px;line-height:1.9;font-size:14px;
text-shadow:0 1px 6px rgba(0,0,0,.6)}
.cha-footer strong{color:#fff;letter-spacing:.08em}
.cha-footer a{color:#f2b9c1}
.cha-footer a:hover{color:#fff}
.cha-partners{display:flex;gap:18px;justify-content:center;align-items:center;margin-bottom:20px}
.cha-partners img{height:34px;width:auto;background:rgba(255,255,255,.92);padding:4px 8px;border-radius:3px}
.cha-service{margin-top:10px}
.cha-demo{margin-top:16px;font-size:11.5px;color:#b7aeb0}
.site-footer{display:none}
/* appartementfotos netjes als liggende kamerfoto */
.entry-content .wp-block-image{margin:16px 0 22px}
.entry-content .wp-block-image img{width:100%;max-width:560px;aspect-ratio:3/2;object-fit:cover;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
/* ===== appartement: gekleurde navblokken ===== */
.cha-appnav{display:grid;grid-template-columns:repeat(4,1fr);gap:49px;margin:0 0 80px}
.cha-appblock{display:flex;flex-direction:column;text-decoration:none;border-radius:0;overflow:visible;background:var(--c,#ccc);box-shadow:none !important;opacity:1;cursor:pointer;position:relative}
/* Punt 2, 16 sep 2026. Het origineel zet onder de gekozen tegel een dubbel pijltje,
een vak van 175 bij 30 met greyarrow.png erin. Wij hangen dat als ::after onder
elke tegel en tonen alleen die van de gekozen. Daarom staat overflow hierboven op
visible; met hidden werd het pijltje door de tegel afgesneden. */
.cha-appblock::after{content:"";position:absolute;left:0;right:0;top:100%;height:30px;
background:url(/wp-content/uploads/orig/greyarrow.png) center center no-repeat;opacity:0}
/* geen zweefstand op de tegels: het origineel verandert alleen de muisaanwijzer, design.css 306-312 heeft cursor:pointer en verder niets */
/* Geen eigen markering op de gekozen tegel. Het origineel houdt alle vier de tegels op volle kleur en toont de keuze alleen met het grijze dubbele pijltje eronder. Gemeten 17 sep 2026. */
/* Op de losse appartementspagina's bestaat er geen :target, daar draagt de gekozen tegel
de klasse active. Het dubbele pijltje eronder hing alleen aan de :target-regels verderop,
dus zonder deze regel bleef het daar onzichtbaar. */
.cha-appblock.active::after{opacity:1}
.cha-appthumb{display:block;aspect-ratio:230/70;background-size:cover;background-position:center}
.cha-appblock .cha-applabel{padding:70px 0 25px;text-align:center;color:#fff;font-family:"Open Sans Condensed","Open Sans",sans-serif;font-size:20px;line-height:30px;text-transform:capitalize}
.cha-applabel b{display:block;font-size:25px;font-weight:700;line-height:25px}
/* ==================================================================
DE TEGELS EN DE TEASER OP DE TELEFOON, 17 september 2026
Twee dingen die Stefan op zijn eigen toestel zag.
1. De vier tegels stonden twee naast elkaar en liepen rechts van het scherm af. Ze horen
onder elkaar. Vier tegels op hun volle hoogte zou een halve meter scrollen worden voor
je bij de tekst bent, dus de foto en de vulling gaan mee omlaag.
2. De inleidende alinea staat op 25 px in de smalle letter. Op een breed scherm klopt dat
en volgt het het origineel, maar op een telefoon is het veel te groot. Het mobiele
sjabloon van chamanna.at zet zijn eigen accenttekst
(.bh-styleclass-highlight, mobile.css regel 445) op 20 px met regelhoogte 30. Dat nemen
we hier een op een over.
================================================================== */
@media(max-width:781px){
.cha-appnav{grid-template-columns:1fr;gap:14px;margin:0 0 30px}
.cha-appthumb{height:60px;aspect-ratio:auto}
.cha-appblock .cha-applabel{padding:10px 0 12px;font-size:15px;line-height:20px}
.cha-applabel b{font-size:19px;line-height:22px}
.cha-appblock::after{height:18px;background-size:auto 12px}
}
/* ===== fotogalerij (8 klikbare foto's) ===== */
.cha-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 49px;margin:6px 0 30px}
.cha-gal-item{display:block;position:relative;cursor:zoom-in;border-radius:0;overflow:hidden;background:#eee;aspect-ratio:3/2}
.cha-gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
/* geen inzoomen bij aanwijzen: het origineel legt er een vlak van 30 procent wit met een plusteken overheen, zie a[href] .bhImageHover in design.css 291-296 */
.cha-gal-item::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
@media(max-width:781px){.cha-gal{grid-template-columns:repeat(2,1fr);gap:8px}}
/* ===== lightbox ===== */
.cha-lb{position:fixed;inset:0;z-index:99999;background:rgba(17,15,16,.94);display:none;align-items:center;justify-content:center}
.cha-lb.open{display:flex}
.cha-lb-img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 10px 50px rgba(0,0,0,.6);border-radius:2px}
.cha-lb button{position:absolute;background:rgba(255,255,255,.10);color:#fff;border:0;cursor:pointer;font-size:30px;line-height:1;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.cha-lb button:hover{background:rgba(255,255,255,.25)}
.cha-lb-x{top:18px;right:18px;font-size:34px}
.cha-lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.cha-lb-next{right:14px;top:50%;transform:translateY(-50%)}
.cha-lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-family:"Open Sans",sans-serif;font-size:14px;letter-spacing:.05em;opacity:.85}
@media(max-width:781px){.cha-lb button{width:46px;height:46px;font-size:24px}.cha-lb-img{max-width:96vw;max-height:80vh}}
/* ===== prijstabel ===== */
.cha-preis-wrap{margin:14px 0 8px;overflow-x:auto}
.cha-preis-titel{font-family:"Open Sans Condensed","Open Sans",sans-serif;color:#b62b41;text-align:center;font-size:24px;font-weight:400;line-height:normal;margin:0 0 15px}
.cha-preis{width:100%;border-collapse:collapse;font-family:"Open Sans",sans-serif;font-size:15px;min-width:520px;margin:0 0 30px}
.cha-preis th,.cha-preis td{padding:7px 0;border-bottom:1px solid #c9c9c9;text-align:left;vertical-align:middle}
.cha-preis thead th{border-bottom:1px solid #c9c9c9;color:#4e4849;font-weight:400;font-size:15px;text-align:left}
.cha-preis thead th.p,.cha-preis thead th.d{text-align:left}
.cha-preis td.p{color:#b62b41;font-weight:700;white-space:nowrap} @media(min-width:922px){.cha-preis td.p{width:400px}.cha-preis td.d{width:300px}}
.cha-preis td.d{color:#4e4849;white-space:nowrap}
.cha-preis td.pr{font-weight:700;text-align:left;white-space:nowrap;color:#4e4849}
.cha-preis-note{font-size:15px;color:#4e4849;margin-top:14px}
/* mobiel menu leesbaar maken: donkere tekst op witte drawer */
@media (max-width:921px){
.ast-mobile-popup-drawer .main-header-bar-navigation, .ast-mobile-popup-drawer .main-header-menu, .ast-mobile-popup-drawer{background:#fff !important}
.ast-mobile-popup-drawer .main-header-menu .menu-link, .main-header-menu .menu-link, .main-header-menu > .menu-item > .menu-link{color:#4e4849 !important; background:transparent !important; min-height:0 !important; padding:15px 22px !important; display:block; border-bottom:1px solid #ece8e2}
.ast-mobile-popup-drawer .sub-menu .menu-link{color:#6a6465 !important; padding-left:34px !important}
.ast-mobile-popup-drawer .ast-menu-toggle{color:#4e4849 !important}
}
/* logo nooit ingedrukt: vaste beeldverhouding, niet door flex vervormd (elk formaat) */
.custom-logo,.site-branding img{flex:0 0 auto !important;object-fit:contain !important;aspect-ratio:1362 / 1025 !important;max-height:none !important}
.site-branding,.custom-logo-link,.site-branding .site-logo-img{flex:none !important}
/* menu passend en schaalbaar, niet afkappen (na taalpil) */
.site-header .ast-container{max-width:1340px !important}
.main-header-menu{flex-wrap:nowrap}
.main-header-menu > .menu-item > .menu-link{white-space:nowrap !important; padding:0 15px !important; font-size:20px !important}
@media (max-width:1250px){ .main-header-menu > .menu-item > .menu-link{font-size:17px !important; padding:0 11px !important} .cha-taal{margin-left:8px} }
/* logo symmetrisch op elk formaat: relatief aan de witte kaart i.p.v. vaste px */
.custom-logo,.site-branding img{width:60% !important;max-width:60% !important;height:auto !important}
/* openklapmenu gezelliger: licht warmgrijs, in lijn met de donkere bovenbalk */
@media (max-width:921px){
.ast-mobile-popup-drawer,.ast-mobile-popup-drawer .main-header-bar-navigation,.ast-mobile-popup-drawer .main-header-menu{background:#e7e4e2 !important}
.ast-mobile-popup-drawer .main-header-menu .menu-link{background:transparent !important;border-bottom:1px solid #d6d1cd}
.ast-mobile-popup-drawer .sub-menu .menu-link{background:transparent !important}
}
/* ===================================================================
EXACT ORIGINEEL · waarden 1:1 uit design.css van chamanna.at
(staat bewust ONDERAAN zodat dit alles hierboven overschrijft)
=================================================================== */
/* ---- balk + 980px-layout + menu onderin de balk (alleen desktop) ---- */
@media(min-width:922px){
.site-header{background:#656060 !important}
.ast-primary-header-bar,.main-header-bar{background:#656060 !important;position:relative}
.site-header .ast-container{max-width:980px !important;padding:0 !important}
.ast-primary-header-bar{min-height:120px !important}
.site-header .ast-builder-grid-row{display:flex !important;justify-content:flex-start;align-items:stretch}
.site-header-primary-section-left{flex:0 0 auto}
.site-header-primary-section-right{flex:1 1 auto;justify-content:flex-start !important}
.site-branding{margin:0 2px -93px -10px !important}
.main-header-menu{align-items:flex-end}
.main-header-menu > .menu-item{margin:0 5px 0 15px !important} .main-header-menu > .menu-item:not(.cha-taal-item){padding-top:70px !important}
.main-header-menu > .menu-item > .menu-link{
font-size:22px !important;font-weight:300 !important;letter-spacing:0 !important;
padding:0 15px !important;min-height:0 !important;line-height:50px !important;
display:block !important;white-space:nowrap !important}
.main-header-menu > .menu-item:hover > .menu-link{background:transparent !important} .main-header-menu > .menu-item > .menu-link:hover{background:rgba(255,255,255,.4) !important;color:#fff !important}
.main-header-menu > .menu-item.current-menu-item,
.main-header-menu > .menu-item.current-menu-ancestor{
background:#4e4849 !important;box-shadow:inset 0 0 16px rgba(0,0,0,.2)}
/* Het origineel zet de markering van de huidige pagina op het lijstitem, dus over de volle
120 px van de balk, en de oplichting bij aanwijzen op de link van 50 px. Die twee horen
dus uit elkaar. De link zelf doorzichtig maken, anders legt de regel hierboven in dit
bestand daar nog #494344 overheen als een pilletje van 50 px. */
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link{background:transparent !important}
.main-header-menu .sub-menu{background:#fff !important;box-shadow:none !important;min-width:200px !important;width:auto !important;border:0 !important}
.main-header-menu .sub-menu .menu-link{font-size:20px !important;line-height:40px !important;padding:0 20px !important;color:#656160 !important;font-weight:300 !important}
.main-header-menu .sub-menu .menu-item:first-child > .menu-link{padding-top:20px !important}
.main-header-menu .sub-menu .menu-item:last-child > .menu-link{padding-bottom:20px !important}
.main-header-menu .sub-menu .menu-link:hover{background:rgba(255,255,255,.4) !important;color:#656160 !important}
.cha-taal-item{position:absolute;right:14px;top:0;height:120px;display:flex;align-items:center}
}
/* ---- fotoband: 45vw hoog, Playfair-bijschrift donkergrijs, beeldpijlen op de rand ---- */
.cha-slider{height:45vw !important}
.cha-slide{transition:opacity 1s !important}
.cha-cap{font-family:'Playfair Display',Georgia,serif !important;font-size:33px !important;line-height:33px !important;color:#4e4849 !important;text-shadow:none !important;font-weight:400 !important;padding:0 90px}
.cha-pijl{width:80px !important;height:100% !important;top:0 !important;transform:none !important;
background-color:transparent !important;background-repeat:no-repeat !important;background-position:center center !important;
color:transparent !important;font-size:0 !important;border:0}
/* geen hover op de sliderpijlen; chamanna.at heeft geen regel voor .cssFaderArrow:hover */
.cha-vorige{left:0 !important;background-image:url(/wp-content/uploads/orig/fadePrev.png) !important}
.cha-volgende{right:0 !important;background-image:url(/wp-content/uploads/orig/fadeNext.png) !important}
/* ---- content: 980px, 30px boven, 350px onder (origineel), regelafstand 25px ---- */
.ast-container{max-width:980px !important}
/* Astra zet 20px binnenmarge links en rechts in de container. Daardoor was de tekstkolom
940px in plaats van de 980px van het origineel, brak elke alinea eerder af en werd elke
pagina 14 tot 21 procent langer dan chamanna.at. Boven de mobiele grens gaat die marge
eraf, zodat de regelval precies gelijk loopt. (13 sep 2026) */
@media(min-width:991px){
.site-content .ast-container{padding-left:0 !important;padding-right:0 !important}
}
.site-content{padding-top:20px}
/* Die 350px was bedoeld als de ruimte waar op het origineel de bergenband staat. In de
nabouw staat die band als eigen voetblok eronder, dus de ruimte kwam er twee keer:
eerst 350px wit en daarna pas de bergen. Op chamanna.at zit er 35px tussen de laatste
regel en de band, dus dat is nu ook de maat hier. (13 sep 2026) */
#primary{padding-bottom:40px !important} .page-id-26 .entry-content iframe{box-sizing:content-box}
body{line-height:25px}
.entry-content p{margin-bottom:30px}
.entry-content p > a{font-weight:700}
/* ---- koppen: Playfair; h2 rood en gecentreerd (subpagina's), zoals origineel ---- */
.entry-content h1,.entry-content h2,.entry-content h3,h1,h2,h3{font-family:'Playfair Display',Georgia,serif !important;font-weight:400 !important}
h2,.entry-content h2{color:#b62b41 !important;font-size:24px !important;text-align:center;margin-bottom:30px !important}.entry-content .cha-anfr .cha-anfr-kop{font-size:25px !important;font-weight:300 !important;margin-bottom:0 !important}
h1,.entry-content h1{color:#4e4849;font-size:30px}
/* ---- home-teaser behoudt Open Sans Condensed (teasertext-stijl) ---- */
h1.cha-h,.entry-content h1.cha-h{font-family:"Open Sans Condensed","Open Sans",sans-serif !important;font-weight:700 !important;font-size:25px !important;line-height:40px !important;color:#4e4849 !important;text-align:left}
h2.cha-h,.entry-content h2.cha-h{font-family:"Open Sans Condensed","Open Sans",sans-serif !important;font-weight:700 !important;font-size:25px !important;line-height:40px !important;color:#4e4849 !important;text-align:left;margin-bottom:20px !important}
.cha-teaser{font-family:"Open Sans Condensed","Open Sans",sans-serif;font-weight:300;font-size:25px;line-height:40px}
/* ---- home: fotorij, kolommenrij, divider, sgraffiti-band, linkboxen ---- */
.cha-rij3{display:grid;grid-template-columns:repeat(3,1fr);gap:5%;margin:10px 0 30px}
.cha-rij3 img{width:100%;height:auto;display:block}
.cha-rij3 p{margin-bottom:0}
.cha-divider{text-align:center;margin:18px 0 30px}.entry-content > .cha-divider{text-align:left;padding-left:35%}
.cha-divider img{display:inline-block;width:306px;max-width:60%;height:auto}
.cha-band{margin:10px 0 30px}
.cha-band img{width:100%;height:auto;display:block}
.cha-linkboxen{display:grid;grid-template-columns:repeat(2,1fr);gap:5%;margin:30px 0}
.cha-linkbox{display:flex;align-items:stretch;border:1px solid #000;border-right:none;text-decoration:none !important;background:#fff}
.cha-linkbox .bild{flex:0 0 auto;padding:9px 8px;display:flex;align-items:center}
.cha-linkbox .bild img{width:51px;height:46px;display:block}
.cha-linkbox .tekst{border-left:1px solid #000;display:flex;align-items:center;padding:9px 15px;font-weight:700;color:#b62b41}
.cha-linkbox:hover{background:rgba(0,0,0,.02)}
/* ---- voettekst exact: #4e4849, berg onderin ware grootte, rode pijl, servicenav 22px ---- */
/* Het bergsilhouet in de voet is de zwaarste losse afbeelding van de site: 196 kB als PNG,
132 kB als WebP. De eerste regel blijft staan voor browsers die image-set niet kennen. */
.cha-footer{background:#4e4849 url(/wp-content/uploads/mountain.png) no-repeat bottom center !important;margin-top:0 !important;color:#b4b4b4;text-align:center}
.cha-footer{background-image:image-set(url(/wp-content/uploads/mountain.webp) type('image/webp'), url(/wp-content/uploads/mountain.png) type('image/png')) !important}
.cha-footer-binnen{max-width:980px;margin:0 auto;padding:35px 20px;position:relative;text-shadow:none !important;font-size:15px;line-height:25px}
.cha-footer a{color:#b4b4b4}
.cha-footer a:hover{color:#fff}
.cha-service{margin:0}.cha-service > :first-child{margin-left:32px}
.cha-service a{font-family:"Open Sans Condensed",sans-serif;text-transform:uppercase;font-size:22px;display:inline-block;padding:0 20px}.cha-footer-binnen a:hover{color:#b4b4b4}
/* Bewuste afwijking: het origineel zet hier alleen redarrow.png als sierpijltje neer.
Bij ons staat het merk zelf in de voet, klikbaar naar de startpagina. De pijl is daarmee
overbodig, dus de achtergrond van het adresblok gaat eraf en de ruimte komt van het logo. */
.cha-contact{margin-top:8px;padding-top:0;background:none}
.cha-voetlogo{display:inline-block;margin:26px 0 0;line-height:0;text-decoration:none}
.cha-voetlogo img{display:block;width:110px;height:auto}
@media (hover:hover){.cha-voetlogo:hover{opacity:.8}}
@media (max-width:780px){.cha-voetlogo img{width:88px}}
.cha-contact p{margin:0}
.cha-partners{position:absolute;left:30px;bottom:37px;margin:0;display:flex;gap:24px;align-items:flex-end}
.cha-partners img{height:auto;width:auto;background:none;padding:0;border-radius:0}
.cha-demo{display:none}
/* ---- mobiel/smal: bestaande drawer blijft; alleen maatvoering ---- */
@media(max-width:990px){
.ast-container{max-width:94% !important}.cha-footer-binnen{padding:35px 20px}.entry-content > .cha-divider{padding-left:0;text-align:center}
}
@media(max-width:921px){
.cha-slider{height:52vw !important;min-height:240px}
.cha-cap{font-size:24px !important;line-height:26px !important;padding:0 60px}
#primary{padding-bottom:80px !important}
.cha-rij3{grid-template-columns:1fr;gap:16px}
.cha-linkboxen{grid-template-columns:1fr;gap:16px}
.cha-partners{position:static;justify-content:center;margin-top:24px}
.cha-service a{font-size:18px;padding:0 10px} .cha-service a:first-child{margin-left:0}
}
/* footer-berg over de volle breedte. Bewuste afwijking van het origineel, voorkeur van Stefan, bevestigd 16 sep 2026. Het origineel toont mountain.png op ware grootte 977 bij 326 onderaan het midden; met cover wordt hij opgerekt naar de vensterbreedte en valt er ongeveer 119 px van de bovenkant weg. Terugzetten is cover weer auto maken. */
.cha-footer{background-size:cover !important;background-position:center bottom !important}
/* ---- logo even groot als op het origineel (13 sep 2026) ----
* Op chamanna.at staat het logo als achtergrond op een vak van 228 bij 213, met
* background-size:auto. De svg tekent zich daar dus op zijn eigen maat van 136 bij 102,
* midden in het witte vak. In de nabouw stond hij op 82 bij 61, dus een derde te klein.
* Dat valt op elke pagina op, want het vak eromheen heeft wel de goede maat. */
.site-branding{display:flex !important;align-items:center;justify-content:center}
.site-branding .site-logo-img{display:flex;align-items:center;justify-content:center;padding:0 !important}
.site-branding .custom-logo{width:136px !important;height:auto !important;max-width:none !important}
/* ---- de vier appartementen op één pagina, net als het origineel (13 sep 2026) ----
* Op chamanna.at staan alle vier de appartementen in één document en bepaalt het anker
* achter de URL welke je ziet; zonder anker is dat Diala. Dat doen we hier na met :target,
* dus zonder javascript. De tegel van het gekozen appartement krijgt dezelfde nadruk als
* daar. De vier losse pagina's staan op concept; de inhoud staat nu hier. */
.cha-app{display:none}
.cha-app:target{display:block}
body:not(:has(.cha-app:target)) #Diala{display:block}
body:has(#Allegra:target) .cha-appblock[href="#Allegra"]::after,
body:has(#Randulina:target) .cha-appblock[href="#Randulina"]::after,
body:has(#Muntanella:target) .cha-appblock[href="#Muntanella"]::after,
body:has(#Diala:target) .cha-appblock[href="#Diala"]::after,
body:not(:has(.cha-app:target)) .cha-appblock[href="#Diala"]::after{opacity:1}
body:has(#Allegra:target) .cha-appblock[href="#Allegra"],
body:has(#Randulina:target) .cha-appblock[href="#Randulina"],
body:has(#Muntanella:target) .cha-appblock[href="#Muntanella"],
body:has(#Diala:target) .cha-appblock[href="#Diala"],
body:not(:has(.cha-app:target)) .cha-appblock[href="#Diala"]{
opacity:1;box-shadow:0 0 0 3px #5b5556,0 8px 20px rgba(0,0,0,.20)}
.cha-appteaser{font-family:"Open Sans Condensed","Open Sans",sans-serif;font-weight:300;
font-size:25px;line-height:40px;color:#4e4849;margin:0 0 20px}
.cha-appteaser strong{font-weight:700}
.cha-apprij{display:grid;grid-template-columns:48% 47%;gap:5%;margin:0 0 30px;align-items:start}
.cha-apprij ul{margin:0;padding-left:0;list-style:none}
.cha-apprij li{margin-bottom:0}.cha-apprij li::before{content:"2022 0a0"}
.cha-app .cha-gal{margin-top:10px}
@media(max-width:990px){
.cha-apprij{grid-template-columns:1fr;gap:16px}
}
/* ---- Impressum en Datenschutz gebruiken h3, niet h2 (15 sep 2026) ----
Op chamanna.at staan de tussenkoppen van die twee pagina's als h3 zonder eigen
regel, dus op de standaardmaat van de browser (17,55 px) en in de tekstkleur
#4e4849. De rode gecentreerde h2 hierboven is een juiste kopie van design.css
van het origineel en blijft daarom staan. Bewust op paginanummer gezet, want
onze appartementspagina gebruikt h3 voor iets heel anders. */
.page-id-28 .entry-content h3,
.page-id-29 .entry-content h3{color:#4e4849 !important;font-size:17.55px !important;font-weight:400 !important;text-align:left !important;margin:0 0 20px !important}
.page-id-29 .entry-content h3.redtext{color:#b62b41 !important}
/* ==================================================================
MOBIELE FIJNREGELING, 16 september 2026
Drie punten van Stefans lijst, alle drie alleen onder 780 px, zodat
de breedbeeldstand die op de pixel met het origineel klopt niet wijzigt.
================================================================== */
@media (max-width:780px){
/* Punt 8. Onze h1 nam de bureaubladmaat van 30 px mee naar de telefoon.
Het mobiele sjabloon van het origineel gebruikt daar 20,64 px met een
gewone regelhoogte, gemeten op datenschutz, wohnen en wintererlebnis.
Bij een lange kop als DATENSCHUTZERKLAERUNG scheelt dat twee regels. */
.entry-content h1,
.entry-content h1.cha-h{font-size:20.64px !important;line-height:normal !important}
/* Punt 9. De foto-rijen liepen bij ons tot de tekstkolom, dus met 31 px
wit ernaast. Het origineel houdt daar 10 px aan en toont de foto 355 px
breed in plaats van 313. Die 21 px per kant halen we terug met een
negatieve marge. Alleen rijen met een beeld erin, want dezelfde klasse
draagt ook de tekstkolommen. */
/* Alleen echte fotorijen, dus rijen waarvan de DIRECTE kinderen beelden zijn
of links om een beeld. Met de ruimere :has(img) werden ook tekstrijen
meegetrokken waar ergens een streepje met pijl in staat, en dan wordt de
lopende tekst ten onrechte breder dan de kolom. */
.entry-content .cha-rij3:has(> img),
.entry-content .cha-rij3:has(> a > img),
.entry-content .cha-rij3:has(> a > picture){margin-left:-21px;margin-right:-21px}
/* Punt 12. De drie tekstkolommen zijn met de hand geknipt zodat ze op een
breed scherm even lang ogen. Gestapeld op een telefoon werd elke knip een
alinea-einde midden in een zin. Inline laten lopen maakt er weer een
doorlopende tekst van, precies zoals het mobiele sjabloon van het
origineel doet. De regelovergang in de bron wordt vanzelf een spatie. */
.entry-content .cha-rij3.cha-loopt{display:block}
.entry-content .cha-rij3.cha-loopt > p{display:inline}
.entry-content .cha-rij3.cha-loopt > p + p::before{content:" "}
}
/* ==================================================================
PUNT 4 en 13, de mobiele kopbalk, 16 september 2026
Het origineel serveert onder 922 px een eigen kop: een vaste witte balk
van 51 px met de hamburger linksboven op 50 bij 50 en het kleine logo
zonder woordmerk gecentreerd op 176 bij 42. Onze kop was bruin, 83 px,
met de hamburger rechts en op tabletbreedte een groot logovak dat er
overheen viel. Alles hieronder geldt alleen onder 922 px, dus de
breedbeeldstand blijft ongemoeid.
================================================================== */
@media (max-width:921px){
.site-header{position:fixed !important;top:0;left:0;right:0;z-index:99;
background:#fff !important;border-bottom:1px solid #e4e4e4}
.site-header .ast-primary-header-bar,
.site-header .main-header-bar{background:#fff !important;min-height:51px !important;
height:51px !important;padding:0 !important;border:0 !important}
body{padding-top:51px}
/* het grote logovak met het woordmerk hoort hier niet, dat viel op
tabletbreedte over de balk heen */
.site-branding{position:static !important;width:auto !important;height:51px !important;
margin:0 !important;padding:0 !important;box-shadow:none !important;background:none !important}
.site-branding .astra-logo-svg,
.site-branding img.custom-logo{display:none !important}
/* het kleine logo gecentreerd, als link naar home */
.custom-logo-link{display:block !important;position:absolute !important;
left:50% !important;top:4px !important;transform:translateX(-50%);
width:176px !important;height:42px !important;
background:url(/wp-content/uploads/orig/logoklein.svg) center/contain no-repeat !important}
/* hamburger linksboven, 50 bij 50 zoals het origineel */
.site-header .menu-toggle{position:absolute !important;left:0 !important;top:0 !important;
width:50px !important;height:50px !important;min-width:50px !important;
margin:0 !important;padding:0 !important;background:transparent !important;
color:#4e4849 !important;border:0 !important;z-index:2}
/* Punt 13a. Het huidige menu-item kreeg witte letters uit een regel zonder
mediaquery, terwijl de bijbehorende donkere achtergrond op mobiel juist
wordt weggehaald. Wit op een wit paneel, dus onleesbaar. Het origineel
markeert de huidige pagina in zijn mobiele menu helemaal niet; daar is
alles even grijs. Dat doen wij nu ook. */
.ast-mobile-popup-drawer .main-header-menu > .menu-item.current-menu-item > .menu-link,
.ast-mobile-popup-drawer .main-header-menu > .menu-item.current-menu-ancestor > .menu-link,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link{
color:#4e4849 !important;background:transparent !important}
}
/* ==================================================================
PUNT 3, opsommingen fatsoenlijk uitlijnen, 16 september 2026
Bewuste afwijking van het origineel, dat heeft dezelfde rommel.
Daar zijn het losse bullet-tekens in een alinea met
ertussen en is
de vervolgregel van een lang punt met de hand ingesprongen met .
Een afgebroken zin loopt daardoor terug tot onder het puntje.
Nu echte met een hangende inspringing: het puntje staat op de
kantlijn en elke volgende regel lijnt uit met de tekst erboven.
================================================================== */
.entry-content .cha-lijst{list-style:none;margin:0;padding:0}
.entry-content .cha-lijst li{position:relative;padding-left:14px;margin:0}
.entry-content .cha-lijst li::before{content:"•";position:absolute;left:0;top:0}
/* ==================================================================
HET MOBIELE MENU, 16 september 2026
Drie dingen, alle drie naar het mobiele sjabloon van chamanna.at.
1. Het hamburgertje stond met zijn linkerrand op x=0 en was bovendien
Astra-blauw. De kleur stond wel goed op color, maar het pictogram is een
SVG en die kleurt op fill, en fill erft niet van color. Het origineel zet
het pictogram gecentreerd in een vak van 50 bij 50 (background center
center), dus dat doen wij nu ook. Dat geeft meteen de ruimte links.
2. De submenus stonden dicht. Wie op Wintererlebnis stond zag zijn eigen
pagina daardoor nergens in het menu terug, want die zit onder Winter.
Het origineel toont het tweede niveau gewoon open; alleen een derde
niveau klapt daar weg, en dat hebben wij niet.
3. De klappertjes kunnen daarmee weg, er valt niets meer te klappen.
================================================================== */
@media (max-width:921px){
.site-header .menu-toggle{justify-content:center !important;align-items:center !important}
.site-header .menu-toggle svg,
.site-header .menu-toggle .mobile-menu-toggle-icon svg{fill:#4e4849 !important}
#ast-hf-mobile-menu .sub-menu{display:block !important;position:static !important;
width:auto !important;min-width:0 !important;box-shadow:none !important;border:0 !important;
background:transparent !important;opacity:1 !important;visibility:visible !important;
transform:none !important;height:auto !important;overflow:visible !important}
/* Regelhoogte hoort erbij. Zonder deze regel erven de onderliggende items line-height 48
uit de bureaubladstand en wordt elke regel 70 px hoog, wat het menu op 1006 px bracht.
Het origineel staat op ongeveer 45 px voor een hoofditem en 40 voor een onderliggend. */
#ast-hf-mobile-menu > .menu-item > .menu-link{font-size:17px !important;line-height:24px !important;
padding:10px 22px !important;min-height:0 !important}
#ast-hf-mobile-menu .sub-menu .menu-link{font-size:15px !important;line-height:20px !important;
padding:8px 22px 8px 40px !important;min-height:0 !important;color:#6a6465 !important}
/* Het opengeklapte menu moet zelf kunnen schuiven. De kopbalk staat op position:fixed met
een hoogte van 51 px en de hele keten erboven op overflow:visible, dus een menu dat langer
is dan het scherm liep er onderuit en de laatste items waren onbereikbaar. De regel met
dvh staat er tweemaal: oudere toestellen pakken vh, nieuwere de dvh die de adresbalk
meerekent. */
#ast-mobile-header .ast-mobile-header-content{background:#fff;
max-height:calc(100vh - 51px) !important;max-height:calc(100dvh - 51px) !important;
overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;
overscroll-behavior:contain}
#ast-hf-mobile-menu .ast-menu-toggle{display:none !important}
}
/* ==================================================================
OVERZICHT VAN DE APPARTEMENTEN, 16 september 2026
Pagina 142 toonde de vier appartementen volledig, dezelfde tekst en foto's als de vier
losse pagina's. Nu een overzicht met per appartement de teaserregel van het origineel,
de inleiding waar die bestaat, en een link naar de eigen pagina.
Op dit overzicht is geen appartement het huidige, dus staan alle vier de tegels vol in
beeld en blijft het dubbele pijltje eronder uit.
================================================================== */
.cha-appnav.cha-alle .cha-appblock{opacity:1}
.cha-appnav.cha-alle .cha-appblock::after{opacity:0}
.cha-appkort{margin:0 0 50px}
.cha-appkort .cha-appteaser{margin:0 0 12px}
.cha-appmeer{margin:12px 0 0}
.cha-appmeer a{font-family:"Open Sans Condensed","Open Sans",sans-serif;font-weight:700;
font-size:20px;color:#b62b41;text-decoration:none}
@media (hover:hover){.cha-appmeer a:hover{text-decoration:underline}}
@media (max-width:780px){.cha-appkort{margin:0 0 34px}}
/* De enige ingang naar het overzicht van de appartementen. De vier fotos erboven gaan
rechtstreeks naar hun eigen pagina, zodat er geen tussenscherm komt; wie wil vergelijken
klikt hier. */
.cha-overzichtlink{text-align:center;margin:22px 0 0}
.cha-overzichtlink a{font-family:"Open Sans Condensed","Open Sans",sans-serif;font-weight:700;
font-size:20px;color:#b62b41;text-decoration:none}
@media (hover:hover){.cha-overzichtlink a:hover{text-decoration:underline}}
/* ==================================================================
GROEPERING IN HET UITKLAPMENU ONDER WOHNEN, 16 september 2026
De vier appartementen horen bij elkaar, Top Angebote en Informationen niet. In het
origineel staan ze in een rij zonder onderscheid; dit is dus een bewuste afwijking.
Een dun lijntje boven Top Angebote zegt dat rustiger dan een pictogram voor elk
appartement, dat zou het merkteken vier keer herhalen en daarmee uithollen.
================================================================== */
.main-header-menu .sub-menu .cha-groepstart{border-top:1px solid #e6e1da;
margin-top:10px;padding-top:10px}
@media (max-width:921px){
#ast-hf-mobile-menu .sub-menu .cha-groepstart > .menu-link{margin-top:7px}
}
/* ==================================================================
ONDERSTREPING VAN LINKS, 16 september 2026
Astra zet .ast-single-post .entry-content a{text-decoration:underline}, gewicht (0,2,1).
Onze .cha-appblock woog (0,1,0) en onze twee tekstlinks (0,1,1), dus die verloren allemaal.
Gevolg: een rode streep onder "Appartement" en de naam op elke tegel, en tekstlinks die
altijd onderstreept stonden in plaats van alleen bij aanwijzen. Het origineel onderstreept
nergens in de lopende tekst, alleen binnen een modaalvenster (base.general.css regel 155).
Deze regels wegen zwaarder dan die van Astra: (0,3,1) en (0,2,2).
================================================================== */
.entry-content .cha-appnav a.cha-appblock,
.entry-content .cha-appnav a.cha-appblock:hover{text-decoration:none}
.entry-content p.cha-appmeer a,
.entry-content p.cha-overzichtlink a{text-decoration:none}
@media (hover:hover){
.entry-content p.cha-appmeer a:hover,
.entry-content p.cha-overzichtlink a:hover{text-decoration:underline}
}
/* ==================================================================
DE FOTOBAND OP DE TELEFOON, 16 september 2026
Het origineel toont op een telefoon geen carrousel maar een vaste foto. Wij toonden er
ook maar een, maar de andere zes stonden op opacity:0 en werden dus wel opgehaald: op de
startpagina samen 990 kB aan beeld voor zes foto's die niemand ziet. Een achtergrondbeeld
van een element met display:none wordt niet opgehaald, dus dat is het verschil tussen
opacity en display. De pijlen verdwijnen mee, want er valt niets te bladeren.
Op een breed scherm blijft de carrousel gewoon werken.
================================================================== */
@media (max-width:921px){
.cha-slider .cha-slide:not(.aan){display:none !important}
.cha-slider .cha-pijl{display:none !important}
}
/* ==================================================================
DE INLEIDENDE ALINEA OP DE TELEFOON, 17 september 2026
Deze regel stond eerst in het mobiele blok hierboven, op regel 127, terwijl de basisregel
voor .cha-teaser pas op regel 265 komt. Een mediaquery voegt geen gewicht toe, dus won de
latere regel gewoon en bleef de tekst op 25 px staan. Daarom staat hij hier, achteraan.
De waarde komt uit het mobiele sjabloon van chamanna.at zelf, dat zijn accenttekst
(.bh-styleclass-highlight, mobile.css regel 445) op 20 px met regelhoogte 30 zet.
================================================================== */
@media (max-width:781px){
.cha-teaser{font-size:20px;line-height:30px}
}
/* Mobiel: op een appartementspagina alleen het gekozen appartement */
/* De vier tegels plus de sfeerfoto duwden de tekst ruim 1300 px omlaag, terwijl je je
keuze al gemaakt hebt. De andere drie appartementen staan in het menu. De
overzichtspagina houdt wel alle vier; die heeft geen actieve tegel. 17 sep 2026. */
@media (max-width:921px){
body:has(.cha-appblock.active) .cha-slider{display:none}
body:has(.cha-appblock.active) .cha-appnav .cha-appblock:not(.active){display:none}
body:has(.cha-appblock.active) .cha-appnav{margin-top:18px}
}