@import url("/assets/css/fonts.css");
/* =========================================================================
   Nexus-Office  ·  base.css
   Geteilte Grundlage: Reset, Marken-Tokens, Nexus-Hülle (Ribbon + Footer).
   Jede Demo-Seite bringt ihr EIGENES Design mit (eigene <seite>.css).
   Diese Datei hält nur die verbindende Marken-Ebene konsistent.
   ========================================================================= */

/* ---- Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100dvh;line-height:1.5;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,svg,video,canvas{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
:where(h1,h2,h3,h4){text-wrap:balance;line-height:1.05}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--nx-focus,#1b3cff);outline-offset:3px;border-radius:2px}

/* ---- Marken-Tokens (Nexus-Hülle) -------------------------------------- */
:root{
  --nx-ink:#0c0e11;          /* near-black Basis der Marke */
  --nx-ink-soft:#14171c;
  --nx-bone:#f3f0ea;         /* off-white */
  --nx-bone-dim:#cfcabf;
  --nx-graphite:#8b929c;     /* gedämpfter Neutral-Ton */
  --nx-line:color-mix(in srgb, var(--nx-bone) 14%, transparent);
  --nx-accent:#f3f0ea;       /* Hülle bleibt NEUTRAL (bone) — jede Seite bringt ihre eigene Farbe */
  --nx-accent-deep:#cfcabf;
  --nx-focus:#1b3cff;        /* nur für Fokus-Ringe */
  --nx-shell-h:52px;         /* Höhe der Ribbon-Leiste */
  --nx-font-display:'Space Grotesk','Space Grotesk Fallback',system-ui,-apple-system,Segoe UI,sans-serif;
  --nx-font-body:'Manrope','Manrope Fallback',system-ui,-apple-system,Segoe UI,sans-serif;
  --nx-font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --nx-ease:cubic-bezier(.16,1,.3,1);
}

/* Font-Fallback-Metriken (verhindert Layout-Sprung bevor Webfonts laden) */
@font-face{font-family:'Space Grotesk Fallback';src:local('Arial');size-adjust:97%;ascent-override:95%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';src:local('Arial');size-adjust:100%;ascent-override:100%;descent-override:28%;line-gap-override:0%}

/* =========================================================================
   Nexus-Ribbon (schlanke, seitenübergreifende Leiste) + Footer
   Werden von shell.js in JEDE Seite injiziert, damit der Katalog navigierbar
   und rechtssicher bleibt, egal wie eigen die Demo darunter gestaltet ist.
   ========================================================================= */
.nx-ribbon{
  position:sticky;top:0;z-index:100;
  height:var(--nx-shell-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:0 clamp(1rem,4vw,2.25rem);
  background:color-mix(in srgb, var(--nx-ink) 82%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--nx-line);
  color:var(--nx-bone);
  font-family:var(--nx-font-body);
}
@media (prefers-reduced-transparency:reduce){
  .nx-ribbon{background:var(--nx-ink)}
}
.nx-ribbon__brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--nx-font-display);font-weight:600;letter-spacing:-.01em;font-size:.98rem}
.nx-ribbon__mark{width:22px;height:22px;flex:0 0 auto;color:var(--nx-accent)}
.nx-ribbon__nav{display:flex;align-items:center;gap:clamp(.6rem,2vw,1.6rem);font-size:.86rem}
.nx-ribbon__nav a{color:var(--nx-bone-dim);transition:color .25s var(--nx-ease);white-space:nowrap}
.nx-ribbon__nav a:hover,.nx-ribbon__nav a[aria-current="page"]{color:var(--nx-bone)}
.nx-ribbon__cta{
  color:var(--nx-ink)!important;background:var(--nx-accent);
  padding:.42rem .9rem;border-radius:999px;font-weight:600;font-size:.82rem;
  transition:transform .25s var(--nx-ease),background .25s var(--nx-ease);
}
.nx-ribbon__cta:hover{background:var(--nx-bone);transform:translateY(-1px)}
.nx-ribbon__burger{display:none;width:38px;height:38px;align-items:center;justify-content:center;color:var(--nx-bone)}
.nx-ribbon__burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}

@media (max-width:760px){
  .nx-ribbon__nav{
    position:fixed;inset:var(--nx-shell-h) 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;padding:.5rem clamp(1rem,4vw,2rem) 1.25rem;
    background:var(--nx-ink);border-bottom:1px solid var(--nx-line);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .28s var(--nx-ease),transform .28s var(--nx-ease)}
  .nx-ribbon__nav a{padding:.85rem .25rem;font-size:1rem;border-bottom:1px solid var(--nx-line)}
  .nx-ribbon__nav .nx-ribbon__cta{margin-top:.9rem;text-align:center;border-bottom:none}
  .nx-ribbon[data-open="true"] .nx-ribbon__nav{opacity:1;transform:none;pointer-events:auto}
  .nx-ribbon__burger{display:inline-flex}
}

/* ---- Footer ------------------------------------------------------------ */
.nx-footer{
  background:var(--nx-ink);color:var(--nx-bone-dim);
  font-family:var(--nx-font-body);
  border-top:1px solid var(--nx-line);
  padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,5vw,3rem) 2rem;
}
.nx-footer__grid{max-width:1200px;margin:0 auto;display:grid;gap:2.25rem;grid-template-columns:1.4fr 1fr 1fr}
@media (max-width:720px){.nx-footer__grid{grid-template-columns:1fr}}
.nx-footer__brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--nx-font-display);font-weight:600;color:var(--nx-bone);font-size:1.15rem}
.nx-footer__brand svg{width:26px;height:26px;color:var(--nx-accent)}
.nx-footer p{margin-top:.9rem;max-width:34ch;font-size:.92rem;line-height:1.6}
.nx-footer h4{color:var(--nx-bone);font-family:var(--nx-font-display);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem;font-weight:600}
.nx-footer li{margin-bottom:.6rem}
.nx-footer a{font-size:.92rem;transition:color .2s var(--nx-ease)}
.nx-footer a:hover{color:var(--nx-accent)}
.nx-footer__base{max-width:1200px;margin:2.75rem auto 0;padding-top:1.6rem;border-top:1px solid var(--nx-line);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;font-size:.82rem}
.nx-footer__legal{display:flex;flex-wrap:wrap;gap:1.25rem}

/* ---- geteilte Hilfen --------------------------------------------------- */
.nx-skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--nx-accent);color:var(--nx-ink);padding:.6rem 1rem;border-radius:0 0 8px 0;font-family:var(--nx-font-body);font-weight:600}
.nx-skip:focus{left:0}
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--nx-ease),transform .8s var(--nx-ease)}
[data-reveal].is-in{opacity:1;transform:none}
.nx-demo-flag{
  position:fixed;right:12px;bottom:12px;z-index:90;
  font-family:var(--nx-font-body);font-size:.72rem;font-weight:600;letter-spacing:.03em;
  color:var(--nx-ink);background:var(--nx-accent);
  padding:.4rem .7rem;border-radius:999px;box-shadow:0 6px 22px rgba(0,0,0,.28);
  display:inline-flex;align-items:center;gap:.4rem;opacity:.94}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}