/* Blog von gaertnerei-simulator.de, Gestaltung "Salbei & Licht" (wie public/index.html).
   Wird von tools/blog.py nach public/blog/blog.css kopiert; nur hier bearbeiten. */
:root{
  --bg:#F1F5EF; --panel:#FFFFFF; --ink:#1E3A2E; --muted:#50665A;
  --brand:#3B7A55; --brand2:#4A8C64; --link:#2F6A48; --sun:#F2C14E;
  --line:rgba(30,58,46,.12); --shadow:0 1px 2px rgba(30,58,46,.05), 0 6px 18px rgba(30,58,46,.06);
  --news-bg:#FBEBC2; --news-ink:#6E5310; --dev-bg:#DCEDE3; --dev-ink:#1E5A3C;
  --footer-bg:#24443A; --footer-ink:#D5E3DA; --footer-link:#FFFFFF;
  --topbar-bg:#FFFFFF; --radius:14px; --maxw:1120px;
  --head-tracking:-.015em;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
img,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible{ outline:3px solid var(--sun); outline-offset:2px; border-radius:4px; }
h1,h2,h3{ letter-spacing:var(--head-tracking); }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* Sprache: ohne JavaScript Deutsch, mit ?lang=en Englisch (blog.js setzt html[lang]) */
html:not([lang="en"]) [data-lang="en"], html:not([lang="en"]) [data-lang-text="en"]{ display:none !important; }
html[lang="en"] [data-lang="de"], html[lang="en"] [data-lang-text="de"]{ display:none !important; }

.skip-link{ position:absolute; left:-9999px; top:8px; z-index:200; background:var(--ink); color:#fff; padding:10px 14px; border-radius:8px; }
.skip-link:focus{ left:12px; }
.draft-banner{ background:#B3261E; color:#fff; text-align:center; font-weight:750; padding:8px 12px; font-size:14px; }

/* Kopfzeile mit Menue */
.topbar{ background:var(--topbar-bg); border-bottom:1px solid var(--line); }
.topbar-inner{ display:flex; align-items:center; gap:18px; min-height:64px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:900; font-size:18px; white-space:nowrap; }
.brand:hover{ text-decoration:none; }
.brand img{ width:38px; height:auto; }
.brand b{ color:var(--brand); }
.mainnav{ display:flex; gap:4px; margin-left:auto; }
.mainnav a{ padding:8px 12px; border-radius:999px; color:var(--ink); font-weight:650; font-size:15px; }
.mainnav a:hover{ background:rgba(59,122,85,.10); text-decoration:none; }
.mainnav a[aria-current="page"]{ background:var(--brand); color:#fff; }
.language-switcher{ display:grid; grid-template-columns:repeat(2,42px); gap:2px; padding:3px; border:1px solid var(--line);
  border-radius:8px; background:rgba(255,255,255,.92); box-shadow:0 4px 16px rgba(34,57,43,.12); }
.language-switcher button{ width:42px; height:34px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--muted);
  font:700 13px/1 ui-sans-serif, system-ui, sans-serif; cursor:pointer; }
.language-switcher button:hover{ background:rgba(61,132,80,.10); color:var(--ink); }
.language-switcher button[aria-pressed="true"]{ background:var(--ink); color:#fff; }
@media (max-width:700px){
  .topbar-inner{ flex-wrap:wrap; gap:8px 10px; padding:10px 16px; }
  .brand{ font-size:16px; } .brand img{ width:32px; }
  .language-switcher{ margin-left:auto; }
  .mainnav{ order:3; width:100%; margin:0 -8px; overflow-x:auto; }
  .mainnav a{ font-size:14px; padding:7px 11px; white-space:nowrap; }
}

/* Rubrik und Metazeile */
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:12.5px; font-weight:750; letter-spacing:.2px; }
.badge:hover{ text-decoration:none; filter:brightness(.97); }
.badge.news{ background:var(--news-bg); color:var(--news-ink); }
.badge.dev-blog{ background:var(--dev-bg); color:var(--dev-ink); }
.meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; color:var(--muted); font-size:14px; }
.meta .dot::before{ content:"·"; margin-right:10px; }

/* Uebersicht */
.page-intro{ padding:42px 0 6px; }
.page-intro h1{ margin:0 0 8px; font-size:42px; font-weight:900; }
.page-intro p{ margin:0; color:var(--muted); font-size:18px; line-height:1.55; max-width:680px; }
.filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:24px 0 18px; }
.pill{ padding:9px 16px; border-radius:999px; border:1.5px solid var(--line); background:#FFFFFF; color:var(--ink); font-weight:700; font-size:14.5px; }
.pill:hover{ text-decoration:none; border-color:var(--brand); }
.pill[aria-current="page"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
.pill .n{ opacity:.65; font-weight:600; margin-left:6px; }
.feed{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:650; color:var(--muted); }
.feed svg{ width:16px; height:16px; }
.empty{ color:var(--muted); font-size:17px; padding:30px 0 60px; }
.card{ background:var(--panel); border:1px solid #E1E9E2; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.post-card{ display:flex; flex-direction:column; position:relative; }
.post-card .img{ aspect-ratio:16/9; overflow:hidden; background:#DDE5D8; position:relative; }
.post-card .img img{ width:100%; height:100%; object-fit:cover; }
.post-card .body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.post-card h2,.post-card h3{ margin:10px 0 6px; font-size:19px; line-height:1.3; }
.post-card h2 a,.post-card h3 a{ color:var(--ink); }
.post-card h2 a::after,.post-card h3 a::after{ content:""; position:absolute; inset:0; }   /* ganze Karte klickbar */
.post-card .badge{ position:relative; z-index:1; }
.post-card p{ margin:0; color:var(--muted); line-height:1.55; font-size:15px; }
.post-card .more{ margin-top:auto; padding-top:12px; font-weight:750; font-size:14.5px; }
.lang-tag{ font-size:13px; color:var(--muted); font-weight:600; }
.draft-tag{ position:absolute; top:10px; left:10px; z-index:1; background:#B3261E; color:#fff; font-size:12px; font-weight:750; padding:3px 9px; border-radius:999px; }
.featured{ display:grid; grid-template-columns:1.35fr 1fr; margin:0 0 20px; }
.featured .img{ aspect-ratio:auto; min-height:330px; }
.featured .body{ padding:28px 30px; justify-content:center; }
.featured h2{ font-size:28px; margin:12px 0 10px; }
.featured p{ font-size:16.5px; }
.featured .more{ margin-top:14px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:900px){ .featured{ grid-template-columns:1fr; } .featured .img{ min-height:0; aspect-ratio:16/9; } .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid-3,.grid-2{ grid-template-columns:1fr; } .page-intro h1{ font-size:34px; } .featured .body{ padding:18px; } .featured h2{ font-size:23px; } .feed{ margin-left:0; } .container{ padding:0 16px; } }

/* Beitragsseite */
.post-page{ padding-bottom:10px; }
.post, .container-post{ max-width:1028px; margin:0 auto; padding:0 24px; }
.crumbs, .endnav{ max-width:788px; }
.post-head, .prose > :not(.fig), .lang-note{ max-width:740px; margin-left:auto; margin-right:auto; }
.crumbs{ font-size:14px; color:var(--muted); margin:28px auto 14px; }
.crumbs a{ font-weight:650; }
.post-head h1{ margin:14px 0 12px; font-size:44px; line-height:1.15; font-weight:900; }
.lead{ font-size:20px; line-height:1.6; color:var(--ink); opacity:.88; margin:0 0 26px; }
.lang-note{ padding:12px 14px; border-left:3px solid var(--brand); background:rgba(61,132,80,.08); color:var(--ink); margin-bottom:18px; }
.fig{ margin:28px auto; max-width:980px; }
.fig img, .fig video{ width:100%; border-radius:12px; border:1px solid var(--line); background:#E3E6DF; }
.fig.cover{ margin-top:0; }
.fig.mittel{ max-width:740px; }
.fig.schmal{ max-width:520px; }
.fig a.zoom{ display:block; }
figcaption{ font-size:14px; color:var(--muted); padding:9px 2px 0; line-height:1.45; max-width:740px; }
.fig.row .row-items{ display:flex; gap:14px; align-items:flex-start; }
.fig.row .row-item{ min-width:0; }
@media (max-width:560px){ .fig.row .row-items{ gap:8px; } }
.prose{ font-size:18px; line-height:1.75; }
.prose p{ margin:0 auto 18px; }
.prose h2{ font-size:27px; line-height:1.25; margin:44px auto 12px; }
.prose h3{ font-size:21px; margin:30px auto 8px; }
.prose ul, .prose ol{ padding-left:22px; margin:0 auto 20px; }
.prose li{ margin:0 0 10px; }
.prose a{ text-decoration:underline; text-underline-offset:3px; }
.prose blockquote{ margin:0 auto 20px; padding:4px 0 4px 18px; border-left:3px solid var(--brand); color:var(--muted); }
.prose code{ font-size:.9em; background:rgba(34,57,43,.07); padding:1px 5px; border-radius:4px; }
.endnav{ display:flex; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; border-top:1px solid var(--line); margin:40px auto 0; padding:18px 24px 0; font-weight:700; }
.related h2{ font-size:22px; margin:44px 0 14px; }
@media (max-width:640px){
  .post, .container-post{ padding:0 16px; }
  .post-head h1{ font-size:31px; } .lead{ font-size:18px; } .prose{ font-size:17px; } .prose h2{ font-size:23px; }
  .fig{ margin:22px auto; } .endnav{ padding:16px 16px 0; }
}

/* YouTube 2-Klick (wie Startseite) */
.video-facade{ position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#102018; border:1px solid var(--line); }
.video-facade img{ width:100%; height:100%; object-fit:cover; border:0; border-radius:0; box-shadow:none; }
.video-facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-consent{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; text-align:center; background:rgba(8,24,15,.58); }
.video-load-button{ padding:12px 18px; border:0; border-radius:8px; background:#fff; color:var(--ink); font:inherit; font-weight:750; cursor:pointer; }
.video-consent p{ margin:0; color:#fff; font-size:13px; line-height:1.45; max-width:560px; text-shadow:0 1px 6px rgba(0,0,0,.8); }
.video-close-button{ position:absolute; top:12px; right:12px; z-index:2; width:42px; height:42px; border:1px solid rgba(255,255,255,.65); border-radius:50%; background:rgba(8,24,15,.88); color:#fff; font:700 26px/1 system-ui, sans-serif; cursor:pointer; }

/* Fusszeile */
.site-footer{ background:var(--footer-bg); color:var(--footer-ink); padding:22px 0 32px; margin-top:64px; }
.footer-inner{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-links{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-links a{ color:var(--footer-link); }