/* ════════════════════════════════════════════════════════
   WEMAG-App Stylesheet · v1.5.0
   ════════════════════════════════════════════════════════ */

/* ── LOGIN (Split-Screen Layout) ──────────────────────────────────── */
.login-overlay{position:fixed;inset:0;z-index:9999;display:flex;
  background:linear-gradient(135deg,#0f0e0c 0%,#1a1917 40%,#0f172a 100%);}

/* Linke Seite: Login-Bereich (Variante C — hell & freundlich) */
.login-left{flex:0 0 480px;max-width:480px;width:100%;
  display:flex;align-items:stretch;justify-content:center;
  padding:3rem 2.5rem;position:relative;
  background:#fbfaf8;}

/* Rechte Seite: Hintergrundbild */
.login-right{flex:1;position:relative;overflow:hidden;
  background:#004C7E;background-size:cover;background-position:center;background-repeat:no-repeat;}
.login-right::after{content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(15,14,12,.45) 0%,rgba(0,76,126,.12) 60%,transparent 100%);pointer-events:none;}
.login-right.no-image{
  background:linear-gradient(135deg,#004C7E 0%,#003860 100%);}
.login-right.no-image::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.06) 0%,transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(255,255,255,.04) 0%,transparent 40%);}

/* Login-Karte: vertikal verteilt (Logo oben, Headline mitte, Aktionen + Footer unten) */
.login-card{position:relative;width:100%;max-width:360px;
  display:flex;flex-direction:column;
  animation:loginFadeIn .5s cubic-bezier(.16,1,.3,1);}
@keyframes loginFadeIn{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}
.login-logo{display:flex;align-items:center;gap:14px;margin-bottom:auto;}
.login-logo-icon{height:72px;width:auto;max-width:260px;display:flex;align-items:center;justify-content:flex-start;
  font-size:56px;color:#004C7E;overflow:visible;}
.login-logo-icon.has-image{background:transparent;padding:0;}
.login-logo-img{height:100%;width:auto;max-width:260px;object-fit:contain;display:block;}

/* Headline-Block (mittig) */
.login-headline{margin:2.5rem 0;}
.login-title{font-family:'Inter',sans-serif;font-size:28px;font-weight:700;color:#1a1a1a;margin-bottom:.5rem;letter-spacing:-.02em;line-height:1.15;}
.login-wave{display:inline-block;animation:loginWave 1.8s ease-in-out infinite;transform-origin:70% 70%;}
@keyframes loginWave{
  0%,60%,100%{transform:rotate(0deg);}
  10%,30%{transform:rotate(14deg);}
  20%{transform:rotate(-8deg);}
  40%{transform:rotate(-4deg);}
}
.login-sub{font-size:14px;color:#6a6a6a;font-family:'Inter',sans-serif;line-height:1.5;}

/* KI-Motivationssatz */
.login-quote{margin-top:1.5rem;padding:14px 16px;background:#f4f3f0;border-left:3px solid #004C7E;
  border-radius:0 8px 8px 0;display:flex;gap:10px;align-items:flex-start;
  opacity:0;animation:loginQuoteIn .6s cubic-bezier(.16,1,.3,1) .3s forwards;}
@keyframes loginQuoteIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
.login-quote-icon{color:#004C7E;font-size:14px;line-height:1.6;flex-shrink:0;}
.login-quote-text{font-family:'Inter',sans-serif;font-size:13px;font-style:italic;color:#4a4a4a;line-height:1.55;}

/* Aktionen */
.login-actions{margin-top:auto;}
.login-divider{display:flex;align-items:center;gap:10px;margin:1.25rem 0;color:#a8a8a8;font-size:11px;font-family:'IBM Plex Mono',monospace;}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:rgba(0,0,0,.1);}
.login-field{margin-bottom:1rem;}
.login-field label{display:block;font-size:11px;font-family:'IBM Plex Mono',monospace;
  color:#6a6a6a;margin-bottom:7px;letter-spacing:.04em;font-weight:500;}
.login-input{width:100%;padding:12px 14px;background:#fff;
  border:1px solid rgba(0,0,0,.14);border-radius:8px;
  font-family:'Inter',sans-serif;font-size:14px;color:#1a1a1a;
  outline:none;transition:all .15s;box-sizing:border-box;}
.login-input:focus{border-color:#004C7E;background:#fff;box-shadow:0 0 0 3px rgba(0,76,126,.12);}
.login-input::placeholder{color:#b0b0b0;}
.login-btn{width:100%;padding:13px;border:none;border-radius:8px;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:600;cursor:pointer;
  transition:all .2s cubic-bezier(.16,1,.3,1);margin-top:.25rem;
  display:flex;align-items:center;justify-content:center;gap:10px;}
/* Primär: dunkel (Microsoft-Button) */
.login-btn-primary{background:#1a1a1a;color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.15);}
.login-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.22);}
.login-btn-primary:active{transform:translateY(0);}
/* Sekundär: dezent (Passwort-Login) */
.login-btn-secondary{background:#fff;color:#1a1a1a;border:1px solid rgba(0,0,0,.14);}
.login-btn-secondary:hover{background:#f4f3f0;border-color:rgba(0,0,0,.22);}
.login-error{background:#fef2f2;border:1px solid #fecaca;
  border-radius:8px;padding:10px 14px;font-size:12px;font-family:'IBM Plex Mono',monospace;
  color:#b91c1c;margin-bottom:1rem;display:none;}

/* Footer mit Jahreszahl (wie Pimcore) */
.login-footer{margin-top:2rem;display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;font-size:11px;font-family:'IBM Plex Mono',monospace;color:#a8a8a8;}
.login-footer-sep{opacity:.5;}

.login-loading{display:flex;align-items:center;justify-content:center;gap:8px;
  color:#8a8a8a;font-size:12px;font-family:'IBM Plex Mono',monospace;}
.login-spinner{width:16px;height:16px;border:2px solid rgba(0,0,0,.15);
  border-top-color:#004C7E;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Responsive: auf schmalen Screens nur Login-Bereich, Bild ausblenden */
@media (max-width:860px){
  .login-left{flex:1;max-width:none;}
  .login-right{display:none;}
}

/* Universeller Spinner (für In-App-Anwendungen) */
.spinner{
  width:16px;height:16px;
  border:2px solid color-mix(in srgb, var(--text-3) 30%, transparent);
  border-top-color:var(--wemag);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;
  vertical-align:middle;
}
.spinner-sm{width:12px;height:12px;border-width:1.5px;}
.spinner-lg{width:24px;height:24px;border-width:2.5px;}
:root{
  /* ── Backgrounds ── */
  --bg:#f4f5f7;--surface:#fff;--surface2:#eef0f3;

  /* ── Borders (deutlicher als vorher) ── */
  --border:rgba(0,0,0,.12);--border-strong:rgba(0,0,0,.20);

  /* ── Text (bessere Kontraste, WCAG AA konform) ── */
  --text:#0d1b2a;     /* fast-schwarz mit blauem Unterton — passt zum WEMAG-Blau */
  --text-2:#445566;   /* mittlerer Grauton, WCAG AA auf weiß */
  --text-3:#7a8694;   /* dunkler als vorher (war #a09e99) */
  --accent-fg:#fff;

  /* ── Status-Farben (etwas dezenter) ── */
  --success:#0f6f44;--success-bg:#e6f5ee;
  --info:#1450a3;--info-bg:#e8f0fc;
  --danger:#b91c1c;--danger-bg:#fef2f2;
  --warn:#92400e;--warn-bg:#fffbeb;

  /* ── WEMAG-Branding ── */
  --wemag:#004C7E;            /* WEMAG-Blau, Hauptakzent */
  --wemag-bg:#e6eff5;          /* sehr helles WEMAG-Blau für Hintergründe */
  --wemag-dark:#003860;        /* dunkleres Blau für Hover/Active */
  --wemag-red:#E30613;         /* WEMAG-Aktionsrot, nur für Sale/CTA */

  /* ── Mistral (KI-Bereiche: Übersetzer, Magic-Mode, Briefing) ── */
  --mistral:#f97316;--mistral-bg:#fff7ed;

  /* ── Akzent-Alias: zeigt überall auf WEMAG, nicht mehr Mistral ── */
  --accent:var(--wemag);
  --accent-bg:var(--wemag-bg);

  /* ── Radius (etwas runder für moderneren Look) ── */
  --radius:8px;--radius-lg:14px;--radius-xl:18px;

  /* ── Fonts ── */
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Shadows (subtiler aber sichtbarer als bisher) ── */
  --shadow-sm:0 1px 2px rgba(13,27,42,.05);
  --shadow-md:0 2px 8px rgba(13,27,42,.06), 0 1px 2px rgba(13,27,42,.04);
  --shadow-lg:0 8px 24px rgba(13,27,42,.08), 0 2px 4px rgba(13,27,42,.04);

  /* ── Focus-Ring (Accessibility) ── */
  --ring:0 0 0 3px color-mix(in srgb, var(--wemag) 35%, transparent);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:14px;}
body{font-family:var(--sans);font-size:14px;line-height:1.55;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-bottom:30px;}

/* ── Globale Accessibility: Focus-Ring ── */
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible{
  outline:none;
  box-shadow:var(--ring);
  border-color:var(--wemag);
}

/* ─── NAV ──────────────────────────────────────────────── */
.nav{background:var(--surface);border-bottom:1px solid var(--border);height:60px;display:flex;align-items:center;padding:0 2.5rem;gap:0;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm);}
.nav-brand{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-right:2rem;display:flex;align-items:center;gap:9px;color:var(--text);cursor:pointer;padding:6px 8px;border-radius:var(--radius);transition:background .15s;user-select:none;}
.nav-brand:hover{background:var(--surface2);}
.nav-brand:focus-visible{background:var(--surface2);outline:none;box-shadow:var(--ring);}
.nav-brand-dot{width:9px;height:9px;border-radius:50%;background:var(--wemag);}
.nav-brand-logo{max-height:36px;max-width:140px;object-fit:contain;display:block;}
.nav-brand-sub{font-size:11px;font-weight:500;color:var(--text-2);font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;padding-left:10px;border-left:1px solid var(--border);align-self:center;}
.nav-tab{padding:0 20px;height:60px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--text-2);cursor:pointer;border-bottom:2px solid transparent;border:none;background:none;transition:color .15s;white-space:nowrap;}
.nav-tab:hover{color:var(--text);}
.nav-tab.active{color:var(--wemag);border-bottom:2px solid var(--wemag);font-weight:600;}
.nav-tab .nav-num{width:20px;height:20px;border-radius:50%;background:var(--surface2);font-size:11px;font-family:var(--mono);font-weight:500;display:flex;align-items:center;justify-content:center;color:var(--text-3);}
.nav-tab.active .nav-num{background:var(--wemag-bg);color:var(--wemag);}
.nav-spacer{flex:1;}
.nav-clock{font-size:12px;font-family:var(--mono);color:var(--text-3);}

/* ─── BURGER MENU ──────────────────────────────────────── */
.nav-burger{width:40px;height:40px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);margin-right:8px;color:var(--text);transition:background .15s;}
.nav-burger:hover{background:var(--surface2);}
.nav-burger svg{width:22px;height:22px;}

/* Theme-Button */
.nav-theme-btn{width:38px;height:38px;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-2);transition:all .15s;margin-right:6px;}
.nav-theme-btn:hover{background:var(--surface2);color:var(--wemag);border-color:var(--wemag);}

/* Side-Drawer */
.module-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9000;opacity:0;pointer-events:none;transition:opacity .2s;}
.module-drawer-overlay.open{opacity:1;pointer-events:auto;}
.module-drawer{position:fixed;top:0;left:0;bottom:0;width:320px;max-width:85vw;background:var(--surface);border-right:1px solid var(--border);box-shadow:4px 0 24px rgba(0,0,0,.08);z-index:9100;transform:translateX(-100%);transition:transform .25s ease;display:flex;flex-direction:column;}
.module-drawer.open{transform:translateX(0);}
.module-drawer-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--surface2);}
.module-drawer-title{font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:600;}
.module-drawer-close{width:32px;height:32px;border:none;background:none;cursor:pointer;color:var(--text-3);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .15s;}
.module-drawer-close:hover{background:var(--surface);color:var(--text);}
.module-drawer-body{flex:1;overflow-y:auto;padding:14px;}
.module-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;margin-bottom:10px;transition:all .15s;text-align:left;width:100%;font-family:var(--sans);}
.module-item:hover{border-color:var(--wemag);background:color-mix(in srgb,var(--wemag) 5%,var(--surface));}
.module-item.active{border-color:var(--wemag);background:color-mix(in srgb,var(--wemag) 9%,var(--surface));}
.module-item.active .module-item-icon{background:var(--wemag);color:#fff;}
.module-item-icon{width:42px;height:42px;border-radius:var(--radius);background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;transition:all .15s;}
.module-item-text{flex:1;min-width:0;}
.module-item-name{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px;}
.module-item-desc{font-size:12px;color:var(--text-2);line-height:1.45;}
.module-item-check{flex-shrink:0;color:var(--wemag);font-size:18px;font-weight:700;opacity:0;transition:opacity .15s;}
.module-item.active .module-item-check{opacity:1;}

/* Tab hidden state */
.nav-tab.hidden{display:none !important;}

/* ─── DASHBOARD (Page 0) ─────────────────────────────── */
.p0-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.p0-kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;transition:all .15s;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);}
.p0-kpi-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.p0-kpi-label{font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);font-weight:600;display:flex;align-items:center;gap:6px;}
.p0-kpi-value{font-size:32px;font-weight:700;color:var(--text);margin-top:8px;letter-spacing:-.02em;line-height:1.05;font-family:var(--sans);}
.p0-kpi-sub{font-size:12px;color:var(--text-2);margin-top:6px;line-height:1.45;}
.p0-kpi-accent{position:absolute;top:0;left:0;width:4px;height:100%;background:var(--wemag);opacity:.75;}

.p0-quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}
.p0-quick-card{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer;transition:all .18s cubic-bezier(.4,0,.2,1);font-family:var(--sans);text-align:left;width:100%;box-shadow:var(--shadow-sm);}
.p0-quick-card:hover{border-color:var(--wemag);background:color-mix(in srgb,var(--wemag) 2.5%,var(--surface));transform:translateY(-1px);box-shadow:var(--shadow-md);}
.p0-quick-card:hover .p0-quick-arrow{transform:translateX(3px);color:var(--wemag);}
.p0-quick-icon{width:52px;height:52px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;}
.p0-quick-text{flex:1;min-width:0;}
.p0-quick-name{font-size:15px;font-weight:600;color:var(--text);}
.p0-quick-desc{font-size:13px;color:var(--text-2);margin-top:3px;line-height:1.5;}
.p0-quick-stats{font-size:12px;color:var(--text-3);margin-top:8px;font-weight:500;}
.p0-quick-arrow{font-size:22px;color:var(--text-3);transition:all .15s;flex-shrink:0;}

/* ── Daily Briefing (Page 0) ── */
.p0-briefing-card{
  position:relative;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--mistral) 8%, var(--surface)),
    color-mix(in srgb, var(--wemag) 4%, var(--surface)));
  border:1px solid color-mix(in srgb, var(--mistral) 30%, var(--border));
  border-radius:var(--radius-xl);
  padding:22px 26px;
  margin-bottom:1.5rem;
  overflow:hidden;
  box-shadow:var(--shadow-md), 0 0 32px color-mix(in srgb, var(--mistral) 10%, transparent);
}
.p0-briefing-glow{
  position:absolute;top:-100px;right:-100px;
  width:280px;height:280px;
  background:radial-gradient(circle, color-mix(in srgb, var(--mistral) 25%, transparent), transparent 65%);
  pointer-events:none;border-radius:50%;
}
.p0-briefing-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:12px;position:relative;z-index:1;
}
.p0-briefing-greeting{
  font-size:15px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;letter-spacing:-.01em;
}
.p0-briefing-actions{display:flex;gap:4px}
.p0-briefing-btn{
  background:transparent;border:1px solid transparent;color:var(--text-3);
  width:30px;height:30px;border-radius:var(--radius);
  font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.p0-briefing-btn:hover{
  background:color-mix(in srgb, var(--mistral) 14%, var(--surface));
  color:var(--mistral);border-color:color-mix(in srgb, var(--mistral) 30%, var(--border));
}
.p0-briefing-body{
  font-size:15px;line-height:1.6;color:var(--text);
  position:relative;z-index:1;font-family:var(--sans);
  font-weight:400;
}
.p0-briefing-skeleton{
  height:15px;border-radius:4px;
  background:linear-gradient(90deg, var(--surface2), color-mix(in srgb, var(--text-3) 15%, var(--surface2)), var(--surface2));
  background-size:200% 100%;
  animation:p0Shimmer 1.4s infinite;
  margin-bottom:8px;width:100%;
}
@keyframes p0Shimmer{
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.p0-briefing-meta{
  font-size:11px;font-family:var(--mono);color:var(--text-3);
  margin-top:12px;position:relative;z-index:1;
}
.p0-briefing-fallback{
  font-size:13px;color:var(--text-2);
  display:flex;flex-direction:column;gap:6px;line-height:1.55;
}
.p0-briefing-fallback span{color:var(--text);font-weight:600}

/* ── Letzte Kataloge (Page 0) ── */
.p0-catalog-history-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
.p0-cat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px 16px;cursor:pointer;transition:all .15s;font-family:var(--sans);text-align:left;
  display:flex;flex-direction:column;gap:8px;position:relative;box-shadow:var(--shadow-sm);
}
.p0-cat-card:hover{
  border-color:var(--wemag);background:color-mix(in srgb,var(--wemag) 2.5%,var(--surface));
  transform:translateY(-1px);box-shadow:var(--shadow-md);
}
.p0-cat-card-head{display:flex;align-items:center;gap:10px;}
.p0-cat-card-hex{
  width:32px;height:36px;background:var(--wemag);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;line-height:1;flex-shrink:0;
}
.p0-cat-card-hex .p0-cat-num{font-size:12px}
.p0-cat-card-hex .p0-cat-yr{font-size:8px;opacity:.85}
.p0-cat-card-title{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.p0-cat-card-meta{font-size:11px;color:var(--text-2);display:flex;justify-content:space-between;gap:8px;font-weight:500;}
.p0-cat-card-del{
  position:absolute;top:8px;right:8px;width:22px;height:22px;border:none;background:none;
  color:var(--text-3);font-size:15px;line-height:1;cursor:pointer;border-radius:4px;opacity:0;transition:all .15s;
}
.p0-cat-card:hover .p0-cat-card-del{opacity:1}
.p0-cat-card-del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}

.p0-charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px;margin-top:1rem;}

/* ── Section-Header (Page 0 und überall) ── */
.section-header{
  font-size:13px;font-family:var(--sans);
  color:var(--text-2);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  margin:2rem 0 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.section-header-sub{
  font-size:12px;color:var(--text-3);font-weight:400;text-transform:none;letter-spacing:normal;
}
.section-header.tight{margin-top:1.5rem;}
.p0-chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow-sm);}
.p0-chart-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap;}
.p0-chart-title{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.01em;}
.p0-chart-sub{font-size:12px;color:var(--text-2);margin-top:3px;}
.p0-chart-body{min-height:160px;}
.p0-chart-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;height:160px;color:var(--text-3);font-size:13px;text-align:center;gap:8px;}
.p0-chart-empty-icon{font-size:32px;opacity:.4;}

