/* =============================
       DESIGN‑TOKENS
    ==============================*/
    :root{
      --primary:#00c389;   /* frisches Grün */
      --secondary:#27ae60; /* Grün statt Blau */
      --dark:#003844;
      --light:#f4f9fb;
      --white:#ffffff;
      --danger:#ff5252;
      --warning:#ffb300;

      --radius-sm:8px;
      --radius-md:14px;
      --radius-lg:26px;
      --shadow-sm:0 2px 6px rgba(0,0,0,.06);
      --shadow-md:0 4px 14px rgba(0,0,0,.10);
      --shadow-lg:0 8px 26px rgba(0,0,0,.12);
      --transition:all .25s ease-in-out;
    }

    /* =============================
       RESET & GLOBALS
    ==============================*/
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:'Inter',Arial,sans-serif;
      font-size:16px;
      line-height:1.6;
      color:#333;
      background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
      background-attachment:fixed;
      background-size:400% 400%;
      animation:gradient 15s ease infinite;
      min-height:100vh;
      display:flex;flex-direction:column;
    }
    @keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

    /* =============================
       HEADER / NAVBAR
    ==============================*/
    header{
      position:sticky;top:0;z-index:1000;
      backdrop-filter:saturate(180%) blur(6px);
      background:rgba(0,56,68,.95);
      box-shadow:var(--shadow-sm);
      display:flex;align-items:center;justify-content:space-between;
      padding:.9rem 1.6rem;
    }
    header img{height:90px;transition:var(--transition)}
    header img:hover{transform:scale(1.06)}
    nav{display:flex;flex-wrap:wrap;gap:1rem;margin-left:1rem}
    nav a{
      color:var(--white);text-decoration:none;font-weight:500;
      padding:.55rem 1rem;border-radius:var(--radius-lg);
      display:flex;align-items:center;gap:.4rem;
      transition:var(--transition);
    }
    nav a:hover{background:rgba(255,255,255,.17);transform:translateY(-2px)}
    nav a.active{background:rgba(0,195,137,.35)}

    /* =============================
       CONTAINER
    ==============================*/
    .container{
      width:95%;max-width:1280px;margin:3rem auto;padding:2.6rem;
      background:var(--white);
      border-radius:var(--radius-md);
      box-shadow:var(--shadow-md);
    }

    /* =============================
       TYPOGRAPHY
    ==============================*/
    h1{font-family:'Montserrat',sans-serif;font-size:2.4rem;text-align:center;margin-bottom:1.3rem;color:var(--dark)}
    h2{font-size:1.55rem;font-weight:600;margin-top:2.6rem;margin-bottom:1.1rem;color:var(--dark)}
    h3{font-size:1.15rem;font-weight:600;margin:1rem 0 .45rem;color:var(--dark)}
    p,li{font-size:1rem}
    ul{padding-left:1.2rem}

    /* =============================
       TOC / INFOBOX / CASEBOX
    ==============================*/
    .toc{
      background:var(--light);
      border-left:4px solid var(--primary);
      padding:1.2rem;border-radius:var(--radius-sm);
      box-shadow:var(--shadow-sm);margin-bottom:2.2rem;
    }
    .toc a{display:block;color:var(--dark);text-decoration:none;font-size:.95rem;margin:.28rem 0}
    .toc a:hover{text-decoration:underline}

    .infobox,.casebox{
      padding:1rem 1.2rem;border-radius:var(--radius-sm);
      font-size:.95rem;box-shadow:var(--shadow-sm);margin:1.2rem 0;
    }
    .infobox{background:var(--light);border-left:5px solid var(--primary)}
    .casebox{background:#fffbea;border-left:5px solid var(--warning)}

    /* =============================
       MEDIA WRAPPER
    ==============================*/
    .media{margin:1.6rem 0;text-align:center}
    .media img,.media iframe{max-width:100%;border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}
    .media iframe{aspect-ratio:16/9;border:0}

    /* =============================
       GRID COMPONENTS
    ==============================*/
    .steps-grid,.tool-grid{
      display:grid;gap:1.5rem;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      margin-top:1.4rem;
    }
    .step-card,.tool-card{
      background:var(--light);
      border-radius:var(--radius-md);
      padding:1.2rem 1.4rem;
      box-shadow:var(--shadow-sm);
      transition:var(--transition);
    }
    .step-card:hover,.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

    .step-card{position:relative}
    .step-number{
      position:absolute;top:-16px;left:-16px;width:44px;height:44px;border-radius:50%;
      background:var(--secondary);color:var(--white);display:flex;align-items:center;justify-content:center;
      font-weight:600;box-shadow:var(--shadow-sm)
    }
    .tool-card{display:flex;gap:12px;align-items:flex-start;background:#eaf5ff}
    .tool-card i{font-size:1.7rem;color:#1e88e5;margin-top:4px}

    /* =============================
       TABLES & QUIZ
    ==============================*/
    .impact-table{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:.92rem}
    .impact-table th,.impact-table td{padding:8px;border:1px solid #dcdcdc;text-align:center}
    .impact-table thead{background:var(--light)}

    .quiz-container{background:var(--light);padding:2rem;border-radius:var(--radius-md);box-shadow:var(--shadow-md);margin-top:2.5rem}
    .question{margin:1.2rem 0}
    .options label{display:block;margin:.45rem 0;cursor:pointer}
    .submit-btn{
      background:var(--primary);color:var(--white);border:none;
      padding:.7rem 1.6rem;border-radius:var(--radius-lg);font-weight:600;
      transition:var(--transition);cursor:pointer;
    }
    .submit-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
    .result{margin-top:1rem;font-weight:600}

    /* =============================
       RESPONSIVE
    ==============================*/
    @media(max-width:640px){
      h1{font-size:2rem} header img{height:70px}
      nav{gap:.6rem}
      nav a{padding:.45rem .8rem;font-size:.88rem}
    }