/* Light collection theme: the templates page and all 15 demos share the calm tone of the homepage. Each demo keeps its own accent. */
.templates-intro h1 em{font-family:inherit;font-style:normal;color:inherit}
.templates-toolbar button[aria-pressed=true]{background:#16212b}
.templates-toolbar button:hover{border-color:#8b97a5}
.tp-arrow{border-color:#c5ccd4}.tp-arrow:hover{background:#16212b}
.templates-more{border-color:#c5ccd4}.templates-more:hover{background:#f3f5f8}
.templates-outro .pill{background:#244cbd;border-color:#244cbd}
.template-card a:focus-visible,.templates-toolbar button:focus-visible,.templates-more:focus-visible{outline-color:#4e79dd}
.template-visual .tp-window{box-shadow:0 24px 50px -18px #16212b33,0 2px 6px #16212b0f}
/* Demo shell */
.template-demo-page{color-scheme:light}
.template-demo-page .demo-bar{height:56px;border-bottom:1px solid #16212b14;background:#fff}
.template-demo-page .demo-bar>span{letter-spacing:.08em;color:#5b6876}
.template-demo-page .demo-bar b{background:#eef1f5;color:#16212b;border-radius:4px}
.template-demo-page .demo-bar a:last-child{color:#213f74;border-bottom:1px solid #b2bdc9;padding-bottom:2px}
.template-demo-page .demo-bar a:last-child:hover{color:#244cbd;border-color:#244cbd}
.template-demo-page .demo-intro>div>span{letter-spacing:.08em;opacity:1;color:#6b7684}
.template-demo-page .demo-intro h1{letter-spacing:-.045em;font-weight:500}
.template-demo-page .demo-intro>p{opacity:1;color:#5b6876;font-size:14px}
.template-demo-page .demo-foot{color:#6b7684}
.template-demo-page .px-btn{border-radius:6px;min-height:44px;padding:10px 18px;font-size:13px!important;background:var(--px-ink);transition:background .2s,transform .2s}
.template-demo-page .px-btn:hover{background:var(--px-accent);transform:translateY(-1px)}
.template-demo-page .px-btn.secondary{background:#fff;border:1px solid #cfd6de;color:#2d3a48}
.template-demo-page .px-btn.secondary:hover{background:#f3f5f8;transform:none}
.template-demo-page .px-metrics article{border-color:#e2e7ec;border-radius:10px;background:#fff}
.template-demo-page .px-metrics strong{font-weight:500;letter-spacing:-.04em}
.template-demo-page .nx-metric-mark{display:none}
.template-demo-page .ix-panel{border-color:#e2e7ec;border-radius:10px;background:#fff}
/* Analytics chart */
.nx-overview{background:#fff;border:1px solid #e2e7ec;border-radius:10px;padding:22px 24px 16px;margin-bottom:20px}
.nx-chart-header{display:flex;justify-content:space-between;align-items:start;gap:20px}
.nx-chart-header>div>span{display:block;font-size:11px;letter-spacing:.08em;color:#6b7684}
.nx-chart-header h3{font-size:16px;font-weight:600;letter-spacing:-.02em;margin:6px 0 0}
.nx-unit{font-size:12px;border:1px solid #d9dfe6;border-radius:5px;color:#5b6876;padding:5px 9px;white-space:nowrap}
.nx-opening{font-size:11px;color:#5b6876;display:grid;gap:5px;flex-shrink:0}
.template-demo-page .nx-opening input{width:140px;border:1px solid #cfd6de;border-radius:6px;padding:8px 10px;background:#fff;color:#16212b;font:inherit;font-size:13px}
.nx-bars{height:160px;display:flex;gap:18px;align-items:stretch;padding-top:18px;margin-top:10px;background:repeating-linear-gradient(0deg,transparent 0,transparent 31px,#16212b0d 32px,#16212b0d 33px)}
.nx-bar-item{min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;gap:9px}
.nx-bar-track{position:relative;min-height:0;width:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:7px}
.nx-bar-track>i{display:block;height:calc(var(--bar-size) * .72);min-height:2px;width:clamp(14px,4vw,46px);background:var(--px-accent);opacity:.55;border-radius:4px 4px 0 0;transition:opacity .2s}
.nx-bar-item:first-child .nx-bar-track>i,.nx-bar-item:hover .nx-bar-track>i{opacity:1}
.nx-bar-track>span{font-size:12px;color:#16212b;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.nx-bar-item>b{font-size:11px;line-height:1.3;font-weight:400;color:#5b6876;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.nx-chart-note{font-size:12px;line-height:1.6;color:#6b7684;margin:14px 0 0}
.nx-line svg{display:block;width:100%;height:150px;margin-top:10px}
.nx-line svg path[stroke-dasharray]{stroke:#16212b1a}
.nx-line svg path[fill^="url"]{fill:var(--px-accent);opacity:.12}
.nx-line svg path[stroke^="url"]{stroke:var(--px-accent)}
.nx-line svg circle{fill:var(--px-ink)}
.nx-line-labels{display:flex;justify-content:space-between;gap:16px;margin-top:8px}
.nx-line-labels>div{display:flex;gap:10px;align-items:baseline}
.nx-line-labels span{font-size:11px;color:#6b7684}
.nx-line-labels b{font-size:12px;color:#16212b;font-weight:600;font-variant-numeric:tabular-nums}
@media(max-width:760px){.nx-overview{padding:18px 16px 14px;border-radius:8px}.nx-chart-header{flex-wrap:wrap;gap:12px}.nx-bars{gap:9px;height:140px;padding-top:12px}.nx-bar-track>span{font-size:10px}.nx-bar-item>b{font-size:10px}.nx-bar-track>i{width:26px}.nx-line svg{height:120px}.nx-line-labels{flex-wrap:wrap;gap:8px 14px}.nx-line-labels>div{display:block}.nx-line-labels b{display:block;margin-top:3px}}
@media(prefers-reduced-motion:reduce){.template-demo-page .px-btn,.nx-bar-track>i{transition:none}.template-demo-page .px-btn:hover{transform:none}}
/* Curated collection: the connected workspace joins the three template cards. */
.tone-petrol{--tp-bg:#dfe9eb;--tp-ink:#203e48;--tp-accent:#245866}
.template-visual .tp-window-screen{padding:0;display:block;overflow:hidden}
.tp-window-screen .home-neon-preview{background:#fff;color:#193847;aspect-ratio:auto;max-height:none;height:100%;padding:22px;display:flex;flex-direction:column}
.tp-window-screen .hn-head{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:600}
.tp-window-screen .hn-head span{font-size:10px;align-self:center;color:#5a727b;font-weight:500}
.tp-window-screen .hn-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-bottom:1px solid #dbe6e8;padding:16px 0}
.tp-window-screen .hn-kpis small{display:block;font-size:10px;color:#607b83}
.tp-window-screen .hn-kpis strong{font-size:20px;letter-spacing:-.04em;display:block;margin-top:4px}
.tp-window-screen .hn-chart{flex:1;padding-top:12px;min-height:0}
.tp-window-screen .hn-chart>span{font-size:11px;color:#59737c}
.tp-window-screen .hn-bars{height:70px;display:flex;align-items:end;gap:18px;padding:10px 12px 0}
.tp-window-screen .hn-bars>div{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;gap:4px;align-items:center}
.tp-window-screen .hn-bars b{font-size:10px;font-weight:500}
.tp-window-screen .hn-bars i{width:100%;max-width:70px;background:#8fb0ba;border-radius:3px 3px 0 0;min-height:3px}
.tp-window-screen .hn-bars>div:last-child i{background:#245866}
.tp-window-screen .hn-labels{display:flex;justify-content:space-around;font-size:10px;padding-top:4px}
.tp-window-screen .hn-note{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#627d85;border-top:1px solid #e3eaed;padding-top:10px;margin-top:10px}
.tp-window-screen .hn-note b{font-weight:400}
.template-info p{max-width:none}

/* Showcase cards on the Beispiele page */
.tone-wood{--tp-bg:#eadfcf;--tp-ink:#4a3015;--tp-accent:#8a5a2b}
.tone-cherry{--tp-bg:#efd9dc;--tp-ink:#5a1f28;--tp-accent:#8d2f3b}
.tone-moss{--tp-bg:#d9e6dd;--tp-ink:#1f4a36;--tp-accent:#2f6a4f}
.template-visual:has(.sp-screen){aspect-ratio:auto;padding:26px}
.tp-window-screen .sp-screen{min-height:0}
.showcase-facts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font-size:13px;color:#2d3a48}
.showcase-facts li{position:relative;padding-left:16px}
.showcase-facts li::before{content:'';position:absolute;left:0;top:.7em;width:8px;height:1px;background:#244cbd}
.showcase-card .template-info h3{font-size:24px}
.showcase-card .template-info h3 span{display:block;margin:6px 0 0;font-size:13px}
@media(max-width:800px){.template-visual:has(.sp-screen){padding:14px}}