/* fonts.css */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations"), url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2"); 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: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); 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: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-latin-wght-italic.woff2") format("woff2-variations"), url("../fonts/instrument-sans-latin-wght-italic.woff2") format("woff2"); 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; }

/* tokens.css */

:root {
--op-ink-950: #232321;
--op-ink-900: #30302E;  /* Band, Fusszeile, CTA-Band */
--op-ink-800: #3D3C39;  /* Karten im Band */
--op-ink-700: #4A4946;
--op-ink-600: #55534E;
--op-ink-500: #6A675F;
--op-ink-400: #7A776F;
--op-paper-000: #FFFFFF;  /* Karten, Kacheln, Eingabefelder */
--op-paper-100: #F3F0EA;  /* Creme · Seitengrund */
--op-paper-200: #EAE6DF;  /* Keramik · abgesetzte Abschnitte */
--op-paper-300: #DFDAD1;  /* eingelassene Flaechen */
--op-paper-400: #D2CCC2;  /* kraeftige Linien */
--op-slate-900: #1F1D1A;  /* Text · 16.1:1 auf Creme */
--op-slate-700: #33302B;
--op-slate-600: #47433D;  /* muted  · 8.4:1 auf Creme */
--op-slate-500: #6B665F;  /* subtle · 5.0:1 auf Creme · 4.6:1 auf Keramik */
--op-slate-400: #8F897F;  /* Control-Border · 3.1:1 auf Weiss */
--op-on-ink-strong: #F5F4ED; /* 13.6:1 auf Anthrazit */
--op-on-ink-muted:  #D6D4CA; /* 10.3:1 */
--op-on-ink-subtle: #B0AEA5; /*  6.9:1 */
--op-on-ink-line:   #6A675F; /* Control-Border auf Ink */
--op-accent-500:  #C96442;  /* TERRAKOTTA · die einzige Fuellfarbe */
--op-accent-text-on-dark: #D97757;
--op-accent-rgb:  201, 100, 66;
--op-yellow-500:  #F4B942;  /* Pendant */
--op-yellow-rgb:  244, 185, 66;
--op-success-600: #1B7430;  /* 5.85:1 auf #FFF */
--op-warning-600: #8A5A00;  /* 5.93:1 auf #FFF */
--op-error-600:   #B02318;  /* 6.78:1 auf #FFF */
--op-success-300: #6ADC85;  /* auf Anthrazit */
--op-warning-300: #E0A93A;
--op-error-300:   #F0736A;
--op-surface:          var(--op-paper-100);  /* Creme */
--op-surface-raised:   var(--op-paper-000);  /* Karten weiss */
--op-surface-sunken:   var(--op-paper-200);  /* Keramik */
--op-surface-inset:    var(--op-paper-300);
--op-text:             var(--op-slate-900);
--op-text-muted:       var(--op-slate-600);
--op-text-subtle:      var(--op-slate-500);
--op-line:             #E1DCD3;             /* Haarlinie (2px) */
--op-line-strong:      var(--op-paper-400);
--op-line-control:     var(--op-slate-400);
--op-accent:           var(--op-accent-500);  /* Fuellungen, Marker, Signale */
--op-accent-hover:     var(--op-yellow-500);  /* Fuell-Hover: Gelb, nie dunkler */
--op-accent-active:    var(--op-yellow-500);
--op-accent-line:      var(--op-accent-500);  /* Rahmen/Linien aktiver Zustaende */
--op-accent-icon:      var(--op-accent-500);  /* Zeichen, Haekchen, Chips, Striche */
--op-accent-text:      var(--op-text);        /* Text & Links: dunkel, Terrakotta nur als Unterstreichung */
--op-accent-text-hover: var(--op-text);
--op-accent-on:        #FFFFFF;               /* Schrift AUF Terrakotta: weiss, hell wie dunkel (Entscheidung Kunde 07.09.2026, 3.9:1) */
--op-accent-hover-on:  #1F1D1A;               /* Schrift AUF Gelb (immer dunkel) */
--op-accent-tint:      #F7E3DA;
--op-accent-tint-2:    #F0CFC0;
--op-yellow:           var(--op-yellow-500);
--op-yellow-tint:      #FBEBC4;
--op-logo-ink:         #3D3C39;               /* Marken-Symbole einheitlich in der Hausfarbe */
--op-success:          var(--op-success-600);
--op-warning:          var(--op-warning-600);
--op-error:            var(--op-error-600);
--op-info:             var(--op-slate-600);
--op-focus:            var(--op-accent-500);
--op-dev-face-1: #FFFFFF; --op-dev-face-2: #ECE8E1; --op-dev-line: #D2CCC2; --op-dev-panel: #F7F4EF;
--op-dev-vent: #D9D3C9; --op-dev-inset: #FFFFFF; --op-dev-text: #6B665F;
--op-anim-line: #D6CFC4; --op-anim-node-bg: #FFFFFF; --op-anim-node-border: #E1DCD3; --op-anim-text: #1F1D1A;
--op-font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--op-font-display: "Newsreader", Georgia, "Times New Roman", serif;
--op-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
Consolas, "Liberation Mono", monospace;
--op-fs-display: clamp(2.625rem, 1.50rem + 3.90vw, 4.600rem); /* 42 → 74 · Newsreader */
--op-fs-h1:      clamp(2.125rem, 1.40rem + 2.60vw, 3.250rem); /* 34 → 52 · Newsreader */
--op-fs-h2:      clamp(1.875rem, 1.20rem + 2.40vw, 2.875rem); /* 30 → 46 · Newsreader */
--op-fs-h3:      clamp(1.375rem, 1.20rem + 0.80vw, 1.750rem); /* 22 → 28 */
--op-fs-h4:      1.0625rem;                                   /* 17 · Karten-/Untertitel */
--op-fs-lead:    clamp(1.0625rem, 1.00rem + 0.30vw, 1.125rem); /* 17 → 18 */
--op-fs-body:    1rem;                                        /* 16 */
--op-fs-sm:      0.9375rem;                                   /* 15 */
--op-fs-caption: 0.8125rem;                                   /* 13 */
--op-fs-micro:   0.6875rem;                                   /* 11 */
--op-fs-eyebrow: 0.75rem;                                     /* 12 · Eyebrow mit Logo-Zeichen */
--op-lh-title:   1.32;
--op-check-size: 20px;
--op-lh-display: 1.08;
--op-lh-tight:   1.12;
--op-lh-snug:    1.24;
--op-lh-normal:  1.5;
--op-lh-relaxed: 1.6;
--op-ls-display: -0.012em;
--op-ls-heading: -0.01em;
--op-ls-body:     0em;
--op-ls-label:    0.10em;
--op-ls-wordmark: 0.06em;
--op-fw-regular:  400;
--op-fw-medium:   500;
--op-fw-semibold: 600;
--op-fw-bold:     700;
--op-fw-display:  500;   /* Newsreader Medium */
--op-sp-1:  4px;
--op-sp-2:  8px;
--op-sp-3:  12px;
--op-sp-4:  16px;
--op-sp-6:  24px;
--op-sp-8:  32px;
--op-sp-12: 48px;
--op-sp-16: 64px;
--op-sp-20: 80px;
--op-sp-24: 96px;
--op-sp-32: 128px;
--op-section-y:       clamp(64px, 8vw, 128px);
--op-section-y-tight: clamp(48px, 5vw, 80px);
--op-radius-sm:   8px;
--op-radius-md:   12px;
--op-radius-lg:   16px;
--op-radius-xl:   20px;
--op-radius-2xl:  24px;
--op-radius-pill: 999px;
--op-border:   2px;
--op-hairline: 2px;
--op-shadow-none:   none;
--op-shadow-sm:     0 1px 3px rgba(31, 29, 26, .06);
--op-shadow-card:   0 1px 3px rgba(31, 29, 26, .06),
0 8px 24px rgba(31, 29, 26, .05);
--op-shadow-raised: 0 4px 12px rgba(31, 29, 26, .08),
0 16px 40px rgba(31, 29, 26, .08);
--op-shadow-bar:    0 -20px 44px -28px rgba(31, 29, 26, .38);
--op-dur-micro:   150ms;
--op-dur-ui:      240ms;
--op-dur-reveal:  520ms;
--op-dur-ambient: 18s;
--op-dur-ambient-slow: 28s;
--op-ease-standard: cubic-bezier(.2, .8, .2, 1);
--op-ease-out:      cubic-bezier(.16, 1, .3, 1);
--op-ease-inout:    cubic-bezier(.65, 0, .35, 1);
--op-container:      1344px;  /* Standard-Content · 1248px Inhalt bei 48px Gutter */
--op-container-wide: 1600px;  /* Visualisierungen duerfen breiter werden */
--op-container-text: 96ch;    /* Lesetexte (Rechtstexte, Prosa) */
--op-gutter:         clamp(16px, 4vw, 48px);
--op-header-h:       72px;
--op-tap-min:        44px;    /* Mindest-Touch-Target Mobile */
--op-focus-width:  2px;
--op-focus-offset: 3px;
--op-z-base:    0;
--op-z-raised:  10;
--op-z-sticky:  100;
--op-z-header:  200;
--op-z-overlay: 300;
--op-z-modal:   400;
}
[data-surface="ink"] {
--op-surface:        var(--op-ink-900);
--op-surface-raised: var(--op-ink-800);
--op-surface-sunken: var(--op-ink-950);
--op-surface-inset:  var(--op-ink-700);
--op-text:           var(--op-on-ink-strong);
--op-text-muted:     var(--op-on-ink-muted);
--op-text-subtle:    var(--op-on-ink-subtle);
--op-line:           rgba(255, 255, 255, .12);
--op-line-strong:    rgba(255, 255, 255, .20);
--op-line-control:   var(--op-on-ink-line);
--op-accent-text:    var(--op-on-ink-strong);   /* Links hell mit Terrakotta-Unterstreichung (#D97757 auf Anthrazit nur 4.2:1) */
--op-accent-text-hover: var(--op-on-ink-strong);
--op-accent-tint:    #4A3529;
--op-accent-tint-2:  #5A3F31;
--op-yellow-tint:    #4A3A17;
--op-logo-ink:       var(--op-on-ink-muted);
--op-success:        var(--op-success-300);
--op-warning:        var(--op-warning-300);
--op-error:          var(--op-error-300);
--op-info:           var(--op-on-ink-muted);
--op-focus:          var(--op-yellow-500);
--op-shadow-card:    0 1px 0 rgba(255, 255, 255, .04),
0 24px 48px -24px rgba(0, 0, 0, .6);
--op-shadow-raised:  0 1px 0 rgba(255, 255, 255, .06),
0 32px 64px -28px rgba(0, 0, 0, .7);
--op-dev-face-1: #4A4946; --op-dev-face-2: #33322F; --op-dev-line: #5E5C57; --op-dev-panel: #3D3C39;
--op-dev-vent: #767369; --op-dev-inset: #232321; --op-dev-text: var(--op-on-ink-subtle);
--op-anim-line: #55534E; --op-anim-node-bg: #3D3C39; --op-anim-node-border: #55534E; --op-anim-text: #F5F4ED;
}
[data-surface] { color: var(--op-text); }
:root[data-theme="dark"] {
color-scheme: dark;
--op-ink-950: #0E0E0D;
--op-ink-900: #141413;
--op-ink-800: #232321;
--op-ink-700: #2D2C29;
--op-ink-600: #34322E;
--op-ink-500: #3B3936;
--op-ink-400: #46443F;
--op-surface:        #171614;
--op-surface-raised: #262523;
--op-surface-sunken: #1F1E1B;
--op-surface-inset:  #34322E;
--op-text:           #F5F4ED;  /* 18:1 */
--op-text-muted:     #DAD7CE;  /* 12:1 */
--op-text-subtle:    #B0AEA5;  /* 7.4:1 */
--op-line:           #3B3936;
--op-line-strong:    #46443F;
--op-line-control:   #5A574F;
--op-accent-text:    var(--op-text);
--op-accent-text-hover: var(--op-text);
--op-accent-tint:    #3A2A23;
--op-accent-tint-2:  #4A3529;
--op-yellow-tint:    #4A3A17;
--op-logo-ink:       #DAD7CE;
--op-success:        var(--op-success-300);
--op-warning:        var(--op-warning-300);
--op-error:          var(--op-error-300);
--op-info:           var(--op-text-muted);
--op-focus:          var(--op-yellow-500);
--op-shadow-sm:      0 1px 3px rgba(0, 0, 0, .35);
--op-shadow-card:    0 1px 3px rgba(0, 0, 0, .35),
0 8px 24px rgba(0, 0, 0, .3);
--op-shadow-raised:  0 4px 12px rgba(0, 0, 0, .4),
0 16px 40px rgba(0, 0, 0, .35);
--op-shadow-bar:     0 -20px 44px -28px rgba(0, 0, 0, .9);
--op-dev-face-1: #3D3C39; --op-dev-face-2: #262523; --op-dev-line: #55534E; --op-dev-panel: #302F2C;
--op-dev-vent: #6A675F; --op-dev-inset: #171614; --op-dev-text: #B0AEA5;
--op-anim-line: #4E4B46; --op-anim-node-bg: #2D2C29; --op-anim-node-border: #46443F; --op-anim-text: #F5F4ED;
}
:root[data-theme="dark"] [data-surface="ink"] {
--op-surface:        var(--op-ink-900);
--op-surface-raised: var(--op-ink-800);
--op-surface-sunken: var(--op-ink-950);
--op-line:           #3B3936;
--op-line-strong:    #46443F;
--op-anim-line: #4E4B46; --op-anim-node-bg: #2D2C29; --op-anim-node-border: #46443F;
--op-dev-face-1: #3D3C39; --op-dev-face-2: #262523; --op-dev-line: #55534E; --op-dev-panel: #302F2C;
--op-dev-vent: #6A675F; --op-dev-inset: #141413;
}
@media (prefers-reduced-motion: reduce) {
:root {
--op-dur-micro:  1ms;
--op-dur-ui:     1ms;
--op-dur-reveal: 1ms;
}
}

/* base.css */

