/* New header + mega menu (homepage test). Self-contained, prefix nm-. */
:root{--nm-green:#30ad9c;--nm-green-d:#258d7f;--nm-tint:#e9f6f3;--nm-ink:#172a3a;--nm-mute:#5b6b78;--nm-line:#e6ebee;--nm-h:76px}
.nm,.nm *{box-sizing:border-box}
.nm{position:sticky;top:0;z-index:2147483000;background:#fff;border-bottom:1px solid var(--nm-line);font-family:"Montserrat-regular",Montserrat,Arial,sans-serif;color:var(--nm-ink)}
.nm a{color:inherit;text-decoration:none}
.nm-bar{max-width:1560px;margin:0 auto;padding:0 clamp(24px,5vw,96px);height:var(--nm-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.nm-logo img{display:block;width:62px;height:62px}
.nm-nav{display:flex;align-items:center;gap:6px}
.nm-link{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border:0;background:none;font:inherit;font-size:19px;letter-spacing:.01em;color:var(--nm-ink);cursor:pointer;border-radius:10px;transition:color .15s,background .15s}
.nm-link:hover,.nm-link:focus-visible,.nm-item.open>.nm-link{color:var(--nm-green);background:var(--nm-tint)}
.nm-link svg{width:14px;height:14px;transition:transform .2s}
.nm-item.open>.nm-link svg{transform:rotate(180deg)}
.nm-cta{margin-left:12px;padding:15px 34px;border-radius:999px;background:var(--nm-green);color:#fff!important;font-family:"Montserrat-bold",Montserrat,Arial,sans-serif;font-size:16px;transition:background .15s,transform .15s}
.nm-cta:hover{background:var(--nm-green-d);transform:translateY(-1px)}
.nm-tel{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;font-size:15px;color:var(--nm-mute)}
.nm-tel svg{width:18px;height:18px}
.nm-item{position:static}
/* mega panel */
.nm-mega{position:absolute;left:50%;top:calc(100% + 6px);width:min(1300px,calc(100vw - 48px));max-height:calc(100vh - var(--nm-h) - 90px);overflow:auto;transform:translate(-50%,8px);background:#fff;border-radius:28px;box-shadow:0 30px 80px -20px rgba(23,42,58,.3),0 0 0 1px rgba(23,42,58,.04);padding:36px 52px 32px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s}
.nm-item.open>.nm-mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nm-h{margin:0 0 16px;font-family:"Montserrat-bold",Montserrat,Arial,sans-serif;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--nm-green)}
.nm-core{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(2,auto);gap:10px 40px;padding-bottom:26px;border-bottom:1px solid var(--nm-line)}
.nm-ci{display:flex;align-items:center;gap:18px;border-radius:16px;padding:3px;transition:background .15s}
.nm-ci:hover,.nm-ci:focus-visible{background:var(--nm-tint)}
.nm-ico{flex:none;width:54px;height:54px;border-radius:14px;background:var(--nm-tint);display:grid;place-items:center}
.nm-ico img{max-width:38px;max-height:32px;width:auto;height:auto;object-fit:contain}
.nm-jtl{display:inline-grid;place-items:center;width:36px;height:31px;border-radius:7px;background:var(--nm-green);color:#fff;font-family:"Montserrat-bold",Montserrat,Arial,sans-serif;font-size:15px;letter-spacing:-.04em}
.nm-cn{font-family:"Montserrat-bold",Montserrat,Arial,sans-serif;font-size:16px;white-space:nowrap}
.nm-arr{width:28px;height:12px;flex:none;color:var(--nm-green);transition:transform .15s}
.nm-ci:hover .nm-arr,.nm-alink:hover .nm-arr{transform:translateX(5px)}
.nm-row{display:grid;grid-template-columns:1fr 230px;gap:0;padding-top:30px}
.nm-more{padding-right:24px}
.nm-more .nm-h,.nm-all .nm-h{margin-bottom:18px}
.nm-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px 28px}
.nm-tile{min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 2px;border-radius:14px;text-align:center;font-family:"Montserrat-bold",Montserrat,Arial,sans-serif;font-size:13px;overflow-wrap:break-word;line-height:1.35;color:var(--nm-ink);transition:background .15s,color .15s}
.nm-tile:hover,.nm-tile:focus-visible{background:var(--nm-tint);color:var(--nm-green-d)}
.nm-ti{height:62px;display:grid;place-items:center;color:var(--nm-ink)}
.nm-ti svg{width:56px;height:56px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nm-ti img{width:56px;height:56px;object-fit:contain}
.nm-mono{filter:brightness(0)}
.nm-txt{display:grid;place-items:center;font-family:"Montserrat-bold",Montserrat,Arial,sans-serif;color:var(--nm-ink);line-height:1}
.nm-g{font-size:72px;font-family:Montserrat-regular,Arial,sans-serif;height:62px;padding-bottom:12px}
.nm-p{width:56px;height:56px;border-radius:10px;background:var(--nm-ink);color:#fff;font-size:36px}
.nm-wp{width:56px;height:56px;border-radius:50%;border:4px double var(--nm-ink);font:700 32px Georgia,"Times New Roman",serif}
.nm-am{font-size:64px;font-family:Arial,sans-serif;font-weight:700;padding-bottom:8px}
.nm-all{padding-left:30px;border-left:1px solid var(--nm-line)}
.nm-alink{display:flex;align-items:center;gap:12px;font-family:"Montserrat-bold",Montserrat,Arial,sans-serif;font-size:16px;line-height:1.1;padding-top:6px}
.nm-alink span{max-width:120px}
.nm-badges{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:30px;padding-top:26px}
.nm-badges img{height:52px;width:auto;max-width:150px;object-fit:contain}
.nm-mleft,.nm-mcta,.nm-close{display:none}
.nm-burger{display:none;width:48px;height:48px;border:0;border-radius:12px;background:var(--nm-tint);cursor:pointer;position:relative}
.nm-burger span{position:absolute;left:13px;right:13px;height:2.5px;border-radius:2px;background:var(--nm-ink);transition:transform .2s,opacity .2s,top .2s}
.nm-burger span:nth-child(1){top:16px}.nm-burger span:nth-child(2){top:23px}.nm-burger span:nth-child(3){top:30px}
.nm.open .nm-burger span:nth-child(1){top:23px;transform:rotate(45deg)}
.nm.open .nm-burger span:nth-child(2){opacity:0}
.nm.open .nm-burger span:nth-child(3){top:23px;transform:rotate(-45deg)}
.nm a:focus-visible,.nm button:focus-visible{outline:3px solid var(--nm-green);outline-offset:2px}
@media (max-width:1100px){.nm-grid{grid-template-columns:repeat(4,1fr)}.nm-mega{padding:30px 32px 26px}.nm-cn{font-size:16px}.nm-row{grid-template-columns:1fr}.nm-all{padding:22px 0 0;border:0}}
/* tablet + mobile: header with burger/phone, centred logo, Kontakt; full-screen menu */
@media (max-width:980px){
  :root{--nm-h:84px}
  .nm-bar{display:grid;grid-template-columns:1fr auto 1fr;padding:0 18px;gap:8px}
  .nm-mleft{display:flex;align-items:center;gap:18px}
  .nm-burger{display:block;width:44px;height:44px;border-radius:0;background:none;flex:none}
  .nm-burger span{left:7px;right:7px;height:3px;border-radius:2px;background:#111}
  .nm-burger span:nth-child(1){top:12px}.nm-burger span:nth-child(2){top:20.5px}.nm-burger span:nth-child(3){top:29px}
  .nm.open .nm-burger span:nth-child(1),.nm.open .nm-burger span:nth-child(3){top:20.5px}
  .nm-mtel{display:grid;place-items:center;width:34px;height:34px;color:#111}
  .nm-mtel svg{width:30px;height:30px}
  .nm-logo{justify-self:center}
  .nm-logo img{width:68px;height:68px}
  .nm-mcta{display:inline-block;justify-self:end;padding:15px 28px;border-radius:999px;background:#69cf9c;color:#fff;font-size:17px;box-shadow:0 8px 24px rgba(105,207,156,.55)}
  .nm-nav{position:fixed;inset:0;z-index:2;flex-direction:column;align-items:stretch;gap:0;padding:96px 22px 40px;background:#fff;overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);visibility:hidden;transition:transform .25s,visibility .25s}
  .nm.open .nm-nav{transform:none;visibility:visible}
  .nm-close{display:grid;place-items:center;position:fixed;top:0;right:0;width:64px;height:64px;border:0;background:var(--nm-green);color:#fff;cursor:pointer;z-index:3}
  .nm-close svg{width:30px;height:30px}
  .nm-item{order:1}
  .nm-trigger{display:none}
  .nm-cta{display:none}
  .nm-nav>.nm-link{order:2;width:100%;justify-content:space-between;padding:16px 4px;font-size:17px;border-radius:0;border-bottom:1px solid var(--nm-line);background:none!important}
  .nm-nav>.nm-link:first-of-type{margin-top:26px;border-top:1px solid var(--nm-line)}
  .nm-mega{position:static;width:auto;max-height:none;overflow:visible;transform:none!important;display:block;opacity:1;visibility:visible;box-shadow:none;border-radius:0;padding:0}
  .nm-h{margin-bottom:14px;font-size:12px}
  .nm-core{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-template-rows:none;gap:20px 30px;padding-bottom:0;border:0}
  .nm-core+.nm-row{border-top:0}
  .nm-core>.nm-h{display:none}
  .nm-ci{flex-direction:column;align-items:center;justify-content:center;gap:0;padding:26px 8px;min-height:112px;background:var(--nm-tint);border-radius:0}
  .nm-ci:hover{background:var(--nm-tint)}
  .nm-ico{background:none;width:auto;height:64px}
  .nm-ico img{max-width:76px;max-height:64px}
  .nm-jtl{width:84px;height:60px;font-size:34px;border-radius:9px}
  .nm-cn{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}  /* name hidden visually, kept for screen readers */
  .nm-arr{display:none}
  .nm-row{display:block;padding-top:34px}
  .nm-more{padding:0}
  .nm-more>.nm-h{display:none}
  .nm-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 8px}
  .nm-tile{font-size:13px;gap:10px;padding:0}
  .nm-ti{height:64px}.nm-ti svg,.nm-ti img{width:56px;height:56px}
  .nm-g{font-size:72px;height:64px}.nm-p,.nm-wp{width:56px;height:56px;font-size:34px}.nm-wp{font-size:32px;border-width:4px}.nm-am{font-size:64px}
  .nm-all{padding:26px 0 0;border:0}
  .nm-all .nm-h{display:none}
  .nm-alink{font-size:17px}
  .nm-alink span{max-width:none}
  .nm-alink span::after{content:" \2192"}
  .nm-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px;align-items:center;margin-top:30px;padding-top:0}
  .nm-badges img{height:auto;width:100%;max-width:none;max-height:64px;object-fit:contain}
}
@media (max-width:560px){.nm-grid{gap:20px 10px}.nm-tile{font-size:11px;letter-spacing:-.01em}.nm-ti{height:48px}.nm-ti svg,.nm-ti img{width:42px;height:42px}.nm-g{font-size:54px;height:48px}.nm-p,.nm-wp{width:42px;height:42px;font-size:26px}.nm-am{font-size:50px}.nm-mcta{padding:13px 20px;font-size:15px}.nm-mleft{gap:12px}.nm-logo img{width:60px;height:60px}}
@media (max-width:370px){.nm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.nm *{transition:none!important}}
body.nm-lock{overflow:hidden}

.nm-trigger{color:var(--nm-green)}
.nm-trigger:hover,.nm-item.open>.nm-trigger{background:none}

/* homepage: centred section heading (QUALITATIV UND NACHHALTIG / UNSERE LEISTUNGEN FÜR SIE) */
.hd-center h2{text-align:center}
.hd-center .zkf{justify-content:center}

/* homepage footer: social icons with proper spacing */
.ft-social{display:flex!important;flex-direction:row-reverse;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 10px;float:none!important;margin:0 auto!important;padding:0!important;list-style:none}
.ft-social li{margin:0!important;padding:0!important;float:none!important;display:block!important;width:auto!important}
.ft-social li:last-child{display:none!important}
.ft-social a{display:grid!important;place-items:center;width:32px;height:32px;padding:0!important}
.ft-social a i,.ft-social a svg{font-size:20px!important;width:20px!important;height:20px!important;line-height:1}
.ft-social a i span{font-size:20px}

/* homepage footer: ProvenExpert badge under "eBakery Magazin" */
.pe-wrap{margin-top:32px}
.pe-link{position:relative;background:none;padding:0;text-align:left;color:#fff!important}
.pe-link *{color:#fff}
.pe-link svg,.pe-link svg *{fill:#ffc20e!important;color:#ffc20e}
.pe-link>span:first-child{position:absolute!important;top:0!important;left:0!important;bottom:auto!important;width:1px!important;height:1px!important;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}  /* off-screen label: was placed at a fixed page coordinate and stretched the page */

/* "Unsere Shopify Agentur Kunden" bubble section (customer photos scattered, small, responsive) */
.cb{background:linear-gradient(135deg,#2fb5a0 0%,#5f7fc0 55%,#7b4fc9 100%);color:#fff;overflow:hidden}
.cb-in{position:relative;max-width:1600px;margin:0 auto;min-height:clamp(600px,48vw,760px);display:flex;align-items:center;justify-content:center;padding:60px 24px}
.cb-field{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.cb-b{position:absolute;left:var(--dx);top:var(--dy);width:calc(var(--ds) * 1.3);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 10px 30px -8px rgba(0,0,0,.35);border:3px solid rgba(255,255,255,.55);animation:cb-float 7s ease-in-out var(--d,0s) infinite;outline:0}
.cb-b img{display:block;width:100%;height:100%;object-fit:cover}
.cb-cap{position:absolute;inset:auto 0 0 0;padding:22% 8% 12%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:linear-gradient(transparent,rgba(10,20,40,.78));opacity:0;transition:opacity .2s;font-size:clamp(9px,.85vw,13px);line-height:1.2}
.cb-cap b{font-family:"Montserrat-bold",Montserrat,Arial,sans-serif}
.cb-cap i{font-style:normal;opacity:.85;font-size:.9em}
.cb-b:hover .cb-cap,.cb-b:focus .cb-cap,.cb-b:focus-within .cb-cap{opacity:1}
.cb-txt{position:relative;z-index:1;max-width:620px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.cb-txt h2{margin:0;color:#fff;text-align:center}
.cb-txt p{margin:0;color:#fff}
@keyframes cb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:760px){
  .cb-in{flex-direction:column;justify-content:flex-start;padding:44px 20px 28px;gap:34px}
  .cb-field{position:relative;order:2;inset:auto;width:100%;aspect-ratio:1/1.2;flex:none}
  .cb-b{left:var(--mx);top:var(--my);width:calc(var(--ms) * 1.15)}
  .cb-cap{display:none}
}
@media (prefers-reduced-motion:reduce){.cb-b{animation:none}}

/* Shopify page: "Auf eigene Faust" / "Mit eBakery" tab switch */
[hidden][data-tab-panel]{display:none!important}
a.tabbtn{cursor:pointer;transition:background .15s,color .15s}
a.tabbtn.is-active{background:#000!important;color:#fff!important}
a.tabbtn:not(.is-active){background:transparent!important;color:#fff!important}
a.tabbtn:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* Shopify blog-topic cards: link, centred cover image, overlay fades out on hover (as on the live site) */
.shcards .z2w.z2x{background-position:center center!important;background-repeat:no-repeat!important}
.shcards .z26c{transition:opacity .3s,background .3s}
.shcards .sc-link{position:relative;cursor:pointer}
.shcards .sc-a{position:absolute;inset:0;z-index:3;border-radius:inherit}
.shcards .sc-link:hover>.z26c,.shcards .sc-link:focus-within>.z26c{opacity:0!important}
.shcards .sc-a:focus-visible{outline:3px solid #fff;outline-offset:-6px}

/* core service tile: SEO / GEO icon */
.nm-ico svg.nm-seo{width:30px;height:30px;stroke:var(--nm-green);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:980px){.nm-ico svg.nm-seo{width:52px;height:52px}}

/* Crisp SVG brand logos in white tiles (homepage menu: header.nm-hq) */
.nm-hq .nm-ico{border-radius:8px;background:#fff;box-shadow:0 8px 20px -8px rgba(30,40,90,.3),0 0 0 1px rgba(30,40,90,.05)}
.nm-hq .nm-ico img{width:34px;height:34px;max-width:none;max-height:none;object-fit:contain}
.nm-hq .nm-ico img[src*="odoo"]{width:44px;height:auto}
.nm-hq .nm-ti{width:64px;height:64px;margin:0 auto;border-radius:9px;background:#fff;box-shadow:0 8px 20px -8px rgba(30,40,90,.3),0 0 0 1px rgba(30,40,90,.05);transition:transform .15s,box-shadow .15s}
.nm-hq .nm-tile:hover .nm-ti,.nm-hq .nm-tile:focus-visible .nm-ti{transform:translateY(-3px);box-shadow:0 12px 24px -8px rgba(30,40,90,.35),0 0 0 1px rgba(30,40,90,.06)}
.nm-hq .nm-ti img{width:38px;height:38px;object-fit:contain}
.nm-hq .nm-ti img[src*="woocommerce"]{width:46px;height:20px}
@media (max-width:980px){
  .nm-hq .nm-ci{background:var(--nm-tint)}
  .nm-hq .nm-ico{width:auto;height:64px;background:none;box-shadow:none}
  .nm-hq .nm-ico img{width:60px;height:60px}
  .nm-hq .nm-ico img[src*="odoo"]{width:84px;height:auto}
  .nm-hq .nm-ti{width:58px;height:58px;border-radius:8px}
  .nm-hq .nm-ti img{width:34px;height:34px}
  .nm-hq .nm-ti img[src*="woocommerce"]{width:42px;height:18px}
}

/* ProvenExpert rating inside the footer (all pages) */
.pe-light{position:relative;display:inline-block}
.pe-light>span:first-child{position:absolute!important;top:0!important;left:0!important;bottom:auto!important;width:1px!important;height:1px!important;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pe-wrap2{margin-top:24px}
.pe-wrap2.pe-col{display:block;margin-top:22px}
/* stars row: centred above the text, gold (light footers) */
.pe-light{text-align:center}
.pe-light>span.z15{position:static!important;display:block!important;width:auto!important;height:auto!important;margin:0 0 6px!important;line-height:0}
.pe-light:not(.pe-imgstars)>span.z15 span{position:static!important;display:inline-block!important;width:22px!important;height:22px!important;margin:0 1px!important}
.pe-light>span.z15 svg,.pe-light>span.z15 svg path{width:22px;height:22px;fill:#ab9650!important}
.pe-light>span:last-child{display:block!important;position:static!important}
.pe-light>span.z15 img{display:block;width:22px!important;height:22px!important;max-width:none!important;object-fit:contain}

/* variant with <img> stars: first span holds the 5 stars, the other spans are overlays */
.pe-light.pe-imgstars>span.z15>span:not(:first-child){display:none!important}
.pe-light.pe-imgstars>span.z15>span:first-child{display:flex!important;position:static!important;width:auto!important;height:auto!important;overflow:visible!important;margin:0!important;justify-content:center;gap:2px}
.pe-light.pe-imgstars>span.z15 img{position:static!important;margin:0!important}

/* Flip boxes (image front, button on the back; flips on hover/focus like the live site) */
.fb-wrap{perspective:1000px}
.fb-front,.fb-back{backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .7s ease}
.fb-front{transform:rotateY(0deg)}
.fb-back{transform:rotateY(180deg)!important}
.fb-box:hover .fb-front,.fb-box:focus-within .fb-front{transform:rotateY(-180deg)}
.fb-box:hover .fb-back,.fb-box:focus-within .fb-back{transform:rotateY(0deg)!important}
@media (prefers-reduced-motion:reduce){.fb-front,.fb-back{transition:none}}

/* Vertical process timeline ("So arbeitet eBakery", Shopware page) - rebuilt from the live widget's rules */
.tl2{color:#000}
.tl2 ul{background:#fff;padding:50px 0;margin:0;list-style:none}
.tl2 ul li{background:#ffad04;position:relative;margin:0 auto;width:2px;padding-bottom:40px;list-style-type:none}
.tl2 ul li:last-child{padding-bottom:7px}
.tl2 ul li:before{content:'';background:#ffad04;position:absolute;left:50%;top:0;transform:translateX(-50%);width:50px;height:50px;border:3px solid #ffad04;border-radius:50%}
.tl2 ul li .content{background:#fff;position:relative;top:-55px;width:450px;padding:20px;border:2px solid #ffad04;box-sizing:content-box}
.tl2 ul li .content p{text-align:center;margin:0 0 .8em}
.tl2 ul li .content p:last-child{margin-bottom:0}
.tl2 ul li .content:before{content:'';background:#ffad04;position:absolute;top:75px;width:76px;height:2px}
.tl2 ul li:nth-child(odd) .content{left:100px}
.tl2 ul li:nth-child(odd) .content:before{left:-78px}
.tl2 ul li:nth-child(even) .content{left:calc(-450px - 100px - 44px)}
.tl2 ul li:nth-child(even) .content:before{right:-78px}
.tl2 ul li>span{color:#fff;position:absolute;top:15px;left:50%;transform:translateX(-50%);font-size:20px;font-weight:900;z-index:1}
.tl2 .w0p{width:0!important}
@media screen and (max-width:1100px){.tl2 ul li .content{width:calc(41vw - 44px)}.tl2 ul li:nth-child(even) .content{left:calc(-41vw - 5px)}}
@media screen and (max-width:700px){
  .tl2 ul{margin-left:5px}
  .tl2 ul li{margin-left:20px}
  .tl2 ul li .content{width:calc(100vw - 150px);left:50px!important}
  .tl2 ul li .content:before{width:30px!important;left:-32px!important;right:auto!important}
  .tl2 ul li>span{left:50%}
}

/* Contact forms: the paragraph around the submit button had a negative bottom margin, so the privacy hint below overlapped the button */
form[action="/contact.php"] .z1bp{margin-bottom:14px!important}
form[action="/contact.php"] p:has(>input[type="submit"]){margin-bottom:14px!important}

/* Referenzen page: filter buttons + card grid (matches the live portfolio plugin) */
.refcats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;margin:0 auto 30px!important;padding:0;list-style:none}
.refcats li{margin:0!important}
.refcats a{display:block;padding:10px 15px!important;border-radius:6px!important;cursor:pointer;transition:background .15s,transform .15s}
.refcats a:hover{transform:translateY(-1px)}
.refcats a.is-active{background:#d98f00!important;box-shadow:0 0 0 3px rgba(255,173,4,.35)}
.refgrid{display:flex!important;flex-wrap:wrap;justify-content:center;gap:34px 20px;transition:opacity .15s}
.refgrid.ref-loading{opacity:.4}
.refgrid .refcard{flex:0 0 calc(25% - 20px)!important;max-width:290px!important;width:auto!important;margin:0!important}
.refgrid .refcard .zi5{display:block;text-align:center}
.refgrid .refcard img{display:block;margin:0 auto 18px!important;width:85%!important;max-width:100%;height:420px!important;object-fit:cover;object-position:top;border-radius:15px!important;box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}
.refgrid .refcard h3{text-align:center;margin:0}
.refgrid .ref-empty{width:100%;text-align:center}
@media (max-width:1000px){.refgrid .refcard{flex-basis:calc(33.33% - 20px)!important}}
@media (max-width:700px){.refgrid .refcard{flex-basis:calc(50% - 20px)!important}.refgrid .refcard img{height:300px!important}}
@media (max-width:420px){.refgrid .refcard{flex-basis:100%!important}}
.refgrid .refcard,.refgrid .refcard .zi5,.refgrid .refcard .zi5>div,.refgrid .refcard .zi5>div>div{box-sizing:border-box}
.refgrid .refcard .zi5,.refgrid .refcard .zi5>div,.refgrid .refcard .zi5>div>div{width:100%}
@media (max-width:420px){.refgrid .refcard{max-width:280px!important}}

/* Magazine + category archives: card grid (the export left floated boxes of unequal height, which made gaps and wrong columns) */
.z3p.z3q.z14w{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:stretch}
.z3p.z3q.z14w>.z3o{float:none;width:auto!important;max-width:none!important;margin:0!important}
.z3p.z3q.z14w>.za6{grid-column:1/-1}
@media (max-width:1000px){.z3p.z3q.z14w{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.z3p.z3q.z14w{grid-template-columns:minmax(0,1fr)}}
.z3p.z3q.z14w>.z3o>a:first-child{display:block}
.z3p.z3q.z14w>.z3o img{display:block;width:100%!important;max-width:100%!important;height:auto;aspect-ratio:16/9;object-fit:cover}

/* Contact page hero: the white overlay had a fixed pixel width/height from the export (covered only part of the photo on wide screens) */
section.z1qr>.z23.z24.zn:first-child{left:0;top:0;right:0;bottom:0;width:100%!important;height:100%!important}

/* Author box under blog posts (same rules as the live site's custom-author-box plugin) */
.cab-box{--cab-green:#1AB078;--cab-green-dark:#12855a;--cab-green-deep:#0e6b48;display:grid;grid-template-columns:280px 1fr;margin:40px 0;border:1px solid #dcebe4;border-radius:14px;overflow:hidden;background:#fff;color:#24302a;font-family:inherit;text-align:left}.cab-box *,.cab-box *::before,.cab-box *::after{box-sizing:border-box}.cab-box--no-image{grid-template-columns:1fr}.cab-box__side{position:relative;isolation:isolate;overflow:hidden;min-height:320px;background:var(--cab-green)}.cab-box .cab-box__img{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%!important;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;object-fit:cover;object-position:center top}.cab-box__main{display:flex;flex-direction:column;justify-content:center;padding:32px 34px}.cab-box .cab-box__name{margin:0;padding:0;font-size:24px;line-height:1.25;color:#24302a}.cab-box .cab-box__name a{color:inherit;text-decoration:none;box-shadow:none;border:0}.cab-box .cab-box__name a:hover{color:var(--cab-green-dark)}.cab-box .cab-box__role{margin:4px 0 14px;padding:0;font-size:15px;font-weight:600;color:var(--cab-green-dark)}.cab-box .cab-box__bio{margin:0 0 22px;padding:0;font-size:15px;line-height:1.7;color:#4a5751}.cab-box__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px;padding-top:20px;border-top:1px solid #e6eeea}.cab-box .cab-box__social{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border:1px solid rgba(26,176,120,.45);border-radius:999px;background:linear-gradient(135deg,rgba(26,176,120,.18),rgba(26,176,120,.06));-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(14,107,72,.08),0 4px 14px rgba(26,176,120,.18);color:var(--cab-green-deep);font-size:14px;font-weight:600;line-height:1;text-decoration:none;transition:background 0.25s,transform 0.25s,box-shadow 0.25s}.cab-box .cab-box__social:hover{background:linear-gradient(135deg,rgba(26,176,120,.28),rgba(26,176,120,.12));color:var(--cab-green-deep);transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(26,176,120,.25)}.cab-box .cab-box__social svg{width:17px;height:17px;fill:currentColor;flex-shrink:0}.cab-box .cab-box__cta{display:inline-block;padding:13px 22px;border:0;border-radius:999px;background:var(--cab-green);color:#fff;font-size:14px;font-weight:600;line-height:1;text-decoration:none;transition:background 0.2s}.cab-box .cab-box__cta:hover{background:var(--cab-green-dark);color:#fff}.cab-box a:focus-visible{outline:3px solid var(--cab-green-deep);outline-offset:3px}@media (max-width:720px){.cab-box{grid-template-columns:1fr}.cab-box__side{min-height:0;aspect-ratio:1 / 1;max-height:420px}.cab-box__main{padding:24px 20px;text-align:center}.cab-box__foot{flex-direction:column;align-items:stretch}.cab-box .cab-box__social,.cab-box .cab-box__cta{width:100%;justify-content:center;text-align:center}}@media (prefers-reduced-motion:reduce){.cab-box *{transition:none!important}}

/* Chat button icon: the Odoo live-chat widget draws its icon with Font Awesome glyph U+F27A ("commenting").
   The widget's own @font-face lives in a shadow DOM (ignored), and the site's trimmed FontAwesome file has no such glyph -> broken box.
   This adds only that one glyph back, from the same font file the chat server already serves. */
@font-face{font-family:"FontAwesome";src:url("https://portal.ebakery.de/web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2");font-weight:normal;font-style:normal;unicode-range:U+F055,U+F0C6,U+F118-F11A,U+F1D9,U+F27A;font-display:swap}

/* Google Ads banner: live shows a flat green band (shape dividers have height 0) */
section.flatband>.z23.z24{display:none!important}

/* Referenz gallery hover (live: image fades to 70% over the light tile) */
dl.zkx{background-color:#fafafa}
dl.zkx img{transition:opacity .3s ease}
dl.zkx img:hover{opacity:.7}

/* Homepage hero slider: more space between the caption and the dots */
.ziv,.ziv>[data-carousel]{height:495px!important}
.ziv>[data-carousel]>.zj6{top:470px!important;bottom:auto!important}

/* slider dots: pointer cursor (not the grab hand of the slider) and a larger click area */
[data-carousel]>:not(:first-child){cursor:default!important}
[data-carousel] [role=button]{cursor:pointer!important}
.ziv [data-carousel] [role=button]{position:relative;overflow:visible!important}
.ziv [data-carousel] [role=button]::after{content:"";position:absolute;left:-8px;right:-8px;top:-9px;bottom:-9px;cursor:pointer}

/* Mobile menu: smaller core-service cards with the title below the logo (like desktop) */
@media (max-width:980px){
  .nm-core{gap:14px 14px}
  .nm-ci,.nm-hq .nm-ci{gap:8px;padding:14px 6px 12px;min-height:0;border-radius:12px}
  .nm-hq .nm-ico,.nm-ico{height:38px;width:auto}
  .nm-hq .nm-ico img,.nm-ico img{width:36px;height:36px;max-width:none;max-height:none}
  .nm-hq .nm-ico img[src*="odoo"],.nm-ico img[src*="odoo"]{width:56px;height:auto}
  .nm-ci .nm-cn{position:static;width:auto;height:auto;margin:0;padding:0;overflow:visible;clip:auto;white-space:normal;border:0;text-align:center;font-size:11px;line-height:1.3;color:var(--nm-ink)}
  .nm-tile{font-size:10.5px;letter-spacing:-.01em}
}
@media (max-width:370px){.nm-ci .nm-cn{font-size:10.5px}.nm-tile{font-size:10px}}

/* Blog posts: contact form above the author box (live: Contact Form 7 section "Haben Sie Fragen ...") */
.bfc{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:48px 0;padding:0;clear:both}
.bfc__side{background:url(/assets/img/uploads/2020/05/ebakery-logo-grau-1.webp) center/contain no-repeat;opacity:.5;min-height:220px}
.bfc__main{min-width:0}
.bfc__lead{margin:0 0 18px;font-size:16px;line-height:1.6}
.bfc__form p{margin:0 0 16px}
.bfc__form label{display:block;font-size:14px;line-height:1.5;color:#505a63}
.bfc__form input[type=text],.bfc__form input[type=email],.bfc__form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid #cfd8dc;border-radius:8px;background:#fff;font:inherit;font-size:15px;color:#172a3a;box-sizing:border-box}
.bfc__form input:focus,.bfc__form textarea:focus{outline:2px solid #69cf9c;outline-offset:1px;border-color:#69cf9c}
.bfc__form textarea{resize:vertical;min-height:150px}
.bfc__note{font-size:12.5px;line-height:1.55;color:#6b7782}
.bfc__btn{display:inline-block;padding:14px 38px;border:0;border-radius:999px;background:#69cf9c;color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s}
.bfc__btn:hover{background:#4fbf8a}
.bfc__btn:disabled{opacity:.6;cursor:default}
@media (max-width:1024px){.bfc{grid-template-columns:1fr}.bfc__side{display:none}}

/* Mobile menu like the live site: white panel with tabs "Leistungen | Referenzen", groups with arrows that open their links.
   Desktop keeps the mega menu. */
.lm{display:none}
@media (max-width:980px){
  .nm-nav>.nm-item,.nm-nav>.nm-link,.nm-nav>.nm-cta{display:none!important}
  .nm-nav{padding:0;background:rgba(0,0,0,.82);overflow:hidden}
  .nm-nav::before{content:"";position:fixed;top:0;left:0;right:0;height:52px;background:#fff;z-index:1}
  .nm-close{width:12%;height:52px;background:#fff;color:#111;z-index:3}
  .nm-close svg{width:26px;height:26px}
  .lm{display:block;position:relative;z-index:2;width:88%;height:100%;background:#fff;overflow-y:auto;font-family:"Montserrat-regular",Montserrat,Arial,sans-serif;color:#111}
  .lm-tabs{display:flex;gap:2px;height:52px;border-bottom:1px solid #e3e3e3;background:#fff;position:sticky;top:0}
  .lm .lm-tab{flex:1;display:flex;align-items:center;justify-content:center;border:0;background:#fff;color:#696969;font:inherit;font-size:17px;text-decoration:none;cursor:pointer;padding:0}
  .lm .lm-tab.on{background:#d9d9d9}
  .lm-body{padding:14px 0 40px}
  .lm ul{list-style:none;margin:0;padding:0}
  .lm-g{display:flex;align-items:center;justify-content:space-between;width:100%;height:37px;padding:0 40px 0 14px;border:0;background:none;color:#111;font:inherit;font-size:16px;text-align:left;cursor:pointer}
  .lm-g svg{width:9px;height:15px;flex:none}
  .lm-items[hidden],.lm-groups[hidden]{display:none}
  .lm-items a{display:block;padding:0 14px 0 35px;line-height:37px;color:#111;font-size:15px;text-decoration:none}
  .lm-items a:active,.lm-g:active{background:#f1f1f1}
}

/* Mobile menu v2: icons on the links, back button, slide / fade transitions */
@media (max-width:980px){
  .nm-nav{transform:none!important;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
  .nm.open .nm-nav{opacity:1;visibility:visible}
  .lm{transform:translateX(-102%);transition:transform .34s cubic-bezier(.22,.8,.3,1)}
  .nm.open .lm{transform:none}
  .lm .lm-tab{transition:background .2s ease,color .2s ease}
  .lm-body{display:grid;overflow:hidden}
  .lm-groups,.lm-items{grid-area:1/1;min-width:0;transition:transform .32s cubic-bezier(.22,.8,.3,1),opacity .24s ease,visibility .32s}
  .lm-items{transform:translateX(22%);opacity:0;visibility:hidden}
  .lm-items.on{transform:none;opacity:1;visibility:visible}
  .lm-body[data-view=items] .lm-groups{transform:translateX(-18%);opacity:0;visibility:hidden}
  .lm-g{transition:background .15s ease}
  .lm-g svg{transition:transform .2s ease}
  .lm-g:active svg{transform:translateX(3px)}
  .lm-bar button{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;background:none;color:var(--nm-green-d);font:inherit;font-size:14px;cursor:pointer}
  .lm-bar svg{width:8px;height:14px;transition:transform .2s ease}
  .lm-bar button:active svg{transform:translateX(-3px)}
  .lm-title{padding:6px 14px 10px;font-family:"Montserrat-bold",Montserrat,Arial,sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--nm-green)}
  .lm-items li a{display:flex;align-items:center;gap:14px;min-height:50px;padding:6px 14px;line-height:1.25;font-size:15px;color:#111;text-decoration:none;transition:background .15s ease}
  .lm-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#fff;box-shadow:0 5px 14px -6px rgba(30,40,90,.35),0 0 0 1px rgba(30,40,90,.06)}
  .lm-ic img{width:22px;height:22px;object-fit:contain}
  .lm-ic img[src*="odoo"]{width:28px;height:auto}
  .lm-items.on li{animation:lmIn .34s cubic-bezier(.22,.8,.3,1) both}
  .lm-items.on li:nth-child(2){animation-delay:.03s}.lm-items.on li:nth-child(3){animation-delay:.06s}.lm-items.on li:nth-child(4){animation-delay:.09s}.lm-items.on li:nth-child(5){animation-delay:.12s}.lm-items.on li:nth-child(6){animation-delay:.15s}.lm-items.on li:nth-child(7){animation-delay:.18s}.lm-items.on li:nth-child(8){animation-delay:.21s}.lm-items.on li:nth-child(9){animation-delay:.24s}.lm-items.on li:nth-child(10){animation-delay:.27s}
}
@keyframes lmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nm-nav,.lm,.lm-groups,.lm-items,.lm-items li{transition:none!important;animation:none!important}}
@media (max-width:980px){
  .lm-items{pointer-events:none}
  .lm-items.on{pointer-events:auto}
  .lm-body[data-view=items] .lm-groups{pointer-events:none}
}

/* Sortlist "Trusted partner" badge next to the certificates (homepage): bigger, vertically centred in the row */
.sortlist-cell{display:flex;flex-direction:column;justify-content:center;vertical-align:middle;align-self:stretch;overflow:visible}
.sortlist-cell>div{flex:1;display:flex;flex-wrap:nowrap;align-content:center;align-items:center;justify-content:flex-start;padding-left:14px;min-height:90px;overflow:visible}
.sortlist-badge{max-width:none;position:relative;z-index:1}
.sortlist-badge img{width:clamp(150px,19vw,280px)!important;height:auto!important;max-width:none!important}

/* Contact form wrapper had a baked pixel height (Elementor export), so the "Senden" button was cut off by the footer. Let it grow with the form. */
:has(>form[action="/contact.php"]){height:auto!important;min-height:0!important;padding-bottom:40px}

/* ProvenExpert stars on mobile / tablet (copy placed above the copyright bar by menu-new.js) */
.pe-mob{display:none}
@media (max-width:1024px){
  .pe-mob{display:block;text-align:center;padding:26px 16px 4px}
  .pe-mob .pe-wrap,.pe-mob .pe-wrap2{margin:0}
  .pe-mob .pe-light{display:block;max-width:300px;margin:0 auto}
  .pe-mob .pe-light:not(.pe-imgstars)>span.z15{display:flex!important;justify-content:center}
}

/* Placeholder chat bubble (real Odoo chat loads on click, after consent; see assets/consent.js) */
.ebk-chat{position:fixed;right:18px;bottom:18px;z-index:99990;display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:0;border-radius:999px;background:#4eaf87;color:#fff;font:700 16px/1 "Montserrat-bold",Montserrat,Arial,sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .15s ease,background .15s ease}
.ebk-chat:hover{background:#3f9c76;transform:translateY(-2px)}
.ebk-chat.ebk-loading{opacity:.7;cursor:progress}
.ebk-chat:focus-visible{outline:3px solid #172a3a;outline-offset:3px}
@media (max-width:560px){.ebk-chat{right:14px;bottom:14px;padding:13px 18px}}