/* ============================================
   TWIN FLAMES BRAND OVERRIDES
   Brand Color: Red (#E63946 primary, #C9202F dark)
   ============================================ */

:root {
  --tf-red: #E63946;
  --tf-red-dark: #C9202F;
  --tf-red-light: #FF5868;
  --tf-cream: #FFF8F0;
}

/* Webflow-Badge KILL (failsafe) */
.w-webflow-badge,
a.w-webflow-badge,
[class*="webflow-badge"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* === PRIMARY BUTTON: ROT === */
.primary-button,
.primary-button-wrapper-two .primary-button {
  background-color: var(--tf-red) !important;
  border-color: var(--tf-red) !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}
.primary-button:hover {
  background-color: var(--tf-red-dark) !important;
  transform: translateY(-1px);
}
.primary-button-text,
.primary-button-hover-text {
  color: #fff !important;
}

/* === SECONDARY BUTTON: ROTER OUTLINE === */
.secondary-button {
  border: 2px solid var(--tf-red) !important;
}
.secondary-button:hover {
  background-color: var(--tf-red) !important;
}
.secondary-button-text,
.secondary-button-hover-text {
  color: var(--tf-red) !important;
}
.secondary-button:hover .secondary-button-text,
.secondary-button:hover .secondary-button-hover-text {
  color: #fff !important;
}

/* === PROJECTS-SECTION: alle Card-Inhalte weiß, kein Grau mehr === */
/* Komplette Card-Texte weiß (Titel, Sub-Titel, alle secondary-texts in Cards) */
.section.hero-project .hero-project-single-card,
.section.hero-project .hero-project-single-card *,
.section.hero-project .hero-project-card-title,
.section.hero-project .hero-project-card-title *,
.section.hero-project .hero-project-overly-box,
.section.hero-project .hero-project-overly-box *,
.section.hero-project .hero-project-card-bottom-box,
.section.hero-project .hero-project-card-bottom-box * {
  color: #ffffff !important;
}
.section.hero-project .hero-project-card-title {
  font-weight: 600 !important;
}
/* Sub-Labels (Project Type, Location etc.) — leicht transparent weiß für Hierarchie */
.section.hero-project .hero-project-card-bottom-box .secondary-text:first-child {
  color: rgba(255,255,255,0.65) !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}
/* Section-Headline (außerhalb der Cards) bleibt Original-Webflow-Color */

/* === ABOUT-SECTION: Vertikalen Abstand reduzieren (war zu weit nach unten gerutscht) === */
.section.hero-about {
  padding-top: 60px !important;
  margin-top: 0 !important;
}

/* === PAGE-FADE-IN bei jedem Page-Load === */
@keyframes tf-page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
body {
  animation: tf-page-fade-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Splash hat eigene Animation, ignoriert das */
body.tf-no-fade {
  animation: none;
}

/* === SPLASH-FADE: cinematic mit Stagger und Glow === */
#tf-splash {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, #1a0506 0%, #0a0a0c 70%),
    #0a0a0c;
  animation: tf-splash-out 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
}
#tf-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(230,57,70,0.18) 0%, transparent 45%);
  opacity: 0;
  animation: tf-splash-glow 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
#tf-splash img {
  height: 110px;
  width: auto;
  max-width: 380px;
  opacity: 0;
  transform: translateY(24px) scale(0.85);
  filter: blur(12px);
  animation: tf-splash-logo 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  position: relative;
  z-index: 2;
}
@keyframes tf-splash-logo {
  0%   { opacity: 0; transform: translateY(24px) scale(0.85); filter: blur(12px); }
  25%  { opacity: 1; transform: translateY(0) scale(1.02); filter: blur(0); }
  35%  { transform: translateY(0) scale(1); }
  70%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-12px) scale(1.12); filter: blur(4px); }
}
@keyframes tf-splash-glow {
  0%   { opacity: 0; transform: scale(0.7); }
  30%  { opacity: 1; transform: scale(1.05); }
  70%  { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}
@keyframes tf-splash-out {
  0%, 80%  { opacity: 1; pointer-events: auto; }
  100%     { opacity: 0; pointer-events: none; visibility: hidden; }
}
@media (max-width: 540px) {
  #tf-splash img { height: 76px; }
}

/* === PRICING: "Custom" rot === */
.section.hero-pricing .plan-price,
.section.hero-pricing h2.plan-price {
  color: var(--tf-red, #E63946) !important;
}

/* === HERO BACKGROUND-IMAGE + VIGNETTE (zurück auf vorherige Stärke) === */
.section.hero {
  background-image: url("hero-roofer-sunset.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative !important;
}
.section.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Vignette: dunkler Rand, klarere Mitte. Plus dezenter linker Schatten für Text */
  background:
    radial-gradient(ellipse at 30% 50%, transparent 30%, rgba(0,0,0,0.35) 75%, rgba(0,0,0,0.7) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%);
}
.section.hero > * {
  position: relative;
  z-index: 2;
}

/* === HERO FULL-SCREEN (100vh) === */
.section.hero {
  min-height: 100vh !important;
  height: 100vh !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  position: relative !important;
}

/* Hero-Content vertikal mittig — der innere Container */
.section.hero > .auto-container,
.section.hero > .container,
.section.hero .hero-content-wrap,
.section.hero .hero-wrap {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
  flex: 1 !important;
}

/* Auf sehr kleinen Screens: nicht zu eng */
@media (max-width: 767px) {
  .section.hero {
    min-height: 100svh !important;
    height: 100svh !important;
  }
}

/* Übergang zur nächsten Section */
.section.hero + section,
.section.hero + .section {
  padding-top: var(--_spacing---margin-padding--spacing-mega, 80px);
}

/* === MENU: alle Nav-Links WEISS, active rot === */
.navbar .nav-link,
.navbar .nav-menu,
.navbar a.nav-link,
.navbar a.nav-menu,
.navbar .nav-link.w--current,
.navbar .nav-menu.w--current,
.navbar a.nav-link.w--current,
.navbar a.nav-menu.w--current {
  background-color: transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
/* Active = Rot */
.navbar .nav-link.w--current,
.navbar .nav-menu.w--current,
.navbar a.nav-link.w--current,
.navbar a.nav-menu.w--current {
  color: var(--tf-red) !important;
}

.navbar .nav-link,
.navbar .nav-menu {
  transition: color 0.2s ease !important;
}
.navbar .nav-link:hover,
.navbar .nav-menu:hover {
  color: var(--tf-red) !important;
}

/* Dropdown-Toggle (Pages) auch weiß */
.navbar .dropdown-toggle-text-block,
.dropdown-toggle-text-block {
  color: #ffffff !important;
}

/* === Sticky Menu: KEINE Pill / Container-Background hinter den Nav-Links === */
.navbar .nav-menu-content,
.navbar .nave-menu,
.navbar nav.nave-menu.w-nav-menu,
.navbar .w-nav-menu,
.nav-menu-content,
.nave-menu,
nav.nave-menu.w-nav-menu {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* === HEADER-BUTTONS RAUS (sind in Sticky-Bottom-Bar) === */
.navbar .navbar-right-content,
.navbar .primary-button-wrapper-two,
.navbar .nav-right-btn-wrap,
.navbar .nav-button-wrap,
.navbar .nav-button-wrap.desktop {
  display: none !important;
  visibility: hidden !important;
}

/* === Header + Sticky-CTA verschwinden, wenn Trust-Section sichtbar === */
body.tf-hide-floating .navbar.w-nav,
body.tf-hide-floating #tf-sticky-cta {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-100%) !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}
body.tf-hide-floating #tf-sticky-cta {
  transform: translate(-50%, 120%) !important;
}

/* === LOGO CONSTRAINTS === */
.navbar-logo-image {
  height: 48px !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain !important;
  display: block !important;
  transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.navbar-logo-link {
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
}
.footer-logo {
  height: 64px !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain !important;
  display: block !important;
}
.footer-logo-box {
  overflow: visible !important;
}

/* === HEADER: HIDE-AT-TOP, STICKY-ON-SCROLL === */
.navbar.w-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9000 !important;
  background: transparent !important;
  transition:
    background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s ease,
    padding 0.3s ease !important;
  padding: 16px 0 !important;
}

/* Default-Zustand (Top of Page): nur Logo sichtbar, Menu/Buttons ausgeblendet */
body.tf-at-top .navbar.w-nav {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.tf-at-top .navbar.w-nav .nave-menu,
body.tf-at-top .navbar.w-nav nav.nave-menu.w-nav-menu,
body.tf-at-top .navbar.w-nav .navbar-right-content {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.35s ease, transform 0.35s ease !important;
}

/* Scroll-Zustand (Home) + alle Inner-Pages: Header voll sichtbar mit Glassmorphism */
body:not(.tf-at-top) .navbar.w-nav,
body.tf-page-inner .navbar.w-nav {
  background: rgba(15, 15, 18, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
  padding: 12px 0 !important;
}
body:not(.tf-at-top) .navbar.w-nav .navbar-logo-image,
body.tf-page-inner .navbar.w-nav .navbar-logo-image {
  height: 44px !important;
}
body:not(.tf-at-top) .navbar.w-nav .nave-menu,
body:not(.tf-at-top) .navbar.w-nav nav.nave-menu.w-nav-menu,
body:not(.tf-at-top) .navbar.w-nav .navbar-right-content,
body.tf-page-inner .navbar.w-nav .nave-menu,
body.tf-page-inner .navbar.w-nav nav.nave-menu.w-nav-menu,
body.tf-page-inner .navbar.w-nav .navbar-right-content {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}
/* Inner-Pages: Body bekommt Padding-Top damit Hero/Content nicht unter Fixed-Header rutscht */
body.tf-page-inner {
  padding-top: 88px;
}

/* === HERO CTAs: identisch zu Header-Buttons (outline + solid red) === */
.tf-hero-ctas {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}
.tf-hero-ctas .tf-outline-btn,
.tf-hero-ctas .tf-primary-btn {
  font-size: 15px !important;
  padding: 16px 28px !important;
}
/* Hero-Override: Configure Your Roof = weiße Schrift, roter Border (statt rote Schrift) */
.tf-hero-ctas .tf-outline-btn {
  color: #ffffff !important;
  background: transparent !important;
  border-color: var(--tf-red) !important;
}
.tf-hero-ctas .tf-outline-btn:hover {
  background: var(--tf-red) !important;
  color: #ffffff !important;
  border-color: var(--tf-red) !important;
}

/* Back-to-Top entfernt — Sticky Header reicht */
#tf-back-to-top { display: none !important; }

/* ==========================================================================
   MOBILE OPTIMIERUNG (alle Sections + Configurator)
   ========================================================================== */
@media (max-width: 767px) {
  /* === HEADER MOBILE === */
  .navbar.w-nav { padding: 10px 0 !important; }
  .navbar .navbar-content,
  .navbar-content {
    grid-template-columns: auto 1fr auto !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }
  .navbar-logo-image { height: 40px !important; }
  body:not(.tf-at-top) .navbar.w-nav .navbar-logo-image { height: 36px !important; }

  /* Mobile-Menu Hamburger sichtbar, Desktop-Nav versteckt */
  .navbar .menu-button { display: flex !important; }
  .navbar .nave-menu,
  .navbar nav.nave-menu.w-nav-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
    width: 80% !important;
    max-width: 320px !important;
    background: rgba(15,15,18,0.97) !important;
    backdrop-filter: blur(24px) !important;
    padding: 80px 28px 32px !important;
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1) !important;
    z-index: 8500 !important;
  }
  .navbar.w--open .nave-menu,
  .navbar.w--nav-menu-open .nave-menu,
  body.tf-mobile-nav-open .navbar .nave-menu {
    transform: translateX(0) !important;
  }
  .nav-menu-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .nav-menu-content .nav-link,
  .nav-menu-content a {
    font-size: 18px !important;
    padding: 8px 0 !important;
    width: 100% !important;
  }
  /* Pages-Dropdown auf Mobile auch nur ein Link */
  .menu-dropdown-wrapper { display: none !important; }

  /* === HERO MOBILE === */
  .section.hero { min-height: 100svh !important; height: 100svh !important; }
  .hero-title, .hero h1, .section.hero h1 {
    font-size: 38px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
  }
  .hero-wrap { max-width: 100% !important; padding: 0 16px !important; }

  /* Hero CTAs untereinander */
  .tf-hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 320px !important;
  }
  .tf-hero-ctas .tf-outline-btn,
  .tf-hero-ctas .tf-primary-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 22px !important;
    font-size: 14px !important;
  }

  /* === STATS-SECTION VIDEO MOBILE === */
  .hero-counter-botton-box {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 12px !important;
  }
  .hero-counter-card {
    padding: 16px 8px !important;
  }
  .hero-counter-wrap .heading-three {
    font-size: 36px !important;
  }

  /* === SERVICE-CARDS MOBILE: Sticky aus, normaler Stack === */
  .hero-service-single-card.one,
  .hero-service-single-card.two,
  .hero-service-single-card.three {
    position: static !important;
    top: auto !important;
    margin-bottom: 24px !important;
  }
  .hero-service-image-box,
  .hero-service-image-box-wrap {
    min-height: 240px !important;
    aspect-ratio: 16 / 11 !important;
  }

  /* === PROJECT-CARDS MOBILE === */
  .hero-project-wrap {
    grid-template-columns: 1fr !important;
  }

  /* === MATERIALS MOBILE: 1-Col Stack === */
  .materials-single-card-one,
  .materials-single-card-two {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .materials-card-title {
    white-space: normal !important;
    font-size: 28px !important;
    min-height: auto !important;
  }

  /* === PRODUCTS MOBILE: 1-Col === */
  .hero-products-collection-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* === TRUST-APP-CARD MOBILE === */
  .tf-trust-app-section { padding: 64px 16px !important; }
  .tf-trust-app-grid { padding: 48px 24px !important; border-radius: 22px !important; }
  .tf-trust-app-content h2 { font-size: 28px !important; }
  .tf-trust-app-logo { height: 32px !important; }

  /* === FOOTER MOBILE === */
  .tf-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-bottom: 32px !important;
  }
  .section.footer { padding: 56px 20px 24px !important; }

  /* === STICKY-BOTTOM-CTA MOBILE: full-width und schön === */
  #tf-sticky-cta {
    bottom: 12px !important;
    width: calc(100% - 24px) !important;
    left: 12px !important;
    transform: none !important;
    padding: 5px !important;
  }
  #tf-sticky-cta.tf-hidden {
    transform: translateY(120%) !important;
  }
  #tf-sticky-cta a {
    flex: 1 !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    padding: 11px 8px !important;
  }

  /* === EXIT-POPUP (MVA) MOBILE === */
  #tf-mva-modal { max-width: calc(100% - 24px) !important; }

  /* === ROOF CONFIGURATOR MOBILE === */
  #tf-configurator { padding: 0 !important; }
  .tf-cfg-modal {
    height: 100svh !important;
    max-height: 100svh !important;
    border-radius: 0 !important;
    max-width: 100% !important;
  }
  .tf-cfg-header { padding: 12px 14px !important; }
  .tf-cfg-brand img { height: 24px !important; }
  .tf-cfg-progress { margin: 0 8px !important; max-width: none !important; }
  .tf-cfg-close { width: 32px !important; height: 32px !important; font-size: 18px !important; }
  .tf-cfg-body { padding: 18px 16px !important; }
  .tf-cfg-step h2 { font-size: 22px !important; }
  .tf-cfg-step p { font-size: 14px !important; }
  .tf-cfg-input input,
  .tf-cfg-form input { padding: 14px 16px !important; font-size: 14px !important; }
  .tf-cfg-suggestion { padding: 10px 14px !important; font-size: 13px !important; }
  .tf-cfg-map { height: 360px !important; }
  .tf-cfg-materials { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .tf-cfg-material-img { aspect-ratio: 4/3 !important; }
  .tf-cfg-material-info { padding: 10px 12px !important; }
  .tf-cfg-material-name { font-size: 12.5px !important; }
  .tf-cfg-material-price { font-size: 11px !important; }
  .tf-cfg-form { max-width: 100% !important; }
  .tf-cfg-footer { padding: 12px 14px !important; gap: 8px !important; }
  .tf-cfg-btn { padding: 11px 14px !important; font-size: 13px !important; flex: 1 !important; }
  .tf-cfg-btn-ghost { flex: 0 0 auto !important; padding: 11px 18px !important; }
  .tf-cfg-estimate-range { font-size: 36px !important; }
  .tf-cfg-estimate-summary { padding: 14px !important; }
}

