/* rebuild.css — Rheintal Business Apartment (loads after template CSS, template files untouched) */

/* ---- DE typo guard: never break long German words mid-word ---- */
h1,
h2,
h3,
.hero-title,
.section-title,
.home-hero-title,
.common-hero-title {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-wrap: balance;
}

/* Cap the H1 clamp so "Wohlfühlapartments" (18 chars, longest word) never breaks mid-word.
   The template SplitText reveal (type: chars) wraps per character, so the size must
   guarantee each line fits its column at every breakpoint. */
h1.home-hero-title {
  font-size: clamp(22px, 3.4vw, 58px);
}
@media (max-width: 991px) {
  h1.home-hero-title {
    font-size: clamp(22px, 4.6vw, 44px);
  }
}
@media (max-width: 767px) {
  h1.home-hero-title {
    font-size: clamp(20px, 5.8vw, 34px);
  }
}

/* ---- Hero video-frame canvas (V1 scrollytelling) ---- */
.home-hero-section {
  position: relative;
  overflow: hidden;
}
.hero-frames-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-frames-poster,
.hero-frames-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-frames-canvas {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hero-frames-media.frames-ready .hero-frames-canvas {
  opacity: 1;
}
.hero-frames-media.frames-ready .hero-frames-poster {
  opacity: 0;
}
.hero-frames-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0.62) 0%, rgba(15, 15, 15, 0.38) 45%, rgba(15, 15, 15, 0.78) 100%);
}
.home-hero-section .w-container,
.home-hero-section .home-hero-main {
  position: relative;
  z-index: 2;
}

/* ---- Round brand logo (original circular JPG on dark header/footer) ---- */
.brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* Footer brand column: real column title ("Kontakt") replaces the old logo.
   Stretch to column width; flex gap already provides the spacing below,
   so a minimal margin keeps the text level with "Home". */
.footer-brand-wrapper .footer-col-title {
  align-self: stretch;
  margin-bottom: 4px;
}

/* ---- USP text ticker (repurposed company-logo marquee) ---- */
.company-logo-block {
  display: flex;
  align-items: center;
  gap: 16px;
}
.usp-ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fbfb4c;
  flex: none;
}
.usp-ticker-text {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #bfbfbf;
  white-space: nowrap;
}

/* ---- Counter stats row (V2, service section header) ---- */
.rebuild-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin-top: 24px;
}
.rebuild-stat-number {
  font-family: Lora, sans-serif;
  color: #fff;
  font-size: 48px;
  line-height: 1;
}
.rebuild-stat-label {
  color: #8a8a8a;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 8px;
  max-width: 220px;
}
@media (max-width: 767px) {
  .rebuild-stat-number {
    font-size: 36px;
  }
}

/* ---- Testimonial initials badges (no fake faces) ---- */
.initials-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #222;
  border: 1px solid #2a2a2a;
  color: #fbfb4c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Lora, sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  flex: none;
}
.initials-badge.tab-badge {
  width: 100%;
  height: 100%;
  min-height: 56px;
  border-radius: 50%;
}

/* ---- Home FAQ section (faq-wrapper reused standalone) ---- */
.home-faq-section .home-faq-wrapper {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.faq-inline-link {
  color: #fbfb4c;
  text-decoration: underline;
}

/* ---- Booking CTA buttons (form replaced by direct booking CTA) ---- */
.booking-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
}

/* ---- Footer CTA block (replaces newsletter form) ---- */
.footer-cta-button-wrapper {
  margin-top: 24px;
}

/* ---- V3: Standort hero parallax (image oversized so transform never exposes gaps) ---- */
.cms-image-wrapper.parallax-hero {
  overflow: hidden;
}
.cms-image-wrapper.parallax-hero .cms-image {
  scale: 1.16;
  will-change: transform;
}

/* ---- Smoobu embeds (buchen.html) ---- */
.smoobu-booking-iframe {
  width: 100%;
  height: 940px;
  border: 0;
  border-radius: 16px;
  background-color: #fff;
  display: block;
}
.smoobu-calendar-iframe {
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: 12px;
  background-color: #fff;
  display: block;
  margin-top: 16px;
}
.smoobu-fallback-note {
  color: #8a8a8a;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 16px;
  text-align: center;
}
.smoobu-fallback-note a {
  color: #fbfb4c;
  text-decoration: underline;
}
.calendar-card-meta {
  color: #8a8a8a;
  font-size: 14px;
  line-height: 1.7;
  margin-top: 8px;
}

