/* ===== JZ blog: magazine list, infinite scroll, reading progress (scoped: #jzb-*, .jzb-*, list page via #wrapwrap .website_blog) ===== */
:root{--jzb-bg:#0a0f1a;--jzb-card:#121a2b;--jzb-line:#ffffff14;--jzb-ink:#e9eef8;--jzb-muted:#a9b4c6;--jzb-mint:#a8e6b4}
[data-blog="9"],[data-jzb-blog="9"]{--c:#a8e6b4}   /* Deep Dives */
[data-blog="10"],[data-jzb-blog="10"]{--c:#c4a7ff} /* KI für KMU */
[data-blog="5"],[data-jzb-blog="5"]{--c:#7fd3ff}   /* News */
[data-blog="8"],[data-jzb-blog="8"]{--c:#b48fd8}   /* Odoo */
[data-blog="3"],[data-jzb-blog="3"]{--c:#f07aa3}   /* WordPress */
[data-blog="4"],[data-jzb-blog="4"]{--c:#ffd27a}   /* AI */

/* ---------- hero ---------- */
#jzb-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--jzb-bg);color:#fff;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;text-align:left;--c:#a8e6b4}
#jzb-hero *,#jzb-hero *::before,#jzb-hero *::after{box-sizing:border-box}
#jzb-hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
#jzb-hero .jzb-wrap{max-width:1180px;margin:0 auto;padding:clamp(34px,6vh,64px) clamp(20px,4vw,40px) 26px}
#jzb-hero .jzb-head{max-width:760px}
#jzb-hero .jzb-kicker{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:999px;font:600 13px Inter,sans-serif;color:#e3e9f3;background:#121a2a;border:1px solid #ffffff1f}
#jzb-hero .jzb-kicker i{width:7px;height:7px;border-radius:50%;background:var(--jzb-mint);box-shadow:0 0 12px var(--jzb-mint)}
#jzb-hero h1{font:800 clamp(34px,min(4.6vw,6.4vh),64px)/1.04 Manrope,Inter,system-ui,sans-serif;letter-spacing:-.035em;color:#fff;margin:18px 0 12px}
#jzb-hero .jzb-grad{background:linear-gradient(100deg,#c4a7ff,#e9eef8 45%,#a8e6b4 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
#jzb-hero .jzb-lead{color:#c9d1df;font-size:clamp(15.5px,1.25vw,18px);margin:0;max-width:640px}

/* featured story */
#jzb-hero a.jzb-feat{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:0;margin-top:30px;border-radius:22px;overflow:hidden;text-decoration:none!important;color:var(--jzb-ink)!important;
  background:linear-gradient(150deg,#16203a,#0f1626);border:1px solid #ffffff17;box-shadow:0 40px 90px -40px #000,0 0 0 1px #ffffff08;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
#jzb-hero a.jzb-feat:hover{transform:translateY(-4px);box-shadow:0 50px 100px -40px color-mix(in srgb,var(--c) 45%,#000),0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
#jzb-hero .jzb-feat-txt{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3vw,40px)}
#jzb-hero .jzb-feat h2{font:800 clamp(24px,2.5vw,36px)/1.15 Manrope,Inter,sans-serif;letter-spacing:-.02em;color:#fff;margin:0}
#jzb-hero .jzb-feat p{color:var(--jzb-muted);font-size:16px;line-height:1.55;margin:0}
#jzb-hero .jzb-feat-img{position:relative;min-height:260px;background:#0a101c center/cover no-repeat;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
#jzb-hero a.jzb-feat:hover .jzb-feat-img{transform:scale(1.04)}
#jzb-hero .jzb-feat-img i{position:absolute;inset:0;background:linear-gradient(90deg,#0f1626 0,transparent 35%)}
#jzb-hero .jzb-cta{margin-top:auto;font:700 14.5px Inter,sans-serif;color:var(--c)}
#jzb-hero .jzb-cta b{display:inline-block;transition:transform .3s}
#jzb-hero a.jzb-feat:hover .jzb-cta b{transform:translateX(5px)}

/* labels + meta, shared */
.jzb-label{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font:700 11.5px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--c);
  background:color-mix(in srgb,var(--c) 14%,transparent);padding:4px 10px;border-radius:999px}
.jzb-label i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.jzb-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font:600 13px Inter,sans-serif;color:#8e9ab0}
.jzb-meta span+span::before{content:"·";margin-right:14px;color:#ffffff40}

/* chips + search */
#jzb-hero .jzb-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px}
#jzb-hero a.jzb-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font:700 14px Inter,sans-serif;color:#d6dceb!important;text-decoration:none!important;
  background:#ffffff0a;border:1px solid #ffffff1a;transition:background .25s,border-color .25s,color .25s,transform .25s}
#jzb-hero a.jzb-chip b{font-weight:700;font-size:11.5px;padding:1px 7px;border-radius:999px;background:#ffffff14;color:#aeb8ca}
#jzb-hero a.jzb-chip[data-blog]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
#jzb-hero a.jzb-chip:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c,#fff) 55%,transparent)}
#jzb-hero a.jzb-chip.on{background:#fff;color:#0a0f1a!important;border-color:#fff}
#jzb-hero a.jzb-chip.on b{background:#0a0f1a14;color:#0a0f1a}
#jzb-hero .jzb-search{margin-left:auto;display:flex;align-items:center;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:999px;padding:2px 4px 2px 14px}
#jzb-hero .jzb-search input{background:none;border:0;outline:0;color:#fff;font:500 14px Inter,sans-serif;width:180px;padding:7px 0}
#jzb-hero .jzb-search input::placeholder{color:#8e9ab0}
#jzb-hero .jzb-search button{background:none;border:0;color:#c9d1df;font-size:18px;line-height:1;padding:4px 8px;cursor:pointer}
#jzb-hero.jzb-loading .jzb-swap{opacity:.55;transition:opacity .2s}

/* ---------- list page: dark magazine grid ---------- */
#wrapwrap .website_blog:has(#jzb-hero){background:var(--jzb-bg)}
#wrapwrap .website_blog:has(#jzb-hero) > nav.navbar{display:none!important}
#wrapwrap .website_blog:has(#jzb-hero) #o_wblog_index_content{background:var(--jzb-bg)}
#wrapwrap .website_blog:has(#jzb-hero) #o_wblog_index_content > .container{max-width:1180px;padding:10px clamp(20px,4vw,40px) 70px}
#wrapwrap .website_blog:has(#jzb-hero) .alert{background:#1b2338;border-color:#ffffff1a;color:#e3e9f3}
#wrapwrap #o_wblog_posts_loop > .row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;grid-auto-flow:row dense;margin:0}
#wrapwrap #o_wblog_posts_loop > .row > div{grid-column:span 4;width:auto;max-width:none;padding:0!important;margin:0}
#wrapwrap #o_wblog_posts_loop > .row > div:has(> article[data-jzb-blog="9"]),
#wrapwrap #o_wblog_posts_loop > .row > div:has(> article[data-jzb-blog="10"]){grid-column:span 8}
#wrapwrap #o_wblog_posts_loop > .row > div.jzb-dup{display:none}

#wrapwrap .website_blog #o_wblog_posts_loop article.o_wblog_post{position:relative;display:flex;flex-direction:column;height:100%;padding:0;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#141c2e,#0f1626);border:1px solid var(--jzb-line);box-shadow:0 24px 60px -34px #000;color:var(--jzb-ink);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s,opacity .6s}
#wrapwrap .website_blog #o_wblog_posts_loop article.o_wblog_post::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--c),transparent);opacity:.9}
#wrapwrap .website_blog #o_wblog_posts_loop article.o_wblog_post:hover{--ty:-5px;border-color:color-mix(in srgb,var(--c) 45%,transparent);box-shadow:0 34px 70px -30px color-mix(in srgb,var(--c) 40%,#000)}
#wrapwrap .website_blog #o_wblog_posts_loop article.o_wblog_post > *{padding-left:20px!important;padding-right:20px!important}
#wrapwrap .website_blog #o_wblog_posts_loop article.o_wblog_post > a:first-child{padding:0!important;margin:0!important;overflow:hidden}
#wrapwrap .website_blog #o_wblog_posts_loop article .o_record_cover_container{aspect-ratio:16/9;height:auto!important;margin:0!important;border-radius:0!important;box-shadow:none!important;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
#wrapwrap .website_blog #o_wblog_posts_loop article:hover .o_record_cover_container{transform:scale(1.05)}
#wrapwrap .website_blog #o_wblog_posts_loop article .o_wblog_post_list_author{display:none!important}
#wrapwrap .website_blog #o_wblog_posts_loop article .o_blog_post_title{font:800 19px/1.28 Manrope,Inter,sans-serif!important;letter-spacing:-.01em;color:#fff!important;margin-top:16px!important}
#wrapwrap .website_blog #o_wblog_posts_loop article .o_wblog_normalize_font{color:var(--jzb-muted);font-size:14.5px;line-height:1.5}
#wrapwrap .website_blog #o_wblog_posts_loop article .o_tag{background:#ffffff0f!important;color:#c9d1df!important;font-weight:600;font-size:11px}
#wrapwrap .website_blog #o_wblog_posts_loop article time{color:#8e9ab0;font-weight:600}
#wrapwrap .website_blog #o_wblog_posts_loop article b.text-truncate a[href^="/blog/"]{background:color-mix(in srgb,var(--c) 16%,transparent)!important;color:var(--c)!important}
#wrapwrap .website_blog #o_wblog_posts_loop article > div:last-of-type{margin-top:auto;padding-bottom:14px!important}
#wrapwrap .website_blog #o_wblog_posts_loop article .jzb-rt{color:#8e9ab0;font-weight:600;padding:0 8px}
/* wide cards (Deep Dives, KI für KMU): cover left, text right */
@media (min-width:1001px){
  #wrapwrap .website_blog #o_wblog_posts_loop article.jzb-wide{display:grid;grid-template-columns:44% 1fr;grid-template-rows:1fr auto}
  #wrapwrap .website_blog #o_wblog_posts_loop article.jzb-wide .o_wblog_normalize_font.mt-2{display:none}
  #wrapwrap .website_blog #o_wblog_posts_loop article.jzb-wide > a:first-child{grid-row:1/3;grid-column:1}
  #wrapwrap .website_blog #o_wblog_posts_loop article.jzb-wide .o_record_cover_container{aspect-ratio:auto;height:100%!important;min-height:280px}
  #wrapwrap .website_blog #o_wblog_posts_loop article.jzb-wide > div{grid-column:2}
  #wrapwrap .website_blog #o_wblog_posts_loop article.jzb-wide .o_blog_post_title{font-size:24px!important;margin-top:24px!important}
  #wrapwrap .website_blog #o_wblog_posts_loop article.jzb-wide .jzb-sub{display:block}
}
#wrapwrap .website_blog #o_wblog_posts_loop article .jzb-sub{display:none;color:#c9d1df;font-size:15px;margin:8px 0 0}
/* scroll reveal */
#wrapwrap .website_blog #o_wblog_posts_loop > .row > div.jzb-pre > article{opacity:0;--ty:26px}
/* skeletons */
#wrapwrap #o_wblog_posts_loop > .row > div.jzb-skel{border-radius:18px;min-height:340px;background:linear-gradient(100deg,#121a2b 30%,#1b2540 50%,#121a2b 70%) 0 0/300% 100%;border:1px solid var(--jzb-line);animation:jzb-sk 1.3s linear infinite}
@keyframes jzb-sk{to{background-position:-150% 0}}
/* pager: hidden while infinite scroll works; shown again as fallback */
#wrapwrap .website_blog.jzb-inf #o_wblog_posts_loop_container .pagination{display:none}
#wrapwrap .website_blog:has(#jzb-hero) .pagination .page-link{background:#121a2b;border-color:#ffffff1f;color:#e3e9f3}
#wrapwrap .website_blog:has(#jzb-hero) .pagination .active .page-link{background:#fff;color:#0a0f1a}
.jzb-end{text-align:center;color:#8e9ab0;font:600 13.5px Inter,sans-serif;padding:26px 0 0}
.jzb-more-btn{display:block;margin:26px auto 0;padding:12px 22px;border-radius:12px;border:1px solid #ffffff26;background:#ffffff0d;color:#e9eef8;font:700 14px Inter,sans-serif;cursor:pointer}

@media (max-width:1000px){
  #jzb-hero a.jzb-feat{grid-template-columns:1fr}
  #jzb-hero .jzb-feat-img{min-height:200px;order:-1}
  #jzb-hero .jzb-feat-img i{background:linear-gradient(0deg,#0f1626 0,transparent 45%)}
  #wrapwrap #o_wblog_posts_loop > .row > div{grid-column:span 6}
  #wrapwrap #o_wblog_posts_loop > .row > div:has(> article[data-jzb-blog="9"]),
  #wrapwrap #o_wblog_posts_loop > .row > div:has(> article[data-jzb-blog="10"]){grid-column:span 12}
}
@media (max-width:640px){
  #wrapwrap #o_wblog_posts_loop > .row > div,
  #wrapwrap #o_wblog_posts_loop > .row > div:has(> article[data-jzb-blog]){grid-column:span 12}
  #jzb-hero .jzb-search{margin-left:0;width:100%}
  #jzb-hero .jzb-search input{width:100%}
  #jzb-hero .jzb-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  #jzb-hero .jzb-chips .jzb-search{flex:0 0 auto;width:220px}
}

/* ---------- article page ---------- */
#jzb-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:1100;pointer-events:none}
#jzb-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#c4a7ff,#7fd3ff,#a8e6b4);box-shadow:0 0 10px #a8e6b499}
#o_wblog_post_main[data-jzb-rt]{position:relative}
.jzb-rtag{margin-left:10px;padding:2px 9px;border-radius:999px;background:var(--jz-mist,#eef4ef);color:var(--jz-green-deep,#284d31);font-weight:700;font-size:.85em}
.jzb-toc{font-family:Inter,system-ui,sans-serif}
.jzb-toc b{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#5d6b61;margin-bottom:10px}
.jzb-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid #dbe6dd}
.jzb-toc li{margin:0!important}
.jzb-toc a{display:block;padding:5px 0 5px 14px;margin-left:-2px;border-left:2px solid transparent;color:#5d6b61!important;font-size:13.5px;line-height:1.35;text-decoration:none!important;transition:color .2s,border-color .2s}
.jzb-toc a:hover{color:#19231d!important}
.jzb-toc a.on{color:#19231d!important;font-weight:700;border-left-color:var(--c,#5f8666)}
aside.jzb-toc{position:absolute;top:48px;bottom:0;left:calc(50% + 460px);width:220px;display:none}
aside.jzb-toc > div{position:sticky;top:110px}
@media (min-width:1420px){aside.jzb-toc{display:block}.jzb-toc-inline{display:none}}
details.jzb-toc-inline{margin:0 0 26px;padding:14px 18px;border:1px solid #dbe6dd;border-radius:14px;background:#fbfdfb}
details.jzb-toc-inline summary{cursor:pointer;font-weight:700;color:#19231d;list-style:none}
details.jzb-toc-inline summary::-webkit-details-marker{display:none}
details.jzb-toc-inline summary::after{content:" ▾";color:#5d6b61}
details.jzb-toc-inline[open] summary{margin-bottom:10px}
details.jzb-toc-inline b{display:none}
/* keep reading */
#jzb-more{background:var(--jzb-bg);color:#fff;font-family:Inter,system-ui,sans-serif}
#jzb-more .jzb-more-in{max-width:1180px;margin:0 auto;padding:56px clamp(20px,4vw,40px) 60px}
#jzb-more .jzb-more-h{font:800 clamp(26px,3vw,36px) Manrope,Inter,sans-serif;letter-spacing:-.02em;color:#fff;margin:0 0 22px}
#jzb-more .jzb-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
#jzb-more a.jzb-mcard{text-decoration:none!important;display:grid;grid-template-columns:42% 1fr;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--jzb-ink);background:linear-gradient(160deg,#141c2e,#0f1626);border:1px solid var(--jzb-line);transition:transform .35s,border-color .35s,box-shadow .35s}
#jzb-more a.jzb-mcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 45%,transparent);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--c) 40%,#000)}
#jzb-more .jzb-mimg{min-height:190px;background:#0a101c center/cover no-repeat}
#jzb-more .jzb-mtxt{display:flex;flex-direction:column;gap:8px;padding:18px 20px}
#jzb-more .jzb-mtxt b{font:800 18px/1.3 Manrope,Inter,sans-serif;color:#fff}
#jzb-more .jzb-mtxt em{font-style:normal;color:var(--jzb-muted);font-size:14px;line-height:1.45}
#jzb-more .jzb-mtxt small{margin-top:auto;color:#8e9ab0;font-weight:600}
#jzb-more a.jzb-more-all{display:inline-block;margin-top:24px;color:var(--jzb-mint);font-weight:700;text-decoration:none}
#jzb-more ~ #o_wblog_post_footer{display:none}
@media (max-width:800px){#jzb-more .jzb-more-grid{grid-template-columns:1fr}#jzb-more a.jzb-mcard{grid-template-columns:1fr}#jzb-more .jzb-mimg{min-height:170px}}

@media (prefers-reduced-motion:reduce){
  #jzb-hero *,#wrapwrap .website_blog #o_wblog_posts_loop article,#jzb-more *{transition:none!important;animation:none!important}
  #wrapwrap .website_blog #o_wblog_posts_loop > .row > div.jzb-pre > article{opacity:1;--ty:0}
}
/* single-blog pages of the "wide" series (Deep Dives, KI für KMU): two upright cards per row instead of wide cards next to an empty column */
#wrapwrap .website_blog:has(#jzb-hero[data-blog="9"]) #o_wblog_posts_loop > .row > div,
#wrapwrap .website_blog:has(#jzb-hero[data-blog="10"]) #o_wblog_posts_loop > .row > div{grid-column:span 6}
#wrapwrap .website_blog:has(#jzb-hero[data-blog="9"]) #o_wblog_posts_loop article.jzb-wide,
#wrapwrap .website_blog:has(#jzb-hero[data-blog="10"]) #o_wblog_posts_loop article.jzb-wide{display:flex}
#wrapwrap .website_blog:has(#jzb-hero[data-blog="9"]) #o_wblog_posts_loop article.jzb-wide .o_record_cover_container,
#wrapwrap .website_blog:has(#jzb-hero[data-blog="10"]) #o_wblog_posts_loop article.jzb-wide .o_record_cover_container{aspect-ratio:16/9;height:auto!important;min-height:0}
@media (max-width:640px){
  #wrapwrap .website_blog:has(#jzb-hero[data-blog]) #o_wblog_posts_loop > .row > div{grid-column:span 12}
}
/* Odoo's filter header ("9 Articles · AI ×") inside the grid: full-width slim line instead of a card cell; hidden where a chip already shows the filter */
#wrapwrap #o_wblog_posts_loop > .row > div:not(:has(> article)){grid-column:1/-1!important;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 2px!important}
#wrapwrap #o_wblog_posts_loop > .row > div:not(:has(> article)) .h4{margin:0!important;font:700 15px Inter,sans-serif;color:#c9d1df}
#wrapwrap #o_wblog_posts_loop > .row > div:not(:has(> article)) > span{margin:0!important;background:#ffffff0d!important;border:1px solid #ffffff1f!important;color:#e3e9f3!important;border-radius:999px!important;padding:2px 4px 2px 12px!important}
#wrapwrap #o_wblog_posts_loop > .row > div:not(:has(> article)) > span a{color:#c9d1df!important}
#wrapwrap #o_wblog_posts_loop > .row > div:not(:has(> article)) hr{display:none}
#wrapwrap .website_blog:has(#jzb-hero[data-blog="4"]) #o_wblog_posts_loop > .row > div:not(:has(> article)){display:none!important}
/* filtered pages (tags, search): uniform cards, three per row – no wide cards leaving empty columns */
#wrapwrap #o_wblog_posts_loop > .row:has(> div > .h4) > div:has(> article){grid-column:span 4!important}
#wrapwrap .website_blog #o_wblog_posts_loop > .row:has(> div > .h4) article.jzb-wide{display:flex}
#wrapwrap .website_blog #o_wblog_posts_loop > .row:has(> div > .h4) article.jzb-wide .o_record_cover_container{aspect-ratio:16/9;height:auto!important;min-height:0}
#wrapwrap .website_blog #o_wblog_posts_loop > .row:has(> div > .h4) article.jzb-wide .o_blog_post_title{font-size:19px!important;margin-top:16px!important}
@media (max-width:1000px){#wrapwrap #o_wblog_posts_loop > .row:has(> div > .h4) > div:has(> article){grid-column:span 6!important}}
@media (max-width:640px){#wrapwrap #o_wblog_posts_loop > .row:has(> div > .h4) > div:has(> article){grid-column:span 12!important}}