/* ─── HISTORY-DRAWER (rechts) ─────────────────────────── */
.history-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9000;opacity:0;pointer-events:none;transition:opacity .2s;}
.history-drawer-overlay.open{opacity:1;pointer-events:auto;}
.history-drawer{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:90vw;background:var(--surface);border-left:1px solid var(--border);box-shadow:-4px 0 24px rgba(0,0,0,.08);z-index:9100;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;}
.history-drawer.open{transform:translateX(0);}
.history-drawer-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--surface2);gap:8px;flex-wrap:wrap;}
.history-drawer-head-text{flex:1;}
.history-drawer-title{font-size:14px;font-weight:600;color:var(--text);}
.history-drawer-sub{font-size:10px;font-family:var(--mono);color:var(--text-3);margin-top:2px;}
.history-drawer-actions{display:flex;gap:6px;}
.history-drawer-actions button{padding:5px 10px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);border-radius:var(--radius);font-family:var(--mono);font-size:10px;cursor:pointer;}
.history-drawer-actions button:hover{color:var(--text);border-color:var(--border-strong);}
.history-drawer-body{flex:1;overflow-y:auto;padding:14px;}

.history-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;transition:border-color .15s;}
.history-item:hover{border-color:var(--mistral);}
.history-item-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px;}
.history-item-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.3;flex:1;min-width:0;}
.history-item-del{width:22px;height:22px;border:none;background:none;color:var(--text-3);font-size:18px;line-height:1;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.history-item-del:hover{background:var(--danger-bg);color:var(--danger);}
.history-item-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.history-item-meta span{padding:2px 7px;background:var(--surface2);border-radius:10px;font-size:9px;font-family:var(--mono);color:var(--text-3);}
.history-item-meta .history-item-lang{background:color-mix(in srgb,var(--mistral) 12%,var(--surface2));color:var(--mistral);}
.history-item-preview{font-size:11px;color:var(--text-2);line-height:1.5;padding:8px 10px;background:var(--surface2);border-radius:var(--radius);margin-bottom:8px;max-height:60px;overflow:hidden;}
.history-item-restore{width:100%;padding:6px;border:1px solid var(--mistral);background:var(--surface);color:var(--mistral);border-radius:var(--radius);font-family:var(--mono);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;}
.history-item-restore:hover{background:var(--mistral);color:#fff;}

/* ─── SHORTCUTS HELP ──────────────────────────────────── */
.shortcuts-help-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10800;display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px);}
.shortcuts-help-overlay.open{display:flex;}
.shortcuts-help-modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);max-width:520px;width:100%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2);}
.shortcuts-help-head{padding:16px 20px;border-bottom:1px solid var(--border);background:var(--surface2);display:flex;align-items:center;justify-content:space-between;}
.shortcuts-help-title{font-size:14px;font-weight:600;color:var(--text);}
.shortcuts-help-list{padding:16px 20px;overflow-y:auto;}
.shortcuts-help-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);}
.shortcuts-help-row:last-child{border-bottom:none;}
.shortcuts-help-desc{font-size:13px;color:var(--text);}
.shortcuts-help-keys{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.shortcuts-help-key{padding:3px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;font-family:var(--mono);font-size:11px;color:var(--text-2);min-width:24px;text-align:center;box-shadow:0 1px 0 var(--border);}

/* ─── PAGES ─────────────────────────────────────────────── */
.page{display:none;}
.page.active{display:flex;flex-direction:column;flex:1;animation:pageFadeIn .25s ease-out;}
#page0.active,#page4.active,#page5.active{display:block;animation:pageFadeIn .25s ease-out;}
@keyframes pageFadeIn{
  from{opacity:0;transform:translateY(6px);}
  to{opacity:1;transform:translateY(0);}
}

/* ════════════════════════════════════════════════════════
   PAGE 1 — MANUELL
════════════════════════════════════════════════════════ */
.p1-layout{flex:1;display:grid;grid-template-columns:460px 1fr 280px;gap:0;max-width:1500px;margin:0 auto;width:100%;padding:1.5rem;align-items:start;}
.p1-left{padding-right:1.25rem;}
.p1-main{padding:0 1.25rem;border-left:1px solid var(--border);border-right:1px solid var(--border);}
.p1-right{padding-left:1.25rem;position:sticky;top:72px;}

/* drop zone */
.drop-zone{border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:background .15s,border-color .15s;margin-bottom:1rem;position:relative;background:var(--surface);}
.drop-zone:hover,.drop-zone.dragover{background:var(--surface2);border-color:var(--mistral);}
.drop-icon{font-size:28px;margin-bottom:6px;color:var(--text-3);}
.drop-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;}
.drop-sub{font-size:11px;color:var(--text-2);font-family:var(--mono);}

/* sidebar pdf */
.sp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1rem;}
.sp-head{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--border);background:var(--surface2);}
.sp-title{font-size:11px;font-weight:600;color:var(--text);}
.sp-ctrl{display:flex;align-items:center;gap:4px;}
.sp-ctrl button{background:none;border:1px solid var(--border);border-radius:4px;width:20px;height:20px;cursor:pointer;font-size:12px;color:var(--text);display:flex;align-items:center;justify-content:center;}
.sp-ctrl button:hover{background:var(--surface2);}
.sp-ctrl button:disabled{opacity:.3;cursor:not-allowed;}
.sp-ctrl span{font-size:10px;font-family:var(--mono);color:var(--text-2);padding:0 2px;}
.sp-canvas{background:#e8e6e0;overflow:auto;max-height:650px;display:flex;align-items:flex-start;justify-content:center;padding:10px;}
.sp-canvas canvas{display:block;box-shadow:0 1px 6px rgba(0,0,0,.15);background:#fff;}
.sp-empty{display:flex;align-items:center;justify-content:center;min-height:100px;font-size:11px;font-family:var(--mono);color:var(--text-3);}

/* file list */
.file-list{display:flex;flex-direction:column;gap:6px;margin-bottom:1rem;}
.file-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);}
.file-item.done{border-color:rgba(29,107,70,.25);}
.file-pdf-icon{width:26px;height:26px;border-radius:5px;background:var(--danger-bg);display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--danger);flex-shrink:0;font-family:var(--mono);font-weight:600;}
.file-info{flex:1;min-width:0;}
.file-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-meta{font-size:10px;color:var(--text-3);font-family:var(--mono);}
.file-status{font-size:10px;font-family:var(--mono);flex-shrink:0;}
.file-status.ready{color:var(--text-3);}
.file-status.done{color:var(--success);}
.file-remove{background:none;border:none;cursor:pointer;color:var(--text-3);font-size:16px;flex-shrink:0;}
.file-remove:hover{color:var(--danger);}
.progress-track{height:2px;background:var(--border);border-radius:2px;margin-top:4px;overflow:hidden;}
.progress-fill{height:100%;background:var(--mistral);border-radius:2px;transition:width .2s;}

/* form */
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1rem;box-shadow:var(--shadow-sm);}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:0;}
.field label{font-size:11px;font-weight:600;color:var(--text-2);font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:14px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none;transition:all .15s;line-height:1.5;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--border-strong);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--wemag);box-shadow:var(--ring);}
.webhook-row{display:flex;align-items:center;gap:6px;}
.webhook-row input{flex:1;}
.webhook-status{width:7px;height:7px;border-radius:50%;background:var(--text-3);flex-shrink:0;}
.webhook-status.ok{background:var(--success);}
.webhook-status.err{background:var(--danger);}

/* info box */
.info-box{display:flex;gap:8px;align-items:flex-start;padding:9px 12px;background:var(--mistral-bg);border:1px solid rgba(249,115,22,.2);border-radius:var(--radius);font-size:11px;color:var(--mistral);line-height:1.6;margin-bottom:1rem;}

/* buttons */
.action-bar{display:flex;gap:8px;margin-bottom:1rem;}
.btn-primary{background:var(--mistral);color:#fff;border:none;border-radius:var(--radius);padding:9px 18px;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px;transition:opacity .15s;}
.btn-primary:hover{opacity:.85;}
.btn-primary:disabled{opacity:.3;cursor:not-allowed;}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius);padding:8px 14px;font-family:var(--sans);font-size:12px;cursor:pointer;transition:background .15s;}
.btn-secondary:hover{background:var(--surface2);}
.btn-sm{font-size:11px;padding:4px 10px;font-family:var(--mono);background:none;border:1px solid var(--border);border-radius:6px;color:var(--text-2);cursor:pointer;}
.btn-sm:hover{background:var(--surface2);color:var(--text);}

/* pipeline */
.pipeline{display:flex;align-items:center;margin-bottom:1.25rem;padding:9px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.p-step{display:flex;align-items:center;gap:5px;font-size:10px;font-family:var(--mono);color:var(--text-3);transition:color .2s;}
.p-step.active{color:var(--text);}
.p-step.done{color:var(--success);}
.p-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}
.p-arrow{flex:1;text-align:center;font-size:10px;color:var(--border-strong);padding:0 5px;}

/* result tabs */
.preview-section{margin-top:0;}
.preview-tabs{display:flex;border-bottom:1px solid var(--border);}
.preview-tab{font-size:11px;font-family:var(--mono);font-weight:500;padding:7px 14px;cursor:pointer;border:none;background:none;color:var(--text-3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s;}
.preview-tab.active{color:var(--mistral);border-bottom-color:var(--mistral);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* edit panel */
.edit-panel{background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:1.25rem;}
.sec-title{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin:14px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border);}
.sec-title:first-child{margin-top:0;}
.edit-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:4px;}
.edit-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px;}
.edit-field{display:flex;flex-direction:column;gap:3px;}
.edit-label{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);}
.edit-input{font-family:var(--sans);font-size:12px;padding:6px 9px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none;transition:border-color .15s;width:100%;}
.edit-input:focus{border-color:var(--mistral);background:#fff;}
.edit-input.changed{border-color:var(--mistral);background:var(--mistral-bg);}
.pos-table-wrap{overflow-x:auto;margin-bottom:.75rem;}
.pos-table{width:100%;border-collapse:collapse;font-size:11px;}
.pos-table th{text-align:left;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);padding:5px 7px;border-bottom:1px solid var(--border);font-weight:500;}
.pos-table td{padding:3px 5px;border-bottom:1px solid var(--border);vertical-align:middle;}
.pos-table tr:last-child td{border-bottom:none;}
.pos-table tr:hover td{background:var(--surface2);}
.pos-input{font-family:var(--sans);font-size:11px;padding:3px 6px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--text);outline:none;width:100%;}
.pos-input:focus{border-color:var(--mistral);background:#fff;}
.pos-del-btn{background:none;border:none;cursor:pointer;color:var(--text-3);font-size:13px;padding:1px 3px;}
.pos-del-btn:hover{color:var(--danger);}
.pos-add-btn{display:flex;align-items:center;gap:5px;font-size:11px;font-family:var(--mono);color:var(--text-3);cursor:pointer;padding:5px 7px;border:1px dashed var(--border);border-radius:var(--radius);background:none;width:100%;margin-top:5px;}
.pos-add-btn:hover{color:var(--mistral);border-color:var(--mistral);}
.edit-totals{display:flex;justify-content:flex-end;gap:1.25rem;padding-top:.75rem;border-top:1px solid var(--border);margin-top:.5rem;}
.edit-total-item{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.edit-total-label{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);}
.edit-total-input{font-family:var(--mono);font-size:13px;font-weight:600;padding:3px 7px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);outline:none;text-align:right;width:100px;}
.edit-total-input:focus{border-color:var(--mistral);background:#fff;}
.edit-action-bar{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border);}
.changed-badge{font-size:11px;font-family:var(--mono);color:var(--mistral);display:none;}
.changed-badge.visible{display:block;}

/* extract panel */
.extract-panel,.result-card{background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);}
.extract-panel{padding:1.25rem;}
.extract-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1rem;}
.extract-field{display:flex;flex-direction:column;gap:3px;}
.extract-field-label{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);}
.extract-field-val{font-size:12px;font-weight:500;color:var(--text);}
.extract-field-val.empty{color:var(--text-3);font-style:italic;font-weight:400;}
.positions-table{width:100%;border-collapse:collapse;font-size:11px;}
.positions-table th{text-align:left;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);padding:5px 7px;border-bottom:1px solid var(--border);font-weight:500;}
.positions-table td{padding:6px 7px;border-bottom:1px solid var(--border);color:var(--text);}
.positions-table tr:last-child td{border-bottom:none;}
.total-row{display:flex;justify-content:flex-end;gap:1.5rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border);}
.total-item{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.total-label{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);}
.total-val{font-weight:600;color:var(--text);}
.total-val.main{font-size:15px;}
.mistral-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:var(--mono);background:var(--mistral-bg);color:var(--mistral);border:1px solid rgba(249,115,22,.2);padding:2px 7px;border-radius:20px;margin-bottom:10px;}

/* json / xml result */
.result-card{overflow:hidden;}
.result-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--border);background:var(--surface2);}
.result-title{font-size:11px;font-family:var(--mono);font-weight:500;color:var(--text-2);}
.result-actions{display:flex;gap:7px;align-items:center;}
.btn-copy{font-size:10px;font-family:var(--mono);background:none;border:1px solid var(--border);border-radius:5px;padding:3px 9px;color:var(--text-2);cursor:pointer;}
.btn-copy:hover{background:var(--surface);color:var(--text);}
.result-body{font-family:var(--mono);font-size:11px;color:var(--text);line-height:1.7;padding:14px;max-height:480px;overflow-y:auto;white-space:pre;}

