/*!
Theme Name:    co:listic childtheme
Author:        co:listic
Author URI:    https://colistic.de
Description:  co:listic Theme
Version:      1.0.0
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Template:     page-builder-framework
Text Domain:  page-builder-framework-child
*/

/* ============================================================================
   TABLE OF CONTENTS
   ============================================================================
   1. Font Declarations (@font-face)
   2. CSS Custom Properties (Variables)
   3. Base & Typography Styles
   4. Layout & Container Utilities
   5. Navigation & Mobile Menu
      5.1 Burger Button
      5.2 Off-Canvas Menu
      5.3 Menu Items & States
   6. Page Components
      6.1 Salon Price List
      6.2 PowerPack Carousel
      6.3 Info Boxes (Ingo Box)
      6.4 Team Slider
      6.5 Custom Links with Arrows
      6.6 Career Section (Karriere)
      6.7 Career Bar Component
      6.8 Modal Component
      6.9 Buttons
   7. Forms (Contact Form 7)
   8. Map Component
   9. Responsive Media Queries
      9.1 Mobile (< 768px)
      9.2 Tablet (768px - 1023px)
      9.3 Desktop (1024px+)
      9.4 Large Desktop (1440px+)
      9.5 XL Desktop (1920px+)
   ============================================================================ */

/* ============================================================================
   1. FONT DECLARATIONS
   ============================================================================ */

/* Montserrat Font Family - Comprehensive Weight & Style Declarations
   Using local font files for optimal performance and offline availability
   Font weights: 100 (Thin), 200 (ExtraLight), 300 (Light), 400 (Regular),
                 500 (Medium), 600 (SemiBold), 700 (Bold), 800 (ExtraBold), 900 (Black) */

/* Thin - Weight 100 */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap; /* Ensures text remains visible during font load */
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* ExtraLight - Weight 200 */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Light - Weight 300 */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular - Weight 400 (Default) */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium - Weight 500 */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* SemiBold - Weight 600 */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold - Weight 700 */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ExtraBold - Weight 800 */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Black - Weight 900 */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================================
   2. CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================================ */

/* Design System Variables
   Mobile-first approach: Base values for mobile (320px+)
   Responsive scaling handled through media queries below */

:root {
  /* Color Palette */
  --black: #000000;
  --white: #ffffff;
  --light: #fbe3ea; /* Light pink background */
  --primary: #ed91aa; /* Primary brand pink */
  --bg-team: #faf2e8; /* Team section background (beige) */
	--pink:#ED91AA ;

  /* Typography Scale - Mobile Base (320px - 400px) */
  --xxsmall: 12px;
  --xsmall: 14px;
  --small: 15px;
  --regular: 17px;
  --medium: 20px;
  --large: 22px;
  --xlarge: 26px;
  --xxlarge: 31px;
}

/* ============================================================================
   3. BASE & TYPOGRAPHY STYLES
   ============================================================================ */

/* Apply Montserrat font family to all text elements
   Includes system font fallbacks for better performance */

html {
  overflow-x: hidden !important;
  font-family: "Montserrat", sans-serif;
}

body {
  overflow-x: hidden !important;
  font-family: "Montserrat", sans-serif;
}

/* Heading elements inherit Montserrat */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
}

/* All text and form elements use Montserrat */
p,
a,
span,
div,
li,
td,
th,
label,
input,
textarea,
select,
button {
  font-family: "Montserrat", sans-serif;
}

/* Typography Overrides
   Standardize font weights and text styling across the site */

b,
strong {
  font-weight: 500 !important; /* Override default bold to maintain design consistency */
}

p,
li {
  color: var(--black) !important;
  font-weight: 300 !important;
}

/* Heading Styles with Consistent Uppercase Treatment */

h1 {
  font-size: var(--xlarge) !important;
  font-weight: 300 !important;
  color: var(--black) !important;
}

h2 {
  font-size: var(--large) !important;
  text-transform: uppercase !important;
  margin: 0 auto !important;
  font-weight: 300 !important;
  line-height: 1.3 !important;
  color: var(--black) !important;
}

h3,
.price-subtitle {
  font-size: var(--large) !important;
  text-transform: uppercase !important;
  margin: 0 auto !important;
  font-weight: 300 !important;
  line-height: 1.3 !important;
  margin-top: -10px !important;
}

h4,
.h-pinky {
  color: var(--primary) !important;
  font-size: var(--large) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Custom heading classes */
.h-primary {
  font-size: var(--xlarge);
  text-transform: uppercase;
  margin: 0 auto;
  line-height: 1.2;
}

.p {
  font-size: var(--small);
  line-height: 1.6;
}

/* ============================================================================
   4. LAYOUT & CONTAINER UTILITIES
   ============================================================================ */

/* Utility class for left text alignment */
.text-left {
  text-align: left !important;
}

/* Remove padding from WPBF theme containers for full-width layouts */
.wpbf-container,
.wpbf-container-fluid,
.wpbf-inner-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Flexbox layout for text boxes - starts as column on mobile */
.text-box {
  display: flex !important;
  flex-direction: column !important;
  margin-top: 20px;
}

/* ============================================================================
   5. NAVIGATION & MOBILE MENU
   ============================================================================ */

/* 5.1 WPBF Logo Spacing */
.wpbf-logo {
  margin-left: 20px !important;
}
.wpbf-navigation-active .wpbf-logo-container,
.wpbf-navigation-active .wpbf-mobile-logo-container {
  display: none !important;
}
.wpbf-mobile-logo-container {
  margin-left: 20px !important;
  max-width: 250px !important;
}
/* 5.2 Mobile Menu Container Reset
   Reset default WPBF mobile menu styles for custom implementation */

.wpbf-mobile-menu-container,
.wpbf-mobile-menu-container * {
  box-sizing: border-box;
}

.wpbf-mobile-menu-container {
  background-color: var(--light) !important;
  width: 100% !important;
  color: var(--white);
}

.wpbf-mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.wpbf-mobile-menu li {
  border: none;
}

/* Hide default close button - using custom burger animation */
.wpbf-mobile-menu-container .wpbf-close {
  all: unset !important;
}

/* 5.3 Burger Button (Hamburger Menu Toggle)
   Fixed position circular button with animated hamburger icon */

.wpbf-menu-toggle,
.wpbf-mobile-menu-toggle {
  position: fixed !important;
  top: 30px !important;
  right: 50px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--white) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  z-index: 1010 !important; /* Above off-canvas menu */
}

