/* ================================================================== */
        /* BASIS-STILE & VARIABLEN                                            */
        /* ================================================================== */
        :root {
            --color-white: #FFFFFF;
            --color-black: #000c33;
            --color-blue-main: #0057FF;
            --color-red: #E60023;
            --color-grey-dark: #414D74;
            --color-grey-light: #6E6E6E;
            --color-grey-bg: #F5F5F5;
            --color-green: #ECFF00;
            --font-heading: 'Montserrat', sans-serif;
            --font-text: 'DM Sans', sans-serif;
        }

        html {
            scroll-behavior: smooth;
            font-size: 16px !important;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: var(--font-text);
            background-color: var(--color-white);
            color: var(--color-black);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .container-narrow {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .section {
            padding: 120px 0;
            position: relative; 
            overflow: hidden;
        }
        
        .section-narrow-padding {
            padding: 100px 0;
        }

        h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 900; /* KORREKTUR: Fette Schriftstärke für alle Überschriften */
  margin: 0 0 20px 0;
  letter-spacing: -1px; /* KORREKTUR: Kompakterer Zeichenabstand */
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.1; }
h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; }
h3 { font-size: 1.5rem; line-height: 1.3; }

        p {
            font-size: 1.1rem;
            line-height: 1.6;
            color: var(--color-grey-dark);
            margin: 0 0 20px 0;
        }
        
        p:last-child {
            margin-bottom: 0;
        }

        a.button-primary {
            display: inline-block;
            background-color: var(--color-blue-main);
            color: var(--color-white);
            padding: 18px 35px;
            text-decoration: none;
            font-family: var(--font-text);
            font-weight: 700;
            transition: transform 0.2s ease;
        }

        a.button-primary.center {
          margin: 0 auto;
          text-align: center;
        }
        
        a.button-primary:hover {
            transform: scale(1.05);
        }

        .text-center {
            text-align: center;
        }

/* ================================================================== */
/* 1. STICKY HEADER (Beaver Themer)                                   */
/* ================================================================== */

.sticky-header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: rgba(0, 12, 51, 0.8);
    /*backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);*/
    z-index: 1000;
    padding: 15px 0;
    border-bottom: 1px solid var(--color-ui-grey);

    /* --- DER FIX --- */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.sticky-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    /* hier sitzt jetzt der „Glas“-Effekt */

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
    height: 100%;
}

/* Entwurf: .sticky-header .container {...}
   Themer:  .sticky-header .fl-row-content {...}
   → Beide gleich behandeln */