/* === Scroll-Down Indicator: Old Selector === */
/* === SCROLL-DOWN INDICATOR: "Scroll to see" + animierter Pfeil === */
.tf-scroll-down {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  z-index: 5;
  padding: 8px 12px;
  border-radius: 999px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: inherit;
}
.tf-scroll-down-text {
  white-space: nowrap;
}
.tf-scroll-down-arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  animation: tf-scroll-arrow 1.6s infinite ease-in-out;
}
.tf-scroll-down:hover {
  color: rgba(255, 255, 255, 1);
  transform: translateX(-50%) translateY(2px);
}
@keyframes tf-scroll-arrow {
  0%   { transform: translateY(-4px); opacity: 0.4; }
  50%  { transform: translateY(2px);  opacity: 1; }
  100% { transform: translateY(-4px); opacity: 0.4; }
}
@media (max-width: 540px) {
  .tf-scroll-down { bottom: 20px; font-size: 10px; }
}

/* === ABOUT-SECTION mehr Abstand zum Hero === */
.section.hero-about {
  padding-top: 180px !important;
}
@media (max-width: 767px) {
  .section.hero-about { padding-top: 100px !important; }
}

/* === APP-STYLE CTA-SECTION — TF-CI-STIL, gleiche Hintergrundfarbe wie FAQ ===
   FAQ in Webflow nutzt var(--color--fill-color) — heller Background
   Die CTA-Card ist clean, ohne Gradient-Glow, im Brand-Stil */
