/* Theme Name:     Teresa's Homes 2026 Refresh
Theme URI:
Description:   Custom Elementor Child Theme for Teresa's Homes
Author:        Marcus
Author URI:    https://www.marcushill.com
Template:      hello-elementor
Version:       3.0.0
Text Domain:   hello-elementor-child
Tags:          klosters, davos, property for sale, property for rent, long term rentals, short term rentals, exclusive properties
*/


/* ==========================================================================
   General Styles
   ========================================================================== */

.underlined {
  text-decoration: underline;
}

/* ==========================================================================
   Menu / Navigation
   ========================================================================== */

/* Add some glow to it for dark backgrounds */
/*   .burger .elementor-icon svg {
  overflow: visible;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}
*/
.burger .elementor-icon svg {
  overflow: visible;
  filter: drop-shadow(1px 1px 0 rgba(255,255,255,.75));
}
.burger .elementor-icon svg line {
  stroke-width: .8px !important;
}

   .popup-menu {
  font-size: 1.25rem !important;
}

/* Targets all dropdown and nested sub-menu links */
.elementor-nav-menu .elementor-sub-item {
  font-size: 1em !important;
}

/* Full screen menu on phones: one item per line. The menu widget is horizontal and
   only stacks because it is 140px wide; a longer German item ("Vermietungen") made
   the list wider, so "Wef" and "Über" ended up on one line. */