.sticky-header .container,
.sticky-header .fl-row-content{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Themer hat 2 Spalten (Logo | Nav+Burger). So schieben wir die rechte an den Rand */
.sticky-header .fl-col-group{
  display:flex;
  align-items:flex-end;
  width:100%;
}
.sticky-header .fl-col-group > .fl-col:first-child{ flex:0 0 auto; }
.sticky-header .fl-col-group > .fl-col:last-child{
  flex: 1 1 auto;
  margin-left:auto;
}

.sticky-header .fl-col-group > .fl-col:last-child .fl-col-content {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 30px;
}


/* Logo wie im Entwurf */
.sticky-header .logo,
.sticky-header .logo a{
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -1px;
    line-height: 1;
}

/* Nav wie im Entwurf (Beaver: .primary-nav) */
.sticky-header nav,
.sticky-header .primary-nav{
  display:flex;
  align-items:center;
}
.sticky-header nav a,
.sticky-header .primary-nav a{
  color: var(--color-grey-bg);
  text-decoration: none;
  margin-left: 15px;
  font-weight: 500;
  padding-bottom: 5px;
}
.sticky-header nav a:hover,
.sticky-header .primary-nav a:hover{
  color: var(--color-white);
}

/* Wrapper exakt auf die Summe aus 3x 3px + 2x 5px = 19px Höhe setzen */
.hamburger-menu{
  display:none; cursor:pointer; background:transparent; border:0;
  width:30px; height:19px; padding:0; position:relative;
}

/* Drei Striche: oben / mitte / unten mit exakten Offsets */
.hamburger-menu span,
.hamburger-menu::before,
.hamburger-menu::after{
  content:''; position:absolute; left:0; width:25px; height:3px; background:#fff;
  transform:none; transition:transform .3s ease, opacity .2s ease;
}
.hamburger-menu::before{ top:0; }
.hamburger-menu span{   top:8px; }   /* 3px + 5px = 8px */
.hamburger-menu::after{ top:16px; }  /* 8px + 3px + 5px = 16px */

/* Open → X */
html.menu-open .hamburger-menu span{ opacity:0; }
html.menu-open .hamburger-menu::before{ transform: translateY(8px) rotate(45deg); }
html.menu-open .hamburger-menu::after{  transform: translateY(-8px) rotate(-45deg); }

/* Aufräumen: entferne ALLE Regeln für `.hamburger-menu div{...}` – die brauchst du hier nicht. */

/* Fullscreen Overlay, grauer Hintergrund, zentrierte Links, 1.5rem */
.mobile-menu{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;              /* <-- hinzugefügt */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-grey-dark, #4A4A4A);
  transform: translateY(-100%);
  transition: transform .35s ease;
  z-index: 1200;
}

/* WICHTIG: Muss NACH der Regel oben stehen, damit es gewinnt */
.mobile-menu[hidden]{
  display: none !important;
}

.menu-open .mobile-menu{ transform: translateY(0); }

.mobile-menu__nav{
  display: flex; flex-direction: column; gap: 18px;
  font-size: 1.5rem; text-align: center; align-items: center;
}

/* Burger (Span-Variante, 3 Balken mit 5px Abstand) */
.hamburger-menu{ display:none; cursor:pointer; background:transparent; border:0; width:30px; height:19px; padding:0; position:relative; }
.hamburger-menu span,
.hamburger-menu::before,
.hamburger-menu::after{
  content:''; position:absolute; left:0; width:25px; height:3px; background:#fff; transform:none; transition:transform .3s ease, opacity .2s ease;
}
.hamburger-menu::before{ top:0; }
.hamburger-menu span{   top:8px; }
.hamburger-menu::after{ top:16px; }
html.menu-open .hamburger-menu span{ opacity:0; }
html.menu-open .hamburger-menu::before{ transform: translateY(8px) rotate(45deg); }
html.menu-open .hamburger-menu::after{  transform: translateY(-8px) rotate(-45deg); }

@media (max-width:768px){
  .hamburger-menu{ display:block; }
  .sticky-header .primary-nav{ display:none !important; }
}

/* ===========================
   Burger über Overlay positionieren
   – Burger wird zum X (span-Variante)
=========================== */

/* Wenn offen: Header liegt über dem Overlay, aber transparent,
   damit die graue Overlay-Fläche optisch durchscheint */
.menu-open .sticky-header{
  z-index: 1301;
  background-color: transparent;
  border-bottom-color: transparent;
}

/* Overlay bleibt darunter */
.menu-open .mobile-menu{ z-index: 1200; }

/* Burger im offenen Zustand fix oben rechts platzieren,
   damit er exakt dort bleibt und als "X" dient */
.menu-open .hamburger-menu{
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: 1302;            /* über Overlay und Header */
}

/* WordPress-Adminbar berücksichtigen */
.admin-bar.menu-open .hamburger-menu{ top: calc(46px + 14px); }
@media (min-width: 783px){
  .admin-bar.menu-open .hamburger-menu{ top: calc(32px + 14px); }
}

/* Optional: eigenen Close-Button im Overlay ausblenden,
   weil der Burger selbst die Close-Funktion übernimmt */
.menu-open .mobile-menu__close{
  opacity: 0;
  pointer-events: none;
}

/* Tap-Target etwas vergrößern (ohne Optik zu ändern) */
.hamburger-menu{ 
  width: 36px;
  height: 24px;
}
.hamburger-menu span,
.hamburger-menu::before,
.hamburger-menu::after{
  width: 25px;
  height: 3px;
}

/* Für iOS Safe Area (Notch) optional etwas Rand beachten */
@supports (padding: max(0px)){
  .menu-open .hamburger-menu{
    right: max(20px, env(safe-area-inset-right));
  }
}

/* ================================================================== */
        /* GLITCH-EFFEKT FÜR H1                                               */
        /* ================================================================== */
        .glitch {
            position: relative;
            color: var(--color-white);
        }
        .glitch::before,
        .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--color-black);
            overflow: hidden;
            clip-path: inset(50% 50% 50% 50%);
        }
        .glitch::before {
            left: -2px;
            text-shadow: -1px 0 var(--color-blue-main);
            animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
        }
        .glitch::after {
            left: 2px;
            text-shadow: 1px 0 var(--color-green, #ECFF00);
            animation: glitch-anim-2 3s infinite linear alternate-reverse;
        }
        @keyframes glitch-anim-1 { 0% { clip-path: inset(41% 0 57% 0); transform: translate(-2px, 1px); } 20% { clip-path: inset(20% 0 75% 0); transform: translate(3px, -2px); } 40% { clip-path: inset(62% 0 32% 0); transform: translate(-1px, 3px); } 60% { clip-path: inset(80% 0 10% 0); transform: translate(2px, -1px); } 80% { clip-path: inset(15% 0 82% 0); transform: translate(-3px, 2px); } 100% { clip-path: inset(50% 0 45% 0); transform: translate(1px, -3px); } }
        @keyframes glitch-anim-2 { 0% { clip-path: inset(82% 0 15% 0); transform: translate(2px, -3px); } 20% { clip-path: inset(55% 0 35% 0); transform: translate(-2px, 1px); } 40% { clip-path: inset(25% 0 70% 0); transform: translate(3px, 2px); } 60% { clip-path: inset(90% 0 5% 0); transform: translate(-1px, -2px); } 80% { clip-path: inset(45% 0 50% 0); transform: translate(2px, 3px); } 100% { clip-path: inset(5% 0 92% 0); transform: translate(-3px, -1px); } }

                /* HERO SECTION */
        /*.hero-section { background-color: var(--color-black); color: var(--color-white); min-height: 90vh; display: flex; align-items: center; }
        .hero-section .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
        .hero-content { flex-basis: 55%; text-align: left; z-index: 2; }*/
        
        .hero-section .eyebrow { font-size: 1rem; letter-spacing: 1.5px; opacity: 0.8; color: #6E6E6E; }
        .hero-section h2.subline { font-family: var(--font-text); font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.5rem); max-width: 600px; margin: 20px 0 40px 0; color: #fff; }
.hero-content h1 {color: #fff}


        /* ================================================================== */
/* ALTERNATIVE A: GLITCH-BLOCK ICON                                   */
/* ================================================================== */
.pain-point-card .icon{
  width:40px; height:30px;
  margin:0 auto 20px;
  background:var(--color-blue-main);
  /* die beiden „Schatten“ als versetzte Box-Shadows */
  box-shadow:
    -3px  3px 0 #E60023,  /* rot unten-links */
     3px -3px 0 #0070F3;  /* hellblau oben-rechts */
}



/* PROBLEM & WUNSCH SECTION */
        .problem-section .container-narrow,
        #wish .container-narrow {
            position: relative;
            z-index: 2;
        }
        .background-graphic {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0.05;
        }
        .pain-point-card { margin-bottom: 60px; }
        .pain-point-card .icon { font-size: 2.5rem; color: var(--color-blue-main); display: block; margin-bottom: 10px; }
        .pain-point-card h3 { font-family: var(--font-text); font-style: italic; font-size: 1.8rem; font-weight: 500; color: var(--color-black); }
        .pain-point-card .subtext { color: var(--color-grey-light); max-width: 500px; margin-left: auto; margin-right: auto; }
        .usp-list p { font-size: 1.3rem; }

        .quote-block {
    margin: 60px auto;
    border-top: 1px solid var(--color-grey-dark);
    border-bottom: 1px solid var(--color-grey-dark);
    padding: 30px 0;
    max-width: 500px;
}

.cta-section .button-primary {
    background-color: var(--color-white);
    color: var(--color-blue-main) !important;
    margin-top: 20px;
    
}

        /* OFFERS SECTION */
        .offers-section { background-color: var(--color-black); color: var(--color-white); }
        .offers-section p { color: var(--color-grey-bg); }
        .offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; text-align: left; margin-top: 80px; }
        .offer-card { border: 1px solid var(--color-grey-dark); padding: 40px; }
        .offer-card p {color: var(--color-white);}
        .offer-card h3 { font-weight: 700; color: var(--color-white); }
        .offer-card .result-label { font-family: var(--font-text); font-weight: 700; color: var(--color-blue-main); margin-top: 30px; margin-bottom: 5px; }
        .next-steps { margin-top: 80px; }
        .next-steps p { font-size: 1.3rem; line-height: 1.8; }


/* ===========================
   VERTICAL SLIDER – COMPLETE
   (Content links, Navigation rechts – auch mobil)
=========================== */

/* Bühne in der Problem-Section etwas breiter */
.problem-section .container-narrow { max-width: 900px; }

/* Wrapper & Spaltenreihenfolge */
.vertical-slider-wrapper{
  display:flex;
  flex-direction: row-reverse;     /* Content links, Navi rechts */
  gap:30px;
  align-items:center;
  min-height:400px;
  touch-action: pan-y;             /* bessere Touch-Erkennung */
}

/* Navigation / Track */
.slider-navigation{
  flex:0 0 50px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  align-self:stretch;
}
.slider-track{
  position:absolute;
  top:0; bottom:0; left:50%;
  width:2px;
  background:#cfcfcf;
  transform:translateX(-1px);
}

/* Pfeile & Dots-Container */
.slider-controls{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  align-items:center; justify-content:space-between;
  height:100%;
}
.slider-control{
  background:none !important; border:0 !important; cursor:pointer;
  padding:10px; transition: transform .2s ease;
}
@media (hover:hover){
  .slider-control:hover{ transform: scale(1.12); }
}

/* Dots – rechteckig/quad, am Track zentriert */
.slider-dots{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
  justify-content:space-between;  /* gleichmäßig zwischen den Pfeilen */
  align-items:center;
  height:70%;
}
.slider-dots li{ margin:0; }
.slider-dots button{
  width:12px; height:12px;
  background:transparent;
  border:2px solid var(--color-grey-light);
  border-radius:2px;              /* 0 = ganz eckig; 2px = leicht eckig */
  padding:0; display:block;
  transform: translateX(-1px);    /* exakt auf die Track-Mitte */
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  cursor:pointer;
}
.slider-dots button:hover{ border-color: var(--color-blue-main); }
.slider-dots button.active,
.slider-dots button[aria-current="true"]{
  background: var(--color-blue-main);
  border-color: var(--color-blue-main);
  transform: translateX(-1px) scale(1.1);
}
.slider-dots button:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(0,87,255,.35);
  border-color: var(--color-blue-main);
}