/* Remove box shadow when navigation is active */
.wpbf-navigation.wpbf-navigation-active {
  box-shadow: none !important;
}

/* Hamburger icon lines - three horizontal bars */
.wpbf-menu-toggle::before,
.wpbf-menu-toggle::after,
.wpbf-mobile-menu-toggle::before,
.wpbf-mobile-menu-toggle::after {
  content: "";
}

.wpbf-menu-toggle span,
.wpbf-menu-toggle::before,
.wpbf-menu-toggle::after,
.wpbf-mobile-menu-toggle span,
.wpbf-mobile-menu-toggle::before,
.wpbf-mobile-menu-toggle::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: 30px !important; /* slightly narrower for tighter look */
  height: 2px !important;
  background: var(--black) !important;
  transform: translateX(-50%) !important;
  transition: all 0.18s ease !important; /* snappier transition */
}
.fl-node-qs60igntzyv1 .pp-infobox-title-prefix{
	margin-bottom:0 !important;
}
/* Position each line of the hamburger */
.wpbf-menu-toggle::before,
.wpbf-mobile-menu-toggle::before {
  top: 23px !important; /* Top line (closer) */
}
.pp-image-carousel-wrapper.pp-nav-outside .swiper-pagination {
	bottom:-5px !important;
}

.wpbf-menu-toggle span,
.wpbf-mobile-menu-toggle span {
  top: 26px !important; /* Middle line */
}

.wpbf-menu-toggle::after,
.wpbf-mobile-menu-toggle::after {
  top: 31px !important; /* Bottom line (closer) */
}

/* Hover state: change all three lines to primary color */
.wpbf-menu-toggle:hover {
  background: var(--primary) !important;
}

/* Animated X icon when menu is open
   Top and bottom lines rotate to form an X, middle line fades out */

.wpbf-menu-toggle[aria-expanded="true"]::before,
.wpbf-mobile-menu-toggle[aria-expanded="true"]::before {
  transform: translateX(-50%) rotate(45deg) !important;
  top: 26px !important;
}

.wpbf-menu-toggle[aria-expanded="true"]::after,
.wpbf-mobile-menu-toggle[aria-expanded="true"]::after {
  transform: translateX(-50%) rotate(-45deg) !important;
  top: 26px !important;
}

.wpbf-menu-toggle[aria-expanded="true"] span,
.wpbf-mobile-menu-toggle[aria-expanded="true"] span {
  opacity: 0 !important; /* Hide middle line */
}

/* 5.4 Off-Canvas Menu Panel
   Slides in from the right, full-width on mobile, 400px on desktop */

.wpbf-menu-off-canvas {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 550px !important;
  max-width: 100% !important; /* Full width on mobile */
  background: var(--light) !important;
  color: var(--white) !important;
  transform: translateX(100%) !important; /* Hidden off-screen by default */
  transition: transform 0.4s ease !important;
  z-index: 1000 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Menu open state - slide in from right */
.wpbf-menu-off-canvas.active {
  transform: translateX(0) !important;
}

/* Prevent body scroll when menu is open */
body.menu-open {
  overflow: hidden !important;
  width: 100% !important;
}

.wpbf-menu-toggle-container {
  display: flex !important;
  align-items: center !important;
  justify-content: end !important;
}

/* Hide default close button - using custom burger animation instead */
.wpbf-menu-off-canvas .wpbf-close {
  display: none !important;
}

/* Off-canvas menu positioning */
.wpbf-mobile-menu-off-canvas .wpbf-mobile-menu-container {
  right: -100% !important; /* Hidden off-screen */
}

.wpbf-mobile-menu-off-canvas .wpbf-mobile-menu-container.active {
  right: 0 !important; /* Slide in */
  padding-top: 0 !important;
}

/* 5.5 Menu Items Styling */
.nav-info .pp-infobox {
  background: transparent !important ;
}
.nav-info .pp-infobox a,
.nav-info .pp-infobox p {
  font-size: 15px !important;
}
.nav-info .pp-infobox strong {
  font-weight: 700 !important;
}
.nav-info .pp-description-wrap p {
  text-align: left !important;
}

.fl-node-ueorjdg7hv6t {
  margin-top: 20px !important;
  max-width: 425px !important;
}

.wpbf-menu-off-canvas nav ul,
.wpbf-mobile-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding-inline: 10px !important;
  padding-top: 0 !important;
  height: 100%;
  justify-content: center; /* Center menu items vertically */
  align-items: start; /* Align items to the left */
}
.fl-node-lhit0nxvsu85 .fl-icon-group {
  justify-content: flex-start !important;
}
.fl-node-lhit0nxvsu85 .fl-icon-group .fa-phone-alt,
.fl-node-lhit0nxvsu85 .fl-icon-group .fa-phone-alt::before {
  font-size: 24px !important;
}
.fl-node-lhit0nxvsu85 .fl-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.wpbf-mobile-menu .menu-item {
  border-top: unset !important;
  border-bottom: unset !important;
  max-width: fit-content !important;
}

/* Menu link styles */
.wpbf-menu-off-canvas nav a,
.wpbf-navigation .wpbf-menu > .current-menu-item > a,
.wpbf-mobile-menu > .current-menu-item > a,
.wpbf-mobile-menu a {
  font-size: var(--large) !important;
  font-weight: 500 !important;
  color: var(--black) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  border-bottom: 2px solid transparent !important;
  max-width: fit-content !important;
}