/* processing */
.processing-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-top:1rem;}
.processing-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid var(--border);background:var(--surface2);}

/* sidebar cards */
.sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;margin-bottom:1rem;}
.sidebar-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:11px;}
.stat-row:last-child{border-bottom:none;}
.stat-label{color:var(--text-2);}
.stat-val{font-family:var(--mono);font-weight:500;color:var(--text);}
.flow-steps{display:flex;flex-direction:column;gap:6px;}
.flow-step{display:flex;align-items:flex-start;gap:7px;font-size:11px;color:var(--text-2);}
.flow-num{width:16px;height:16px;border-radius:50%;border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:9px;font-family:var(--mono);flex-shrink:0;color:var(--text-2);}
.flow-step.active .flow-num{background:var(--mistral);color:#fff;border-color:var(--mistral);}
.flow-step.done .flow-num{background:var(--success-bg);color:var(--success);border-color:var(--success);}

/* usage */
.usage-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem;margin-bottom:1rem;}
.usage-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}
.usage-reset-btn{font-size:10px;font-family:var(--mono);color:var(--text-3);cursor:pointer;background:none;border:none;padding:0;}
.usage-reset-btn:hover{color:var(--danger);}
.usage-meters{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.usage-meter{display:flex;flex-direction:column;gap:3px;}
.usage-meter-head{display:flex;justify-content:space-between;align-items:baseline;}
.usage-meter-label{font-size:10px;color:var(--text-2);display:flex;align-items:center;gap:4px;}
.usage-meter-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.usage-meter-val{font-size:10px;font-family:var(--mono);color:var(--text);font-weight:500;}
.usage-bar-track{height:3px;background:var(--surface2);border-radius:3px;overflow:hidden;}
.usage-bar-fill{height:100%;border-radius:3px;transition:width .5s ease;}
.usage-cost-block{padding:8px 0 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-end;}
.usage-cost-label{font-size:11px;color:var(--text-2);}
.usage-cost-right{text-align:right;}
.usage-cost-val{font-size:17px;font-weight:600;font-family:var(--mono);color:var(--text);line-height:1;}
.usage-cost-sub{font-size:10px;color:var(--text-3);font-family:var(--mono);margin-top:2px;}

/* badges */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:var(--mono);padding:2px 7px;border-radius:20px;font-weight:500;}
.badge-success{background:var(--success-bg);color:var(--success);}
.badge-info{background:var(--mistral-bg);color:var(--mistral);}
.badge-danger{background:var(--danger-bg);color:var(--danger);}
.badge-warn{background:var(--warn-bg);color:var(--warn);}
.badge-neutral{background:var(--surface2);color:var(--text-2);}

/* ════════════════════════════════════════════════════════
   PAGE 2 — AUTOMATISCH
════════════════════════════════════════════════════════ */
.p2-layout{flex:1;max-width:1500px;margin:0 auto;width:100%;padding:1.5rem;}
.p2-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;}
.p2-title{font-size:20px;font-weight:600;letter-spacing:-.02em;}
.p2-sub{font-size:12px;color:var(--text-2);margin-top:2px;}
.p2-actions{display:flex;gap:8px;align-items:center;}

/* two-col layout for page 2 */
.p2-grid{display:grid;grid-template-columns:1fr 380px;gap:1.5rem;align-items:start;}
.p2-main{}
.p2-sidebar{position:sticky;top:72px;}

/* DOCUMENT LIST */
.doc-list{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;}
.doc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.doc-card:hover{border-color:var(--border-strong);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.doc-card.selected{border-color:var(--mistral);}
.doc-card-header{display:flex;align-items:center;gap:12px;padding:12px 16px;}
.doc-icon{width:36px;height:36px;border-radius:8px;background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.doc-icon.ok{background:var(--success-bg);}
.doc-icon.err{background:var(--danger-bg);}
.doc-icon.warn{background:var(--warn-bg);}
.doc-info{flex:1;min-width:0;}
.doc-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.doc-meta{font-size:11px;color:var(--text-2);font-family:var(--mono);margin-top:2px;display:flex;gap:12px;}
.doc-meta span{display:flex;align-items:center;gap:4px;}
.doc-status-col{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.doc-card-body{padding:0 16px 14px;border-top:1px solid var(--border);margin-top:0;display:none;}
.doc-card.selected .doc-card-body{display:block;}
.doc-errors{margin-top:10px;}
.doc-error-item{display:flex;align-items:flex-start;gap:7px;font-size:11px;color:var(--danger);padding:4px 0;}
.doc-warn-item{display:flex;align-items:flex-start;gap:7px;font-size:11px;color:var(--warn);padding:4px 0;}

/* MAPPING TABLE */
.mapping-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1.5rem;}
.mapping-head{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface2);display:flex;align-items:center;justify-content:space-between;}
.mapping-head-title{font-size:12px;font-weight:600;color:var(--text);}
.mapping-table{width:100%;border-collapse:collapse;font-size:11px;}
.mapping-table th{text-align:left;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);padding:7px 14px;border-bottom:1px solid var(--border);font-weight:500;background:var(--surface2);}
.mapping-table td{padding:7px 14px;border-bottom:1px solid var(--border);vertical-align:top;}
.mapping-table tr:last-child td{border-bottom:none;}
.mapping-table tr:hover td{background:#fafaf8;}
.mapping-field{font-family:var(--mono);font-size:10px;color:var(--info);background:var(--info-bg);padding:1px 6px;border-radius:4px;display:inline-block;}
.mapping-arrow{color:var(--text-3);font-size:12px;text-align:center;}
.mapping-target{font-family:var(--mono);font-size:10px;color:var(--success);background:var(--success-bg);padding:1px 6px;border-radius:4px;display:inline-block;}
.mapping-desc{color:var(--text-2);font-size:11px;}
.mapping-sample{font-family:var(--mono);font-size:10px;color:var(--text-3);}

/* PROFILE CARDS */
.profile-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1rem;}
.profile-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.profile-avatar{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;}
.profile-name{font-size:13px;font-weight:600;}
.profile-sub{font-size:11px;color:var(--text-2);font-family:var(--mono);}
.profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;}
.profile-stat{background:var(--surface2);border-radius:8px;padding:8px;text-align:center;}
.profile-stat-val{font-size:16px;font-weight:600;font-family:var(--mono);color:var(--text);}
.profile-stat-lbl{font-size:9px;font-family:var(--mono);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-top:1px;}

/* upload area page 2 */
.p2-drop{border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);padding:1.5rem;text-align:center;cursor:pointer;transition:background .15s,border-color .15s;background:var(--surface);margin-bottom:1.5rem;}
.p2-drop:hover,.p2-drop.dragover{background:var(--surface2);border-color:var(--mistral);}
.p2-drop-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;}
.p2-drop-sub{font-size:11px;color:var(--text-2);font-family:var(--mono);}

/* webhook config page 2 */
.p2-config{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1.5rem;}
.p2-config-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:10px;}

/* stats overview page 2 */
.p2-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1.5rem;}
/* ════════ PAGE 2 — HOTFOLDER MONITOR ════════ */
.p2-wrap{flex:1;max-width:1800px;margin:0 auto;width:100%;padding:1.5rem 2rem;}
.p2-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:10px;}
.p2-title-block{}
.p2-title{font-size:20px;font-weight:600;letter-spacing:-.02em;}
.p2-sub{font-size:12px;color:var(--text-2);margin-top:2px;}
.p2-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.p2-status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-3);flex-shrink:0;}
.p2-status-dot.polling{background:var(--success);animation:pulse 2s ease-in-out infinite;}
.p2-status-dot.error{background:var(--danger);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.p2-status-label{font-size:11px;font-family:var(--mono);color:var(--text-2);}
.p2-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:1.25rem;}
.p2-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.875rem 1rem;display:flex;align-items:center;gap:10px;}
.p2-kpi-icon{font-size:20px;flex-shrink:0;}
.p2-kpi-val{font-size:22px;font-weight:600;font-family:var(--mono);color:var(--text);line-height:1;}
.p2-kpi-lbl{font-size:10px;color:var(--text-2);margin-top:2px;}
/* CONFIG PANEL */
.p2-config-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin-bottom:1.25rem;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end;}
.p2-config-panel .field label{font-size:10px;font-weight:500;color:var(--text-2);font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;}
.p2-config-panel .field input{font-family:var(--sans);font-size:12px;padding:7px 9px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none;width:100%;}
.p2-config-panel .field input:focus{border-color:var(--mistral);}
/* TABLE */
.p2-table-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.p2-table-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface2);}
.p2-table-title{font-size:12px;font-weight:600;color:var(--text);}
.p2-table-actions{display:flex;align-items:center;gap:8px;}
.p2-search{font-family:var(--mono);font-size:11px;padding:5px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none;width:200px;}
.p2-search:focus{border-color:var(--mistral);}
table.p2-tbl{width:100%;border-collapse:collapse;}
table.p2-tbl th{text-align:left;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);padding:8px 14px;border-bottom:1px solid var(--border);font-weight:500;white-space:nowrap;cursor:pointer;user-select:none;}
table.p2-tbl th:hover{color:var(--text);}
table.p2-tbl th .sort-arrow{margin-left:4px;opacity:.4;}
table.p2-tbl th.sorted .sort-arrow{opacity:1;color:var(--mistral);}
table.p2-tbl td{padding:9px 14px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:middle;}
table.p2-tbl tr:last-child td{border-bottom:none;}
table.p2-tbl tr:hover td{background:#fafaf8;cursor:pointer;}
table.p2-tbl tr.p2-row-selected td{background:var(--mistral-bg);}
.p2-fname{font-family:var(--mono);font-size:11px;font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.p2-profile-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:var(--mono);padding:2px 7px;border-radius:20px;font-weight:600;}
.p2-status-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:var(--mono);padding:2px 8px;border-radius:20px;font-weight:500;}
.status-ok{background:var(--success-bg);color:var(--success);}
.status-warn{background:var(--warn-bg);color:var(--warn);}
.status-error{background:var(--danger-bg);color:var(--danger);}
.status-processing{background:var(--info-bg);color:var(--info);}
.status-pending{background:var(--surface2);color:var(--text-2);}
.p2-empty{text-align:center;padding:3rem;color:var(--text-3);font-size:12px;font-family:var(--mono);}
/* PAGINATION */
.p2-pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--border);background:var(--surface2);}
.p2-page-info{font-size:11px;font-family:var(--mono);color:var(--text-2);}
.p2-page-btns{display:flex;gap:4px;}
.p2-page-btn{font-family:var(--mono);font-size:11px;padding:3px 9px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text-2);cursor:pointer;}
.p2-page-btn:hover{background:var(--surface2);color:var(--text);}
.p2-page-btn.active{background:var(--mistral);color:#fff;border-color:var(--mistral);}
.p2-page-btn:disabled{opacity:.35;cursor:not-allowed;}
/* DETAIL DRAWER */
/* DRAWER ALS MODAL */
.p2-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:none;align-items:center;justify-content:center;padding:1.5rem;}
.p2-drawer-overlay.open{display:flex;}
.p2-drawer{background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:1100px;height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 48px rgba(0,0,0,.25);}
.p2-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0;}
.p2-drawer-title{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.p2-drawer-close{background:none;border:none;font-size:22px;color:var(--text-3);cursor:pointer;line-height:1;padding:2px 6px;border-radius:6px;flex-shrink:0;}
.p2-drawer-close:hover{background:var(--border);color:var(--text);}
.p2-drawer-body{overflow-y:auto;flex:1;}
.p2-drawer-map{padding:1rem;border-right:1px solid var(--border);}
.p2-drawer-xml{padding:1rem;}
.p2-drawer-section{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-bottom:8px;}
.map-tbl{width:100%;border-collapse:collapse;font-size:11px;}
.map-tbl th{text-align:left;font-family:var(--mono);font-size:9px;text-transform:uppercase;color:var(--text-3);padding:4px 6px;border-bottom:1px solid var(--border);}
.map-tbl td{padding:5px 6px;border-bottom:1px solid var(--border);vertical-align:top;}
.map-tbl tr:last-child td{border-bottom:none;}
.p2-xml-pre{font-family:var(--mono);font-size:10px;color:var(--text);line-height:1.6;max-height:320px;overflow-y:auto;white-space:pre;background:var(--surface2);padding:10px;border-radius:var(--radius);border:1px solid var(--border);}
.p2-refresh-ring{display:inline-block;width:10px;height:10px;border:2px solid var(--border);border-top-color:var(--mistral);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;}
/* ════ PAGE 3 — PROFIL-DETAIL ════ */
.p3-grid{display:grid;grid-template-columns:280px 1fr;gap:1.5rem;align-items:start;}
.p3-sidebar{position:sticky;top:72px;display:flex;flex-direction:column;gap:10px;}
.p3-prof-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);cursor:pointer;transition:all .15s;text-align:left;width:100%;}
.p3-prof-btn:hover{border-color:var(--border-strong);background:var(--surface2);}
.p3-prof-btn.active{background:var(--surface);box-shadow:0 0 0 2px currentColor;}
.p3-avatar{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
.p3-btn-info{}
.p3-btn-name{font-size:13px;font-weight:600;color:var(--text);}
.p3-btn-sub{font-size:10px;font-family:var(--mono);color:var(--text-3);margin-top:1px;}
.p3-main-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.p3-card-head{padding:16px 20px;border-bottom:1px solid var(--border);background:var(--surface2);display:flex;align-items:center;gap:14px;}
.p3-card-title{font-size:16px;font-weight:600;color:var(--text);}
.p3-card-sub{font-size:11px;font-family:var(--mono);color:var(--text-2);margin-top:2px;}
.p3-section{padding:16px 20px;border-bottom:1px solid var(--border);}
.p3-section:last-child{border-bottom:none;}
.p3-section-title{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-bottom:12px;}
.p3-detect-box{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;font-size:11px;font-family:var(--mono);color:var(--text);line-height:1.7;}
.p3-detect-box b{color:var(--mistral);}
.p3-map-table{width:100%;border-collapse:collapse;}
.p3-map-table th{text-align:left;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);padding:6px 10px;border-bottom:1px solid var(--border);font-weight:500;}
.p3-map-table td{padding:8px 10px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:top;}
.p3-map-table tr:last-child td{border-bottom:none;}
.p3-map-table tr:hover td{background:var(--surface2);}
.p3-src{font-family:var(--mono);font-size:10px;color:var(--info);background:var(--info-bg);padding:2px 7px;border-radius:4px;display:inline-block;white-space:nowrap;}
.p3-arr{color:var(--text-3);font-size:13px;text-align:center;}
.p3-tgt{font-family:var(--mono);font-size:10px;color:var(--success);background:var(--success-bg);padding:2px 7px;border-radius:4px;display:inline-block;white-space:nowrap;}
.p3-desc{color:var(--text-2);}
.p3-transform{font-size:10px;font-family:var(--mono);color:var(--text-3);margin-top:2px;}
.p3-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.p3-stat{text-align:center;background:var(--surface2);border-radius:var(--radius);padding:10px;}
.p3-stat-val{font-size:20px;font-weight:700;font-family:var(--mono);color:var(--text);}
.p3-stat-lbl{font-size:10px;color:var(--text-2);margin-top:2px;}
/* ════ CHART & NEUE FEATURES ════ */
.p2-chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin-bottom:1.25rem;}
.p2-chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.p2-chart-title{font-size:12px;font-weight:600;color:var(--text);}
.p2-chart-filters{display:flex;gap:6px;}
.p2-chart-filter{font-size:11px;font-family:var(--mono);padding:3px 10px;border:1px solid var(--border);border-radius:20px;background:none;color:var(--text-2);cursor:pointer;}
.p2-chart-filter.active{background:var(--mistral);color:#fff;border-color:var(--mistral);}
.chart-bars{display:flex;align-items:flex-end;gap:4px;height:80px;padding-bottom:20px;position:relative;}
.chart-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:0;}
.chart-bar{width:100%;border-radius:3px 3px 0 0;transition:height .3s ease;cursor:pointer;position:relative;}
.chart-bar:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--text);color:#fff;font-size:10px;font-family:var(--mono);padding:3px 7px;border-radius:4px;white-space:nowrap;z-index:10;}
.chart-bar-lbl{font-size:9px;font-family:var(--mono);color:var(--text-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}
/* Gesamtbetrag KPI */
.kpi-amount{font-size:17px !important;}
/* Datum-Filter */
.p2-date-filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.p2-date-btn{font-size:11px;font-family:var(--mono);padding:3px 10px;border:1px solid var(--border);border-radius:20px;background:none;color:var(--text-2);cursor:pointer;transition:all .15s;}
.p2-date-btn:hover{border-color:var(--mistral);color:var(--mistral);}
.p2-date-btn.active{background:var(--mistral);color:#fff;border-color:var(--mistral);}
/* Warnungs-Detail im Drawer */
.warn-items-list{margin-top:6px;display:flex;flex-direction:column;gap:3px;}
.warn-item-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:5px 8px;background:var(--warn-bg);border-radius:6px;font-size:11px;}
.warn-item-pos{font-family:var(--mono);font-weight:600;color:var(--warn);white-space:nowrap;}
.warn-item-desc{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.warn-item-qty{font-family:var(--mono);color:var(--warn);white-space:nowrap;}
/* CSV Export Button */
.btn-export{font-size:11px;font-family:var(--mono);padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text-2);cursor:pointer;display:flex;align-items:center;gap:5px;}
.btn-export:hover{border-color:var(--success);color:var(--success);}
/* Notification dot */
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);position:absolute;top:-2px;right:-2px;display:none;}
.notif-dot.show{display:block;animation:pulse 1.5s ease-in-out infinite;}

