/* =========================================
   site.css – Helles & freundliches Grün
   ========================================= */

:root{
  --bg:#dff5e3;
  --bg-elev:#e8f9ec;
  --surface:#f5fff7;
  --text:#20351e;
  --muted:#5a7f57;

  --brand:#8fdf70;
  --brand-2:#b9f39b;

  --ok:#5ac85a;
  --warn:#fff5a6;
  --err:#ff6b6b;

  --radius:12px;
  --radius-sm:8px;
  --gap:.9rem;
  --gap-lg:2rem;
  --shadow:0 6px 24px rgba(0,0,0,.12);
}

:root[data-theme="light"]{
  --bg:#ffffff;
  --bg-elev:#f6fff8;
  --surface:#ffffff;
  --text:#1c2d1a;
  --muted:#4f6f4c;
  --brand:#9ce57c;
  --brand-2:#d5f7c5;
  --shadow:0 6px 24px rgba(0,0,0,.08);
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{
  padding:0; margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(159,239,128,.18), transparent 40%),
    radial-gradient(1000px 700px at 110% 10%, rgba(185,243,155,.13), transparent 40%),
    var(--bg);
  color:var(--text);
  font: clamp(16px, 1.6vw + 12px, 20px)/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Inter, Ubuntu, "Helvetica Neue", Arial, "Noto Sans";
  min-height:100%;
}

/* Layout */
.container{ width:min(1100px,92vw); margin:0 auto; padding:2rem 0 4rem; }
.section{ margin:2.2rem 0; }
.center{ text-align:center; }

/* Flex & Grid */
.flex{ display:flex; gap:var(--gap); align-items:center; justify-content:center; }
.grid{ display:grid; gap:var(--gap); justify-items:center; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .grid.cols-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){
  .grid.cols-3, .grid.cols-2, .grid.cols-4{ grid-template-columns:1fr; }
}

/* Header / Nav */
.header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in oklab, var(--bg) 80%, white 20%);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; gap:.5rem; }
.brand{ display:inline-flex; gap:.5rem; align-items:center; font-weight:700; letter-spacing:.2px; color:inherit; text-decoration:none; }
.brand .dot{ width:.9rem; height:.9rem; border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:0 0 18px rgba(159,239,128,.45); }
.links{ display:flex; gap:.6rem; align-items:center; }
.links a{ color:var(--text); text-decoration:none; padding:.4rem .6rem; border-radius:8px; }
.links a:hover{ background:rgba(255,255,255,.45); }
.menu-btn{ display:none; }

@media (max-width:820px){
  .links{
    position:fixed; inset:60px 0 auto 0; background:var(--bg-elev);
    border-bottom:1px solid rgba(0,0,0,.08); box-shadow:var(--shadow);
    padding:1rem; transform:translateY(-120%); transition:transform .25s ease;
    flex-direction:column; gap:.5rem;
  }
  .links.open{ transform:translateY(0); }
  .menu-btn{ display:inline-flex; }
}

/* Hero */
.hero{
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius);
  padding:2rem;
  background:
    radial-gradient(400px 220px at 100% 0%, rgba(159,239,128,.18), transparent 50%),
    radial-gradient(400px 220px at 0% 100%, rgba(185,243,155,.12), transparent 50%),
    linear-gradient(180deg, var(--surface), var(--bg-elev));
  box-shadow:var(--shadow);
  text-align:center;
}

/* Card */
.card{
  background:linear-gradient(180deg, var(--surface), var(--bg-elev));
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  text-align:center;
}
.card .card-body{ padding:1rem 1rem 1.25rem; }
.card h3{ margin:0 0 .25rem; font-size:1.3rem; }
.card p{ margin:.25rem 0 0; color:var(--muted); }

/* Buttons & Inputs */
.btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.1));
  color:var(--text);
  padding:.7rem 1rem;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:transform .04s ease, border-color .2s, background .2s;
  display:inline-block;
}
.btn:hover{ border-color:var(--brand); }
.btn:active{ transform:translateY(1px); }
.btn.primary{
  border-color:transparent;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#20351e; font-weight:600;
}

.input, select{
  width:100%;
  border:1px solid rgba(0,0,0,.14);
  background:var(--bg-elev);
  color:var(--text);
  padding:.75rem 1rem;
  border-radius:var(--radius-sm);
  o