/* Menu link hover state - change to primary color */
.wpbf-menu-off-canvas nav a:hover {
  color: var(--primary) !important;
  background: transparent !important;
  text-decoration: none;
  transition: all 0.3s ease !important;
}
body:has(.wpbf-menu-off-canvas.active) .kalender {
  opacity: 0 !important;
  transition: all 0.3s ease !important;
}
/* ============================================================================
   6. PAGE COMPONENTS
   ============================================================================ */

/* 6.1 SALON PRICE LIST
   Two-column grid layout (mobile: 1 column, tablet+: 2 columns) */

.salon-price-list {
  padding: 40px 15px !important;
}

/* Price list header section */
.price-header {
  text-align: center;
  margin-bottom: 40px;
}

.price-title {
  color: var(--primary) !important;
  font-weight: 400 !important;
  margin-bottom: 10px !important;
}

.price-subtitle {
  font-size: 18px !important;
  font-weight: 300 !important;
  color: #333 !important;
  letter-spacing: 1px !important;
}

/* Price sections grid - 1 column on mobile */
.price-sections {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 30px !important;
  margin-bottom: 40px !important;
}

.price-section {
  background: var(--white) !important;
  padding: 20px !important;
}

/* Section title with currency display */
.section-title {
  letter-spacing: 2px !important;
  color: var(--primary) !important;
  font-weight: 400 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 2px solid #cacaca !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 22px !important;
}

.currency {
  font-size: 18px !important;
  color: var(--primary) !important;
}

/* Services layout */
.services-grid {
  display: flex !important;
  flex-direction: column !important;
}

/* Individual service row - 3 column grid (name, level, price) */
.service-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 15px 0 !important;
  font-size: 14px !important;
}

/* Optional divider between service rows */
.service-row.has-divider {
  border-bottom: 2px solid #cacaca !important;
  margin-bottom: 5px !important;
  padding-bottom: 10px !important;
}
.great {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  border-top: 2px solid #f0f0f0;
  border-bottom: 2px solid #f0f0f0;
  padding-block: 10px;
}
.great span {
  font-size: 16px;
  color: var(--black);
}
.service-name {
  color: var(--black) !important;
  font-weight: 400 !important;
  text-align: left;
  font-size: 16px !important;
}

.service-level {
  color: var(--black) !important;
  font-size: 16px !important;
  text-align: center;
}

.service-price {
  color: var(--black) !important;
  font-weight: 400;
  text-align: right;
  font-size: 16px !important;
}
.fl-node-5hysamw3bjxd {
  width: 300px !important;
  height: 300px !important;
  background-color: var(--primary) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-top: 20px;
  margin-left: 50px;
}
.fl-node-5hysamw3bjxd h2 {
  color: var(--white) !important;
}
/* Price notes at bottom */
.price-notes {
  margin-top: 10px;
  font-size: 12px;
  color: var(--black);
  line-height: 1.6;
}

/* 6.2 POWERPACK CAROUSEL
   Full-width carousel that breaks out of container */

