/* ========================================================================== AlpenPura · Refinement layer (Sept 2026) -------------------------------------------------------------------------- Loaded last in on every page. It changes no markup and no script behaviour. Its only job is to bring every page in line with the AlpenPura CI Guidelines v1.0 and to remove the generic "template" look: · Typography as per CI: H2 section titles Noto Serif 300 upright, italics only for the hero line and for accent words () · One radius system as per CI: 4px cards / images / info boxes, 2px buttons and badges, never fully round · CI cards and dividers (1px #D1C4BA) instead of soft drop shadows · Decorative icons in Gold, thin stroke (Primary is for interactive elements only, as per CI) · CI palette colours (the Nationalpark season cards keep their green and blue by owner decision) · Mobile fixes: no horizontal overflow, long German words wrap EasyBooking widgets (#ebFrontEndFrame, #ebOffer, #ebAvailability*) are not restyled; only the month titles of the availability calendar are sized and the frame around its month selector is removed. To roll back: remove the to this file. ========================================================================== */ :root { --ap-divider: var(--o-soft, #D1C4BA); /* CI: dividers 1px solid #D1C4BA */ --ap-radius-card: 4px; /* CI: cards, dropdowns, images */ --ap-radius-btn: 2px; /* CI: buttons and badges */ } /* ─── 1. Typography (CI section 03) ───────────────────────────────────── */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--p-light, #F9DEC3); color: var(--dark, #1C1914); } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } /* CI: "H2 — Section · Noto Serif 300 Light" (upright). Italic stays reserved for the hero line (H1) and for accent words marked up with . */ h2, h3 { font-style: normal !important; } h2 em, h3 em, h2 i, h3 i, h2 .italic, h3 .italic { font-style: italic !important; } /* CI eyebrow — defined once for every page (the Steinbock pages lacked it) */ .ey { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--gold, #A08060); } /* Room numerals (I, II, III …) — defined once for every page */ .room-num { font-family: 'Noto Serif', serif; font-weight: 300; font-style: italic; font-size: .95rem; letter-spacing: .18em; color: var(--gold, #A08060); margin-bottom: 10px; } /* .serif was only defined on the homepages; sub-pages fell back to a synthetic italic of Manrope */ .serif { font-family: 'Noto Serif', serif; } /* Mobile menu: CI "Nav / UI" style (Inter 500, uppercase, tracked) on every page — CI: "Never Noto Serif for buttons or navigation" */ #mnav .serif { font-family: 'Inter', sans-serif !important; font-style: normal !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: .16em; font-size: 15px !important; line-height: 1.5 !important; } #mnav .serif.text-2xl { font-size: 12px !important; letter-spacing: .18em; } /* Links in running text: finer underline */ p a[style*="text-decoration:underline"], .leading-relaxed a[style*="text-decoration:underline"] { text-decoration-thickness: 1px !important; text-underline-offset: 3px; } /* ─── 2. One radius system (CI section 05 + 08) ───────────────────────── */ /* Cards, image containers, info boxes: 4px (was a mix of 8, 12 and 16px) */ :is(section, header, article, aside, footer) :is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):not(:where(#ebFrontEndFrame, #ebOffer, #ebAvailability, #ebAvailabilityGams) *), :is(div, figure, img, iframe)[style*="border-radius:6px"]:not(:where(#ebFrontEndFrame, #ebOffer, #ebAvailability, #ebAvailabilityGams) *), :is(div, figure, img, iframe)[style*="border-radius:8px"]:not(:where(#ebFrontEndFrame, #ebOffer, #ebAvailability, #ebAvailabilityGams) *), :is(div, figure, img)[style*="border-radius:3px"]:not(:where(#ebFrontEndFrame, #ebOffer, #ebAvailability, #ebAvailabilityGams) *), .gal-carousel-outer { border-radius: var(--ap-radius-card) !important; } /* Buttons: 2px */ button[style*="border-radius:3px"]:not(:where(#ebFrontEndFrame, #ebOffer, #ebAvailability, #ebAvailabilityGams) *) { border-radius: var(--ap-radius-btn) !important; } /* CI: "never fully round" — gallery and lightbox controls, icon discs */ .gal-nav-btn, .gal-dot, .glb-btn, #glb-close, .tc-ic { border-radius: var(--ap-radius-btn) !important; } /* ─── 3. Surfaces: CI cards and dividers instead of drop shadows ─────── */ :is(section, header, article, aside) :is(.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl):not(:where(#ebFrontEndFrame, #ebOffer, #ebAvailability, #ebAvailabilityGams) *) { box-shadow: none !important; } .hover\:shadow-md:hover, .hover\:shadow-lg:hover, .hover\:shadow-xl:hover { box-shadow: none !important; } /* Homepage · intro photo: the location is an editorial caption below the photo (thin gold rule, tracked label, serif coordinates) instead of a floating white box */ #chalet .absolute.bg-white { position: relative !important; inset: auto !important; margin-top: 22px; padding: 0 0 0 56px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } #chalet .absolute.bg-white::before { content: ''; position: absolute; left: 0; top: 8px; width: 40px; height: 1px; background: var(--gold, #A08060); } #chalet .absolute.bg-white p { font-family: 'Inter', sans-serif !important; font-size: 10px !important; font-weight: 500; letter-spacing: .28em !important; line-height: 1.6; color: var(--gold, #A08060) !important; margin-bottom: 4px !important; } #chalet .absolute.bg-white a .material-symbols-outlined { display: none; } #chalet .absolute.bg-white a .serif { font-weight: 300; font-size: .95rem !important; letter-spacing: .02em; color: var(--on-v, #4D453D) !important; transition: color .2s; } #chalet .absolute.bg-white a:hover .serif { color: var(--primary, #6C5943) !important; } /* Homepage · amenities: from white icon cards to a CI divider grid */ .ap-amen { gap: 0 !important; border-top: 1px solid var(--ap-divider); } .ap-amen > div { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; align-items: flex-start !important; text-align: left !important; padding: 28px 28px 30px 0 !important; border-bottom: 1px solid var(--ap-divider); } .ap-amen > div .material-symbols-outlined { font-size: 22px !important; margin-bottom: 18px !important; color: var(--gold, #A08060) !important; font-variation-settings: 'FILL' 0, 'wght' 200 !important; } .ap-amen > div h3 { font-family: 'Noto Serif', serif !important; font-weight: 300 !important; font-size: 1.15rem !important; line-height: 1.3; margin-bottom: 8px !important; } .ap-amen > div p { font-size: .82rem !important; line-height: 1.65 !important; } @media (min-width: 768px) { .ap-amen > div { padding-left: 24px !important; border-left: 1px solid var(--ap-divider); } .ap-amen > div:nth-child(4n+1) { border-left: 0; padding-left: 0 !important; } } /* Homepage · "Vor der Buchung" info grid: same divider grid as the amenities (icon on top in Gold, Noto Serif title, no card frames) */ .ap-info { gap: 0 !important; border-top: 1px solid var(--ap-divider); } .ap-info > div:not(.lg\:col-span-3) { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ap-divider) !important; border-radius: 0 !important; flex-direction: column; align-items: flex-start !important; gap: 0 !important; padding: 28px 28px 30px 0 !important; } .ap-info > div:not(.lg\:col-span-3) > .material-symbols-outlined { font-size: 22px !important; margin: 0 0 18px !important; color: var(--gold, #A08060) !important; font-variation-settings: 'FILL' 0, 'wght' 200 !important; } .ap-info > div:not(.lg\:col-span-3) > div > p:first-child { font-family: 'Noto Serif', serif !important; font-weight: 300 !important; font-size: 1.15rem !important; line-height: 1.3 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--on-s, #1B1C1C) !important; margin-bottom: 8px !important; } .ap-info > div:not(.lg\:col-span-3) > div > p + p { font-size: .85rem !important; line-height: 1.65 !important; } .ap-info > div:not(.lg\:col-span-3) strong { font-weight: 500; } /* "Warum direkt buchen?" stays a Pine band below the grid */ .ap-info > .lg\:col-span-3 { margin-top: 40px; } @media (min-width: 768px) and (max-width: 1023px) { .ap-info > div:not(.lg\:col-span-3):nth-child(2n) { padding-left: 24px !important; border-left: 1px solid var(--ap-divider) !important; } } @media (min-width: 1024px) { .ap-info > div:not(.lg\:col-span-3):not(:nth-child(3n+1)) { padding-left: 24px !important; border-left: 1px solid var(--ap-divider) !important; } } @media (max-width: 767px) { .ap-info > div:not(.lg\:col-span-3) { padding: 24px 0 26px !important; } .ap-info > div:not(.lg\:col-span-3) > div > p:first-child { font-size: 1.05rem !important; } } /* Homepage · chalet cards: Airbnb / Booking.com / Wildkogel-Arena logos without frames */ .ap-ota { transition: opacity .2s; } .ap-ota:hover { opacity: .72; } .ap-ota img { height: 26px !important; } /* Homepage · three stories (Sauna · Panorama · Design): image + text, no floating card */ .rounded-2xl[style*="box-shadow"] { box-shadow: none !important; background: transparent !important; } .rounded-2xl[style*="box-shadow"] > .p-7 { padding: 26px 0 0 !important; } /* Hairline borders on cards use the CI divider colour */ .rounded-lg.overflow-hidden.border { border-color: var(--ap-divider) !important; } /* Homepage · booking choice cards */ #buchen a.group.block:hover { box-shadow: none !important; } /* Decorative icons: Gold, thin stroke (CI: Primary only for interactive elements) */ section .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 250, 'GRAD' 0, 'opsz' 24; } #buchen .material-symbols-outlined.text-4xl, section .material-symbols-outlined.text-3xl:not(a *):not(button *) { color: var(--gold, #A08060) !important; } /* ─── 4. CI palette only ──────────────────────────────────────────────── */ /* Review stars: Gold instead of an off-palette orange */ [style*="color:#E8A020"], [style*="color: #E8A020"], [style*="color:#e8a020"] { color: var(--gold, #A08060) !important; } /* Season cards (Nationalpark SommerCard green / WinterCard blue) keep their own colours on purpose (owner decision, Sept 2026). */ /* EasyBooking availability calendar: month titles as a quiet serif label (the widget itself is not restyled) */ #ebAvailability .eb-availability-month-headings h2, #ebAvailabilityGams .eb-availability-month-headings h2 { font-family: 'Noto Serif', serif !important; font-size: 16px !important; font-weight: 300 !important; font-style: normal !important; letter-spacing: .02em !important; color: var(--on-s, #1B1C1C) !important; } /* ... and no grey frame around the "Anreise" month selector (owner request, 25 Sept 2026); the selector itself and its behaviour are unchanged */ #ebAvailability .eb-availability-form, #ebAvailabilityGams .eb-availability-form { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; } /* ─── 5. Photographs as backgrounds: legibility ───────────────────────── */ h1[style*="color:#fff"], h1.text-white { text-shadow: 0 2px 24px rgba(28, 25, 20, .28); } /* Closing call-to-action (#anfrage): CI Dark overlay, lighter towards the right so the evening photograph stays visible */ #anfrage > .absolute.inset-0 > div[style*="rgba(20,14,10,.75)"] { background: linear-gradient(90deg, rgba(28, 25, 20, .80) 0%, rgba(28, 25, 20, .62) 48%, rgba(28, 25, 20, .42) 100%) !important; } /* SEO landing pages: the headline sits mid-image, so the CI Dark overlay also runs in from the left */ section > div[style*="linear-gradient(to top,rgba(28,25,20,.75) 0%,rgba(28,25,20,.2) 60%"] { background: linear-gradient(90deg, rgba(28, 25, 20, .66) 0%, rgba(28, 25, 20, .40) 46%, rgba(28, 25, 20, .08) 78%), linear-gradient(to top, rgba(28, 25, 20, .72) 0%, rgba(28, 25, 20, .18) 60%, transparent 100%) !important; } /* ─── 6. Mobile ───────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Booking strip: the two date fields must never exceed the viewport */ #ssm .smr > .smf { min-width: 0; } #ssm .smf input { min-width: 0 !important; max-width: 100% !important; display: block; -webkit-appearance: none; appearance: none; } #ssm .smf input::-webkit-date-and-time-value { text-align: left; } /* Long German compounds (Geschäftsbedingungen, Datenschutzerklärung …) */ h1, h2 { overflow-wrap: break-word; } h1[style*="font-size:2.5rem"] { font-size: 2rem !important; line-height: 1.15 !important; } /* Nav: the desktop booking button stays hidden on phones on every page */ #nav .btn-p.hidden { display: none !important; } /* Amenity grid on phones: two columns with a vertical divider */ .ap-amen > div { padding: 22px 16px 24px 0 !important; } .ap-amen > div:nth-child(2n) { padding-left: 16px !important; border-left: 1px solid var(--ap-divider); } .ap-amen > div h3 { font-size: 1rem !important; } /* Chalet cards: keep "Jetzt buchen" on one line next to "Details" */ .flex.gap-3 > .btn-p.flex-1 { white-space: nowrap; padding-left: 14px !important; padding-right: 14px !important; } } /* ─── 6b. Tablet (768–1099 px, e.g. iPad portrait) ─────────────────────── */ /* The desktop bar (links + logo + languages + button) does not fit here and the items overlapped. Tablets now use the menu button like phones; the menu contains all links and the language switch. "Direkt buchen" stays. */ @media (min-width: 768px) and (max-width: 1099px) { #nav .hidden.md\:flex { display: none !important; } #nav #burg { display: inline-flex !important; } #nav .btn-p .material-symbols-outlined { display: none; } } /* Homepage, narrow tablets: the large white logo at the top must not touch the button */ @media (min-width: 768px) and (max-width: 899px) { #nav.nav-top #ll-img { height: 104px !important; } } /* ─── 7. Accessibility ────────────────────────────────────────────────── */ :focus-visible { outline: 1px solid var(--gold, #A08060); outline-offset: 3px; }