/* Permaplans Pflanzenlexikon — gemeinsames Stylesheet fuer /plants/.
   Wird EINMAL geladen und gecached; deshalb steht das CSS nicht inline in
   jeder der ~2200 Seiten. Quelle: tool/web/plant_page_style.css. */
:root{
  --primary:#2D5016; --primary-dark:#1f3810; --accent:#E8A020; --secondary:#8B6914;
  --bg:#F5F0E8; --card:#fffdf8; --text:#2a2620; --muted:#6b6557; --line:#e3dccd;
  --danger:#a33b24;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(45,80,22,.10),transparent 60%),var(--bg);
  color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:840px;margin:0 auto;padding:0 18px 64px}
.topbar{max-width:840px;margin:0 auto;padding:14px 18px;font-size:.85rem;color:var(--muted)}
.topbar a{color:var(--muted)}
.brand{font-weight:700;color:var(--primary)}

h1{font-family:'Merriweather',Georgia,serif;font-size:2rem;line-height:1.2;color:var(--primary-dark);margin:.1em 0}
h2{font-family:'Merriweather',Georgia,serif;font-size:1.15rem;color:var(--primary-dark);margin:0 0 .5em}
.latin{font-style:italic;color:var(--muted);font-size:1.05rem}
.subtitle{color:var(--secondary);margin-top:.3em}

.hero{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:#e8e2d4;margin-bottom:18px}
.head{margin-bottom:18px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.85rem;white-space:nowrap}
.chip b{font-weight:700;color:var(--primary-dark)}

section{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:14px 0}
section p+p{margin-top:.7em}
.prose{white-space:pre-line}

dl.facts{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:8px 16px;font-size:.94rem}
dl.facts dt{color:var(--muted)}
dl.facts dd{font-weight:600}

.bars{display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:minmax(110px,auto) 1fr auto;gap:10px;align-items:center;font-size:.92rem}
.bar{height:8px;border-radius:99px;background:#e8e2d4;overflow:hidden}
.bar i{display:block;height:100%;background:var(--primary);border-radius:99px}
.bar-val{color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}

table.cal{width:100%;border-collapse:collapse;font-size:.8rem;table-layout:fixed}
table.cal th,table.cal td{text-align:center;padding:3px 0}
table.cal th:first-child,table.cal td:first-child{text-align:left;width:34%;font-weight:400;color:var(--muted);font-size:.9rem}
table.cal thead th{color:var(--muted);font-weight:400}
table.cal .m{height:20px;border-radius:4px;background:#ece6d8}
table.cal .m.on{background:var(--accent)}
table.cal .m.bloom{background:#c98bb8}

.warn{border-color:#e0c0b4;background:#fdf4f1}
.warn h2{color:var(--danger)}

.cta{background:var(--primary);color:#f3f0e6;border-color:var(--primary)}
.cta h2{color:#fff}
.cta p{color:#e2e8d8}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn{display:inline-block;padding:11px 18px;border-radius:99px;font-weight:700;font-size:.92rem}
.btn-primary{background:var(--accent);color:#3a2a08}
.btn-primary:hover{text-decoration:none;filter:brightness(1.06)}
.btn-ghost{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{text-decoration:none;background:rgba(255,255,255,.1)}
.finder{display:block;margin-top:14px;color:#f0dcae;font-size:.9rem}

.related{display:flex;flex-wrap:wrap;gap:8px}
.related a{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.85rem}

footer{max-width:840px;margin:0 auto;padding:0 18px 40px;color:var(--muted);font-size:.8rem}

/* ---- Index-Seite ---- */
.search{width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:99px;background:var(--card);font:inherit;margin:6px 0 4px}
.count{color:var(--muted);font-size:.85rem;margin-bottom:10px}
.letter{font-family:'Merriweather',Georgia,serif;color:var(--primary);margin:22px 0 6px;font-size:1.3rem}
ul.plantlist{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 18px}
ul.plantlist li{padding:3px 0;font-size:.94rem}
ul.plantlist .sci{color:var(--muted);font-style:italic;font-size:.85rem}

@media (max-width:520px){
  h1{font-size:1.6rem}
  dl.facts{grid-template-columns:1fr;gap:2px}
  dl.facts dd{margin-bottom:8px}
  .bar-row{grid-template-columns:1fr;gap:3px}
  .bar-val{grid-row:1;justify-self:end;margin-top:-22px}
}