/* Cakglo global header — sourced from the approved vanilla-cacao.html shell */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line,#ded6c6)}
.site-header .nav{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding-block:12px}
.site-header .nav.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:var(--pad-x,clamp(20px,5vw,72px))}
.site-header .brand{display:flex;align-items:center;gap:10px;font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:1.15rem;color:var(--navy,#1b2a4a)}
.site-header .brand img{height:34px;width:auto;border-radius:4px}
.site-header .nav-links{display:flex;gap:2px;justify-content:center;align-items:center}
.site-header .nav-links>a{padding:8px 12px;font-size:.9rem;font-weight:500;color:var(--ink,#25282e);border-radius:6px;transition:background .2s}
.site-header .nav-links>a:hover,.site-header .nav-links>a:focus-visible{background:var(--cream,#f5f1e8);outline:none}
.site-header .nav-right{display:flex;align-items:center;gap:10px}
.site-header .nav-right .btn{display:inline-flex;align-items:center;padding:9px 16px;border-radius:6px;background:var(--maroon,var(--wine,#7a1f2b));color:#fff;font-size:.82rem;font-weight:700;white-space:nowrap}
.site-header .lang-switch{position:relative}
.site-header .lang-btn{display:inline-flex;align-items:center;gap:6px;background:var(--cream,#f5f1e8);border:1px solid var(--line,#ded6c6);border-radius:6px;padding:8px 12px;font-size:.85rem;font-weight:600;color:var(--brown,#5c4a3a)}
.site-header .lang-menu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line,#ded6c6);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.1);padding:6px;min-width:170px;display:none;z-index:140}
.site-header .lang-menu.open{display:block}
.site-header .lang-menu a{display:block;padding:8px 12px;font-size:.86rem;border-radius:5px;color:var(--ink,#25282e)}
.site-header .lang-menu a:hover{background:var(--cream,#f5f1e8)}
.site-header .lang-menu a[aria-disabled="true"]{opacity:.42;cursor:not-allowed}
.site-header .nav-burger{display:none;background:none;border:0;padding:8px;color:var(--navy,#1b2a4a)}
.site-header .nav-item{position:relative;display:flex;align-items:center}
.site-header .nav-drop-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;font:inherit;font-size:.9rem;font-weight:500;color:var(--ink,#25282e);padding:8px 12px;border-radius:6px;cursor:pointer;transition:background .2s}
.site-header .nav-drop-btn:hover,.site-header .nav-drop-btn:focus-visible,.site-header .has-drop.open .nav-drop-btn,.site-header .has-drop:hover .nav-drop-btn{background:var(--cream,#f5f1e8);outline:none}
.site-header .nav-drop-btn .caret{transition:transform .2s}
.site-header .has-drop:hover .nav-drop-btn .caret,.site-header .has-drop.open .nav-drop-btn .caret{transform:rotate(180deg)}
.site-header .has-drop:hover::after{content:'';position:absolute;top:100%;left:0;width:100%;height:14px}
.site-header .mega{position:absolute;top:calc(100% + 12px);left:0;transform:translateY(8px);width:min(540px,92vw);background:#fff;border:1px solid var(--line,#ded6c6);border-radius:14px;box-shadow:0 22px 54px rgba(27,42,74,.17);padding:10px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;z-index:130}
.site-header .has-drop:hover .mega,.site-header .has-drop.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.site-header .mega-card{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:10px;transition:background .18s}
.site-header .mega-card:hover,.site-header .mega-card:focus-visible{background:var(--cream,#f5f1e8);outline:none}
.site-header .mega-ico{flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--cream,#f5f1e8);color:var(--navy,#1b2a4a);display:flex;align-items:center;justify-content:center}
.site-header .mega-card:hover .mega-ico{background:#fff}
.site-header .mega-tx b{display:block;font-size:.95rem;font-weight:700;color:var(--navy,#1b2a4a);margin-bottom:3px}
.site-header .mega-tx em{font-style:normal;font-size:.82rem;color:var(--brown,#5c4a3a);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:680px){
  .site-header .nav-links{display:none}
  .site-header .nav-burger{display:block}
  .site-header .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line,#ded6c6);padding:12px var(--pad-x,20px)}
  .site-header .nav-item.has-drop{flex-direction:column;align-items:stretch;width:100%}
  .site-header .nav-drop-btn{justify-content:space-between;width:100%}
  .site-header .mega{position:static;transform:none;width:100%;opacity:1;visibility:visible;box-shadow:none;border:0;padding:2px 0 8px;display:none}
  .site-header .has-drop.open .mega{display:block;transform:none}
  .site-header .has-drop:hover::after{display:none}
  .site-header .nav-right .btn{display:none}
  .site-header .lang-btn span{display:none}
}

/* WhatsApp float button (2026-07-17): markup+5s-timer are stamped on every page,
   but only self-contained pages carried these rules inline — without them the raw
   SVG rendered as a giant black shape. Canonical rules copied from index.html. */
.wa-float{position:fixed;left:20px;bottom:20px;z-index:200;display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;padding:12px 16px;border-radius:30px;font-weight:700;font-size:.86rem;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.wa-float:hover{transform:translateY(-2px)}
.wa-float svg{width:20px;height:20px;fill:#fff}

/* Products dropdown — vertical list (2026-07-17): the shared header stamps
   class="mega mega-products" on every page, but the vertical rules lived only
   inline in the index family — everywhere else the links flowed like text.
   No display on the container (mobile relies on display:none until .open). */
.site-header .mega.mega-products{width:min(280px,92vw);padding:8px}
.site-header .mega-products a{display:block;padding:10px 14px;border-radius:8px;font-size:.92rem;color:var(--navy,#1b2a4a);font-weight:500;white-space:nowrap}
.site-header .mega-products a:hover,.site-header .mega-products a:focus-visible{background:var(--cream,#f5f1e8);outline:none}
@media(max-width:680px){.site-header .mega.mega-products{width:100%}}

/* Mobile-Nav-UX (2026-07-18): das offene Menue muss UEBER dem Consent-Banner (z-index 9998)
   liegen und auf kleinen Screens scrollen koennen — sonst sind untere Punkte nicht antippbar. */
.site-header{z-index:10000}
@media(max-width:760px){
  .site-header .nav-links.open{max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}
body:has(.nav-links.open) #ckg-consent{visibility:hidden}