/* ════ XML HIGHLIGHTING + LOG ════ */
/* Drawer: 3 Tabs */
.drawer-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--surface2);}
.drawer-tab{font-size:11px;font-family:var(--mono);padding:8px 16px;border:none;background:none;cursor:pointer;color:var(--text-3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s;}
.drawer-tab:hover{color:var(--text);}
.drawer-tab.active{color:var(--mistral);border-bottom-color:var(--mistral);}
.drawer-panel{display:none;padding:1rem 1.25rem;}
.drawer-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.drawer-panel.full{display:block;}
/* XML Highlighting */
.xml-view{font-family:var(--mono);font-size:10.5px;line-height:1.7;max-height:420px;overflow-y:auto;background:#1e1e2e;padding:14px;border-radius:var(--radius);border:1px solid var(--border);white-space:pre;tab-size:2;}
.xml-tag{color:#89b4fa;}
.xml-attr{color:#a6e3a1;}
.xml-val{color:#f9e2af;}
.xml-comment{color:#6c7086;font-style:italic;}
.xml-decl{color:#cba6f7;}
.xml-text{color:#cdd6f4;}
/* Letzter Lauf */
.last-run-bar{display:flex;align-items:center;gap:16px;padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:1.25rem;font-size:11px;flex-wrap:wrap;}
.last-run-item{display:flex;align-items:center;gap:6px;color:var(--text-2);}
.last-run-item b{color:var(--text);font-family:var(--mono);}
.last-run-dot{width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0;}
/* Verarbeitungs-Log */
.log-timeline{display:flex;flex-direction:column;gap:0;}
.log-entry{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);position:relative;}
.log-entry:last-child{border-bottom:none;}
.log-dot-col{display:flex;flex-direction:column;align-items:center;gap:0;flex-shrink:0;}
.log-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:3px;}
.log-line{width:1px;flex:1;background:var(--border);margin-top:2px;}
.log-entry:last-child .log-line{display:none;}
.log-body{flex:1;min-width:0;}
.log-title{font-size:12px;font-weight:500;color:var(--text);}
.log-meta{font-size:10px;font-family:var(--mono);color:var(--text-3);margin-top:2px;}
.log-detail{font-size:11px;color:var(--text-2);margin-top:4px;line-height:1.5;}

/* ════ PAGE 4 — BESTELLVERGLEICH ════ */
.p4-wrap{max-width:1800px;margin:0 auto;width:100%;padding:1.5rem 2rem;}
.p4-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:10px;}
.p4-selector{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.p4-selector label{font-size:11px;font-family:var(--mono);color:var(--text-2);white-space:nowrap;}
.p4-selector select{font-family:var(--sans);font-size:12px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none;flex:1;min-width:200px;}
.p4-selector select:focus{border-color:var(--mistral);}
.p4-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start;}
.p4-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.p4-col-head{padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface2);display:flex;align-items:center;justify-content:space-between;}
.p4-col-title{font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;}
.p4-col-sub{font-size:10px;font-family:var(--mono);color:var(--text-2);}
.p4-section{padding:10px 16px;border-bottom:1px solid var(--border);}
.p4-section-title{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-bottom:8px;}
.p4-field-row{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:12px;}
.p4-field-label{color:var(--text-2);font-size:11px;}
.p4-field-val{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--text);}
.p4-field-val.diff-warn{color:var(--warn);background:var(--warn-bg);padding:1px 6px;border-radius:4px;}
.p4-field-val.diff-ok{color:var(--success);}
.p4-table{width:100%;border-collapse:collapse;font-size:11px;}
.p4-table th{text-align:left;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
.p4-table td{padding:6px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
.p4-table tr:last-child td{border-bottom:none;}
.p4-diff-match{background:transparent;}
.p4-diff-warn{background:#fffbeb;color:var(--warn);}
.p4-diff-error{background:#fef2f2;color:var(--danger);}
.p4-diff-badge{font-size:9px;font-family:var(--mono);padding:1px 5px;border-radius:4px;margin-left:4px;}
.p4-diff-badge.warn{background:var(--warn-bg);color:var(--warn);}
.p4-diff-badge.ok{background:var(--success-bg);color:var(--success);}
.p4-empty{text-align:center;padding:3rem;color:var(--text-3);font-size:12px;font-family:var(--mono);}
.p4-legend{display:flex;gap:12px;font-size:11px;align-items:center;}
.p4-legend-item{display:flex;align-items:center;gap:5px;}
.p4-legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
/* E-Mail Template */
.p4-email-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1.25rem;}
.p4-email-head{padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface2);display:flex;align-items:center;justify-content:space-between;}
.p4-email-title{font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;}
.p4-email-tabs{display:flex;border-bottom:1px solid var(--border);}
.p4-email-tab{font-size:11px;font-family:var(--mono);padding:7px 16px;border:none;background:none;cursor:pointer;color:var(--text-3);border-bottom:2px solid transparent;margin-bottom:-1px;}
.p4-email-tab.active{color:var(--mistral);border-bottom-color:var(--mistral);}
.p4-email-body{font-family:var(--mono);font-size:11px;line-height:1.7;padding:1rem;white-space:pre-wrap;max-height:300px;overflow-y:auto;background:var(--bg);color:var(--text);}
@media(max-width:1000px){.p4-grid{grid-template-columns:1fr;}}

/* ── Bestellvergleich Detailansicht ─── */
.p4-view-toggle{display:flex;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:2px;}
.p4-view-btn{padding:4px 12px;border:none;border-radius:calc(var(--radius) - 2px);font-family:var(--mono);font-size:10px;font-weight:600;cursor:pointer;transition:all .15s;background:none;color:var(--text-3);}
.p4-view-btn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.1);}
.p4-detail-grid{display:flex;flex-direction:column;gap:0;}
.p4-detail-row{display:grid;grid-template-columns:40px 1fr 1fr;border-bottom:1px solid var(--border);transition:background .1s;}
.p4-detail-row:last-child{border-bottom:none;}
.p4-detail-row:hover{background:var(--surface2);}
.p4-detail-row.has-diff{background:rgba(245,158,11,.05);}
.p4-detail-row.has-diff:hover{background:rgba(245,158,11,.1);}
.p4-detail-row.has-error{background:rgba(239,68,68,.05);}
.p4-detail-row.has-error:hover{background:rgba(239,68,68,.08);}
.p4-detail-pos{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--text-3);border-right:1px solid var(--border);padding:10px 6px;}
.p4-detail-cell{padding:8px 12px;font-size:11px;}
.p4-detail-cell.supplier{border-right:1px solid var(--border);}

/* Lieferanschriften-Block über der Tabelle */
.p4-addr-block{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:0.75rem;overflow:hidden;}
.p4-addr-cell{padding:10px 14px;background:var(--surface);}
.p4-addr-lbl{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:4px;}
.p4-addr-body{font-size:11px;color:var(--text);line-height:1.45;}
.p4-addr-body > div{display:block;}
.p4-plz-warn{background:rgba(245,158,11,.18);color:#b45309;font-weight:700;padding:1px 5px;border-radius:3px;font-family:var(--mono);}
.p4-detail-label{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:3px;}
.p4-detail-art{font-family:var(--mono);font-size:10px;color:var(--text-2);margin-bottom:2px;}
.p4-detail-name{font-size:12px;font-weight:500;color:var(--text);margin-bottom:4px;line-height:1.3;}
.p4-detail-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.p4-detail-val{font-family:var(--mono);font-size:11px;color:var(--text);}
.p4-detail-val.changed{color:var(--warn);font-weight:700;background:rgba(245,158,11,.12);padding:1px 5px;border-radius:3px;}
.p4-detail-val.missing{color:var(--danger);font-style:italic;}
.p4-diff-chip{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-family:var(--mono);font-weight:700;padding:2px 6px;border-radius:10px;text-transform:uppercase;letter-spacing:.05em;}
.p4-diff-chip.warn{background:rgba(245,158,11,.15);color:#d97706;}
.p4-diff-chip.warnsoft{background:rgba(250,204,21,.18);color:#a16207;}
.p4-diff-chip.err{background:rgba(239,68,68,.12);color:#dc2626;}
.p4-diff-chip.ok{background:rgba(34,197,94,.12);color:#16a34a;}

/* Editierbare ORDRSP-Felder im Bestellvergleich */
.p4-edit-lbl{color:var(--text-3);font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;}
.p4-edit-inp{font-family:var(--mono);font-size:11px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:2px 5px;transition:border-color .15s,background .15s;}
.p4-edit-inp:focus{outline:none;border-color:var(--mistral);background:var(--surface2);}
.p4-edit-inp:disabled{background:transparent;border-color:transparent;color:var(--text-2);}
.p4-edit-inp.art{width:120px;}
.p4-edit-inp.name{width:100%;margin:2px 0 4px;font-weight:500;}
.p4-edit-inp.num{width:78px;text-align:right;}
.p4-edit-inp.unit{width:50px;text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:.03em;margin-left:2px;}
.p4-edit-inp.date{width:120px;}
.p4-edit-inp.changed{border-color:var(--warn);background:rgba(245,158,11,.10);color:#d97706;font-weight:700;}
.p4-edit-inp.warnsoft{border-color:rgba(250,204,21,.5);background:rgba(250,204,21,.06);color:#a16207;font-weight:500;}
.p4-detail-val.warnsoft{color:#a16207;font-weight:500;background:rgba(250,204,21,.07);padding:1px 5px;border-radius:3px;}
.p4-edit-inp.okv{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.06);}

/* Bestätigungs-Leiste */
.p4-confirm-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-top:2px solid var(--border);background:var(--surface2);flex-wrap:wrap;}
.p4-confirm-hint{font-size:11px;color:var(--text-2);font-family:var(--mono);}
.p4-confirm-btn{padding:10px 20px;border-radius:8px;border:none;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;background:var(--success,#16a34a);color:#fff;transition:opacity .15s,background .15s;white-space:nowrap;}
.p4-confirm-btn:hover:not(:disabled){opacity:.9;}
.p4-confirm-btn.disabled,.p4-confirm-btn:disabled{background:var(--border-strong,#cbd5e1);color:var(--text-3);cursor:not-allowed;}
.p4-confirm-btn.confirmed{background:#16a34a;color:#fff;cursor:default;opacity:1;}
.p4-summary-bar{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--surface2);border-bottom:1px solid var(--border);font-size:11px;flex-wrap:wrap;}
.p4-summary-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;font-family:var(--mono);font-size:10px;font-weight:600;}
.p4-summary-pill.warn{background:rgba(245,158,11,.15);color:#d97706;}
.p4-summary-pill.err{background:rgba(239,68,68,.12);color:#dc2626;}
.p4-summary-pill.ok{background:rgba(34,197,94,.12);color:#16a34a;}
.p4-summary-pill.clickable{cursor:pointer;transition:filter .12s,outline-color .12s;}
.p4-summary-pill.clickable:hover{filter:brightness(.95);}
.p4-summary-pill.active{outline:2px solid currentColor;outline-offset:1px;}
.p4-filter-bar{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--surface);}
.p4-filter-btn{padding:3px 10px;border:1px solid var(--border);border-radius:var(--radius);font-family:var(--mono);font-size:10px;font-weight:600;background:none;color:var(--text-3);cursor:pointer;transition:all .15s;}
.p4-filter-btn.active{background:var(--mistral);color:#fff;border-color:var(--mistral);}

.nav-admin-btn{display:flex;align-items:center;gap:5px;padding:0 12px;height:56px;border:none;background:none;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--text-2);cursor:pointer;transition:color .15s;}
.nav-admin-btn:hover{color:var(--text);}
.admin-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;display:none;align-items:center;justify-content:center;padding:1.5rem;}
.admin-modal-overlay.open{display:flex;}
.admin-modal{background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:540px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 48px rgba(0,0,0,.25);}
.admin-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0;}
.admin-modal-title{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;}
.admin-modal-body{overflow-y:auto;flex:1;padding:1.25rem 1.5rem;}
.admin-section{margin-bottom:1.25rem;}
.admin-section-title{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.admin-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.admin-label{font-size:12px;font-weight:500;color:var(--text-2);display:flex;align-items:center;gap:6px;}
.admin-input{font-family:var(--sans);font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none;transition:border-color .15s;}
.admin-input:focus{border-color:var(--mistral);}
.admin-input[type=checkbox]{width:16px;height:16px;accent-color:var(--mistral);}
.admin-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;}
.admin-toggle{position:relative;display:inline-block;width:40px;height:22px;}
.admin-toggle input{opacity:0;width:0;height:0;}
.admin-toggle-slider{position:absolute;inset:0;background:var(--border-strong);border-radius:22px;transition:.2s;cursor:pointer;}
.admin-toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
.admin-toggle input:checked + .admin-toggle-slider{background:var(--mistral);}
.admin-toggle input:checked + .admin-toggle-slider:before{transform:translateX(18px);}
.admin-test-btn{font-size:11px;font-family:var(--mono);padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius);background:none;color:var(--text-2);cursor:pointer;margin-top:4px;}
.admin-test-btn:hover{border-color:var(--success);color:var(--success);}
.admin-modal-footer{padding:12px 20px;border-top:1px solid var(--border);background:var(--surface2);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;}
.admin-select{font-family:var(--sans);font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none;width:100%;}
.admin-select:focus{border-color:var(--mistral);}
.admin-tag{display:inline-flex;align-items:center;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:2px 8px;font-size:11px;font-family:var(--mono);color:var(--text);}
.admin-tag button{background:none;border:none;cursor:pointer;color:var(--text-3);font-size:14px;line-height:1;padding:0;}
.admin-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}

@media(max-width:900px){.p3-grid{grid-template-columns:1fr;}.p3-sidebar{position:static;}.p3-stats-grid{grid-template-columns:1fr 1fr;}}

/* ════ CHART & NEUE FEATURES ════ */
.p2-chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin-bottom:1.25rem;}
.p2-chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.p2-chart-title{font-size:12px;font-weight:600;color:var(--text);}
.p2-chart-filters{display:flex;gap:6px;}
.p2-chart-filter{font-size:11px;font-family:var(--mono);padding:3px 10px;border:1px solid var(--border);border-radius:20px;background:none;color:var(--text-2);cursor:pointer;}
.p2-chart-filter.active{background:var(--mistral);color:#fff;border-color:var(--mistral);}
.chart-bars{display:flex;align-items:flex-end;gap:4px;height:80px;padding-bottom:20px;position:relative;}
.chart-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:0;}
.chart-bar{width:100%;border-radius:3px 3px 0 0;transition:height .3s ease;cursor:pointer;position:relative;}
.chart-bar:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--text);color:#fff;font-size:10px;font-family:var(--mono);padding:3px 7px;border-radius:4px;white-space:nowrap;z-index:10;}
.chart-bar-lbl{font-size:9px;font-family:var(--mono);color:var(--text-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}
/* Gesamtbetrag KPI */
.kpi-amount{font-size:17px !important;}
/* Datum-Filter */
.p2-date-filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.p2-date-btn{font-size:11px;font-family:var(--mono);padding:3px 10px;border:1px solid var(--border);border-radius:20px;background:none;color:var(--text-2);cursor:pointer;transition:all .15s;}
.p2-date-btn:hover{border-color:var(--mistral);color:var(--mistral);}
.p2-date-btn.active{background:var(--mistral);color:#fff;border-color:var(--mistral);}
/* Warnungs-Detail im Drawer */
.warn-items-list{margin-top:6px;display:flex;flex-direction:column;gap:3px;}
.warn-item-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:5px 8px;background:var(--warn-bg);border-radius:6px;font-size:11px;}
.warn-item-pos{font-family:var(--mono);font-weight:600;color:var(--warn);white-space:nowrap;}
.warn-item-desc{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.warn-item-qty{font-family:var(--mono);color:var(--warn);white-space:nowrap;}
/* CSV Export Button */
.btn-export{font-size:11px;font-family:var(--mono);padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text-2);cursor:pointer;display:flex;align-items:center;gap:5px;}
.btn-export:hover{border-color:var(--success);color:var(--success);}
/* Notification dot */
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);position:absolute;top:-2px;right:-2px;display:none;}
.notif-dot.show{display:block;animation:pulse 1.5s ease-in-out infinite;}

/* ════ XML HIGHLIGHTING + LOG ════ */
/* Drawer: 3 Tabs */
/* XML Highlighting */
.xml-view{font-family:var(--mono);font-size:10.5px;line-height:1.7;max-height:420px;overflow-y:auto;background:#1e1e2e;padding:14px;border-radius:var(--radius);border:1px solid var(--border);white-space:pre;tab-size:2;}
.xml-tag{color:#89b4fa;}
.xml-attr{color:#a6e3a1;}
.xml-val{color:#f9e2af;}
.xml-comment{color:#6c7086;font-style:italic;}
.xml-decl{color:#cba6f7;}
.xml-text{color:#cdd6f4;}
/* Letzter Lauf */
.last-run-bar{display:flex;align-items:center;gap:16px;padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:1.25rem;font-size:11px;flex-wrap:wrap;}
.last-run-item{display:flex;align-items:center;gap:6px;color:var(--text-2);}
.last-run-item b{color:var(--text);font-family:var(--mono);}
.last-run-dot{width:6px;height:6px;border-radius:50%;background:var(--success);flex-shrink:0;}
/* Verarbeitungs-Log */
.log-timeline{display:flex;flex-direction:column;gap:0;}
.log-entry{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);position:relative;}
.log-entry:last-child{border-bottom:none;}
.log-dot-col{display:flex;flex-direction:column;align-items:center;gap:0;flex-shrink:0;}
.log-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:3px;}
.log-line{width:1px;flex:1;background:var(--border);margin-top:2px;}
.log-entry:last-child .log-line{display:none;}
.log-body{flex:1;min-width:0;}
.log-title{font-size:12px;font-weight:500;color:var(--text);}
.log-meta{font-size:10px;font-family:var(--mono);color:var(--text-3);margin-top:2px;}
.log-detail{font-size:11px;color:var(--text-2);margin-top:4px;line-height:1.5;}

/* ════ PAGE 4 — BESTELLVERGLEICH ════ */
.p4-wrap{max-width:1800px;margin:0 auto;width:100%;padding:1.5rem 2rem;}
.p4-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:10px;}
.p4-selector{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.p4-selector label{font-size:11px;font-family:var(--mono);color:var(--text-2);white-space:nowrap;}
.p4-selector select{font-family:var(--sans);font-size:12px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none;flex:1;min-width:200px;}
.p4-selector select:focus{border-color:var(--mistral);}
.p4-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start;}
.p4-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.p4-col-head{padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface2);display:flex;align-items:center;justify-content:space-between;}
.p4-col-title{font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;}
.p4-col-sub{font-size:10px;font-family:var(--mono);color:var(--text-2);}
.p4-section{padding:10px 16px;border-bottom:1px solid var(--border);}
.p4-section-title{font-size:9px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-bottom:8px;}
.p4-field-row{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:12px;}
.p4-field-label{color:var(--text-2);font-size:11px;}
.p4-field-val{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--text);}
.p4-field-val.diff-warn{color:var(--warn);background:var(--warn-bg);padding:1px 6px;border-radius:4px;}
.p4-field-val.diff-ok{color:var(--success);}
.p4-table{width:100%;border-collapse:collapse;font-size:11px;}
.p4-table th{text-align:left;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
.p4-table td{padding:6px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
.p4-table tr:last-child td{border-bottom:none;}
.p4-diff-match{background:transparent;}
.p4-diff-warn{background:#fffbeb;color:var(--warn);}
.p4-diff-error{background:#fef2f2;color:var(--danger);}
.p4-diff-badge{font-size:9px;font-family:var(--mono);padding:1px 5px;border-radius:4px;margin-left:4px;}
.p4-diff-badge.warn{background:var(--warn-bg);color:var(--warn);}
.p4-diff-badge.ok{background:var(--success-bg);color:var(--success);}
.p4-empty{text-align:center;padding:3rem;color:var(--text-3);font-size:12px;font-family:var(--mono);}
.p4-legend{display:flex;gap:12px;font-size:11px;align-items:center;}
.p4-legend-item{display:flex;align-items:center;gap:5px;}
.p4-legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
/* E-Mail Template */
.p4-email-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1.25rem;}
.p4-email-head{padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface2);display:flex;align-items:center;justify-content:space-between;}
.p4-email-title{font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;}
.p4-email-tabs{display:flex;border-bottom:1px solid var(--border);}
.p4-email-tab{font-size:11px;font-family:var(--mono);padding:7px 16px;border:none;background:none;cursor:pointer;color:var(--text-3);border-bottom:2px solid transparent;margin-bottom:-1px;}
.p4-email-tab.active{color:var(--mistral);border-bottom-color:var(--mistral);}
.p4-email-body{font-family:var(--mono);font-size:11px;line-height:1.7;padding:1rem;white-space:pre-wrap;max-height:300px;overflow-y:auto;background:var(--bg);color:var(--text);}
@media(max-width:1000px){.p4-grid{grid-template-columns:1fr;}}

.nav-admin-btn{display:flex;align-items:center;gap:5px;padding:0 12px;height:56px;border:none;background:none;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--text-2);cursor:pointer;transition:color .15s;}
.nav-admin-btn:hover{color:var(--text);}
.admin-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;display:none;align-items:center;justify-content:center;padding:1.5rem;}
.admin-modal-overlay.open{display:flex;}
.admin-modal{background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:540px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 48px rgba(0,0,0,.25);}
.admin-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0;}
.admin-modal-title{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;}
.admin-modal-body{overflow-y:auto;flex:1;padding:1.25rem 1.5rem;}
.admin-section{margin-bottom:1.25rem;}
.admin-section-title{font-size:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.admin-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.admin-label{font-size:12px;font-weight:500;color:var(--text-2);display:flex;align-items:center;gap:6px;}
.admin-input{font-family:var(--sans);font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none;transition:border-color .15s;}
.admin-input:focus{border-color:var(--mistral);}
.admin-input[type=checkbox]{width:16px;height:16px;accent-color:var(--mistral);}
.admin-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;}
.admin-toggle{position:relative;display:inline-block;width:40px;height:22px;}
.admin-toggle input{opacity:0;width:0;height:0;}
.admin-toggle-slider{position:absolute;inset:0;background:var(--border-strong);border-radius:22px;transition:.2s;cursor:pointer;}
.admin-toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
.admin-toggle input:checked + .admin-toggle-slider{background:var(--mistral);}
.admin-toggle input:checked + .admin-toggle-slider:before{transform:translateX(18px);}
.admin-test-btn{font-size:11px;font-family:var(--mono);padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius);background:none;color:var(--text-2);cursor:pointer;margin-top:4px;}
.admin-test-btn:hover{border-color:var(--success);color:var(--success);}
.admin-modal-footer{padding:12px 20px;border-top:1px solid var(--border);background:var(--surface2);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;}
.admin-select{font-family:var(--sans);font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none;width:100%;}
.admin-select:focus{border-color:var(--mistral);}
.admin-tag{display:inline-flex;align-items:center;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:2px 8px;font-size:11px;font-family:var(--mono);color:var(--text);}
.admin-tag button{background:none;border:none;cursor:pointer;color:var(--text-3);font-size:14px;line-height:1;padding:0;}
.admin-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}

@media(max-width:900px){
  .p1-layout,.p2-grid{grid-template-columns:1fr;}
  .p1-left,.p1-main{padding:0;border:none;}
  .p1-right,.p2-sidebar{position:static;}
  .p2-stats{grid-template-columns:1fr 1fr;}
}

/* ─── TOAST (Benachrichtigungen unten Mitte) ──────────── */
#toast{
  position:fixed;
  top:78px;          /* unter der Nav-Bar (60px + 18px Abstand) */
  right:24px;
  left:auto;
  transform:translateY(-20px);
  z-index:10900;
  padding:14px 22px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  box-shadow:var(--shadow-lg);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s, transform .25s cubic-bezier(.34,.84,.36,1);
  max-width:min(calc(100vw - 48px), 440px);
  text-align:left;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-start;
}
#toast.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
/* Varianten via data-Attribut */
#toast[data-variant="success"]{
  border-color:color-mix(in srgb, var(--success) 50%, var(--border));
  background:color-mix(in srgb, var(--success) 8%, var(--surface));
}
#toast[data-variant="error"]{
  border-color:color-mix(in srgb, var(--danger) 50%, var(--border));
  background:color-mix(in srgb, var(--danger) 8%, var(--surface));
  color:var(--text);
}
#toast[data-variant="warn"]{
  border-color:color-mix(in srgb, var(--warn) 55%, var(--border));
  background:color-mix(in srgb, var(--warn) 8%, var(--surface));
}
#toast[data-variant="magic"]{
  border:1px solid color-mix(in srgb, var(--mistral) 60%, var(--border));
  background:linear-gradient(135deg, color-mix(in srgb, var(--mistral) 12%, var(--surface)), var(--surface));
  box-shadow:0 8px 32px color-mix(in srgb, var(--mistral) 30%, transparent);
}

