/* mgap Design System — Tokens, Schriften, d-*-Primitives
   Quelle: Claude-Design-Projekt „mgap Design System" (styles.css, Stand 09.09.2026).
   Nur die Schriftpfade sind angepasst. Nicht frei editieren — Änderungen gehören ins Design System. */

@font-face{font-family:'Space Grotesk';src:url('fonts/spacegrotesk-latin.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';src:url('fonts/spacegrotesk-latin-ext.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';src:url('fonts/montserrat-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';src:url('fonts/montserrat-latin-ext.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
/* Marke */
--color-lime:#B8FB3C;--color-lime-dark:#8FCC1A;--color-lime-pale:#F1FFD6;
--color-navy:#001F54;--color-navy-mid:#002668;--color-navy-deep:#000D2A;
/* Flächen & Text */
--color-paper:#FFFFFF;--color-arctic:#EBF1FF;--color-ink:#0B1A3A;--color-body:#2A3A5E;--color-muted:#5C6C8F;
--color-on-navy:#EBF1FF;--color-on-navy-dim:rgba(235,241,255,.72);
/* Linien */
--color-line:rgba(0,31,84,.12);--color-line-strong:rgba(0,31,84,.24);--color-line-on-navy:rgba(235,241,255,.14);
--color-error:#B3261E;
/* Typo */
--font-display:'Space Grotesk',system-ui,sans-serif;--font-body:'Montserrat',system-ui,sans-serif;
--font-size-display:80px;--font-size-h2:52px;--font-size-h3:22px;--font-size-h4:17px;
--font-size-lead:19px;--font-size-body:16px;--font-size-small:14px;--font-size-micro:13px;
--font-size-stat:44px;
/* Raster */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-14:56px;--space-18:72px;--space-24:96px;
--radius:2px;--radius-pill:999px;
--shadow-card:0 18px 48px rgba(0,31,84,.14);
--sidebar-width:272px;
--gl-shift:0px;
--ease-out:cubic-bezier(.23,1,.32,1);
--ease-in-out:cubic-bezier(.77,0,.175,1);
--ease-drawer:cubic-bezier(.32,.72,0,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--color-paper);color:var(--color-body);font-family:var(--font-body);font-size:var(--font-size-body);line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--color-lime);color:var(--color-navy)}
*{scrollbar-width:thin;scrollbar-color:var(--color-line-strong) transparent}
a{color:var(--color-navy);text-decoration:underline;text-decoration-color:rgba(0,31,84,.3);text-underline-offset:3px;transition:text-decoration-color .2s var(--ease-out)}
a:hover{text-decoration-color:var(--color-lime-dark)}
img,svg{display:block;max-width:100%}
strong,b{font-weight:600;color:var(--color-ink)}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--color-navy);outline-offset:3px}
.d-on-navy :focus-visible{outline-color:var(--color-lime)}

/* Typo-Primitives */
.d-display,.d-h2,.d-h3,.d-h4{font-family:var(--font-display);color:var(--color-ink);line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
.d-display{font-size:clamp(44px,5.4vw,var(--font-size-display));font-weight:700}
.d-h2{font-size:clamp(34px,3.6vw,var(--font-size-h2));font-weight:700}
.d-h3{font-size:var(--font-size-h3);font-weight:600;letter-spacing:-.015em;line-height:1.2}
.d-h4{font-size:var(--font-size-h4);font-weight:600;letter-spacing:-.01em}
.d-lead{font-size:var(--font-size-lead);line-height:1.6;color:var(--color-body);max-width:68ch}
.d-note{padding-top:var(--space-4);border-top:1px solid var(--color-line);color:var(--color-muted);font-size:14.5px;max-width:78ch}
.d-stat{font-family:var(--font-display);font-size:var(--font-size-stat);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--color-navy);font-variant-numeric:tabular-nums}
.d-mono{font-family:var(--font-display);font-weight:500;color:var(--color-ink)}
/* Lime-Textmarker: das einzige Emphase-Mittel */
.d-mark{background:linear-gradient(transparent 58%,var(--color-lime) 58%,var(--color-lime) 92%,transparent 92%);padding:0 .06em}

/* Flächen */
.d-on-navy{background:var(--color-navy);color:var(--color-on-navy)}
.d-on-navy .d-display,.d-on-navy .d-h2,.d-on-navy .d-h3,.d-on-navy .d-h4{color:var(--color-on-navy)}
.d-on-navy .d-lead{color:var(--color-on-navy-dim)}
.d-on-navy .d-mark{background:none;color:var(--color-lime)}
.d-on-lime{background:var(--color-lime);color:var(--color-navy)}
.d-on-lime .d-h2,.d-on-lime .d-h3{color:var(--color-navy)}

/* Buttons */
.d-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:15px;padding:14px 22px;border-radius:var(--radius);border:0;cursor:pointer;text-decoration:none;transition:transform 160ms var(--ease-out),background 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.d-btn:active{transform:scale(.97)}
.d-btn-lime{background:var(--color-lime);color:var(--color-navy)}
.d-btn-navy{background:var(--color-navy);color:var(--color-on-navy)}
.d-btn-line{background:transparent;color:var(--color-on-navy);box-shadow:inset 0 0 0 1.5px var(--color-line-on-navy)}
.d-btn-line-ink{background:transparent;color:var(--color-navy);box-shadow:inset 0 0 0 1.5px var(--color-line-strong)}
@media(hover:hover) and (pointer:fine){
.d-btn-lime:hover{background:var(--color-lime-dark)}
.d-btn-navy:hover{background:var(--color-navy-mid)}
.d-btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--color-lime);color:var(--color-lime)}
.d-btn-line-ink:hover{box-shadow:inset 0 0 0 1.5px var(--color-navy)}
}
.d-chip{border:1px solid var(--color-line-strong);padding:6px 12px;border-radius:var(--radius);font-size:13.5px;color:var(--color-body)}

