:root{
      --bg:#e8f5e9;           /* Background-color */
      --heading:#2e7d32;      /* Überschriften */
      --text:#14301a;
      --muted:#3e5f41;
      --white:#ffffff;
      --primary:#2e7d32;
      --primary-600:#256628;
      --ring: 0 0 0 3px rgba(46,125,50,.18);
      --radius: 18px;
      --shadow-lg: 0 18px 50px rgba(0,0,0,.12);
      --shadow-md: 0 10px 30px rgba(0,0,0,.10);
      --border: 1px solid rgba(46,125,50,.10);
      --glass: rgba(255,255,255,.65);
      --glass-bright: rgba(255,255,255,.78);
      --accent1: #9be7a1;
      --accent2: #b2ffb8;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background: radial-gradient(1000px 600px at 80% -10%, #f2fbf4 20%, transparent 60%) , var(--bg);
      color:var(--text);
      line-height:1.6;
      overflow-x:hidden;
    }

    /* Decorative blobs */
    .blob, .blob2{
      position:fixed; z-index:-1; filter: blur(60px); opacity:.55; pointer-events:none;
      transform: translateZ(0);
    }
    .blob{
      width:520px; height:520px; left:-140px; top:-120px;
      background: radial-gradient(circle at 30% 30%, var(--accent1), transparent 60%),
                  radial-gradient(circle at 70% 70%, var(--accent2), transparent 55%);
      animation: float 14s ease-in-out infinite;
    }
    .blob2{
      width:460px; height:460px; right:-120px; bottom:-120px;
      background: radial-gradient(circle at 50% 40%, #c8f7cb, transparent 60%),
                  radial-gradient(circle at 60% 70%, #e2ffe5, transparent 55%);
      animation: float 18s ease-in-out infinite reverse;
    }
    @keyframes float{
      0%,100%{ transform: translate3d(0,0,0) }
      50%{ transform: translate3d(0,20px,0) }
    }

    /* Navbar */
    .nav{
      position:sticky; top:0; z-index:50;
      backdrop-filter: saturate(140%) blur(10px);
      background: color-mix(in oklab, var(--bg) 70%, white 30%, transparent 0%);
      border-bottom: var(--border);
    }
    .nav-inner{
      max-width:1200px; margin:0 auto; padding:12px 20px;
      display:flex; align-items:center; justify-content:space-between; gap:16px;
    }
    .brand{display:flex; align-items:center; gap:10px; text-decoration:none}
    .logo{
      width:42px; height:42px; border-radius:12px;
      background: linear-gradient(135deg, var(--primary) 0%, #43a047 100%);
      display:grid; place-items:center; color:white; font-weight:800;
      box-shadow: var(--shadow-md);
      letter-spacing:.2px;
    }
    .brand span{font-family:Outfit,Inter,sans-serif; font-weight:700; color:var(--heading); letter-spacing:.2px}

    .links{display:flex; gap:10px; align-items:center; position:relative}
    .links a{
      --pad:12px;
      position:relative;
      text-decoration:none; color:var(--muted); font-weight:600; padding:10px var(--pad);
      border-radius:12px;
      transition: transform .18s ease; 
    }
    .links a:hover{ transform: translateY(-1px) }
    .links a:focus-visible{ outline:none; box-shadow: var(--ring) }

    /* Active underline (moves) */
    .active-underline{
      position:absolute; bottom:4px; height:3px; border-radius:2px;
      background: linear-gradient(90deg, var(--primary), #43a047);
      transition: left .28s ease, width .28s ease, opacity .28s ease;
      opacity:.85;
    }

    .btn {
    appearance:none;
    border:0;
    cursor:pointer;
    padding:11px 16px;
    border-radius:14px;
    font-weight:700;
    background:linear-gradient(180deg, var(--primary), var(--primary-600));
    color: white !important; /* erzwingt weiß */
    box-shadow: var(--shadow-md);
    transform: translateZ(0);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  }
    .btn:hover{ transform: translateY(-1px); filter: brightness(1.02) }
    .btn:active{ transform: translateY(0) scale(.99) }
    .btn-ghost{
      background:transparent; color:var(--primary); border:2px solid var(--primary);
    }
    .btn-ghost:hover{ background: color-mix(in lab, var(--bg) 70%, white 30%); }

    /* Mobile nav */
    .menu-toggle{display:none}
    .hamburger{display:none; gap:8px; align-items:center; padding:10px 12px; border-radius:12px; border:var(--border); background:var(--glass)}
    .hamburger span{display:block; width:22px; height:2px; background:#2a4b2e}
    @media (max-width: 920px){
      .links{display:none}
      .hamburger{display:flex}
      .menu-toggle:checked ~ .links-mobile{display:flex !important}
    }
    .links-mobile{
      display:none; flex-direction:column; gap:8px; padding:12px 20px 16px; border-top:var(--border);
      backdrop-filter: blur(8px); background: var(--glass); position:absolute; top:100%; left:0; right:0; z-index:49;
      box-shadow: 0 10px 20px rgba(0,0,0,0.05); width:100%
    }
    .links-mobile a{padding:12px 16px; border-radius:12px; color:var(--muted); font-weight:600; text-decoration:none; display:block; transition:all .2s ease}
    .links-mobile a:hover{ background: color-mix(in oklab, var(--bg) 60%, white 40%); color:var(--primary); transform:translateX(4px) }
    
    @media (max-width: 640px){
      .nav-inner{padding:12px 16px}
      .hamburger{width:36px; height:36px; padding:8px}
      .hamburger span{width:18px}
      .brand span{font-size:18px}
    }

    /* Hero */
    .hero{
      max-width:1200px; margin:44px auto; padding:0 20px; display:grid; gap:26px;
      grid-template-columns: 1.1fr .9fr; align-items:center;
    }
    @media (max-width: 980px){ .hero{grid-template-columns:1fr; margin:30px auto; padding:0 16px} }
    @media (max-width: 640px){ .hero{margin:20px auto; gap:16px} }
    h1,h2,h3{color:var(--heading); margin:0 0 10px}
    h1{font-family:Outfit,Inter,sans-serif; font-size: clamp(28px, 5vw, 52px); line-height:1.1; font-weight:800; letter-spacing:.2px}
    .lead{font-size: clamp(16px, 1.6vw, 18px); color:#325a35}
    .card{
      background: var(--glass);
      border: var(--border);
      border-radius: var(--radius);
      padding:24px;
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(14px) saturate(120%);
    }
    .hero .card{ position:relative; overflow:hidden }
    .shine{
      position:absolute; inset:0; pointer-events:none;
      background: radial-gradient(600px 220px at 10% -10%, rgba(255,255,255,.5), transparent 40%),
                  radial-gradient(400px 180px at 120% 120%, rgba(255,255,255,.4), transparent 50%);
      mix-blend-mode:soft-light;
    }
    .pill{
      display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:999px;
      background:linear-gradient(0deg,#f5fff6, #ffffff);
      border:1px solid rgba(46,125,50,.18); color:#2a5d2d; font-weight:700; font-size:14px;
      box-shadow: 0 6px 14px rgba(46,125,50,.12);
    }
    .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

    
    /* --- Phone: alle Animationen/Bewegungen ausschalten --- */
  .phone{
    width:min(380px, 92%);
    aspect-ratio: 9/19;
    margin-inline:auto;
    border: 10px solid #101c12;
    border-radius:36px;
    background: #0b160e;
    box-shadow: var(--shadow-lg);
    position:relative;
    overflow:hidden;

    /* keine Perspektive/Rotation/Transition */
    transform: none !important;
    transition: none !important;
    }
  .phone:hover{
  /* kein Hover-Effekt */
  transform: none !important;
  }


    .screen .bar{
      display:flex; justify-content:space-between; align-items:center; padding:10px 14px; color:#d7ffd8; font-size:12px;
    }
    .screen .tile{
      margin: 12px; padding:14px; border-radius:16px; background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08); color:#c9ffd0; font-weight:600;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    }
    .progress{
      height:9px; background:rgba(255,255,255,.16); border-radius:999px; overflow:hidden; margin-top:8px;
    }
  /* Status/Screen bleiben wie gehabt; nur die Fortschritts-Animation aus */
.progress > span{
  /* stoppt die Ladeanimation im Phone */
  animation: none !important;
  width:68%;
}
    @keyframes load{ from{width:0} to{width:68%} }

    /* Features grid */
    .features{
      max-width:1200px; margin:16px auto 40px; padding:0 20px;
      display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    }
    @media (max-width: 980px){ .features{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:16px} }
    @media (max-width: 640px){ .features{grid-template-columns:1fr; gap:12px; margin:12px auto 30px; padding:0 16px} }
    .feature h3{ font-family:Outfit,Inter,sans-serif; letter-spacing:.2px }
    .feature .dot{
      width:10px; height:10px; border-radius:50%;
      background: radial-gradient(circle at 40% 40%, var(--primary), #43a047);
      box-shadow: 0 0 0 6px rgba(46,125,50,.12);
      margin-right:8px; display:inline-block; vertical-align:middle;
    }

    /* Sections */
    .section{max-width:1200px; margin:34px auto; padding:0 20px}
    @media (max-width: 640px){ .section{margin:24px auto; padding:0 16px} }
    .section .card + .card{ margin-top:16px }
    .muted{ color:#426a46 }
    
    /* Responsive card grids */
    .card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px}
    @media (max-width: 768px){ .card-grid{grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px} }
    @media (max-width: 640px){ .card-grid{grid-template-columns:1fr; gap:12px} }

    /* Footer */
    footer{
      margin-top:56px; padding:20px 16px; background: color-mix(in oklab, var(--bg) 70%, white 30%);
      border-top: var(--border); color:#476a4b
    }
    @media (max-width: 640px){ footer{padding:16px; margin-top:40px} }
    .footer-inner{max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px}
    @media (max-width: 640px){ .footer-inner{flex-direction:column; text-align:center; gap:8px} }
    a.link {color:var(--primary); text-decoration:none; position:relative}
    a.link::after{
      content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: currentColor;
      transition: right .25s ease;
    }
    a.link:hover::after{ right:0 }

    /* Reveal on scroll */
    .reveal{ opacity:0; transform: translateY(14px) scale(.98); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1) }
    .reveal.in{ opacity:1; transform: translateY(0) scale(1) }

    /* Accessibility: reduced motion */
    @media (prefers-reduced-motion: reduce){
      .blob, .blob2, .progress > span, .reveal{ animation: none !important; transition: none !important }
      .phone{ transform: none }
      .phone:hover{ transform: none }
    }

    /*  Green Advantage Logo Styling */
.ga-logo {
  width: 10px;
  height: 10px;
  object-fit: contain;
  border-radius: 10px;
  background: #ffffff;
  padding: 4px;
  box-shadow: 0 3px 8px rgba(46, 125, 50, 0.15);
  transition: transform 0.2s ease-in-out;
}

.ga-logo:hover {
 

/* Responsive Text & Spacing */
@media (max-width: 768px) {
  h2{font-size: clamp(24px, 4vw, 36px)}
  h3{font-size: clamp(18px, 3vw, 24px)}
  .lead{font-size: clamp(14px, 1.4vw, 16px)}
  p{font-size: 14px; line-height:1.5}
}

@media (max-width: 640px) {
  h1{font-size: clamp(24px, 4vw, 32px)}
  h2{font-size: clamp(20px, 3.5vw, 28px)}
  h3{font-size: clamp(16px, 2.5vw, 20px)}
  .lead{font-size: 13px}
  p{font-size: 13px}
  body{font-size:13px}
}

/* Responsive Tables */
table{width:100%; overflow-x:auto; display:block}
@media (max-width: 640px) {
  table, thead, tbody, th, td, tr{display:block; width:100%}
  thead{display:none}
  tr{margin-bottom:15px; border:1px solid rgba(0,0,0,0.1); border-radius:8px; padding:8px; display:grid}
  td{padding:10px 0; position:relative; padding-left:50%; text-align:left}
  td:before{content:attr(data-label); position:absolute; left:0; font-weight:700; color:var(--primary)}
}

/* Responsive Images */
img{max-width:100%; height:auto; display:block}
.hero img, .feature img{width:100%; height:auto}

/* Responsive Forms */
form{display:grid; gap:12px}
input, textarea, select{width:100%; padding:12px; border:1px solid rgba(0,0,0,0.1); border-radius:8px; font-family:inherit; font-size:16px}
@media (max-width: 640px) {
  input, textarea, select{padding:14px; font-size:16px}
  button, .btn{padding:14px; width:100%; font-size:14px}
} transform: scale(1.05);
}
/*  Fix für großes Header-Bild */
.ga-header-image {
  max-width: 250px !important;
  width: 100%;         /* responsive */
  height: auto;        /* kein Verzerren */
  display: block;
  margin: 20px auto;   /* zentriert das Bild */
  object-fit: contain; /* Bild korrekt anpassen */
}