.tf-app-cta-section {
  padding: 80px 24px;
  background-color: var(--color--fill-color, #f6f6f3);
  position: relative;
  overflow: hidden;
}
.tf-app-cta-card {
  max-width: 880px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(10, 10, 12, 0.08);
  border-radius: 24px;
  padding: 56px 48px;
  text-align: center;
  position: relative;
  box-shadow: 0 12px 40px rgba(10, 10, 12, 0.06);
}
.tf-app-cta-card .tf-app-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tf-red);
  margin-bottom: 18px;
  padding: 6px 14px;
  background: rgba(230, 57, 70, 0.1);
  border-radius: 999px;
}
.tf-app-cta-card h2 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.15;
  color: #0a0a0c;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}
.tf-app-cta-card p {
  font-size: 16px;
  line-height: 1.55;
  color: #555560;
  margin: 0 0 32px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.tf-app-cta-card .tf-app-buttons {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.tf-app-cta-card .tf-app-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  border: 2px solid transparent;
  line-height: 1;
}
.tf-app-cta-card .tf-app-cta-primary {
  background: var(--tf-red);
  color: #ffffff !important;
  border-color: var(--tf-red);
}
.tf-app-cta-card .tf-app-cta-primary:hover {
  background: var(--tf-red-dark);
  border-color: var(--tf-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(230, 57, 70, 0.3);
}
.tf-app-cta-card .tf-app-cta-secondary {
  background: transparent;
  color: #0a0a0c !important;
  border-color: rgba(10, 10, 12, 0.18);
}
.tf-app-cta-card .tf-app-cta-secondary:hover {
  background: #0a0a0c;
  color: #ffffff !important;
  border-color: #0a0a0c;
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .tf-app-cta-section { padding: 56px 16px; }
  .tf-app-cta-card { padding: 38px 24px; border-radius: 22px; }
  .tf-app-cta-card h2 { font-size: 26px; }
  .tf-app-cta-card .tf-app-buttons a { padding: 14px 22px; font-size: 14px; }
}

/* === FOOTER MULTI-COLUMN LAYOUT === */
.section.footer {
  padding: 80px 24px 32px !important;
}
.tf-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  align-items: start;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tf-footer-brand .footer-logo-box {
  display: inline-block;
  margin-bottom: 18px;
}
.section.footer .footer-logo,
.tf-footer-brand .footer-logo {
  height: 72px !important;
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
}
.tf-footer-about {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 18px;
  max-width: 360px;
}
.tf-footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tf-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(230, 57, 70, 0.12);
  color: var(--tf-red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(230, 57, 70, 0.2);
}
.tf-footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tf-footer-col-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 8px;
}
.tf-footer-link {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1.4;
}
.tf-footer-link:hover {
  color: #ffffff;
}
.tf-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 18px;
  background: var(--tf-red);
  color: #ffffff !important;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  align-self: flex-start;
  border: 2px solid var(--tf-red);
  white-space: nowrap;
}
.tf-footer-cta:hover {
  background: var(--tf-red-dark);
  border-color: var(--tf-red-dark);
  transform: translateY(-1px);
}
.section.footer .footer-bottom-box {
  padding-top: 24px !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  border-top: none !important;
  background: transparent !important;
}
/* Copyright weiß */
.section.footer .footrer-copyright-box,
.section.footer .footrer-copyright-box .description,
.section.footer .footrer-copyright-box * {
  color: #ffffff !important;
}
.section.footer .footrer-copyright-box .description.gray {
  color: rgba(255,255,255,0.85) !important;
}
.section.footer .footrer-copyright-box strong {
  color: #ffffff !important;
}