/* Toast mit Undo-Action */
#toast.with-action{
  padding:14px 16px 18px 24px;
  text-align:left;
  position:relative;
}
.toast-msg{flex:1;min-width:0;}
.toast-undo-btn{
  background:var(--wemag);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  padding:8px 14px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:all .15s;
  flex-shrink:0;
}
.toast-undo-btn:hover{background:var(--wemag-dark);transform:translateY(-1px);}
.toast-undo-btn:active{transform:translateY(0);}
.toast-progress{
  position:absolute;left:0;right:0;bottom:0;
  height:3px;background:var(--surface2);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  overflow:hidden;
}
.toast-progress-bar{
  height:100%;background:var(--wemag);
  width:100%;transform-origin:left;
}
@keyframes toastProgress{
  from{transform:scaleX(1)}
  to  {transform:scaleX(0)}
}

/* ─── CHANGELOG MODAL ─────────────────────────────────────── */
.changelog-modal{
  position:fixed;inset:0;z-index:10800;
  align-items:center;justify-content:center;padding:1rem;
  background:rgba(13,27,42,.55);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .2s;
}
.changelog-modal.open{opacity:1;display:flex;}
.changelog-modal[style*="display:none"]{display:none !important;}
.changelog-card{
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-xl);
  max-width:600px;width:100%;max-height:85vh;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg),0 20px 60px rgba(0,76,126,.20);
  overflow:hidden;
}
.changelog-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 24px 16px;border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--wemag) 5%,var(--surface)),
    var(--surface));
}
.changelog-modal-title{
  font-size:18px;font-weight:700;color:var(--text);
  letter-spacing:-.01em;
}
.changelog-modal-sub{
  font-size:12px;color:var(--text-2);margin-top:3px;
}
.changelog-close{
  width:32px;height:32px;border:none;background:transparent;
  color:var(--text-3);font-size:22px;line-height:1;cursor:pointer;
  border-radius:var(--radius);transition:all .15s;
  display:flex;align-items:center;justify-content:center;
}
.changelog-close:hover{background:var(--surface2);color:var(--text);}
.changelog-modal-body{
  flex:1;overflow-y:auto;padding:8px 24px 16px;
}
.changelog-modal-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;border-top:1px solid var(--border);
  background:var(--surface2);
}
.changelog-foot-info{font-size:12px;color:var(--text-2);font-family:var(--mono);}
.changelog-close-btn{
  padding:8px 18px;background:var(--wemag);color:#fff;border:none;
  border-radius:var(--radius);font-family:var(--sans);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.changelog-close-btn:hover{background:var(--wemag-dark);}

/* Einzelne Release-Box */
.changelog-release{
  padding:18px 0 14px;border-bottom:1px solid var(--border);
}
.changelog-release:last-child{border-bottom:none;}
.changelog-release.current{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--wemag) 4%,transparent),
    transparent);
  margin:0 -10px;padding-left:10px;padding-right:10px;
  border-radius:var(--radius);
}
.changelog-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;gap:10px;
}
.changelog-version{display:flex;align-items:center;gap:8px;}
.changelog-version-num{
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);
}
.changelog-current-badge{
  font-size:9px;font-family:var(--mono);font-weight:700;
  background:var(--wemag);color:#fff;
  padding:2px 7px;border-radius:10px;letter-spacing:.04em;
  text-transform:uppercase;
}
.changelog-date{font-size:11px;color:var(--text-3);font-family:var(--mono);}
.changelog-title{
  font-size:15px;font-weight:600;color:var(--text);margin-bottom:10px;
  letter-spacing:-.01em;
}
.changelog-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.changelog-item{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;line-height:1.5;color:var(--text);
}
.changelog-type-badge{
  flex-shrink:0;font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.04em;padding:3px 7px;border-radius:4px;
  text-transform:uppercase;line-height:1.3;margin-top:1px;
  min-width:60px;text-align:center;
}
.changelog-type-new{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success);}
.changelog-type-change{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info);}
.changelog-type-fix{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);}

/* ── PDF-Vorschau-Modal mit Zoom ── */
.p6-preview-modal{
  position:fixed;inset:0;z-index:10800;
  display:flex;align-items:stretch;justify-content:center;
  padding:1rem;
  background:rgba(13,27,42,.65);backdrop-filter:blur(8px);
}
.p6-preview-card{
  background:#fff;
  border-radius:var(--radius-lg);
  width:100%;max-width:1100px;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:var(--shadow-lg),0 20px 60px rgba(0,0,0,.4);
}
.p6-preview-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.p6-preview-zoom-controls{display:flex;align-items:center;gap:6px;}
.p6-zoom-btn{
  width:32px;height:32px;border:1px solid var(--border);background:var(--surface);
  color:var(--text);font-size:16px;font-weight:600;cursor:pointer;
  border-radius:var(--radius);transition:all .15s;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.p6-zoom-btn:hover{background:var(--wemag);color:#fff;border-color:var(--wemag);}
.p6-zoom-btn-text{
  height:32px;padding:0 10px;border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);font-family:var(--mono);font-size:11px;cursor:pointer;
  border-radius:var(--radius);transition:all .15s;
}
.p6-zoom-btn-text:hover{color:var(--wemag);border-color:var(--wemag);}
.p6-zoom-level{
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text);
  min-width:54px;text-align:center;padding:0 6px;
}
.p6-preview-close{
  width:36px;height:36px;border:none;background:transparent;
  color:var(--text-2);font-size:20px;line-height:1;cursor:pointer;
  border-radius:var(--radius);transition:all .15s;
  display:flex;align-items:center;justify-content:center;
}
.p6-preview-close:hover{background:var(--danger-bg);color:var(--danger);}
.p6-preview-scroll{
  flex:1;overflow:auto;
  background:var(--surface2);
  padding:24px 16px;
  display:flex;justify-content:center;
}
.p6-preview-zoom-wrapper{
  /* Wird per JS skaliert */
  flex-shrink:0;
}
.p6-preview-help{
  padding:8px 14px;
  background:var(--surface2);
  border-top:1px solid var(--border);
  font-size:11px;color:var(--text-3);
  text-align:center;
  flex-shrink:0;
}
.p6-preview-help kbd{
  display:inline-block;background:var(--surface);border:1px solid var(--border);
  border-radius:3px;padding:1px 5px;font-family:var(--mono);font-size:10px;
  margin:0 2px;
}

