/* ==========================================================================
   emsnode theme.css — ZENTRALES Design-System für alle emsnode-Seiten.
   Einbinden:  <link rel="stylesheet" href="https://compliance.emsnode.de/theme.css">
   Zusammen mit header.js entsteht auf jeder Seite der identische Kopf.
   Eine Änderung hier = überall gleich.
   ========================================================================== */

/* ---- Design-Tokens ---- */
:root{
  --bg:#ffffff; --surface:#f2f2f2; --surface2:#ffffff; --field:#ffffff;
  --text:#1a1a1a; --muted:#5b6570;
  --primary:#005b9a; --accent:#68b02e; --ok:#16a34a; --red:#d64545;
  --border:#e4e7ea; --shadow:0 6px 24px rgba(0,0,0,.07);
  --radius:18px;
}
html[data-theme="dark"]{
  --bg:#0f1720; --surface:#182533; --surface2:#16212e; --field:#0b1220;
  --text:#f3f5f7; --muted:#9aa7b4;
  --primary:#4aa3e0; --accent:#7ec63a; --ok:#7ec63a; --red:#f16b6b;
  --border:#26333f; --shadow:0 6px 24px rgba(0,0,0,.35);
}

/* ---- Basis ---- */
/* Scrollleisten-Platz immer reservieren: sonst "springt" der Kopf beim Wechsel
   zwischen langen und kurzen Seiten horizontal. */
html{overflow-y:scroll;scrollbar-gutter:stable}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;transition:background .25s,color .25s}
a{color:var(--primary);text-decoration:none}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}

/* ---- Header (identisch auf allen Seiten) ---- */
header.en-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  /* padding:0 schlägt alte seiteneigene header{}-Regeln (Element-Selektor) */
  padding:0;margin:0;display:block}
.en-bar{max-width:1040px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.en-logo{display:flex;align-items:center;gap:13px;color:inherit}
.en-logo svg.en-mark{width:44px;height:44px;flex:none}
.en-name{font-size:26px;font-weight:800;letter-spacing:-.5px;color:#005b9a;white-space:nowrap}
.en-name span{font-weight:400}
html[data-theme="dark"] .en-name{color:#4aa3e0}
.en-header[data-wordmark="neutral"] .en-name{color:var(--text)}
.en-product{font-size:13px;color:var(--muted);font-weight:600;margin-left:2px;white-space:nowrap}
.en-right{display:flex;align-items:center;gap:10px}
.en-nav{display:flex;align-items:center;gap:2px}
.en-nav a{color:var(--text);font-size:14px;font-weight:600;padding:8px 10px;border-radius:9px}
.en-nav a:hover{background:var(--surface)}
.en-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);
  width:40px;height:40px;border-radius:11px;cursor:pointer;display:grid;place-items:center;padding:0}
.en-btn:hover{border-color:var(--primary)}
.en-btn svg{width:20px;height:20px;display:block}
html[data-theme="dark"] .en-moon{display:none}
html[data-theme="light"] .en-sun{display:none}
.en-avatar{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;
  display:inline-grid;place-items:center;font-size:14px;font-weight:700}
.en-login{font-weight:700;font-size:14px;padding:8px 10px}

/* ---- App-Wechsler (Google-Stil: 9-Punkte-Raster) ---- */
.en-apps{position:relative}
.en-apps-menu{position:absolute;right:0;top:48px;background:var(--surface2);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow);padding:14px;display:none;z-index:60;width:264px}
.en-apps-menu.open{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.en-app{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:12px;color:var(--text);font-size:12.5px;font-weight:600;text-align:center}
.en-app:hover{background:var(--surface)}
.en-app .ic{font-size:24px;line-height:1}

/* ---- Karten / Buttons / Footer ---- */
.en-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow)}
.en-primary{background:var(--primary);color:#fff;border:none;border-radius:10px;
  padding:12px 18px;font-weight:700;font-size:15px;cursor:pointer}
.en-primary:hover{filter:brightness(1.08)}
.en-footer{border-top:1px solid var(--border);margin-top:50px;padding:28px 0;color:var(--muted);font-size:14px}
.en-footer a{color:var(--muted)} .en-footer a:hover{color:var(--primary)}

@media (max-width:640px){
  .en-name{font-size:22px} .en-logo svg.en-mark{width:38px;height:38px}
  .en-nav{display:none}
}