:root {
  --accent: #d8bc73;
  --visionera-green-light: #1b3e3ad9;
  --visionera-green: #1b3e3a;
  --bg-overlay: #ffffff59;
  --text-dark: #0f1720;
  --black: #000000;
  --muted: #405159;
  --card-bg: #ffffff9c;
  --radius: 14px;
  --container: 1200px;
  --herobackground: #1b3e3a;
  --hellgrau: #ffffff84;
}

@media (max-width: 750px) {
   

     section{
        padding-top: 5px;
        padding-bottom: 5px;
    }

    /* ===================NAVBAR================== */
    .navbar{
        display: flex;
        align-items: center; 
        justify-content: center;
        width: 100%;
        flex-direction: column;
        height: 60px;
        transition: all 0,5s ease;
        background: var(--visionera-green);
    }


    .navgrid{
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
    }


    .nav-center{
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
    }

    .logo{
        height:  27px;
    }

    .hamburger span {
        width: 22px;
        height: 1.6px;
        background: white;
        display: block;
    }


    .nav-left,
    .nav-right {
        display: none;
    }
    .hamburger.hamburger{
        position: absolute;
        left: 20px; /* 👈 links */
        display: flex;
        flex-direction: column;
        cursor: pointer;
        height: 26px;
        gap: 3px;
    }

    .mobile-menu {
        position: absolute;
        top: 100%;
        left: -100%;
        width: 70%;
        height: 40vh;
        background: white;
        display: flex;
        flex-direction: column;  
    }

    .mobile-menu a {
        color: black;
        text-decoration: none;
    }

    .mobile-menu.active {
        left: 0;
        margin-top: -20px;
   
    }

    #mobileMenu{
        font-size: 5px;
        line-height: 1.2;
        gap: 16px;
        padding: 20px;

        
    }


    /* ===================HEADER================== */

    header.hero{
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .hero-title{    
        font-size: 24px;
        line-height: 1.2;
    }

    .hero-sub {
        font-size: 14px;
        line-height: 2;
    }
   

    /* ===================Hero-section================== */  
    
    .card-hero{
        width: 100%;
    }



    .hero-heading{
        font-size: 18px;
        line-height: 1.4;
        font-weight: 500;
    }

    .hero-subline{
        margin-top: 14px;
        font-size: 14px;
    }

    a.hero-cta{
        margin-top: 20px;
        font-size: 14px;
        border-radius: 50px;
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        animation: puls 2.5s infinite;
    }

    @keyframes puls{
        0% {
            transform: scale(0.98);
            filter: brightness(1);
        }
        50% {
            transform: scale(1.1);
            filter: brightness(1.2);

        }
        100% {
            transform: scale(0.98);
            filter: brightness(1);
        }
    }

    p.hero-trust{
        margin-top: 14px;
        font-size: 12px;
    }

    /* ===================Warum so viele noch vor dem richten Start scheitern================== */

    .card{
        width: 100%;
    }

    .section-title{
        font-size: 18px;
        line-height: 1.2;
        margin-bottom: 50px;
    }

    p.lead{
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 50px;
    }

   .problem-item h3{
        font-size: 18px;
        line-height: 1.2;
   }

   .problem-item p{
        font-size: 14px;
        line-height: 1.4;
        margin: 10px;
   }

   .problem-item{
        display: flex;
        flex-direction: column;
        justify-content: center;   
        align-items: center;  
   }

   .visionera-divider{ /*abtrennlinie*/
    width: 100%;
   }

   .result-headline {
    font-size: 17px;
    font-weight: 700px;
   }

   .flow-item p{
    font-size: 14px;
   }

  

   .problem-summary-box{
        margin-bottom: 0px;
        padding-bottom: 0px;
   }

   .flow-arrow{
    margin-top: 10px;
    margin-bottom: 10px;
   }

   .problem-flow{
    margin-top: 0px;
   }

   .problem-conclusion{
        margin-top: 0px;
        font-size: 14px;
   }

   /*DIe vier schritte zum Erfolg*/
   .flip-front h3{
     font-size: 18px;
     margin-bottom: 0px;
     padding-top: 19px;
     font-weight: 600;
   }

   .p-strong {
    font-size: 14px;
    margin-top: 0px;
    font-weight: 600;
   }

   .p-normal{
    font-size: 14px;
     margin-top: 0px;
     font-weight: 400;
   }

   .tap-hint{
     display: block;
     margin-top: auto;
     font-size: 12px;
        opacity: 0.6;
        font-weight: 600;
   }

   .motivation{
        margin-top: 30px;
        font-size: 14px;
   }

   .flip-back p{
    font-size: 14px;
   }

   .flip-front,
   .flip-back{
     height: 100%;
     gap:30px;
   }

   .flip-inner {
     width: 100%;
     min-height: 280px;
    }

    .course-grid{
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Flexibel */
        gap: 15px;/* größerer Abstand zwischen Boxen für Pfeile */
        align-items: start; /* extrem wichtig gegen Höhenfehler */
        position: relative; /* für absolute Pfeile */
    }

   .flip-card.with-arrow::after {
        content: "↓"; /* 🔥 Pfeil nach unten */
        left: 50%;
        top: 100%;
        transform: translateX(-50%) translateY(25%);
        font-size: 26px;
        color: rgba(0, 0, 0, 0.3);
        position: relative;
        display: flex;
        justify-content: center; /* 🔥 wichtig */
        display: none;
    }

    .flip-card.active .flip-inner {
        transform: rotateY(180deg);
    }
    

    /*---------------------------------------Kurs Sectio---------------------------------------------------------------*/


    .module{
        border:#ececece1 1px solid;
        margin-bottom: 0px;
    }
    .module-header{
        font-size: 14px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        text-align: center;
      
    }

    .badge{
        margin-left: 0px;
    }

    .lessons{
        font-size: 14px;
    }

    .Lektion-xy{
        font-size: 14px;
        font-weight: 700;
    }

    .btn-disclaimer{
        font-size: 12px;
        line-height: 1.4;
        text-align: center;
       
    }
    
    .cta-row{
       margin-top: 30px; 
    }
    .btn-kurs{
        margin-bottom:20px;
        font-size: 14px;
        width: 200px;
        height: 60px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        animation: puls 2.5s infinite;
        text-align: center;
    }

    /*-----------------------------------Für wen ist der Kurs geeignet?---------------------------------------------------------------*/
    
    .target-group h2{
        font-size: 18px;
    }

    .target-group .intro{
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 20px;
     
    }

    .karten{
        justify-content: center;
    }


    .card.positive{
        box-shadow: #007a21 0px 5px 7px;
    }
    
    .card.negative{
        box-shadow: #930000 0px 5px 7px;
    }

    .card h3{
        font-size: 18px;
    }

    .card ul{
        font-size: 14px;
        line-height: 1.4;
    }


    /*-------------------------------------Ergebnis und Transformation---------------------------------------------------------------*/

    .transformation-compare{
        gap:15px;
    }

    .transformation-item h3{
        font-size: 18px;
        margin-bottom: 20px;
        font-weight: 600;
        text-align: center;
    }

    .transformation-item p{
        font-size: 14px;
        line-height: 1.6;
        text-align: center;
    }

    .transformation-compare{
        margin-top: 50px;
       
    }


    .compare-column{
        position: relative;
    }

    .compare-column.after h4,
    .compare-column.before h4{
        position: absolute;
        top: 25px; /* Hälfte von 70px (height vom roten Bereich) */
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;

        margin: 0; /* wichtig: entfernt das alte margin */
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .compare-column.after li,
    .compare-column.before li{
        font-size: 14px;
        line-height: 1.4;
        padding-left:0px;
    }

    .compare-column.after,
    .compare-column.before{
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 70px;
        padding-bottom: 15px;
    }

    .compare-column.after::before,
    .compare-column.before::before {
        height: 50px;
    }

    .transformation-note{
        margin-top:50px;
        font-size: 14px;
    }

    /*--------------------------------------Über Uns---------------------------------------------------------------*/

    .überuns-container{
        margin:0px;
        justify-content: center;
        flex-direction: column;
        gap:30px;
    }

    .überuns-links {
        padding:20px;
        border-right: none;
        border-bottom: 2px solid var(--accent); /* leichte sichtbare Linie in Gold*/;
    }

    .rechts {
        padding-left: 0;
    }  


    .aufzählungen {
        font-size: 14px;
        line-height: 1.4;
        padding-left: 20px !important;
    }

    .aufzählungen li{
        padding-left: 15px;
    }

    .überschrift{
        font-size: 18px;
        font-weight: 600;
    }



    /*-------------------------------------Preis und CTA---------------------------------------------------------------*/

    .section-title-preis{
        font-size: 18px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .new-price{
        font-size: 50px;
        font-weight: 700;
    }

    .cta-btn{
        font-weight: 700;
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 20px;
        padding-top: 20px;
        font-size: 20px;
    }


   .bonus-text{
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 20px;
   }


   /*------------------------------------------Ressourcen---------------------------------------------------------------*/

  .boxenRessource{
        text-align: center;
    }

   .textR{
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 12px;
    font-weight: 500;
   }

   .hinweis{
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
   }


   /*------------------------------------------Kontakt---------------------------------------------------------------*/
   button.btn{
    font-size: 16px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
   }
   /*-----------------------------------------Footer---------------------------------------------------------------*/

   .footer-inner{
    padding: 10px;
   }

   .footer-top{
        font-size: 14px;
        padding: 10px;
        line-height: 0.6;
   }

   .footer .linie {
    margin: 10px;
   }

   .footer .socials{
    margin-top: 10px;
   }


   /*-----------------------Ressourcen Email abfrage-------------------------*/
   .email-abfrage h2{
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
   }
    
    
    .fade-in{
    opacity: 1;
    transform: none;
   }

}



    /*---------------------------------------Preis und CTA --------------------------------------------------------*/
    @media (max-width: 1700px) {
        .preis-layout{
            flex-direction: column;
        }

        .preis-content{
            padding: 40px 20px;
            text-align: center;
        }
        
        .fade-in{
        opacity: 1;
        transform: none;
   }
    }