/* ── PWA-Banner (Update, Install) ── */
.pwa-banner{
  position:fixed;top:74px;left:50%;transform:translateX(-50%) translateY(-100px);
  z-index:10800;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  background:var(--wemag);color:#fff;
  border-radius:var(--radius-lg);
  font-family:var(--sans);font-size:14px;font-weight:500;
  box-shadow:var(--shadow-lg);
  max-width:min(calc(100vw - 32px), 480px);
  animation:pwaSlideDown .3s cubic-bezier(.34,.84,.36,1) forwards;
}
@keyframes pwaSlideDown{
  from{transform:translateX(-50%) translateY(-100px);opacity:0;}
  to  {transform:translateX(-50%) translateY(0);opacity:1;}
}
.pwa-banner-install{background:var(--mistral);}
.pwa-banner-icon{font-size:20px;line-height:1;flex-shrink:0;}
.pwa-banner-text{flex:1;min-width:0;}
.pwa-banner-btn{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  padding:6px 14px;border-radius:var(--radius);
  font-family:var(--sans);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .15s;flex-shrink:0;
}
.pwa-banner-btn:hover{background:rgba(255,255,255,.28);}
.pwa-banner-close{
  background:transparent;border:none;color:rgba(255,255,255,.7);
  width:28px;height:28px;border-radius:50%;
  font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .15s;
}
.pwa-banner-close:hover{background:rgba(255,255,255,.15);color:#fff;}

/* ── iOS Install-Hinweis ── */
.pwa-ios-hint{
  position:fixed;bottom:50px;left:50%;transform:translateX(-50%);
  z-index:10800;width:calc(100vw - 32px);max-width:380px;
  animation:pwaSlideUp .35s cubic-bezier(.34,.84,.36,1) forwards;
  transition:opacity .8s ease, transform .8s ease;
}
.pwa-ios-hint.fade-out{opacity:0;transform:translateX(-50%) translateY(20px);}
@keyframes pwaSlideUp{
  from{transform:translateX(-50%) translateY(100px);opacity:0;}
  to  {transform:translateX(-50%) translateY(0);opacity:1;}
}
.pwa-ios-card{
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  padding:14px 16px;
  display:flex;align-items:flex-start;gap:12px;
  box-shadow:var(--shadow-lg);
  position:relative;
}
.pwa-ios-icon{font-size:28px;line-height:1;flex-shrink:0;}
.pwa-ios-content{flex:1;min-width:0;padding-right:24px;}
.pwa-ios-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px;}
.pwa-ios-text{font-size:13px;color:var(--text-2);line-height:1.45;}
.pwa-ios-share{display:inline-block;font-size:14px;}
.pwa-ios-close{
  position:absolute;top:8px;right:8px;
  width:24px;height:24px;border:none;background:transparent;
  color:var(--text-3);font-size:18px;line-height:1;cursor:pointer;
  border-radius:4px;transition:all .15s;
  display:flex;align-items:center;justify-content:center;
}
.pwa-ios-close:hover{background:var(--surface2);color:var(--text);}

/* ── Standalone-Mode Tweaks (App auf Home-Screen installiert) ── */
@media (display-mode: standalone){
  /* iOS: Safe-Area-Inset für Notch berücksichtigen */
  body{padding-top:env(safe-area-inset-top);padding-bottom:max(30px, env(safe-area-inset-bottom));}
  .nav{padding-top:env(safe-area-inset-top);height:calc(60px + env(safe-area-inset-top));}
  /* Status-Bar (Tastatur-Hinweise) auf Mobile verstecken */
  .status-bar{display:none;}
  .status-bar-restore{display:none !important;}
}

/* ── Mobile-Optimierungen (für Smartphone-Nutzung) ── */
@media (max-width: 768px){
  body{padding-bottom:0;}
  .nav{padding:0 12px;height:54px;}
  .nav-brand{margin-right:0;font-size:13px;}
  .nav-brand-logo{max-height:28px;}
  .nav-brand-sub{display:none;}
  .nav-tab{padding:0 10px;font-size:12px;}
  .nav-clock{display:none;}
  .nav-theme-btn{width:32px;height:32px;}
  /* Pages innen kompakter */
  .p2-wrap, .p4-wrap{padding:1rem !important;}
  #page0 > div, #page4 > div, #page5 > div{padding:1rem !important;}
  #page6 > div{padding:12px !important;}
  /* KPI-Grid: nur 2 pro Reihe */
  .p0-kpi-grid{grid-template-columns:repeat(2, 1fr) !important;}
  .p0-kpi-value{font-size:22px !important;}
  .p0-quick-grid{grid-template-columns:1fr !important;}
  .p0-charts-grid{grid-template-columns:1fr !important;}
  /* Buttons größer für Touch */
  button{min-height:38px;}
  /* Modals: Vollbild */
  #adminModalOverlay > div, .changelog-card{max-width:100% !important;width:100% !important;height:100% !important;max-height:100% !important;border-radius:0 !important;}
}

/* ── Status-Bar (Tastatur-Shortcuts unten) ── */
.status-bar{
  position:fixed;bottom:0;left:0;right:0;
  height:30px;
  background:color-mix(in srgb, var(--surface) 92%, var(--text));
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
  z-index:90;
  font-family:var(--sans);
  backdrop-filter:blur(8px);
  transition:transform .25s cubic-bezier(.4,.0,.2,1);
}
.status-bar.hidden{transform:translateY(100%);}
.status-bar-section{display:flex;align-items:center;gap:18px;}
.status-bar-shortcut{
  font-size:11px;color:var(--text-2);
  display:flex;align-items:center;gap:4px;
  user-select:none;
}
.status-bar-shortcut kbd{
  display:inline-block;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:3px;
  padding:1px 5px;
  font-family:var(--mono);font-size:10px;font-weight:600;
  color:var(--text);
  line-height:1.3;
  min-width:18px;text-align:center;
  box-shadow:0 1px 0 var(--border);
}
.status-bar-version{
  font-size:11px;color:var(--text-3);font-family:var(--mono);
  cursor:pointer;padding:2px 6px;border-radius:3px;
  transition:all .15s;
}
.status-bar-version:hover{background:var(--surface2);color:var(--wemag);}
.status-bar-collapse{
  width:22px;height:22px;border:none;background:transparent;color:var(--text-3);
  cursor:pointer;font-size:11px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.status-bar-collapse:hover{background:var(--surface2);color:var(--text);}
.status-bar-restore{
  position:fixed;bottom:14px;right:14px;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--text-2);font-size:16px;
  cursor:pointer;z-index:90;box-shadow:var(--shadow-md);
  transition:all .15s;
}
.status-bar-restore:hover{background:var(--surface2);color:var(--wemag);transform:scale(1.06);}
/* Bei kleinen Bildschirmen nur die wichtigsten Shortcuts */
@media (max-width: 900px){
  .status-bar-shortcut:nth-child(3),
  .status-bar-shortcut:nth-child(4){display:none;}
}
@media (max-width: 600px){
  .status-bar{display:none;}
}

/* ── Custom Tooltip (für data-tooltip="..." Elemente) ── */
[data-tooltip]{position:relative;}
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--text);color:var(--surface);
  padding:7px 11px;border-radius:var(--radius);
  font-family:var(--sans);font-size:12px;font-weight:500;line-height:1.4;
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:all .15s;z-index:10000;
  box-shadow:var(--shadow-md);
}
[data-tooltip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}
[data-tooltip][data-tooltip-position="bottom"]::after{
  bottom:auto;top:calc(100% + 8px);
}

