:root{
  /* Hauptfarben von Blau → Grün */
  --blue:#2f9e44;          /* frisches, aber nicht grelles Grün */
  --blue-dark:#237a35;     /* dunkler Waldton */
  --blue-soft:#eaf7ef;     /* sehr sanftes Grün statt Hellblau */

  /* bestehendes Grün leicht harmonisiert */
  --green:#1d6b3a;

  /* Rest leicht angepasst für bessere Harmonie */
  --text:#24313a;
  --muted:#687782;
  --line:#dbe4ea;
  --bg:#f3f8f4;           /* minimal grünlicher Hintergrund */
  --card:#ffffff;

  --shadow:0 10px 28px rgba(0,0,0,.08);
  --radius:18px;
  --radius-sm:12px;
  --max:1180px;
}

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.55;
    }

    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; display:block; }

    /* Top navigation */
    .topbar{
      position:sticky;
      top:0;
      z-index:1000;
      background:linear-gradient(180deg,var(--blue) 0%, var(--blue-dark) 100%);
      box-shadow:0 6px 18px rgba(0,0,0,.14);
    }
    .topbar-inner{
      width:min(var(--max), calc(100% - 24px));
      margin:0 auto;
      min-height:72px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .brand{
      color:#fff;
      font-weight:900;
      letter-spacing:.2px;
      font-size:1.1rem;
      white-space:nowrap;
    }
    .nav{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .nav a{
      color:#fff;
      font-weight:700;
      padding:10px 14px;
      border-radius:999px;
      transition:background .15s ease, transform .15s ease;
    }
    .nav a:hover{
      background:rgba(255,255,255,.14);
      transform:translateY(-1px);
    }

    /* Page */
    .page{
      width:min(var(--max), calc(100% - 24px));
      margin:26px auto 48px;
    }

    .layout{
      display:grid;
      grid-template-columns:minmax(0, 1.6fr) minmax(320px, .78fr);
      gap:24px;
      align-items:start;
    }

    @media (max-width: 980px){
      .layout{
        grid-template-columns:1fr;
      }
    }

    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }

    .card-body{
      padding:22px;
    }

    /* Hero */
    .hero{
      overflow:hidden;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:22px;
      align-items:center;
    }
    @media (max-width: 860px){
      .hero-grid{
        grid-template-columns:1fr;
      }
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:var(--blue-soft);
      color:#1f5c3a;
      border:1px solid #cfe8d6;
      border-radius:999px;
      padding:8px 14px;
      font-size:.92rem;
      font-weight:800;
      margin-bottom:14px;
    }

    .hero h1{
      margin:0 0 14px 0;
      font-size:clamp(1.9rem, 3.4vw, 3rem);
      line-height:1.08;
      letter-spacing:.1px;
    }

    .hero p{
      margin:0 0 12px 0;
      color:#4c5a63;
      font-size:1.02rem;
    }

    .hero-actions{
      margin-top:18px;
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 18px;
      border-radius:14px;
      font-weight:850;
      border:0;
      cursor:pointer;
      transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
    }
    .btn:hover{
      transform:translateY(-1px);
      filter:brightness(1.03);
    }
    .btn-primary{
      background:linear-gradient(180deg,var(--blue) 0%, var(--blue-dark) 100%);
      color:#fff;
      box-shadow:
       0 10px 22px rgba(47,158,68,.18),
       0 2px 6px rgba(0,0,0,.06);
    }
    .btn-secondary{
      background:#f3f7fa;
      color:#1f3b49;
      border:1px solid var(--line);
    }

    .hero-image-wrap{
      background:linear-gradient(180deg,#f3faf5 0%, #e8f5ec 100%);
      border:1px solid #d6eadc;
      border-radius:22px;
      padding:18px;
      min-height:320px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .hero-image-wrap img{
      width:min(100%, 340px);
      height:auto;
      object-fit:contain;
    }

    /* Content cards */
    .section-title{
      margin:0 0 10px 0;
      font-size:1.4rem;
      line-height:1.2;
    }

    .lead{
      font-size:1.04rem;
      color:#44535d;
    }

    .info-box{
      background:#f4faf6;
      border:1px solid #d7eadf;
      border-left:6px solid var(--blue);
      border-radius:14px;
      padding:16px 16px;
      margin-top:14px;
    }

    .reason-list{
      margin:0;
      padding-left:18px;
    }
    .reason-list li{
      margin:8px 0;
    }

    .bullet-cards{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:14px;
      margin-top:16px;
    }
    @media (max-width: 760px){
      .bullet-cards{
        grid-template-columns:1fr;
      }
    }

    .mini-card{
      border:1px solid var(--line);
      border-radius:16px;
      background:#f9fdfb;
      padding:16px;
    }
    .mini-card h3{
      margin:0 0 8px 0;
      font-size:1.02rem;
    }
    .mini-card p{
      margin:0;
      color:var(--muted);
      font-size:.96rem;
    }

    /* Sticky sidebar */
    .sidebar{
      position:sticky;
      top:94px;
      display:grid;
      gap:16px;
    }
    @media (max-width: 980px){
      .sidebar{
        position:static;
      }
    }

    .donate-card .card-body{
      padding:20px;
    }

    .cta-title{
      margin:0 0 8px 0;
      font-size:1.3rem;
    }
    .cta-title-red{
      margin:0 0 8px 0;
      font-size:1.3rem;
	  color: #Fa3333;
    }



    .cta-title-klein{
      margin:0 0 8px 0;
      font-size:1.0rem;
    }
    .cta-title-red-klein{
      margin:0 0 8px 0;
      font-size:1.0rem;
	  color: #Fa3333;
    }






    .cta-sub{
      margin:0 0 16px 0;
      color:var(--muted);
    }

    .cta-sub-8{
      margin:0 0 8px 0;
      color:var(--muted);
    }


    .donate-btn{
      width:100%;
      min-height:56px;
      font-size:1.06rem;
    }

    .support-note{
      margin-top:14px;
      background:#f4faf6;
      border:1px solid #d6eadc;
      border-radius:14px;
      padding:14px;
      color:#49606e;
      font-size:.95rem;
    }

    .box-title{
      display:flex;
      align-items:center;
      gap:10px;
      margin:0 0 14px 0;
      font-size:1.05rem;
      font-weight:850;
    }

    .donation-list{
      display:grid;
      gap:10px;
    }

    .donation-item{
      border:1px solid var(--line);
      border-radius:14px;
      padding:2px 7px;
      background:#fff;
    }

    .donation-row{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:6px;
    }

    .donation-name{
      font-weight:700;
	  font-size:14px;
    }
    .donation-meta{
      margin-top:0px;
      color:var(--muted);
      font-size:.9rem;
    }
    .donation-amount{
      white-space:nowrap;
      font-weight:900;
      color:var(--green);
    }

    .rank{
      width:28px;
      height:28px;
      border-radius:999px;
      background:var(--blue);
      color:#fff;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:.9rem;
      font-weight:900;
      margin-right:8px;
      flex:0 0 28px;
    }

    .rank-row{
      display:flex;
      align-items:flex-start;
      gap:10px;
    }

    /* Footer */
    .footer{
      width:min(var(--max), calc(100% - 24px));
      margin:34px auto 34px;
      color:#6b7882;
      font-size:.95rem;
      text-align:center;
    }

    /* Small details */
    .divider{
      height:1px;
      background:var(--line);
      margin:18px 0;
    }

    .muted{
      color:var(--muted);
    }

/* Kontostand in % */
.spendenziel-box{
  margin-top: 8px;
}

.spendenziel-wert{
  font-size: 1.35rem;
  font-weight: 900;
  color: #1f3640;
  margin-bottom: 10px;
}

.spendenziel-bar-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.spendenziel-bar{
  position:relative;
  flex:1 1 auto;
  height:30px;
  background:linear-gradient(180deg,#eef4f8 0%, #e3edf3 100%);
  border:1px solid #d4e0e8;
  border-radius:999px;
  overflow:hidden;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.9),
    inset 0 -1px 2px rgba(0,0,0,.04);
}

.spendenziel-fill{
  position:relative;
  height:100%;
  min-width:54px;
  border-radius:999px;
  background:linear-gradient(90deg,#2f9e44 0%, #237a35 55%, #1d6b3a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 0 12px rgba(47,158,68,.16);
  overflow:hidden;
}

.spendenziel-fill::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:3px;
  height:40%;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0));
  pointer-events:none;
}

.spendenziel-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.07) 40%,
    rgba(255,255,255,0) 75%
  );
  animation:spendenzielSheen 4.2s linear infinite;
  pointer-events:none;
}

