.elementor-kit-10{--e-global-color-primary:#4078C0;--e-global-color-secondary:#5B89C7;--e-global-color-text:#8A8578;--e-global-color-accent:#DAD3CD;--e-global-color-81a9a46:#FFFFFF;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:500;}.elementor-kit-10 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//*
 * Club Pilates München-Freiham
 * Elementor Global Custom CSS
 * 
 * HOW TO INSTALL:
 * 1. In WordPress, go to Elementor → Custom Code (or any page → Edit with Elementor)
 * 2. Click the hamburger menu (≡) → Site Settings → Custom CSS
 * 3. Paste this entire file into the Custom CSS box
 * 4. Click "Update" to save
 *
 * This CSS provides all the brand styling for the landing pages.
 * Elementor widgets will automatically pick up these styles via
 * the CSS classes listed below.
 */

/* ============================================
   GOOGLE FONTS (loaded via Elementor Global Fonts)
   
   Go to: Site Settings → Global Fonts
   Set these:
     Primary:   Playfair Display (Google Font)
     Secondary: Montserrat (Google Font)
   ============================================ */

/* ============================================
   CSS VARIABLES — BRAND COLOURS
   
   Also set these in: Site Settings → Global Colors
     Primary:   #4078c0 (Website Blue)
     Secondary: #c4a35a (CP Blue)
     Text:      #8a8578 (Dark Gray)
     Accent:    #dad3cd (Beige)
   ============================================ */
:root {
  --cp-navy: #1a2744;
  --cp-blue: #4078c0;
  --cp-blue-light: #5b89c7;
  --cp-gold: #c4a35a;
  --cp-gold-light: #d4b87a;
  --cp-cream: #f8f5f0;
  --cp-white: #ffffff;
  --cp-gray-100: #f5f3ef;
  --cp-gray-200: #e8e4dd;
  --cp-gray-500: #8a8578;
  --cp-gray-700: #4a4640;
  --cp-gray-900: #2a2622;
}

/* ============================================
   HERO SECTION
   Apply CSS class: cp-hero
   ============================================ */
.cp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Hero cinematic slow zoom in — background gradually scales up over 25 seconds */
.cp-hero {
  overflow: hidden !important;
}

.cp-hero > .elementor-background-overlay {
  background: linear-gradient(180deg, rgba(26,39,68,0.55) 0%, rgba(26,39,68,0.85) 100%) !important;
  animation: cpHeroZoom 25s ease-in-out forwards;
  transform-origin: center center;
}

@keyframes cpHeroZoom {
  from { transform: scale(1.0); }
  to { transform: scale(1.12); }
}

/* Hero badge (use Elementor Text Editor widget with class cp-hero-badge) */
.cp-hero-badge {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cp-white);
  border: 3px solid var(--cp-white);
  padding: 8px 24px;
  border-radius: 2px;
}

/* Hero headline */
.cp-hero h1,
.cp-hero .elementor-heading-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--cp-white);
  line-height: 1.2;
}

.cp-hero h1 em,
.cp-hero .elementor-heading-title em {
  color: var(--cp-blue);
  font-style: italic;
}

/* Hero subtext */
.cp-hero-sub,
.cp-hero-sub p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
}

/* ============================================
   HERO CTA BUTTON
   Apply CSS class: cp-btn-blue
   ============================================ */
.cp-btn-blue .elementor-button {
  background-color: var(--cp-blue) !important;
  color: var(--cp-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 16px 48px !important;
  border-radius: 2px !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.cp-btn-blue .elementor-button:hover {
  background-color: var(--cp-blue-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--cp-blue-light);
}

/* White outline button variant */
.cp-btn-outline .elementor-button {
  background-color: transparent !important;
  color: var(--cp-navy) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  border-radius: 2px !important;
  transition: all 0.3s ease !important;
}

.cp-btn-outline .elementor-button:hover {
  background-color: var(--cp-blue-light) !important;
  border-color: var(--cp-navy) !important;
  color: var(--cp-navy) !important;
}

/* ============================================
   SECTION LABEL (small uppercase text above titles)
   Apply CSS class: cp-section-label
   ============================================ */
.cp-section-label,
.cp-section-label .elementor-heading-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem !important;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cp-blue);
}

/* Light version for dark backgrounds */
.cp-section-label-light,
.cp-section-label-light .elementor-heading-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem !important;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cp-blue);
}

/* ============================================
   SECTION TITLE (main headings)
   Apply CSS class: cp-section-title
   ============================================ */
.cp-section-title .elementor-heading-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--cp-blue);
  line-height: 1.3;
}

/* White version for dark backgrounds */
.cp-section-title-white .elementor-heading-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--cp-white);
  line-height: 1.3;
}

/* ============================================
   SECTION SUBTITLE
   Apply CSS class: cp-section-subtitle
   ============================================ */
.cp-section-subtitle,
.cp-section-subtitle p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  color: var(--cp-gray-500);
}

/* ============================================
   BENEFIT CARDS
   Apply CSS class: cp-benefit-card to each Icon Box widget
   ============================================ */
.cp-benefit-card {
  background: var(--cp-white);
  padding: 32px 24px;
  border-radius: 4px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.cp-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(26,39,68,0.08);
  border-color: var(--cp-navy);
}

