/* Busi Gartenbau — Busi Stories (Blog) Ergänzungen
   Lädt zusätzlich zu site.css + subpages.css. */

/* Subhero mit Bildhintergrund (statt Video) */
.subhero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* Übersicht: etwas Luft unter dem Intro */
.stories-list{background:var(--stone)}

/* Meta-Zeile auf Übersichtskacheln (Datum/Kategorie) ist in site.css (.post-*) */

/* ---------- Einzelbeitrag ---------- */
.story{background:var(--paper)}
.story-body{max-width:760px;margin:0 auto}
.story-body > *{margin-bottom:1.3rem}
.story-body > *:last-child{margin-bottom:0}
.story-body h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:300;letter-spacing:-.02em;margin-top:.4rem}
.story-body h3{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:400;margin-top:1.6rem}
.story-body p{color:var(--ink-soft);font-weight:300;font-size:1.08rem;line-height:1.75}
.story-body p.lead{color:var(--ink);font-weight:400;max-width:none;font-size:1.18rem;line-height:1.7}
.story-body a{color:var(--green);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.story-body a:hover{color:var(--red)}

/* Pull-Quote */
.story-quote{margin:2rem auto;max-width:760px;border-left:3px solid var(--green);
  padding:.4rem 0 .4rem 1.5rem}
.story-quote p{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:300;font-style:italic;
  color:var(--ink);line-height:1.4;margin:0 0 .8rem}
.story-quote cite{font-style:normal;font-size:.82rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green)}

/* Galerie nutzt .refs/.gitem aus site.css; hier nur Abstand */
.story-gallery{margin-top:clamp(2.4rem,5vw,3.6rem)}

/* Fuss / zurück / Beitragsnavigation */
.story-foot{max-width:760px;margin:2.6rem auto 0}
.story-nav{max-width:760px;margin:2.2rem auto 0;padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.story-nav a{font-size:.95rem;font-weight:500;color:var(--ink);transition:color .3s}
.story-nav a:hover{color:var(--green)}
.story-nav .next{margin-left:auto;text-align:right}

@media(max-width:640px){
  .story-body p{font-size:1rem}
}

/* ============================================================
   v2 – Magazin-Übersicht & Editorial-Beitrag
   ============================================================ */

/* ---------- Featured-Beitrag (Übersicht) ---------- */
.featured{margin-bottom:clamp(2.6rem,5vw,4rem)}
/* mehr Abstand zwischen den Beiträgen auf der Busi-Stories-Seite */
.stories-list .posts{row-gap:clamp(2.4rem,5vw,3.6rem);column-gap:clamp(1.4rem,2.6vw,2.2rem)}
.featured-card{display:grid;grid-template-columns:1.12fr .88fr;background:var(--paper);overflow:hidden;
  box-shadow:0 1px 0 rgba(21,32,26,.06);transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.featured-card:hover{transform:translateY(-4px);box-shadow:0 34px 64px -32px rgba(21,32,26,.42)}
.featured-media{position:relative;overflow:hidden;min-height:360px}
.featured-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.featured-card:hover .featured-media img{transform:scale(1.05)}
.featured-flag{position:absolute;left:0;top:1.3rem;z-index:2;background:var(--red);color:#fff;
  font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:.5rem 1.1rem}
.featured-body{padding:clamp(1.8rem,4vw,3.4rem);display:flex;flex-direction:column;justify-content:center}
.featured-body .post-meta{margin-bottom:1rem}
.featured-title{font-size:clamp(1.8rem,3.4vw,2.9rem);font-weight:300;letter-spacing:-.02em;line-height:1.08;
  color:var(--ink);transition:color .3s var(--ease)}
.featured-card:hover .featured-title{color:var(--green)}
.featured-ex{margin-top:1.1rem;color:var(--ink-soft);font-weight:300;font-size:1.06rem;line-height:1.7;max-width:50ch}
.featured-more{margin-top:1.7rem;display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.featured-more .arw{color:var(--red);transition:transform .4s var(--ease)}
.featured-card:hover .featured-more .arw{transform:translateX(6px)}
@media(max-width:860px){
  .featured-card{grid-template-columns:1fr}
  .featured-media{min-height:0;aspect-ratio:16/10}
}

/* ---------- Kachel: Kategorie-Badge auf dem Bild + Lesezeit ---------- */
.post-media{position:relative}
.post-flag{position:absolute;left:0;top:.9rem;z-index:2;background:rgba(21,32,26,.82);color:#fff;
  font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.42rem .85rem}
.post-readtime{font-size:.74rem;color:var(--ink-soft);letter-spacing:.03em;display:inline-flex;align-items:center;gap:.4rem}
.post-readtime::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--stone-deep)}

/* ---------- Lesefortschritt ---------- */
.reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--green);z-index:150;
  transition:width .08s linear}