/* Body bleibt Default-Background — kein Override, sonst überschattet alles */
@media (max-width: 991px) {
  .tf-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 32px;
  }
  .tf-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .section.footer { padding: 56px 20px 24px !important; }
  .tf-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .section.footer .footer-logo { height: 56px !important; }
}

/* === TRUST-SECTION: graue Section, INNEN dark Card mit VIDEO + VIGNETTE === */
.tf-trust-app-section {
  min-height: 100vh;
  padding: 80px 24px;
  background-color: var(--color--black, #191919);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* Card wird zum Video-Container */
.tf-trust-app-section .tf-trust-app-grid {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
/* Section-Background-Video und Section-Vignette: NICHT mehr (in Card) */
.tf-trust-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.tf-trust-video-bg .tf-trust-video,
.tf-trust-app-grid > .tf-trust-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.tf-trust-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.45) 25%, rgba(0,0,0,0.88) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 100%);
}
/* Content über Video + Vignette */
.tf-trust-app-grid > .tf-trust-app-content,
.tf-trust-app-grid > .tf-trust-app-actions,
.tf-trust-app-grid > .tf-trust-app-logo {
  position: relative;
  z-index: 2;
}
/* Grid wird zur schwarzen Card */
.tf-trust-app-grid {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  background-color: #0a0a0c;
  border-radius: 32px;
  padding: 80px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}
