/* =====================================================================
   EG Tools · gemeinsame Huelle (Seitenleiste, Kopfzeile, Grundlook)
   Wird von allen Tool-Seiten nach ihren eigenen Stilen geladen.
   Funktionen der Seiten bleiben unberuehrt – hier aendert sich nur die Optik.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* Markenfarben (Corporate Design) */
:root{ --eg-creme:#F4E8D8; --eg-orange:#EF7C2B; --eg-salbei:#98A97C; --eg-gruen:#3D5A40; --eg-anthrazit:#3B3B3B; }
/* Ausschliesslich Poppins – auch dort, wo Seiten eigene Schriften setzen */
body.egs, body.egs *, body.egs-fx, body.egs-fx *, body.egs-plain, body.egs-plain *{ font-family:'Poppins',system-ui,sans-serif!important; }

/* Breiten: Leiste (Ebene 1) + Untermenue (Ebene 2); --egs-side = gesamter Abstand links */
body.egs2{ --egs-rail:68px; --egs-panel:232px; --egs-side:calc(var(--egs-rail) + var(--egs-panel)); }
body.egs2.egs-collapsed, body.egs2.egs-mobile{ --egs-side:var(--egs-rail); }
body.egs{
  --egs-bg:#f6f6f4; --egs-ink:#3b3b3b; --egs-ink2:#4a4540; --egs-muted:#8a827a;
  --egs-line:#e9e4dc; --egs-line2:#ddd6cb; --egs-gold:#ef7c2b; --egs-gold-soft:#f4e8d8;
  background:var(--egs-bg)!important;
  padding-left:calc(var(--egs-side) + 28px)!important; padding-right:28px!important; padding-top:0!important;
  overflow-x:clip!important; overflow-y:visible!important;
  font-family:'Poppins',system-ui,sans-serif;
}
body.egs.egs-ready{transition:padding-left .18s ease}
html:has(body.egs){ overflow-x:clip!important; }
/* Inhalte nutzen die volle Bildschirmbreite (Seiten begrenzen sich sonst auf 920–1600 px) */
body.egs .wrap, body.egs .eg-wrap, body.egs .home-wrap{ max-width:none!important; width:auto!important; margin-left:0!important; margin-right:0!important; padding-left:0!important; padding-right:0!important; }

/* ---------- Ebene 1: Bereichs-Leiste ---------- */
.egs-rail{position:fixed;left:0;top:0;bottom:0;width:var(--egs-rail);background:var(--eg-anthrazit);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 0 12px;z-index:960;font:12px/1.3 'Poppins',system-ui,sans-serif}
.egs-mono{display:block;width:46px;height:46px;border-radius:50%;margin-bottom:14px;flex:none}
.egs-mono img{width:100%;height:100%;display:block;border-radius:50%}
.egs-mono:hover{box-shadow:0 0 0 3px rgba(239,124,43,.45)}
.egs-area{width:58px;border:0;background:none;color:rgba(244,232,216,.68);border-radius:10px;padding:8px 0 6px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font:inherit;font-size:10px;letter-spacing:.01em;position:relative}
.egs-area span{max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.egs-area:hover{background:rgba(255,255,255,.07);color:#fff}
.egs-area.cur{color:#fff}
.egs-area.cur::before{content:'';position:absolute;left:-5px;top:10px;bottom:10px;width:3px;border-radius:3px;background:#ef7c2b}
.egs-area.on{background:rgba(255,255,255,.12);color:#fff}
.egs-rfoot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:4px}
.egs-ava{width:30px;height:30px;border-radius:50%;background:var(--eg-orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;margin-top:6px;cursor:default}

/* ---------- Ebene 2: Untermenue ---------- */
.egs-panel{position:fixed;left:var(--egs-rail);top:0;bottom:0;width:var(--egs-panel);background:#fff;color:var(--eg-anthrazit);border-right:1px solid #e6e6e3;padding:18px 14px;display:flex;flex-direction:column;z-index:950;overflow-y:auto;font:14px/1.45 'Poppins',system-ui,sans-serif;}
body.egs-ready .egs-panel, body.egs-ready.egs-fx .fx-side{transition:transform .18s ease,opacity .18s}
body.egs-collapsed .egs-panel{transform:translateX(-100%);opacity:0;pointer-events:none}
.egs-ph{padding:2px 6px 10px}
.egs-brand{display:block;text-decoration:none}
.egs-brand img{width:118px;height:auto;display:block;filter:invert(1) brightness(.25)}
.egs-pt{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.egs-pt span{font-size:11px;color:#ef7c2b;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.egs-collapse{border:0;background:none;color:#9a9a96;font-size:16px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:6px;font-family:inherit}
.egs-collapse:hover{background:#f1f1ef;color:var(--eg-anthrazit)}
.egs-pb{display:flex;flex-direction:column;gap:2px}
.egs-h{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9a9a96;font-weight:600;padding:14px 10px 6px}
.egs-nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--eg-anthrazit);font-size:13.5px;text-decoration:none;border:0;background:none;width:100%;text-align:left;cursor:pointer;font-family:inherit}
.egs-nav:hover{background:#f3f3f1;color:var(--eg-anthrazit)}
.egs-nav.on{background:#f3f3f1;color:var(--eg-anthrazit);font-weight:600;box-shadow:inset 3px 0 0 var(--eg-orange)}
.egs-nav.on .ic,.egs-nav.on .step{color:var(--eg-orange);border-color:var(--eg-orange)}
.egs-nav .ic{width:18px;text-align:center;color:#8a8a86;flex:none}
.egs-nav .step{width:20px;height:20px;border-radius:50%;border:1px solid #cfcfcb;font-size:11px;display:inline-flex;align-items:center;justify-content:center;color:#6b6b67;flex:none}
.egs-scrim{display:none}
.egs-admin{display:none!important}
body.egs-is-admin .egs-admin{display:flex!important}
body.egs-is-admin .egs-h.egs-admin{display:block!important}

/* ---------- Fulfillment: eigene Seitenleiste ist das Untermenue ---------- */
body.fx.egs-fx{--fx-side:var(--egs-side)!important}
body.egs-fx .fx-side{left:var(--egs-rail)!important;width:var(--egs-panel)!important;padding-top:18px!important}
body.egs-fx.egs-collapsed .fx-side, body.egs-fx.egs-other .fx-side{transform:translateX(-100%);opacity:0;pointer-events:none}
body.egs-fx.egs-other:not(.egs-collapsed) .egs-panel{z-index:955}
body.egs-fx .fx-brand{padding:2px 10px 4px!important}
body.egs-fx .fx-brand img{width:118px!important;filter:invert(1) brightness(.25)}
body.egs-fx .egs-fxcol{position:absolute;right:12px;top:58px}
body.egs-fx .fx-side{position:fixed}
body.egs-fx .fx-side-foot a[href="index.html"], body.egs-fx .fx-side-foot button[onclick^="egLogout"]{display:none!important}
body.egs-ready.egs-fx .fx-top, body.egs-ready.egs-fx .fx-wrap, body.egs-ready.egs-fx .fx-bannerhost, body.egs-ready.egs-fx .eg-wrap{transition:margin-left .18s ease}

/* ---------- Kopfzeile: vorhandene eg-appbar im neuen Look ---------- */
body.egs .eg-appbar{
  position:sticky!important; top:0!important; z-index:800!important;
  left:auto!important; right:auto!important; width:auto!important;
  margin:0 0 22px!important; padding:14px 0!important; border-radius:0!important;
  background:rgba(246,246,244,.94)!important; -webkit-backdrop-filter:blur(8px)!important; backdrop-filter:blur(8px)!important;
  border-bottom:1px solid var(--egs-line)!important; box-shadow:none!important;
}
body.egs .eg-appbar .back, body.egs .eg-appbar .logo, body.egs .eg-appbar img.logo{display:none!important}
body.egs .eg-appbar .name{font-family:'Poppins',system-ui,sans-serif!important;font-size:19px!important;font-weight:400!important;color:var(--egs-ink)!important;letter-spacing:0!important}
body.egs .eg-appbar .logout{display:none!important}          /* Abmelden steht in der Seitenleiste */
body.egs .eg-appbar .user, body.egs .eg-appbar #userChip{font-size:12px!important;color:var(--egs-muted)!important}

/* ---------- Ladebalken (Shopify-Abruf) ---------- */
.egs-progress{position:fixed;left:var(--egs-side,0px);right:0;top:0;height:4px;background:rgba(239,124,43,.15);z-index:950;opacity:0;transition:opacity .25s;pointer-events:none}
.egs-progress.on{opacity:1}
.egs-progress i{display:block;height:100%;width:0;background:var(--egs-gold,#ef7c2b);transition:width .6s ease}
.egs-progress.indet i{width:30%!important;animation:egsIndet 1.2s ease-in-out infinite}
@keyframes egsIndet{0%{margin-left:-30%}100%{margin-left:100%}}
.egs-pbar{display:inline-flex;align-items:center;gap:10px;vertical-align:middle}
.egs-pbar .tr{width:180px;height:8px;border-radius:999px;background:#ece6dc;overflow:hidden}
.egs-pbar .tr i{display:block;height:100%;width:0;background:var(--egs-gold,#ef7c2b);border-radius:999px;transition:width .6s ease}
.egs-pbar b{font-variant-numeric:tabular-nums;min-width:38px}

/* ---------- Grundbausteine angleichen ---------- */
body.egs .card{border-color:var(--egs-line)!important;border-radius:12px!important;box-shadow:0 1px 2px rgba(31,29,26,.04)}
body.egs .summary-chip{border-color:var(--egs-line)!important;border-radius:12px!important}
body.egs .btn-primary, body.egs .btn-add, body.egs .btn-save, body.egs .btn-login{background:var(--egs-ink)!important;border-color:var(--egs-ink)!important;color:#fff!important;border-radius:9px!important}
body.egs .btn-primary:hover, body.egs .btn-add:hover, body.egs .btn-save:hover, body.egs .btn-login:hover{background:#000!important}
body.egs .btn-ghost, body.egs .btn-remove, body.egs .btn-order{border-color:var(--egs-line2)!important;border-radius:9px!important;color:var(--egs-ink)!important}
body.egs input[type=text], body.egs input[type=number], body.egs input[type=search], body.egs input[type=email], body.egs input[type=date], body.egs select, body.egs textarea{border-color:var(--egs-line2);border-radius:9px}
body.egs .modal{border-radius:16px!important}

/* ---------- Startseite (Tool-Uebersicht) ---------- */
body.egs.home .home-userbar, body.egs.home .home-head .logo{display:none!important}
body.egs.home .home-wrap{max-width:none!important;margin:0!important;padding:28px 0 60px!important}
body.egs.home .home-head{margin:0 0 24px!important;padding:0!important;border:0!important}
body.egs.home .home-head h1{font-family:'Poppins',system-ui,sans-serif!important;font-weight:400!important;font-size:26px!important;color:var(--egs-ink)!important}
body.egs.home .home-head p{color:var(--egs-muted)!important}
body.egs.home .tool-grid{gap:14px!important}
body.egs.home .tool-card{background:#fff!important;border:1px solid var(--egs-line)!important;border-radius:12px!important;box-shadow:0 1px 2px rgba(31,29,26,.04)!important;transition:.12s}
body.egs.home .tool-card:hover{border-color:var(--egs-ink)!important;transform:translateY(-1px)}
body.egs.home .tool-icon{background:var(--egs-gold-soft)!important;border-radius:10px!important}

/* ---------- Login / Passwort (ohne Seitenleiste) ---------- */
body.egs-plain{background:var(--egs-bg)!important}
body.egs-plain .login-card{border:1px solid var(--egs-line)!important;border-radius:16px!important;box-shadow:0 10px 30px rgba(31,29,26,.06)!important}
body.egs-plain .btn-login{background:#3b3b3b!important;border-radius:9px!important}
body.egs-plain .btn-login:hover{background:#000!important}

/* ---------- Schmale Bildschirme: Leiste bleibt, Untermenue legt sich darueber ---------- */
@media (max-width:820px){
  body.egs2{--egs-rail:56px}
  body.egs{padding-left:calc(var(--egs-rail) + 12px)!important; padding-right:12px!important}
  .egs-area{width:48px}.egs-area span{display:none}
  .egs-panel{box-shadow:8px 0 30px rgba(0,0,0,.12)}
  body.egs-mobile:not(.egs-collapsed) .egs-scrim{display:block;position:fixed;inset:0;background:rgba(20,20,20,.35);z-index:940}
  body.egs-fx .fx-side{position:fixed!important;top:0;bottom:0;flex-direction:column!important;flex-wrap:nowrap!important;padding:18px 14px!important;box-shadow:8px 0 30px rgba(0,0,0,.25);z-index:950}
  body.egs-fx .fx-side .fx-nav-h, body.egs-fx .fx-side .fx-side-foot, body.egs-fx .fx-brand{display:flex!important}
  body.egs-fx .fx-side .fx-nav-h{display:block!important}
  body.egs-fx .fx-nav{width:100%!important}
}
@media print{ .egs-rail,.egs-panel,.egs-scrim{display:none!important} body.egs{padding-left:0!important} body.egs .eg-appbar{position:static!important} body.egs-fx{--fx-side:0px!important} }