/* ---- Legal pages (plain text layout, added for datenschutz/agb/hausordnung/impressum) ---- */
.legal-richtext {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.legal-richtext p {
  margin-bottom: 16px;
}
.legal-richtext h2 {
  margin-top: 40px;
  margin-bottom: 16px;
}

/* ---- DE typo guard for inner-page H1 (SplitText letters must never wrap mid-word) ---- */
h1.common-hero-title {
  font-size: clamp(24px, 5.4vw, 84px);
}
/* SplitText wraps words as inline-block .gsap_split_word with inline-block letters inside;
   nowrap stops the letters from wrapping inside a word (mid-word break). */
.gsap_split_word {
  white-space: nowrap;
}

/* ---- Fact/bed icons (original SVGs are #333 -> invert for dark theme) ---- */
.fact-icon {
  width: 16px;
  height: 17px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 8px;
  filter: invert(1);
  opacity: 0.75;
}

/* ---- Apartment amenity pills (specs card) ---- */
.amenity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.amenity-item {
  border: 1px solid #2a2a2a;
  border-radius: 1000px;
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #bfbfbf;
  background-color: #161616;
}

/* ---- Smoobu availability calendar section (apartment pages) ---- */
.availability-section .availability-iframe-wrapper {
  max-width: 960px;
  margin: 40px auto 0;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  overflow: hidden;
  background-color: #1c1c1c;
}
.availability-iframe {
  width: 100%;
  height: 420px;
  display: block;
  border: 0;
  background-color: #fff;
}
@media (max-width: 767px) {
  .availability-iframe {
    height: 520px;
  }
}

/* ---- Unterkuenfte location filter pills ---- */
.cms-category-link {
  cursor: pointer;
}
.cms-category-link.is-active {
  color: #0f0f0f;
  background-color: #fbfb4c;
  border-color: #fbfb4c;
}
.project-item.filter-hidden {
  display: none;
}

/* ---- QA-Fixes 2026-07-09 ---- */
/* Horizontal-Overflow bei 375px (standorte/*, region-artikel/*): breite
   Kinder auf Containerbreite kappen. Transform-Animationen unberuehrt. */
.button-bg,
.cms-image,
.w-richtext img,
.w-richtext figure,
.w-richtext table {
  max-width: 100%;
}
.w-richtext img {
  height: auto;
}
html,
body {
  overflow-x: clip;
}
/* FAQ-Akkordeon: Fokus sichtbar fuer Tastaturnutzer */
.faq-toggle:focus-visible {
  outline: 2px solid #fbfb4c;
  outline-offset: 4px;
}

/* ---- Firmenname neben Logo in der Navileiste (2026-07-10) ---- */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: none;          /* Webflow cappt sonst auf 130px */
  text-decoration: none;
}
.brand-name {
  font-family: Lora, serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #fff;
  text-transform: uppercase;
  white-space: normal;
  max-width: 190px;         /* 2-Zeilen-Lockup: "Rheintal Business" / "Apartments" */
}
/* Mobile: kompakter, damit Logo+Name+Burger nebeneinander passen */
@media (max-width: 767px) {
  .brand-name {
    font-size: 12px;
    max-width: 130px;
  }
  .brand-logo {
    width: 40px;
    height: 40px;
  }
}
/* Name im aufgeklappten Mobile-Menü (nav-mobile-brand) ausblenden —
   dort steht der Logo-Link doppelt, Name nur einmal oben in der Leiste. */
.nav-mobile-brand .brand-name {
  display: none;
}