.spendenziel-figure{
  position:absolute;
  top:50%;
  left:0;
  width:44px;
  height:26px;
  transform:translateY(-50%);
  animation:figureTravel 5.2s linear infinite;
  z-index:2;
  pointer-events:none;
}

.figure-svg{
  width:44px;
  height:26px;
  display:block;
}

.fig-part,
.fig-push{
  fill:none;
  stroke:#ffffff;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.fig-part{
  stroke-width:2.4;
}

.fig-push{
  stroke-width:2;
  opacity:.95;
}

.fig-body{
  stroke-width:2.6;
}

.fig-arm-left{
  transform-origin:13px 11.5px;
  animation:armLeft .5s ease-in-out infinite alternate;
}

.fig-arm-right{
  transform-origin:13px 11.5px;
  animation:armRight .5s ease-in-out infinite alternate;
}

.fig-leg-left{
  transform-origin:13px 16px;
  animation:legLeft .5s ease-in-out infinite alternate;
}

.fig-leg-right{
  transform-origin:13px 16px;
  animation:legRight .5s ease-in-out infinite alternate;
}

@keyframes figureTravel{
  0%{
    left:4px;
    transform:translateY(-50%) translateX(0);
  }
  70%{
    left:calc(100% - 48px);
    transform:translateY(-50%) translateX(0);
  }
  76%{
    left:calc(100% - 42px);
    transform:translateY(-50%) translateX(2px);
  }
  82%{
    left:calc(100% - 45px);
    transform:translateY(-50%) translateX(0);
  }
  89%{
    left:calc(100% - 42px);
    transform:translateY(-50%) translateX(2px);
  }
  100%{
    left:4px;
    transform:translateY(-50%) translateX(0);
  }
}

@keyframes armLeft{
  from{ transform:rotate(22deg); }
  to{ transform:rotate(-18deg); }
}

@keyframes armRight{
  from{ transform:rotate(-18deg); }
  to{ transform:rotate(20deg); }
}

@keyframes legLeft{
  from{ transform:rotate(24deg); }
  to{ transform:rotate(-20deg); }
}

@keyframes legRight{
  from{ transform:rotate(-20deg); }
  to{ transform:rotate(24deg); }
}

@keyframes spendenzielSheen{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

.spendenziel-max{
  flex:0 0 auto;
  min-width:92px;
  text-align:right;
  font-size:.96rem;
  font-weight:800;
  color:#5c6c77;
}


.thesenliste li{
  margin: 0 0 5px 0;
  line-height: 1.28;
}