/* PlantaeLight relaunch — additions on top of template.css (Florian's design, kept verbatim).
   1. utilities that replace the template's style="" attributes (strict CSP: style-src 'self')
   2. data-slot states for assets/js/pl-data.js
   3. components the template didn't have: tier prices/CTAs, shop cards, planner slot, 404 */

/* hidden always wins: data hooks show and hide elements with [hidden] */
[hidden]{display:none!important}

/* ---------- 1. utilities ---------- */
.mt-0{margin-top:0!important}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}.mt-16{margin-top:16px}
.mt-20{margin-top:20px}.mt-22{margin-top:22px}.mt-24{margin-top:24px}.mt-28{margin-top:28px}.mt-32{margin-top:32px}
.mt-36{margin-top:36px}.mt-40{margin-top:40px}
.mw-76ch{max-width:76ch}.as-end{align-self:end}.ink-2{color:var(--ink-2)}
/* launcher tile stagger (template: style="--i:n") */
.lp-grid .i0{--i:0}.lp-grid .i1{--i:1}.lp-grid .i2{--i:2}.lp-grid .i3{--i:3}.lp-grid .i4{--i:4}.lp-grid .i5{--i:5}.lp-grid .i6{--i:6}
.lp-grid .i7{--i:7}.lp-grid .i8{--i:8}.lp-grid .i9{--i:9}.lp-grid .i10{--i:10}.lp-grid .i11{--i:11}.lp-grid .i12{--i:12}.lp-grid .i13{--i:13}
/* schematic phase mixes on the home page (illustration, template: style="--c:…;flex:n") */
.mx-db{--c:#2F5BD3}.mx-tg{--c:#3FA34D}.mx-hr{--c:#D7262E}.mx-fr{--c:#7A1424}
.f1{flex:1}.f2{flex:2}.f3{flex:3}.f4{flex:4}.f5{flex:5}
/* channel swatches: colour comes from the catalog (data-pl-color sets --c) */
.ch i{background:var(--c,var(--line))}
.ap-legend i{background:var(--c,var(--line))}

/* ---------- 2. data slots ---------- */
html[data-pl-state="loading"] [data-pl]:empty::before{content:"";display:inline-block;width:2.4ch;height:.78em;border-radius:2px;background:currentColor;opacity:.12;vertical-align:-.05em;animation:pl-pulse 1.2s ease-in-out infinite}
html:not([data-pl-state="loading"]) [data-pl]:empty{display:none}
@keyframes pl-pulse{50%{opacity:.04}}
@media(prefers-reduced-motion:reduce){html[data-pl-state="loading"] [data-pl]:empty::before{animation:none}}
.dbtn,.dl-pair,.sio-list,.svc .svc-a{display:contents}
a[data-pl-href]:not([href]){cursor:default}
.pl-fallback{margin-top:24px;display:grid;gap:20px;justify-items:start}
.pl-alert{border-left:3px solid #FFB547;background:var(--surface);padding:14px 18px;margin:0 0 24px}
/* store badges: a link without a target (loading / failed) is a plain image; an empty target = "in preparation" */
.badges a.st{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none}
.badges a.st:not([href]) img{opacity:.6}
.badges a.st[data-soon] img{opacity:.55;filter:grayscale(1)}
.st-soon{font:500 11px var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.hx-app .st-soon,.lp-stores .st-soon{color:inherit;opacity:.7}

/* ---------- 3. components ---------- */
/* social icons: which networks come from the backend; glyphs from the sprite */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sio-list .sio svg{fill:currentColor;stroke:none}
button.sio{border:0;cursor:pointer;font:inherit;padding:0}
.lp-soc>button.sio svg,.ft-soc>button.sio svg{fill:none;stroke:currentColor;stroke-width:1.8}
.ft-lk{background:none;border:0;padding:4px 0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ft-lk:hover{color:var(--lime)}
/* § 312k BGB "Verträge hier kündigen": readable and clearly a link, not faint footer text. */
.ft-cancel{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ft-cancel:hover{color:var(--lime)}

/* tiers */
.bx-tp{font:700 clamp(20px,1.8vw,24px)/1.2 var(--sans);letter-spacing:-.02em;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.bx-tp small{font:500 12px var(--mono);letter-spacing:.04em;color:var(--ink-3)}
.bx-t{display:flex;flex-direction:column}
.bx-t>p:last-child{margin-top:auto;padding-top:14px}
.bx-cta{font-size:14px}

/* comparison / spec tables rendered from data */
.tbl .yes{font-weight:700;color:var(--accent-ink)}
.tbl .no{color:var(--ink-3)}
:root[data-theme="light"] .tbl .yes{color:#4E6A1C}

/* shop */
.sh-grid{margin-top:8px}
.sh-card .sh-img{aspect-ratio:4/3;display:grid;place-items:center;background:var(--panel);border-bottom:1px solid var(--line);overflow:hidden}
.sh-card .sh-img>span{display:contents}
.sh-card .sh-img img[data-pl-src]{width:100%;height:100%;object-fit:cover}
.sh-ph{display:grid!important;place-items:center;gap:10px;color:var(--ink-3);font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.sh-ph img{width:84px;height:84px}
.sh-use{color:var(--ink-2);margin-top:-6px}
.sh-price{font:700 26px/1.2 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sh-state{margin-top:22px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.sh-box-art{display:grid;place-items:center;min-height:200px}
.sh-box-art img{opacity:.9}
.pg-h1 .fq{display:inline-block;vertical-align:-.12em;margin-right:.25em;height:.9em;width:auto}

/* planner slot (WP-F mounts into #planner-root) */
.pl-mount{min-height:320px;border:1px dashed var(--line);display:grid;place-items:center;padding:32px;text-align:center}
.pl-soon{max-width:760px}

/* get started */
.gs-or{align-self:center;color:var(--ink-3);font-size:14px}

/* phone carousel of app screens: side cards peek past the edge, don't let them widen the page */
.sec.dark,.pm-app{overflow-x:clip}

/* recipe card: head row and data rows are two lists */
.recipe .recipe-rows{border-top:1px solid var(--line)}

/* contact buttons that look like the template's text links */
.svc .copy{margin-top:auto}

/* 404 */
.e404{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px 16px}
.e404-m{max-width:640px;display:grid;justify-items:center;gap:14px}
.e404-m .row{justify-content:center}

/* ---------- Grow Guide: Grow Notes blog ---------- */
.gn-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.gn-cats button{font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;min-height:40px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer}
.gn-cats button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.gn-cats button:hover{border-color:var(--ink-2)}
.gn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.gn-sec .gn-grid>.gn-card:not([hidden]):first-of-type{grid-column:span 2}
.gn-sec .gn-grid>.gn-card:first-of-type .gn-img{aspect-ratio:16/9}
.gn-sec .gn-grid>.gn-card:first-of-type h3{font-size:clamp(24px,2.4vw,34px)}
@media(max-width:1000px){.gn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.gn-grid{grid-template-columns:minmax(0,1fr)}.gn-sec .gn-grid>.gn-card:not([hidden]):first-of-type{grid-column:auto}}
.gn-card{background:var(--surface);border:1px solid var(--line);display:flex;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.gn-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(16,19,22,.45)}
@media(prefers-reduced-motion:reduce){.gn-card,.gn-card:hover{transition:none;transform:none}}
.gn-link{display:flex;flex-direction:column;width:100%;color:inherit;text-decoration:none}
.gn-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--panel);border-bottom:1px solid var(--line)}
.gn-img img{width:100%;height:100%;object-fit:cover}
.gn-tx{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;flex:1}
.gn-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.gn-meta .lbl{color:var(--accent-ink)}
:root[data-theme="light"] .gn-meta .lbl{color:#4E6A1C}
.gn-card h3{font-size:clamp(19px,1.6vw,23px);line-height:1.2;letter-spacing:-.02em}
.gn-card p{color:var(--ink-2);font-size:15.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.gn-more{margin-top:auto;padding-top:6px;font-weight:700;font-size:14px}
.gn-link:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

/* note page */
.gn-col{max-width:780px}
.gn-phead .pg-kick a{color:inherit}
.gn-k-cat:not(:empty)::before{content:" · "}
.gn-title{font-size:clamp(34px,5vw,60px)}
.gn-date{margin-top:18px;font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.gn-hero{margin:0 0 36px;aspect-ratio:3/2;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.gn-hero img{width:100%;height:100%;object-fit:cover}
.gn-body{font-size:18px;line-height:1.7}
.gn-body>*+*{margin-top:1em}
.gn-body h2,.gn-body h3,.gn-body h4{margin-top:1.6em;letter-spacing:-.02em;line-height:1.25}
.gn-body h2{font-size:28px}.gn-body h3{font-size:23px}.gn-body h4{font-size:19px}
.gn-body ul,.gn-body ol{padding-left:1.3em}
.gn-body li+li{margin-top:.4em}
.gn-body a{text-decoration:underline;text-underline-offset:3px}
.gn-body blockquote{margin-left:0;padding-left:18px;border-left:3px solid var(--accent);color:var(--ink-2)}
.gn-body .ql-align-center{text-align:center}.gn-body .ql-align-right{text-align:right}
.gn-back{margin:48px 0 8px}
.gn-gone{margin-bottom:24px}
.gn-more-grid .gn-card:first-of-type{grid-column:auto}
.gn-body,.gn-title,.gn-card h3{overflow-wrap:anywhere}