.pp-image-carousel,
.pp-image-carousel-wrapper,
.pp-image-carousel-container {
  width: 100vw !important;
  max-width: 100vw !important;
  /* Negative margins to break out of container */
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

/* 6.3 INFO BOXES (INGO BOX)
   Custom info box components with background styling */

.ingo-box .pp-infobox {
  background-color: #fbe3ea !important;
  padding: 0 !important;
}

.ingo-box .fl-col-content {
  padding: 0 !important;
  margin: 0 !important;
}

.bg-ingo {
  background-color: #fbe3ea !important;
}

.bg-ingo .fl-row-content-wrap {
  min-height: 300px !important;
  padding: 0 !important;
}

.bg-ingo .fl-col-content,
.bg-ingo .fl-module-content {
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
}

/* Info box photo styling - full height with object-fit cover */
.ingo-foto,
.ingo-foto .fl-photo-content {
  height: 100% !important;
  margin: 0 !important;
}

.ingo-foto img {
  height: 100% !important;
  object-fit: cover !important;
}

/* Specific node styling for centered content */
.bg-ingo .fl-node-0uz65xvh9adq {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 130px;
}

.fl-node-249b6hlnkxoj {
  max-width: 100% !important;
}

/* Layout direction control for specific node */
.fl-node-fa3sxtkp198u {
  display: flex !important;
  flex-direction: row !important;
}

/* 6.4 TEAM SLIDER
   Custom team member slider with video cards and expandable qualifications */

.team-slider-container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.team-slider-container {
  width: 100%;
  position: relative;
  overflow: visible;
  font-family: "Montserrat", sans-serif;
  padding: 40px 0;
}

/* Swiper container - custom flexbox slider */
.swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  gap: 10px;
  padding: 0 40px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Individual team slide - 3 slides on desktop, responsive */
.team-slide {
  min-width: calc(30% - 14px); /* 3 slides on desktop */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* Slide content wrapper */
.slide-content {
  width: 100%;
  max-width: 450px;
  position: relative;
  animation: slideUp 0.6s ease;
}

/* Slide-up animation for team members */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Team member card */
.member-card {
  border-radius: 0;
  overflow: visible;
  position: relative;
}

/* Member video/image */
.video-wrapper {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.member-video {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-thumbnail .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.video-thumbnail:hover .play-button {
  opacity: 0.8;
}
.datenschutz br {
	display:none !important;
}
.fl-node-o9idzxj4132h .fl-col-content,
.fl-node-s0ixed7y468h .fl-col-content
{
	padding-left:0 !important;
}
.pp-modal-container {
	background-color: transparent !important;
}
.fl-node-saqti6rpexcg > div,
.fl-node-17w4lametxy6 > div {
	padding-top:5px !important;
	padding-bottom:5px !important;
}
/* Member information card */
.member-info {
  padding: 15px;
  position: relative;
  top: 0;
  background: var(--bg-team);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.member-name {
  font-size: 32px;
  font-weight: 400 !important;
  letter-spacing: 3px;
  margin-bottom: 5px;
  color: var(--primary);
  text-transform: uppercase;
  width: 100%;
}

.member-position {
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 0;
  color: #333;
  text-transform: uppercase;
}

.divider {
  width: 100%;
  height: 1px;
  background: #ddd;
  margin: 20px 0;
  display: none;
}

/* Expandable qualifications toggle button
   Positioned absolutely in bottom-right corner */

.toggle-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 50; /* Expandable qualifications button */
}

.toggle-btn:hover {
  background: var(--primary);
}

/* Plus icon created with pseudo-elements */
.toggle-btn::before,
.toggle-btn::after {
  content: "";
  position: absolute;
  background: var(--primary);
  transition: all 0.3s ease;
}

.toggle-btn::before {
  width: 20px;
  height: 2px; /* Horizontal line */
}

.toggle-btn::after {
  width: 2px;
  height: 20px; /* Vertical line */
}

.toggle-btn:hover::before,
.toggle-btn:hover::after {
  background: white;
}

/* Rotate to X when active */
.toggle-btn.active::before {
  transform: rotate(90deg);
}

.toggle-btn.active::after {
  transform: rotate(90deg);
}

/* Expandable qualifications section */
.qualifications {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-team);
  padding: 15px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 51; /* Qualifications dropdown (above toggle button) */
  --qual-height: 0px;
}

/* Active state - slide up and show */
.qualifications.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(calc(-1 * var(--qual-height)));
}

/* Close button inside qualifications */
.qual-close {
  position: absolute;
  bottom: 30px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 60;
  font-size: 26px !important;
  padding-bottom: 5px;
}

.qual-close:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

/* Video play/pause toggle (small circle top-left of video) */
.member-card {
  position: relative; /* ensure positioned container for overlay */
}

.video-toggle {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid var(--white) !important;
  background: transparent !important;
  color: var(--white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 18px !important;
  line-height: 1 !important;
  z-index: 70 !important;
  padding: 0 !important;
  padding-bottom: 4px !important; /* Adjust for better visual centering of play icon */
}

.video-toggle.playing {
  background: transparent !important;
  color: var(--white) !important;
}

@media (max-width: 768px) {
  .video-toggle {
    width: 36px !important;
    height: 36px !important;
    top: 10px !important;
    left: 10px !important;
    font-size: 16px !important;
  }
  .fl-node-lsb4oagpw80x {
    flex-direction: column !important;
  }
  .fl-node-lsb4oagpw80x .fl-col-bg-color {
    width: 90% !important;
    max-width: 100% !important;
  }
}
.fl-node-idmcs7g0eft1,
.fl-node-iwopk34s5e27 {
  padding-left: 20px !important;
}
.fl-node-oy92x3ckjlez {
  margin-top: 10px !important;
}
.qualifications-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 15px !important;
  color: #333 !important;
}

.qualifications ul {
  list-style: none;
  padding: 0;
}

.qualifications li {
  padding: 8px 0;
  font-size: 14px;
  color: #666;
  position: relative;
  padding-left: 20px;
}

/* Custom bullet point */
.qualifications li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #d4a574;
  font-weight: bold;
}

/* Slider navigation buttons (currently hidden per user request) */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20; /* Slider controls */
  width: 100%;
  display: none; /* Hidden as per user request */
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
}

.slider-nav button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  pointer-events: all;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-nav button:hover {
  background: white;
  transform: scale(1.1);
}

/* Arrow icons using pseudo-elements */
.slider-nav button::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
}

.slider-nav button:first-child::before {
  transform: rotate(-135deg); /* Left arrow */
}

.slider-nav button:last-child::before {
  transform: rotate(45deg); /* Right arrow */
}

/* Slider pagination dots */
.slider-pagination {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 20; /* Slider pagination dots */
}

.pagination-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--primary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pagination-dot:hover {
  transform: scale(1.2);
}

.pagination-dot.active {
  background: var(--primary);
  border: 2px solid var(--primary);
}

/* Swiper pagination: make bullets identical to theme pagination-dot */

.swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 2px solid var(--primary) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

.swiper-pagination-bullet:hover {
  transform: scale(1.2) !important;
}

.swiper-pagination-bullet-active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* 6.5 CUSTOM LINKS WITH ARROWS
   Special link styling with animated arrow icon */

.custom-link a {
  font-size: 30px !important;
  position: relative !important;
  color: var(--white) !important;
  text-decoration: none !important;
}

/* Arrow icon added after last child */
.custom-link a:last-child::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 8px;
  background-image: url("assets/imgs/arrow-white.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
  z-index: 5; /* Custom link arrow */
  position: relative;
  bottom: -8px;
}

/* Change arrow to pink on hover */
.custom-link:hover a:last-child::after {
  background-image: url("assets/imgs/arrow-pink.png");
}

.custom-link strong {
  color: var(--primary) !important;
  font-weight: 400 !important;
  transition: all 0.1s ease;
}

.custom-link:hover strong {
  transition: all 0.1s ease;
  font-weight: 600 !important;
}

/* 6.6 CAREER SECTION (KARRIERE)
   Career opportunities section with custom layout */

.karriere {
  background-color: var(--light) !important;
}
.kalender {
  /*   position: absolute;
  top: 0;
  top: -1066%;
  right: 10%;
  z-index: 1001 !important; /* Calendar component */
}
.kalender i,
.kalender i::before {
  transform: rotate(-45deg);
}
.fl-node-s6f9ryjkxht5 .fl-icon-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row-reverse !important;
  gap: 20px !important;
}
.fl-node-s6f9ryjkxht5 p,
.fl-node-s6f9ryjkxht5 a,
.fl-node-s6f9ryjkxht5 i,
.fl-node-s6f9ryjkxht5 i::before {
  color: var(--white) !important;
  transition: all 0.3s ease;
}
.fl-node-s6f9ryjkxht5:hover p,
.fl-node-s6f9ryjkxht5:hover a,
.fl-node-s6f9ryjkxht5:hover i,
.fl-node-s6f9ryjkxht5:hover i::before {
  color: var(--primary) !important;
  transition: all 0.3s ease;
}