/* TF-Logo oben mittig — pur, ohne Background-Pill */
.tf-trust-app-logo {
  height: 44px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  margin-bottom: 8px;
}
/* Headline + Sub: weiß auf schwarzer Card */
.tf-trust-app-content h2 {
  color: #ffffff !important;
}
.tf-trust-app-content p {
  color: rgba(255, 255, 255, 0.65) !important;
}
/* Buttons: Outline weiß, Solid rot */
.tf-trust-app-actions .tf-outline-btn {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: transparent !important;
}
.tf-trust-app-actions .tf-outline-btn:hover {
  background: #ffffff !important;
  color: #0a0a0c !important;
  border-color: #ffffff !important;
}
.tf-trust-app-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.tf-trust-app-content h2 {
  font-size: 64px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.8px;
  margin: 0;
  color: #ffffff;
  max-width: 880px;
}
.tf-trust-app-content p {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 640px;
}
.tf-trust-app-actions {
  display: inline-flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.tf-trust-app-actions .tf-outline-btn,
.tf-trust-app-actions .tf-primary-btn {
  font-size: 16px !important;
  padding: 20px 36px !important;
  letter-spacing: 0.2px !important;
}
/* Outline auf dunklem BG: weiße Schrift + Border (statt rote) */
.tf-trust-app-actions .tf-outline-btn {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: transparent !important;
}
.tf-trust-app-actions .tf-outline-btn:hover {
  background: #ffffff !important;
  color: #0a0a0c !important;
  border-color: #ffffff !important;
}
@media (max-width: 991px) {
  .tf-trust-app-section { padding: 80px 24px; }
  .tf-trust-app-content h2 { font-size: 44px; }
}
@media (max-width: 540px) {
  .tf-trust-app-section { padding: 64px 20px; }
  .tf-trust-app-content h2 { font-size: 30px; }
  .tf-trust-app-actions { flex-direction: column; width: 100%; }
  .tf-trust-app-actions .tf-outline-btn,
  .tf-trust-app-actions .tf-primary-btn { width: 100%; }
}

/* === PRODUCT-CARDS: Titel-Höhe vereinheitlichen (verhindert Layout-Bug bei mehrzeiligen Titeln) === */
.products-card-title {
  min-height: 2.4em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.product-card-text {
  min-height: 3em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* === SERVICE-CARDS: einheitliche Größen — beide Container forcieren === */
.hero-service-single-card,
.hero-service-single-card.one,
.hero-service-single-card.two,
.hero-service-single-card.three {
  width: 100% !important;
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero-service-image-box-wrap,
.hero-service-image-box {
  width: 100% !important;
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: #1a1a20 !important;
}
.hero-service-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
@media screen and (max-width: 767px) {
  .hero-service-image-box-wrap,
  .hero-service-image-box {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
  }
}

/* === TEAM-AVATARE: WhatsApp-Style Initial-Avatare === */
.tf-team-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -1px;
  color: rgba(255, 255, 255, 0.95);
  background:
    linear-gradient(135deg, #2a2a35 0%, #1a1a20 100%);
  position: relative;
  overflow: hidden;
}
.tf-team-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(230, 57, 70, 0.18), transparent 60%);
  pointer-events: none;
}
.tf-team-avatar[data-initials="FF"] {
  background: linear-gradient(135deg, #2c1d2a 0%, #1a1a20 100%);
}
.tf-team-avatar[data-initials="MA"] {
  background: linear-gradient(135deg, #1f2a35 0%, #14181d 100%);
}
.tf-team-avatar[data-initials="LF"] {
  background: linear-gradient(135deg, #2a2520 0%, #1a1815 100%);
}
.tf-team-avatar[data-initials="ES"] {
  background: linear-gradient(135deg, #25282c 0%, #16181a 100%);
}

/* === PRODUCT-CARDS: Image-Box stabile Größe + mehr row-gap zwischen Reihen === */
.hero-products-collection-list,
.products-wrap .w-dyn-list > [role="list"] {
  row-gap: 56px !important;
  grid-row-gap: 56px !important;
}
.products-card-image-box,
.products-single-card .image-wrap {
  min-height: 280px !important;
  background-color: #1a1a20 !important;
  position: relative !important;
}
.products-single-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* === TESTIMONIAL-IMAGE-BOX: stabile Größe === */
.testimonials-image-box,
.testimonials-overly-image-box {
  min-height: 200px !important;
  background-color: #1a1a20 !important;
  position: relative !important;
}
.testimonials-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* === MATERIALS-SECTION: Premium Fasteners + Polycarbonate Sheets gleicher Vertical-Center === */
.materials-single-card-two {
  align-items: center !important;
}
/* Card-Title ist auf 1-2 Zeilen — fix Min-Höhe damit Layout stabil */
.materials-card-title {
  min-height: 2em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* === COUNTER-SECTION (Index): Video-Background im HTML — Section muss relative sein === */
section:has(> .container > .hero-counter-wrap),
.section:has(.hero-counter-wrap) {
  position: relative !important;
  overflow: hidden !important;
}
.section .background {
  background-image: none !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}
.section .background video,
.tf-stats-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
/* Counter-Wrap muss über dem Video sein */
.hero-counter-wrap {
  position: relative !important;
  z-index: 2 !important;
}
/* Counter-Zahlen weiß auf Video-Background */
.hero-counter-wrap .heading-three,
.hero-counter-wrap .laboratory-counter-wrapper,
.hero-counter-wrap .laboratory-counter-wrapper * {
  color: #ffffff !important;
}

/* === HEADER BUTTONS === */
.tf-primary-btn,
.tf-outline-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1;
}

/* Solid red — rechts (Call) */
.tf-primary-btn {
  background: var(--tf-red);
  color: #fff !important;
  border: 2px solid var(--tf-red);
}
.tf-primary-btn:hover {
  background: var(--tf-red-dark);
  border-color: var(--tf-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(230, 57, 70, 0.35);
}

/* Outline only — links (Estimate) */
.tf-outline-btn {
  background: transparent;
  color: var(--tf-red) !important;
  border: 2px solid var(--tf-red);
}
.tf-outline-btn:hover {
  background: var(--tf-red);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(230, 57, 70, 0.25);
}

/* === HEADER LAYOUT: 3-Spalten-Grid === Logo | Menu | Right ===
   Drei gleiche Spalten — Logo links, Menu mittig, Right rechts.
   Auch wenn Right hidden ist: Grid behält die Spalte und zwingt Menu in die Mitte. */
.navbar .navbar-content,
.navbar-content {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  gap: 24px !important;
}

/* Spalte 1: Logo links */
.navbar .navbar-logo-link,
.navbar-logo-link {
  justify-self: start !important;
  grid-column: 1 !important;
}

/* Spalte 2: Menu mittig */
.navbar .nave-menu,
.navbar nav.nave-menu.w-nav-menu,
.nave-menu,
nav.nave-menu.w-nav-menu {
  position: static !important;
  transform: none !important;
  justify-self: center !important;
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
}
.nav-menu-content {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}

/* Spalte 3: Right (versteckt aber Spalte bleibt) */
.navbar .navbar-right-content {
  grid-column: 3 !important;
  justify-self: end !important;
}

/* Mobile: Grid kollabiert — Logo + Menu nebeneinander */
@media (max-width: 991px) {
  .navbar .navbar-content,
  .navbar-content {
    grid-template-columns: auto 1fr !important;
  }
  .navbar .nave-menu,
  .navbar nav.nave-menu.w-nav-menu {
    justify-self: end !important;
    grid-column: 2 !important;
  }
}

/* === HERO TRUST BADGE: kompakt, kürzere Texte === */
.tf-trust-bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.3px;
  width: auto;
  align-self: flex-start;
}
.tf-trust-bar .tf-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 500;
}
.tf-trust-bar .tf-trust-dot {
  width: 6px;
  height: 6px;
  background: var(--tf-red);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--tf-red);
}
.tf-trust-bar .tf-trust-divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 540px) {
  .tf-trust-bar {
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 12px;
    font-size: 10.5px;
    gap: 8px;
  }
  .tf-trust-bar .tf-trust-divider { display: none; }
}

/* === BRAND ACCENT auf Headlines + Anchors === */
.text-color-primary,
.primary-text-color,
.accent-text {
  color: var(--tf-red) !important;
}
a {
  color: inherit;
}
a.black-link:hover,
a:hover.black-link {
  color: var(--tf-red) !important;
}

/* === STICKY BOTTOM CTA-BAR: zwei Buttons in EINER Container-Pill === */
#tf-sticky-cta {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  background: rgba(20, 20, 24, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
#tf-sticky-cta.tf-hidden {
  transform: translate(-50%, 120%);
  opacity: 0;
  pointer-events: none;
}
#tf-sticky-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  line-height: 1;
  border: 2px solid transparent;
}
#tf-sticky-cta .tf-cta-outline {
  background: transparent;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.18);
}
#tf-sticky-cta .tf-cta-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
}
#tf-sticky-cta .tf-cta-primary {
  background: var(--tf-red);
  color: #ffffff !important;
  border-color: var(--tf-red);
}
#tf-sticky-cta .tf-cta-primary:hover {
  background: var(--tf-red-dark);
  border-color: var(--tf-red-dark);
  box-shadow: 0 8px 18px rgba(230, 57, 70, 0.4);
}

