/* kräutergarten.app – Plattform-Website
   Bewusst NEUTRAL gehalten: Die Website ist der Rahmen, die Gärten bringen
   die Farbe. Keine Serifen, kein Papierton – das ist die Handschrift der
   Wiesenfelder App, nicht der Plattform. */

:root{
  --grund:#FAFAF8;
  --karte:#FFFFFF;
  --text:#1A1D1A;
  --leise:#6B7268;
  --linie:#E6E7E3;
  --tinte:#24302A;
  --tinte-hell:#33463C;
  --radius:14px;
  --breit:1080px;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--grund); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--tinte)}

.mitte{max-width:var(--breit); margin:0 auto; padding:0 24px}
section{padding:76px 0}
section.schmal{padding:56px 0}

h1,h2,h3{margin:0; letter-spacing:-.02em; font-weight:750; line-height:1.15}
h1{font-size:clamp(34px,6vw,62px)}
h2{font-size:clamp(26px,3.6vw,38px)}
h3{font-size:19px; font-weight:700; letter-spacing:-.01em}
p{margin:14px 0}
.gross{font-size:clamp(18px,2.2vw,21px); color:var(--leise); max-width:62ch}
.klein{font-size:15px; color:var(--leise)}
.kicker{font-size:12.5px; font-weight:750; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--leise); margin-bottom:14px}

/* ---------- Kopfleiste ---------- */
.kopfleiste{position:sticky; top:0; z-index:50; background:rgba(250,250,248,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linie)}
.kopfleiste .mitte{display:flex; align-items:center; gap:12px; height:64px}
.marke{display:flex; align-items:center; gap:10px; font-weight:750; letter-spacing:-.02em;
  font-size:17px; color:var(--text); text-decoration:none}
.marke img{width:34px; height:34px; object-fit:contain; mix-blend-mode:multiply}
.kopfleiste nav{margin-left:auto; display:flex; gap:22px; align-items:center}
.kopfleiste nav a{color:var(--leise); text-decoration:none; font-size:15px; font-weight:600}
.kopfleiste nav a:hover{color:var(--text)}
/* Die Seite, auf der man gerade ist, wird markiert - sonst weiss niemand,
   wo er sich befindet. */
.kopfleiste nav a.hier{color:var(--text); position:relative}
.kopfleiste nav a.hier::after{content:""; position:absolute; left:0; right:0; bottom:-21px;
  height:2px; background:var(--tinte); border-radius:2px}
@media (max-width:720px){
  .kopfleiste nav{gap:16px}
  .kopfleiste nav a{font-size:14px}
  .marke span.lang{display:none}
}

/* ---------- Zwei Türen: von der Startseite in die Tiefe ---------- */
.tueren{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px}
.tuer{display:block; text-decoration:none; color:inherit; background:var(--karte);
  border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease}
.tuer:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(26,29,26,.10)}
.tuer img{width:100%; aspect-ratio:3/2; object-fit:cover}
.tuer .text{padding:24px 26px 28px}
.tuer h3{font-size:21px; margin-bottom:8px}
.tuer p{margin:0 0 14px; font-size:15.5px; color:var(--leise)}
.tuer .weiter{font-weight:650; font-size:15px; color:var(--tinte)}
.tuer .weiter::after{content:" →"}
@media (max-width:760px){ .tueren{grid-template-columns:1fr} }

/* ---------- Anreißer: Pflanzen und Rezepte auf der Gartenseite ---------- */
.anreisser{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:36px}
.anreisser .stueck{background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--radius); padding:24px 26px}
.anreisser .stueck h3{margin-bottom:6px}
.anreisser .stueck p{margin:0; font-size:15.5px; color:var(--leise)}
.anreisser .stueck .marke-klein{display:inline-block; font-size:12px; font-weight:700;
  letter-spacing:.8px; text-transform:uppercase; color:var(--leise); margin-bottom:10px}
@media (max-width:760px){ .anreisser{grid-template-columns:1fr} }