/* hover */
.fl-row-fixed-width.fl-node-content {
  position: relative;
  z-index: 100; /* Fixed width row container */
}

.karriere .fl-col-content {
  padding: 0 !important;
  margin: 0 !important;
}

.karriere .fl-row-content-wrap {
  min-height: 400px !important;
  padding: 0 !important;
  justify-content: right !important;
}

.karriere .fl-node-8coyqvnp7gfj {
  padding: 0 !important;
  margin: 0 !important;
}

.karriere .fl-row-content {
  margin-left: 150px !important;
  margin-right: 0 !important;
}

.karriere .pp-infobox-wrap,
.karriere .pp-infobox {
  background: transparent !important;
}
.karriere .pp-infobox-wrap ul {
  padding-left: 13px !important;
}

.karriere .fl-row-fixed-width {
  max-width: 100% !important;
}

.karriere strong {
  font-weight: 700 !important;
  font-size: 18px !important;
}

/* Icon styling for career section */
.karriere i {
  background: #000;
  padding: 10px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px !important;
}

.karriere i::before {
  font-size: 20px !important;
}

.karriere i:hover {
  background: var(--primary);
  transition: all 0.3s ease;
}

/* 6.7 CAREER BAR COMPONENT
   Individual career listing bar with title and action buttons */

.karriere .fl-node-cmuxh03t87bp {
  width: 100% !important;
}
.fl-node-cmuxh03t87bp > .fl-col-content {
  margin-left: 20px !important  ;
}
.career-bar {
  padding-left: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px;
  margin-bottom: 0;
  border-top: 1px solid #000000;
}

.career-bar:last-child {
  border-bottom: 1px solid #000000;
}

.career-left {
  font-size: 20px;
  font-weight: 600;
  color: #000;
}

.career-right {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #000;
}

.career-right span {
  font-weight: 600;
}

.fl-icon-wrap p {
  font-size: 25px !important;
  font-weight: 500 !important;
  color: var(--primary) !important;
}

.kalender a > p {
  color: #fff !important;
}
/* Circular icon button */
.icon-circle {
  width: 30px;
  height: 30px;
  background: #000;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
}

.icon-circle:hover {
  background: var(--primary);
  transition: all 0.3s ease;
}

.career-bar img {
  max-width: 20px !important;
}

/* 6.8 MODAL COMPONENT
   PowerPack modal styling */

.pp-modal-content {
  padding: 0 !important;
}

.pp-modal-content-inner {
  display: flex;
  justify-content: center;
}

.pp-modal-content-inner > div {
  flex: 1;
  padding: 140px;
}

.pp-modal-content-inner > p {
  flex: 0.5;
  margin: 0 !important;
}

.pp-modal-content-inner img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  display: block !important;
}

.pp-modal-content-inner p,
.pp-modal-content-inner h4 {
  color: var(--light) !important;
}
.pp-modal-container {
  position: relative !important;
}
.pp-modal-close.win-top-right {
  top: 10px !important;
  right: 10px !important;
}

.pp-modal-close.box-top-right,
.pp-modal-close.box-top-right:hover{
    top: 20px;
    right: 20px;
	width:50px !important;
	height:50px !important;
	padding:10px;
	border:0 !important;
	background-color:var(--black) !important;
}


/* Specific modal grid layout */
.fl-node-lsb4oagpw80x {
  display: flex;
  align-content: center;
  justify-content: center;
  column-gap: 10px;
  row-gap: 0;
}

.fl-node-lsb4oagpw80x .fl-col-content {
  padding-block: 50px;
  border: 1px solid #000;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  max-height: 170px;
  height: 100%;
}

/* 6.9 BUTTONS
   Unified button styling for theme and form buttons */

.fl-button {
  background-color: var(--black) !important;
	transition: all 0.2s ease !important;
}
.fl-button:hover {
	  background-color: var(--primary) !important;
	
}

.fl-button span {
  color: var(--white) !important;
  font-size: var(--small) !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
}

/* Contact Form 7 submit button */
.wpcf7-submit {
  background-color: var(--black) !important;
  color: var(--white) !important;
  font-size: var(--small) !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
}

/* ============================================================================
   7. FORMS (CONTACT FORM 7)
   ============================================================================ */

/* Form layout - fields on left, message box on right */
.form-groups {
  display: flex;
  gap: 20px;
}

.form-group-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.form-group-message {
  flex: 2;
}

.form-group-fields p {
  margin-bottom: 0 !important;
  width: 100%;
}

/* Make message textarea full height */
.form-group-message p,
.form-group-message .wpcf7-form-control-wrap,
.form-group-message textarea {
  height: 100%;
}

.form-group-message textarea {
  resize: none !important;
  max-height: 226px !important;
  height: 100% !important;
}

.wpcf7-list-item {
  margin: 0 !important;
}

/* ============================================================================
   8. MAP COMPONENT
   ============================================================================ */

.map {
  position: relative;
}

/* Map icon overlay positioned in center */
.map-icon {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 30; /* Map icon overlay */
  height: 50px;
  width: 50px;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding-top: 6px;
}

.map .fl-col-content,
.map .fl-module-content {
  padding: 0 !important;
  margin: 0 !important;
}
.fl-node-wlefzxh1274p {
  margin-top: -20px !important;
}
.karriere .pp-infobox-title-wrappe {
  margin-top: -20px !important;
}
/* 
 ============================================================================
   Footer Styles
   ============================================================================
*/
footer .fl-row-content-wrap {
  background-color: var(--white) !important;
}
footer .fl-node-vaxw0tinls7j .fl-row-content-wrap {
  background-color: var(--black) !important;
}

footer .fl-heading {
  color: var(--primary) !important;
  font-weight: 400 !important;
}