@media (max-width: 540px) {
  #tf-sticky-cta {
    bottom: 12px;
    width: calc(100% - 24px);
  }
  #tf-sticky-cta a {
    padding: 11px 14px;
    font-size: 12.5px;
    flex: 1;
  }
}

/* === EXIT POPUP: MVA — A4 Letter, Apple-style unified actions === */
#tf-mva-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: rgba(8, 6, 3, 0.72);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
#tf-mva-overlay.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mva-letter-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 620px;
  margin: auto;
  transform: translateY(28px) scale(0.985);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}
#tf-mva-overlay.active .mva-letter-stage {
  transform: translateY(0) scale(1);
  opacity: 1;
  transition-delay: 0.08s;
}

#tf-mva-close {
  position: absolute;
  top: -42px;
  right: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 5;
}
#tf-mva-close svg { width: 18px; height: 18px; }
#tf-mva-close:hover { color: #fff; transform: scale(1.08); }

/* === A4 paper === */
.mva-letter {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 50px 90px rgba(0, 0, 0, 0.55)) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.32));
}

.mva-letter-paper {
  position: relative;
  width: 100%;
  background: #ffffff;
  border-radius: 4px;
  padding: 72px 76px 64px;
  color: #14182a;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mva-letter-paper::-webkit-scrollbar { width: 5px; }
.mva-letter-paper::-webkit-scrollbar-track { background: transparent; }
.mva-letter-paper::-webkit-scrollbar-thumb { background: rgba(20, 24, 40, 0.16); border-radius: 3px; }

/* === Heading === */
.mva-letter-title {
  font-family: inherit;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: #14182a;
  margin: 0 0 28px;
  line-height: 1.2;
}

/* === Body === */
.mva-letter-body {
  font-size: 15.5px;
  line-height: 1.68;
  color: #14182a;
  letter-spacing: -0.005em;
}
.mva-letter-body p {
  margin: 0 0 16px;
}
.mva-letter-body em {
  font-style: italic;
  color: #4a3014;
  font-weight: 500;
}
.mva-letter-body strong {
  font-weight: 600;
  color: #14182a;
}
.mva-letter-yours {
  font-size: 15px !important;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
  color: rgba(20, 24, 40, 0.7);
  font-style: italic;
}

/* === Signature image — bigger === */
.mva-letter-signature {
  margin-top: 8px;
  padding-bottom: 8px;
}
.mva-letter-sig-img {
  display: block;
  width: auto;
  height: 124px;
  margin-left: -14px;
  filter: brightness(0) saturate(100%);
  opacity: 0.92;
}

/* === Actions row OUTSIDE letter — Apple-style === */
.mva-letter-actions-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 620px;
}