/* Slides */
.slider-content{ flex:1; text-align:center; margin-left: 74px; }
.slide{ display:none; animation: vs-fade .28s ease; }
.slide.active{ display:block; }
@keyframes vs-fade{
  from{ opacity:0; transform: translateY(6px); }
  to  { opacity:1; transform:none; }
}
/* Bewegung reduzieren respektieren */
@media (prefers-reduced-motion: reduce){
  .slider-control, .slider-dots button{ transition:none; }
  .slide{ animation:none; }
}

/* Slide-Inhalte */
.slide .icon{
  width:40px; height:30px; margin:0 auto 25px;
  background:var(--color-blue-main);
  box-shadow:-3px 3px 0 #E60023, 3px -3px 0 #0070F3;
}
.slide h3{
  font-family:var(--font-text);
  font-style:italic;
  font-size:1.8rem;
  font-weight:500;
  color:var(--color-black);
  margin-bottom:20px;
}
.slide .quote-source{
  margin:-10px 0 18px;
  color:var(--color-grey-light);
  font-size:.95rem; line-height:1.4;
}
.slide .quote-source cite{ font-style:normal; }
.slide .subtext{ color:var(--color-grey-light); }

/* ===========================
   Responsive (Navigation bleibt rechts)
=========================== */
/* Mobile: größere Dots + mehr Abstand (Navi bleibt rechts) */
@media (max-width: 768px){
  /* etwas mehr Platz für die rechte Navi-Leiste */
  .slider-navigation{
    flex-basis: 40px;           /* vorher 36px */
  }

  /* Dots weiter auseinander */
  .slider-dots{
    gap: 22px;                   /* vorher 12–16px */
  }

  /* Dots größer (rechteckig/quad) */
  .slider-dots button{
    width: 16px;                 /* vorher 12–14px */
    height: 16px;
    border-width: 2px;           /* Outline bleibt klar sichtbar */
    transform: translateX(-1px); /* weiter auf Track-Mitte ausgerichtet */
  }

  /* Active/Hover skalieren etwas mehr, damit der Zustand klar erkennbar ist */
  .slider-dots button.active,
  .slider-dots button[aria-current="true"]{
    transform: translateX(-1px) scale(1.12);
  }

  /* Pfeile minimal größer, damit’s stimmig wirkt */
  .slider-control{ padding: 8px; }
  .slider-control svg{ width: 20px; height: 20px; }

  .slider-content {
    margin-left: 20px;
  }
}