/* ---- Booking-Bewertungs-Widget im Hero (Variante B, dark-native) 2026-07-10 ---- */
.booking-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 18px 20px;
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.18s ease, border-color 0.18s ease;
  max-width: 260px;
}
.booking-badge:hover,
.booking-badge:focus-visible {
  transform: translateY(-3px);
  border-color: #006ce4;
  outline: none;
}
.booking-badge:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 108, 228, 0.5);
}
.booking-badge-logo {
  display: inline-flex;
  align-items: center;
  background: #006ce4;
  border-radius: 4px;
  padding: 5px 9px;
  align-self: flex-start;
}
.booking-badge-logo span {
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.booking-badge-logo span b {
  color: #febb02;
}
.booking-badge-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.booking-badge-stars {
  display: flex;
  gap: 3px;
}
.booking-badge-stars svg {
  width: 16px;
  height: 16px;
  display: block;
}
.booking-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.booking-badge-score {
  background: #006ce4;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  border-radius: 8px 8px 8px 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.booking-badge-txt {
  display: flex;
  flex-direction: column;
}
.booking-badge-grade {
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.15;
}
.booking-badge-count {
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  margin-top: 2px;
}
/* Neutraler Stern-Ersatz für ehemalige 9,2-Zahlen-Slots */
.stat-stars {
  display: inline-flex;
  gap: 4px;
}
.stat-stars svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* ---- Hero-Video (autoplay) — umschaltbar via data-hero-mode 2026-07-10 ---- */
.hero-frames-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
/* Video-Modus: Video zeigen, Canvas aus */
.hero-frames-media[data-hero-mode="video"] .hero-frames-canvas {
  display: none;
}
.hero-frames-media[data-hero-mode="video"].video-ready .hero-frames-video {
  opacity: 1;
}
/* Poster bewusst NICHT ausblenden: das opake Video liegt im DOM darueber und
   deckt es ab. Das fruehere instant opacity:0 (Poster ohne transition) liess
   waehrend des 0.5s-Video-Fades den unscharfen LQIP-Hintergrund durchscheinen
   -> kurzer "Milchglas"-Moment beim Laden. 2026-07-13 */
/* Scroll-Modus: Video aus, Canvas übernimmt (bestehende Regeln greifen) */
.hero-frames-media[data-hero-mode="scroll"] .hero-frames-video {
  display: none;
}
/* Fix Blackscreen: Hero-Media (Poster) sofort sichtbar, entkoppelt vom Webflow
   IX3-Page-Load-Gate. Der eager/fetchpriority=high Poster wird sonst bis zum
   Laden von webflow.js (247 KB) via visibility:hidden unterdrueckt -> schwarzer
   Flash ueber body #0f0f0f. visibility:visible auf dem Nachkommen ueberschreibt
   das hidden des versteckten .home-hero-section-Vorfahren; Hero-Text bleibt im
   Gate (eigene Regel) und behaelt seine Einblend-Animation. 2026-07-11 */
html.w-mod-js:not(.w-mod-ix3) .hero-frames-media,
html.w-mod-js:not(.w-mod-ix3) .hero-frames-poster,
html.w-mod-js:not(.w-mod-ix3) .hero-frames-overlay {
  visibility: visible !important;
}

/* LQIP: Mini-Poster (1 KB, inline) als Sofort-Hintergrund der Hero-Media.
   Malt ab erstem CSS-Paint -> Hero nie schwarz waehrend poster.jpg laedt.
   Poster/Video ueberdecken das LQIP sobald geladen. 2026-07-11 */
.home-hero-sticky-wrapper,
.hero-frames-media {
  background: #b3b3af url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAEgAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgAEgAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACQkJCQkJEAkJEBYQEBAWHhYWFhYeJh4eHh4eJi4mJiYmJiYuLi4uLi4uLjc3Nzc3N0BAQEBASEhISEhISEhISP/bAEMBCwwMEhESHxERH0szKjNLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS//dAAQAAv/aAAwDAQACEQMRAD8A9O1ewtW2TooWTdgsvBI98VzyQ3EsjRR8FVZ/m7hfT3qDxBquoWs5ERDxfLtCj5hxyc9K5bT7nVLy8mkadgqozIwAUsOAAeo79Klv3rCtpc72ys7ojfIN27oOBxnH8634rSWIeYFTI7Ek/wBK5bTVupbc+bJIjkZypGc9Rjr6/nTJtc1S3mCIplQNk5Izj0xxj9aG1uOKex//0NvxQzBWwSOF/rWVoQGPwX+lafin7rf8B/rWboPT8E/pXNP4zaPwnYW3D4Ht/KptXRPsDSYG4A4Pf86htv8AWfl/KrGrf8g1/oafQOp//9k=) center / cover no-repeat;
}

/* Sektion "Ihre Gastgeberin": liegt transparent IM sticky Hero-Wrapper, der
   einen HELLEN Hintergrund hat (#b3b3af-LQIP + Hero-Foto). Ohne eigenen
   Background lag der Dark-Theme-Grautext (#bfbfbf) auf hellem Grund -> Kontrast
   ~1.8:1, unlesbar (DE+EN). Dunkles Glass gibt Kontrast (~8:1) und behaelt den
   Panel-/Glass-Look ueber dem Hero. 2026-07-11 */
.home-about-section {
  background: rgba(15, 15, 15, 0.94);
}

/* Schwarze .secondary-button: der IX3-Hover-Fill (skaliert .secondary-button-bg
   auf) fror nach Tap + Wegnavigieren + bfcache-Back gefuellt ein (gelber/weisser
   Pill, Label abgeschnitten). Media-Query/Touch-Detection war je nach Browser
   unzuverlaessig -> Fill UNBEDINGT deaktivieren: Layer fest auf Ruhezustand,
   Text immer weiss. Button kann nie fuellen -> nie einfrieren. Schwarz/weiss-
   Pill bleibt, nur die Fuell-Animation entfaellt. 2026-07-11 */
.secondary-button-bg { transform: none !important; translate: none !important; scale: none !important; }
.secondary-button-bg-inner { opacity: 0 !important; }
.secondary-button { color: var(--_colors---text--white) !important; }

/* Mobile: hero IX targets locked to final state — GSAP inline styles beaten by !important,
   so hero text paints at first frame and LCP never re-times to the fade-in. 2026-07-11 */
@media (max-width:991px){
  .home-hero-section :is(.home-hero-title,.home-hero-excerpt,.hero-left,.hero-right,
  .home-hero-center,.homer-hero-button-wrapper,.hero-badge-circle,.section-stat-block),
  .home-hero-section .gsap_split_word,.home-hero-section .gsap_split_word *{
    opacity:1 !important;transform:none !important;translate:none !important;visibility:visible !important;
  }
  /* hero-ring: opacity/visibility locked, transform frei — GSAP-Rotation (rebuild.js) braucht transform */
  .home-hero-section .hero-ring{opacity:1 !important;visibility:visible !important}
}

/* 992-1279px: .about-pills-Grid hat nur ~198px pro Spalte, Row-Pill (Icon links)
   braucht ~236px min-content -> rechte Pills ("Kueche komplett", "Gratis Parkplatz")
   ragen aus Grid + Viewport (right=1047 bei 1024px). Column-Layout wie <=991px,
   bis der Content-Wrapper ab 1280px auf 500px waechst. 2026-07-12 */
@media (min-width: 992px) and (max-width: 1279px) {
  .about-pill {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

/* Google-Maps-Pin-Badge auf Hero-Apartment-Karten (2026-07-13) */
.map-pin-badge{position:absolute;top:12px;right:12px;z-index:3;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(0,0,0,.18);color:#1a1a1a;transition:transform .18s ease,background .18s ease}
.map-pin-badge:hover{transform:scale(1.08);background:#fff}
.map-pin-badge:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}
.map-pin-badge svg{width:20px;height:20px;display:block}

/* Desktop: Hero-Media-Hoehe vom Section-Hoehensprung entkoppeln. Der
   webflow.js-Slider-Init laesst .home-about-slider um ~59px wachsen ->
   flex-stretch zieht .home-hero-section mit (791->850) -> das cover-Video
   reskalierte sichtbar (~+7,5% "Zoom-Ruck"), seit die Media vom
   visibility-Gate ausgenommen ist (Blackscreen-Fix 2026-07-11). Feste
   100vh-Hoehe springt nie; den Bereich darunter deckt dunkler Section-BG
   (Overlay-Gradient endet ohnehin fast schwarz). 2026-07-13 */
@media (min-width: 992px) {
  .home-hero-section { background: #0f0f0f; }
  .hero-frames-media { inset: auto; top: 0; left: 0; right: 0; height: 100vh; }
}