/* INVOP – aus understanding.html extrahiert */
@media print {
@page { margin: 0.5cm; }
figure, table { break-inside: avoid; }
*, ::before, ::after { -webkit-print-color-adjust: exact; backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: 0.001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; }
}
.scp0:hover { border-left-color: var(--color-accent) !important; color: var(--color-accent-700) !important; }
.scp1:hover { background: var(--color-accent-100) !important; border-color: var(--color-accent) !important; transform: translateX(3px) !important; }
.scp2:hover { transform: scale(1.03) !important; }
.scp3:hover { transform: translateY(-2px) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 80%, transparent), var(--shadow-lg) !important; }
.scp4:hover { color: var(--color-accent-300) !important; }
html, body { height: 100%; margin: 0px; }
@font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/3dd62fbbcd748024.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bac411df68fa3d93.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/7a686e76312866b7.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Barlow; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/2e9076077ee0824f.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Barlow; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/7985f1abf1d07b81.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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: Barlow; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/80e7dc5605dd451b.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/95da6188105a522b.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/67dfa555a72fdd75.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/488b58098126c00b.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/864c709d407bcd81.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/f8ec026d88a29e8d.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/31ff5e6e96a096fd.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/50c25f3210bca008.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/a2f92ada1d0eaf10.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/5bc49d41f32810a1.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Barlow; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/892f58db77d3cf09.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: Barlow; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/2b0e32435d0c87bc.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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: Barlow; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/98aa8b5c2582107d.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bc42ba6f77ac0be1.woff2") format("woff2"); unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ed8618e86bffee6c.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/0e2a408159b32d81.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --color-bg: #f2f2f3; --color-surface: #e9e9ea; --color-text: #1d1f20; --color-accent: #5980a6; --color-accent-2: #728fab; --color-divider: color-mix(in srgb, #1d1f20 16%, transparent); --color-neutral-100: #f5f5f8; --color-neutral-200: #e7e7ea; --color-neutral-300: #d4d4d7; --color-neutral-400: #b7b7ba; --color-neutral-500: #98989b; --color-neutral-600: #7a7a7d; --color-neutral-700: #5d5d60; --color-neutral-800: #424244; --color-neutral-900: #2b2b2d; --color-accent-100: #eef6ff; --color-accent-200: #d6ebff; --color-accent-300: #b5d9fd; --color-accent-400: #94bce3; --color-accent-500: #749dc4; --color-accent-600: #597ea3; --color-accent-700: #416180; --color-accent-800: #2c455d; --color-accent-900: #1d2d3d; --color-accent-2-100: #eef6ff; --color-accent-2-200: #d6ebff; --color-accent-2-300: #bdd8f2; --color-accent-2-400: #9ebbd8; --color-accent-2-500: #7e9cb8; --color-accent-2-600: #627d98; --color-accent-2-700: #486077; --color-accent-2-800: #314457; --color-accent-2-900: #1f2d3a; --font-heading: "Barlow Condensed", system-ui, sans-serif; --font-heading-weight: 600; --font-body: "Barlow", system-ui, sans-serif; --space-1: 3.4px; --space-2: 6.8px; --space-3: 10.2px; --space-4: 13.6px; --space-6: 20.4px; --space-8: 27.2px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent); }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0px; }
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentcolor; }
.blueprint > .corner::before { left: 5px; top: 0px; width: 1px; height: 100%; }
.blueprint > .corner::after { top: 5px; left: 0px; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }
.duotone { position: relative; overflow: hidden; }
.duotone::after { content: ""; position: absolute; inset: 0px; pointer-events: none; background: var(--color-accent); mix-blend-mode: color; }
*, ::before, ::after { box-sizing: border-box; }
body { margin: 0px; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); }
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0px; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); }
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0px; }
.btn-block { width: 100%; margin-top: var(--space-2); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: none; }
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-accent); }
.dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0px; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }
:root { color-scheme: light; --inv-ease: cubic-bezier(.2,.7,.2,1); --inv-fast: .3s; --inv-slow: .55s; --inv-glass-top: color-mix(in srgb, #fff 38%, transparent); --inv-glass-mid: color-mix(in srgb, #fff 6%, transparent); --inv-glass-low: color-mix(in srgb, var(--color-accent-900) 9%, transparent); --inv-hairline: color-mix(in srgb, #fff 72%, transparent); --inv-glow: color-mix(in srgb, var(--color-accent-300) 85%, transparent); --inv-ink-on-accent: var(--color-bg); --inv-nav-h: 72px; }
:root[data-theme="dark"] { color-scheme: dark; --color-bg: #151d27; --color-surface: #1c2733; --color-text: #e9ecf0; --color-divider: color-mix(in srgb, #e9ecf0 16%, transparent); --color-neutral-100: #1a232e; --color-neutral-200: #232e3b; --color-neutral-300: #34404e; --color-neutral-400: #4a5766; --color-neutral-500: #7a8694; --color-neutral-600: #9ba5b0; --color-neutral-700: #b6bec7; --color-neutral-800: #d3d8de; --color-neutral-900: #eef1f4; --color-accent-100: #1f2f42; --color-accent-200: #29405a; --color-accent-300: #7ea7d2; --color-accent-400: #94bce3; --color-accent-500: #749dc4; --color-accent-600: #86accf; --color-accent-700: #a6c6e6; --color-accent-800: #c2d9ef; --color-accent-900: #0d141c; --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 3px 10px rgba(0,0,0,.55); --shadow-lg: 0 12px 32px rgba(0,0,0,.6); --inv-glass-top: rgba(255,255,255,.16); --inv-glass-mid: rgba(255,255,255,.03); --inv-glass-low: rgba(0,0,0,.28); --inv-hairline: rgba(255,255,255,.14); --inv-ink-on-accent: #0d141c; }
:root[data-theme="dark"] img { filter: brightness(0.9); }
:root[data-theme="dark"] .inv-glass { background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 55%, rgba(0, 0, 0, 0.25) 100%); }
@keyframes inv-page { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
html { text-size-adjust: 100%; transition: background-color 0.35s; }
body { animation: inv-page .5s var(--inv-ease) both; transition: background-color 0.35s, color 0.35s; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
a { transition: color var(--inv-fast) var(--inv-ease), text-shadow var(--inv-fast) var(--inv-ease), border-color var(--inv-fast) var(--inv-ease); }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 28%, transparent); }
.inv-prose p { max-width: 68ch; }
.inv-prose p + p { margin-top: 1em; }
.inv-nav { gap: 12px; transition: padding var(--inv-slow) var(--inv-ease), box-shadow var(--inv-slow) var(--inv-ease), background-color .35s; padding-left: max(16px, env(safe-area-inset-left)) !important; padding-right: max(16px, env(safe-area-inset-right)) !important; }
.inv-nav .inv-brand-svg { transition: height var(--inv-slow) var(--inv-ease), width var(--inv-slow) var(--inv-ease); }
.inv-nav .inv-brand-word { transition: font-size var(--inv-slow) var(--inv-ease) !important; }
.inv-nav .inv-brand-sub { overflow: hidden; max-height: 14px; transition: opacity .25s var(--inv-ease), max-height var(--inv-slow) var(--inv-ease); }
.inv-nav[data-compact="1"] { box-shadow: var(--shadow-md); padding-top: 5px !important; padding-bottom: 5px !important; }
.inv-nav[data-compact="1"] .inv-brand-svg { height: 30px; width: 24px; }
.inv-nav[data-compact="1"] .inv-brand-sub { opacity: 0; max-height: 0px; }
.inv-nav[data-compact="1"] .inv-brand-word { font-size: 18px !important; }
.inv-nav[data-compact="1"] .inv-nl { height: 32px; }
.inv-nav-links { display: none !important; gap: 10px !important; }
.inv-menu-btn { display: inline-flex !important; }
@media (min-width: 900px) {
.inv-nav { padding-left: clamp(16px, 5vw, 72px) !important; padding-right: clamp(16px, 5vw, 72px) !important; }
.inv-nav-links { display: flex !important; }
.inv-menu-btn { display: none !important; }
}
.inv-drawer a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--color-divider); color: inherit; font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; font-size: 22px; letter-spacing: 0.02em; }
.inv-drawer a:hover { color: var(--color-accent-700); text-shadow: 0 0 12px var(--inv-glow); }
.inv-nl { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 38px; padding: 0px 9px; border-radius: 999px; color: inherit; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; appearance: none; border: 1px solid var(--color-divider); backdrop-filter: blur(8px); background: linear-gradient(180deg, var(--inv-glass-top), var(--inv-glass-mid) 48%, var(--inv-glass-low)), color-mix(in srgb, var(--color-bg) 50%, transparent); box-shadow: inset 0 1px 0 var(--inv-hairline), var(--shadow-sm); transition: color .45s var(--inv-ease), border-color .45s var(--inv-ease), box-shadow .45s var(--inv-ease), background-color .45s var(--inv-ease), padding .45s var(--inv-ease), height var(--inv-slow) var(--inv-ease); }
.inv-nl svg { flex: 0 0 auto; transition: transform .45s var(--inv-ease), filter .45s var(--inv-ease); }
.inv-nl .inv-nl-label { display: inline-block; max-width: 0px; opacity: 0; overflow: hidden; white-space: nowrap; margin-left: 0px; transform: translateX(-6px); transition: max-width var(--inv-slow) var(--inv-ease), opacity .35s var(--inv-ease) .1s, margin-left var(--inv-slow) var(--inv-ease), transform var(--inv-slow) var(--inv-ease); }
.inv-nl:hover, .inv-nl:focus-visible, .inv-nl[data-active="1"] { padding: 0px 14px 0px 10px; color: var(--color-accent-700); border-color: var(--color-accent); background-color: var(--color-accent-100); box-shadow: inset 0 1px 0 var(--inv-hairline), var(--shadow-md), 0 0 0 4px color-mix(in srgb, var(--color-accent) 12%, transparent); }
.inv-nl:hover, .inv-nl:focus-visible { text-shadow: 0 0 10px var(--inv-glow); }
.inv-nl:hover svg, .inv-nl:focus-visible svg { filter: drop-shadow(0 0 5px var(--inv-glow)); transform: translateY(-1px) scale(1.06); }
.inv-nl:hover .inv-nl-label, .inv-nl:focus-visible .inv-nl-label, .inv-nl[data-active="1"] .inv-nl-label { max-width: 170px; opacity: 1; margin-left: 8px; transform: none; }
.inv-nl[data-active="1"], .inv-nl[data-active="1"]:hover { background-color: var(--color-accent); color: var(--inv-ink-on-accent); border-color: var(--color-accent); text-shadow: none; }
.inv-nl:active svg { transform: scale(0.92); }
.inv-nl:focus-visible { outline-offset: 2px; }
@media (hover: none) {
.inv-nl:not([data-active="1"]) .inv-nl-label { display: none; }
}
@keyframes inv-glint { 
  0%, 80% { background-position: 200% 0px; }
  100% { background-position: -100% 0px; }
}
.btn { position: relative; isolation: isolate; backdrop-filter: blur(8px); background-image: linear-gradient(180deg, var(--inv-glass-top), var(--inv-glass-mid) 48%, var(--inv-glass-low)); box-shadow: inset 0 1px 0 var(--inv-hairline), inset 0 -1px 0 color-mix(in srgb, var(--color-accent-900) 18%, transparent), var(--shadow-sm); transition: box-shadow .35s var(--inv-ease), transform .35s var(--inv-ease), background-color .25s var(--inv-ease), color .25s var(--inv-ease), text-shadow .25s var(--inv-ease); }
.btn::after { content: ""; position: absolute; inset: 0px; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, rgb(255, 255, 255) 55%, transparent) 50%, transparent 62%) 0% 0% / 300% 100% no-repeat; animation: 14s ease-in-out 0s infinite normal none running inv-glint; }
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--inv-hairline), inset 0 -1px 0 color-mix(in srgb, var(--color-accent-900) 22%, transparent), var(--shadow-md); }
.btn:hover::after { animation-duration: 1.4s; }
.btn:active { transform: translateY(0px); box-shadow: inset 0 2px 4px color-mix(in srgb, var(--color-accent-900) 28%, transparent); }
.btn-secondary:hover, .btn-ghost:hover { color: var(--color-accent-700); text-shadow: 0 0 10px var(--inv-glow); }
.btn-primary, .nav a.btn-primary { color: var(--inv-ink-on-accent); background-color: var(--color-accent); background-image: linear-gradient(180deg, color-mix(in srgb, #fff 36%, transparent), transparent 50%, color-mix(in srgb, var(--color-accent-900) 28%, transparent)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), inset 0 -2px 3px color-mix(in srgb, var(--color-accent-900) 40%, transparent), 0 6px 16px color-mix(in srgb, var(--color-accent-700) 30%, transparent); }
.btn-primary:hover, .nav a.btn-primary:hover { color: var(--inv-ink-on-accent); background-color: var(--color-accent-600); text-shadow: rgba(255, 255, 255, 0.7) 0px 0px 8px; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent), inset 0 -2px 3px color-mix(in srgb, var(--color-accent-900) 40%, transparent), 0 10px 24px color-mix(in srgb, var(--color-accent-700) 38%, transparent); }
a.blueprint, article.blueprint, figure.blueprint { box-shadow: inset 0 1px 0 var(--inv-hairline), var(--shadow-sm); transition: box-shadow .4s var(--inv-ease), transform var(--inv-fast) var(--inv-ease), background var(--inv-fast) var(--inv-ease); }
a.blueprint:hover, article.blueprint:hover { box-shadow: inset 0 1px 0 var(--inv-hairline), var(--shadow-lg); }
.inv-layer { position: absolute; inset: -12% 0px; background-repeat: no-repeat; background-position: center center; background-size: cover; pointer-events: none; will-change: transform; }
:root[data-theme="dark"] footer { --color-bg: #e9ecf0; --color-accent-200: #b9cbde; --color-accent-300: #d0dde9; --color-accent-400: #94bce3; background: rgb(10, 18, 32) !important; }
@media (max-width: 480px) {
.inv-nav { gap: 8px !important; }
}
@media (max-width: 400px) {
.inv-brand-sub { display: none; }
.inv-brand-word { font-size: 19px !important; }
}
@media (hover: none) {
.btn { min-height: 42px; }
.inv-drawer a { padding: 16px 4px; }
}
@media (max-width: 900px) {
.inv-side { flex-wrap: wrap; margin-bottom: 8px; position: static !important; top: auto !important; display: flex !important; flex-direction: row !important; gap: 8px !important; }
.inv-side > span:first-child, .inv-side > div, .inv-side-fig { flex-basis: 100%; }
.inv-side > div { display: flex; flex-wrap: wrap; gap: 8px; flex-direction: row !important; }
.inv-side > a { background: color-mix(in srgb, var(--color-bg) 60%, transparent); border: 1px solid var(--color-divider) !important; padding: 9px 12px !important; font-size: 13px !important; }
.inv-side-fig { max-width: 220px; }
.inv-prose p, .inv-legal p { font-size: 16px !important; }
h1 { overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
.inv-prose h2 { font-size: 26px !important; }
.inv-proj { padding: 32px 0px !important; }
}
@media (prefers-reduced-motion: reduce) {
body, .btn::after { animation: auto ease 0s 1 normal none running none !important; }
.inv-layer { transform: none !important; }
*, ::before, ::after { transition-duration: 0.01ms !important; }
}
html { scroll-behavior: smooth; }
body { margin: 0px; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); text-wrap: pretty; -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-900); }
@keyframes inv-rise { 
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}
@keyframes inv-fade { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes inv-sheen { 
  0%, 60% { transform: translateX(-120%) rotate(12deg); }
  100% { transform: translateX(160%) rotate(12deg); }
}
.inv-glass { position: absolute; inset: 0px; pointer-events: none; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, #fff 45%, transparent) 0%, color-mix(in srgb, #fff 10%, transparent) 30%, transparent 55%, color-mix(in srgb, var(--color-accent-900) 8%, transparent) 100%); }
.inv-glass::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0px; width: 28%; background: linear-gradient(90deg, transparent, color-mix(in srgb, rgb(255, 255, 255) 45%, transparent), transparent); animation: 9s ease-in-out 0s infinite normal none running inv-sheen; }
.inv-prose p { margin: 0px 0px 18px; font-size: 16.5px; line-height: 1.65; color: var(--color-neutral-800); }
@media (max-width: 900px) {
.inv-two { grid-template-columns: 1fr !important; }
.inv-hero { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation: auto ease 0s 1 normal none running none !important; }
}
@keyframes inv-logo-glint { 
  0%, 88% { transform: translateX(-16px) skewX(-18deg); }
  100% { transform: translateX(52px) skewX(-18deg); }
}
@keyframes inv-scan { 
  0%, 82% { mask-position: 100% 0px; }
  100% { mask-position: 0% 0px; }
}
@keyframes inv-drop { 
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: auto ease 0s 1 normal none running none !important; }
}
@keyframes inv-zoom { 
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: none; }
}
/* Aus Inline-Styles rekonstruiert (hell/dunkel) */
.inv-fx1 { background-image: linear-gradient(color(srgb 0.113725 0.121569 0.12549 / 0.16) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, color(srgb 0.113725 0.121569 0.12549 / 0.16) 1px, rgba(0, 0, 0, 0) 1px); background-position-x: 0%, 0%; background-position-y: 0%, 0%; background-repeat: repeat, repeat; background-attachment: scroll, scroll; background-origin: padding-box, padding-box; background-clip: border-box, border-box; background-color: rgba(0, 0, 0, 0); }
:root[data-theme="dark"] .inv-fx1 { background-image: linear-gradient(color(srgb 0.913725 0.92549 0.941176 / 0.16) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, color(srgb 0.913725 0.92549 0.941176 / 0.16) 1px, rgba(0, 0, 0, 0) 1px); }
.inv-fx2 { background-attachment: scroll, scroll; background-clip: border-box, border-box; background-color: rgba(0, 0, 0, 0); background-image: linear-gradient(color(srgb 0.113725 0.121569 0.12549 / 0.16) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, color(srgb 0.113725 0.121569 0.12549 / 0.16) 1px, rgba(0, 0, 0, 0) 1px); background-origin: padding-box, padding-box; background-position-x: 0%, 0%; background-position-y: 0%, 0%; background-repeat: repeat, repeat; }
:root[data-theme="dark"] .inv-fx2 { background-image: linear-gradient(color(srgb 0.913725 0.92549 0.941176 / 0.16) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, color(srgb 0.913725 0.92549 0.941176 / 0.16) 1px, rgba(0, 0, 0, 0) 1px); }
.inv-fx3 { background-attachment: scroll, scroll; background-clip: border-box, border-box; background-color: rgba(0, 0, 0, 0); background-image: linear-gradient(color(srgb 0.113725 0.121569 0.12549 / 0.16) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, color(srgb 0.113725 0.121569 0.12549 / 0.16) 1px, rgba(0, 0, 0, 0) 1px); background-origin: padding-box, padding-box; background-position-x: 0%, 0%; background-position-y: 0%, 0%; background-repeat: repeat, repeat; }
:root[data-theme="dark"] .inv-fx3 { background-image: linear-gradient(color(srgb 0.913725 0.92549 0.941176 / 0.16) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, color(srgb 0.913725 0.92549 0.941176 / 0.16) 1px, rgba(0, 0, 0, 0) 1px); }