/* Empty-State-Karten */
.empty-state{
  background:var(--surface);
  border:1.5px dashed var(--border-strong);
  border-radius:var(--radius-lg);
  padding:32px 24px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin:1rem 0;
  transition:border-color .2s;
}
.empty-state:hover{border-color:color-mix(in srgb, var(--wemag) 40%, var(--border-strong));}
.empty-state-icon{font-size:42px;opacity:.55;line-height:1;}
.empty-state-title{font-size:15px;font-weight:600;color:var(--text);}
.empty-state-desc{font-size:13px;color:var(--text-2);line-height:1.55;max-width:420px;}
.empty-state-cta{
  margin-top:8px;padding:9px 18px;
  background:var(--wemag);color:#fff;border:none;
  border-radius:var(--radius);font-family:var(--sans);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.empty-state-cta:hover{background:var(--wemag-dark);transform:translateY(-1px);}
.empty-state-tip{
  font-size:11px;color:var(--text-3);font-family:var(--mono);
  background:var(--surface2);padding:6px 12px;border-radius:var(--radius);
  margin-top:8px;
}

/* ─── MAGIC DONE MODAL ─────────────────────────────────── */
#magicDoneModal{
  position:fixed;inset:0;z-index:10800;display:none;
  align-items:center;justify-content:center;padding:1rem;
  background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .2s;
}
#magicDoneModal.open{opacity:1;}
.magic-done-card{
  max-width:440px;width:100%;
  background:var(--surface);
  border:1px solid color-mix(in srgb, var(--mistral) 30%, var(--border));
  border-radius:var(--radius);
  padding:28px 28px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.25), 0 0 0 1px color-mix(in srgb, var(--mistral) 8%, transparent);
  text-align:center;
  transform:scale(.92);
  transition:transform .25s cubic-bezier(.34,.84,.36,1);
  position:relative;overflow:hidden;
}
#magicDoneModal.open .magic-done-card{transform:scale(1);}
.magic-done-glow{
  position:absolute;top:-60%;left:50%;transform:translateX(-50%);
  width:140%;height:160px;
  background:radial-gradient(ellipse, color-mix(in srgb, var(--mistral) 22%, transparent), transparent 65%);
  pointer-events:none;z-index:0;
}
.magic-done-icon{
  position:relative;z-index:1;
  font-size:48px;line-height:1;margin-bottom:10px;
  animation:magicBounce .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes magicBounce{
  0%   {transform:scale(0) rotate(-20deg);}
  60%  {transform:scale(1.15) rotate(8deg);}
  100% {transform:scale(1) rotate(0);}
}
.magic-done-title{
  position:relative;z-index:1;
  font-size:18px;font-weight:600;letter-spacing:-.01em;
  color:var(--text);margin:0 0 6px;
}
.magic-done-sub{
  position:relative;z-index:1;
  font-size:12px;color:var(--text-2);margin:0 0 18px;
}
.magic-done-details{
  position:relative;z-index:1;
  background:var(--surface2);border-radius:var(--radius);
  padding:10px 14px;margin-bottom:16px;text-align:left;
}
.magic-done-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 0;font-size:12px;gap:10px;
  border-bottom:1px solid var(--border);
}
.magic-done-row:last-child{border-bottom:none;}
.magic-done-label{font-size:10px;font-family:var(--mono);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;}
.magic-done-val{color:var(--text);font-weight:500;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.magic-done-actions{
  position:relative;z-index:1;
  display:flex;gap:8px;justify-content:center;
}
.magic-done-actions button{
  padding:9px 18px;border:1px solid var(--border);background:var(--surface);
  color:var(--text);border-radius:var(--radius);font-family:var(--mono);
  font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;
}
.magic-done-actions button:hover{border-color:var(--mistral);color:var(--mistral);}
.magic-done-actions button.primary{
  background:linear-gradient(135deg, var(--mistral), color-mix(in srgb, var(--mistral) 80%, #c54600));
  border-color:var(--mistral);color:#fff;
  box-shadow:0 4px 12px color-mix(in srgb, var(--mistral) 30%, transparent);
}
.magic-done-actions button.primary:hover{color:#fff;transform:translateY(-1px);}

/* ═══════════════════════════════════════════════════════
   PAGE 6 — WEMAG KATALOG
═══════════════════════════════════════════════════════ */

/* ── Editier-Karten (im Frontend, nicht im PDF) ── */
.p6-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:border-color .15s, box-shadow .15s;
  position:relative;
}
.p6-card:hover{ border-color:color-mix(in srgb, var(--mistral) 40%, var(--border)); box-shadow:0 4px 16px rgba(0,0,0,.06); }
.p6-card.dragging{ opacity:.5; }
.p6-card.fail{ border-color:color-mix(in srgb, var(--warn) 50%, var(--border)); background:color-mix(in srgb, var(--warn) 4%, var(--surface)); }
.p6-card-header{ display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em }
.p6-card-header .p6-handle{ cursor:grab;font-size:14px;color:var(--text-3);user-select:none;padding:2px 4px;line-height:1 }
.p6-card-header .p6-handle:active{ cursor:grabbing }
.p6-card-header .p6-card-close{ margin-left:auto;background:none;border:none;color:var(--text-3);font-size:18px;line-height:1;cursor:pointer;padding:0 4px;border-radius:3px;transition:color .15s,background .15s }
.p6-card-header .p6-card-close:hover{ color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent) }
.p6-card-body{ display:grid;grid-template-columns:90px 1fr;gap:10px }
.p6-card-img-wrap{
  width:90px;height:90px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
}
.p6-card-img-wrap img{ max-width:100%;max-height:100%;object-fit:contain }
.p6-card-img-wrap .p6-img-empty{ font-size:24px;opacity:.3 }
.p6-card-img-wrap .p6-img-upload{
  position:absolute;inset:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-family:var(--mono);background:rgba(255,255,255,.85);color:var(--text-2);
  opacity:0;transition:opacity .15s
}
.p6-card-img-wrap:hover .p6-img-upload{ opacity:1 }
.p6-card-fields{ display:flex;flex-direction:column;gap:6px;min-width:0 }
.p6-card-title-input{
  font-size:13px;font-weight:600;border:none;background:transparent;color:var(--text);
  padding:4px 6px;border-radius:4px;outline:none;width:100%;box-sizing:border-box;
}
.p6-card-title-input:hover, .p6-card-title-input:focus{ background:var(--surface2) }
.p6-card-bullets{
  font-size:10px;color:var(--text-2);font-family:var(--mono);line-height:1.5;
  border:1px solid var(--border);background:var(--surface);
  padding:6px 8px;border-radius:4px;min-height:50px;max-height:120px;overflow-y:auto;
  white-space:pre-wrap;resize:vertical;outline:none;font-family:var(--mono);
}
.p6-card-bullets:focus{ border-color:var(--mistral) }
.p6-card-priceline{ display:flex;gap:6px;align-items:center;font-family:var(--mono);font-size:10px;margin-top:2px }
.p6-card-priceline input{
  padding:4px 6px;border:1px solid var(--border);border-radius:4px;font-family:var(--mono);
  font-size:11px;background:var(--surface);color:var(--text);min-width:0;
}
.p6-card-priceline .p6-pi-art{ width:90px }
.p6-card-priceline .p6-pi-price{ width:90px }
.p6-card-priceline .p6-pi-savings{ width:48px }
.p6-card-priceline .p6-pi-label{ color:var(--text-3);font-size:9px;text-transform:uppercase;letter-spacing:.05em }
.p6-card-badges{ display:flex;gap:8px;flex-wrap:wrap;margin-top:4px }
.p6-card-badges label{ display:flex;align-items:center;gap:4px;font-size:10px;font-family:var(--mono);color:var(--text-2);cursor:pointer;user-select:none }
.p6-card-badges input{ accent-color:var(--mistral);cursor:pointer }
.p6-card-warning{ font-size:10px;font-family:var(--mono);color:var(--warn);background:color-mix(in srgb, var(--warn) 10%, transparent);padding:6px 8px;border-radius:4px;margin-top:4px }

/* ── PDF-Layout (das Bluebox-Original 1:1) ── */
/* WICHTIG: alle Maße in pt/mm/absolut, damit html2pdf das richtig rendert.
   Wir nutzen 794px Breite für A4 bei 96 DPI */
.bb-page{
  width:794px;
  min-height:1123px;
  background:#fff;
  font-family:'Inter', 'Helvetica Neue', Arial, sans-serif;
  color:#222;
  padding:0;
  position:relative;
  box-sizing:border-box;
  page-break-after:always;
}
.bb-page:last-child{ page-break-after:auto }

/* Header */
.bb-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:28px 36px 0;
  position:relative;
}
.bb-header-left{ flex:0 0 auto;width:220px;position:relative }
.bb-banner{
  background:#E30613;
  color:#fff;
  font-family:'Bungee', 'Impact', sans-serif;
  font-size:11px;
  letter-spacing:.04em;
  line-height:1.12;
  padding:7px 12px;
  text-align:center;
  transform:rotate(-7deg);
  display:inline-block;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  margin-top:8px;
}
.bb-title-wrap{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding-top:12px;
}
.bb-title{
  font-family:'Bungee', 'Impact', sans-serif;
  font-size:62px;
  color:#004C7E;
  letter-spacing:.02em;
  line-height:1;
  text-shadow:2px 2px 0 rgba(0,0,0,.06);
  text-transform:uppercase;
  /* Grunge-Effekt via mask */
  position:relative;
}
.bb-header-right{ flex:0 0 auto;width:90px;display:flex;flex-direction:column;align-items:center }
.bb-hexagon-issue{
  width:78px;height:90px;
  background:#004C7E;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;font-family:'Bungee', sans-serif;text-align:center;
}
.bb-hexagon-issue .bb-num{ font-size:32px;line-height:1 }
.bb-hexagon-issue .bb-year{ font-size:13px;line-height:1;margin-top:2px }

/* Sub-Header */
.bb-subheader{
  display:flex;
  align-items:center;
  gap:14px;
  padding:6px 36px 14px;
  border-bottom:1px solid #ddd;
  font-size:11px;
}
.bb-subheader .bb-stand{ color:#666;font-family:'Inter', sans-serif }
.bb-subheader .bb-tagline{ color:#222;font-weight:500 }

/* Items-Grid */
.bb-grid{
  padding:14px 36px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:24px;
  row-gap:16px;
}

/* Einzelartikel */
.bb-item{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:12px;
  padding-bottom:8px;
  border-bottom:1px solid #e8e8e8;
  position:relative;
}
.bb-item:nth-last-child(-n+2){ border-bottom:none }
.bb-item-imgwrap{ width:140px;height:140px;background:#fff;display:flex;align-items:center;justify-content:center;position:relative }
.bb-item-imgwrap img{ max-width:100%;max-height:100%;object-fit:contain }
.bb-item-imgwrap .bb-hex-neu{
  position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:36px;height:42px;
  background:#004C7E;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Bungee', sans-serif;font-size:10px;
}
.bb-item-meta{ display:flex;flex-direction:column;justify-content:flex-start }
.bb-item-title{
  font-size:12px;font-weight:700;color:#004C7E;line-height:1.25;margin:0 0 6px;
  font-family:'Inter', sans-serif;
}
.bb-item-bullets{
  list-style:none;padding:0;margin:0 0 6px;
  font-size:9.5px;color:#222;line-height:1.45;
}
.bb-item-bullets li{
  position:relative;padding-left:11px;margin-bottom:1px;
}
.bb-item-bullets li::before{
  content:'•';color:#004C7E;font-weight:bold;position:absolute;left:0;top:0;
}
.bb-item-annotation{
  font-family:'Caveat', 'Comic Sans MS', cursive;
  color:#004C7E;font-size:13px;
  margin:2px 0;font-style:italic;font-weight:600;
}
.bb-item-priceline{
  margin-top:auto;display:grid;grid-template-columns:auto 1fr auto auto;gap:6px;
  align-items:baseline;font-size:9px;
  border-top:1px solid #ccc;padding-top:4px;
}
.bb-item-priceline .bb-pl-label{ color:#666;font-family:'Inter', sans-serif;text-transform:none;font-weight:500 }
.bb-item-priceline .bb-pl-artnr{ color:#222;font-weight:700;font-family:'Inter', sans-serif }
.bb-item-priceline .bb-pl-incl{ color:#666;font-size:8px;font-family:'Inter', sans-serif }
.bb-item-priceline .bb-pl-price{ color:#004C7E;font-weight:700;font-size:12px;font-family:'Inter', sans-serif;text-align:right }
.bb-item-priceline .bb-pl-mwst{ color:#666;font-size:7.5px;font-family:'Inter', sans-serif }
.bb-item-priceline .bb-pl-savings{ color:#004C7E;font-weight:700;font-size:12px;font-family:'Inter', sans-serif;text-align:right;padding-left:10px }
.bb-item-priceline .bb-pl-savings-label{ color:#666;font-size:8px;font-family:'Inter', sans-serif }

/* Footer */
.bb-footer{
  background:#004C7E;
  color:#fff;
  padding:14px 36px;
  display:flex;
  align-items:center;
  gap:18px;
  font-size:8.5px;
  margin-top:auto;
}
.bb-footer-logo{
  flex:0 0 auto;
  font-family:'Bungee', sans-serif;font-size:14px;letter-spacing:.04em;
}
.bb-footer-locs{ display:grid;grid-template-columns:repeat(6,1fr);gap:8px;flex:1;font-size:8px;line-height:1.3 }
.bb-footer-loc{ }
.bb-footer-loc .bb-loc-hex{
  display:inline-block;
  width:14px;height:16px;
  background:#fff;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  vertical-align:middle;margin-right:4px;
}
.bb-footer-loc .bb-loc-name{ font-family:'Bungee', sans-serif;font-size:9.5px;color:#fff;vertical-align:middle }
.bb-footer-tagline{
  flex:0 0 auto;font-family:'Bungee', sans-serif;font-size:10px;text-align:right;line-height:1.2;
}

/* Footer-Disclaimer */
.bb-disclaimer{
  padding:6px 36px;background:#fff;font-size:7px;color:#666;text-align:center;line-height:1.4;
}

/* ─── ONBOARDING-TOUR ──────────────────────────────────── */
#tourOverlay{
  position:fixed;inset:0;z-index:11000;display:none;
  background:rgba(0,0,0,.65);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .25s;pointer-events:auto;
}
#tourOverlay.open{opacity:1;}
#tourSpotlight{
  position:fixed;z-index:11001;background:transparent;
  box-shadow:0 0 0 9999px rgba(0,0,0,.65), 0 0 0 4px var(--mistral), 0 0 24px color-mix(in srgb, var(--mistral) 60%, transparent);
  border-radius:8px;transition:all .35s cubic-bezier(.34,.84,.36,1);
  pointer-events:none;
}
#tourTooltip{
  position:fixed;z-index:11002;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 22px;box-shadow:0 12px 40px rgba(0,0,0,.25);
  font-family:var(--sans);color:var(--text);
  transition:top .35s cubic-bezier(.34,.84,.36,1), left .35s cubic-bezier(.34,.84,.36,1);
}
#tourTooltip kbd{
  display:inline-block;padding:1px 7px;background:var(--surface2);
  border:1px solid var(--border);border-radius:4px;
  font-family:var(--mono);font-size:10px;color:var(--text);
  box-shadow:0 1px 0 var(--border);
}
.tour-title{font-size:15px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em;}
.tour-body{font-size:13px;color:var(--text-2);line-height:1.55;margin:0 0 16px;}
.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.tour-progress{font-size:10px;font-family:var(--mono);color:var(--text-3);}
.tour-buttons{display:flex;gap:6px;}
.tour-buttons button{
  padding:6px 14px;border:1px solid var(--border);background:var(--surface);
  color:var(--text);border-radius:var(--radius);font-family:var(--mono);
  font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;
}
.tour-buttons button:hover:not(:disabled){border-color:var(--mistral);color:var(--mistral);}
.tour-buttons button:disabled{opacity:.4;cursor:not-allowed;}
.tour-buttons button.primary{background:var(--mistral);border-color:var(--mistral);color:#fff;}
.tour-buttons button.primary:hover{background:color-mix(in srgb, var(--mistral) 88%, #000);color:#fff;}
.tour-skip{font-size:10px;font-family:var(--mono);color:var(--text-3);background:none;border:none;cursor:pointer;text-decoration:underline;padding:0;}
.tour-skip:hover{color:var(--text);}

/* ════════════════════════════════════════ */
/* zweiter Style-Block (Spät-Overrides)      */
/* ════════════════════════════════════════ */

#page0.active, #page4.active, #page5.active { display:block; }
#adminModalOverlay.open { display:flex !important; }
#loginOverlay.open { display:flex !important; }
#p5ImageModal.open { display:flex !important; }

/* Batch Drop Zone */
#p5BatchDropZone:hover { border-color: var(--mistral); background: color-mix(in srgb, var(--mistral) 4%, var(--surface)); }
#p5BatchDropZone.drag-over { border-color: var(--mistral); background: color-mix(in srgb, var(--mistral) 8%, var(--surface)); border-style: solid; }
#p5BatchPreview tr:hover td, #p5BatchResultTable tr:hover td { background: var(--surface2); }

/* Magic-Mode Image Drop Zone */
#p5ImageDropZone:hover { border-color: var(--mistral); background: color-mix(in srgb, var(--mistral) 4%, var(--surface)); }
#p5ImageDropZone.drag-over { border-color: var(--mistral); background: color-mix(in srgb, var(--mistral) 10%, var(--surface)); border-style: solid; transform: scale(1.01); }

/* Magic-Button: Pulse-Animation beim Hover */
#p5BtnMagic { transition: all .2s; }
#p5BtnMagic:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--mistral) 45%, transparent); }
#p5BtnMagic:active { transform: translateY(0); }
@keyframes magicPulse {
  0%,100% { box-shadow: 0 4px 12px color-mix(in srgb, var(--mistral) 35%, transparent); }
  50%     { box-shadow: 0 4px 20px color-mix(in srgb, var(--mistral) 60%, transparent); }
}
#p5BtnMagic.busy { animation: magicPulse 1.4s ease-in-out infinite; }

/* Magic-Mode Tabs */
#p5MagicTabUrl, #p5MagicTabImage { transition: all .15s; }

/* KI-Text Rendering — strukturiertes HTML hübsch darstellen */
.p5-rich p {
  margin: 0 0 10px 0;
  color: var(--text);
}
.p5-rich p:last-child { margin-bottom: 0; }
.p5-rich ul, .p5-rich ol {
  margin: 8px 0 10px 0;
  padding-left: 22px;
  color: var(--text);
}
.p5-rich ul:last-child, .p5-rich ol:last-child { margin-bottom: 0; }
.p5-rich li {
  margin: 4px 0;
  line-height: 1.55;
}
.p5-rich ul li::marker { color: var(--mistral); }
.p5-rich strong, .p5-rich b {
  color: var(--text);
  background: linear-gradient(transparent 70%, color-mix(in srgb, var(--mistral) 22%, transparent) 70%);
  padding: 0 2px;
  font-weight: 600;
  border-radius: 2px;
}
.p5-rich em, .p5-rich i { color: var(--text-2); font-style: italic; }
.p5-rich br { line-height: 1.4; }
/* ── Versandkosten / Zuschläge Footer (Bestellvergleich) ───────────── */
.p4-surcharge-footer{ border-top:1px solid var(--border); background:var(--surface2); padding:14px 16px; }
.p4-sc-title{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-2); margin-bottom:10px; }
.p4-sc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.p4-sc-col{ border:1px solid var(--border); border-radius:var(--radius-md,8px); background:var(--surface); padding:8px 10px; }
.p4-sc-col-head{ font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }
.p4-sc-row{ display:flex; justify-content:space-between; gap:10px; font-size:12px; font-family:var(--mono); padding:3px 0; }
.p4-sc-row span:first-child{ color:var(--text-2); }
.p4-sc-empty span{ color:var(--text-3); font-style:italic; font-family:inherit; }
.p4-sc-total{ border-top:1px dashed var(--border); margin-top:4px; padding-top:5px; font-weight:700; }
.p4-sc-total span:first-child{ color:var(--text-1); }
.p4-sc-compare{ display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:10px; padding:8px 12px; border-radius:var(--radius-md,8px); font-size:12px; }
.p4-sc-compare.match{ background:rgba(34,160,90,.10); color:var(--success,#1f8a4c); }
.p4-sc-compare.mismatch{ background:rgba(214,140,30,.12); color:var(--warn,#b8730f); }
.p4-sc-compare span:first-child{ font-weight:600; }
.p4-sc-rabatt{ margin-top:8px; font-size:11px; color:var(--text-2); }
@media(max-width:680px){ .p4-sc-grid{ grid-template-columns:1fr; } }

/* ── Mapping-Editor ─────────────────────────────────────────────────── */
.map-open-btn{ padding:6px 14px; border:1.5px solid var(--accent,#c8541e); border-radius:20px; background:var(--accent,#c8541e); color:#fff; font-size:12px; font-weight:600; cursor:pointer; }
.map-open-btn:hover{ filter:brightness(1.05); }
.map-modal{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9000; display:flex; align-items:stretch; justify-content:center; padding:0; }
.map-modal.hidden{ display:none; }
.map-inner{ background:var(--surface,#fff); border-radius:0; width:100vw; height:100vh; max-width:none; display:flex; flex-direction:column; overflow:hidden; }
.map-bar{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); gap:10px; flex-wrap:wrap; }
.map-bar-left{ display:flex; align-items:center; gap:12px; }
.map-title{ font-weight:700; font-size:15px; }
.map-sel{ padding:5px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font-size:12px; }
.map-bar-right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.map-btn{ display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border-radius:8px; border:1px solid var(--text-3,#9a948c); background:var(--surface2); color:var(--text-1); font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.map-btn.primary{ background:var(--accent,#c8541e); color:#fff; border-color:var(--accent,#c8541e); }
.map-btn.close{ font-size:14px; line-height:1; padding:6px 10px; }
.map-btn.ghost{ background:var(--surface2); border-color:var(--text-3,#9a948c); }
.map-btn.ghost:hover{ background:var(--surface2); border-color:var(--accent,#c8541e); color:var(--accent,#c8541e); }
.map-hint{ padding:8px 16px; font-size:11.5px; color:var(--text-2); background:var(--surface2); border-bottom:1px solid var(--border); }
.map-canvas{ position:relative; overflow:auto; flex:1; min-height:0; }
.map-content{ position:relative; display:grid; grid-template-columns:1fr 1fr; column-gap:140px; padding:14px 22px 40px; min-height:100%; }
.map-col{ position:relative; z-index:2; padding:0 14px; }
.map-col-head{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); padding:4px 6px 8px; position:sticky; top:0; background:var(--surface,#fff); z-index:3; }
.map-svg{ position:absolute; top:0; left:0; z-index:1; pointer-events:none; }
.map-line{ fill:none; stroke:var(--accent,#c8541e); stroke-width:1.8; opacity:.45; transition:opacity .12s, stroke-width .12s; }
.map-line.hot{ stroke-width:3; opacity:1; }
.map-line.dim{ opacity:.10; }
.map-line-dot.dim{ opacity:.12; }
.map-line-dot{ fill:var(--accent,#c8541e); }
.map-grp{ font-size:10px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.03em; margin:10px 6px 4px; }
.map-row{ display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--border); border-radius:9px; margin-bottom:8px; background:var(--surface); font-size:12.5px; cursor:pointer; position:relative; transition:opacity .12s, border-color .12s, box-shadow .12s; }
.map-row.src:hover{ border-color:var(--accent,#c8541e); }
.map-row.src.armed{ border-color:var(--accent,#c8541e); box-shadow:0 0 0 2px rgba(200,84,30,.32); }
.map-row.src.used{ opacity:.62; }
.map-row.tgt.unset{ border-style:dashed; }
.map-row.tgt.fix{ background:rgba(80,120,200,.06); }
.map-row.hot{ border-color:var(--accent,#c8541e); box-shadow:0 0 0 2px rgba(200,84,30,.28); opacity:1; }
.map-row.dim{ opacity:.38; }
.map-seg{ font-family:var(--mono); font-weight:600; }
.map-path{ font-family:var(--mono); font-size:10px; color:var(--text-3); margin-left:auto; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.map-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent,#c8541e); flex:none; }
.src-dot{ order:3; }
.tgt-dot{ order:0; }
.map-tgt-main{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.map-detail{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.map-src-ref{ font-family:var(--mono); font-size:10px; color:var(--success,#1f8a4c); }
.map-fixlbl{ font-size:9px; font-weight:700; color:#4063b0; background:#4063b015; padding:1px 5px; border-radius:4px; }
.map-fix{ font-size:11px; padding:2px 6px; border:1px solid var(--border); border-radius:5px; width:120px; }
.map-tr{ font-size:10px; padding:1px 4px; border:1px solid var(--border); border-radius:5px; }
.map-x{ border:none; background:none; color:var(--text-3); cursor:pointer; font-size:11px; }
.map-x:hover{ color:var(--danger,#c0392b); }
.map-mini{ font-size:9px; padding:1px 6px; border:1px solid var(--border); border-radius:5px; background:var(--surface2); cursor:pointer; }
.map-unset{ font-size:10px; color:var(--text-3); font-style:italic; }
.map-preview{ border-top:1px solid var(--border); padding:12px 16px; font-family:var(--mono); font-size:11px; white-space:pre; overflow:auto; max-height:30vh; background:var(--surface2); }
.map-preview.hidden{ display:none; }
@media(max-width:760px){ .map-canvas{ grid-template-columns:1fr; } .map-svg{ display:none; } }

/* ── FIX-Felder im Editor (gesperrt) ────────────────────────────────── */
.map-row.tgt.fixlock{ background:rgba(80,120,200,.06); border-style:solid; cursor:default; }
.map-fixval{ font-family:var(--mono); font-size:11px; font-weight:700; color:#3552a0; background:#3552a015; padding:1px 7px; border-radius:5px; }
.map-fixnote{ font-size:10px; color:var(--text-3); font-style:italic; }

/* ── Editierbare Feste Werte (Übersicht Seite 3) ─────────────────────── */
.p3-arr{ text-align:center; color:var(--text-3); }
.p3-fix-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.p3-fix-cell{ display:flex; flex-direction:column; gap:3px; background:var(--surface2); border-radius:var(--radius,8px); padding:7px 10px; }
.p3-fix-cell label{ font-family:var(--mono); font-size:10px; color:var(--text-3); }
.p3-fix-cell input{ border:1px solid var(--border); border-radius:6px; padding:5px 8px; font-size:12px; font-weight:600; background:var(--surface,#fff); color:var(--text); }
.p3-fix-cell input:focus{ outline:none; border-color:var(--accent,#c8541e); }
.p3-fix-bar{ display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap; }
.p3-fix-save{ padding:7px 14px; border:1px solid var(--accent,#c8541e); background:var(--accent,#c8541e); color:#fff; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; }
.p3-fix-save:hover{ filter:brightness(1.05); }
.p3-fix-note{ font-size:11px; color:var(--text-3); }
@media(max-width:680px){ .p3-fix-grid{ grid-template-columns:1fr 1fr; } }

/* ── Neues-Profil-Button + Dialog ───────────────────────────────────── */
.map-open-btn.alt{ background:var(--surface,#fff); color:var(--accent,#c8541e); }
.map-open-btn.alt:hover{ background:var(--accent,#c8541e); color:#fff; }
.p3-empty-map{ padding:14px; border:1px dashed var(--border); border-radius:8px; color:var(--text-3); font-size:12px; text-align:center; }
.map-dlg{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9500; display:flex; align-items:center; justify-content:center; }
.map-dlg.hidden{ display:none; }
.map-dlg-box{ background:var(--surface,#fff); border-radius:var(--radius-lg,12px); padding:20px 22px; width:min(420px,92vw); box-shadow:0 20px 60px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:12px; }
.map-dlg-title{ font-weight:700; font-size:15px; }
.map-dlg-box label{ display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--text-2); font-family:var(--mono); }
.map-dlg-box input, .map-dlg-box select{ border:1px solid var(--border); border-radius:7px; padding:8px 10px; font-size:13px; color:var(--text); background:var(--surface); }
.map-dlg-box input:focus, .map-dlg-box select:focus{ outline:none; border-color:var(--accent,#c8541e); }
.map-dlg-bar{ display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }

/* Mapping-Editor: Leeren-Button */
.map-btn.danger{ color:#b91c1c; border-color:#e3b3b0; }
.map-btn.danger:hover{ background:#fdecea; border-color:#b91c1c; color:#b91c1c; }

/* ── Profilerkennung (Editor) ───────────────────────────────────────── */
.map-detect{ padding:10px 22px; border-bottom:1px solid var(--border); background:var(--surface2); }
.map-det-head{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-2); margin-bottom:8px; }
.map-det-head span{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--text-3); }
.map-det-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.map-det-field{ flex:2; min-width:0; padding:5px 8px; border:1px solid var(--border); border-radius:7px; font-size:11px; font-family:var(--mono); background:var(--surface); }
.map-det-op{ flex:0 0 auto; padding:5px 8px; border:1px solid var(--border); border-radius:7px; font-size:11px; background:var(--surface); }
.map-det-val{ flex:1; min-width:80px; padding:5px 8px; border:1px solid var(--border); border-radius:7px; font-size:12px; background:var(--surface); }
.map-det-empty{ font-size:11px; color:var(--text-3); font-style:italic; margin-bottom:6px; }
.map-det-add{ font-size:11px; padding:5px 12px; border:1px dashed var(--border); border-radius:7px; background:var(--surface); cursor:pointer; color:var(--text-2); }
.map-det-add:hover{ border-color:var(--accent,#c8541e); color:var(--accent,#c8541e); }
/* Profilerkennung (Übersicht) */
.p3-det-rule{ display:inline-flex; align-items:center; gap:6px; margin:0 8px 6px 0; padding:3px 8px; background:var(--surface2); border-radius:6px; font-size:11px; }
.p3-det-op{ color:var(--text-3); font-size:10px; text-transform:uppercase; letter-spacing:.03em; }
.p3-det-val{ font-family:var(--mono); font-weight:600; }

/* Editor-Steuerelemente: Textfarbe explizit (Dark-Mode-sicher) */
.map-det-field, .map-det-op, .map-det-val, .map-fix-cell input, .map-sel, .map-tr, .map-fix, .map-dlg-box input{ color:var(--text); }
.map-det-field option, .map-det-op option, .map-sel option, .map-tr option{ color:var(--text); background:var(--surface); }
.map-det-val::placeholder, .map-fix-cell input::placeholder, .map-dlg-box input::placeholder{ color:var(--text-3); }

/* Profil-Löschen-Button (Seite 3) */
.map-open-btn.mdanger{ color:#b91c1c; border-color:#e3b3b0; }
.map-open-btn.mdanger:hover{ background:#b91c1c; color:#fff; border-color:#b91c1c; }

/* ════════════════════════════════════════════════════════════════
   SHOPWARE-STYLE SIDEBAR  (dunkle Navy-Schiene + Hover-Flyouts)
   ════════════════════════════════════════════════════════════════ */
:root{
  --sb-w:264px;
  --sb-bg:#1c2533; --sb-bg2:#222d3d;
  --sb-text:rgba(255,255,255,.72); --sb-text-hi:#fff;
  --sb-hover:rgba(255,255,255,.08); --sb-accent:var(--wemag,#e8651e);
  --sb-line:rgba(255,255,255,.09);
}
#appRoot{ padding-left:var(--sb-w); min-height:100vh; transition:padding-left .15s; }
body{ min-height:100vh; }

.sidebar{ position:fixed; left:0; top:0; bottom:0; width:var(--sb-w); background:var(--sb-bg); color:var(--sb-text); display:flex; flex-direction:column; z-index:200; overflow:visible; }

/* Markenkopf */
.sb-brand{ display:flex; align-items:center; gap:11px; padding:17px 18px 15px; border-bottom:1px solid var(--sb-line); cursor:pointer; white-space:nowrap; }
.sb-logo{ width:32px; height:32px; flex:none; border-radius:9px; background:linear-gradient(135deg,#2f74c0,#1d4e88); display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.sb-brandwrap{ min-width:0; }
.sb-brandname{ font-size:15px; font-weight:800; letter-spacing:.03em; color:#fff; line-height:1.15; }
.sb-brandsub{ font-size:10.5px; color:rgba(255,255,255,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:165px; }

/* Hauptnavigation */
.sb-nav{ flex:1; overflow:visible; padding:12px 10px; display:flex; flex-direction:column; gap:3px; }
.sb-item{ position:relative; }
.sb-link{ width:100%; display:flex; align-items:center; gap:13px; padding:11px 12px; border:none; background:none; cursor:pointer; border-radius:9px; color:var(--sb-text); font-family:var(--sans); font-size:14px; font-weight:500; text-align:left; transition:background .12s,color .12s; }
.sb-link:hover{ background:var(--sb-hover); color:var(--sb-text-hi); }
.sb-ico{ width:22px; flex:none; text-align:center; font-size:17px; line-height:1; }
.sb-label{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-caret{ font-size:11px; opacity:.5; flex:none; transition:transform .12s; }
.sb-item.has-sub:hover .sb-caret{ transform:translateX(2px); opacity:.9; }
.sb-link.nav-tab.active{ background:var(--sb-hover); color:#fff; box-shadow:inset 3px 0 0 var(--sb-accent); }
.sb-item.has-sub:has(.nav-tab.active) > .sb-link{ color:#fff; box-shadow:inset 3px 0 0 var(--sb-accent); }
.sb-item.has-sub:hover > .sb-link{ background:var(--sb-hover); color:#fff; }

/* Flyout (Untermenü) + transparente Hover-Brücke über die Lücke */
.sb-flyout{ position:absolute; left:100%; top:-6px; margin-left:9px; min-width:232px; background:var(--sb-bg2); border:1px solid rgba(255,255,255,.10); border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,.5); padding:9px; z-index:400; display:none; }
.sb-flyout::before{ content:''; position:absolute; left:-15px; top:0; bottom:0; width:15px; }
.sb-item.has-sub:hover > .sb-flyout{ display:block; }
.sb-fly-title{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.42); padding:5px 11px 9px; }
.sb-sub{ width:100%; display:flex; align-items:center; gap:10px; padding:9px 11px; border:none; background:none; cursor:pointer; border-radius:8px; color:rgba(255,255,255,.74); font-family:var(--sans); font-size:13px; text-align:left; white-space:nowrap; transition:background .12s,color .12s; }
.sb-sub:hover{ background:var(--sb-hover); color:#fff; }
.sb-sub.nav-tab.active{ background:var(--sb-hover); color:#fff; box-shadow:inset 3px 0 0 var(--sb-accent); }
.sb-sub-ico{ width:16px; text-align:center; font-size:12px; opacity:.55; flex:none; }

/* Fußbereich */
.sb-foot{ border-top:1px solid var(--sb-line); padding:12px; display:flex; flex-direction:column; gap:9px; background:rgba(0,0,0,.13); }
.sb-user{ display:flex; align-items:center; gap:9px; }
.sb-user-meta{ flex:1; min-width:0; }
.sb-user-name{ font-size:12.5px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-user-method{ font-size:9px; font-family:var(--mono); color:rgba(255,255,255,.45); }
.sb-iconbtn{ width:32px; height:32px; flex:none; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); cursor:pointer; font-size:14px; color:rgba(255,255,255,.8); display:flex; align-items:center; justify-content:center; transition:all .12s; }
.sb-iconbtn:hover{ background:#7a1d1d; border-color:#7a1d1d; color:#fff; }
.sb-foot-row{ display:flex; align-items:center; gap:8px; }
.sb-foot-row .nav-theme-btn{ width:34px; height:34px; flex:none; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .12s; }
.sb-foot-row .nav-theme-btn:hover{ background:rgba(255,255,255,.13); color:#fff; }
.sb-foot-row .nav-admin-btn{ flex:1; height:34px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid rgba(255,255,255,.15); border-radius:8px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); font-family:var(--sans); font-size:12px; font-weight:500; cursor:pointer; transition:all .12s; }
.sb-foot-row .nav-admin-btn:hover{ background:rgba(255,255,255,.13); color:#fff; }
.sb-clock{ font-size:10px; font-family:var(--mono); color:rgba(255,255,255,.4); white-space:nowrap; }

/* ── Schmale Schiene (responsive, ersetzt Burger; Flyout für ALLE Items) ── */
@media(max-width:880px){
  :root{ --sb-w:64px; }
  .sb-brand{ justify-content:center; padding:16px 0; }
  .sb-brandwrap, .sb-label, .sb-caret, .sb-user-meta, .sb-clock{ display:none; }
  .sb-link{ justify-content:center; padding:11px 0; gap:0; }
  .sb-ico{ width:auto; }
  .sb-foot-row{ flex-direction:column; }
  .sb-foot-row .nav-admin-btn{ width:34px; padding:0; }
  .sb-item.has-sub.open > .sb-flyout{ display:block; }
  .sb-flyout{ max-width:calc(100vw - 84px); top:0; }
  .sb-item.open > .sb-link{ background:var(--sb-hover); color:#fff; }
}

/* ── Sidebar-Feinschliff: Überlauf abklemmen, Statusleiste & Trenner ── */
.sb-brand{ overflow:hidden; }
.sb-brandwrap{ min-width:0; overflow:hidden; }
.sb-brandsub{ max-width:none; }
.sb-link, .sb-sub{ min-width:0; }
.sb-label{ min-width:0; }
.sb-fly-sep{ height:1px; background:rgba(255,255,255,.10); margin:7px 9px; }
/* Statusleiste/Restore nicht mehr hinter der Sidebar */
.status-bar{ left:var(--sb-w); }
#statusBarRestore.status-bar-restore{ left:calc(var(--sb-w) + 12px); }
@media(max-width:880px){
  .status-bar{ left:64px; }
  #statusBarRestore.status-bar-restore{ left:76px; }
}

/* ── SVG-Icons in der Sidebar (einheitlich) ── */
.sb-ico svg{ width:19px; height:19px; }
.sb-sub-ico svg{ width:16px; height:16px; }
.sb-caret svg{ width:13px; height:13px; }
.sb-logo svg{ width:19px; height:19px; }
.sb-iconbtn svg{ width:15px; height:15px; }
.sb-foot-row .nav-admin-btn svg{ width:15px; height:15px; flex:none; }
#adminDropdown svg{ width:16px; height:16px; flex:none; }

/* ── Einstellungen-Seite (page7) ── */
#page7.active{ display:block; }
.set-tabs{ display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.set-tab{ display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border:none; background:none; cursor:pointer; font-family:var(--sans); font-size:13px; font-weight:500; color:var(--text-2); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .12s,border-color .12s; }
.set-tab svg{ width:16px; height:16px; flex:none; opacity:.7; }
.set-tab:hover{ color:var(--text); }
.set-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
.set-tab.active svg{ opacity:1; }
.set-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 22px; box-shadow:var(--shadow-sm); }
.set-actions{ display:flex; justify-content:flex-end; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.set-save{ padding:9px 20px; background:var(--accent); color:#fff; border:none; border-radius:var(--radius); font-family:var(--sans); font-size:13px; font-weight:600; cursor:pointer; }
.set-save:hover{ filter:brightness(.95); }
@media(max-width:880px){ .set-tab span{ display:none; } .set-tab{ padding:10px 12px; } }


/* Hinterlegtes Logo im Sidebar-Markenkopf */
.sb-brand .nav-brand-logo{ max-height:40px; max-width:100%; object-fit:contain; display:block; }

/* ════════════════════════════════════════════════════════════════
   MOBILE · Datenintensive Seiten (Layouts einspaltig, Tabellen scrollbar)
   ════════════════════════════════════════════════════════════════ */
@media(max-width:880px){
  /* Mehrspaltige Layouts → einspaltig */
  .p1-layout{ grid-template-columns:1fr !important; padding:1rem !important; }
  .p2-grid{ grid-template-columns:1fr !important; }
  .p2-config-panel{ grid-template-columns:1fr !important; }
  .p2-stats{ grid-template-columns:repeat(2,1fr) !important; }
  .p2-kpis{ grid-template-columns:repeat(2,1fr) !important; }
  .p4-grid{ grid-template-columns:1fr !important; }
  .edit-grid, .edit-grid-2, .extract-grid{ grid-template-columns:1fr !important; }
  .p0-charts-grid, .p0-quick-grid, .p0-kpi-grid, .p0-catalog-history-grid{ grid-template-columns:1fr !important; }
  #profileLegend{ grid-template-columns:1fr 1fr !important; }
  /* Container-Innenabstände reduzieren */
  .p4-wrap, .p2-wrap{ padding:1rem !important; }
  /* Breite Tabellen horizontal scrollbar machen */
  .p4-table, .pos-table, .positions-table, .mapping-table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  /* Settings-Karte schmaler */
  .set-card{ padding:16px 14px; }
}
@media(max-width:560px){
  .p2-stats, .p2-kpis{ grid-template-columns:1fr 1fr !important; }
  #profileLegend{ grid-template-columns:1fr !important; }
}