.mva-cta {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 13px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mva-cta.primary {
  background: #ffffff;
  color: #14182a;
  border: 1px solid #ffffff;
}
.mva-cta.primary:hover { background: #f1f1f5; transform: translateY(-1px); }

.mva-cta.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mva-cta.secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

/* === Floating Reopen Button (bottom-right) === */
#tf-mva-reopen {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(20, 24, 40, 0.92);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
#tf-mva-reopen.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#tf-mva-reopen:hover { background: #14182a; transform: translateY(-2px); }
#tf-mva-reopen svg { width: 16px; height: 16px; opacity: 0.85; }

/* === Mobile === */
@media (max-width: 640px) {
  #tf-mva-overlay { padding: 16px 12px; }
  .mva-letter-stage { max-width: 100%; gap: 14px; }
  .mva-letter-paper { padding: 44px 28px 32px; max-height: calc(100vh - 240px); }
  .mva-letter-title { font-size: 22px; margin-bottom: 22px; }
  .mva-letter-body { font-size: 14.5px; line-height: 1.65; }
  .mva-letter-yours { font-size: 14px !important; margin-top: 20px !important; }
  .mva-letter-sig-img { height: 96px; margin-left: -10px; }
  #tf-mva-close { top: -38px; }

  .mva-letter-actions-row {
    flex-direction: column;
    gap: 8px;
  }
  .mva-cta {
    width: 100%;
    padding: 14px 18px;
    font-size: 13.5px;
  }

  #tf-mva-reopen {
    bottom: 16px;
    right: 16px;
    padding: 9px 16px 9px 12px;
    font-size: 11px;
  }
}



/* === Testimonial round avatars === */
.tf-test-avatar-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 22px;
  background: #1a1a1a;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.tf-test-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testimonials-single-card {
  display: flex !important;
  flex-direction: column !important;
}
.testimonials-single-card .secondary-text {
  flex: 1;
}
.testimonials-signature-box {
  margin-top: auto;
}
.testimonials-signature-box .small-text {
  display: inline-block;
  background: rgba(20, 24, 40, 0.06);
  color: rgba(20, 24, 40, 0.72);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* === Trust bar moved BELOW Hero CTAs (klein) === */
.tf-trust-bar-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  flex-wrap: wrap;
}
.tf-trust-bar-bottom .tf-trust-item { color: rgba(255, 255, 255, 0.78); }
.tf-trust-bar-bottom .tf-trust-divider {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.tf-trust-bar-bottom .tf-trust-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #50e3a4;
  margin-right: 6px;
  vertical-align: 1px;
}
/* Hide ORIGINAL trust-bar (left over instances) on top */
.hero-wrap > .tf-trust-bar:not(.tf-trust-bar-bottom),
.hero-wrap > .tf-trust-bar:first-child:not(.tf-trust-bar-bottom) {
  display: none !important;
}