*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--op-header-h) + var(--op-sp-6));
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
background: var(--op-surface);
color: var(--op-text);
font-family: var(--op-font-sans);
font-size: var(--op-fs-body);
line-height: var(--op-lh-normal);
letter-spacing: var(--op-ls-body);
font-weight: var(--op-fw-regular);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-variant-numeric: tabular-nums lining-nums;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; } /* Attribut gewinnt gegen jedes display */
button, input, select, textarea { font: inherit; color: inherit; }
:where(a) { color: var(--op-accent-text); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--op-accent); }
:where(a:hover) { color: var(--op-accent-text-hover); text-decoration-color: var(--op-yellow); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: var(--op-focus-width) solid var(--op-focus);
outline-offset: var(--op-focus-offset);
border-radius: var(--op-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }
.op-skip-link {
position: absolute;
left: var(--op-sp-4);
top: var(--op-sp-4);
z-index: var(--op-z-modal);
transform: translateY(-200%);
background: var(--op-accent);
color: var(--op-accent-on);
padding: var(--op-sp-3) var(--op-sp-4);
border-radius: var(--op-radius-md);
font-size: var(--op-fs-sm);
font-weight: var(--op-fw-semibold);
text-decoration: none;
transition: transform var(--op-dur-ui) var(--op-ease-out);
}
.op-skip-link:focus { transform: translateY(0); }
.op-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.op-container {
width: 100%;
max-width: var(--op-container);
margin-inline: auto;
padding-inline: var(--op-gutter);
}
.op-container--wide { max-width: var(--op-container-wide); }
.op-container--text { max-width: var(--op-container-text); }
.op-section {
background: var(--op-surface);
color: var(--op-text);
padding-block: var(--op-section-y);
position: relative;
}
.op-section--tight { padding-block: var(--op-section-y-tight); }
.op-stack > * + * { margin-top: var(--op-sp-4); }
.op-stack-6 > * + * { margin-top: var(--op-sp-6); }
.op-stack-8 > * + * { margin-top: var(--op-sp-8); }
.op-stack-12 > * + * { margin-top: var(--op-sp-12); }
.op-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-6); }
.op-grid > * { min-width: 0; }
@media (min-width: 720px)  { .op-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px)  { .op-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .op-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px)  { .op-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .op-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.op-divider {
height: var(--op-hairline);
background: var(--op-line);
border: 0;
margin-block: var(--op-sp-12);
}
.op-display, .op-h1, .op-h2, .op-h3, .op-h4 {
font-weight: var(--op-fw-semibold);
color: var(--op-text);
text-wrap: balance;
overflow-wrap: anywhere;   /* lange deutsche Komposita brechen statt auszubrechen */
hyphens: auto;
}
.op-display, .op-h1, .op-h2 {
font-family: var(--op-font-display);
font-weight: var(--op-fw-display);
font-variation-settings: "opsz" 60;
font-optical-sizing: none;
}
.op-display {
font-size: var(--op-fs-display);
line-height: var(--op-lh-display);
letter-spacing: var(--op-ls-display);
}
.op-h1 {
font-size: var(--op-fs-h1);
line-height: var(--op-lh-tight);
letter-spacing: var(--op-ls-display);
}
.op-h2 {
font-size: var(--op-fs-h2);
line-height: var(--op-lh-tight);
letter-spacing: var(--op-ls-display);
}
.op-h3 {
font-size: var(--op-fs-h3);
line-height: var(--op-lh-snug);
letter-spacing: var(--op-ls-heading);
}
.op-h4 {
font-size: var(--op-fs-h4);
line-height: var(--op-lh-title);
}
.op-lead {
font-size: var(--op-fs-lead);
line-height: var(--op-lh-relaxed);
color: var(--op-text-muted);
text-wrap: pretty;
}
.op-body   { font-size: var(--op-fs-body); line-height: var(--op-lh-relaxed); color: var(--op-text-muted); }
.op-body-sm{ font-size: var(--op-fs-sm);   line-height: var(--op-lh-relaxed); color: var(--op-text-muted); }
.op-caption{ font-size: var(--op-fs-caption); line-height: var(--op-lh-normal); color: var(--op-text-subtle); }
.op-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--op-sp-2);
font-size: var(--op-fs-eyebrow);
font-weight: var(--op-fw-semibold);
letter-spacing: var(--op-ls-label);
text-transform: uppercase;
color: var(--op-text-subtle);
}
.op-eyebrow::before {
content: "";
width: 1.5em; height: .8em;
flex: none;
background-color: var(--op-accent-icon);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477 254'%3E%3Cpath d='M0 0L80.3 0A27 27 0 0 1 104.5 14.9L129.5 65L49.2 65A27 27 0 0 1 25 50.1L0 0Z M45.5 93.5L125.8 93.5A27 27 0 0 1 150 108.4L175 158.5L94.7 158.5A27 27 0 0 1 70.5 143.6L45.5 93.5Z M91.5 187L171.8 187A27 27 0 0 1 196 201.9L221 252L140.7 252A27 27 0 0 1 116.5 237.1L91.5 187Z M157.5 63L235.8 63A27 27 0 0 1 260 77.9L300 158L371.5 14.9A27 27 0 0 1 395.7 0L476 0L356.5 239.1A27 27 0 0 1 332.3 254L252 254L157.5 63Z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477 254'%3E%3Cpath d='M0 0L80.3 0A27 27 0 0 1 104.5 14.9L129.5 65L49.2 65A27 27 0 0 1 25 50.1L0 0Z M45.5 93.5L125.8 93.5A27 27 0 0 1 150 108.4L175 158.5L94.7 158.5A27 27 0 0 1 70.5 143.6L45.5 93.5Z M91.5 187L171.8 187A27 27 0 0 1 196 201.9L221 252L140.7 252A27 27 0 0 1 116.5 237.1L91.5 187Z M157.5 63L235.8 63A27 27 0 0 1 260 77.9L300 158L371.5 14.9A27 27 0 0 1 395.7 0L476 0L356.5 239.1A27 27 0 0 1 332.3 254L252 254L157.5 63Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
[data-surface="ink"] .op-eyebrow::before { background-color: var(--op-yellow); }
.op-eyebrow--plain::before { display: none; }
.op-mono {
font-family: var(--op-font-mono);
font-size: var(--op-fs-caption);
letter-spacing: 0;
}
.op-text-accent { color: var(--op-accent-text); }
.op-num { font-family: var(--op-font-display); font-weight: var(--op-fw-display); font-variation-settings: "opsz" 40; font-optical-sizing: none; letter-spacing: 0; }
.op-text-muted  { color: var(--op-text-muted); }
.op-section-head { max-width: none; }
.op-section-head > * + * { margin-top: var(--op-sp-3); }
.op-section-head .op-h2 + .op-lead { margin-top: var(--op-sp-4); }
.op-reveal {
opacity: 0;
transform: translateY(12px);
transition:
opacity   var(--op-dur-reveal) var(--op-ease-out),
transform var(--op-dur-reveal) var(--op-ease-out);
will-change: opacity, transform;
}
.op-reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
.op-reveal { opacity: 1; transform: none; transition: none; }
}
.no-js .op-reveal { opacity: 1; transform: none; }

/* components.css */

.op-icon {
width: 20px; height: 20px;
flex: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
.op-icon--sm { width: 16px; height: 16px; }
.op-icon--lg { width: 24px; height: 24px; }
.op-icon--xl { width: 32px; height: 32px; stroke-width: 1.25; }
.op-wordmark {
display: inline-flex;
align-items: center;
gap: var(--op-sp-3);
text-decoration: none;
color: var(--op-text);
border-radius: var(--op-radius-sm);
}
.op-wordmark__mark {
flex: none;
display: block;
height: 28px;
color: var(--op-accent);                 /* Logo-Marke immer in der Hausfarbe */
transition: color var(--op-dur-micro) var(--op-ease-standard);
}
.op-wordmark__mark svg, .op-logo { display: block; height: 28px; width: auto; }
.op-wordmark:hover .op-wordmark__mark { color: var(--op-yellow); }
.op-wordmark__name {
font-family: var(--op-font-display);
font-weight: var(--op-fw-display);
font-variation-settings: "opsz" 28;
font-optical-sizing: none;
font-size: 1.375rem;
line-height: 1;
letter-spacing: -.005em;
color: var(--op-text);
white-space: nowrap;
transform: translateY(var(--op-wm-shift, .111em));
}
.op-wordmark__mid { margin-left: .08em; margin-right: .035em; }
.op-header {
position: sticky;
top: 0;
z-index: var(--op-z-header);
background: color-mix(in srgb, var(--op-surface) 70%, transparent);
-webkit-backdrop-filter: saturate(160%) blur(18px);
backdrop-filter: saturate(160%) blur(18px);
border-bottom: var(--op-hairline) solid var(--op-line);
}
@supports not (backdrop-filter: blur(1px)) {
.op-header { background: var(--op-surface); }
}
.op-header__inner {
height: var(--op-header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--op-sp-6);
}
.op-nav {
display: none;
align-items: center;
gap: var(--op-sp-1);
list-style: none;
}
@media (min-width: 1040px) { .op-nav { display: flex; } }
.op-header .op-nav { padding-block-start: 1px; }
.op-nav a {
display: inline-flex;
align-items: center;
height: 36px;
padding-inline: var(--op-sp-3);
border-radius: var(--op-radius-sm);
font-size: var(--op-fs-sm);
font-weight: var(--op-fw-semibold);
color: var(--op-text);
text-decoration: none;
text-underline-offset: .3em;
text-decoration-thickness: 2px;
}
.op-nav a:hover { color: var(--op-text); text-decoration: underline; text-decoration-color: var(--op-yellow); }
.op-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--op-accent); }
.op-header__actions { display: flex; align-items: center; gap: var(--op-sp-2); }
.op-btn {
--_bg: transparent;
--_fg: var(--op-text);
--_bd: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--op-sp-2);
min-height: var(--op-tap-min);
padding: var(--op-sp-3) var(--op-sp-6);
border: var(--op-border) solid var(--_bd);
border-radius: var(--op-radius-md);
background: var(--_bg);
color: var(--_fg);
font-size: var(--op-fs-sm);
font-weight: var(--op-fw-semibold);
letter-spacing: 0.005em;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: none;   /* v2.0: Hover wechselt sofort, ohne Hebung, ohne Skalierung */
}
.op-btn .op-icon { transition: none; }
.op-btn:disabled, .op-btn[aria-disabled="true"] {
opacity: .45;
cursor: not-allowed;
pointer-events: none;
}
.op-btn--primary   { --_bg: var(--op-accent); --_fg: var(--op-accent-on); --_bd: var(--op-accent); }
.op-btn--primary:hover, .op-btn--primary:focus-visible { --_bg: var(--op-yellow); --_bd: var(--op-yellow); --_fg: var(--op-accent-hover-on); }
.op-btn--primary:active { --_bg: var(--op-yellow); --_bd: var(--op-yellow); --_fg: var(--op-accent-hover-on); }
.op-btn--secondary { --_bd: var(--op-line); --_fg: var(--op-text); --_bg: var(--op-surface-raised); box-shadow: var(--op-shadow-sm); }
.op-btn--secondary:hover, .op-btn--secondary:focus-visible { --_bd: var(--op-yellow); box-shadow: 0 0 0 2px var(--op-yellow-tint); }
.op-btn--secondary:active { --_bd: var(--op-yellow); }
[data-surface="ink"] .op-btn--secondary { --_bg: transparent; --_bd: rgba(255, 255, 255, .5); --_fg: var(--op-text); box-shadow: none; }
[data-surface="ink"] .op-btn--secondary:hover, [data-surface="ink"] .op-btn--secondary:focus-visible { --_bd: var(--op-yellow); box-shadow: 0 0 0 2px rgba(var(--op-yellow-rgb), .3); }
.op-btn--ghost { --_fg: var(--op-text); padding-inline: var(--op-sp-2); text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 2px; text-decoration-color: var(--op-accent); }
.op-btn--ghost:hover, .op-btn--ghost:focus-visible { --_fg: var(--op-text); text-decoration-color: var(--op-yellow); }
.op-btn--lg { min-height: 52px; padding-inline: var(--op-sp-8); font-size: var(--op-fs-body); }
.op-btn--sm { min-height: 36px; padding: var(--op-sp-2) var(--op-sp-4); font-size: var(--op-fs-caption); }
.op-btn--block { display: flex; width: 100%; }
.op-btn--icon { padding: var(--op-sp-3); aspect-ratio: 1; }
.op-btn__spinner {
width: 16px; height: 16px;
border-radius: 50%;
border: 2px solid currentColor;
border-top-color: transparent;
animation: op-spin 700ms linear infinite;
}
@keyframes op-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.op-btn__spinner { animation-duration: 2.4s; }
}
.op-btn-row { display: flex; flex-wrap: wrap; gap: var(--op-sp-3); align-items: center; }
.op-badge {
display: inline-flex;
align-items: center;
gap: var(--op-sp-2);
height: 24px;
padding-inline: var(--op-sp-3);
border-radius: var(--op-radius-pill);
border: var(--op-border) solid var(--op-line-strong);
background: var(--op-surface-inset);
color: var(--op-text-muted);
font-size: var(--op-fs-micro);
font-weight: var(--op-fw-semibold);
letter-spacing: var(--op-ls-label);
text-transform: uppercase;
white-space: nowrap;
}
.op-badge--accent  { border-color: var(--op-yellow-tint); background: var(--op-yellow-tint); color: var(--op-accent-hover-on); }
:root[data-theme="dark"] .op-badge--accent, [data-surface="ink"] .op-badge--accent { color: var(--op-yellow); }
.op-badge--success { border-color: color-mix(in srgb, var(--op-success) 40%, transparent); color: var(--op-success); background: transparent; }
.op-badge--warning { border-color: color-mix(in srgb, var(--op-warning) 40%, transparent); color: var(--op-warning); background: transparent; }
.op-badge--error   { border-color: color-mix(in srgb, var(--op-error) 40%, transparent);   color: var(--op-error);   background: transparent; }
.op-placeholder {
display: inline-flex;
align-items: center;
gap: var(--op-sp-2);
padding: 2px var(--op-sp-2);
border: 2px dashed var(--op-line-control);
border-radius: var(--op-radius-sm);
font-family: var(--op-font-mono);
font-size: var(--op-fs-caption);
color: var(--op-text-subtle);
background: transparent;
}
.op-note {
display: flex;
gap: var(--op-sp-3);
padding: var(--op-sp-4);
border: var(--op-border) solid var(--op-line);
border-left: 3px solid var(--op-text-subtle);
border-radius: var(--op-radius-md);
background: var(--op-surface-sunken);
font-size: var(--op-fs-sm);
line-height: var(--op-lh-relaxed);
color: var(--op-text-muted);
}
.op-note strong { color: var(--op-text); font-weight: var(--op-fw-semibold); }
.op-note--info    { border-left-color: var(--op-info); }
.op-note--warning { border-left-color: var(--op-warning); }
.op-note__icon { color: var(--op-text-subtle); margin-top: 1px; }
.op-note--info    .op-note__icon { color: var(--op-info); }
.op-note--warning .op-note__icon { color: var(--op-warning); }
.op-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--op-sp-4);
padding: var(--op-sp-8);
border: var(--op-border) solid var(--op-line);
border-radius: var(--op-radius-lg);
background: var(--op-surface-raised);
color: var(--op-text);
box-shadow: var(--op-shadow-card);
}
.op-card--sm { padding: var(--op-sp-6); border-radius: var(--op-radius-md); gap: var(--op-sp-3); }
.op-card--feature { border-radius: var(--op-radius-2xl); padding: var(--op-sp-12); }
.op-card--interactive {
cursor: pointer;
transition:
border-color var(--op-dur-ui) var(--op-ease-standard),
box-shadow   var(--op-dur-ui) var(--op-ease-standard);
}
.op-card--interactive:hover { border-color: var(--op-yellow); box-shadow: var(--op-shadow-raised); }
.op-card--interactive:focus-within { border-color: var(--op-accent-line); }
.op-card__icon {
width: 44px; height: 44px;
display: grid;
place-items: center;
border-radius: var(--op-radius-md);
border: var(--op-border) solid var(--op-line);
background: var(--op-accent-tint);
color: var(--op-accent-icon);
}
.op-card__title { font-size: var(--op-fs-h4); font-weight: var(--op-fw-semibold); line-height: var(--op-lh-title); overflow-wrap: anywhere; hyphens: auto; }
.op-card__body  { font-size: var(--op-fs-sm); line-height: var(--op-lh-relaxed); color: var(--op-text-muted); }
.op-card__foot  { margin-top: auto; padding-top: var(--op-sp-2); }
.op-datarow {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--op-sp-4);
padding-block: var(--op-sp-3);
border-top: var(--op-hairline) solid var(--op-line);
font-size: var(--op-fs-sm);
}
.op-datarow:first-of-type { border-top: 0; }
.op-datarow__label { color: var(--op-text-muted); }
.op-datarow__value { font-weight: var(--op-fw-semibold); color: var(--op-text); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.op-table-wrap {
width: 100%;
min-width: 0;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: var(--op-border) solid var(--op-line);
border-radius: var(--op-radius-md);
background: var(--op-surface-raised);
}
.op-table-wrap:focus-visible { outline: var(--op-focus-width) solid var(--op-focus); outline-offset: var(--op-focus-offset); }
.op-list { list-style: none; display: flex; flex-direction: column; gap: var(--op-sp-3); }
.op-list li { display: flex; gap: var(--op-sp-3); font-size: var(--op-fs-sm); line-height: var(--op-lh-relaxed); color: var(--op-text-muted); }
.op-list__mark { color: var(--op-accent-icon); margin-top: 1px; display: inline-flex; }
.op-list__mark .op-icon, .op-icon--check { width: var(--op-check-size); height: var(--op-check-size); stroke-width: 2; }
.op-list li[data-state="excluded"] { color: var(--op-text-subtle); }
.op-list li[data-state="excluded"] .op-list__mark { color: var(--op-text-subtle); }
.op-price-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--op-sp-6);
padding: var(--op-sp-8);
border: var(--op-border) solid var(--op-line);
border-radius: var(--op-radius-lg);
background: var(--op-surface-raised);
box-shadow: var(--op-shadow-card);
}
.op-price-card--featured { border-color: var(--op-accent-line); }
.op-price-card__flagrow { display: flex; align-items: flex-start; min-height: 26px; margin-bottom: calc(-1 * var(--op-sp-3)); }
@media (max-width: 639px) { .op-price-card__flagrow:empty { display: none; } }
.op-price-card__flag { display: inline-flex; }
.op-price-card__head > * + * { margin-top: var(--op-sp-2); }
.op-price-card__name {
font-size: var(--op-fs-micro);
font-weight: var(--op-fw-semibold);
letter-spacing: var(--op-ls-label);
text-transform: uppercase;
color: var(--op-text-subtle);
}
.op-price {
display: flex;
align-items: baseline;
gap: var(--op-sp-2);
font-family: var(--op-font-display);
font-weight: var(--op-fw-display);
font-variation-settings: "opsz" 40;
font-optical-sizing: none;
font-size: var(--op-fs-h2);
letter-spacing: 0;
color: var(--op-text);
font-variant-numeric: tabular-nums;
}
.op-price__unit { font-family: var(--op-font-sans); font-variation-settings: normal; font-size: var(--op-fs-sm); font-weight: var(--op-fw-medium); color: var(--op-text-muted); letter-spacing: 0; }
.op-price-card__desc { font-size: var(--op-fs-sm); line-height: var(--op-lh-relaxed); color: var(--op-text-muted); }
.op-price-card__cta { margin-top: auto; }
.op-field { display: flex; flex-direction: column; gap: var(--op-sp-2); }
.op-label {
font-size: var(--op-fs-caption);
font-weight: var(--op-fw-semibold);
color: var(--op-text);
}
.op-label__opt { font-weight: var(--op-fw-regular); color: var(--op-text-subtle); }
.op-help { font-size: var(--op-fs-caption); color: var(--op-text-subtle); line-height: var(--op-lh-normal); }
.op-error {
display: flex; align-items: center; gap: var(--op-sp-2);
font-size: var(--op-fs-caption);
color: var(--op-error);
}
.op-input, .op-select, .op-textarea {
width: 100%;
min-height: var(--op-tap-min);
padding: var(--op-sp-3) var(--op-sp-4);
border: var(--op-border) solid var(--op-line-control);
border-radius: var(--op-radius-md);
background: var(--op-surface-raised);
color: var(--op-text);
font-size: var(--op-fs-sm);
transition: border-color var(--op-dur-micro) var(--op-ease-standard),
box-shadow   var(--op-dur-micro) var(--op-ease-standard);
}
.op-input::placeholder, .op-textarea::placeholder { color: var(--op-text-subtle); opacity: 1; }
.op-input:hover, .op-select:hover, .op-textarea:hover { border-color: var(--op-yellow); }
.op-input:focus-visible, .op-select:focus-visible, .op-textarea:focus-visible {
outline: none;
border-color: var(--op-accent-line);
box-shadow: 0 0 0 var(--op-focus-width) var(--op-accent-tint);
}
.op-textarea { min-height: 112px; resize: vertical; line-height: var(--op-lh-relaxed); }
.op-input[aria-invalid="true"], .op-select[aria-invalid="true"] { border-color: var(--op-error); }
.op-select {
appearance: none;
padding-right: var(--op-sp-12);
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
.op-input-group { display: flex; align-items: center; gap: var(--op-sp-2); }
.op-input-group .op-input { flex: 1; }
.op-input-suffix { font-size: var(--op-fs-sm); color: var(--op-text-muted); white-space: nowrap; }
.op-choice {
display: flex;
align-items: flex-start;
gap: var(--op-sp-3);
min-height: var(--op-tap-min);
padding-block: var(--op-sp-2);
cursor: pointer;
}
.op-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.op-choice__box {
position: relative;
width: 20px; height: 20px;
margin-top: 2px;
flex: none;
border: var(--op-border) solid var(--op-line-control);
border-radius: var(--op-radius-sm);
background: var(--op-surface-raised);
display: grid;
place-items: center;
transition: border-color var(--op-dur-micro) var(--op-ease-standard),
background-color var(--op-dur-micro) var(--op-ease-standard);
}
.op-choice--radio .op-choice__box { border-radius: 50%; }
.op-choice__box::after {
content: "";
width: 10px; height: 10px;
transform: scale(0);
transition: transform var(--op-dur-micro) var(--op-ease-out);
background: var(--op-accent-on);
clip-path: polygon(14% 47%, 0 61%, 39% 100%, 100% 22%, 85% 8%, 38% 71%);
}
.op-choice--radio .op-choice__box::after {
width: 8px; height: 8px;
border-radius: 50%;
clip-path: none;
}
.op-choice input:checked + .op-choice__box { background: var(--op-accent); border-color: var(--op-accent); }
.op-choice input:checked + .op-choice__box::after { transform: scale(1); }
.op-choice input:focus-visible + .op-choice__box {
outline: var(--op-focus-width) solid var(--op-focus);
outline-offset: var(--op-focus-offset);
}
.op-choice:hover .op-choice__box { border-color: var(--op-yellow); }
.op-choice__text { font-size: var(--op-fs-sm); line-height: var(--op-lh-normal); color: var(--op-text); }
.op-choice__text small { display: block; color: var(--op-text-subtle); font-size: var(--op-fs-caption); margin-top: 2px; }
.op-switch { display: flex; align-items: center; gap: var(--op-sp-3); min-height: var(--op-tap-min); cursor: pointer; }
.op-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.op-switch__track {
position: relative;
width: 44px; height: 26px;
flex: none;
border-radius: var(--op-radius-pill);
background: var(--op-surface-inset);
border: var(--op-border) solid var(--op-line-control);
transition: background-color var(--op-dur-micro) var(--op-ease-standard),
border-color var(--op-dur-micro) var(--op-ease-standard);
}
.op-switch__track::after {
content: "";
position: absolute;
top: 3px; left: 3px;
width: 17px; height: 17px;
border-radius: 50%;
background: var(--op-text-muted);
transition: transform var(--op-dur-micro) var(--op-ease-out),
background-color var(--op-dur-micro) var(--op-ease-standard);
}
.op-switch input:checked + .op-switch__track { background: var(--op-accent); border-color: var(--op-accent); }
.op-switch input:checked + .op-switch__track::after { transform: translateX(18px); background: var(--op-accent-on); }
.op-switch input:focus-visible + .op-switch__track {
outline: var(--op-focus-width) solid var(--op-focus);
outline-offset: var(--op-focus-offset);
}
.op-stepper {
display: inline-flex;
align-self: flex-start;   /* nicht auf Feldbreite dehnen */
align-items: center;
border: var(--op-border) solid var(--op-line-control);
border-radius: var(--op-radius-md);
overflow: hidden;
background: var(--op-surface-raised);
}
.op-stepper__btn {
width: var(--op-tap-min);
height: var(--op-tap-min);
display: grid;
place-items: center;
background: transparent;
border: 0;
color: var(--op-text-muted);
cursor: pointer;
transition: background-color var(--op-dur-micro) var(--op-ease-standard),
color var(--op-dur-micro) var(--op-ease-standard);
}
.op-stepper__btn:hover:not(:disabled) { background: var(--op-yellow-tint); color: var(--op-text); }
.op-stepper__btn:disabled { opacity: .35; cursor: not-allowed; }
.op-stepper__value {
min-width: 64px;
text-align: center;
font-size: var(--op-fs-sm);
font-weight: var(--op-fw-semibold);
font-variant-numeric: tabular-nums;
border-inline: var(--op-hairline) solid var(--op-line);
padding-block: var(--op-sp-3);
}
.op-range { width: 100%; height: var(--op-tap-min); appearance: none; background: transparent; cursor: pointer; }
.op-range::-webkit-slider-runnable-track {
height: 4px; border-radius: var(--op-radius-pill);
background: linear-gradient(to right,
var(--op-accent) 0 var(--_fill, 50%), var(--op-line-strong) var(--_fill, 50%) 100%);
}
.op-range::-moz-range-track { height: 4px; border-radius: var(--op-radius-pill); background: var(--op-line-strong); }
.op-range::-moz-range-progress { height: 4px; border-radius: var(--op-radius-pill); background: var(--op-accent); }
.op-range::-webkit-slider-thumb {
appearance: none;
margin-top: -8px;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--op-accent);
border: 2px solid var(--op-accent-on);
box-shadow: var(--op-shadow-sm);
}
.op-range::-moz-range-thumb {
width: 20px; height: 20px; border-radius: 50%;
background: var(--op-accent); border: 2px solid var(--op-accent-on);
}
.op-range:focus-visible { outline: none; }
.op-range:focus-visible::-webkit-slider-thumb { outline: var(--op-focus-width) solid var(--op-focus); outline-offset: var(--op-focus-offset); }
.op-range:focus-visible::-moz-range-thumb     { outline: var(--op-focus-width) solid var(--op-focus); outline-offset: var(--op-focus-offset); }
.op-fieldset { border: 0; padding: 0; margin: 0; }
.op-fieldset__legend {
padding: 0;
font-size: var(--op-fs-caption);
font-weight: var(--op-fw-semibold);
color: var(--op-text);
margin-bottom: var(--op-sp-1);
}
@media (max-width: 719px) {
.op-wordmark { min-height: var(--op-tap-min); }
.op-header .op-wordmark__name { font-size: 1.25rem; --op-wm-shift: .089em; }
}
@media (max-width: 719px), (pointer: coarse) {
.op-btn--sm { min-height: var(--op-tap-min); padding-inline: var(--op-sp-4); }
.op-stepper__btn { width: var(--op-tap-min); height: var(--op-tap-min); }
.op-wordmark { min-height: var(--op-tap-min); }
.op-nav a { min-height: var(--op-tap-min); }
}
@media (max-width: 899px) {
.op-header__actions .op-btn--ghost { display: none; }
}