.cp-benefit-card .elementor-icon {
  width: 56px;
  height: 56px;
  background: var(--cp-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.cp-benefit-card .elementor-icon i,
.cp-benefit-card .elementor-icon svg {
  color: var(--cp-blue) !important;
  fill: var(--cp-blue) !important;
}

.cp-benefit-card .elementor-icon-box-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--cp-blue);
}

.cp-benefit-card .elementor-icon-box-description {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  color: var(--cp-gray-500);
  font-size: 0.9rem;
}

/* ============================================
   FEATURE ITEMS (checkmark list)
   Apply CSS class: cp-feature-item to each container
   ============================================ */
.cp-feature-item {
  background: var(--cp-white);
  border-radius: 4px;
  border-left: 3px solid var(--cp-blue) !important;
  padding: 20px 24px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.cp-feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(26,39,68,0.08);
  border-color: var(--cp-navy);
}
.cp-feature-item .elementor-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  background: var(--cp-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-feature-item .elementor-icon i,
.cp-feature-item .elementor-icon svg {
  color: var(--cp-blue) !important;
  fill: var(--cp-blue) !important;
  font-size: 12px !important;
}

/* ============================================
   FORM SECTION
   Apply CSS class: cp-form-section to the outer container
   ============================================ */
.cp-form-section {
  position: relative;
}

.cp-form-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: var(--cp-white);
}

/* ============================================
   FORM WRAPPER (the white card containing the form)
   Apply CSS class: cp-form-wrapper to the inner container
   ============================================ */
.cp-form-wrapper {
  background: var(--cp-white);
  border-radius: 4px;
  padding: 40px 36px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  max-width: 580px;
  margin: 0 auto;
}

/* ============================================
   ELEMENTOR FORM STYLING
   Apply CSS class: cp-form to the Form widget
   ============================================ */
.cp-form .elementor-field-group {
  margin-bottom: 12px;
}

.cp-form .elementor-field-label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--cp-navy) !important;
  margin-bottom: 6px !important;
}

.cp-form .elementor-field-textual {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.9rem !important;
  color: var(--cp-gray-700) !important;
  border: 1px solid var(--cp-gray-200) !important;
  border-radius: 3px !important;
  background: var(--cp-gray-100) !important;
  padding: 12px 16px !important;
  transition: border-color 0.2s ease !important;
}

.cp-form .elementor-field-textual:focus {
  border-color: var(--cp-blue) !important;
  background: var(--cp-white) !important;
  outline: none !important;
}

.cp-form .elementor-field-textual::placeholder {
  color: var(--cp-gray-500) !important;
  font-weight: 300 !important;
}

/* Consent checkbox styling */
.cp-form .elementor-field-type-acceptance .elementor-field-label {
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  color: var(--cp-gray-500) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

.cp-form .elementor-field-type-acceptance a {
  color: var(--cp-blue) !important;
  text-decoration: underline !important;
}

/* Submit button */
.cp-form .elementor-button[type="submit"],
.cp-form .e-form__buttons__wrapper .elementor-button {
  background-color: var(--cp-blue) !important;
  color: var(--cp-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 16px 32px !important;
  border-radius: 3px !important;
  border: none !important;
  width: 100% !important;
  transition: all 0.3s ease !important;
}

.cp-form .elementor-button[type="submit"]:hover,
.cp-form .e-form__buttons__wrapper .elementor-button:hover {
  background-color: var(--cp-blue) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--cp-blue-light);
}

/* Form messages */
.cp-form .elementor-message-success {
  color: #2e7d32 !important;
  font-family: 'Montserrat', sans-serif !important;
}

.cp-form .elementor-message-danger {
  color: #c4573a !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ============================================
   LOCATION SECTION
   Apply CSS class: cp-location to the section container
   ============================================ */
.cp-location-badge {
  display: inline-block;
  background: var(--cp-blue);
  color: var(--cp-white);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 2px;
}

.cp-location-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.cp-location-detail .elementor-icon {
  color: var(--cp-blue) !important;
}

.cp-location-detail span {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  color: var(--cp-gray-700);
}

/* Map container */
.cp-map {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* ============================================
   CTA BANNER SECTION
   Apply CSS class: cp-cta-banner
   ============================================ */
.cp-cta-banner {
  text-align: center;
}

.cp-cta-banner .elementor-heading-title {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--cp-white);
}

.cp-cta-banner p {
  color: rgba(255,255,255,0.7);
  font-weight: 300;
}

/* ============================================
   FOOTER
   Apply CSS class: cp-footer
   ============================================ */
.cp-footer {
  text-align: center;
}

.cp-footer img {
  opacity: 0.5;
  filter: brightness(0) invert(1);
}

.cp-footer a {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255,255,255,0.4) !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
}

.cp-footer a:hover {
  color: var(--cp-blue) !important;
}

.cp-footer .cp-copyright {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.25);
}

/* ============================================
   SCROLL ANIMATION (fade-in on load)
   Apply CSS class: cp-fade-in to any widget
   ============================================ */
.cp-fade-in {
  animation: cpFadeInUp 0.8s ease-out forwards;
}

@keyframes cpFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 767px) {
  .cp-form-wrapper {
    padding: 24px 20px;
  }
  
  .cp-hero-badge {
    font-size: 0.6rem;
    letter-spacing: 2px;
    padding: 6px 16px;
  }
}/* End custom CSS */