/* ============================================================
   ÖKO-System — Startseiten-spezifische Styles
   ============================================================ */

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:88px 0 70px;
}
.hero-watermark{
  position:absolute;
  right:-12%;
  top:-18%;
  width:820px;
  max-width:none;
  opacity:0.05;
  pointer-events:none;
  z-index:0;
}
.hero .container{
  position:relative; z-index:1;
}
.hero-eyebrow{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--water-dp);
  margin:0 0 18px;
}
.hero-claim{
  font-weight:300;
  font-size:clamp(1.9rem, 3.4vw, 2.75rem);
  line-height:1.22;
  margin:18px 0 22px;
  max-width:15ch;
}
.hero-claim em{
  font-style:normal;
  font-weight:700;
  background:linear-gradient(180deg, transparent 62%, rgba(76,140,74,0.28) 62%);
}
.hero-lead{
  font-size:1.05rem;
  color:var(--mist);
  max-width:46ch;
  margin:0 0 34px;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

.hero-figure{ display:flex; justify-content:center; align-items:center; }
.hero-figure img{
  width:100%; max-width:400px;
  filter: drop-shadow(0 24px 40px rgba(46,46,46,0.14));
}

/* ---------- Über uns ---------- */
.intro-text{ max-width:680px; font-size:1.08rem; text-align:justify; }
.intro-meta{
  margin-top:28px;
  display:flex; gap:28px; flex-wrap:wrap;
  font-size:13.5px; color:var(--mist);
}
.intro-meta strong{ color:var(--ink); font-weight:700; }

/* ---------- Was wir tun ---------- */
.pillars{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.pillar{ padding:38px 36px; position:relative; }
.pillar + .pillar{ border-left:1px solid var(--line); }
.pillar-bar{ position:absolute; left:0; top:0; bottom:0; width:4px; }
.pillar.forschung .pillar-bar{ background:var(--water); }
.pillar.bildung .pillar-bar{ background:var(--leaf); }
.pillar-label{ font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; }
.pillar.forschung .pillar-label{ color:var(--water-dp); }
.pillar.bildung .pillar-label{ color:var(--leaf); }
.pillar h3{ font-weight:600; font-size:1.35rem; margin:10px 0 14px; }
.pillar p{ color:var(--mist); margin:0 0 20px; }
.taglist{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.taglist li{ font-size:14.5px; padding-left:18px; position:relative; }
.taglist li::before{ content:"—"; position:absolute; left:0; color:var(--mist); }

@media (max-width:760px){
  .pillars{ grid-template-columns:1fr; }
  .pillar + .pillar{ border-left:none; border-top:1px solid var(--line); }
}

/* ---------- Werte ---------- */
.werte-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; }
.wert{ text-align:left; }
.wert-dot{ width:14px; height:14px; border-radius:50%; background:var(--ink); margin-bottom:16px; }
.wert:nth-child(1) .wert-dot{ background:var(--water); }
.wert:nth-child(2) .wert-dot{ background:var(--leaf); }
.wert:nth-child(3) .wert-dot{ background:var(--sun); }
.wert:nth-child(4) .wert-dot{ background:var(--ink); }
.wert h4{ font-size:1.02rem; font-weight:700; margin:0 0 8px; }
.wert p{ font-size:14px; color:var(--mist); margin:0; }

@media (max-width:820px){ .werte-grid{ grid-template-columns:1fr 1fr; row-gap:34px; } }
@media (max-width:480px){ .werte-grid{ grid-template-columns:1fr; } }

/* ---------- Mitmachen / Tiers ---------- */
.tiers{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;
}
.tier{
  background:var(--paper);
  border:1px solid var(--line);
  border-top:4px solid var(--ink);
  border-radius:14px;
  padding:34px 30px;
  display:flex; flex-direction:column; gap:14px;
}
.tier-research{ border-top-color:var(--water); }
.tier-supporting{ border-top-color:var(--sun); }
.tier-label{
  font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--mist);
}
.tier-fee{ font-weight:300; font-size:1.65rem; margin:0; }
.tier-fee span{ font-weight:700; }
.tier-fee-tbd{ font-size:1.05rem; font-weight:600; color:var(--mist); }
.tier-desc{ color:var(--mist); font-size:14.5px; margin:0; flex:1; }
.tier .btn{ align-self:flex-start; margin-top:4px; }

@media (max-width:900px){
  .tiers{ grid-template-columns:1fr 1fr; }
  .tier-supporting{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .tiers{ grid-template-columns:1fr; }
  .tier-supporting{ grid-column:auto; }
}

/* ---------- Anmeldeformular ---------- */
.form-wrap{
  max-width:720px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:44px;
  background:var(--paper);
}
@media (max-width:600px){ .form-wrap{ padding:28px 22px; } }

.form-intro{ color:var(--mist); margin:0 0 30px; max-width:52ch; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.form-row.single{ grid-template-columns:1fr; }
.form-row.addr{ grid-template-columns:2fr 1fr 1.4fr; }

@media (max-width:560px){
  .form-row, .form-row.addr{ grid-template-columns:1fr; }
}

.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field label{ font-size:13px; font-weight:700; color:var(--ink); }
.field label .opt{ font-weight:400; color:var(--mist); }
.field input, .field select, .field textarea{
  font-family:inherit; font-size:15px; color:var(--ink);
  padding:12px 14px; border:1.5px solid var(--line); border-radius:8px;
  background:var(--paper); outline:none;
  transition:border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--water); }
.field textarea{ resize:vertical; min-height:90px; }

fieldset.radio-group{
  border:none; margin:0 0 22px; padding:0;
  display:flex; gap:22px; flex-wrap:wrap;
}
fieldset.radio-group legend{ font-size:13px; font-weight:700; margin-bottom:10px; width:100%; }
.radio-option{ display:flex; align-items:center; gap:8px; font-size:14.5px; }
.radio-option input{ accent-color: var(--ink); width:16px; height:16px; }

.consent-row{
  display:flex; align-items:flex-start; gap:10px;
  margin:26px 0 28px;
  font-size:13.5px; color:var(--mist);
}
.consent-row input{ margin-top:3px; accent-color: var(--ink); width:16px; height:16px; flex-shrink:0; }
.consent-row a{ text-decoration:underline; color:var(--water-dp); }

.form-status{
  margin-top:16px; font-size:14px;
  padding:12px 16px; border-radius:8px;
  display:none;
}
.form-status.ok{ display:block; background:#E9F3E9; color:#2C5A2C; border:1px solid #BFE0BF; }
.form-status.err{ display:block; background:#FBEAEA; color:#7A2323; border:1px solid #F0C4C4; }

.form-hint{ font-size:12.5px; color:var(--mist); margin-top:14px; }

/* Honeypot-Feld: für Menschen unsichtbar, aber nicht display:none
   (manche Spam-Bots ignorieren display:none-Felder) */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}