:root{
    --bg: #f8faf6;
    --bg-gradient: linear-gradient(180deg, #ffffff 0%, #f8faf6 100%);
    --card: #ffffff;
    --sinngreen: #8b9854;
    --sinngreen-dark: #434A29;
    --sinngreen-light: #D8ED82;
    --sinngreen-subtle: #f4f6ec;
    --primary: #3d5f12;
    --accent: #D8ED82;
    --accent-warm: #f4e8a0;
    --muted: #64748b;
    --text: #1e293b;
    --text-light: #475569;
    --radius: 16px;
    --radius-sm: 12px;
    --radius-lg: 24px;
    --container: 1200px;
    --shadow-sm: 0 2px 8px rgba(67, 74, 41, 0.08);
    --shadow: 0 8px 24px rgba(67, 74, 41, 0.12);
    --shadow-lg: 0 20px 60px rgba(67, 74, 41, 0.15);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  html,body{height:100%}
  body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-gradient);
    color:var(--text);
    margin:0;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .container{max-width:var(--container);margin:0 auto;padding:32px 24px}

  .hero{
    background: linear-gradient(135deg, var(--sinngreen-dark) 0%, var(--sinngreen) 100%);
    color:#fff;
    padding: 48px 0;
    position: relative;
    overflow: hidden;
  }
  .hero::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.4;
  }
  .hero .container{display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;z-index:1}
  .brand{display:flex;align-items:center;gap:20px}
  .logo-placeholder{
    width:80px;
    height:80px;
    background:rgba(255,255,255,0.15);
    border-radius:16px;
    border:2px solid rgba(255,255,255,0.3);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    font-weight:700;
    backdrop-filter:blur(10px);
    flex-shrink:0;
  }

  .logo-placeholder img{
    max-width:60px;
    max-height:60px;
  }
  .brand-text h1{
    margin:0;
    font-size:2.2rem;
    letter-spacing:-0.5px;
    font-weight:800;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .badge{
    font-size:0.65rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
    background:rgba(216,237,130,0.95);
    color:var(--sinngreen-dark);
    padding:4px 10px;
    border-radius:20px;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    animation:badge-pop 0.5s ease-out 0.8s both;
  }
  @keyframes badge-pop{0%{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
  .brand-text .tag{opacity:0.95;margin-top:8px;font-size:1rem;font-weight:400}
  .actions{display:flex;gap:12px;flex-wrap:wrap}

  .btn{
    display:inline-block;
    padding:12px 24px;
    border-radius:var(--radius-sm);
    background:var(--sinngreen-dark);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    border:0;
    cursor:pointer;
    transition:all 0.3s ease;
    font-size:1rem;
  }
  .btn.ghost{
    background:rgba(255,255,255,0.1);
    color:#fff;
    border:2px solid rgba(255,255,255,0.25);
    backdrop-filter:blur(10px);
  }
  .btn.ghost:hover{
    background:rgba(255,255,255,0.2);
    border-color:rgba(255,255,255,0.4);
  }
  .btn.primary{
    background:var(--sinngreen-dark);
    position:relative;
    overflow:hidden;
  }
  .btn.primary::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(255,255,255,0.2);
    transform:translate(-50%,-50%);
    transition:width 0.6s, height 0.6s;
  }
  .btn.primary:hover::before{
    width:300px;
    height:300px;
  }
  .btn.primary:hover{background:#2d3a1a;transform:translateY(-2px);box-shadow:var(--shadow-lg)}
  .btn.primary.pulse{
    animation:pulse-glow 2s ease-in-out infinite;
  }
  @keyframes pulse-glow{
    0%,100%{box-shadow:0 0 0 0 rgba(139,152,84,0.4)}
    50%{box-shadow:0 0 0 10px rgba(139,152,84,0)}
  }
  .btn.secondary{background:#fff;color:var(--sinngreen-dark);border:2px solid var(--sinngreen-light)}

  .lead{padding:48px 0 32px}
  .lead h2{
    margin-top:0;
    font-size:2.5rem;
    font-weight:800;
    background:linear-gradient(135deg, var(--sinngreen-dark) 0%, var(--sinngreen) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    line-height:1.2;
    animation:gradient-shift 8s ease infinite;
    background-size:200% 200%;
  }
  @keyframes gradient-shift{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
  }
  
  /* Highlight-Effekt - der gelbe Marker-Stil */
  .highlight{
    font-weight:700;
    color:var(--sinngreen-dark);
    background:linear-gradient(120deg,transparent 0%,var(--accent) 0%);
    background-repeat:no-repeat;
    background-size:100% 45%;
    background-position:0 88%;
    padding:0 6px;
    display:inline-block;
    position:relative;
    -webkit-background-clip:initial;
    -webkit-text-fill-color:initial;
    background-clip:initial;
    animation:highlight-glow 2s ease-in-out infinite;
  }
  @keyframes highlight-glow{
    0%,100%{background-size:100% 45%}
    50%{background-size:100% 50%}
  }

  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin:32px 0}
  .cards article{
    background:var(--card);
    padding:32px 24px;
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    border:1px solid rgba(139,152,84,0.1);
    transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position:relative;
    overflow:hidden;
    cursor:pointer;
  }
  .card-icon{
    font-size:3rem;
    margin-bottom:16px;
    display:inline-block;
    animation:float 3s ease-in-out infinite;
    filter:drop-shadow(0 4px 8px rgba(67,74,41,0.1));
  }
  @keyframes float{
    0%,100%{transform:translateY(0px)}
    50%{transform:translateY(-10px)}
  }
  .cards article:nth-child(1) .card-icon{animation-delay:0s}
  .cards article:nth-child(2) .card-icon{animation-delay:0.5s}
  .cards article:nth-child(3) .card-icon{animation-delay:1s}
  .cards article:nth-child(4) .card-icon{animation-delay:1.5s}
  .cards article::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:4px;
    height:100%;
    background:linear-gradient(180deg,var(--sinngreen),var(--sinngreen-light));
    transform:scaleY(0);
    transition:transform 0.3s ease;
  }
  .cards article::after{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(139,152,84,0.08), transparent 60%);
    opacity:0;
    transition:opacity 0.3s;
    pointer-events:none;
  }
  .cards article:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-lg)}
  .cards article:hover::before{transform:scaleY(1)}
  .cards article:hover::after{opacity:1}
  .cards h3{margin:0 0 12px;color:var(--sinngreen-dark);font-size:1.3rem;font-weight:700}
  .cards p{color:var(--text-light);margin:0}

  /* section card wrapper */
  .section-card{
    margin:40px 0;
    padding:0;
  }
  .section-card .card-inner{
    padding:48px 40px;
    background:var(--card);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    border:1px solid rgba(139,152,84,0.1);
    position:relative;
    transition:all 0.3s ease;
  }
  .section-card .card-inner:hover{
    box-shadow:var(--shadow-lg);
    transform:translateY(-2px);
  }
  .section-card.accent .card-inner{
    background:linear-gradient(135deg,var(--sinngreen-subtle) 0%,#ffffff 100%);
    border:2px solid var(--sinngreen-light);
  }
  /* Dekorative Ecken für Karten */
  .section-card .card-inner::after{
    content:'';
    position:absolute;
    top:20px;
    right:20px;
    width:60px;
    height:60px;
    background:linear-gradient(135deg,transparent 50%, var(--accent) 50%);
    opacity:0.15;
    border-radius:0 var(--radius-lg) 0 0;
    pointer-events:none;
  }
  .section-card .card-inner h2{margin-top:0;font-size:2rem;font-weight:800;color:var(--sinngreen-dark)}
  .section-card .card-inner h3{margin-top:0;font-size:1.6rem;font-weight:700;color:var(--sinngreen-dark)}
  .section-card .card-inner h4{
    color:var(--sinngreen);
    font-size:1.2rem;
    font-weight:700;
    margin-top:32px;
    margin-bottom:16px;
    position:relative;
    padding-left:20px;
  }
  /* Dekorativer Punkt vor h4 */
  .section-card .card-inner h4::before{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:8px;
    height:8px;
    background:var(--accent);
    border-radius:50%;
    box-shadow:0 0 0 3px rgba(216,237,130,0.3);
  }
  .section-card .card-inner p{color:var(--text);line-height:1.8;font-size:1.05rem}
  .section-card .card-inner p strong{
    color:var(--sinngreen-dark);
    position:relative;
    padding:0 2px;
  }
  .section-card .card-inner ul{line-height:1.9;color:var(--text-light)}
  .section-card .card-inner ul li{
    margin-bottom:12px;
    position:relative;
    padding-left:8px;
  }
  /* Highlight für wichtige Listen-Einträge */
  .section-card .card-inner ul li::marker{
    color:var(--sinngreen);
  }

  .content{padding:32px 0}
  .content h3{
    font-size:1.8rem;
    font-weight:700;
    color:var(--sinngreen-dark);
    margin-bottom:16px;
    position:relative;
    padding-bottom:12px;
  }
  /* Dekorative Unterstreichung */
  .content h3::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:60px;
    height:4px;
    background:linear-gradient(90deg,var(--accent),transparent);
    border-radius:2px;
  }
  .content p{font-size:1.05rem;line-height:1.8;color:var(--text)}
  .content ul{line-height:1.9;color:var(--text-light)}
  .content ul li{margin-bottom:8px}

  .newsletter .panel{
    background:linear-gradient(135deg,var(--sinngreen-dark) 0%,var(--sinngreen) 100%);
    padding:48px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
   
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  .newsletter .panel::before{
    content:'';
    position:absolute;
    top:-50%;
    right:-50%;
    width:100%;
    height:100%;
    background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);
  }
  .newsletter h2{
    color:#fff;
    margin-top:0;
    font-size:2rem;
    font-weight:800;
    position:relative;
    padding-bottom:12px;
  }
  /* Gelber Akzent unter Newsletter-Titel */
  .newsletter h2::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:80px;
    height:4px;
    background:var(--accent);
    border-radius:2px;
  }
  .newsletter p{color:rgba(255,255,255,0.95);font-size:1.1rem}
  .form{display:flex;flex-direction:column;gap:16px;position:relative;z-index:1}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  label{display:block}
  label .label{display:block;margin-bottom:8px;font-weight:600;color:rgba(255,255,255,0.95)}
  input[type=text],input[type=email]{
    width:100%;
    padding:14px 16px;
    border-radius:var(--radius-sm);
    border:2px solid rgba(0, 0, 0, 0.541);
    background:rgba(255,255,255,0.95);
    font-size:1rem;
    transition:all 0.3s ease;
  }
  input:focus{
    outline:none;
    background:#fff;
    border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(216,237,130,0.2);
  }
  .consent{display:flex;align-items:center;gap:12px;font-size:1rem;color:rgba(255,255,255,0.95)}
  .consent input[type=checkbox]{width:20px;height:20px;cursor:pointer}
  .form-foot{display:flex;align-items:center;gap:16px;margin-top:8px}
  .form-msg{margin:0;font-size:1rem;font-weight:600}
  .form-msg.ok{color:var(--accent)}
  .form-msg.err{color:#fca5a5}
  .small{color:rgba(255,255,255,0.8);font-size:0.9rem;margin-top:8px}

  .about{margin-top:48px;padding-bottom:64px}
  .about h3{
    font-size:1.8rem;
    font-weight:700;
    color:var(--sinngreen-dark);
    margin-bottom:16px;
    position:relative;
    padding-bottom:12px;
  }
  .about h3::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:60px;
    height:4px;
    background:linear-gradient(90deg,var(--accent),transparent);
    border-radius:2px;
  }
  .about h4{
    color:var(--sinngreen);
    font-size:1.3rem;
    font-weight:700;
    margin-top:32px;
    position:relative;
    padding-left:20px;
  }
  .about h4::before{
    content:'';
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:8px;
    height:8px;
    background:var(--accent);
    border-radius:50%;
    box-shadow:0 0 0 3px rgba(216,237,130,0.3);
  }
  .about p{font-size:1.05rem;line-height:1.8;color:var(--text)}
  .about ul{line-height:1.9;color:var(--text-light)}
  .about ul li::marker{color:var(--sinngreen)}

  .site-footer{
    background:var(--sinngreen-dark);
    color:#fff;
    padding:32px 0;
    margin-top:64px;
    border-top:4px solid var(--sinngreen-light);
    position:relative;
    overflow:hidden;
  }
  .site-footer::before{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    animation:footer-shine 3s linear infinite;
  }
  @keyframes footer-shine{
    0%{transform:translateX(-100%)}
    100%{transform:translateX(100%)}
  }
  .site-footer small{opacity:0.9;font-size:0.95rem}

  /* Back to Top Button */
  .back-to-top{
    position:fixed;
    bottom:30px;
    right:30px;
    width:50px;
    height:50px;
    background:linear-gradient(135deg, var(--sinngreen-dark), var(--sinngreen));
    color:#fff;
    border:none;
    border-radius:50%;
    font-size:1.5rem;
    cursor:pointer;
    box-shadow:0 4px 20px rgba(67,74,41,0.3);
    opacity:0;
    visibility:hidden;
    transform:translateY(100px);
    transition:all 0.3s ease;
    z-index:1000;
  }
  .back-to-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .back-to-top:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 30px rgba(67,74,41,0.4);
  }
  .back-to-top:active{
    transform:translateY(-2px);
  }

  @media (max-width:768px){
    .row{grid-template-columns:1fr}
    .hero .container{flex-direction:column;align-items:center;text-align:center}
    .brand{flex-direction:column;gap:16px}
    .brand-text h1{justify-content:center}
    .actions{width:100%;justify-content:center}
    .section-card .card-inner{padding:32px 24px}
    .newsletter .panel{padding:32px 24px}
    .cards{grid-template-columns:1fr}
    .lead h2{font-size:2rem}
    .brand-text h1{font-size:1.8rem}
    .back-to-top{bottom:20px;right:20px;width:45px;height:45px;font-size:1.3rem}
  }

  /* utility-ish additions */
  .primary-button{
    border-radius:var(--radius-sm);
    background-color:var(--sinngreen-dark);
    color:#fff;
    padding:14px 28px;
    border:0;
    font-weight:600;
    cursor:pointer;
    transition:all 0.3s ease;
  }
  .primary-button:hover{background-color:#2d3a1a;transform:translateY(-2px);box-shadow:var(--shadow)}
  .secondary-button{
    border-radius:var(--radius-sm);
    border:2px solid var(--sinngreen);
    background:#fff;
    color:var(--sinngreen-dark);
    padding:14px 28px;
    font-weight:600;
  }

  /* Animations */
  @keyframes fade-in-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
  @keyframes fade-in{0%{opacity:0}to{opacity:1}}
  @keyframes slide-in-right{0%{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
  
  .animate-fade-in-up{animation:fade-in-up 0.8s ease-out}
  .animate-fade-in{animation:fade-in 0.6s ease-out}
  
  /* Stagger animation for cards */
  .cards article:nth-child(1){animation:fade-in-up 0.6s ease-out 0.1s both}
  .cards article:nth-child(2){animation:fade-in-up 0.6s ease-out 0.2s both}
  .cards article:nth-child(3){animation:fade-in-up 0.6s ease-out 0.3s both}
  .cards article:nth-child(4){animation:fade-in-up 0.6s ease-out 0.4s both}