/* Sektionskopf: 2-px-Regel + Meta, ohne Eyebrow */
.d-sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-6);align-items:end;padding-bottom:var(--space-5);border-bottom:2px solid var(--color-ink)}
.d-on-navy .d-sec-head{border-bottom-color:var(--color-line-on-navy)}
.d-sec-meta{font-family:var(--font-display);font-size:var(--font-size-micro);font-weight:600;color:var(--color-muted);padding-bottom:6px;white-space:nowrap}
.d-on-navy .d-sec-meta{color:var(--color-on-navy-dim)}

/* Listen-Raute */
.d-check{list-style:none;display:grid;gap:var(--space-4)}
.d-check li{padding-left:28px;position:relative}
.d-check li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:12px;background:var(--color-lime);transform:rotate(45deg)}

/* Ledger-Zeile */
.d-ledger{border-top:1px solid var(--color-line-strong)}
.d-row{display:grid;gap:var(--space-6);padding:var(--space-5) 0;border-bottom:1px solid var(--color-line);align-items:start;font-size:15px}
.d-row-head{padding:10px 0;font-family:var(--font-display);font-size:12.5px;font-weight:600;color:var(--color-muted);border-bottom:1px solid var(--color-line-strong)}
.d-row b{font-family:var(--font-display);font-size:var(--font-size-h4);display:block}
.d-row small{display:block;color:var(--color-muted);font-size:13.5px;margin-top:2px}
.d-row-mark{background:var(--color-lime-pale);margin:0 -20px;padding:var(--space-5) 20px;border-bottom-color:transparent}
.d-tag{display:inline-block;font-family:var(--font-display);font-size:12px;font-weight:600;background:var(--color-navy);color:var(--color-lime);padding:3px 8px;border-radius:var(--radius);margin-bottom:8px}

/* Glossar: (i) an Fachbegriffen, reines CSS, per Tastatur erreichbar */
.d-gl{position:relative;white-space:nowrap}
.d-gl>i{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:5px;border-radius:50%;border:1px solid currentColor;font-family:var(--font-display);font-style:normal;font-size:9.5px;font-weight:700;line-height:1;opacity:.55;cursor:help;vertical-align:1px;transition:opacity 160ms var(--ease-out),background 160ms var(--ease-out),color 160ms var(--ease-out)}
.d-gl:hover>i,.d-gl>i:focus-visible{opacity:1;background:var(--color-lime);border-color:var(--color-lime);color:var(--color-navy);outline:none}
.d-gl-tip{translate:var(--gl-shift) 0;position:absolute;left:0;bottom:calc(100% + 10px);z-index:30;width:max-content;max-width:min(280px,calc(100vw - 48px));white-space:normal;padding:11px 14px;border-radius:var(--radius);background:var(--color-navy);color:var(--color-on-navy);font-family:var(--font-body);font-size:12.5px;font-weight:400;line-height:1.5;letter-spacing:0;text-transform:none;box-shadow:0 14px 40px rgba(0,13,42,.35);border:1px solid var(--color-line-on-navy);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
.d-gl-tip::after{content:"";position:absolute;top:100%;left:clamp(10px,calc(16px - var(--gl-shift)),calc(100% - 22px));border:6px solid transparent;border-top-color:var(--color-navy)}
.d-gl-r>.d-gl-tip{left:auto;right:0}
.d-gl-r>.d-gl-tip::after{left:auto;right:clamp(10px,calc(16px + var(--gl-shift)),calc(100% - 22px))}
.d-gl:hover>.d-gl-tip,.d-gl:focus-within>.d-gl-tip{opacity:1;transform:none}
.d-on-navy .d-gl-tip{background:var(--color-paper);color:var(--color-body);border-color:var(--color-line);box-shadow:0 14px 40px rgba(0,13,42,.5)}
.d-on-navy .d-gl-tip::after{border-top-color:var(--color-paper)}
@media(prefers-reduced-motion:reduce){.d-gl-tip{transition:none}}