/* === Mobile menu: kein Pill-Background === */
.navbar .nav-menu-content,
.navbar .nave-menu .nav-menu-main-wrap,
.navbar .nav-all-menu-wrap,
.nav-menu-main-wrap.mobile {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.navbar nav.nave-menu.w-nav-menu {
  background: transparent !important;
}

/* Hide empty divs left from removed nav-links */
.nav-menu-wrap:empty,
.nav-link-wrap:empty,
.nav-link-wrapper:empty,
.nav-menu-content:empty {
  display: none !important;
}

/* === Hero outline button (secondary) === */
.tf-outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.tf-outline-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

/* === Pricing CTA button === */
.tf-pricing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 14px 22px;
  background: #14182a;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
  width: 100%;
  max-width: 320px;
}
.tf-pricing-cta:hover {
  background: #0a0d22;
  transform: translateY(-1px);
}

/* === Hero Buttons: Pill-Shape (rounded) === */
.tf-hero-ctas .tf-primary-btn,
.tf-hero-ctas .tf-outline-btn {
  border-radius: 999px !important;
  font-weight: 500 !important;
}

/* === Mobile: Burger Menu (eigener Toggle) === */
@media (max-width: 991px) {
  /* Hide horizontal text-links default */
  .navbar .nav-menu-content {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(8, 6, 3, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-direction: column;
    padding: 16px 24px;
    gap: 0;
  }
  .navbar.tf-mobile-open .nav-menu-content {
    display: flex !important;
  }
  .navbar.tf-mobile-open .nav-menu-content .nav-link {
    color: #fff !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    font-size: 16px !important;
    text-align: left !important;
  }
  /* Show burger button */
  .menu-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    cursor: pointer;
    position: relative;
  }
  .menu-button::before {
    content: "";
    position: absolute;
    width: 18px; height: 2px;
    background: #fff;
    box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff;
    border-radius: 2px;
  }
  .navbar.tf-mobile-open .menu-button::before {
    transform: rotate(45deg);
    box-shadow: 0 0 0 #fff;
  }
  .navbar.tf-mobile-open .menu-button::after {
    content: "";
    position: absolute;
    width: 18px; height: 2px;
    background: #fff;
    transform: rotate(-45deg);
    border-radius: 2px;
  }
  /* Hide lottie inside menu-button (we draw our own burger) */
  .menu-button .menu-icon { display: none !important; }
}

/* === Brand-Ticker: CSS Animation fallback === */
.ticker-wrapper {
  display: flex !important;
  width: max-content;
  animation: tf-ticker 30s linear infinite;
}
@keyframes tf-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}
.ticker {
  overflow: hidden;
  width: 100%;
}
.ticker-item-wrap {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-right: 60px;
  flex-shrink: 0;
}
.brand-single-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo {
  height: 36px;
  width: auto;
  opacity: 0.6;
  filter: grayscale(1) brightness(1.5);
  transition: opacity 0.2s ease;
}
.brand-logo:hover { opacity: 1; }

/* Sticky-bar Configure-button styling */
#tf-sticky-cta .tf-cta-config {
  background: #14182a !important;
  color: #fff !important;
  margin-right: 8px;
}
@media (max-width: 600px) {
  #tf-sticky-cta .tf-cta-config { display: none !important; }
}

/* === Sticky-Bar Configure-Btn auch Mobile sichtbar (kleiner) === */
@media (max-width: 600px) {
  #tf-sticky-cta .tf-cta-config { display: inline-flex !important; padding: 10px 14px !important; font-size: 12px !important; }
  #tf-sticky-cta .tf-cta-primary { padding: 10px 14px !important; font-size: 12px !important; }
  #tf-sticky-cta { gap: 6px; }
}

/* === Hero responsive image (smaller for mobile) === */
@media (max-width: 768px) {
  .section.hero {
    background-image: url('twinflames-assets/hero-roofer-sunset-900.jpg') !important;
  }
}

/* === Make sure unclassified logo imgs in tf-splash don't bloat layout === */
#tf-splash img {
  max-width: 200px;
  height: auto;
}