footer a {
  color: var(--black) !important;
  text-decoration: none !important;
}
/* Reset footer links behavior */
footer a:hover {
  color: var(--black) !important;
}
footer .fl-node-vaxw0tinls7j a,
footer .fl-node-vaxw0tinls7j p {
  color: var(--white) !important;
  /* make the text not wrapping */
  white-space: nowrap;
}
footer a:hover {
  color: var(--primary) !important;
  transition: all 0.3s ease;
}
footer h3 {
	font-size:24px !important;
	white-space:nowrap !important;
}

.popups .fl-node-lsb4oagpw80x .fl-col {
  background-color: var(--white);
}
.popups .fl-node-lsb4oagpw80x .fl-col:hover {
  background-color: var(--primary);
  transition: all 0.3s ease;
}

.fl-node-d8yrq7owszm2 {
  position: absolute !important;
  top: 10px !important;
  right: 90px !important;
  display: block;
  z-index: 999;
}
.fl-node-d8yrq7owszm2 .fl-row-content-wrap {
  max-height: 100px !important;
}
.price-notes:last-child {
  padding-left: 30px;
}
/* ============================================================================
   9. RESPONSIVE MEDIA QUERIES
   ============================================================================
   Organized by breakpoint for easier maintenance
   Mobile-first approach: base styles above, enhancements below */

/* 9.1 SMALL MOBILE ADJUSTMENTS (401px+) */
@media only screen and (min-width: 401px) {
  :root {
    --xxsmall: 12px;
    --xsmall: 14px;
    --small: 15px;
    --regular: 17px;
    --medium: 20px;
    --large: 24px;
    --xlarge: 27px;
    --xxlarge: 34px;
  }
}

/* 9.2 MOBILE LANDSCAPE (481px+) */
@media only screen and (min-width: 481px) {
  :root {
    --xxsmall: 12px;
    --xsmall: 14px;
    --small: 15px;
    --regular: 18px;
    --medium: 22px;
    --large: 24px;
    --xlarge: 30px;
    --xxlarge: 44px;
  }
  .fl-node-4bxsf98atlrc {
    grid-template-columns: 1fr !important;
  }
}