/* ---------- Aufzählung mit Häkchen (Pitch-Seite) ---------- */
.vorteile{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px}
.vorteile li{padding-left:30px; position:relative; font-size:16.5px}
.vorteile li::before{content:"✓"; position:absolute; left:0; top:0; font-weight:700;
  color:#6E8F6A}
.dunkel .vorteile li::before{color:#A8C6A0}
.vorteile b{font-weight:700}

/* ---------- Abschließender Aufruf ---------- */
.aufruf{background:var(--tinte); color:#EDEFEC; border-radius:20px;
  padding:46px 44px; margin-top:12px; text-align:center}
.aufruf h2{color:#fff; margin-bottom:12px}
.aufruf p{color:#C3CCC4; max-width:56ch; margin:0 auto 26px}
.aufruf .knopf{background:#fff; color:var(--tinte); border-color:#fff}
.aufruf .knopf:hover{background:#EDEFEC}
.aufruf .knopf.zweit{background:transparent; color:#EDEFEC; border-color:rgba(255,255,255,.4)}
.aufruf .knopf.zweit:hover{background:rgba(255,255,255,.10)}
.aufruf .knopfreihe{justify-content:center}
@media (max-width:640px){ .aufruf{padding:34px 24px} }

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--tinte); color:#fff; text-decoration:none; font-weight:650; font-size:16px;
  padding:14px 26px; border-radius:999px; border:1.5px solid var(--tinte); cursor:pointer;
  transition:background .15s ease, transform .1s ease}
.knopf:hover{background:var(--tinte-hell)}
.knopf:active{transform:translateY(1px)}
.knopf.zweit{background:transparent; color:var(--text); border-color:#CDD1CB}
.knopf.zweit:hover{background:#F1F2EE}
.knopfreihe{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}

/* ---------- Kopfbereich ---------- */
.held{padding:70px 0 84px}
.held-raster{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.held-bild{border-radius:20px; overflow:hidden; border:1px solid var(--linie);
  box-shadow:0 24px 60px rgba(26,29,26,.10)}
.held-bild img{width:100%; display:block}
/* Zwei kleinere Bilder nebeneinander unter einem grossen */
.bild-paar{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.bild-paar .held-bild{border-radius:14px; box-shadow:0 12px 30px rgba(26,29,26,.08)}
@media (max-width:860px){ .held-raster{grid-template-columns:1fr; gap:36px} }

/* ---------- Drei Punkte ---------- */
.drei{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px}
.punkt{background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:26px}
.punkt h3{margin-bottom:6px}
.punkt p{margin:0; font-size:15.5px; color:var(--leise)}
@media (max-width:800px){ .drei{grid-template-columns:1fr} }

/* ---------- App-Aufnahmen ---------- */
.telefone{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:44px}
.telefon figure{margin:0}
.telefon .rahmen{border:9px solid #17191A; border-radius:30px; overflow:hidden; background:#000;
  box-shadow:0 16px 40px rgba(26,29,26,.16)}
.telefon .rahmen img{width:100%}
.telefon figcaption{font-size:14.5px; color:var(--leise); margin-top:14px; line-height:1.5}
.telefon b{color:var(--text); font-weight:700; display:block; font-size:15.5px; margin-bottom:2px}
@media (max-width:900px){ .telefone{grid-template-columns:repeat(2,1fr); gap:22px} }
@media (max-width:520px){ .telefone{grid-template-columns:1fr 1fr; gap:16px} .telefon figcaption{font-size:13.5px} }

.vorzuege{display:flex; gap:10px; flex-wrap:wrap; margin-top:38px}
.vorzug{background:var(--karte); border:1px solid var(--linie); border-radius:999px;
  padding:9px 18px; font-size:15px; font-weight:600}

/* ---------- Pflanzen-Raster ---------- */
.pflanzen{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:40px}
.pflanze{margin:0; border-radius:12px; overflow:hidden; background:var(--karte);
  border:1px solid var(--linie)}
.pflanze img{width:100%; aspect-ratio:4/3; object-fit:cover}
.pflanze figcaption{font-size:13.5px; font-weight:600; padding:9px 11px; color:var(--text)}
@media (max-width:900px){ .pflanzen{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .pflanzen{grid-template-columns:repeat(2,1fr)} }

/* ---------- Dunkler Block ---------- */
.dunkel{background:var(--tinte); color:#EDEFEC}
.dunkel h2{color:#fff}
.dunkel .gross, .dunkel p{color:#C3CCC4}
.dunkel .kicker{color:#8FA394}
.dunkel .knopf{background:#fff; color:var(--tinte); border-color:#fff}
.dunkel .knopf:hover{background:#EDEFEC}
.dunkel .punkt{background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.13)}
.dunkel .punkt h3{color:#fff}
.dunkel .punkt p{color:#B7C1B8}

/* Hervorgehobener Block: die Kernzusage, damit sie nicht im Fliesstext untergeht */
.betonung{margin:52px 0 0; padding:30px 34px; border-radius:18px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
  border-left:4px solid #A8C6A0}
.betonung h3{font-size:23px; color:#fff; margin:0 0 12px}
.betonung p{margin:0 0 12px; max-width:74ch}
.betonung p:last-child{margin-bottom:0}
.betonung b{color:#fff}
.betonung .folge{color:#9DAB9F; font-size:15px}
@media (max-width:640px){ .betonung{padding:24px 22px} }

/* ---------- Geschichte ---------- */
.geschichte{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
@media (max-width:860px){ .geschichte{grid-template-columns:1fr; gap:32px} }
.zitat{border-left:3px solid var(--tinte); padding:4px 0 4px 20px; margin:26px 0;
  font-size:19px; line-height:1.55}
.team{font-size:15.5px; color:var(--leise); margin-top:22px}

/* ---------- Formular ---------- */
.formular{background:var(--karte); border:1px solid var(--linie); border-radius:18px;
  padding:34px; max-width:600px; margin-top:36px}
.feld{margin-bottom:18px}
.feld label{display:block; font-size:14.5px; font-weight:650; margin-bottom:6px}
.feld input, .feld textarea{width:100%; font:inherit; font-size:16px; color:var(--text);
  background:var(--grund); border:1.5px solid #D6D9D4; border-radius:10px; padding:13px 14px}
.feld input:focus, .feld textarea:focus{outline:none; border-color:var(--tinte);
  box-shadow:0 0 0 3px rgba(36,48,42,.10)}
.feld textarea{min-height:104px; resize:vertical}
.formular .knopf{width:100%; margin-top:6px}
.hinweis{font-size:14px; color:var(--leise); margin-top:16px}
.meldung{margin-top:16px; padding:13px 16px; border-radius:10px; font-size:15px; display:none}
.meldung.gut{display:block; background:#EAF1EC; color:#24302A; border:1px solid #C9DACE}
.meldung.schlecht{display:block; background:#FBEDEA; color:#7A2E1D; border:1px solid #EDCFC7}

/* ---------- Haftung / Fuß ---------- */
.warnkasten{background:#FCF7EC; border:1px solid #EADFC6; border-radius:var(--radius);
  padding:22px 26px; font-size:15px; color:#5A4B2C; max-width:78ch}
.warnkasten b{color:#3F3520}
footer{border-top:1px solid var(--linie); padding:44px 0 60px; font-size:15px; color:var(--leise)}
footer .reihe{display:flex; gap:26px; flex-wrap:wrap; align-items:center}
footer a{color:var(--leise); text-decoration:none; font-weight:600}
footer a:hover{color:var(--text)}
footer .rechts{margin-left:auto}
@media (max-width:640px){ footer .rechts{margin-left:0} }

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:74ch; padding:56px 0}
.rechtstext h2{margin-top:38px; font-size:22px}
.rechtstext h1{margin-bottom:8px}
.platzhalter{background:#FFF6D9; border:1px dashed #D9C57A; border-radius:8px;
  padding:2px 8px; font-weight:700; color:#6B5510}

/* Was ihr mitbringt */
.mitbringen{margin:18px 0 0; padding-left:22px}
.mitbringen li{margin-bottom:14px; color:#C3CCC4}
.mitbringen b{color:#fff}
/* Auswahlfelder im Formular */
.feld select{width:100%; font:inherit; font-size:16px; color:var(--text);
  background:var(--grund) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9"><path d="M1 1l6 6 6-6" fill="none" stroke="%2324302A" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat right 14px center;
  appearance:none; -webkit-appearance:none;
  border:1.5px solid #D6D9D4; border-radius:10px; padding:13px 40px 13px 14px}
.feld select:focus{outline:none; border-color:var(--tinte); box-shadow:0 0 0 3px rgba(36,48,42,.10)}