:root{
    --primary-color:#000000;
    --secondary-color:#1B6DAE;
    --white-color:#FFFFFF;
    --light-gray-color:#f8f8f8;
    --text-color:#333333;
    --border-color:#e0e0e0;
  }
  html{scroll-behavior:smooth;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    margin:0;background:var(--white-color);color:var(--text-color);font-size:16px;
  }
  .container{max-width:1200px;margin:0 auto;padding:0 20px;}
  /* Header / Navbar */
  /* ===== Basis ===== */
:root{
    --border:#e0e0e0; --accent:#1B6DAE; --primary:#000;
  }
  .header{
    position: sticky; top: 0; z-index: 1000;
    background:#fff; border-bottom:1px solid var(--border);
    padding:12px 20px;
  }
  .header__inner{
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .logo img{ height:56px; width:auto; display:block }
  
  .nav-links{
    display:flex; gap:24px; align-items:center;
  }
  .nav-links a{
    text-decoration:none; color:#111; font-weight:700; font-size:14px;
    padding:10px 12px; border-radius:999px;
  }
  .nav-links a:hover{ background:#f5f7f9 }
  .nav-links a.active{ background:#0b0b0b; color:#fff }
  
  .btn{ padding:10px 14px; border-radius:999px; border:2px solid var(--primary);
        background:#fff; color:var(--primary); font-weight:800; text-decoration:none }
  .btn-primary{ background:var(--primary); color:#fff }
  
  /* Burger (standardmäßig ausgeblendet am Desktop) */
  #menu-toggle.burger{
    display:none; width:44px; height:44px; border-radius:12px;
    border:1px solid var(--border); background:#fff; cursor:pointer;
    align-items:center; justify-content:center;
  }
  #menu-toggle .bars,
  #menu-toggle .bars::before,
  #menu-toggle .bars::after{
    content:""; display:block; width:20px; height:2px; background:#111; border-radius:2px; position:relative; transition:.25s;
  }
  #menu-toggle .bars::before{ position:absolute; transform:translateY(-6px) }
  #menu-toggle .bars::after{ position:absolute; transform:translateY(6px); width:14px; right:0 }
  #menu-toggle[aria-expanded="true"] .bars{ background:transparent }
  #menu-toggle[aria-expanded="true"] .bars::before{ transform:rotate(45deg) }
  #menu-toggle[aria-expanded="true"] .bars::after{ transform:rotate(-45deg); width:20px; right:auto }
  
  /* ===== Mobile ===== */
  @media (max-width: 992px){
    /* Links & primärer Button ausblenden */
    .nav-links,
    .header-actions .btn{
      display:none;
    }
  
    /* Burger zeigen */
    #menu-toggle.burger{
      display:inline-flex;
    }
  
    /* Dropdown-Menü (wenn .active gesetzt) */
    .nav-links.active{
      display:flex; flex-direction:column;
      position:absolute; top:100%; left:0; right:0;
      background:#fff; border-top:1px solid var(--border);
      box-shadow:0 8px 20px rgba(0,0,0,.08);
      padding:10px 8px 12px;
    }
    .nav-links.active a{
      padding:14px 16px; width:100%; text-align:center; border-radius:12px;
    }
  }

  /* Sections */
  .hero{text-align:center;padding:80px 20px}
  .hero h1{font-size:clamp(2rem,5vw,3.5rem);margin:0;color:var(--primary-color);line-height:1.2}
  .hero .headline-underline{position:relative;display:inline-block}
  .hero .headline-underline svg{position:absolute;bottom:-20px;left:0;width:100%;height:25px;z-index:-1}
  .hero p{font-size:clamp(1rem,2vw,1.125rem);margin:24px auto 0;max-width:640px}
  .hero-buttons{margin-top:28px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
  .previews{padding:0 20px 80px}
  .preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
  .preview-card{border:1px solid var(--border-color);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.05)}
  .preview-card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}

  .offer{padding:80px 20px}
  .offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .offer-text .overline{font-size:.875rem;color:var(--primary-color);font-weight:500;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px}
  .offer-text h3{font-size:clamp(2rem,4vw,3rem);color:var(--primary-color);margin:0 0 20px}
  .offer-text p{line-height:1.6;margin-bottom:24px}
  .offer-image img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,.1);object-fit:cover}

  .headline-underline.secondary svg path{stroke:var(--secondary-color)}

  .about-section{padding:80px 20px}
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .image-collage{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:15px;height:500px}
  .image-collage img{width:100%;height:100%;object-fit:cover;border-radius:12px}
  .collage-img-1{grid-column:1/2;grid-row:1/2}
  .collage-img-2{grid-column:2/3;grid-row:1/3}
  .collage-img-3{grid-column:1/2;grid-row:2/3}
  .about-content h3{font-size:clamp(2rem,4vw,3rem);margin:0 0 18px}
  .about-buttons{display:flex;gap:12px;flex-wrap:wrap}

  .testimonials{background:var(--light-gray-color);padding:80px 20px;text-align:center}
  .testimonials h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 40px}
  .testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
  .testimonial-card h3{font-size:1.15rem;margin:15px 0 10px}
  .testimonial-card p{line-height:1.6}

  .classes-section{padding:80px 0}
  .classes-header{text-align:center;margin-bottom:40px;padding:0 20px}
  .classes-header h2{font-size:clamp(1.8rem,4vw,2.4rem);margin:0}
  .class-card{display:flex;flex-direction:column;height:100%;padding:0 10px}
  .class-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:16px}
  .class-card .learn-more{margin-top:auto;text-decoration:none;font-weight:700}

  .pricing-section{background:#fff;padding:80px 20px}
  .pricing-header{text-align:center;margin-bottom:48px}
  .pricing-header h2{font-size:clamp(1.8rem,4vw,2.4rem);margin:0}
  .pricing-grid{display:grid;gap:30px;grid-template-columns:1fr}
  .pricing-card{border:1px solid var(--border-color);border-radius:12px;padding:32px;text-align:center;background:#fff;transition:.2s;position:relative}
  .pricing-card:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .pricing-card.popular{border-color:var(--secondary-color);border-width:2px;transform:scale(1.02)}
  .popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--secondary-color);color:#fff;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:700;text-transform:uppercase}
  .pricing-card h4{font-size:1.35rem;margin:0 0 8px}
  .price{font-size:3rem;font-weight:800;color:var(--primary-color);margin-bottom:2px}
  .price sup{font-size:1.25rem;top:-1em}
  .billing-info{font-size:.9rem;color:#666;margin-bottom:20px}
  .pricing-card ul{list-style:none;padding:0;margin:0 0 28px;text-align:left}
  .pricing-card ul li{display:flex;gap:10px;align-items:center;margin-bottom:12px}
  .pricing-card .btn{width:100%}

  .contact-section{background:var(--light-gray-color);padding:80px 20px}
  .contact-header{text-align:center;margin-bottom:40px}
  .contact-header h2{font-size:clamp(1.8rem,4vw,2.5rem);margin:0}
  .contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:50px;background:#fff;padding:40px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
  .contact-info h3{font-size:1.6rem;margin:0 0 10px}
  .info-item{margin-bottom:16px}
  .info-item strong{display:block;margin-bottom:4px;color:var(--primary-color)}
  .form-group{margin-bottom:16px}
  .form-group label{display:block;margin-bottom:6px;font-weight:600}
  .form-group input,.form-group textarea{width:100%;padding:12px;border:1px solid var(--border-color);border-radius:8px;font-size:1rem}
  .form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--secondary-color);box-shadow:0 0 0 2px rgba(27,109,174,.2)}
  .contact-form .btn{width:100%}

  /* Footer */
  .footer{background:var(--primary-color);color:var(--light-gray-color);padding:80px 20px 0}
  .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;padding-bottom:40px}
  .footer-col h4{font-size:1.15rem;margin:0 0 14px;color:#fff}
  .footer-col ul{list-style:none;margin:0;padding:0}
  .footer-col ul li{margin-bottom:12px}
  .footer-col a{text-decoration:none;color:#a0a0a0}
  .footer-col a:hover{color:#fff}
  .footer-tagline{color:#a0a0a0;max-width:320px;line-height:1.6;margin-bottom:20px}
  .footer-bottom{border-top:1px solid #333;padding:22px 0;text-align:center;font-size:.9rem;color:#a0a0a0}
  .legal-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:8px}

  /* Legal sections */
  .legal-section{padding:80px 20px;background:#fff}
  .legal-section h2{margin-top:0}
  .legal-section p,.legal-section li{line-height:1.7}

  /* Responsive */
  @media (max-width: 992px){
    .nav-links,.header-actions .btn{display:none}
    .hamburger-menu{display:flex}
    .nav-links.active{
      display:flex;flex-direction:column;position:absolute;top:100%;left:0;width:100%;
      background:#fff;border-top:1px solid var(--border-color);box-shadow:0 8px 20px rgba(0,0,0,.08);padding:12px 0
    }
    .nav-links.active a{padding:14px 20px;text-align:center;width:100%}
    .offer-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
    .testimonials-grid{grid-template-columns:1fr;gap:32px}
  }
  @media (min-width:768px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}
  @media (min-width:1200px){
    .pricing-grid{grid-template-columns:repeat(6,1fr)}
    .pricing-card:nth-child(-n+3){grid-column:span 2}
    .pricing-card:nth-child(n+4){grid-column:span 3}
  }