/* 9.3 TABLET & DESKTOP (769px+) */
@media only screen and (min-width: 769px) {
  /* Typography scale increase */
  :root {
    --xxsmall: 12px;
    --xsmall: 14px;
    --small: 16px;
    --regular: 20px;
    --medium: 23px;
    --large: 30px;
    --xlarge: 42px;
    --xxlarge: 55px;
  }

  /* Layout adjustments */
  .wpbf-logo {
    margin-left: 60px !important;
  }

  /* Off-canvas menu max-width on larger screens */
  /* .wpbf-menu-off-canvas {
    max-width: 400px !important;
  } */

  /* Text box changes to row layout */
  .text-box {
    flex-direction: row !important;
    margin-top: 50px;
    gap: 40px;
  }

  /* Salon Price List - Desktop Layout */
  .salon-price-list {
    padding: 60px 20px !important;
  }

  .price-header {
    margin-bottom: 60px;
  }

  .price-subtitle {
    font-size: 24px !important;
  }

  /* Two-column grid for price sections */
  .price-sections {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
  }

  .price-section {
    padding: 30px !important;
  }

  /* Adjust service row grid columns */
  .service-row {
    grid-template-columns: 2fr 1.5fr 1fr !important;
    gap: 0 !important;
    padding: 2px 0 !important;
  }

  .service-level {
    text-align: left;
  }

  .service-price {
    text-align: right;
  }

  /* Custom link font size increase */
  .custom-link a {
    font-size: 40px !important;
  }

  .custom-link a:last-child::after {
    width: 40px;
    height: 40px;
    bottom: -10px;
  }
}
.fl-node-wlefzxh1274p {
  max-width: 85% !important;
}
@media (max-width: 800px) {
  .fl-node-wlefzxh1274p {
    max-width: 100% !important;
  }
  .ueberuns-box .fl-node-1u3gor2zxht9 {
    max-width: 100% !important;
  }
}
.pp-modal-wrap.pp-modal-active {
  z-index: 2000; /* Modal popup */
}
.pp-modal-close .bar-wrap span {
  background: var(--primary) !important;
  border: none !important;
}
p,
figure {
  margin: 0 !important;
  padding-bottom: 0 !important;
}
.fl-node-1em0hp75iwn2  {
	padding-top:30px !important;
}
@media (max-width: 991px) {
		.fl-node-saqti6rpexcg {
	max-width:60% !important;
}
	  .pp-modal-content-inner img {
	  max-width:400px !important;
  }

	.pp-modal-content-inner {
 flex-direction:column;
		        align-items: center;
        gap: 30px;
}
	.fl-node-10n24dtsopwk {
flex-direction:column;
}
  .fl-node-54m3vqusokjz {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Info box layout changes to column */
  .fl-node-fa3sxtkp198u {
    flex-direction: column !important;
    align-items: center;
  }
  .fl-node-gez83u9dx6y5 p {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .bg-ingo .fl-node-0uz65xvh9adq {
    padding: 60px 60px;
  }
  .bg-ingo .fl-node-0uz65xvh9adq,
  .fl-node-249b6hlnkxoj {
    width: 100% !important;
  }
  .fl-node-d8yrq7owszm2 {
    display: none;
  }
  .wpbf-mobile-logo-container {
    margin-left: -60px !important;
  }
  .fl-node-1u3gor2zxht9,
  .fl-node-02t85gaj149b {
    width: 100% !important;
  }
  .fl-node-yxzirw6qvan1.fl-module-photo {
    margin-inline: 20px !important;
  }

  .fl-node-1em0hp75iwn2 {
    width: 100% !important;
  }
  .karriere .fl-row-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .fl-node-hrefk0q78y6j {
    float: none !important;
    margin: 0 auto !important;
	  width:100% !important;
	  max-width:100% !important;
  }
  .fl-node-lsb4oagpw80x {
    justify-content: center !important;
  }
  /* Footer */
  .fl-node-4bxsf98atlrc {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .fl-node-bjv598fcgurl,
  .fl-node-bazio2wk7ux1,
  .fl-node-raixstu0683d,
  .fl-node-hlsofke64az1 {
    width: 100% !important;
  }
  .fl-node-4bxsf98atlrc::before {
    display: none !important;
  }
}
.fl-node-om0gaupnwjcf .menu a {
  text-transform: uppercase !important;
}
.fl-node-om0gaupnwjcf .menu li:last-child a {
  font-size: 16px !important;
  position: relative;
}

.fl-node-om0gaupnwjcf .menu li:last-child a::after {
  content: "↗";
  font-size: 35px;
  margin-left: 6px;
  display: inline-block;
}
.fl-node-56wl8jmueypd .pp-infobox-wrap .pp-infobox {
  padding-left: 0 !important;
}
.fl-node-56wl8jmueypd  {
	margin-left:10px !important;
}
.form-group-submit {
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-top:20px;
}
.form-group-submit .has-spinner {
width: 100%;
	min-width:160px;
}
.wpcf7-spinner {
	display:none !important;
}
.form-group-submit a {
	color: var(--black);
	text-decoration:none;
}
a.fl-button {
	border-radius:0 !important;
	outline:none !important;
	border:none !important;
	    padding: 17px 24px !important;
	min-height:50px !important;  
}
.fl-node-10n24dtsopwk {
	display:flex;
	align-items:center;
}

.fl-node-b3y8ch16xm0u {
	max-width:100% !important;
	padding:10px !important;
}
.wpbf-navigation-transparent .wpbf-mobile-nav-wrapper {
	justify-content:unset !important;
}
.wpbf-mobile-logo-container {
	margin-left:50px !important;
}
/* 9.4 MOBILE/TABLET SPECIFIC (max-width: 768px) */
@media (max-width: 768px) {
	.fl-node-saqti6rpexcg { 
			max-width:100% !important;
	}

	.fl-node-17w4lametxy6 {
		max-width:100% !important;
	}
	.fl-node-1tzgmlyvs36e p{
		white-space:break-spaces !important;
	}
	.form-group-submit {
	align-items:start;
		gap:30px;
}
	.fl-node-iwopk34s5e27,.fl-node-idmcs7g0eft1 {
		margin-left: 0 !important;
		padding-left:10px !important;
	}
	.fl-node-5pusz7b1gx8m{ 
	max-width:100% !important;
	}
	.fl-node-oy92x3ckjlez,.fl-node-iu5p2kva7s36 {
		margin-left:15px !important;
	}
	.fl-node-idmcs7g0eft1, .fl-node-iwopk34s5e27{
		padding-left:0 !important;
	}
  /* Map icon overlay positioned in center */
  .map-icon {
    top: 57%;
    width: 30px;
    height: 30px;
  }
  .fl-node-a6k4qmo7sdfw .fl-icon i,
  .fl-node-a6k4qmo7sdfw .fl-icon i::before {
    font-size: 16px !important;
  }
  .map-icon .fas {
    font-size: 16px !important;
  }
  .pp-modal-close.win-top-right {
    display: block !important;
  }

  .fl-node-hx3qp4sbynka .fl-col-content {
    justify-content: center !important;
    align-items: center !important;
  }
  .fl-node-ueorjdg7hv6t {
    margin-top: -40px !important;
    max-width: 100% !important;
  }
  .fl-node-wmfbyqd5eszk {
    max-width: 100% !important;
  }

  .fl-node-p3eyo0z8djlq
    .pp-image-carousel-wrapper.pp-nav-outside
    .pp-image-carousel {
    margin-left: 0 !important;
  }

  .pp-modal-wrap.pp-modal-active {
    background: var(--primary) !important;
  }
  .pp-modal-content-inner > div {
    padding: 0 !important;
  }
  .pp-modal-content-inner > p {
    max-width:300px; 
  }
  .pp-modal-content-inner p {
    font-size: 13px !important;
  }
  .wpbf-menu-toggle,
  .wpbf-mobile-menu-toggle {
    top: 30px !important;
	  right:20px !important;
  }
  .ueberuns-box .fl-node-1u3gor2zxht9 {
    max-width: 100% !important;
  }
	.price-section {
		padding:0 !important;
		padding-block:20px !important;
	}
	.price-notes:last-child {
		padding-left:0 !important;
	}
  /* Team Slider adjustments */
  .team-slider-container {
    padding: 40px 0;
    overflow: hidden;
  }

  .swiper-container {
    padding: 0;
    gap: 5px;
    margin-left: 0 !important;
  }

  .team-slide {
    min-width: 100%; /* One slide at a time on mobile */
    max-width: 348px !important;
  }

  .video-wrapper {
    height: 400px;
  }

  .member-video {
    height: 400px;
  }

  .member-name {
    font-size: 24px;
  }

  .member-position {
    font-size: 16px;
  }

  .toggle-btn {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
  }

  .slider-nav button {
    width: 40px;
    height: 40px;
  }

  .slide-content {
    max-width: 100% !important;
    width: 100%;
  }

  /* Career bar stacks vertically */
  /* .career-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  } */

  .fl-node-vdzkqmu0ocxh .pp-infobox {
    padding-left: 0 !important;
  }
  .icon-circle {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .icon-circle img {
    max-width: 16px !important;
  }

  /* Karriere section adjustments */
  .karriere .fl-row-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Modal adjustments */

  .fl-node-lsb4oagpw80x {
    display: flex;
    align-content: center;
    justify-content: center;
    column-gap: 0;
    row-gap: 10px;
  }

  /* Form stacks vertically */
  .form-groups , .form-group-submit {
    flex-direction: column;
  }

  /*  */
  /*  */
  /*  */
  /*  */
  /*  */
  /*  */
  .swiper-slide-image {
    width: 100% !important  ;
  }
  .salon-price-list {
    padding: 0 !important;
  }

  .bg-ingo .fl-node-0uz65xvh9adq {
    padding: 24px !important;
  }
  .fl-node-54m3vqusokjz,
  .fl-node-ypzmhosjbnak,
  .fl-node-b3ks4dmzvqxl {
    max-width: 100% !important;
    width: 100% !important;
  }
  .fl-node-4z6kyih2rv81 {
    margin-top: -100px !important;
  }

  .fl-node-lsb4oagpw80x {
    row-gap: 34px !important;
  }
}
/* 9.2 MOBILE LANDSCAPE (481px+) */
@media only screen and (max-width: 481px) {
  .fl-node-4bxsf98atlrc {
    grid-template-columns: 1fr !important;
  }

  .fl-node-lsb4oagpw80x {
    column-gap: 0 !important;
  }
  .pp-modal-close {
    border: none !important;
    width: 35px !important;
    height: 35px !important;
  }
}
@media only screen and (max-width: 680px) {
  .wpbf-mobile-logo-container {
    margin-left: 20px !important;
  }
	  .career-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}
/* 9.5 TABLET SPECIFIC (max-width: 1023px) */
@media (max-width: 1023px) {

  /* Team slider shows 2 slides */
  .team-slide {
    min-width: calc(50% - 10px);
  }
  .fl-node-5hysamw3bjxd {
    display: none !important  ;
  }
}
@media (max-width: 1199px) {
	.karriere .fl-row-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
	}}
/* 9.6 DESKTOP SPECIFIC (max-width: 1025px) */
@media (max-width: 1025px) {
	.karriere .fl-row-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
  .bg-ingo .fl-node-0uz65xvh9adq {
    padding: 60px 60px;
  }
  .bg-ingo .fl-node-0uz65xvh9adq,
  .fl-node-249b6hlnkxoj {
    width: 100% !important;
  }
  /* Info box layout changes to column */
  .fl-node-fa3sxtkp198u {
    flex-direction: column !important;
    align-items: center;
  }

  .bg-ingo .fl-node-0uz65xvh9adq {
    padding: 60px 60px;
  }
}
.fl-node-4z6kyih2rv81 .pp-infobox-description {
  margin-top: 40px !important;
}
/* 9.7 LARGE DESKTOP ADJUSTMENTS (max-width: 1199px) */
@media (max-width: 1199px) {
	  /* Karriere section adjustments */
  .karriere .fl-row-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .ingo-foto,
  .ingo-foto .fl-photo-img,
  .ingo-foto .fl-photo-content {
    width: 100% !important;
  }
  fl-photo-img 
  /* Info box layout changes to column */
  .fl-node-fa3sxtkp198u {
    flex-direction: column !important;
    align-items: center;
  }
  .bg-ingo .fl-node-0uz65xvh9adq {
    padding: 60px 60px;
  }
  .bg-ingo .fl-node-0uz65xvh9adq,
  .fl-node-249b6hlnkxoj {
    width: 100% !important;
  }

  .bg-ingo .fl-node-0uz65xvh9adq {
    padding: 60px 60px;
  }
  #mobile-navigation {
    max-height: 100vh !important;
  }
  .fl-node-om0gaupnwjcf .menu a {
    font-size: var(--large) !important;
    font-weight: 500 !important;
    color: var(--black) !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border-bottom: 2px solid transparent !important;
    max-width: fit-content !important;
  }
  /* Menu REsponsive */
  #menu-main-menu-1 {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .fl-node-lsb4oagpw80x {
    display: flex;
    align-content: center;
    justify-content: center;
    column-gap: 10px;
    row-gap: 10px;
  }
  .ingo-box .text-box {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* 9.8 DESKTOP (1024px+) */
@media (min-width: 1024px) {
  .custom-link a {
    font-size: 50px !important;
  }

  .custom-link a:last-child::after {
    width: 50px;
    height: 50px;
    bottom: -12px;
  }
}

@media only screen and (max-width: 1399px) {
  .fl-node-qs60igntzyv1 .pp-infobox {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
/* 9.9 LARGE DESKTOP (1441px+) */
@media only screen and (min-width: 1441px) {
  :root {
    --xxsmall: 13px;
    --xsmall: 15px;
    --small: 18px;
    --regular: 22px;
    --medium: 24px;
    --large: 32px;
    --xlarge: 45px;
    --xxlarge: 65px;
  }
}

/* 9.10 XL DESKTOP (1701px+) */
@media only screen and (min-width: 1701px) {
  :root {
    --xxsmall: 13px;
    --xsmall: 15px;
    --small: 18px;
    --regular: 22px;
    --medium: 24px;
    --large: 32px;
    --xlarge: 50px;
    --xxlarge: 75px;
  }
}

/* 9.11 XXL DESKTOP (1921px+) */
@media only screen and (min-width: 1921px) {
  :root {
    --xxsmall: 14px;
    --xsmall: 16px;
    --small: 19px;
    --regular: 24px;
    --medium: 28px;
    --large: 32px;
    --xlarge: 50px;
    --xxlarge: 85px;
  }
}

/* ============================================================================
   END OF STYLESHEET
   ============================================================================ */
footer {
    position: relative;
}

footer::before {
    content: "";
    position: fixed;
    right: 25px;
    bottom: -80px;
    width: 50px;
    height: 50px;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s ease;
    opacity: 0;
}
footer.scroll-hover::before {
    background: var(--primary);
}
footer::after {
    content: "";
    position: fixed;
    right: 45px;
    bottom: -80px;
    width: 10px;
    height: 10px;
    border-left: 3px solid #fff;
    border-top: 3px solid #fff;
    transform: rotate(45deg);
    z-index: 1000;
    transition: all 0.3s ease;
    opacity: 0;
}

footer.show-scroll::before {
    bottom: 140px;
    opacity: 1;
}

footer.show-scroll::after {
    bottom: 160px;
    opacity: 1;
}