/* modules.css */

.op-model-grid {
display: grid;
gap: var(--op-sp-3);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .op-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .op-model-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.op-model {
position: relative;
display: flex;
flex-direction: column;
gap: var(--op-sp-3);
padding: var(--op-sp-4);
min-height: 132px;
border: var(--op-border) solid var(--op-line);
border-radius: var(--op-radius-md);
background: var(--op-surface-raised);
cursor: pointer;
transition:
border-color     var(--op-dur-ui) var(--op-ease-standard),
background-color var(--op-dur-ui) var(--op-ease-standard);
}
.op-model:hover { border-color: var(--op-yellow); }
.op-model input { position: absolute; opacity: 0; width: 0; height: 0; }
.op-model:has(input:focus-visible) {
outline: var(--op-focus-width) solid var(--op-focus);
outline-offset: var(--op-focus-offset);
}
.op-model__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--op-sp-3); }
.op-model__icon { color: var(--op-text-subtle); transition: color var(--op-dur-ui) var(--op-ease-standard); }
.op-model__title {
font-size: var(--op-fs-sm);
font-weight: var(--op-fw-semibold);
line-height: var(--op-lh-snug);
color: var(--op-text);
overflow-wrap: anywhere;
hyphens: auto;
}
.op-model__desc {
font-size: var(--op-fs-caption);
line-height: var(--op-lh-normal);
color: var(--op-text-subtle);
}
.op-model__state {
position: relative;
width: 22px; height: 22px;
flex: none;
border: var(--op-border) solid var(--op-line-control);
border-radius: var(--op-radius-sm);
display: grid;
place-items: center;
color: transparent;
transition:
border-color     var(--op-dur-micro) var(--op-ease-standard),
background-color var(--op-dur-micro) var(--op-ease-standard),
color            var(--op-dur-micro) var(--op-ease-standard);
}
.op-model__state .op-icon { width: 14px; height: 14px; stroke-width: 2.25; }
.op-model:has(input:checked) {
border-color: var(--op-accent-line);
background: var(--op-accent-tint);
}
.op-model:has(input:checked) .op-model__icon  { color: var(--op-accent-icon); }
.op-model:has(input:checked) .op-model__state { background: var(--op-accent); border-color: var(--op-accent); color: var(--op-accent-on); }
.op-model[data-locked="true"] { cursor: default; }
.op-model[data-locked="true"] .op-model__state { background: var(--op-accent); border-color: var(--op-accent); }
.op-model__lock {
display: none;
align-items: center;
gap: var(--op-sp-1);
font-size: var(--op-fs-micro);
letter-spacing: var(--op-ls-label);
text-transform: uppercase;
color: var(--op-accent-text);
font-weight: var(--op-fw-semibold);
}
.op-model[data-locked="true"] .op-model__lock { display: inline-flex; }
.op-model__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--op-sp-2); min-height: 18px; }
.op-model__meta { font-size: var(--op-fs-micro); letter-spacing: var(--op-ls-label); text-transform: uppercase; color: var(--op-text-subtle); }
.op-model__meta .op-placeholder { text-transform: none; letter-spacing: 0; }
@keyframes op-nudge {
0%, 100% { transform: translateX(0); }
25%      { transform: translateX(-3px); }
75%      { transform: translateX(3px); }
}
.op-model.is-blocked { animation: op-nudge 180ms var(--op-ease-inout); }
@media (prefers-reduced-motion: reduce) {
.op-model.is-blocked { animation: none; box-shadow: 0 0 0 2px var(--op-accent-line); }
}
.op-selection-status {
display: flex;
align-items: center;
gap: var(--op-sp-2);
font-size: var(--op-fs-caption);
color: var(--op-text-muted);
min-height: 20px;
}
.op-selection-status[data-tone="blocked"] { color: var(--op-text); font-weight: var(--op-fw-medium); }
.op-pricebar {
position: sticky;
bottom: 0;
z-index: var(--op-z-sticky);
background: var(--op-ink-900);
color: var(--op-on-ink-strong);
border-top: var(--op-hairline) solid rgba(255, 255, 255, .12);
border-radius: var(--op-radius-lg) var(--op-radius-lg) 0 0;
box-shadow: var(--op-shadow-bar);
}
.op-pricebar__inner {
display: flex;
flex-direction: column;
gap: var(--op-sp-3);
padding: var(--op-sp-4);
}
@media (min-width: 900px) {
.op-pricebar__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--op-sp-8);
padding: var(--op-sp-4) var(--op-sp-6);
}
}
.op-pricebar__config { min-width: 0; display: flex; flex-direction: column; gap: var(--op-sp-2); }
.op-pricebar__label {
font-size: var(--op-fs-micro);
letter-spacing: var(--op-ls-label);
text-transform: uppercase;
color: var(--op-on-ink-subtle);
}
.op-pricebar__chips { display: flex; flex-wrap: wrap; gap: var(--op-sp-2); }
.op-pricechip {
display: inline-flex;
align-items: center;
gap: var(--op-sp-2);
height: 26px;
padding-inline: var(--op-sp-3);
border-radius: var(--op-radius-pill);
border: var(--op-border) solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .04);
font-size: var(--op-fs-caption);
color: var(--op-on-ink-muted);
white-space: nowrap;
}
.op-pricechip strong { color: var(--op-on-ink-strong); font-weight: var(--op-fw-semibold); }
.op-pricebar__sum {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--op-sp-6);
}
@media (min-width: 900px) { .op-pricebar__sum { justify-content: flex-end; } }
.op-pricebar__total { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
@media (min-width: 900px) { .op-pricebar__total { align-items: flex-end; } }
.op-pricebar__value {
font-family: var(--op-font-display);
font-weight: var(--op-fw-display);
font-variation-settings: "opsz" 40;
font-optical-sizing: none;
font-size: var(--op-fs-h3);
letter-spacing: 0;
font-variant-numeric: tabular-nums;
color: var(--op-yellow);
transition: color var(--op-dur-ui) var(--op-ease-standard);
}
.op-pricebar__value.is-updating { color: var(--op-yellow); }
.op-pricebar__hint { font-size: var(--op-fs-micro); color: var(--op-on-ink-subtle); }
.op-pricebar__delta {
display: inline-flex;
align-items: center;
gap: var(--op-sp-1);
font-size: var(--op-fs-caption);
font-variant-numeric: tabular-nums;
color: var(--op-yellow);
opacity: 0;
transform: translateY(-2px);
transition: opacity var(--op-dur-ui) var(--op-ease-out),
transform var(--op-dur-ui) var(--op-ease-out);
}
.op-pricebar__delta.is-visible { opacity: 1; transform: none; }
.op-progress-linear { display: flex; flex-direction: column; gap: var(--op-sp-2); }
.op-progress-linear__head {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--op-sp-4);
font-size: var(--op-fs-caption);
color: var(--op-text-muted);
}
.op-progress-linear__head strong { color: var(--op-text); font-weight: var(--op-fw-semibold); }
.op-progress-track {
height: 6px;
border-radius: var(--op-radius-pill);
background: var(--op-surface-inset);
border: var(--op-border) solid var(--op-line);
overflow: hidden;
}
.op-progress-fill {
height: 100%;
width: 0;
background: var(--op-accent);
border-radius: var(--op-radius-pill);
transition: width var(--op-dur-reveal) var(--op-ease-out);
}
.op-journey { list-style: none; display: flex; flex-direction: column; }
.op-journey__step {
position: relative;
display: grid;
grid-template-columns: 28px 1fr;
gap: var(--op-sp-4);
padding-bottom: var(--op-sp-6);
}
.op-journey__step:last-child { padding-bottom: 0; }
.op-journey__step:not(:last-child)::before {
content: "";
position: absolute;
left: 13px;
top: 26px;
bottom: 2px;
width: 2px;
background: var(--op-line);
}
.op-journey__step[data-state="done"]:not(:last-child)::before { background: var(--op-accent); }
.op-journey__node {
width: 28px; height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
border: var(--op-border) solid var(--op-line-control);
background: var(--op-surface);
color: var(--op-text-subtle);
font-size: var(--op-fs-micro);
font-weight: var(--op-fw-semibold);
font-variant-numeric: tabular-nums;
z-index: 1;
}
.op-journey__step[data-state="done"] .op-journey__node {
background: var(--op-accent); border-color: var(--op-accent); color: var(--op-accent-on);
}
.op-journey__step[data-state="active"] .op-journey__node {
border-color: var(--op-accent-line);
color: var(--op-text);
background: var(--op-surface);
box-shadow: 0 0 0 4px var(--op-accent-tint);
}
.op-journey__body { padding-top: 3px; display: flex; flex-direction: column; gap: var(--op-sp-1); }
.op-journey__title { font-size: var(--op-fs-sm); font-weight: var(--op-fw-medium); color: var(--op-text-muted); }
.op-journey__step[data-state="done"]   .op-journey__title { color: var(--op-text); }
.op-journey__step[data-state="active"] .op-journey__title { color: var(--op-text); font-weight: var(--op-fw-semibold); }
.op-journey__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--op-sp-2); font-size: var(--op-fs-caption); color: var(--op-text-subtle); }
.op-journey__pulse {
width: 6px; height: 6px; border-radius: 50%;
background: var(--op-accent);
animation: op-pulse 2.8s var(--op-ease-inout) infinite;
}
@keyframes op-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.op-journey__pulse { animation: none; opacity: 1; }
}
.op-trust { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-6); }
@media (min-width: 900px) { .op-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--op-sp-8); } }
.op-trust__pillar { display: flex; flex-direction: column; gap: var(--op-sp-3); }
.op-trust__mark {
width: 48px; height: 48px;
display: grid; place-items: center;
border: var(--op-border) solid var(--op-line-strong);
border-radius: var(--op-radius-md);
color: var(--op-text);
}
.op-trust__title { font-size: var(--op-fs-h4); font-weight: var(--op-fw-semibold); line-height: var(--op-lh-title); }
.op-trust__text  { font-size: var(--op-fs-sm); line-height: var(--op-lh-relaxed); color: var(--op-text-muted); }
.op-trust-stamp {
display: inline-flex;
align-items: center;
gap: var(--op-sp-3);
padding: var(--op-sp-3) var(--op-sp-4);
border: var(--op-border) solid var(--op-line-strong);
border-radius: var(--op-radius-pill);
}
.op-trust-stamp__flag { display: flex; flex-direction: column; width: 18px; height: 12px; border-radius: 2px; overflow: hidden; flex: none; }
.op-trust-stamp__flag i { flex: 1; }
.op-trust-stamp__flag i:nth-child(1) { background: #111111; }
.op-trust-stamp__flag i:nth-child(2) { background: #C8102E; }
.op-trust-stamp__flag i:nth-child(3) { background: #F0C300; }
.op-trust-stamp__text {
font-size: var(--op-fs-micro);
font-weight: var(--op-fw-semibold);
letter-spacing: var(--op-ls-label);
text-transform: uppercase;
color: var(--op-text);
}

/* signature.css */

.op-stage {
display: grid;
gap: var(--op-sp-3);
padding: var(--op-sp-4);
border: var(--op-border) solid var(--op-line);
border-radius: var(--op-radius-2xl);
background: var(--op-surface-raised);
box-shadow: var(--op-shadow-card);
}
.hero-anim {
display: block;
width: 100%; height: auto;
padding: var(--op-sp-3);
border-radius: var(--op-radius-lg);
background: var(--op-surface-sunken);
font-family: var(--op-font-sans);
}
.hero-anim--narrow { display: none; }
@media (max-width: 639px) { .hero-anim--wide { display: none; } .hero-anim--narrow { display: block; } }
.hero-anim__node { cursor: pointer; outline: none; }
.hero-anim__node rect {
fill: var(--op-anim-node-bg);
stroke: var(--op-anim-node-border);
stroke-width: 2;
transition: fill var(--op-dur-ui) var(--op-ease-standard), stroke var(--op-dur-ui) var(--op-ease-standard);
}
.hero-anim__node text { font-size: 12.5px; font-weight: var(--op-fw-semibold); fill: var(--op-anim-text); }
.hero-anim__node--s text { font-size: 11px; }
.hero-anim__node svg { fill: var(--op-text-muted); }
.hero-anim__node--cap svg { fill: none; stroke: var(--op-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-anim__node:hover rect { stroke: var(--op-accent); }
.hero-anim__node.is-active rect { fill: var(--op-accent-tint); stroke: var(--op-accent); stroke-width: 2.5; }
.hero-anim__node:focus-visible rect { stroke: var(--op-accent); stroke-width: 3; }
.hero-anim__feature {
height: 1.75rem; line-height: 1.75rem;
margin: 0; padding: 0 var(--op-sp-2);
font-size: var(--op-fs-sm);
color: var(--op-text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: opacity 200ms var(--op-ease-standard);
}
.hero-anim__feature::before {
content: ""; display: inline-block;
width: .6rem; height: .6rem; border-radius: 50%;
background: var(--op-accent);
margin-right: var(--op-sp-2); vertical-align: .05em;
}
.hero-anim__feature.is-fading { opacity: 0; }
.hero-anim__feature:empty::before { display: none; }
@media (max-width: 1279px) { .hero-anim__feature { font-size: var(--op-fs-caption); } }
@media (max-width: 639px) { .hero-anim__feature { padding: 0 var(--op-sp-1); } }
@media (max-width: 359px) { .hero-anim__feature { white-space: normal; height: 2.5rem; line-height: 1.25rem; text-overflow: clip; } }
.op-stage__caption { padding: 0 var(--op-sp-2) var(--op-sp-1); font-size: var(--op-fs-sm); line-height: var(--op-lh-relaxed); color: var(--op-text-muted); }
.op-stage__caption strong { color: var(--op-text); font-weight: var(--op-fw-semibold); }
@media (prefers-reduced-motion: reduce) {
.hero-anim__node rect, .hero-anim__feature { transition: none; }
}
.op-flow {
display: grid;
gap: var(--op-sp-3);
grid-template-columns: 1fr;
align-items: stretch;
}
.op-flow-wrap { container-type: inline-size; }
@container (min-width: 760px) {
.op-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--op-sp-2); align-items: stretch; }
}
.op-flow__stage {
position: relative;
display: flex;
flex-direction: column;
gap: var(--op-sp-2);
padding: var(--op-sp-4);
border: var(--op-border) solid var(--op-line);
border-radius: var(--op-radius-md);
background: var(--op-surface-raised);
min-height: 96px;
}
.op-flow__stage--wide { gap: var(--op-sp-1); }
.op-flow__num {
font-family: var(--op-font-mono);
font-size: var(--op-fs-micro);
color: var(--op-text-subtle);
}
.op-flow__label {
font-size: var(--op-fs-micro);
font-weight: var(--op-fw-bold);
letter-spacing: var(--op-ls-label);
text-transform: uppercase;
color: var(--op-text);
}
.op-flow__note { font-size: var(--op-fs-caption); color: var(--op-text-subtle); line-height: var(--op-lh-normal); }
.op-flow__lanes { display: flex; flex-direction: column; gap: var(--op-sp-1); margin-top: var(--op-sp-1); }
.op-flow__lane {
display: flex; align-items: center; gap: var(--op-sp-2);
font-size: var(--op-fs-micro);
color: var(--op-text-muted);
letter-spacing: .02em;
}
.op-flow__lane::before {
content: "";
width: 5px; height: 5px; border-radius: 1px;
background: var(--op-accent);
opacity: .35;
flex: none;
animation: op-lane 4.5s var(--op-ease-inout) infinite;
}
.op-flow__lane:nth-child(1)::before { animation-delay: 0s; }
.op-flow__lane:nth-child(2)::before { animation-delay: .35s; }
.op-flow__lane:nth-child(3)::before { animation-delay: .7s; }
.op-flow__lane:nth-child(4)::before { animation-delay: 1.05s; }
@keyframes op-lane { 0%, 70%, 100% { opacity: .25; } 12% { opacity: 1; } }
.op-flow__stage::after {
content: "";
position: absolute;
background: var(--op-line-control);
}
.op-flow__stage:last-child::after { display: none; }
.op-flow__stage::after { left: 50%; bottom: calc(-1 * var(--op-sp-3)); width: 2px; height: var(--op-sp-3); }
@container (min-width: 760px) {
.op-flow__stage::after { left: auto; bottom: auto; top: 50%; right: calc(-1 * var(--op-sp-2)); width: var(--op-sp-2); height: 2px; }
}
.op-flow__pulse {
position: absolute;
inset: auto 0 0 0;
height: 2px;
overflow: hidden;
border-radius: 0 0 var(--op-radius-md) var(--op-radius-md);
}
.op-flow__pulse::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 40%;
background: linear-gradient(90deg, transparent, var(--op-accent), transparent);
transform: translateX(-100%);
animation: op-travel 5s var(--op-ease-inout) infinite;
}
.op-flow__stage:nth-child(1) .op-flow__pulse::after { animation-delay: 0s; }
.op-flow__stage:nth-child(2) .op-flow__pulse::after { animation-delay: .5s; }
.op-flow__stage:nth-child(3) .op-flow__pulse::after { animation-delay: 1s; }
.op-flow__stage:nth-child(4) .op-flow__pulse::after { animation-delay: 1.5s; }
.op-flow__stage:nth-child(5) .op-flow__pulse::after { animation-delay: 2s; }
@keyframes op-travel {
0%        { transform: translateX(-100%); }
40%, 100% { transform: translateX(350%); }
}
.op-flow.is-paused .op-flow__pulse::after,
.op-flow.is-paused .op-flow__lane::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.op-flow__pulse { display: none; }
.op-flow__lane::before { animation: none; opacity: .6; }
}

/* site.css */

.site-header .op-header__inner { gap: var(--op-sp-4); }
.site-header .op-nav { gap: 2px; }
.site-header .op-nav a { padding-inline: var(--op-sp-2); white-space: nowrap; }
.site-header .op-wordmark { flex: none; }
.site-header .op-wordmark__name { white-space: nowrap; }
.site-header .op-header__actions { flex: none; }
.site-header__cta-short { display: none; }
@media (min-width: 1040px) and (max-width: 1279px) {
.site-header .op-nav a { font-size: var(--op-fs-caption); }
.site-header .op-nav { padding-block-start: .25px; }
.site-header .op-wordmark__name { font-size: 1.25rem; --op-wm-shift: .089em; }
.site-header__cta-long { display: none; }
.site-header__cta-short { display: inline; }
}
.site-header .lang-switch { padding-block-start: 1px; }
.site-header__cta { display: none; }
@media (min-width: 720px) { .site-header__cta { display: inline-flex; } }
@media (min-width: 1040px) {
.site-header .op-header__inner { max-width: none; display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: var(--op-sp-6); padding-inline: clamp(var(--op-gutter), 2.5vw, 48px); }
.site-header nav { justify-self: center; min-width: 0; }
.site-header .op-header__actions { justify-self: end; }
}
.site-switches { display: none; align-items: center; gap: var(--op-sp-1); margin-left: var(--op-sp-1); }
@media (min-width: 720px) { .site-switches { display: inline-flex; } }
@media (min-width: 1040px) and (max-width: 1519px) { .site-header .op-header__actions > .op-btn--ghost { display: none; } }
.lang-switch {
display: inline-flex; align-items: center; gap: 3px;
min-height: 36px; padding: 0 var(--op-sp-2);
border-radius: var(--op-radius-sm);
font-size: var(--op-fs-caption); font-weight: var(--op-fw-semibold); letter-spacing: .04em;
color: var(--op-text-muted); text-decoration: none;
transition: background-color var(--op-dur-ui) var(--op-ease-standard), color var(--op-dur-ui) var(--op-ease-standard);
}
.lang-switch__current { color: var(--op-text); }
.lang-switch__sep { color: var(--op-text-subtle); }
.lang-switch:hover, .lang-switch:focus-visible { background: var(--op-yellow-tint); color: var(--op-text); }
.theme-toggle {
display: inline-grid; place-items: center;
width: 36px; height: 36px;
border: 0; border-radius: var(--op-radius-sm);
background: transparent; color: var(--op-text-muted);
cursor: pointer;
transition: background-color var(--op-dur-ui) var(--op-ease-standard), color var(--op-dur-ui) var(--op-ease-standard);
}
.theme-toggle:hover, .theme-toggle:focus-visible { background: var(--op-yellow-tint); color: var(--op-text); }
.theme-toggle .op-icon { width: 18px; height: 18px; stroke-width: 1.75; }
.theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: block; }
.nav-drawer__switches { display: flex; align-items: center; justify-content: space-between; gap: var(--op-sp-3); margin-top: var(--op-sp-4); padding: var(--op-sp-2) 0; }
.lang-switch--drawer { min-height: var(--op-tap-min); font-size: var(--op-fs-sm); border: var(--op-border) solid var(--op-line); padding-inline: var(--op-sp-4); }
.theme-toggle--drawer { width: var(--op-tap-min); height: var(--op-tap-min); border: var(--op-border) solid var(--op-line); }
.site-footer__lang { font-style: italic; }
.nav-toggle {
display: inline-grid;
place-items: center;
width: var(--op-tap-min); height: var(--op-tap-min);
border: var(--op-border) solid var(--op-line-strong);
border-radius: var(--op-radius-md);
background: transparent;
color: var(--op-text);
cursor: pointer;
}
@media (min-width: 1040px) { .nav-toggle { display: none; } }
.nav-toggle__bars { position: relative; width: 18px; height: 12px; }
.nav-toggle__bars::before, .nav-toggle__bars::after, .nav-toggle__bars i {
content: ""; position: absolute; left: 0; width: 100%; height: 2px;
background: currentColor; border-radius: 1px;
transition: transform var(--op-dur-ui) var(--op-ease-standard), opacity var(--op-dur-ui) var(--op-ease-standard);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars i { top: 5px; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-5px) rotate(-45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i { opacity: 0; }
.nav-drawer {
position: fixed;
inset: var(--op-header-h) 0 0 0;
height: calc(100vh - var(--op-header-h));
height: calc(100dvh - var(--op-header-h));
z-index: var(--op-z-overlay);
background: var(--op-surface);
border-top: var(--op-hairline) solid var(--op-line);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: var(--op-sp-6) var(--op-gutter) calc(var(--op-sp-12) + env(safe-area-inset-bottom, 0px));
transform: translateY(-8px);
opacity: 0;
visibility: hidden;
transition: opacity var(--op-dur-ui) var(--op-ease-out),
transform var(--op-dur-ui) var(--op-ease-out),
visibility 0s linear var(--op-dur-ui);
}
.nav-drawer.is-open { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
@media (min-width: 1040px) { .nav-drawer { display: none; } }
.nav-drawer ul { list-style: none; display: flex; flex-direction: column; }
.nav-drawer a {
display: flex; align-items: center; justify-content: space-between;
min-height: 52px;
padding-block: var(--op-sp-3);
border-bottom: var(--op-hairline) solid var(--op-line);
font-size: var(--op-fs-lead);
font-weight: var(--op-fw-medium);
color: var(--op-text);
text-decoration: none;
}
.nav-drawer a[aria-current="page"] { color: var(--op-text); text-decoration: underline; text-decoration-color: var(--op-accent); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.nav-drawer__actions { display: flex; flex-direction: column; gap: var(--op-sp-3); margin-top: var(--op-sp-8); }
body.nav-open { overflow: hidden; }
.hero { padding-block: var(--op-sp-16) var(--op-section-y); }
@media (min-width: 1040px) { .hero { padding-block: var(--op-sp-20) var(--op-section-y); } }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-8); align-items: center; }
.hero__grid > * { min-width: 0; }
.hero__eyebrow { order: 1; margin-bottom: calc(-1 * var(--op-sp-4)); }
.hero__copy { order: 2; }
.hero__actions { order: 3; }
.hero__visual { order: 4; }
.hero__facts { order: 5; }
@media (min-width: 1040px) {
.hero__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-rows: auto 1fr auto auto;
grid-template-areas: "eyebrow eyebrow" "copy visual" "actions visual" "facts facts";
column-gap: clamp(var(--op-sp-8), 4vw, var(--op-sp-16)); row-gap: var(--op-sp-6); align-items: center;
}
.hero__eyebrow { grid-area: eyebrow; margin-bottom: 0; justify-self: start; }
.hero__copy { grid-area: copy; align-self: end; }
.hero__visual { grid-area: visual; align-self: center; }
.hero__actions { grid-area: actions; align-self: start; justify-content: flex-start; margin-top: 0; }
.hero__facts { grid-area: facts; margin-top: var(--op-sp-6); }
}
.hero__eyebrow { font-size: var(--op-fs-sm); white-space: normal; }
.hero__eyebrow::before { width: 1.7em; height: .95em; }
.hero__copy { display: flex; flex-direction: column; gap: var(--op-sp-6); max-width: 60ch; }
.hero__copy .op-display { font-size: var(--op-fs-h1); }
@media (min-width: 1200px) { .hero__copy .op-display { font-size: var(--op-fs-display); } }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--op-sp-3); }
.hero__facts {
display: grid; gap: 0; list-style: none; margin: var(--op-sp-2) 0 0; padding: 0;
grid-template-columns: minmax(0, 1fr);
border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-lg);
background: var(--op-surface-raised); box-shadow: var(--op-shadow-card); overflow: hidden;
}
.hero__fact { display: flex; align-items: flex-start; gap: var(--op-sp-3); padding: var(--op-sp-4) var(--op-sp-6); font-size: var(--op-fs-sm); color: var(--op-text-muted); line-height: var(--op-lh-normal); }
.hero__fact + .hero__fact { border-top: var(--op-hairline) solid var(--op-line); }
.hero__fact .op-icon { color: var(--op-accent-icon); width: var(--op-check-size); height: var(--op-check-size); stroke-width: 2; margin-top: 1px; flex: none; }
@media (min-width: 600px) and (max-width: 1039px) {
.hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero__fact:nth-child(2) { border-top: 0; }
.hero__fact:nth-child(even) { border-left: var(--op-hairline) solid var(--op-line); }
}
@media (min-width: 1040px) {
.hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero__fact + .hero__fact { border-top: 0; border-left: var(--op-hairline) solid var(--op-line); }
}
.page-hero { padding-block: var(--op-sp-16) var(--op-sp-12); border-bottom: var(--op-hairline) solid var(--op-line); }
@media (min-width: 1040px) { .page-hero { padding-block: var(--op-sp-20) var(--op-sp-16); } }
.page-hero__inner { display: flex; flex-direction: column; gap: var(--op-sp-4); max-width: none; }
.page-hero__inner > .op-trust-stamp { align-self: flex-start; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--op-sp-3); margin-top: var(--op-sp-4); }
.section-sunken { background: var(--op-surface-sunken); }
.section-head-row {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: var(--op-sp-6); margin-bottom: var(--op-sp-12);
}
.section-head-row .op-section-head { flex: 1 1 0%; max-width: none; min-width: min(100%, 40ch); }
.section-head-row > .op-btn, .section-head-row > a { flex: none; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-12); align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 1040px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--op-sp-16); } }
.split--reverse > :first-child { order: 2; }
@media (max-width: 1039px) { .split--reverse > :first-child { order: 0; } }
.split__copy { display: flex; flex-direction: column; gap: var(--op-sp-4); max-width: 56ch; }
.split__copy .op-h2 + .op-lead { margin-top: 0; }
.split__copy .op-list { margin-top: var(--op-sp-2); }
.split__actions { display: flex; flex-wrap: wrap; gap: var(--op-sp-3); margin-top: var(--op-sp-2); }
.facts { display: grid; gap: var(--op-sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--op-sp-4); } }
.fact {
display: flex; flex-direction: column; gap: var(--op-sp-3);
padding: var(--op-sp-6);
border: var(--op-border) solid var(--op-line);
border-radius: var(--op-radius-md);
background: var(--op-surface-raised);
}
.fact .op-icon { color: var(--op-accent-icon); }
.fact__title { font-size: var(--op-fs-sm); font-weight: var(--op-fw-semibold); color: var(--op-text); line-height: var(--op-lh-snug); }
.fact__text { font-size: var(--op-fs-caption); color: var(--op-text-muted); line-height: var(--op-lh-normal); }
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-4); counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(var(--steps-cols, 4), minmax(0, 1fr)); } }
.step {
position: relative;
display: flex; flex-direction: column; gap: var(--op-sp-3);
padding: var(--op-sp-6);
border: var(--op-border) solid var(--op-line);
border-radius: var(--op-radius-lg);
background: var(--op-surface-raised);
counter-increment: step;
}
.step__num {
width: 32px; height: 32px;
display: grid; place-items: center;
border-radius: var(--op-radius-sm);
border: var(--op-border) solid var(--op-accent);
background: var(--op-accent);
color: var(--op-accent-on);
font-size: var(--op-fs-caption);
font-weight: var(--op-fw-semibold);
font-variant-numeric: tabular-nums;
}
.step__num::before { content: counter(step); }
.step__title { font-size: var(--op-fs-h4); font-weight: var(--op-fw-semibold); line-height: var(--op-lh-title); }
.step__text { font-size: var(--op-fs-sm); color: var(--op-text-muted); line-height: var(--op-lh-relaxed); }
.contrast { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-4); }
@media (min-width: 900px) { .contrast { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contrast .op-card { gap: var(--op-sp-3); }
.op-card[data-tone="accent"] { border-color: var(--op-accent-line); }
.faq { display: flex; flex-direction: column; width: 100%; border-top: var(--op-hairline) solid var(--op-line); }
.faq details { border-bottom: var(--op-hairline) solid var(--op-line); }
.faq summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--op-sp-4);
padding: var(--op-sp-4) 0;
padding-right: var(--op-sp-2);
min-height: var(--op-tap-min);
font-size: var(--op-fs-body);
font-weight: var(--op-fw-medium);
color: var(--op-text);
cursor: pointer;
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; flex: none;
width: 10px; height: 10px;
border-right: 2px solid var(--op-text-subtle);
border-bottom: 2px solid var(--op-text-subtle);
transform: rotate(45deg);
margin-right: 4px;
transition: transform var(--op-dur-ui) var(--op-ease-standard);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq__body { padding: 0 0 var(--op-sp-6); max-width: none; font-size: var(--op-fs-body); line-height: var(--op-lh-relaxed); color: var(--op-text-muted); }
.faq .faq__body p + p { margin-top: var(--op-sp-3); }
.cta-band { padding-block: var(--op-section-y-tight); }
.cta-band__inner {
display: flex; flex-direction: column; gap: var(--op-sp-6);
padding: var(--op-sp-12) var(--op-sp-8);
border-radius: var(--op-radius-2xl);
background: var(--op-ink-900);
color: var(--op-on-ink-strong);
border: var(--op-border) solid rgba(255,255,255,.1);
}
@media (min-width: 900px) {
.cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--op-sp-12) var(--op-sp-16); }
}
.cta-band__copy { display: flex; flex-direction: column; gap: var(--op-sp-3); max-width: 52ch; }
.cta-band__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-3); flex: none; width: 100%; max-width: 320px; }
.cta-band__actions .op-btn { width: 100%; }
@media (max-width: 479px) { .cta-band__actions { max-width: none; } }
.prose { max-width: var(--op-container-text); font-size: var(--op-fs-body); line-height: var(--op-lh-relaxed); color: var(--op-text-muted); overflow-wrap: anywhere; }
.prose > * + * { margin-top: var(--op-sp-4); }
.prose h2 { margin-top: var(--op-sp-12); }
.prose h3 { margin-top: var(--op-sp-8); }
.prose strong { color: var(--op-text); font-weight: var(--op-fw-semibold); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--op-sp-2); }
.prose .placeholder-field {
font-family: var(--op-font-mono);
font-size: var(--op-fs-caption);
padding: 1px var(--op-sp-2);
border: 2px dashed var(--op-line-control);
border-radius: var(--op-radius-sm);
color: var(--op-text-subtle);
}
.house { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-4); }
@media (min-width: 720px) { .house { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.house__inside {
position: relative;
padding: var(--op-sp-8);
border: var(--op-border) solid var(--op-accent-line);
border-radius: var(--op-radius-xl);
background: var(--op-accent-tint);
display: flex; flex-direction: column; gap: var(--op-sp-4);
}
.house__label { display: inline-flex; align-self: flex-start; }
.house__nodes { display: grid; gap: var(--op-sp-3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.house__node {
display: flex; flex-direction: column; gap: var(--op-sp-2);
padding: var(--op-sp-4);
border: var(--op-border) solid var(--op-line);
border-radius: var(--op-radius-md);
background: var(--op-surface-raised);
font-size: var(--op-fs-caption);
color: var(--op-text-muted);
}
.house__node strong { font-size: var(--op-fs-sm); color: var(--op-text); font-weight: var(--op-fw-semibold); }
.house__node .op-icon { color: var(--op-accent-icon); }
.house__node--core { border-color: var(--op-accent-line); box-shadow: 0 0 0 4px var(--op-accent-tint); }
.house__outside {
padding: var(--op-sp-8);
border: 2px dashed var(--op-line-control);
border-radius: var(--op-radius-xl);
display: flex; flex-direction: column; gap: var(--op-sp-4);
color: var(--op-text-subtle);
font-size: var(--op-fs-sm);
}
.house__outside strong { color: var(--op-text-muted); font-weight: var(--op-fw-semibold); display: block; }
.house__cut {
display: inline-flex; align-items: center; gap: var(--op-sp-2);
font-size: var(--op-fs-micro); letter-spacing: var(--op-ls-label); text-transform: uppercase;
font-weight: var(--op-fw-semibold);
color: var(--op-text-subtle);
}
.house__cut .op-icon { width: 14px; height: 14px; }
.house__outside ul { list-style: none; display: flex; flex-direction: column; gap: var(--op-sp-2); }
.house__outside li { display: flex; gap: var(--op-sp-2); align-items: flex-start; }
.house__outside li::before { content: "—"; flex: none; }
.hwviz { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-3); align-items: stretch; }
@media (min-width: 900px) { .hwviz { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.2fr); } }
.hwviz__col { display: flex; flex-direction: column; gap: var(--op-sp-3); }
.hwviz__arrow { display: none; align-self: center; color: var(--op-text-subtle); }
@media (min-width: 900px) { .hwviz__arrow { display: block; } }
.hwviz__box {
padding: var(--op-sp-4);
border: var(--op-border) solid var(--op-line);
border-radius: var(--op-radius-md);
background: var(--op-surface-raised);
font-size: var(--op-fs-caption); color: var(--op-text-muted);
}
.hwviz__box strong { display: block; font-size: var(--op-fs-sm); color: var(--op-text); font-weight: var(--op-fw-semibold); margin-bottom: 2px; }
.hwviz__box--core { border-color: var(--op-accent-line); background: var(--op-accent-tint); display: flex; flex-direction: column; justify-content: center; height: 100%; }
.hwviz__out { display: flex; flex-direction: column; gap: var(--op-sp-2); justify-content: center; height: 100%; }
.hwviz__out .op-badge { width: max-content; }
.pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-4); }
@media (min-width: 720px)  { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pricing-grid .op-price-card__cta { display: flex; flex-direction: column; gap: var(--op-sp-2); }
.price-meta { display: flex; flex-wrap: wrap; gap: var(--op-sp-2); }
.compare { width: 100%; border-collapse: collapse; font-size: var(--op-fs-sm); }
.compare th, .compare td { text-align: left; padding: var(--op-sp-3) var(--op-sp-4); border-bottom: var(--op-hairline) solid var(--op-line); vertical-align: top; }
.compare thead th { font-size: var(--op-fs-micro); letter-spacing: var(--op-ls-label); text-transform: uppercase; color: var(--op-text-subtle); font-weight: var(--op-fw-semibold); white-space: nowrap; }
.compare thead th[data-featured] { color: var(--op-accent-text); }
.compare tbody th { font-weight: var(--op-fw-medium); color: var(--op-text); white-space: nowrap; }
.compare td { color: var(--op-text-muted); }
.compare td .op-icon { color: var(--op-accent-icon); width: 18px; height: 18px; stroke-width: 2; vertical-align: -4px; }
.compare td .op-icon--muted { color: var(--op-text-subtle); }
.compare tbody tr:hover td, .compare tbody tr:hover th { background: var(--op-surface-sunken); }
.cfg .op-model-grid, .wizard .op-model-grid, [data-hwcheck] .op-model-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .cfg .op-model-grid, .wizard .op-model-grid, [data-hwcheck] .op-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.op-stepper__input {
width: 88px;
min-height: var(--op-tap-min);
text-align: center;
border: 0;
border-inline: var(--op-hairline) solid var(--op-line);
background: transparent;
font-size: var(--op-fs-sm);
font-weight: var(--op-fw-semibold);
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.op-stepper__input::-webkit-outer-spin-button, .op-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.op-stepper__input:focus-visible { outline: var(--op-focus-width) solid var(--op-focus); outline-offset: -2px; }
.stepper-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-6); }
@media (min-width: 720px) { .stepper-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.role-examples { display: grid; gap: var(--op-sp-2); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.role-example {
display: flex; flex-direction: column; gap: 2px;
padding: var(--op-sp-3) var(--op-sp-4);
border: var(--op-border) solid var(--op-line);
border-radius: var(--op-radius-md);
background: var(--op-surface-raised);
font-size: var(--op-fs-caption);
color: var(--op-text-subtle);
}
.role-example strong { font-size: var(--op-fs-sm); color: var(--op-text); font-weight: var(--op-fw-semibold); }
.role-example .op-icon { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; color: var(--op-accent-icon); }
.integrations { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-3); }
@media (min-width: 640px) { .integrations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.integration {
position: relative;
display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
column-gap: var(--op-sp-3); row-gap: var(--op-sp-2); align-items: start;
padding: var(--op-sp-4);
border: var(--op-border) solid var(--op-line);
border-radius: var(--op-radius-md);
background: var(--op-surface-raised);
cursor: pointer;
transition: border-color var(--op-dur-ui) var(--op-ease-standard), background-color var(--op-dur-ui) var(--op-ease-standard);
}
.integration:hover { border-color: var(--op-yellow); }
.integration:has(input:checked) { border-color: var(--op-accent-line); background: var(--op-accent-tint); }
.integration:has(input:focus-visible) { outline: var(--op-focus-width) solid var(--op-focus); outline-offset: var(--op-focus-offset); }
.integration[data-fixed="true"] { cursor: default; }
.integration input { position: absolute; opacity: 0; width: 0; height: 0; }
.integration__box {
grid-column: 1; grid-row: 1 / span 2;
width: 20px; height: 20px; margin-top: 2px; flex: none;
border: var(--op-border) solid var(--op-line-control); border-radius: var(--op-radius-sm);
background: var(--op-surface-raised); display: grid; place-items: center; color: transparent;
transition: background-color var(--op-dur-micro) var(--op-ease-standard), border-color var(--op-dur-micro) var(--op-ease-standard);
}
.integration__box .op-icon { width: 12px; height: 12px; stroke-width: 2.5; }
.integration:has(input:checked) .integration__box { background: var(--op-accent); border-color: var(--op-accent); color: var(--op-accent-on); }
.integration__body { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.integration__title { font-size: var(--op-fs-sm); font-weight: var(--op-fw-semibold); color: var(--op-text); }
.integration__desc { font-size: var(--op-fs-caption); color: var(--op-text-subtle); line-height: var(--op-lh-normal); }
.integration__price { font-size: var(--op-fs-caption); color: var(--op-text-muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.integration[data-included="true"] .integration__price { color: var(--op-accent-text); }
.cfg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-8); align-items: start; }
@media (min-width: 1040px) { .cfg { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--op-sp-12); } }
.cfg__main { display: flex; flex-direction: column; gap: var(--op-sp-12); min-width: 0; }
.cfg__aside { min-width: 0; }
.cfg__block { display: flex; flex-direction: column; gap: var(--op-sp-6); min-width: 0; }
.cfg__block > * { min-width: 0; }
.compare th, .compare td { white-space: normal; }
.compare thead th { white-space: nowrap; }
.compare tbody th { white-space: normal; min-width: 140px; }
.cfg__block-head { display: flex; flex-direction: column; gap: var(--op-sp-2); }
.cfg__block-head .op-h3 { display: flex; align-items: center; gap: var(--op-sp-3); }
.cfg__num {
width: 28px; height: 28px; flex: none;
display: grid; place-items: center;
border-radius: var(--op-radius-sm);
border: var(--op-border) solid var(--op-accent);
background: var(--op-accent);
color: var(--op-accent-on);
font-size: var(--op-fs-caption); font-weight: var(--op-fw-semibold);
}
.pkg-choice { display: grid; gap: var(--op-sp-3); }
@media (min-width: 720px) { .pkg-choice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pkg-option {
position: relative;
display: flex; flex-direction: column; gap: var(--op-sp-2);
padding: var(--op-sp-4);
border: var(--op-border) solid var(--op-line);
border-radius: var(--op-radius-md);
background: var(--op-surface-raised);
cursor: pointer;
transition: border-color var(--op-dur-ui) var(--op-ease-standard), background-color var(--op-dur-ui) var(--op-ease-standard);
}
.pkg-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.pkg-option:hover { border-color: var(--op-yellow); }
.pkg-option:has(input:checked) { border-color: var(--op-accent-line); background: var(--op-accent-tint); }
.pkg-option:has(input:focus-visible) { outline: var(--op-focus-width) solid var(--op-focus); outline-offset: var(--op-focus-offset); }
.pkg-option__media { margin: calc(-1 * var(--op-sp-4) + var(--op-sp-2)) calc(-1 * var(--op-sp-4) + var(--op-sp-2)) var(--op-sp-1); --op-media-ratio: 20 / 11; }
.pkg-option__media.op-media--illustration { padding: 0 var(--op-sp-3); border-width: var(--op-hairline); }
.pkg-option__media.op-media--illustration svg { transform: scale(1.12); }
.pkg-option:has(input:checked) .pkg-option__media.op-media--illustration { border-color: var(--op-accent-line); color: var(--op-text); }
.pkg-option__name { font-size: var(--op-fs-sm); font-weight: var(--op-fw-semibold); color: var(--op-text); }
.pkg-option__price { font-family: var(--op-font-display); font-weight: var(--op-fw-display); font-variation-settings: "opsz" 40; font-optical-sizing: none; font-size: 1.375rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.pkg-option__meta { font-size: var(--op-fs-caption); color: var(--op-text-subtle); }
.tier-choice { display: grid; gap: var(--op-sp-3); }
@media (min-width: 720px) { .tier-choice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cfg__aside { position: sticky; top: calc(var(--op-header-h) + var(--op-sp-6)); max-height: calc(100vh - var(--op-header-h) - var(--op-sp-6) - var(--op-sp-4)); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--op-sp-4); }
@media (max-width: 1039px) { .cfg__aside { position: static; max-height: none; overflow: visible; } }
.summary { display: flex; flex-direction: column; gap: var(--op-sp-4); }
.summary__lines { display: flex; flex-direction: column; }
.summary__line { display: flex; justify-content: space-between; gap: var(--op-sp-4); padding-block: var(--op-sp-2); border-top: var(--op-hairline) solid var(--op-line); font-size: var(--op-fs-sm); }
.summary__line:first-child { border-top: 0; }
.summary__line span:first-child { color: var(--op-text-muted); }
.summary__line span:last-child { font-variant-numeric: tabular-nums; font-weight: var(--op-fw-medium); white-space: nowrap; }
.summary__line[data-kind="base"] span { color: var(--op-text); font-weight: var(--op-fw-semibold); }
.summary__line[data-negative] span:last-child { color: var(--op-success); }
.summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--op-sp-4); margin-inline: calc(-1 * var(--op-sp-8)); padding: var(--op-sp-4) var(--op-sp-8); background: var(--op-ink-900); color: var(--op-on-ink-strong); }
.summary__total-label { font-size: var(--op-fs-sm); font-weight: var(--op-fw-semibold); color: var(--op-on-ink-muted); }
.summary__total-value { font-family: var(--op-font-display); font-weight: var(--op-fw-display); font-variation-settings: "opsz" 40; font-optical-sizing: none; font-size: var(--op-fs-h3); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--op-yellow); }
.summary__monthly { display: flex; justify-content: space-between; font-size: var(--op-fs-sm); color: var(--op-text-muted); }
.summary__monthly strong { color: var(--op-text); font-variant-numeric: tabular-nums; }
.summary__note { font-size: var(--op-fs-caption); color: var(--op-text-subtle); }
.cfg-bar { display: none; }
@media (max-width: 1039px) {
.cfg-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--op-z-sticky); border-radius: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.cfg-bar .op-pricebar__inner { padding: var(--op-sp-3) var(--op-gutter); }
body.has-cfg-bar { padding-bottom: 120px; }
}
.summary__sub { font-size: var(--op-fs-caption); color: var(--op-text-muted); line-height: var(--op-lh-normal); }
.calc { gap: var(--op-sp-6); overflow: clip; }             /* nichts darf den Kartenrahmen durchbrechen */
.calc .op-table-wrap { min-width: 0; }
.calc .compare { table-layout: auto; }
.calc .compare th, .calc .compare td { padding: var(--op-sp-3); }
.calc .compare thead th { white-space: normal; }
.calc .compare tbody th { min-width: 0; white-space: normal; }
@media (max-width: 639px) {
.calc .op-table-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.calc .compare, .calc .compare tbody, .calc .compare tr, .calc .compare th, .calc .compare td { display: block; width: 100%; }
.calc .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calc .compare tr { border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-md); padding: var(--op-sp-3) var(--op-sp-4); }
.calc .compare tr + tr { margin-top: var(--op-sp-3); }
.calc .compare tbody th { padding: 0 0 var(--op-sp-2); border: 0; font-weight: var(--op-fw-semibold); }
.calc .compare td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--op-sp-4); padding: var(--op-sp-1) 0; border: 0; text-align: right; }
.calc .compare td::before { content: attr(data-label); flex: none; text-align: left; color: var(--op-text-subtle); font-size: var(--op-fs-caption); }
.calc .compare tbody tr:hover td, .calc .compare tbody tr:hover th { background: transparent; }
}
.calc__out { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-3); }
@media (min-width: 640px) { .calc__out { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.calc__stat { display: flex; flex-direction: column; gap: 2px; padding: var(--op-sp-4); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-md); background: var(--op-surface-sunken); }
.calc__label { font-size: var(--op-fs-caption); color: var(--op-text-muted); }
.calc__value { font-family: var(--op-font-display); font-weight: var(--op-fw-display); font-variation-settings: "opsz" 40; font-optical-sizing: none; font-size: var(--op-fs-h3); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--op-text); }
.calc__note { font-size: var(--op-fs-micro); color: var(--op-text-subtle); }
@media (max-width: 639px) { .calc .form__row { grid-template-columns: 1fr !important; }
}
.calc .op-label { min-height: calc(2 * 1.5em); display: flex; align-items: flex-end; } /* Labels gleich hoch -> Felder geometrisch buendig */
@media (max-width: 639px) {
.calc .op-label { min-height: 0; } }
.wizard { display: flex; flex-direction: column; gap: var(--op-sp-8); min-width: 0; }
.wizard__panel > * { min-width: 0; }
.wizard__progress { display: flex; flex-direction: column; gap: var(--op-sp-3); }
.wizard__steps { display: flex; gap: var(--op-sp-2); list-style: none; flex-wrap: wrap; }
.wizard__steps li {
display: inline-flex; align-items: center; gap: var(--op-sp-2);
font-size: var(--op-fs-caption); color: var(--op-text-subtle);
}
.wizard__steps li[aria-current="step"] { color: var(--op-text); font-weight: var(--op-fw-semibold); }
.wizard__steps li[data-done] { color: var(--op-text); }
.wizard__steps li + li::before { content: "·"; margin-right: var(--op-sp-2); color: var(--op-line-control); }
.wizard__panel { display: none; flex-direction: column; gap: var(--op-sp-6); }
.wizard__panel.is-active { display: flex; }
.wizard__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--op-sp-3); padding-top: var(--op-sp-4); border-top: var(--op-hairline) solid var(--op-line); }
.choice-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-3); }
@media (min-width: 640px) { .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.result { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-6); }
.result > * { min-width: 0; }
@media (min-width: 900px) { .result { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.result__verdict { display: flex; flex-direction: column; gap: var(--op-sp-4); }
.result__badge { display: inline-flex; align-items: center; gap: var(--op-sp-3); padding: var(--op-sp-3) var(--op-sp-4); border-radius: var(--op-radius-md); border: var(--op-border) solid var(--op-line); width: max-content; max-width: 100%; }
.result__badge[data-verdict="geeignet"]      { border-color: var(--op-success); color: var(--op-success); }
.result__badge[data-verdict="eingeschraenkt"] { border-color: var(--op-warning); color: var(--op-warning); }
.result__badge[data-verdict="upgrade"]       { border-color: var(--op-error);   color: var(--op-error); }
.result__badge strong { font-size: var(--op-fs-sm); font-weight: var(--op-fw-semibold); }
.result__reasons { list-style: none; display: flex; flex-direction: column; gap: var(--op-sp-2); font-size: var(--op-fs-sm); color: var(--op-text-muted); }
.result__reasons li { display: flex; gap: var(--op-sp-2); }
.result__reasons li::before { content: "—"; color: var(--op-text-subtle); flex: none; }
.form { display: flex; flex-direction: column; gap: var(--op-sp-6); }
.form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-4); align-items: end; } /* Eingaben einer Reihe auf einer Linie, auch bei mehrzeiligen Labels */
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form__consent { font-size: var(--op-fs-caption); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--op-sp-4); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-success { display: none; flex-direction: column; gap: var(--op-sp-4); padding: var(--op-sp-8); border: var(--op-border) solid var(--op-success); border-radius: var(--op-radius-lg); background: var(--op-surface-raised); }
.form-success.is-visible { display: flex; }
.form-success__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--op-success) 12%, transparent); color: var(--op-success); }
.service-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-4); }
@media (min-width: 900px) { .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.support-kinds { display: grid; gap: var(--op-sp-3); }
@media (min-width: 720px) { .support-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-footer { background: var(--op-ink-900); color: var(--op-on-ink-muted); border-top: var(--op-hairline) solid rgba(255,255,255,.08); padding-block: var(--op-sp-16) var(--op-sp-8); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-12); }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .site-footer__grid { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--op-sp-8); } }
.site-footer__brand { display: flex; flex-direction: column; gap: var(--op-sp-6); }
.site-footer__brand p { font-size: var(--op-fs-sm); line-height: var(--op-lh-relaxed); max-width: 36ch; }
.site-footer__col h2 { font-size: var(--op-fs-micro); letter-spacing: var(--op-ls-label); text-transform: uppercase; color: var(--op-on-ink-subtle); font-weight: var(--op-fw-semibold); margin-bottom: var(--op-sp-4); }
.site-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: var(--op-sp-2); }
.site-footer__col a { color: var(--op-on-ink-muted); text-decoration: none; font-size: var(--op-fs-sm); display: inline-flex; min-height: 28px; align-items: center; }
.site-footer__col a:hover { color: var(--op-on-ink-strong); text-decoration: underline; text-decoration-color: var(--op-yellow); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--op-sp-4); margin-top: var(--op-sp-16); padding-top: var(--op-sp-6); border-top: var(--op-hairline) solid rgba(255,255,255,.08); font-size: var(--op-fs-caption); color: var(--op-on-ink-subtle); }
.draft { display: none; }
body.is-review .draft { display: inline-flex; }
body.is-review::before {
content: "Review-Modus: Entwurfswerte sind markiert";
position: fixed; left: 50%; bottom: var(--op-sp-4); transform: translateX(-50%);
z-index: var(--op-z-modal);
padding: var(--op-sp-2) var(--op-sp-4);
border-radius: var(--op-radius-pill);
background: var(--op-warning); color: var(--op-paper-000);
font-size: var(--op-fs-caption); font-weight: var(--op-fw-semibold);
}
.op-media { position: relative; aspect-ratio: var(--op-media-ratio, 16 / 9); overflow: hidden; border-radius: var(--op-radius-lg); background: var(--op-surface-sunken); margin: 0; }
.op-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.op-media--illustration { display: grid; place-items: center; border: var(--op-border) solid var(--op-line); color: var(--op-text-muted); padding: var(--op-sp-4); }
.op-media--illustration svg { width: 100%; height: 100%; display: block; }
[data-surface="ink"] .op-media--illustration { background: var(--op-ink-800); border-color: rgba(255,255,255,.12); color: var(--op-on-ink-muted); }
.op-media--square { --op-media-ratio: 1 / 1; }
body:not(.is-review) [data-review-only] { display: none !important; }
.is-review [data-review-only] { outline: 2px dashed var(--op-warning); outline-offset: 3px; }
.is-review .person__name { display: inline-block; margin: 10px 0 8px; }
.is-review .op-placeholder { background: color-mix(in srgb, var(--op-warning) 18%, transparent); }
.people { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-4); }
@media (min-width: 1040px) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.person {
display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--op-sp-4); align-items: start; align-content: start;
padding: var(--op-sp-6); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-lg); background: var(--op-surface-raised);
}
.person__photo { width: 76px; aspect-ratio: 1; }
.person__photo.op-media { border-radius: var(--op-radius-md); }
.person__photo.op-media--illustration { padding: var(--op-sp-2); }
.person__role { font-size: var(--op-fs-micro); letter-spacing: var(--op-ls-label); text-transform: uppercase; color: var(--op-text-subtle); font-weight: var(--op-fw-semibold); overflow-wrap: anywhere; hyphens: auto; }
.person__name { display: block; margin-top: 4px; font-size: var(--op-fs-body); font-weight: var(--op-fw-semibold); color: var(--op-text); line-height: var(--op-lh-snug); }
.person__text { margin-top: var(--op-sp-2); font-size: var(--op-fs-sm); line-height: var(--op-lh-normal); color: var(--op-text-muted); }
.person__contact { margin-top: var(--op-sp-2); font-size: var(--op-fs-caption); }
.person--lg { grid-template-columns: minmax(0, 1fr); }
.person--lg .person__photo { width: 100%; overflow: hidden; }
.person--lg .person__role { min-height: calc(2 * 1.5em); line-height: 1.5; }
@media (min-width: 1040px) and (max-width: 1279px) { .person--lg .person__role { min-height: calc(3 * 1.5em); } }
.person--lg .person__name { min-height: 1.24em; }
.person--lg .person__photo img { filter: grayscale(1); transition: transform var(--op-dur-ui) var(--op-ease-standard), filter var(--op-dur-ui) var(--op-ease-standard); transform-origin: 50% 40%; }
.person--lg:hover .person__photo img, .person--lg:focus-within .person__photo img { filter: grayscale(1) brightness(1.04); transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .person--lg:hover .person__photo img, .person--lg:focus-within .person__photo img { transform: none; } }
.people--lg { gap: var(--op-sp-6); }
@media (min-width: 720px) and (max-width: 1039px) { .people--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .people--lg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.person--team .person__photo.op-media--illustration { padding: 0; border-style: dashed; }
.chain { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-3); counter-reset: chain; }
@media (min-width: 720px) { .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .chain { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--op-sp-4); } .chain__item:nth-child(7) { grid-column: span 2; } }
@media (min-width: 720px) and (max-width: 1039px) { .chain__item:nth-child(7) { grid-column: span 2; } }
.chain__item {
position: relative; display: flex; flex-direction: column; gap: var(--op-sp-2); min-width: 0;
padding: var(--op-sp-4); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-md); background: var(--op-surface-raised);
}
.chain__item::before { counter-increment: chain; content: counter(chain, decimal-leading-zero); font-size: var(--op-fs-micro); letter-spacing: var(--op-ls-label); color: var(--op-text-subtle); font-variant-numeric: tabular-nums; }
.chain__item .op-icon { width: 26px; height: 26px; color: var(--op-accent-icon); }
.chain__label { font-size: var(--op-fs-body); font-weight: var(--op-fw-semibold); color: var(--op-text); overflow-wrap: anywhere; hyphens: auto; }
.chain__note { font-size: var(--op-fs-caption); line-height: var(--op-lh-normal); color: var(--op-text-muted); }
.chain__item--product { border-color: var(--op-accent-line); background: var(--op-accent-tint); }
@media (min-width: 1040px) {
.chain__item:not(:last-child):not(:nth-child(4))::after { content: ""; position: absolute; right: calc(-1 * var(--op-sp-4) - 1px); top: 50%; width: var(--op-sp-4); height: 2px; background: var(--op-line-strong); }
}
[data-surface="ink"] .chain__item { border-color: rgba(255,255,255,.12); }
[data-surface="ink"] .chain__item:not(:last-child)::after { background: rgba(255,255,255,.2); }
.hw-card { display: flex; flex-direction: column; gap: var(--op-sp-3); }
.hw-card .op-media { --op-media-ratio: 20 / 13; }
.hw-card__meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.hw-card__pkg { font-size: var(--op-fs-micro); letter-spacing: var(--op-ls-label); text-transform: uppercase; color: var(--op-text-subtle); font-weight: var(--op-fw-semibold); }
[data-surface="ink"] .hw-card__pkg { color: var(--op-yellow); }
.op-price-card__media { margin-bottom: calc(-1 * var(--op-sp-2)); }
.op-price-card__media.op-media--illustration { padding: var(--op-sp-3); }
.objection {
display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-3);
padding: var(--op-sp-6); border: var(--op-border) solid var(--op-accent-line); border-radius: var(--op-radius-lg); background: var(--op-surface-raised);
}
@media (min-width: 720px) { .objection { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .objection { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--op-sp-6); } }
.objection__item { display: flex; gap: var(--op-sp-3); align-items: flex-start; font-size: var(--op-fs-body); font-weight: var(--op-fw-medium); color: var(--op-text); line-height: var(--op-lh-snug); }
.objection__item .op-icon { flex: none; width: var(--op-check-size); height: var(--op-check-size); stroke-width: 2; color: var(--op-accent-icon); margin-top: 2px; }
.ref-teaser { display: flex; flex-direction: column; gap: var(--op-sp-4); }
.ref-teaser .op-media { --op-media-ratio: 16 / 9; }
.ref-teaser__kicker { display: flex; flex-wrap: wrap; gap: var(--op-sp-2); align-items: center; font-size: var(--op-fs-micro); letter-spacing: var(--op-ls-label); text-transform: uppercase; color: var(--op-text-subtle); font-weight: var(--op-fw-semibold); }
.ref-teaser__kicker strong { color: var(--op-text); }
.ref-teaser .op-card__body { font-size: var(--op-fs-body); }
.case { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-12); }
.case__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-8); align-items: center; }
@media (min-width: 1040px) { .case__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--op-sp-12); } }
.case__facts { display: flex; flex-wrap: wrap; gap: var(--op-sp-2); }
.case__facts .op-badge { background: var(--op-surface-raised); white-space: normal; height: auto; min-height: 28px; text-align: left; line-height: 1.3; padding-block: 4px; }
.case__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-8); }
@media (min-width: 1040px) { .case__body { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--op-sp-12); align-items: start; } }
.case__sections { display: flex; flex-direction: column; gap: var(--op-sp-12); counter-reset: casestep; }
.case__section { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--op-sp-4); }
.case__section::before { counter-increment: casestep; content: counter(casestep, decimal-leading-zero); font-size: var(--op-fs-caption); font-weight: var(--op-fw-semibold); letter-spacing: var(--op-ls-label); color: var(--op-text-subtle); font-variant-numeric: tabular-nums; padding-top: 6px; }
.case__section h3 { font-size: var(--op-fs-h3); letter-spacing: var(--op-ls-heading); line-height: var(--op-lh-snug); }
.case__section p { margin-top: var(--op-sp-3); font-size: var(--op-fs-body); line-height: var(--op-lh-relaxed); color: var(--op-text-muted); }
.case__section p strong { color: var(--op-text); }
.case__section .op-list { margin-top: var(--op-sp-3); }
.case__pull { font-size: var(--op-fs-h3); font-weight: var(--op-fw-medium); letter-spacing: var(--op-ls-heading); line-height: var(--op-lh-snug); color: var(--op-text); border-left: 3px solid var(--op-accent); padding-left: var(--op-sp-4); margin-top: var(--op-sp-4); }
.case__aside { display: flex; flex-direction: column; gap: var(--op-sp-4); }
@media (min-width: 1040px) { .case__aside { position: sticky; top: calc(var(--op-header-h) + var(--op-sp-6)); } }
.ask { list-style: none; display: flex; flex-direction: column; gap: var(--op-sp-3); }
.ask li { display: flex; gap: var(--op-sp-3); align-items: flex-start; padding: var(--op-sp-3) var(--op-sp-4); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-md); background: var(--op-surface-raised); font-size: var(--op-fs-sm); line-height: var(--op-lh-normal); color: var(--op-text); }
.ask li .op-icon { flex: none; width: 18px; height: 18px; color: var(--op-accent-icon); margin-top: 3px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--op-sp-3); }
.kpi { padding: var(--op-sp-4); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-md); background: var(--op-surface-raised); }
.kpi__value { display: block; font-family: var(--op-font-display); font-weight: var(--op-fw-display); font-variation-settings: "opsz" 40; font-optical-sizing: none; font-size: var(--op-fs-h3); letter-spacing: 0; color: var(--op-text); font-variant-numeric: tabular-nums; }
.kpi__label { display: block; margin-top: 2px; font-size: var(--op-fs-caption); color: var(--op-text-muted); line-height: var(--op-lh-normal); }
.case-switch { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-4); }
@media (min-width: 720px) { .case-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case-switch a { text-decoration: none; }
.case-switch .op-card__title { text-decoration: none; }
a.op-card, a.op-card:hover { text-decoration: none; color: inherit; }
a.op-card .op-card__title, a.op-card .op-card__body, a.op-card .ref-teaser__kicker { text-decoration: none; }
a.op-card .op-card__body { color: var(--op-text-muted); }
.partner-line { font-size: var(--op-fs-caption); color: var(--op-text-subtle); }
.partner-line strong { color: var(--op-text-muted); font-weight: var(--op-fw-medium); }
.op-eyebrow--plain + .op-card__title { margin-top: var(--op-sp-2); }
.prompt-list { list-style: none; display: flex; flex-direction: column; gap: var(--op-sp-2); }
.prompt-list li { display: flex; gap: var(--op-sp-3); align-items: flex-start; font-size: var(--op-fs-sm); line-height: var(--op-lh-normal); color: var(--op-text); padding: var(--op-sp-2) var(--op-sp-3); border-radius: var(--op-radius-sm); background: var(--op-surface-sunken); }
.prompt-list li .op-icon { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--op-accent-icon); }
.prompt-list li::before { content: "„"; color: var(--op-text-subtle); }
.prompt-list li::after { content: "“"; color: var(--op-text-subtle); }
.split__actions .op-btn { white-space: normal; text-align: center; }
.hwviz__out .op-badge { white-space: normal; width: auto; max-width: 100%; height: auto; min-height: 28px; padding-block: 4px; text-align: center; line-height: 1.3; }
.hw-anfrage { margin-top: var(--op-sp-16); padding-top: var(--op-sp-12); border-top: var(--op-hairline) solid var(--op-line); }
.hw-anfrage .cfg__block-head { max-width: var(--op-container-text); }
.case__section .ask, .case__section .kpis { margin-top: var(--op-sp-6); }
.case__aside .op-datarow { display: grid; grid-template-columns: minmax(80px, 120px) minmax(0, 1fr); gap: var(--op-sp-2) var(--op-sp-4); align-items: start; padding-block: var(--op-sp-3); }
.case__aside .op-datarow__label { font-size: var(--op-fs-caption); line-height: var(--op-lh-normal); padding-top: 2px; }
.case__aside .op-datarow__value { font-size: var(--op-fs-sm); font-weight: var(--op-fw-medium); line-height: var(--op-lh-normal); text-align: left; overflow-wrap: anywhere; hyphens: auto; }
.pillars { margin-top: var(--op-sp-4); padding-top: var(--op-sp-8); border-top: var(--op-hairline) solid var(--op-line); }
.testimonials__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-4); }
@media (min-width: 900px) { .testimonials__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--op-sp-6); } }
.testimonial { position: relative; display: flex; flex-direction: column; gap: var(--op-sp-4); margin: 0; padding: var(--op-sp-6); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-lg); background: var(--op-surface-raised); }
.testimonial::before { display: none; }
.testimonial__quote { margin: 0; font-size: 1.0625rem; line-height: var(--op-lh-relaxed); color: var(--op-text); font-weight: var(--op-fw-regular); text-wrap: pretty; }
.testimonial__quote::before { content: "\201E"; color: var(--op-accent-icon); font-weight: var(--op-fw-bold); margin-right: .05em; }
.testimonial__quote::after { content: "\201C"; color: var(--op-accent-icon); font-weight: var(--op-fw-bold); margin-left: .05em; }
html[lang="en"] .testimonial__quote::before { content: "\201C"; }
html[lang="en"] .testimonial__quote::after { content: "\201D"; }
.testimonial__source { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--op-sp-4); border-top: var(--op-hairline) solid var(--op-line); }
.testimonial__name { font-weight: var(--op-fw-semibold); color: var(--op-text); }
.testimonial__role { font-size: var(--op-fs-sm); color: var(--op-text-muted); }
.testimonial__draft { display: inline-block; font-size: var(--op-fs-caption); padding: 2px 6px; border-radius: var(--op-radius-sm); }
.fullservice { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-6); }
@media (min-width: 1040px) { .fullservice { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--op-sp-8); align-items: start; } }
.fullservice__card { gap: var(--op-sp-4); }
.fullservice__list li { font-size: var(--op-fs-body); color: var(--op-text); }
.fullservice__process { display: flex; flex-direction: column; gap: var(--op-sp-4); }
.fullservice__process .steps { gap: var(--op-sp-3); }
.fullservice__process .step { padding: var(--op-sp-4); }
@media (min-width: 600px) and (max-width: 899px) { .fullservice__process .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bizcase { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-8); }
@media (min-width: 1040px) { .bizcase { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--op-sp-12); align-items: start; } }
.bizcase__copy { display: flex; flex-direction: column; gap: var(--op-sp-4); }
.bizcase__copy .op-section-head { max-width: none; }
.bizcase__list li { font-size: var(--op-fs-body); }
.bizcase__calc { gap: var(--op-sp-3); background: var(--op-surface-sunken); }
.calcrows { margin: 0; display: flex; flex-direction: column; }
.calcrow { display: flex; justify-content: space-between; gap: var(--op-sp-3); padding-block: var(--op-sp-3); border-top: var(--op-hairline) solid var(--op-line); font-size: var(--op-fs-sm); }
.calcrow dt { color: var(--op-text-muted); }
.calcrow dd { margin: 0; font-weight: var(--op-fw-semibold); color: var(--op-text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calcrow:last-child dd { font-size: var(--op-fs-h4); }
.trybuy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-6); align-items: center; }
@media (min-width: 1040px) { .trybuy { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--op-sp-12); } }
.trybuy__actions { display: flex; flex-direction: column; gap: var(--op-sp-3); }
.trybuy__actions .op-btn { justify-content: center; }
.cta-band--contact { margin-top: 0; }
.personas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-4); margin-top: var(--op-sp-6); }
@media (min-width: 900px) { .personas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.persona { display: flex; flex-direction: column; }
.persona .op-card__body { flex: 1; }
.persona__actions { display: flex; flex-wrap: wrap; gap: var(--op-sp-2); margin-top: var(--op-sp-4); }
.page-hero__actions .op-btn, .cta-band__actions .op-btn, .persona__actions .op-btn, .case__section .op-btn, .op-card__foot .op-btn { white-space: normal; text-align: center; max-width: 100%; }
.calcrow dd { white-space: normal; }
@media (max-width: 479px) { .calcrow { flex-direction: column; gap: 2px; } .calcrow dd { text-align: left; } }
.kpi__value, .kpi__label { overflow-wrap: anywhere; }
@media (max-width: 479px) { .kpis { grid-template-columns: minmax(0, 1fr); } }
.arch-card .op-datarow { display: grid; grid-template-columns: minmax(96px, 128px) minmax(0, 1fr); gap: var(--op-sp-2) var(--op-sp-4); align-items: start; padding-block: var(--op-sp-3); }
.arch-card .op-datarow__label { font-size: var(--op-fs-caption); line-height: var(--op-lh-normal); padding-top: 2px; }
.arch-card .op-datarow__value { font-size: var(--op-fs-sm); font-weight: var(--op-fw-medium); line-height: var(--op-lh-normal); text-align: left; }
.arch-card .op-card__body { margin-bottom: var(--op-sp-2); }
.consent { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--op-z-modal); padding: var(--op-sp-4); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--op-dur-ui) var(--op-ease-standard), transform var(--op-dur-ui) var(--op-ease-standard), visibility 0s linear var(--op-dur-ui); }
.consent.is-visible { pointer-events: auto; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.consent__inner { max-width: 760px; margin-inline: auto; padding: var(--op-sp-6) var(--op-sp-8); display: flex; flex-direction: column; gap: var(--op-sp-3); background: var(--op-surface-raised); color: var(--op-text); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-xl); box-shadow: var(--op-shadow-raised); }
.consent__title { margin: 0; font-size: var(--op-fs-h4); font-weight: var(--op-fw-semibold); letter-spacing: var(--op-ls-heading); color: var(--op-text); }
.consent__text { margin: 0; font-size: var(--op-fs-sm); line-height: var(--op-lh-normal); color: var(--op-text-muted); }
.consent__text a { color: var(--op-text); }
.consent__panel { display: flex; flex-direction: column; gap: 0; padding-top: var(--op-sp-2); border-top: var(--op-hairline) solid var(--op-line); }
.consent__option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--op-sp-3); align-items: start; padding-block: var(--op-sp-2); cursor: pointer; }
.consent__check { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--op-accent); }
.consent__check:disabled { opacity: .6; }
.consent__option-text { display: flex; flex-direction: column; gap: 2px; font-size: var(--op-fs-sm); line-height: var(--op-lh-normal); color: var(--op-text-muted); }
.consent__option-text strong { color: var(--op-text); font-weight: var(--op-fw-semibold); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--op-sp-2); padding-top: var(--op-sp-1); }
.consent__actions .op-btn { white-space: normal; text-align: center; }
@media (max-width: 479px) { .consent { padding: var(--op-sp-2); } .consent__inner { padding: var(--op-sp-4); } .consent__actions .op-btn { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; transform: none; } }
.site-footer__consent { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.site-footer__consent:hover, .site-footer__consent:focus-visible { color: var(--op-on-ink-strong); }
.arch-card .op-datarow__value { overflow-wrap: anywhere; }
@media (max-width: 479px) { .arch-card .op-datarow { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.site-header .op-btn--ghost { --_bg: var(--op-surface-raised); --_bd: var(--op-line); text-decoration: none; padding-inline: var(--op-sp-4); }
.site-header .op-btn--ghost:hover, .site-header .op-btn--ghost:focus-visible { --_bd: var(--op-yellow); }
.site-footer__consent { text-decoration: underline; }
.to-top { position: fixed; right: var(--op-sp-6); bottom: var(--op-sp-6); z-index: var(--op-z-sticky); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: var(--op-border) solid var(--op-line); background: var(--op-surface-raised); color: var(--op-text-muted); box-shadow: var(--op-shadow-raised); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--op-dur-ui) var(--op-ease-standard), transform var(--op-dur-ui) var(--op-ease-standard), visibility 0s linear var(--op-dur-ui), background-color var(--op-dur-ui) var(--op-ease-standard); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover, .to-top:focus-visible { background: var(--op-yellow-tint); border-color: var(--op-yellow); color: var(--op-text); }
.to-top .op-icon { width: 20px; height: 20px; }
body.has-consent .to-top { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 1039px) { body.has-cfg-bar .to-top { bottom: calc(var(--op-sp-6) + 100px); } }
@media (max-width: 719px) { .to-top { right: var(--op-sp-4); bottom: var(--op-sp-4); } body.has-cfg-bar .to-top { bottom: calc(var(--op-sp-4) + 108px); } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; transform: none; } }
.br-lg { display: none; }
@media (min-width: 1040px) { .br-lg { display: inline; } }
.lifecycle { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--op-sp-3); counter-reset: lc; margin-bottom: var(--op-sp-8); }
@media (min-width: 720px) { .lifecycle { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .lifecycle { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.lifecycle__item { position: relative; display: flex; flex-direction: column; gap: var(--op-sp-2); min-width: 0; padding: var(--op-sp-4); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-md); background: var(--op-surface-raised); counter-increment: lc; }
.lifecycle__num { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--op-radius-sm); border: var(--op-border) solid var(--op-accent); background: var(--op-accent); color: var(--op-accent-on); font-size: var(--op-fs-micro); font-weight: var(--op-fw-semibold); font-variant-numeric: tabular-nums; }
.lifecycle__num::before { content: counter(lc); }
.lifecycle__label { font-size: var(--op-fs-sm); font-weight: var(--op-fw-semibold); color: var(--op-text); line-height: var(--op-lh-snug); overflow-wrap: break-word; hyphens: manual; }
.lifecycle__note { font-size: var(--op-fs-caption); line-height: var(--op-lh-normal); color: var(--op-text-muted); }
.lifecycle__item--loop { border-color: var(--op-accent-line); background: var(--op-accent-tint); }
@media (min-width: 1280px) {
.lifecycle__item:not(:last-child)::after { content: ""; position: absolute; right: calc(-1 * var(--op-sp-3) - 1px); top: 26px; width: var(--op-sp-3); height: 2px; background: var(--op-line-strong); }
}
.fullservice--even { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .fullservice--even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--op-sp-6); } }
.fullservice__card .op-card__foot { margin-top: auto; }
.upgrade { display: flex; flex-direction: column; gap: var(--op-sp-3); padding: var(--op-sp-6); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-lg); background: var(--op-surface-raised); }
.upgrade__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-3); }
@media (min-width: 720px) { .upgrade__row { grid-template-columns: 88px repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.upgrade__when { display: flex; align-items: center; font-size: var(--op-fs-micro); letter-spacing: var(--op-ls-label); text-transform: uppercase; font-weight: var(--op-fw-semibold); color: var(--op-text-subtle); }
.upgrade__cell { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--op-sp-4); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-md); background: var(--op-surface); }
.upgrade__cell .op-icon { width: 24px; height: 24px; color: var(--op-accent-icon); margin-bottom: var(--op-sp-2); }
.upgrade__label { font-size: var(--op-fs-sm); font-weight: var(--op-fw-semibold); color: var(--op-text); line-height: var(--op-lh-snug); overflow-wrap: break-word; hyphens: manual; }
.upgrade__note { font-size: var(--op-fs-caption); color: var(--op-text-muted); line-height: var(--op-lh-normal); }
.upgrade__cell--keep { border-style: dashed; }
.upgrade__cell--keep .upgrade__note::before { content: "="; margin-right: 4px; color: var(--op-accent-icon); font-weight: var(--op-fw-bold); }
.upgrade__cell--new { border-color: var(--op-accent-line); background: var(--op-accent-tint); }
.upgrade__cell--new .upgrade__note::before { content: "\2192"; margin-right: 4px; color: var(--op-accent-icon); font-weight: var(--op-fw-bold); }
.upgrade__row--next { padding-top: var(--op-sp-3); border-top: var(--op-hairline) solid var(--op-line); }
.upgrade__foot { margin: var(--op-sp-2) 0 0; font-size: var(--op-fs-body); font-weight: var(--op-fw-semibold); color: var(--op-text); }
@media (min-width: 720px) { .upgrade__foot { padding-left: calc(88px + var(--op-sp-3)); } }
@media (min-width: 720px) {
.upgrade__cell:not(:last-child)::after { content: ""; position: absolute; right: calc(-1 * var(--op-sp-3) - 1px); top: 50%; width: var(--op-sp-3); height: 2px; background: var(--op-line-strong); }
}
@media (min-width: 720px) {
.upgrade--stack .upgrade__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.upgrade--stack .upgrade__when { grid-column: 1 / -1; }
.upgrade--stack .upgrade__foot { padding-left: 0; }
}
.growth { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-6); margin-top: var(--op-sp-8); align-items: center; }
@media (min-width: 1040px) { .growth { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--op-sp-12); } }
.growth__copy { display: flex; flex-direction: column; gap: var(--op-sp-3); }
.growth__list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-2); }
@media (min-width: 600px) { .growth__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.growth__list li { display: flex; align-items: center; gap: var(--op-sp-3); padding: var(--op-sp-3) var(--op-sp-4); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-md); background: var(--op-surface-raised); font-size: var(--op-fs-sm); font-weight: var(--op-fw-medium); color: var(--op-text); line-height: var(--op-lh-snug); }
.growth__list li::before { content: "+"; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--op-accent); color: var(--op-accent-on); font-weight: var(--op-fw-bold); font-size: var(--op-fs-sm); }
.calcrow--alt dt { color: var(--op-text); font-weight: var(--op-fw-medium); }
.calcrow--alt dd { color: var(--op-text); }
.calcrow:last-child dd { font-size: var(--op-fs-sm); }
.calcrow--main dd { font-family: var(--op-font-display); font-weight: var(--op-fw-display); font-variation-settings: "opsz" 40; font-optical-sizing: none; font-size: 1.25rem; }
@media (min-width: 900px) { .testimonials__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } }
.testimonial--draft { border-style: dashed; }
.value-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-3); }
@media (min-width: 600px) { .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .value-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--op-sp-4); } }
.value-card { display: flex; flex-direction: column; gap: var(--op-sp-2); padding: var(--op-sp-4); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-md); background: var(--op-surface-raised); }
.value-card__title { font-size: var(--op-fs-body); font-weight: var(--op-fw-semibold); color: var(--op-text); }
.value-card__text { font-size: var(--op-fs-caption); line-height: var(--op-lh-normal); color: var(--op-text-muted); }
.site-footer .op-trust-stamp, [data-surface="ink"] .op-trust-stamp { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); }
.site-footer .op-trust-stamp__flag, [data-surface="ink"] .op-trust-stamp__flag { box-shadow: 0 0 0 2px rgba(255, 255, 255, .22); }
.site-footer .op-trust-stamp__text { font-size: 0.625rem; white-space: nowrap; }
.site-footer .op-wordmark__name { white-space: nowrap; }
.integ { display: flex; flex-direction: column; gap: 0; }
.integ__layer { position: relative; padding: var(--op-sp-6); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-lg); background: var(--op-surface-raised); }
.integ__label { margin: 0 0 var(--op-sp-4); font-size: var(--op-fs-micro); letter-spacing: var(--op-ls-label); text-transform: uppercase; font-weight: var(--op-fw-semibold); color: var(--op-text-subtle); }
.integ__note { margin-top: var(--op-sp-4); }
.integ__link { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--op-sp-2); padding: var(--op-sp-6) var(--op-sp-4); }
.integ__link::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--op-line-strong); transform: translateX(-50%); }
.integ__link span { position: relative; z-index: 1; padding: 4px 10px; border-radius: var(--op-radius-pill); border: var(--op-border) solid var(--op-line); background: var(--op-surface); font-size: var(--op-fs-caption); font-weight: var(--op-fw-medium); color: var(--op-text-muted); }
.integ__core { padding: var(--op-sp-6) var(--op-sp-8); border-radius: var(--op-radius-lg); background: var(--op-ink-900); border: var(--op-border) solid var(--op-accent-line); text-align: center; }
.integ__core .op-eyebrow { justify-content: center; }
.integ__core-title { margin: var(--op-sp-3) auto 0; max-width: 34ch; font-size: var(--op-fs-h3); font-weight: var(--op-fw-semibold); letter-spacing: var(--op-ls-heading); line-height: var(--op-lh-snug); color: var(--op-text); }
.integ__core-text { margin: var(--op-sp-3) auto 0; max-width: 64ch; font-size: var(--op-fs-sm); line-height: var(--op-lh-relaxed); color: var(--op-text-muted); }
.integ__out { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-3); }
@media (min-width: 600px) { .integ__out { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .integ__out { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--op-sp-4); } }
.integ__out li { display: flex; flex-direction: column; gap: 4px; padding: var(--op-sp-4); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-md); background: var(--op-surface); }
.integ__out strong { font-size: var(--op-fs-sm); font-weight: var(--op-fw-semibold); color: var(--op-text); }
.integ__out span { font-size: var(--op-fs-caption); line-height: var(--op-lh-normal); color: var(--op-text-muted); }
.brands { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--op-sp-3); }
@media (min-width: 600px) { .brands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .brands { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--op-sp-2); min-height: 64px; padding: var(--op-sp-3) var(--op-sp-4); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-md); background: var(--op-surface-raised); box-shadow: var(--op-shadow-sm); min-width: 0; transition: border-color var(--op-dur-ui) var(--op-ease-standard); }
.brand:hover { border-color: var(--op-yellow); }
.brand__mark { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--op-radius-sm); background: var(--op-surface-sunken); color: var(--op-logo-ink); transition: color var(--op-dur-ui) var(--op-ease-standard); }
.brand__mark svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.brand__mark svg[viewBox] use { fill: inherit; }
.brand:hover .brand__mark { color: var(--op-accent); }
.brand__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand__name { font-size: var(--op-fs-sm); font-weight: var(--op-fw-semibold); color: var(--op-text); line-height: var(--op-lh-snug); overflow-wrap: break-word; }
.brand__sub { font-size: var(--op-fs-caption); color: var(--op-text-subtle); line-height: var(--op-lh-normal); overflow-wrap: break-word; }
@media (max-width: 599px) { .integ__layer { padding: var(--op-sp-4); } .brand, .brand--more a { padding: var(--op-sp-3); } .brand__mark { width: 32px; height: 32px; } .brand__mark svg { width: 18px; height: 18px; } }
.brand--more { padding: 0; border-color: var(--op-accent-line); background: var(--op-accent-tint); }
.brand--more a { display: flex; flex-direction: column; align-items: flex-start; gap: var(--op-sp-2); width: 100%; height: 100%; min-height: 64px; padding: var(--op-sp-3) var(--op-sp-4); text-decoration: none; color: inherit; border-radius: inherit; }
.brand--more .brand__mark { background: var(--op-surface-raised); color: var(--op-accent-icon); }
.brand--more .brand__sub { display: inline-flex; align-items: center; gap: 4px; color: var(--op-text-muted); }
.brand--more .brand__sub .op-icon { width: 12px; height: 12px; }
.brand--more a:focus-visible { outline: var(--op-focus-width) solid var(--op-focus); outline-offset: var(--op-focus-offset); }
[data-surface="ink"] .brand, [data-surface="ink"] .integ__out li, [data-surface="ink"] .integ__link span { background: var(--op-ink-800); }
.levels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-4); margin-top: var(--op-sp-6); }
@media (min-width: 900px) { .levels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.level__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--op-sp-2); margin-bottom: var(--op-sp-1); }
.level__scope { font-size: var(--op-fs-caption); color: var(--op-text-subtle); }
.level--act { border-color: var(--op-accent-line); }
#integration-custom .op-card__foot { display: flex; flex-wrap: wrap; gap: var(--op-sp-2); }
#integration-custom .op-card__foot .op-btn { white-space: normal; text-align: center; }
.integration__marks { grid-column: 2; grid-row: 1; justify-self: start; display: inline-flex; flex: none; align-items: center; gap: 4px; margin-top: 1px; padding: 5px; border-radius: var(--op-radius-sm); background: var(--op-surface-sunken); color: var(--op-logo-ink); }
.integration__marks svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.integration:has(input:checked) .integration__marks { background: var(--op-surface-raised); color: var(--op-text); }
.integration__enables { font-size: var(--op-fs-caption); color: var(--op-text-muted); line-height: var(--op-lh-normal); margin-top: 2px; }
.integration__enables::before { content: "→ "; color: var(--op-accent-icon); }
.int-legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--op-sp-3); margin-bottom: var(--op-sp-4); }
@media (min-width: 600px) { .int-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.int-legend__item { display: flex; flex-direction: column; gap: 2px; padding: var(--op-sp-3) var(--op-sp-4); border: var(--op-border) solid var(--op-line); border-radius: var(--op-radius-md); background: var(--op-surface-raised); }
.int-legend__title { font-size: var(--op-fs-sm); font-weight: var(--op-fw-semibold); color: var(--op-text); }
.int-legend__text { font-size: var(--op-fs-caption); color: var(--op-text-muted); line-height: var(--op-lh-normal); }
.int-legend__item--act { border-color: var(--op-accent-line); }