@media (max-width: 767px) {
  .popup-menu .elementor-nav-menu--main > .elementor-nav-menu {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
}

/* ==========================================================================
   General Typography & CSS Variables
   ==========================================================================

:root {
  --font-family-hero: "Italiana", serif;
  --font-family-hero-bodoni: "Bodoni Moda", "Bodoni MT", Didot, serif;
  --font-family-heading: "Josefin Sans Light", "Open Sans", sans-serif;
  --font-family-body: "Roboto", sans-serif;
  --font-family-body-condensed: "Roboto Condensed", sans-serif;

  --title-size-1: clamp(3rem, 2.6151rem + 1.7105vw, 3.8125rem);
  --title-size-2: clamp(2.5rem, 2.2336rem + 1.1842vw, 3.0625rem);
  --title-size-3: clamp(2.0625rem, 1.8849rem + 0.7895vw, 2.4375rem);
  --title-size-4: clamp(1.75rem, 1.6612rem + 0.3947vw, 1.9375rem);
  --title-size-5: clamp(1.4375rem, 1.3783rem + 0.2632vw, 1.5625rem);
  --title-size-6: clamp(1.1875rem, 1.1579rem + 0.1316vw, 1.25rem);
  --title-subtitle: 0.875rem;
  --body-size-l: 1.125rem;
  --body-size-m: 1rem;
  --body-size-s: 0.875rem;
  --font-weight-light: 200;
  --font-weight-regular: 300;
  --font-weight-medium: 400;
  --font-weight-bold: 500;
}

.section h2,
.section h2.elementor-heading-title,
.section .elementor-heading-title,
.section h2 a,
.section .elementor-heading-title a {
  font-family: var(--font-family-heading) !important;
  font-weight: var(--font-weight-light) !important;
  font-size: var(--title-size-2) !important;
  color: #000000 !important;
  text-transform: uppercase;
  text-align: center;
}

.sub-section h3,
.sub-section h3.elementor-heading-title,
.sub-section .elementor-heading-title,
.sub-section h3 a,
.sub-section .elementor-heading-title a {
  font-family: var(--font-family-heading) !important;
  font-weight: var(--font-weight-light) !important;
  font-size: var(--title-size-3) !important;
  color: #000000 !important;
  text-transform: uppercase;
  text-align: center;
}

.sub-section-2 h4,
.sub-section-2 h4.elementor-heading-title,
.sub-section-2 .elementor-heading-title,
.sub-section-2 .elementor-widget-container .elementor-heading-title,
.sub-section-2 .elementor-widget-container h4,
.sub-section-2 h4 a,
.sub-section-2 .elementor-heading-title a {
  font-family: var(--font-family-heading) !important;
  font-weight: var(--font-weight-light) !important;
  font-size: var(--title-size-4) !important;
  color: #000000 !important;
  text-transform: uppercase;
  text-align: left;
}
   */

/* Links used for 'View More', 'Send Enquiry', etc. */
.main-link a {
  font-family: var(--font-family-body) !important;
  font-weight: var(--font-weight-regular) !important;
  font-size: var(--body-size-l) !important;
  color: #333333;
}

.main-link a:hover {
  color: #000000;
}

/* ==========================================================================
   Header Sticky Layout (Targeted Elementor IDs)
   ========================================================================== */

/* 1. INNER CONTAINER FLEX LAYOUT */
header .elementor-sticky .e-con-inner {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  height: 100% !important;
}

/* COLUMN 1 (Phone) & COLUMN 3 (Lottie Menu) */
header .elementor-element-4fbd542,
header .elementor-element-86c8508 {
  align-self: flex-start !important;
  padding-top: 10px !important;
  margin: 0 !important;
}

header .elementor-element-4fbd542 {
  justify-content: flex-start !important;
}

header .elementor-element-86c8508 {
  justify-content: flex-end !important;
}

header .elementor-element-4fbd542 .elementor-widget,
header .elementor-element-86c8508 .elementor-widget {
  margin: 0 !important;
  transform: none !important;
}

/* COLUMN 2 (Logo) */
header .elementor-element-7c12394 {
  align-self: center !important;
  justify-content: center !important;
}

/* Default Header State (150px) */
header .elementor-sticky,
.elementor-sticky {
  min-height: 150px !important;
  height: 150px !important;
  transition: background-color 0.4s ease-in-out, min-height 0.4s ease-in-out, height 0.4s ease-in-out !important;
  /* TH-1: mask-image removed - it clips the nav dropdowns below the header. Rollback: uncomment.
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%) !important;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%) !important;
  */
}

/* Base Logo */
header .elementor-element-66ade7d img {
  transform: translateY(0) scale(1) !important;
  transition: transform 0.4s ease-in-out !important;
}

/* Scrolled Header State (100px) */
header .elementor-sticky.elementor-sticky--effects,
.elementor-sticky.elementor-sticky--effects {
  background-color: rgba(255, 255, 255, 1) !important;
  backdrop-filter: blur(8px);
  min-height: 100px !important;
  height: 100px !important;
  /* TH-1: overflow and mask-image removed - they clip the nav dropdowns below the header. Rollback: uncomment.
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%) !important;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%) !important;
  */
}

header .elementor-sticky.elementor-sticky--effects .elementor-element-66ade7d img {
  transform: translateY(-5px) scale(0.70) !important;
  transform-origin: center center !important;
}

/* Mobile Header Styles */
@media (max-width: 767px) {
  header .elementor-sticky,
  .elementor-sticky {
    min-height: 167px !important;
    height: 167px !important;
  }

  header .elementor-sticky.elementor-sticky--effects,
  .elementor-sticky.elementor-sticky--effects {
    min-height: 60px !important;
    height: 60px !important;
  }

  header .elementor-sticky.elementor-sticky--effects .elementor-element-66ade7d img {
    transform: translateY(-3px) scale(0.1) !important;
  }

  header .elementor-sticky.elementor-sticky--effects .elementor-element-2a1a3bf {
    --padding-top: 2px !important;
    --padding-bottom: 2px !important;
  }
}

/* Anchor offset: menu anchors stop below the scrolled sticky header instead of underneath it.
   Adds to the admin bar's scroll-padding-top when logged in. */
.elementor-menu-anchor {
  scroll-margin-top: 100px;
}

@media (max-width: 767px) {
  .elementor-menu-anchor {
    scroll-margin-top: 60px;
  }
}

/* ==========================================================================
   Homepage / Property Grid Styles
   ========================================================================== */

.all-properties {
  display: grid !important;
  gap: 20px !important;
  grid-template-columns: 1fr !important;
  max-width: 2540px;
  margin: 38px auto 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

@media (min-width: 1300px) {
  .all-properties {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1940px) {
  .all-properties {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.property-col {
  width: 100% !important;
  margin: 0;
  float: none;
  display: block;
  position: relative;
  box-sizing: border-box;
}

.property-box {
  height: 330px;
  min-width: 0 !important;
  width: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
}

/* Specific Card Borders */
.id-4077 .property-box,
.id-4069 .property-box {
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}

/* Badge & Superli */
.badge {
  font-family: var(--font-family-body);
  background: rgb(99, 34, 42);
  color: #ffffff;
  padding: 5px 15px;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;
}

.superli,
.super {
  vertical-align: super;
  line-height: 0;
  font-size: 14px;
}

/* Card Meta Panels & Global Hover Animations */
.property-meta {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  background: rgb(201, 188, 169);
  transition: all 0.5s ease;
  z-index: 1;
}

.meta-top {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  color: #ffffff;
  background: rgb(201, 188, 169);
  font-family: "Open Sans Condensed", sans-serif!important;
  font-size: 30px;
}

.top-title,
.top-price {
  color: #ffffff;
  font-size: var(--title-size-5);
  font-weight: var(--font-weight-medium);
}

.top-title {
  flex-basis: 65%;
  line-height: 1.3;
}

.top-price {
  flex-basis: 35%;
  text-align: right;
}

.meta-bottom {
  height: 0;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  transition: all 0.5s ease;
}

.property-col:hover .meta-bottom {
  height: 55px;
  opacity: 1;
  margin-top: 10px;
}

.bottom-right {
  flex-basis: 26%;
}

.bottom-left {
  flex-basis: 74%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-body-condensed), sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: var(--font-weight-regular);
}

.meta-bottom span,
.features .tag {
  font-family: var(--font-family-body-condensed);
  font-size: var(--title-size-6);
  font-weight: var(--font-weight-regular);
  color: #ffffff;
  margin-right: 10px;
}

/* View Details Button */
.bottom-right a {
  font-family: var(--font-family-body-condensed);
  padding: 5px;
  float: right;
  font-weight: var(--font-weight-regular);
  border: 2px solid #ffffff;
  color: rgb(201, 188, 169) !important;
  background: #ffffff !important;
}

.bottom-right a:hover {
  background: rgb(201, 188, 169) !important;
  color: #ffffff !important;
}

/* Language Overrides (German) */
html[lang="de-DE"] .bottom-right {
  flex-basis: 35%;
}

html[lang="de-DE"] .bottom-left {
  flex-basis: 65%;
}

/* Feature Tags */
.features {
  width: 100%;
}

.features .tag {
  display: none;
  position: relative;
}

.features .tag:nth-child(-n+3) {
  display: inline;
}

.features .tag::after {
  content: ",";
  position: absolute;
  right: -6px;
  top: 0;
  height: 100%;
}

.features .tag:nth-child(3)::after {
  display: none;
}

/* Google Maps Popups */
.gm-style .gm-style-iw-d {
  padding: 10px !important;
}

.gm-style .gm-style-iw-d a {
  color: #000000 !important;
}

/* Responsive Adjustments for Card Typography */
@media (max-width: 767px) {
  .top-title {
    flex-basis: 60%;
  }

  .top-price {
    flex-basis: 40%;
  }
}

/* ==========================================================================
   Toolset Special / Exclusive Property & Rental Listing Page
   ==========================================================================
   The cards keep their pre-refresh look (as on live): layout and sizes come
   from the Content Templates' own CSS (Loop item in Special Page Sales /
   Weekly Rental). The rules below only undo what the refresh changed
   globally: body font and colour, and the kit's h3 styles. */

@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("fonts/OpenSansCondensed-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/OpenSansCondensed-Bold.ttf") format("truetype");
}

.special-row {
  font-family: "Open Sans Condensed", sans-serif;
  color: #333333;
  line-height: 1.5em;
  letter-spacing: 0.05px;
}

.special-row .special-title {
  color: #323644;
  font-size: 54px;
  text-transform: none;
}

/* Refresh styles for the cards, superseded by the Content Templates' CSS. Rollback: uncomment.
.special-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 800px;
  margin: 0 auto 110px auto;
}

.special-row:nth-child(even) {
  flex-direction: row-reverse;
}

.pic-col {
  width: min(100%, 400px);
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 50px;
  position: relative;
}

.pic-col img {
  width: 100%;
  height: auto;
  display: block;
}

.special-row:nth-child(even) .pic-col {
  margin-right: 0;
  margin-left: 50px;
}

.text-col {
  flex: 1;
  min-width: 0;
}

.special-title,
h3.special-title {
  margin-top: 0;
  font-family: var(--font-family-heading), sans-serif !important;
  color: #323644;
  font-size: var(--title-size-3);
  line-height: 1em !important;
  font-weight: var(--font-weight-light);
}

.special-row:nth-child(even) .special-title {
  padding-right: 0;
}

.special-text,
.special-price {
  width: 100%;
  font-family: var(--font-family-body), sans-serif !important;
  font-size: var(--title-size-6);
}

.special-text .super {
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
}

.special-price {
  display: block !important;
  clear: both !important;
  color: #63222a;
  font-weight: var(--font-weight-bold);
  margin-top: 5px;
}

.special-text {
  margin-bottom: 15px;
  line-height: 1.3;
}

.pdf-link-bottom {
  width: 100%;
  margin-top: 30px;
}

.pdf-link-bottom a {
  display: inline-block;
  font-family: var(--font-family-body), sans-serif !important;
  color: #ffffff !important;
  padding: 5px 15px;
  border: 2px solid #c9bca9;
  background: #c9bca9;
  transition: all 0.3s ease;
}

.pdf-link-bottom a:hover {
  background: #ffffff;
  color: #c9bca9 !important;
}

Mobile Responsive Adjustments for Special Row
@media (max-width: 767px) {
  .special-row,
  .special-row:nth-child(even) {
    flex-direction: column;
    margin-bottom: 60px;
  }

  .pic-col,
  .special-row:nth-child(even) .pic-col {
    order: 1;
    width: 100%;
    margin: 0 0 20px 0;
  }

  .text-col,
  .special-row:nth-child(even) .text-col {
    order: 2;
    margin-right: 0;
    margin-left: 0;
    width: 100%;
  }

  .special-title {
    margin-top: 0;
    padding-right: 0;
  }
}
*/

/* ==========================================================================
   Page Width on Phones (Trello "Width issue on some pages")
   Four things made pages wider than the screen, so the page could be dragged
   sideways and the side icons ended up off screen:
   - Listing card titles are 54px (Content Templates) on phones too, and long
     names ("APARTMENT BRÜGGERSCHHOF") can't wrap at that size.
   - Rentals: the listing column (a5c0165) has a 32px margin on all sides but
     stays 100% wide, so it sticks out 32px on the right.
   - The "line title" (e.g. "Standorte" on WEF) has its lines 120px outside
     the title, which doesn't fit next to a 40px title on a phone.
   - Contact: the e-mail address heading on narrow phones.
   Plus a safety net for single long words, and smaller countdown digits below
   375px.
   ========================================================================== */
@media (max-width: 767px) {
  .special-row .special-title {
    font-size: 36px !important;
  }

  /* Safety net: a word that doesn't fit on a line by itself breaks instead of
     widening the page (e.g. "WEIHNACHTEN" at 40px or "Besichtigungsmöglichkeiten"
     at 24px on a 320px phone). Words that fit are not affected. */
  body {
    overflow-wrap: break-word;
  }

  .elementor-element-a5c0165 > .elementor-widget-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* 15px from the screen edges, like the other listing pages (Marcus, 2026-11-03) */
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Contact page: the e-mail address (40px) can't wrap; a little smaller on
     narrow phones (360px), unchanged from about 400px. */
  .elementor-element-1775a9b .elementor-heading-title {
    font-size: min(40px, 10vw) !important;
  }

  /* .line-div: beats the Content Template's CSS, which loads after this file. */
  .line-div .line-title::before {
    left: -35px;
    width: 25px;
  }

  .line-div .line-title::after {
    right: -35px;
    width: 25px;
  }
}

/* The countdown's 69px digits don't fit four boxes on the smallest phones. */
@media (max-width: 374px) {
  .elementor-widget-countdown .elementor-countdown-digits {
    font-size: 48px !important;
  }
}

/* ==========================================================================
   Valuation Block Styles
   ========================================================================== */

/* TH-1: scoped to .home-valuation - unscoped it put every heading/text widget above the header menus. Rollback: use the old selector.
.elementor-widget-heading,
.elementor-widget-text-editor {
*/
.home-valuation .elementor-widget-heading,
.home-valuation .elementor-widget-text-editor {
  position: relative !important;
  z-index: 10 !important;
}

.elementor-widget-image.home-valuation-scroller {
  z-index: 1 !important;
  top: -40% !important;
  left: 0;
  width: 100% !important;
  height: 140% !important;
}

.elementor-widget-image.home-valuation-scroller img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: bottom center !important;
}

/* ==========================================================================
   Contact / Enquiry Popup Form Styles
   ========================================================================== */

.dialog-type-lightbox.contact-popup-modal {
  z-index: 999999 !important;
}

.elementor-mark-required .elementor-field-label::after {
  color: #000000 !important;
}

/* Full screen popups (enquiry, menu) on phones (Trello "Enquiry popup on mobile"):
   "Fit to screen" makes the popup 100vh tall, which on phones is the height with
   the browser bars hidden, so the end of the form was behind the address bar and
   couldn't be scrolled into view. 100dvh follows the bars. Only caps the height,
   so smaller popups are not affected; the enquiry popup's container (b8d137d,
   EN and DE) fills the visible height instead of 100vh. */
@supports (height: 100dvh) {
  .elementor-popup-modal .dialog-widget-content,
  .elementor-popup-modal .dialog-message {
    max-height: 100dvh !important;
  }

  .elementor-popup-modal .e-con.elementor-element-b8d137d {
    --min-height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

/* ==========================================================================
   Hero Styles
   ========================================================================== */

.freeze-video-bg .elementor-background-video-container video {
  -webkit-media-controls-enclosure: none !important;
}
/*
.hero h1,
.hero h1.elementor-heading-title,
.hero .elementor-heading-title,
.hero h1 a,
.hero .elementor-heading-title a {
  font-family: var(--font-family-hero) !important;
  font-weight: var(--font-weight-light) !important;
  font-size: var(--title-size-1) !important;
  text-transform: uppercase;
  color: #ffffff !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 8px 16px rgba(0, 0, 0, 0.3),
    0 16px 32px rgba(0, 0, 0, 0.2);
}

.hero {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--body-size-m);
  color: #ffffff !important;
}
*/
/* Home Page - Centred */
.hero-home,
.hero-home p,
.hero-home .elementor-widget-container,
.hero-home .elementor-widget-text-editor {
  text-align: center !important;
}

.hero-home h1,
.hero-home h1.elementor-heading-title,
.hero-home .elementor-heading-title,
.hero-home h1 a,
.hero-home .elementor-heading-title a {
  /* font-family: var(--font-family-hero-bodoni) !important; (the var is undefined, so this cleared the font: hero titles use the global font "Hero") */
  text-align: center !important;
  text-transform: uppercase;
}

/* Section / Listing / Category Pages - Left */
.hero-section,
.hero-section p,
.hero-section .elementor-widget-container,
.hero-section .elementor-widget-text-editor {
  text-align: left !important;
}

.hero-section .elementor-heading-title,
.hero-section h2 {
  text-align: left !important;
  /* font-family: var(--font-family-hero) !important; (see .hero-home) */
}

/* Details / Single Pages - Centred */
.hero-details,
.hero-details p,
.hero-details .elementor-widget-container,
.hero-details .elementor-widget-text-editor {
  text-align: center !important;
}

.hero-details .elementor-heading-title,
.hero-details h2 {
  text-align: center !important;
  /* font-family: var(--font-family-hero) !important; (see .hero-home) */
}

/* Hero Icons */
.hero-icon-centre,
.hero-icon-right {
  position: absolute !important;
  bottom: 20px !important;
  z-index: 10;
}

.hero-icon-centre {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.hero-icon-centre .elementor-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px;
  height: 50px;
}

.hero-icon-right {
  right: 20px !important;
}

/* Sound On button (hero container "play-sound-btn": icon widget "sound-icon" +
   text widget "sound-text"). The pill takes the width of its content, so it
   looks the same on every screen and on every page it is copied to; the width,
   height, margins and paddings set in Elementor are ignored; its position
   (20px from the bottom right corner) stays in Elementor. */
.e-con.play-sound-btn {
  --th-sound-size: 16px;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5em !important;
  margin: 0 !important;
  padding: 0.4em 1em 0.4em 0.75em !important;
  border-radius: 999px !important;
  font-size: var(--th-sound-size) !important;
  line-height: 1 !important;
  cursor: pointer;
}

.e-con.play-sound-btn > .elementor-widget,
.e-con.play-sound-btn > .elementor-widget > .elementor-widget-container {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.e-con.play-sound-btn .sound-icon .elementor-icon-wrapper,
.e-con.play-sound-btn .sound-icon .elementor-icon {
  display: flex !important;
  line-height: 1 !important;
}

.e-con.play-sound-btn .sound-icon .elementor-icon {
  font-size: 1.6em !important;
}

.e-con.play-sound-btn .sound-icon .elementor-icon :is(i, svg) {
  width: 1.25em;
  height: 1em;
}

/* Older section heroes (Exclusive Sales, New Construction): the button sits in the
   column, so let it take its position from the hero, not from the column. */
.elementor-section > .elementor-container:has(.e-con.play-sound-btn) :is(.elementor-column, .elementor-widget-wrap) {
  position: static !important;
}

.e-con.play-sound-btn .sound-text,
.e-con.play-sound-btn .sound-text :is(p, span) {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Homepage hero on phones and tablets: the button sits halfway between the
   down chevron (50px, centred) and the side icons (29px at the right edge),
   instead of 20px from the right, where it ended up under the side icons.
   Centre of the gap: ((50% + 25px) + (100% - 29px)) / 2 = 75% - 2px. */
@media (max-width: 1024px) {
  .site-hero > .e-con.play-sound-btn {
    left: calc(75% - 2px) !important;
    right: auto !important;
    transform: translateX(-50%);
  }
}

/* The gap is only about 105px on 320px phones, so the button gets a bit smaller there. */
@media (max-width: 374px) {
  .site-hero > .e-con.play-sound-btn {
    --th-sound-size: 13px;
  }
}

/* Homepage hero on phones (Trello "Homepage hero"):
   - The header's height depends on the logo, which scales with the screen
     width, so Elementor's fixed -180px margin left a white strip above the
     video on some phones and cut off the top on others. The header now lies
     over the hero, and the hero starts at the top of the screen on every phone.
   - 100vh on phones is the height with the browser bars hidden, so the bottom
     of the hero (chevron, Sound On) was behind the address bar on first load.
     100svh is the height with the bars shown, so the whole hero is visible. */
@media (max-width: 767px) {
  body.home header.elementor-location-header {
    position: absolute;
    left: 0;
    right: 0;
  }

  body.home .e-con.site-hero {
    --margin-top: 0px !important;
    margin-top: 0 !important;
    --min-height: 100vh !important;
    min-height: 100vh !important;
  }

  @supports (height: 100svh) {
    body.home .e-con.site-hero {
      --min-height: 100svh !important;
      min-height: 100svh !important;
    }
  }
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */

footer.elementor-location-footer .elementor-widget-container p:not(:has(strong)),
footer .elementor-widget-text-editor .elementor-widget-container p {
  text-align: center !important;
}

/* ==========================================================================
   Property Detail Page
   ========================================================================== */
/* The class sits on the widget wrapper, but the kit's h1 rule sets the
   uppercase on the heading itself, so target the heading directly.
   2026-11-05 (Trello "Title Typography Case Change"): property names in all
   heroes in capitals, whatever case they are stored in. Was "none" (as typed). */
.th-hero-prop-name .elementor-heading-title {
  text-transform: uppercase !important;
}

/* Titles in Leading Caps, as typed (Trello "Title Typography Case Change",
   Marcus 2026-11-05): the homepage section titles, "Location" on the property
   pages and the Christmas countdown titles. They are stored in Leading Caps
   (German with its lowercase words); the capitals came from the kit's heading
   style or the widget's own setting. Elementor element IDs, the same in
   English and German. To go back to capitals, delete this rule.
   161bb5f/e201579 = homepage "For Sale"/"For Rent", 236e4b26 = Location
   (sales template), 4fbc8cc8 = Location (rental template), b880612 =
   countdown title Rentals, 4735660/054e739 = countdown title Seasonal EN/DE. */
:is(.elementor-element-161bb5f, .elementor-element-e201579, .elementor-element-236e4b26, .elementor-element-4fbc8cc8, .elementor-element-b880612, .elementor-element-4735660, .elementor-element-054e739) .elementor-heading-title {
  text-transform: none !important;
}

/* Floor area in the property hero (Trello "Hero Floor Area Typography"): the
   number sits in <div class="superli">, which the old ".superli, .super" rule
   above shrank to 14px and raised. Same size and line as the other hero lines
   (the widget's own 20px), with a smaller "2". */
.elementor-widget-text-editor div.superli {
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

.elementor-widget-text-editor div.superli .super {
  font-size: 0.6em;
  line-height: 0;
  vertical-align: super;
}

.th-description,
.th-description * {
  text-align: left !important;
}

.th-description p:has(strong),
.th-description *:has(> strong) {
  text-align: center !important;
}
/* ==========================================================================
   Property Details: floor plan + features ([th_property_floorplan], [th_property_features])
   The section gets these classes from the Property Details Layout tool.
   ========================================================================== */

/* Centred once image and text hit their caps (wide screens); below that they fill the width. */
.th-details > .elementor-container {
  align-items: center;
  justify-content: center;
}

/* Same width as the gallery above (full width, 5% side padding) instead of the
   boxed 1170px. Specific enough to beat the templates' own Elementor settings. */
.elementor .elementor-section.th-details.elementor-section-boxed {
  padding-left: 5%;
  padding-right: 5%;
}

.elementor .elementor-section.th-details.elementor-section-boxed > .elementor-container {
  max-width: none;
}

/* Image flush with the gallery's left edge (drops the column gap's 15px). */
.th-details > .elementor-container > .elementor-column.th-details__media > .elementor-widget-wrap.elementor-element-populated {
  padding-left: 0;
  padding-right: 0;
}

/* 80px between image and text while they sit side by side. */
@media (min-width: 768px) {
  /* Specific enough to beat the columns' own Elementor padding settings. */
  .th-details > .elementor-container > .elementor-column.th-details__media > .elementor-widget-wrap.elementor-element-populated {
    padding-right: 40px;
  }

  .th-details > .elementor-container > .elementor-column.th-details__text > .elementor-widget-wrap.elementor-element-populated {
    padding-left: 40px;
  }

  /* Wide screens: the image stops at 620px high (a slider at 3:2, a single image at its own ratio
     from --th-ratio). Its column shrinks to it and the text follows right after it, capped at
     930px so the feature columns don't stretch. */
  .th-details > .elementor-container {
    container-type: inline-size;
  }

  .th-details > .elementor-container > .elementor-column.th-details__media {
    flex: 0 0 auto;
    width: auto;
  }

  .th-details .th-floorplan {
    width: min(50cqw - 40px, 620px * var(--th-ratio, 3 / 2));
  }

  .th-details > .elementor-container > .elementor-column.th-details__text {
    flex-grow: 1;
    max-width: calc(620px * 3 / 2 + 40px);
  }
}

.th-floorplan {
  margin: 0;
}

/* Never taller than 620px (ultrawide screens), never distorted. */
.th-floorplan img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
  object-position: left center;
}

/* Two or more images: a slider (js/property-slider.js). Rental photos fill a 3:2 frame,
   sales images (floor plans) are shown whole inside it. */
.th-slider {
  position: relative;
}

.th-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.th-slider__track::-webkit-scrollbar {
  display: none;
}

.th-slider__track:focus-visible {
  outline: 2px solid #C9BCA9;
  outline-offset: 2px;
}

.th-slider__slide {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 3 / 2;
  scroll-snap-align: start;
}

.th-slider__slide a {
  display: block;
  height: 100%;
}

.th-floorplan.th-slider .th-slider__slide img {
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.th-floorplan.th-slider--contain .th-slider__slide img {
  object-fit: contain;
  object-position: left center;
}

.th-slider__arrow {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Overrides the Hello theme's pink button:hover/:focus. A clicked arrow keeps
   focus, so plain :focus stays white; only hover and keyboard focus turn beige. */
.th-slider__arrow:focus {
  background: rgba(255, 255, 255, 0.85);
}

.th-slider__arrow:hover,
.th-slider__arrow:focus-visible {
  background: #C9BCA9;
}

/* Chevron. */
.th-slider__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 1.5px solid #000000;
  border-right: 1.5px solid #000000;
}

.th-slider__arrow--prev {
  left: 12px;
}

.th-slider__arrow--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.th-slider__arrow--next {
  right: 12px;
}

.th-slider__arrow--next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

.th-slider__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 2px 10px;
  background: rgba(255, 255, 255, 0.85);
  font-family: var(--font-family-body);
  font-size: 13px;
  line-height: 1.6;
  color: #000000;
  pointer-events: none;
}

/* No image set: the text column takes the full width. */
.th-details:not(:has(.th-floorplan)) .th-details__media {
  display: none;
}

.th-details:not(:has(.th-floorplan)) .th-details__text {
  width: 100%;
}

.th-details:not(:has(.th-floorplan)) > .elementor-container > .elementor-column.th-details__text > .elementor-widget-wrap.elementor-element-populated {
  padding-left: 0;
}

.th-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.th-features__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid #C9BCA9;
}

.th-features__title {
  font-family: var(--font-family-body);
  font-size: var(--body-size-m);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: #000000;
}

.th-features__text {
  font-family: var(--font-family-body);
  font-size: var(--body-size-s);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: #7A7A7A;
}

/* 3 columns once the text column is wide enough (wide screens, or no floor plan). */
.elementor-shortcode:has(> .th-features) {
  container-type: inline-size;
}

@container (min-width: 600px) {
  .th-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Kept after the container query so phones stay at one column. */
@media (max-width: 767px) {
  .th-features {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Sales Property Details: laid out like the Chesa Lumina page (klosters.chesa-lumina.ch).
   Small title + title ([th_property_intro]) above the precis, the info box
   ([th_property_info_box]) below the features; precis and features keep their
   sizes. The section gets th-details--sales (sales) or th-details--rental
   (rentals, which keep their description) from the Property Description tool.
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-v21-latin-ext-regular.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-v21-latin-regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:is(.th-details--sales, .th-details--rental) {
  --th-display: "Sonya", "Cormorant Garamond", Georgia, serif;
  --th-beige: #C9BCA9; /* Site beige, as the features dividers. */
}

/* The small titles: same size as the old features label ("Die Ausstattung"). */
:is(.th-details--sales, .th-details--rental) .th-eyebrow {
  margin: 0 0 18px;
  font-family: "Roboto", "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--th-beige);
}

/* Beats the kit's h2 / h3 rules. */
:is(.th-details--sales, .th-details--rental) .th-intro__title,
:is(.th-details--sales, .th-details--rental) .th-info-box__title {
  margin: 0;
  font-family: var(--th-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  text-transform: none;
  color: #000000;
}

/* The old description section, until the property has text in the new fields
   (functions.php only renders .th-intro then). */
.th-details--sales:has(.th-intro) ~ .th-old-description {
  display: none;
}

:is(.th-details--sales, .th-details--rental) .th-intro > :last-child:not(.elementor-menu-anchor) {
  margin-bottom: 16px;
}

:is(.th-details--sales, .th-details--rental) .th-intro__title {
  font-size: clamp(48px, 4.4vw, 70px);
  line-height: 0.94;
}

:is(.th-details--sales, .th-details--rental) .th-info-box {
  margin: 30px 0 26px;
  padding: 24px 26px;
  background: rgba(201, 188, 169, 0.15);
  border-left: 2px solid var(--th-beige);
}

:is(.th-details--sales, .th-details--rental) .th-info-box .th-eyebrow {
  margin-bottom: 9px;
}

:is(.th-details--sales, .th-details--rental) .th-info-box__title {
  margin-bottom: 10px;
  font-size: 32px;
  line-height: 1;
}

/* Body size, like the feature names. */
:is(.th-details--sales, .th-details--rental) .th-info-box__content {
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
}

:is(.th-details--sales, .th-details--rental) .th-info-box__content > :last-child {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  :is(.th-details--sales, .th-details--rental) .th-info-box {
    padding: 20px;
  }

  :is(.th-details--sales, .th-details--rental) .th-info-box__title {
    font-size: 28px;
  }
}

/* ==========================================================================
   Rental Description Columns
   The description text in two columns, left-aligned, like the "Die
   Philosophie" text on the Chesa Lumina page. The section gets
   th-description-columns from the Property Description tool. Paragraphs may
   break between the columns: many descriptions are a single paragraph.
   Text as on the reference: Avenir Next 13.5px / 1.65, 16px between
   paragraphs (Avenir Next is a Mac/iOS font; Windows shows Helvetica Neue or
   Arial, as on the reference). Headings and the title line stay Canela
   ("Description Titles"). !important beats the inline styles pasted into
   the descriptions: text-align: center on most paragraphs, Word fonts on a few.
   ========================================================================== */

.th-description-columns .th-prop-description,
.th-description-columns .th-prop-description * {
  text-align: left !important;
}

.th-description-columns .th-prop-description > .elementor-widget-container {
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: normal;
}

.th-description-columns .th-prop-description :not(h1, h2, h3, h4, h5, h6)[style*="font"] {
  font-family: inherit !important;
  font-size: inherit !important;
}

.th-description-columns .th-prop-description p {
  margin: 0 0 16px;
}

@media (min-width: 901px) {
  .th-description-columns .th-prop-description > .elementor-widget-container {
    columns: 2;
    column-gap: 80px; /* The right column then starts in line with the features above. */
  }

  /* Headings and the bold title line span both columns, like the reference's title. */
  .th-description-columns .th-prop-description :is(h1, h2, h3, h4, h5, h6, .th-desc-title) {
    column-span: all;
  }

  /* Very short descriptions (th-desc-short, functions.php): one column on the
     right, in line with the features above. .elementor-widget beats the
     template's own margin on this container, which loads later. */
  .th-description-columns .elementor-widget.th-prop-description.th-desc-short > .elementor-widget-container {
    columns: auto;
    margin-left: calc(50% + 40px);
  }
}

.th-description-columns .th-prop-description > .elementor-widget-container > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Property Status Badge
   The badge (.status-thing) is positioned absolutely; make the hero, not its
   text column, the box it is measured from, so the 20px top/right offsets of
   the widget put it in the hero's top right corner.
   ========================================================================== */

.hero .elementor-column:has(.status-thing),
.hero .elementor-widget-wrap:has(> .elementor-element.status-thing) {
  position: static;
}

/* ==========================================================================
   Homepage Property Grid
   Fixed 510px cards, column count follows the browser width, grid centred.
   Scoped to the homepage (body.home, DE + EN); !important is needed to beat
   the general .all-properties rules in "Homepage / Property Grid Styles".
   ========================================================================== */

body.home .all-properties {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, min(510px, 100%)) !important;
  gap: 30px !important;
  justify-content: center;
  max-width: 1700px; /* max colums = 3. Without this there's an odd number of cards in bottom row.*/
  margin: 38px auto 0 auto !important;
}

body.home .property-col {width: 100% !important; margin: 0;}

/* ==========================================================================
   View All Submenus (homepage)
   A click on "View All" under a property grid slides down the pages of the
   matching main menu submenu (script in functions.php). Horizontal while
   the links fit on one line, otherwise a vertical list. The grid row trick (0fr -> 1fr) animates
   to the list's natural height; visibility keeps closed links out of the
   tab order.
   ========================================================================== */

.th-viewall-menu {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.4s ease, visibility 0s 0.4s;
}

.th-viewall-menu.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.4s ease, visibility 0s;
}

.th-viewall-menu > div {
  min-height: 0;
  overflow: hidden;
}

.th-viewall-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
  margin: 0;
  padding: 12px 0 0; /* space below View All, inside the animated box */
  list-style: none;
  text-align: center; /* the panel sits outside View All's centred <p>; long labels wrap on phones */
  text-wrap: balance;
}

.th-viewall-menu li {
  padding: 0 20px;
}

.th-viewall-menu li + li {
  border-left: 1px solid currentColor;
}

/* Both View All widgets at the Rentals size (21px in Elementor); the Sales
   widget's own 21px is not output because its typography is not set to
   custom. The submenu links inherit it. */
.main-link.th-viewall {
  font-size: 21px;
}

.main-link .th-viewall-menu a {
  text-decoration: none;
}

/* Same colour for both View All widgets and their links (Trello "Home Sales
   Submenu styling", 2026-11-04): the Rentals widget has the grey "Secondary"
   global colour (#54595F) as its link colour in Elementor, the Sales widget
   the kit link colour (black). Four classes so it beats Elementor's
   per-widget rule, which loads after this file. */
.elementor-element.elementor-widget.main-link.th-viewall a {
  color: var(--e-global-color-8eb81fe, #000);
}

/* Rental pages (Tools → Rental Links): the plain "View Seasonal Rentals" /
   "View Weekly Rentals" link above "View Sales", in the same look. */
.elementor-widget.th-more-link {
  font-size: 21px;
}

.elementor-element.elementor-widget.th-more-link a {
  color: var(--e-global-color-8eb81fe, #000);
  text-decoration: none;
}

/* Down chevron after View All, flips up while the submenu is open */
.main-link.th-viewall a[aria-controls]::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.5em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  vertical-align: 0.25em;
  transform: rotate(45deg);
  transition: transform 0.4s ease;
}

.main-link.th-viewall a[aria-expanded="true"]::after {
  transform: translateY(0.2em) rotate(225deg);
}

.main-link .th-viewall-menu a:hover,
.main-link .th-viewall-menu a:focus {
  text-decoration: underline;
}

/* Set by the script when the links don't fit on one line (always on phones).
   A 1px line in the site beige between the links (Trello "Home Sales Submenu
   styling"); all lines the same length, none above the first or below the last. */
.th-viewall-menu.is-stacked ul {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: max-content; /* as wide as the longest link, so all lines match */
  max-width: calc(100% - 40px); /* on phones long links wrap instead, 20px from the edges */
  margin: 0 auto;
  padding-top: 6px;
}

.th-viewall-menu.is-stacked li {
  position: relative;
  padding: 10px 0;
}

/* 125px lines, centred (Teresa via Marcus, 2026-11-02). Centred with auto
   margins, not a transform: a transformed line isn't snapped to whole pixels,
   so lines at half-pixel positions looked thicker than the others. */
.th-viewall-menu.is-stacked li + li {
  border-left: 0;
}

.th-viewall-menu.is-stacked li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 125px;
  height: 0;
  margin: 0 auto;
  border-top: 1px solid #C9BCA9;
}

/* ==========================================================================
   Description Titles
   The property description (Types field "main-description"): its headings, and
   a bold title line at the top, in Cormorant Garamond (was Canela Light; see
   "Typography" at the end). Classes from functions.php. One weight is loaded,
   so no synthetic bold. The widget class beats the kit's h1-h6 rules, which
   load after this file.
   ========================================================================== */
.elementor-widget.th-prop-description :is(h1, h2, h3, h4, h5, h6),
.elementor-widget.th-prop-description :is(h1, h2, h3, h4, h5, h6) :is(strong, b),
.elementor-widget.th-prop-description .th-desc-title,
.elementor-widget.th-prop-description .th-desc-title :is(strong, b) {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: normal;
}

/* The bold title line at 3rem (Marcus, 2026-11-02, to show Teresa); 2rem on
   phones, where long titles would otherwise run over five lines. */
.elementor-widget.th-prop-description .th-desc-title {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 24px;
}

@media (max-width: 767px) {
  .elementor-widget.th-prop-description .th-desc-title {
    font-size: 2rem;
  }
}

/* ==========================================================================
   Typography: Cormorant Garamond headings (Trello "Typography change")
   Every heading in Cormorant Garamond (self-hosted, @font-face in "Sales
   Property Details"), over the per-widget fonts set in Elementor (Canela,
   Italiana, Questrial, Bodoni, Open Sans ...). Sizes, colours and spacing stay
   as set in Elementor. Only the regular weight is loaded, so 400 everywhere
   (no synthetic bold).
   Page hero titles (in the first section of a page when it has a background:
   listing and other pages) are left out: they use the global font "Hero" in
   Elementor (Site Settings → Global Fonts), so their font, size, line height
   and capitals are changed there in one place. Property pages render as a
   single-post document, so their hero title is covered here and keeps its
   case (see .th-hero-prop-name).
   Rollback: delete this section and set "Description Titles" back to Canela.
   ========================================================================== */
:root body :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title, .special-title):not([data-elementor-type="wp-page"] > [data-settings*="background_background"]:first-child *),
:root body :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title, .special-title):not([data-elementor-type="wp-page"] > [data-settings*="background_background"]:first-child *) :is(a, span, strong, b, em, i:not([class])) {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 400 !important;
  font-synthesis: none;
}

/* ==========================================================================
   Listing Card Titles: long German words (Trello "Listing page images")
   On DE Chesa Lumina the text sat under the photo instead of next to it:
   "Mehrfamilienhaus" is 383px wide at 54px in Cormorant, more than the 324px
   text column, so the column wrapped to its own line. Very long words (15+
   letters) are hyphenated instead ("Mehrfamilien-haus"); shorter words and
   the English titles stay as they are.
   ========================================================================== */
.special-row .special-title {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 15 6 4;
}

/* ==========================================================================
   Compact Header on Phones and Tablets (Trello "Mobile sticky menu")
   The mobile header (logo, burger, flag) scrolls away with the page, so
   further down there was no way to the menu. Once it has scrolled out of
   view, it comes back as a slim bar fixed at the top: small logo on the
   left, flag and burger on the right. Scrolling back to the top shows the
   normal header again. The class th-sticky-bar and body.th-header-compact
   come from functions.php ("Compact header"), which also keeps the space
   of the header in the page so nothing jumps. 60px matches the anchor
   offset above (scroll-margin-top on phones).
   Rollback: delete this section and the script in functions.php.
   ========================================================================== */
@keyframes th-bar-in {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@media (max-width: 1024px) {
  body.th-header-compact .th-sticky-bar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 60px;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 15px !important;
    background: #fff;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.12);
    animation: th-bar-in 0.3s ease-out;
  }

  /* The containers are boxed: their children sit in .e-con-inner (a column, logo below the burger by order). */
  body.th-header-compact .th-sticky-bar > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    max-width: none !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Logo on the left, 40px high instead of the full width of the screen. */
  body.th-header-compact .th-sticky-bar .e-con:has(.elementor-widget-theme-site-logo) {
    order: 1 !important;
    width: auto !important;
    flex: 0 1 auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.th-header-compact .th-sticky-bar .elementor-widget-theme-site-logo img {
    width: auto !important;
    height: 40px !important;
    max-width: 100%;
    object-fit: contain;
  }

  /* Flag and burger on the right, vertically centred. */
  body.th-header-compact .th-sticky-bar .e-con:has(.burger) {
    order: 2 !important;
    width: auto !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The flag sat on the text baseline, 4px above the middle of the burger. */
  body.th-header-compact .th-sticky-bar .wpml-ls-link {
    display: flex;
    align-items: center;
  }

  /* Logged in: below the admin bar while it's fixed (it scrolls away on phones up to 600px). */
  body.admin-bar.th-header-compact .th-sticky-bar {
    top: 46px;
  }
}

@media (min-width: 783px) and (max-width: 1024px) {
  body.admin-bar.th-header-compact .th-sticky-bar {
    top: 32px;
  }
}

@media (max-width: 600px) {
  body.admin-bar.th-header-compact .th-sticky-bar {
    top: 0;
  }
}