/* ---------- Editorial Meta-Leiste (Einzelbeitrag) ---------- */
.story-meta-bar{max-width:760px;margin:0 auto clamp(1.6rem,3vw,2.4rem);display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.story-meta-left{display:flex;align-items:center;gap:.9rem;font-size:.82rem;color:var(--ink-soft);letter-spacing:.03em;flex-wrap:wrap}
.story-share{display:inline-flex;gap:.5rem;align-items:center}
.story-share .lbl{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-right:.2rem}
.story-share a,.story-share button{width:38px;height:38px;border:1.5px solid var(--line);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer;background:none;
  transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.story-share a:hover,.story-share button:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.story-share .copied{border-color:var(--green);background:var(--green);color:#fff}
.story-share svg{width:17px;height:17px}

/* ---------- Galerie als Lightbox ---------- */
.story-gallery .gitem{cursor:zoom-in}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(11,16,13,.95);display:flex;align-items:center;
  justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox-img{max-width:92vw;max-height:84vh;object-fit:contain;box-shadow:0 30px 90px -20px rgba(0,0,0,.7);
  transform:scale(.97);transition:transform .4s var(--ease)}
.lightbox.open .lightbox-img{transform:scale(1)}
.lb-btn{position:absolute;background:none;border:none;color:#fff;cursor:pointer;width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;opacity:.78;transition:opacity .3s,transform .3s}
.lb-btn:hover{opacity:1}
.lb-btn svg{width:30px;height:30px}
.lb-close{top:1rem;right:1.2rem}
.lb-prev{left:.6rem;top:50%;transform:translateY(-50%)}
.lb-next{right:.6rem;top:50%;transform:translateY(-50%)}
.lb-prev:hover{transform:translateY(-50%) translateX(-3px)}
.lb-next:hover{transform:translateY(-50%) translateX(3px)}
.lb-caption{position:absolute;bottom:1.3rem;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);
  font-size:.86rem;letter-spacing:.02em;padding:0 1rem}
.lb-count{position:absolute;top:1.3rem;left:1.4rem;color:rgba(255,255,255,.65);font-size:.8rem;letter-spacing:.12em}
@media(max-width:640px){.lb-btn{width:44px;height:44px}.lb-prev{left:.2rem}.lb-next{right:.2rem}}

/* ---------- Verwandte Beiträge ---------- */
.related{background:var(--stone)}
.related .sec-head{margin-bottom:clamp(1.8rem,4vw,2.6rem)}

/* ============================================================
   Legal-/Textseiten (Datenschutz, Impressum)
   ============================================================ */
/* Nav durchgehend solide (kein transparenter Hero) */
body.solidnav .nav{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);padding:.85rem 0}
body.solidnav .nav .brand .lg-light{opacity:0}
body.solidnav .nav .brand .lg-dark{opacity:1}
body.solidnav .nav .menu>li>a{color:var(--ink)}
body.solidnav .nav .nav-phone{color:var(--green);border-color:var(--green)}
body.solidnav .nav .nav-cta{border-color:var(--green);color:var(--green)}
body.solidnav .nav .burger span{background:var(--ink)}

/* Farbiger, kompakter Header */
.legalhero{background:var(--green);color:#fff;padding:clamp(7rem,15vh,9.5rem) 0 clamp(2.4rem,5vh,3.4rem)}
.legalhero .crumb{color:rgba(255,255,255,.85);margin-bottom:1rem}
.legalhero .crumb a{color:rgba(255,255,255,.85)}
.legalhero .crumb a:hover{color:#fff}
.legalhero .crumb .sep{color:var(--red)}
.legalhero h1{font-size:clamp(2rem,6vw,4rem);font-weight:300;letter-spacing:-.025em;line-height:1.05;color:#fff;overflow-wrap:break-word;hyphens:auto}
.legalhero-tag{margin-top:.9rem;font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.85)}
/* Buttons in Rechtstexten: nicht als grüner Textlink, sondern als Button anzeigen */
.story-body a.btn,.story-body a.btn:hover{color:#fff;text-decoration:none}

/* Listen in gleicher Schrift wie der Fliesstext */
.story-body ul,.story-body ol{margin:0 0 1.3rem;padding-left:1.35rem}
.story-body li{color:var(--ink-soft);font-weight:300;font-size:1.08rem;line-height:1.75;margin-bottom:.5rem}
.story-body li strong{color:var(--ink);font-weight:600}
.story-body ul li::marker{color:var(--red)}

/* Legal: kleinere, ruhigere Abschnittstitel */
.story-body.legal h2{font-size:clamp(1.2rem,1.9vw,1.45rem);font-weight:600;letter-spacing:0;margin-top:2.4rem}
.story-body.legal h3{font-size:1.05rem;font-weight:600;color:var(--ink);margin-top:1.5rem}
.story-body.legal .lead{font-size:1.08rem}
.legal-stand{margin-top:2rem;color:var(--ink-soft);font-size:.9rem}
@media(max-width:640px){.story-body li{font-size:1rem}}

/* Bild mit Bildunterschrift im Fliesstext (z. B. News-Beitrag) */
.story-figure{margin:2rem 0}
.story-figure img{width:100%;border-radius:4px;display:block}
.story-figure figcaption{margin-top:.7rem;font-size:.9rem;line-height:1.5;color:var(--ink-soft);font-weight:300;font-style:italic}

/* Medien-Callout im Fliesstext (z. B. Verweis auf TV-Beitrag) */
.story-cta{max-width:760px;margin:2.2rem auto;background:var(--stone);border-left:3px solid var(--green);
  border-radius:5px;padding:1.6rem 1.8rem}
.story-cta-label{display:block;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);margin-bottom:.6rem}
.story-cta p{margin:0 0 1.1rem;color:var(--ink-soft);font-weight:300;font-size:1.05rem;line-height:1.6}