/* ---------- Fonts, local (GDPR): Figtree as variable font 300–900 like the 2025 website, JetBrains Mono for code ---------- */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/Figtree-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/Figtree-var-latin.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: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/Figtree-var-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/Figtree-var-italic-latin.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JetBrainsMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/JetBrainsMono-400-latin.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/JetBrainsMono-500-latin.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;
}

/* CORS design of the 2025 website (website-2025, themes/base/assets/css), ported without Bootstrap.
   fluid(min, max) is expanded at build time to clamp() between 990 and 1440 px viewport (fluidValue() in the SCSS). */

/* ---------- 1 Tokens ----------
   Every value of a component rule comes from here. Breakpoints are the only literals in the components, because media queries
   cannot read custom properties: 576 / 768 / 992 / 1180 (mobile, website-2025) / 1200 px, max-width variants at .02 px below. */
:root{
  /* Palette of website-2025 (bootstrap/base_variables.scss) */
  --cors-primary:#CD151A; --cors-primary-hot:#FF2D35; --cors-black:#181818; --cors-dark:#1f1f1f; --cors-light:#CAD0D7; --cors-white:#FFFFFF;
  --cors-shade:#000000; --cors-success:#56DD76; --cors-warning:#FFDA58;
  --cors-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");   /* fine noise texture: hero, violet band */
  --cors-violet:#6428B4;   /* the one violet (CORS design system): band for Pimcore topics; badge and band shades are mixed from it */
  --cors-blue:#4D8DFF;   /* badges only */
  /* Derived colours */
  --cors-border:color-mix(in srgb,var(--cors-light) 20%,transparent);            /* $border-color-translucent */
  --cors-gradient:linear-gradient(130deg,color-mix(in srgb,var(--cors-light) 20%,transparent) 0%,color-mix(in srgb,var(--cors-primary) 10%,transparent) 100%),var(--cors-dark);
  /* Hero: WebGL gradient of website-2025 (hero.scss), CSS fallback blobs, video, film look */
  --cors-gradient-1:#A52828; --cors-gradient-2:var(--cors-gradient-1); --cors-gradient-3:#BD979B; --cors-gradient-4:var(--cors-black); --cors-gradient-5:#8C5F7E;
  --cors-gradient-blur:130px; --cors-gradient-overscan:calc(var(--cors-gradient-blur) * 1.5); --cors-fallback-blur:90px;
  --cors-video-bg:#101117; --cors-video-shade:#0E0F13; --cors-leak:#FF6E46;
  /* Browser frame */
  --cors-frame-bar:#333333; --cors-frame-field:#404040;

  /* Spacing scale */
  --space-0-5:2px; --space-1:4px; --space-1-5:6px; --space-2:8px; --space-2-5:10px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-24:96px; --space-30:120px;
  /* Fluid sizes (fluid() = fluidValue() of website-2025) */
  --cors-gutter:clamp(32px, calc(32px + ((1vw - 9.9px) * 21.3333)), 128px);                   /* container gutter */
  --cors-section:clamp(80px, calc(80px + ((1vw - 9.9px) * 17.7778)), 160px);                  /* space between bricks */
  --cors-pad:clamp(16px, calc(16px + ((1vw - 9.9px) * 3.5556)), 32px);                       /* padding of cards and facts */
  --cors-edge:clamp(16px, calc(16px + ((1vw - 9.9px) * 10.6667)), 64px);                      /* topbar distance to the viewport edge */
  --cors-topbar-h:calc(46px + clamp(32px, calc(32px + ((1vw - 9.9px) * 7.1111)), 64px) + clamp(64px, calc(64px + ((1vw - 9.9px) * 14.2222)), 128px));
  --cors-scroll-offset:120px;                    /* anchor targets below the fixed topbar */
  --cors-scrollbar-width:0px;                    /* set by navigation.js for the scroll lock */
  /* Lines and radii */
  --line-1:1px; --line-1-5:1.5px; --line-2:2px; --line-3:3px;
  --r-sm:2px; --r-lg:.3rem; --r-xl:8px; --r-pill:80px; --r-round:50%;
  /* Type */
  --font-sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --fs-display:clamp(52px, calc(52px + ((1vw - 9.9px) * 11.5556)), 104px); --fs-display-2:clamp(48px, calc(48px + ((1vw - 9.9px) * 8)), 84px);   /* display-1 (home hero), display-2 (first headline of other pages) */
  --fs-h1:clamp(44.67px, calc(44.67px + ((1vw - 9.9px) * 4.9622)), 67px); --fs-h2:clamp(39.33px, calc(39.33px + ((1vw - 9.9px) * 4.3711)), 59px); --fs-h3:clamp(25.33px, calc(25.33px + ((1vw - 9.9px) * 2.8156)), 38px); --fs-h4:clamp(21.33px, calc(21.33px + ((1vw - 9.9px) * 1.0378)), 26px);
  --fs-h5:clamp(18px, calc(18px + ((1vw - 9.9px) * 0.4444)), 20px); --fs-h6:clamp(12px, calc(12px + ((1vw - 9.9px) * 0.4444)), 14px); --fs-lead:clamp(20px, calc(20px + ((1vw - 9.9px) * 1.1111)), 25px); --fs-body:1.2rem; --fs-lg:var(--fs-body); --fs-sm:clamp(12px, calc(12px + ((1vw - 9.9px) * 0.6667)), 15px);
  --fs-ui:1rem; --fs-small:15px; --fs-meta:14px; --fs-label:13px; --fs-xs:12px; --fs-micro:11px; --fs-number:2rem;
  --tracking-caps:1.95px; --tracking-wide:.5px;
  /* Motion */
  --cors-cubic:cubic-bezier(.2,.09,0,.99); --cors-cubic-end:cubic-bezier(.28,.23,.01,.99);
  --cors-micro:.4s;   /* duration of micro transitions (hover, focus) */
  --cors-enter-shift:var(--space-2); --cors-enter-time:.9s; --cors-enter-step:80ms; --cors-enter-shift-img:var(--space-6); --cors-enter-offset:15%;   /* entrance: distance, duration, stagger, image distance, how far into the viewport images start */
  /* Glow (rotating shadow of the round hero CTA, website-2025) */
  --glow-offset:30px; --glow-blur:250px;
  --glow-red:color-mix(in srgb,var(--cors-primary) 30%,transparent); --glow-light:color-mix(in srgb,var(--cors-light) 40%,transparent);

  /* Component tokens */
  --cors-head-gap:clamp(44px, calc(44px + ((1vw - 9.9px) * 4.8889)), 66px);                  /* below the section head; also above the first stacked inline links */
  --cors-head-w:700px; --cors-hero-lead-w:860px;                           /* section head */
  --cors-reading-w:calc(858px + 32px);           /* article, author box, legal text ($compact-container) */
  --cors-code-w:1200px;                          /* code blocks in an article break out of the reading width up to this */
  --cors-logo-mark-w:111px; --cors-logo-mark-h:34px; --cors-logo-delay:.8s;   /* topbar logo, delay before the intro animation */
  --cors-badge-overlay:70%; --cors-feature-head-w:960px; --cors-stage-h:clamp(560px, calc(560px + ((1vw - 9.9px) * 44.4444)), 760px); --cors-stage-page-h:max(80svh,var(--cors-stage-h)); --cors-stage-pad:clamp(32px, calc(32px + ((1vw - 9.9px) * 7.1111)), 64px); --cors-stage-inset:clamp(0px, calc(0px + ((1vw - 9.9px) * 12.4444)), 56px); --cors-stage-number:clamp(26px, calc(26px + ((1vw - 9.9px) * 4.4444)), 46px); --cors-cover-scrim-h:clamp(200px, calc(200px + ((1vw - 9.9px) * 31.1111)), 340px); --cors-cover-scrim:85%; --cors-topbar-shrink:600px; --cors-topbar-start:.2; --cors-topbar-pad-min:clamp(8px, calc(8px + ((1vw - 9.9px) * 1.7778)), 16px); --cors-topbar-bg-opacity:.6;   /* topbar: shrink distance, start (share of the hero height), compact padding, background */
  --cors-mainnav-gap:clamp(32px, calc(32px + ((1vw - 9.9px) * 7.1111)), 64px); --cors-mainnav-panel-w:1000px; --cors-mainnav-time:.5s; --cors-mainnav-blur:14px; --cors-mainnav-shadow-room:var(--space-24);
  --cors-mainnav-shadow:0 var(--space-12) var(--space-24) color-mix(in srgb,var(--cors-shade) 60%,transparent);   /* main navigation: gap after the logo, panel width, reveal, page blur, shadow */
  --cors-more-size:clamp(140px, calc(140px + ((1vw - 9.9px) * 30)), 275px); --cors-more-float:10px; --cors-more-float-speed:8s;
  --cors-more-hover-glow:0 0 90px color-mix(in srgb,var(--cors-light) 16%,transparent),0 0 160px color-mix(in srgb,var(--cors-primary) 18%,transparent);
  --cors-logo-w:136px; --cors-logo-h:78px; --cors-logo-w-sm:96px; --cors-logo-opacity:.6; --cors-logo-gap:var(--space-8) var(--space-16);
  --cors-social-pager-w:24px;
  --cors-icon-sm:20px; --cors-icon-md:24px; --cors-icon-lg:47px; --cors-icon-xl:60px;
  --cors-check-size:32px; --cors-avatar-sm:72px; --cors-avatar-md:160px; --cors-avatar-lg:200px;
  --cors-card-min-h:200px; --cors-code-max-h:560px; --cors-card-logo-h:90px;
  --cors-container-w:1680px; --cors-container-sm-w:1440px;
  --cors-marker:14px;                            /* red square of the h6 label */
  --cors-pager-line:40px; --cors-pager-line-md:100px; --cors-pager-line-lg:180px;
  --cors-step-min-w:200px; --cors-job-title-w:420px; --cors-check-input:18px;
  --cors-focus-glow:-20px 2px 30px -15px var(--cors-light),20px -2px 30px -15px var(--cors-primary);   /* $input-btn-focus-box-shadow */
  --cors-blob-1:760px; --cors-blob-2:620px; --cors-blob-3:540px;   /* CSS fallback of the hero gradient */
  --cors-tech-icon:44px; --cors-tech-logo:26px; --cors-tech-logo-wide:40px; --cors-dot:8px; --cors-map-pin:22px; --cors-flow-visual-h:58px;

  /* Context tokens; also used by the diagrams (section 6) */
  --bg:var(--cors-black); --fg:var(--cors-light); --fg-strong:var(--cors-white);
  --fg-2:color-mix(in srgb,var(--cors-light) 80%,transparent); --fg-muted:color-mix(in srgb,var(--cors-light) 60%,transparent);
  --surface:var(--cors-dark); --surface-2:color-mix(in srgb,var(--cors-dark) 96%,var(--cors-white));
  --border:var(--cors-border); --border-subtle:color-mix(in srgb,var(--cors-light) 10%,transparent); --border-strong:color-mix(in srgb,var(--cors-light) 35%,transparent);
  --accent:var(--cors-primary-hot);
  /* Code (highlight.js a11y-dark) */
  --code-bg:#2B2B2B; --code-fg:#F8F8F2;
  --code-keyword:#DCC6E0; --code-string:#ABE338; --code-comment:#D4D0AB; --code-number:#F5AB35;
  --code-variable:#FFA07A; --code-function:#00E0E0; --code-property:#FFA07A; --code-tag:#FFA07A;
  /* Diagrams (taken over from the 2026 design) */
  --dg-text:#F2F3F5; --dg-icon:#E6E8EB; --dg-label:#8C929A; --dg-caption:#6E747C; --dg-legend:#A9AEB5; --dg-muted:#B9BEC5;
  --dg-node:#17181A; --dg-node-2:#141517; --dg-node-line:#34373C; --dg-line:#3A3E44; --dg-line-strong:#4A4E54;
  --dg-core:#0B0B0C; --dg-core-line:#2E3136; --dg-node-red:#1A1113; --dg-red-soft:#FF8A8F; --dg-pod:#1C1416; --dg-pod-hot:#2A1517; --dg-amber:#F2DA7A;
  /* Draft markers (before go-live) */
  --dg-min-w:760px; --dg-max-w:1132px;          /* diagrams scroll inside .diagram below this width; content width of the 2026 layout */
  --dg-fs-xs:11px; --dg-fs-s:12px; --dg-fs-m:13.5px; --dg-fs-l:16px; --dg-fs-title:15px; --dg-fs-title-hub:15.5px; --dg-fs-sub:11.5px; --dg-fs-big:26px; --dg-fs-wf:24px;   /* SVG user units */
  --dg-node:54px; --dg-node-icon:22px; --dg-halo:9px; --dg-halo-inner:7px; --dg-core-w:320px; --dg-core-h:112px; --dg-core-mark:13px;
  --dg-dot:7px; --dg-pop-w:380px; --dg-pop-js-w:340px; --dg-pop-arrow:12px; --dg-close:40px;
  --dg-spine-min-h:680px; --dg-spine-max-h:1100px; --dg-spine-offset:76px;
  --sg-swatch-w:150px; --sg-swatch-h:72px; --sg-label-w:140px; --sg-text-w:720px;   /* styleguide page */
  --draft-bg:#FFF4C2; --draft-fg:#5C4A00; --draft-border:#E8D27A; --draft-line:#C9A400; --draft-note:#8A6D00; --draft-line-dark:#8A7200; --draft-note-dark:#E2C14A;

  /* Diagram and wireframe palette (wireframes are always light, also inside dark sections) */
  --dg-wf-ink:#121315; --dg-wf-ink-2:#33363B; --dg-wf-muted:#5E646C; --dg-wf-line:#E2E5E9; --dg-wf-paper:#FFFFFF; --dg-wf-paper-2:#F3F4F6;
  --dg-wf-dark:#1A1A1A; --dg-wf-ink-500:#5A5B5D; --dg-wf-ink-400:#B2B2B2;
  --dg-hairline:color-mix(in srgb,var(--cors-white) 8%,transparent); --dg-night:#191919; --dg-night-line:#303030; --dg-night-line-2:#3D3D3D;
  --dg-shadow:0 1rem 3rem color-mix(in srgb,var(--cors-shade) 45%,transparent);
  --cors-quick:.2s;   /* short state transitions in diagrams and links */
}

/* ---------- 2 Contexts ---------- */
/* Dark band (feature-grid--dark): cards and icons switch to black so they stay visible */
.c-section--dark{--surface:var(--cors-black);--surface-2:color-mix(in srgb,var(--cors-black) 96%,#fff);background:var(--cors-dark)}

/* ---------- 3 Base & typography ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);font-weight:400;line-height:1.6;color:var(--fg);background:var(--bg)}
img,svg{vertical-align:middle}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:underline;text-underline-offset:.15em;transition:color var(--cors-quick)}
a:hover{color:var(--fg-strong)}
p,ul,ol,dl,figure,blockquote{margin:0 0 var(--space-5)}
p:last-child,ul:last-child,ol:last-child,dl:last-child,figure:last-child{margin-bottom:0}
ul,ol{padding-left:var(--space-5)}
:focus-visible{outline:var(--line-2) solid var(--cors-primary);outline-offset:var(--space-0-5)}
/* Skip link: first focus stop, visible only while focused */
.skip-link{position:fixed;top:var(--space-2);left:var(--space-2);z-index:200;padding:var(--space-2-5) var(--space-5);border-radius:var(--r-pill);background:var(--cors-light);color:var(--cors-black);font-size:var(--fs-ui);text-decoration:none;translate:0 calc(-100% - var(--space-4))}
.skip-link:focus-visible{translate:0 0}
main:focus{outline:none}
::selection{background:var(--cors-primary);color:var(--cors-white)}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin:0;font-weight:500;line-height:1.12;color:inherit;hyphens:auto;overflow-wrap:break-word}
h1,.h1{font-size:var(--fs-h1);line-height:1;margin-bottom:clamp(32px, calc(32px + ((1vw - 9.9px) * 3.5556)), 48px)}
h2,.h2{font-size:var(--fs-h2);line-height:1;margin-bottom:clamp(24px, calc(24px + ((1vw - 9.9px) * 1.7778)), 32px)}
h3,.h3{font-size:var(--fs-h3);line-height:1.25;margin-bottom:clamp(16px, calc(16px + ((1vw - 9.9px) * 1.7778)), 24px)}
h4,.h4{font-size:var(--fs-h4);line-height:1.25;margin-bottom:clamp(16px, calc(16px + ((1vw - 9.9px) * 3.1111)), 30px)}
h5,.h5{font-size:var(--fs-h5);line-height:1.133;margin-bottom:clamp(8px, calc(8px + ((1vw - 9.9px) * 1.7778)), 16px)}
/* Display headlines above h1: display-1 for the home hero, display-2 for the first headline of every other page */
.display-1{font-size:var(--fs-display);line-height:1}
.display-2{font-size:var(--fs-display-2);line-height:1.04}
h6,.h6{font-size:var(--fs-h6);line-height:1.27;margin-bottom:clamp(8px, calc(8px + ((1vw - 9.9px) * 1.7778)), 16px);font-weight:700;display:flex;gap:var(--space-2-5);align-items:flex-start}
h6::before,.h6::before{content:"";width:var(--cors-marker);height:var(--cors-marker);flex:0 0 auto;margin-top:.05em;background:var(--cors-primary)}
:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):last-child{margin-bottom:0}
.lead{font-size:var(--fs-lead);font-weight:300;line-height:1.5}
.text-lg{font-size:var(--fs-lg);line-height:1.5}
.text-sm{font-size:var(--fs-sm)}
.pre-headline,.small-caps{display:block;font-size:var(--fs-label);font-weight:400;line-height:1.3;letter-spacing:var(--tracking-caps);text-transform:uppercase;margin:0 0 var(--space-6)}
.small-caps{margin:0}
/* Items of a pre-headline (e.g. the awards in the hero) only break between each other, never inside */
.pre-headline__item{white-space:nowrap}
.note{font-size:var(--fs-sm);color:var(--fg-muted);margin-top:var(--space-6)}
.stretched-link::after{content:"";position:absolute;inset:0;z-index:1}
.stretched-link{text-decoration:none}

/* Icon (Atoms:Icon) – Lucide, stroke width scaled like website-2025 */
.icon{display:inline-block;flex:0 0 auto;--cors-stroke:1}
.icon svg{display:block;width:100%;height:100%;stroke-width:var(--cors-stroke)}
.icon--small{width:var(--cors-icon-sm);height:var(--cors-icon-sm);--cors-stroke:1.5}
.icon--medium{width:var(--cors-icon-md);height:var(--cors-icon-md)}
.icon--large{width:var(--cors-icon-lg);height:var(--cors-icon-lg);--cors-stroke:.375}
.icon--xlarge{width:var(--cors-icon-xl);height:var(--cors-icon-xl);--cors-stroke:.375}

/* Button (Atoms:Button:Button) – round, light; icon at the end */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:var(--space-2-5);border-radius:var(--r-pill);padding:var(--space-2-5) var(--space-5);font:inherit;font-size:var(--fs-ui);line-height:1.6;text-decoration:none;background-color:var(--cors-btn-background,transparent);color:var(--cors-btn-color,var(--cors-dark));border:var(--line-1) solid var(--cors-btn-border,transparent);cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out,border-color .15s ease-in-out}
.btn .icon{transition:transform .2s var(--cors-cubic)}
.btn:hover .icon{transform:translateX(var(--space-0-5))}
.btn[href^="#"]:hover .icon{transform:translateY(var(--space-0-5))}
.btn-light{--cors-btn-background:var(--cors-light);--cors-btn-color:var(--cors-dark)}
.btn-light:hover{--cors-btn-background:#fff;color:var(--cors-dark)}
/* btn-primary of website-2025 (button.scss), with white text: dark grey on red would not reach WCAG AA contrast */
.btn-primary{--cors-btn-background:var(--cors-primary);--cors-btn-color:var(--cors-white)}
.btn-primary:hover{--cors-btn-background:color-mix(in srgb,var(--cors-primary) 88%,var(--cors-shade));color:var(--cors-white)}
.btn-outline{--cors-btn-color:var(--cors-light);--cors-btn-border:rgba(202,208,215,.5)}
.btn-outline:hover{--cors-btn-border:var(--cors-light);color:var(--cors-white)}
.ctas{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);margin-top:clamp(24px, calc(24px + ((1vw - 9.9px) * 3.5556)), 40px)}
.c-head .ctas,.c-head__text > .btn{margin-top:var(--space-6)}

/* Pill */
/* Badge: filled label in normal case (licences, editions, versions), round like buttons and pills; the colour comes from --badge-c */
.badge{--badge-c:var(--cors-light);display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-0-5) var(--space-2-5);border-radius:var(--r-pill);
  border:var(--line-1) solid color-mix(in srgb,var(--badge-c) 35%,transparent);background:color-mix(in srgb,var(--badge-c) 14%,transparent);
  color:color-mix(in srgb,var(--badge-c) 70%,var(--cors-white));font-size:var(--fs-label);font-weight:500;line-height:1.5;white-space:nowrap;vertical-align:middle}
/* Text link: small secondary link with an arrow, inline (e.g. next to a badge); the arrow moves a little on hover */
.text-link{display:inline-flex;align-items:center;gap:var(--space-1-5);font-size:var(--fs-sm);color:var(--fg-2);text-decoration:none;transition:color var(--cors-micro) var(--cors-cubic)}
.text-link:not(:first-child){margin-left:var(--space-3)}
.text-link .icon{transition:translate var(--cors-micro) var(--cors-cubic)}
.text-link:hover{color:var(--cors-white)}
.text-link:hover .icon{translate:var(--space-1) 0}
.badges{display:inline-flex;flex-wrap:wrap;gap:var(--space-1-5);vertical-align:middle}
:is(h1,h2,h3,h4,h5,h6) .badge{margin-left:var(--space-2-5);vertical-align:middle}
.badge .icon{margin-left:calc(var(--space-1) * -1)}
/* Overlay on an image (project and blog cards): top right, dark fill keeps them readable on bright photos */
.badges--overlay{position:absolute;z-index:1;top:var(--cors-pad);left:var(--cors-pad);right:var(--cors-pad);justify-content:flex-end;pointer-events:none}
.badges--overlay .badge{background:color-mix(in srgb,var(--cors-black) var(--cors-badge-overlay),transparent)}
a.badge{text-decoration:none;transition:background-color var(--cors-micro) var(--cors-cubic),border-color var(--cors-micro) var(--cors-cubic),color var(--cors-micro) var(--cors-cubic)}
a.badge:hover{background:color-mix(in srgb,var(--badge-c) 26%,transparent);border-color:color-mix(in srgb,var(--badge-c) 60%,transparent);color:var(--cors-white)}
.badge--red{--badge-c:var(--cors-primary-hot)}
.badge--green{--badge-c:var(--cors-success)}
.badge--yellow{--badge-c:var(--cors-warning)}
.badge--violet{--badge-c:color-mix(in srgb,var(--cors-violet) 70%,var(--cors-white))}
.badge--blue{--badge-c:var(--cors-blue)}
/* ---------- 4 Layout ---------- */
/* One container width instead of Bootstrap's breakpoint steps: fluid up to 1680 px, container-sm (section heads) up to 1280 px,
   both with the same side padding. Nested in a container, container-sm drops its padding so heads end up indented on wide screens. */
:root{--cors-container-pad:calc(var(--cors-gutter) * .5)}
@media (max-width:575.98px){:root{--cors-container-pad:16px}}
.container,.container-sm{width:100%;margin-inline:auto;padding-inline:var(--cors-container-pad)}
.container{max-width:var(--cors-container-w)}
.container-sm{max-width:var(--cors-container-sm-w)}
.container .container-sm{max-width:calc(var(--cors-container-sm-w) - 2 * var(--cors-container-pad));padding-inline:0}

/* Clip horizontally on main only, as in website-2025: html and body must keep overflow visible so the scroll lock
   (body overflow:hidden) reaches the viewport and the scrollbar disappears instead of the content shifting */
main{position:relative;z-index:1;overflow-x:clip}
main > .c-section:first-child{padding-top:calc(var(--cors-topbar-h) + var(--space-8))}
.c-section{margin-top:var(--cors-section)}
.c-section--tight{margin-top:clamp(40px, calc(40px + ((1vw - 9.9px) * 8.8889)), 80px)}
.c-section--dark{margin-top:var(--cors-section);padding-block:var(--cors-section)}
.c-section--dark + .c-section--dark{margin-top:0;padding-top:0}
/* Hairline on top, content width, halfway between the previous section and this one */
/* Line across the full window width (main clips horizontally, so 100vw does not cause a scrollbar) */
.c-section--border > .container::before{content:"";display:block;margin-inline:calc(50% - 50vw);border-top:var(--line-1) solid var(--border-subtle);margin-bottom:var(--cors-section)}
/* Anchor targets land below the fixed (compact) topbar */
[id]{scroll-margin-top:var(--cors-scroll-offset)}

/* Section Head: headline, intro and button stacked, max. --cors-head-w */
.c-head{display:block;max-width:var(--cors-head-w);margin-bottom:var(--cors-head-gap)}
.c-head__title > .pre-headline{margin-bottom:var(--space-4)}
.c-head h2{margin-bottom:0}
.c-head__text{margin-top:clamp(24px, calc(24px + ((1vw - 9.9px) * 1.7778)), 32px)}

/* Lead Split (text-image-grid): label 4/12, lead 8/12 */
.c-lead-split{display:grid;gap:clamp(16px, calc(16px + ((1vw - 9.9px) * 3.5556)), 32px) var(--space-8);margin-bottom:clamp(40px, calc(40px + ((1vw - 9.9px) * 8.8889)), 80px)}
.c-lead-split:last-child{margin-bottom:0}
.c-lead-split h2.h6{margin-bottom:0}
.c-lead-split__title .pre-headline{margin-bottom:var(--space-3)}
.c-lead-split__text p:not(.lead){font-size:var(--fs-lg);line-height:1.5}
@media (min-width:992px){.c-lead-split{grid-template-columns:4fr 8fr}}

/* Rows: title 4/12, text 8/12, lines in between */
.c-rows{border-top:var(--line-1) solid var(--border)}
.c-rows__row{display:grid;gap:var(--space-2) var(--space-8);padding-block:clamp(24px, calc(24px + ((1vw - 9.9px) * 1.7778)), 32px);border-bottom:var(--line-1) solid var(--border)}
.c-rows__row h3{margin:0}
.c-rows__row p{font-size:var(--fs-lg);line-height:1.5;color:var(--fg-2)}
.c-rows__row .c-rows__more{margin-top:var(--space-3)}
.c-rows__icon{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:start}
.c-rows__icon > .icon{margin-top:var(--space-0-5);color:var(--fg)}
.c-rows--caps .c-rows__row .small-caps{margin:0;padding-top:.3em;color:var(--fg-muted)}
@media (min-width:992px){.c-rows__row{grid-template-columns:4fr 8fr}}
* + .c-rows{margin-top:clamp(40px, calc(40px + ((1vw - 9.9px) * 4.4444)), 60px)}

/* Grid (cards brick): row g-1 */
.c-grid{display:grid;gap:var(--space-8);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.c-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:992px){.c-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.c-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
* + .c-grid{margin-top:var(--space-8)}
.container-sm + .c-grid,.c-lead-split + .c-grid{margin-top:0}

/* Split */
.c-split{display:grid;gap:clamp(32px, calc(32px + ((1vw - 9.9px) * 7.1111)), 64px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:992px){
  .c-split--6-6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-split--8-4{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
  .c-split--8-4 > div:last-child{position:sticky;top:var(--space-16)}
}
.c-split--stretch{align-items:stretch}
.c-split > div > .card + .card{margin-top:var(--space-8)}

/* Text (Atoms:Text) */
.prose{font-size:var(--fs-lg);line-height:1.6}
.prose h2{font-size:var(--fs-h3);margin:clamp(40px, calc(40px + ((1vw - 9.9px) * 5.3333)), 64px) 0 clamp(16px, calc(16px + ((1vw - 9.9px) * 1.7778)), 24px)}
.prose h3{font-size:var(--fs-h4);margin:clamp(32px, calc(32px + ((1vw - 9.9px) * 3.5556)), 48px) 0 clamp(12px, calc(12px + ((1vw - 9.9px) * 0.8889)), 16px)}
.prose > :first-child{margin-top:0}
.prose li + li{margin-top:var(--space-1-5)}
.prose li::marker{color:var(--cors-primary)}

/* Topbar (Molecules:Topbar, topbar.scss) – shrinks with the scroll position, like GSAP ScrollTrigger / Motion useScroll:
   only transform and opacity are animated (compositor, no layout or repaint per frame). The bar always has the compact height;
   at the top of the page logo and links sit lower by --topbar-offset and move up while scrolling, the --bg layer fades in.
   Scroll-driven animation where supported (runs off the main thread), otherwise the headroom class with a short transition.
   No backdrop-filter (it stutters). */
.topbar{position:fixed;top:0;left:0;right:0;width:100%;z-index:99;display:flex;justify-content:space-between;align-items:center;
  --topbar-offset:0px;
  padding:var(--cors-topbar-pad-min) var(--cors-edge)}
/* Background layer: taller by the offset and moving up with logo and links, so its lower edge never cuts through them */
.topbar::before{content:"";position:absolute;inset:0 0 auto 0;height:calc(100% + var(--topbar-offset));z-index:-1;pointer-events:none;background:var(--bg);opacity:0}
@media (min-width:1180px){.topbar{--topbar-offset:calc(clamp(32px, calc(32px + ((1vw - 9.9px) * 7.1111)), 64px) - var(--cors-topbar-pad-min))}}
@media (max-width:1179.98px){.topbar{--cors-topbar-pad-min:var(--space-4)}}
.topbar :is(.topbar__logo,.topbar__contact,.topbar__cta,.topbar__burger,.mainnav__link,.mainnav__panel){translate:0 var(--topbar-offset);will-change:translate}
/* Bottom line on the background layer: fades in with it while scrolling */
.topbar::before{border-bottom:var(--line-1) solid var(--border)}
@supports (animation-timeline:scroll()){
  /* --topbar-start: set by navigation.js to --cors-topbar-start of the first block (hero) */
  .topbar::before,.topbar :is(.topbar__logo,.topbar__contact,.topbar__cta,.topbar__burger,.mainnav__link,.mainnav__panel){animation-timeline:scroll(root);animation-range:var(--topbar-start,0px) calc(var(--topbar-start,0px) + var(--cors-topbar-shrink))}
  .topbar::before{animation-name:topbar-bg;animation-timing-function:linear;animation-fill-mode:both}
  .topbar :is(.topbar__logo,.topbar__contact,.topbar__cta,.topbar__burger,.mainnav__link,.mainnav__panel){animation-name:topbar-up;animation-timing-function:linear;animation-fill-mode:both}
  @keyframes topbar-bg{from{opacity:0;translate:0 0}to{opacity:var(--cors-topbar-bg-opacity);translate:0 calc(var(--topbar-offset) * -1)}}
  @keyframes topbar-up{from{translate:0 var(--topbar-offset)}to{translate:0 0}}
}
@supports not (animation-timeline:scroll()){
  .topbar::before,.topbar :is(.topbar__logo,.topbar__contact,.topbar__cta,.topbar__burger,.mainnav__link,.mainnav__panel){transition:opacity var(--cors-micro) var(--cors-cubic),translate var(--cors-micro) var(--cors-cubic)}
  .topbar.headroom--not-top::before{opacity:var(--cors-topbar-bg-opacity);translate:0 calc(var(--topbar-offset) * -1)}
  .topbar.headroom--not-top :is(.topbar__logo,.topbar__contact,.topbar__cta,.topbar__burger,.mainnav__link,.mainnav__panel){translate:0 0}
}
.topbar__logo{flex:0 0 auto;width:var(--cors-logo-mark-w);height:var(--cors-logo-mark-h)}
.topbar__logo a{display:block;height:100%;color:var(--cors-light)}
.topbar__logo svg{display:block;width:100%;height:100%}
/* Logo animation of the 2026 website: squares assemble clockwise on load, move one grid step into the core on hover/focus */
.topbar__logo svg{overflow:visible}
.logo-mark__sq{fill:var(--cors-primary);transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.5,0,.2,1.3);transition-delay:calc(var(--i) * 25ms);animation:logo-mark-in .5s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--cors-logo-delay) + var(--i) * 55ms)}
.topbar__logo a:hover .logo-mark__sq,.topbar__logo a:focus-visible .logo-mark__sq{transform:translate(var(--dx),var(--dy))}
@keyframes logo-mark-in{from{opacity:0;transform:scale(.1) rotate(-90deg)}}
.topbar__navigation{display:flex;margin-right:clamp(-19px, calc(-10px + ((1vw - 9.9px) * -2)), -10px)}
.topbar__burger,.topbar__contact{display:flex;align-items:center;gap:var(--space-2-5);padding:var(--space-2-5) clamp(10px, calc(10px + ((1vw - 9.9px) * 2)), 19px);text-decoration:none;color:var(--fg)}
.topbar__burger:hover,.topbar__contact:hover{color:var(--cors-white)}
@media (max-width:1179.98px){.topbar__contact .topbar__label{display:none}}
/* Contact link hidden for now; the primary action in the topbar is the architecture review */
.topbar__contact{display:none}
.topbar__cta{margin-right:clamp(8px, calc(8px + ((1vw - 9.9px) * 1.7778)), 16px);white-space:nowrap}
/* Mobile: short label "Review anfragen" (below 380 px "Review"), menu without its label */
@media (max-width:379.98px){.topbar__cta-mid{display:none}}
@media (max-width:767.98px){.topbar__cta-long{display:none}.topbar__cta{margin-right:0}.topbar__burger .topbar__label{display:none}}
.topbar__burger{position:relative;z-index:1}
.topbar__burger__open line{transform-origin:right center;transition:all 1s var(--cors-cubic-end)}
.topbar__burger__open line:nth-child(2){transition-delay:.1s}
.topbar__burger__open line:nth-child(3){transition-delay:.2s}
.topbar__burger__close{position:absolute;right:clamp(10px, calc(10px + ((1vw - 9.9px) * 2)), 19px)}
.topbar__burger__close path{transform-origin:center;clip-path:inset(0 100% 0 0);transition:clip-path .2s var(--cors-cubic-end)}
:is(body[data-navigation="show"],:has(.navigation:target)) .topbar__burger__open line{transform:scaleX(0)}
:is(body[data-navigation="show"],:has(.navigation:target)) .topbar__burger__close path{clip-path:inset(0 0 0 0);transition-delay:.2s}

/* Nav Entry: sub-page with icon tile, title and short text (dropdown panel and menu overlay) */
.nav-entries{list-style:none;margin:0 calc(var(--space-4) * -1);padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
.nav-entry{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);color:var(--fg);text-decoration:none;transition:background-color var(--cors-micro) var(--cors-cubic),color var(--cors-micro) var(--cors-cubic)}
.nav-entry__icon{display:grid;place-items:center;flex:0 0 auto;width:var(--space-12);height:var(--space-12);background:var(--surface-2);transition:background-color var(--cors-micro) var(--cors-cubic)}
.nav-entry__text{display:flex;flex-direction:column;gap:var(--space-1)}
.nav-entry__text b{font-size:var(--fs-h5);font-weight:500}
.nav-entry__text small{font-size:var(--fs-small);color:var(--fg-muted)}
.nav-entry:hover,.nav-entry:focus-visible{background:var(--surface-2);color:var(--cors-white)}
.nav-entry:hover .nav-entry__icon,.nav-entry:focus-visible .nav-entry__icon{background:var(--cors-dark)}

/* Main Navigation (desktop with a mouse, from 1180 px): first level in the topbar, dropdown panel per section on hover/focus (CSS only).
   The panel opens with clip-path from the top like the old menu overlay; translate belongs to the topbar shrink animation.
   While a panel is open the page behind is dimmed and blurred (static overlay, not coupled to scrolling). */
.mainnav{display:none}
@media (min-width:1180px) and (hover:hover){
  .topbar__burger{display:none}
  .topbar__navigation{margin-right:0}
  .mainnav{display:block;position:relative;margin:0 auto 0 var(--cors-mainnav-gap)}
  .mainnav__list{display:flex;gap:var(--space-1);list-style:none;margin:0;padding:0}
  .mainnav__link{position:relative;z-index:1;display:flex;align-items:center;gap:var(--space-1-5);padding:var(--space-2-5) var(--space-4);font-size:var(--fs-ui);font-weight:500;color:var(--fg);text-decoration:none;transition:color var(--cors-micro) var(--cors-cubic)}
  .mainnav__link .icon{transition:rotate var(--cors-micro) var(--cors-cubic)}
  .mainnav__link:hover,.mainnav__item:focus-within > .mainnav__link,.mainnav__link[aria-current]{color:var(--cors-white)}
  .mainnav__item--panel:is(:hover,:focus-within) > .mainnav__link .icon{rotate:180deg}
  .mainnav__panel{position:absolute;top:100%;left:0;width:min(var(--cors-mainnav-panel-w),calc(100vw - var(--cors-edge) * 2 - var(--cors-logo-mark-w) - var(--cors-mainnav-gap)));
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-8);padding:var(--cors-pad);--surface-2:color-mix(in srgb,var(--cors-black) 94%,var(--cors-white));background:var(--cors-black);border:var(--line-1) solid var(--border-subtle);box-shadow:var(--cors-mainnav-shadow);
    visibility:hidden;clip-path:inset(0 calc(var(--cors-mainnav-shadow-room) * -1) 100%);transition:clip-path var(--cors-mainnav-time) var(--cors-cubic-end),visibility 0s linear var(--cors-mainnav-time)}
  /* Bridge from the link down to the panel, so the pointer can travel without closing it; the link stays on top and clickable */
  .mainnav__panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--cors-topbar-pad-min)}
  .mainnav__item--panel:is(:hover,:focus-within) > .mainnav__panel{visibility:visible;clip-path:inset(0 calc(var(--cors-mainnav-shadow-room) * -1) calc(var(--cors-mainnav-shadow-room) * -1));transition-delay:0s}
  /* Switching sections: the previous panel goes at once instead of rolling up behind the new one; navigation.js adds
     .mainnav--switch while the pointer stays in the navigation, so the next panel appears without the reveal */
  .mainnav__list:has(.mainnav__item--panel:is(:hover,:focus-within)) .mainnav__item--panel:not(:hover,:focus-within) > .mainnav__panel,
  .mainnav--switch .mainnav__panel{transition:none}
  .mainnav__col{display:flex;flex-direction:column;min-width:0}
  .mainnav__col .pre-headline{color:var(--fg-muted)}
  .mainnav__more{margin-top:auto;padding-top:var(--space-4);border-top:var(--line-1) solid var(--border-subtle)}
  .mainnav__more .text-link{margin-left:0}
  .mainnav__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
  .mainnav__cards .project-card .h4{font-size:var(--fs-h5);margin:0;hyphens:manual}
  .mainnav__backdrop{position:fixed;inset:0;z-index:-2;pointer-events:none;background:color-mix(in srgb,var(--cors-shade) 55%,transparent);backdrop-filter:blur(var(--cors-mainnav-blur));opacity:0;transition:opacity var(--cors-mainnav-time) var(--cors-cubic-end)}
  .mainnav:has(.mainnav__item--panel:is(:hover,:focus-within)) .mainnav__backdrop{opacity:1}
  /* Escape closes the open panel (navigation.js) until the pointer leaves the navigation or the focus moves on */
  .mainnav--dismissed .mainnav__item--panel:is(:hover,:focus-within) > .mainnav__panel{visibility:hidden;clip-path:inset(0 calc(var(--cors-mainnav-shadow-room) * -1) 100%);transition:none}
  .mainnav--dismissed .mainnav__backdrop{opacity:0}
}
/* Narrow desktops: the review button gets the short label and the links move closer, the logo keeps its size */
@media (min-width:1180px) and (max-width:1439.98px) and (hover:hover){
  .topbar__cta-long{display:none}
  .mainnav__link{padding-inline:var(--space-3)}
}

/* Menu overlay (Molecules:Navigation, navigation.scss): below 1180 px and on touch. Opens with clip-path from the top;
   sub-menus are an accordion (details/summary, works without JS). A solid bar under the topbar keeps scrolled items off the logo. */
.navigation{--nav-top:calc(var(--cors-topbar-pad-min) * 2 + var(--space-12) + var(--topbar-offset));position:fixed;left:0;top:0;width:100%;height:100vh;z-index:-1;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--cors-cubic-end);--surface-2:color-mix(in srgb,var(--cors-black) 94%,var(--cors-white));background:var(--cors-black)}
.nav-mobile-background{position:fixed;top:0;left:0;right:0;height:var(--nav-top);z-index:11;pointer-events:none;background:var(--cors-black);border-bottom:var(--line-1) solid var(--border-subtle)}
.navigation__inner{padding:calc(var(--nav-top) + var(--space-2)) var(--cors-edge) var(--space-12);opacity:0;transform:translateY(calc(var(--space-12) * -1));transition:opacity 1s var(--cors-cubic-end),transform 1s var(--cors-cubic-end)}
.navigation__list{list-style:none;margin:0;padding:0}
.navigation__list > li{border-bottom:var(--line-1) solid var(--border-subtle)}
.nav-acc__link,.nav-acc summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--space-16);font-size:var(--fs-h4);font-weight:500;color:var(--fg);text-decoration:none;cursor:pointer;transition:color var(--cors-micro) var(--cors-cubic)}
.nav-acc summary{list-style:none}
.nav-acc summary::-webkit-details-marker{display:none}
.nav-acc summary .icon{transition:rotate var(--cors-micro) var(--cors-cubic)}
.nav-acc[open] summary,.nav-acc__link:hover,.nav-acc summary:hover,.nav-acc__link[aria-current]{color:var(--cors-white)}
.nav-acc[open] summary .icon{rotate:180deg}
@media (min-width:768px){.nav-acc .nav-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-8)}}
.nav-acc__more{display:flex;align-items:center;min-height:var(--space-12);margin-bottom:var(--space-2)}
.nav-acc__more .text-link{margin-left:0}
.navigation__close{display:none;margin-top:var(--space-8);font-size:var(--fs-meta)}

/* Open: body[data-navigation] from navigation.js, :target as fallback without JS */
body[data-navigation="show"] .navigation,.navigation:target{visibility:visible;clip-path:inset(0 0 0 0)}
body[data-navigation="show"] .navigation__inner,.navigation:target .navigation__inner{opacity:1;transform:translateY(0);transition-delay:.2s}
.navigation:target .navigation__close{display:inline-block}

/* Scroll lock after the opening transition, padded by the scrollbar width so nothing jumps */
body[data-scroll="false"]{overflow:hidden;padding-right:var(--cors-scrollbar-width)}
@media (min-width:1180px){
  body[data-scroll="false"] .navigation{padding-right:var(--cors-scrollbar-width)}
  body[data-scroll="false"] .topbar{padding-right:calc(var(--cors-edge) + var(--cors-scrollbar-width))}
}

/* Social Pager (Molecules:SocialPager, social_pager.scss) – from 1180 px absolute at the bottom edge and rotated by -90° */
.social-pager{--cors-social-pager-width:var(--cors-social-pager-w);z-index:20;margin-top:var(--space-12)}
.social-pager__rotator{display:flex;align-items:center}
.social-pager a{text-decoration:none;margin-right:var(--space-3);white-space:nowrap;opacity:.8;transition:opacity .2s ease-in-out}
.social-pager a:hover{opacity:1}
.social-pager__icons{display:flex;flex-wrap:nowrap}
.social-pager__line{width:var(--cors-pager-line);height:var(--line-1);flex:1 0 auto;margin-right:var(--space-2);background:var(--cors-light);opacity:.5}
@media screen and (min-height:620px){.social-pager__line{width:var(--cors-pager-line-md)}}
@media screen and (min-height:820px){.social-pager__line{width:var(--cors-pager-line-lg)}}
.social-pager__link{font-size:var(--fs-meta);margin-right:var(--space-5)}
.social-pager .social-pager__link{margin-right:var(--space-5)}
@media (min-width:1180px){
  .social-pager{position:absolute;bottom:0;right:var(--cors-edge);width:var(--cors-social-pager-width);margin-top:0}
  .social-pager__rotator{transform-origin:calc(var(--cors-social-pager-width) / 2);transform:rotate(-90deg)}
  .social-pager .icon{transform-origin:center;transform:rotate(90deg)}
}

/* Footer (Snippet:Footer) */
.footer{padding-top:clamp(100px, calc(100px + ((1vw - 9.9px) * 14.4444)), 165px);font-size:var(--fs-ui)}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer__main{display:grid;gap:var(--space-10);text-align:center}
.footer__logo{display:inline-block;width:var(--cors-logo-mark-w);height:var(--cors-logo-mark-h);margin-bottom:var(--space-6)}
.footer__logo svg{display:block;width:100%;height:100%}
.footer__address p{margin-bottom:var(--space-4)}
.footer__cols{display:grid;gap:var(--space-8)}
.footer__cols .pre-headline{margin-bottom:var(--space-4);color:var(--fg-muted)}
.footer__cols ul{list-style:none;padding:0;margin:0}
.footer__cols li{line-height:2}
@media (min-width:768px){
  .footer__main{grid-template-columns:4fr 8fr;text-align:left}
    .footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.footer__after{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin-top:clamp(60px, calc(60px + ((1vw - 9.9px) * 8.8889)), 100px);padding-block:var(--space-8);border-top:var(--line-1) solid var(--cors-border);font-size:var(--fs-sm);color:var(--fg-muted)}
.footer__after p{margin:0}
@media (min-width:768px){.footer__after{flex-direction:row;justify-content:space-between}}

/* ---------- 5 Components ---------- */
/* Breadcrumb (Molecules:Breadcrumb) */
.breadcrumb{display:flex;flex-wrap:wrap;gap:var(--space-1-5) var(--space-2-5);margin-bottom:clamp(24px, calc(24px + ((1vw - 9.9px) * 3.5556)), 40px);font-size:var(--fs-label);letter-spacing:var(--tracking-wide);color:var(--fg-muted)}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{color:var(--cors-white);text-decoration:underline}
.breadcrumb__sep{opacity:.5}

/* Hero (Hero brick) – gradient like the WebGL gradient of website-2025, as CSS animation */
.c-hero{position:relative;z-index:1;overflow:hidden;background-color:var(--cors-black);padding-bottom:clamp(16px, calc(16px + ((1vw - 9.9px) * 7.1111)), 48px)}
/* Fade into the page: above video (1), canvas and fallback layers, below text (10), film (11) and the round CTA (12) */
.c-hero::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:linear-gradient(180deg,transparent 0%,var(--cors-black) 100%)}
/* WebGL gradient (gradient.js) as in hero.scss: blurred, with SVG noise, toned at the top; the CSS blobs below are the fallback */
.c-hero::before{content:"";position:absolute;inset:0 0 75% 0;z-index:5;pointer-events:none;mix-blend-mode:color;background:linear-gradient(180deg,var(--cors-black) 0%,transparent 100%)}
/* Larger than the hero by the blur radius: the soft, partly transparent edges of the blur lie outside and are clipped */
.c-hero__gradient{pointer-events:none;position:absolute;inset:calc(var(--cors-gradient-overscan) * -1);width:calc(100% + 2 * var(--cors-gradient-overscan));height:calc(100% + 2 * var(--cors-gradient-overscan));z-index:0;opacity:0;mix-blend-mode:soft-light;transition:opacity 1.2s var(--cors-cubic);
  --gradient-color-1:var(--cors-gradient-1);--gradient-color-2:var(--cors-gradient-2);--gradient-color-3:var(--cors-gradient-3);--gradient-color-4:var(--cors-gradient-4);filter:blur(var(--cors-gradient-blur)) url(#noise-filter)}
.c-hero__gradient.isLoaded{opacity:1}
.c-hero:has(.c-hero__gradient.isLoaded) :is(.c-hero__bg,.c-hero__grain){opacity:0;transition:opacity 1.2s var(--cors-cubic)}
.c-hero__noise{position:absolute;width:0;height:0;overflow:hidden}
.c-hero__bg{pointer-events:none;position:absolute;inset:calc(var(--space-16) * -1);z-index:0;filter:blur(var(--cors-fallback-blur));opacity:.5}
.c-hero__bg i{position:absolute;border-radius:var(--r-round)}
.c-hero__bg i:nth-child(1){width:42vw;height:42vw;max-width:var(--cors-blob-1);max-height:var(--cors-blob-1);right:4%;bottom:-18%;background:var(--cors-gradient-1);opacity:.7;animation:hero-a 22s ease-in-out infinite alternate}
.c-hero__bg i:nth-child(2){width:34vw;height:34vw;max-width:var(--cors-blob-2);max-height:var(--cors-blob-2);left:8%;top:-20%;background:var(--cors-gradient-3);opacity:.35;animation:hero-b 28s ease-in-out infinite alternate}
.c-hero__bg i:nth-child(3){width:30vw;height:30vw;max-width:var(--cors-blob-3);max-height:var(--cors-blob-3);left:38%;top:30%;background:var(--cors-gradient-5);opacity:.25;animation:hero-c 25s ease-in-out infinite alternate}
@keyframes hero-a{to{transform:translate(-30%,-15%) scale(1.15)}}
@keyframes hero-b{to{transform:translate(40%,20%) scale(.85)}}
@keyframes hero-c{to{transform:translate(-35%,25%) scale(1.2)}}
.c-hero__grain{position:absolute;inset:0;z-index:1;opacity:.22;mix-blend-mode:overlay;pointer-events:none;
  background-image:var(--cors-grain)}
.c-hero__text{position:relative;z-index:10;padding-top:calc(var(--space-8) + var(--cors-topbar-h) * .66);padding-bottom:var(--space-4)}
.c-hero__head > :is(.pre-headline,.badges){margin-bottom:clamp(32px, calc(32px + ((1vw - 9.9px) * 3.5556)), 48px)}
.c-hero__head{margin-bottom:clamp(32px, calc(32px + ((1vw - 9.9px) * 7.1111)), 64px)}
.c-hero__lead .lead{margin:0}
.c-hero__lead .ctas{margin-top:clamp(32px, calc(32px + ((1vw - 9.9px) * 3.5556)), 48px)}
/* Page hero text sits in a container-sm like every section head, so hero and first headline share one left edge */
@media (min-width:992px){.c-hero__lead{max-width:var(--cors-hero-lead-w)}}
.c-hero--full-height{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.c-hero--full-height::after{top:50%}
.c-hero--full-height .c-hero__text{padding-top:calc(var(--space-8) + var(--cors-topbar-h))}
.c-hero .display-1 span{color:var(--cors-white)}
/* Hero More – round CTA as in website-2025 (hero.scss), plus a gentle float and a hover lift */
.c-hero__more{display:none}
@media (min-width:768px){
  .c-hero__more{display:block}
  /* Above the text container and the film layer, which both span the whole hero */
  .c-hero__more a{position:absolute;z-index:12;top:62%;left:74%;width:var(--cors-more-size);height:var(--cors-more-size);display:grid;place-content:center;padding:var(--space-5);text-align:center;text-decoration:none;border-radius:var(--r-round);background:color-mix(in srgb,var(--cors-black) 10%,transparent);line-height:1.5;box-shadow:calc(var(--glow-offset) * -1) var(--glow-offset) var(--glow-blur) var(--glow-red),var(--glow-offset) calc(var(--glow-offset) * -1) var(--glow-blur) var(--glow-light);animation:rotate-shadow 18s linear infinite,more-float var(--cors-more-float-speed) ease-in-out infinite;transition:color var(--cors-micro) ease}
  /* Hover: only a slightly brighter glow, faded in on its own layer so the running animations never restart */
  .c-hero__more a::before{content:"";position:absolute;inset:0;border-radius:var(--r-round);pointer-events:none;box-shadow:var(--cors-more-hover-glow);opacity:0;transition:opacity var(--cors-micro) ease}
  .c-hero__more a:hover::before,.c-hero__more a:focus-visible::before{opacity:1}
  .c-hero__more a:focus-visible{outline:var(--line-2) solid var(--cors-primary);outline-offset:var(--space-1-5)}
  .c-hero__more .pre-headline{margin:0}
}
@media (min-width:768px) and (max-width:1179.98px){.c-hero__more a{left:auto;right:5%;top:auto;bottom:6%}}
@keyframes more-float{
  0%,100%{translate:0 0}
  25%{translate:var(--space-1) calc(var(--cors-more-float) * -.6)}
  50%{translate:0 calc(var(--cors-more-float) * -1)}
  75%{translate:calc(var(--space-1) * -1) calc(var(--cors-more-float) * -.4)}
}
}
@keyframes rotate-shadow{
  0%,100%{box-shadow:calc(var(--glow-offset) * -1) var(--glow-offset) var(--glow-blur) var(--glow-red),var(--glow-offset) calc(var(--glow-offset) * -1) var(--glow-blur) var(--glow-light)}
  25%{box-shadow:calc(var(--glow-offset) * -1) calc(var(--glow-offset) * -1) var(--glow-blur) var(--glow-red),var(--glow-offset) var(--glow-offset) var(--glow-blur) var(--glow-light)}
  50%{box-shadow:var(--glow-offset) calc(var(--glow-offset) * -1) var(--glow-blur) var(--glow-red),calc(var(--glow-offset) * -1) var(--glow-offset) var(--glow-blur) var(--glow-light)}
  75%{box-shadow:var(--glow-offset) var(--glow-offset) var(--glow-blur) var(--glow-red),calc(var(--glow-offset) * -1) calc(var(--glow-offset) * -1) var(--glow-blur) var(--glow-light)}
}
/* Social pager in the hero: right edge like in the menu, icons with a large gap to the links */
.c-hero__pager{display:none}
@media (min-width:1180px){
  .c-hero__pager{display:block;right:var(--cors-edge);bottom:var(--cors-edge)}
  .c-hero__pager .social-pager__icons{margin-right:var(--space-4)}
}
@media (min-width:1180px) and (min-height:620px){.c-hero__pager .social-pager__icons{margin-right:14vh}}
@media (min-width:1180px) and (min-height:820px){.c-hero__pager .social-pager__icons{margin-right:22vh}}

/* Hero Video – rendered loop of the platform layers (src/gen/video/); on wide screens shifted right and blended into the hero on the left */
.c-hero__video{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--cors-video-bg)}
.c-hero__video video,.c-hero__poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.c-hero__poster{display:none}
.c-hero__video::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--cors-video-shade) 82%,transparent) 0%,color-mix(in srgb,var(--cors-video-shade) 55%,transparent) 45%,color-mix(in srgb,var(--cors-video-shade) 15%,transparent) 100%)}
@media (min-width:1180px){
  .c-hero__video{left:16%;-webkit-mask-image:linear-gradient(90deg,transparent,var(--cors-shade) 22%);mask-image:linear-gradient(90deg,transparent,var(--cors-shade) 22%)}
}
@media (max-width:767.98px){.c-hero__video::after{background:color-mix(in srgb,var(--cors-video-shade) 62%,transparent)}}
@media (prefers-reduced-motion:reduce){.c-hero__video video{display:none}.c-hero__poster{display:block}}

/* Film look over the hero: grain (Gaussian noise), vignette, light leak, scan lines, flicker */
/* Fades out towards the bottom: vignette and grain must not end at the hero edge, otherwise the hero meets the page with a hard edge */
.c-hero__film{position:absolute;inset:0;z-index:11;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,var(--cors-shade) 75%,transparent);mask-image:linear-gradient(180deg,var(--cors-shade) 75%,transparent)}
.c-hero__film i{position:absolute;inset:0}
.c-hero__film .film__grain{inset:-50%;opacity:.16;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");animation:film-grain .9s steps(6) infinite}
@keyframes film-grain{0%{transform:translate(0,0)}17%{transform:translate(-7%,4%)}33%{transform:translate(5%,-6%)}50%{transform:translate(-4%,-3%)}67%{transform:translate(8%,5%)}83%{transform:translate(-6%,7%)}100%{transform:translate(3%,-8%)}}
.film__vignette{background:radial-gradient(ellipse 85% 75% at 50% 45%,transparent 55%,color-mix(in srgb,var(--cors-shade) 55%,transparent) 100%)}
/* Overscanned: the leak drifts sideways, so its edges must never enter the hero */
.c-hero__film .film__leak{inset:-10%;background:radial-gradient(45% 55% at 8% 0%,color-mix(in srgb,var(--cors-leak) 22%,transparent),transparent 70%),radial-gradient(35% 45% at 100% 100%,color-mix(in srgb,var(--cors-primary) 18%,transparent),transparent 70%);mix-blend-mode:screen;animation:film-leak 9s ease-in-out infinite alternate}
@keyframes film-leak{0%{opacity:.55;transform:translateX(0)}35%{opacity:.9}55%{opacity:.6}100%{opacity:1;transform:translateX(3%)}}
.film__lines{opacity:.5;background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--cors-white) 2.5%,transparent) 0 var(--line-1),transparent var(--line-1) var(--line-3))}
.film__flicker{background:var(--cors-shade);opacity:0;animation:film-flicker 5s steps(1) infinite}
@keyframes film-flicker{0%,100%{opacity:0}12%{opacity:.035}14%{opacity:0}46%{opacity:.025}47%{opacity:0}78%{opacity:.04}80%{opacity:0}}

/* Hero with a visual: lead a bit narrower, award line wraps earlier, hero fades into the page at the bottom */
.c-hero--visual::after{top:70%}
@media (min-width:992px){
  .c-hero--visual .c-hero__lead{width:50%}
  .c-hero--visual .c-hero__head > :is(.pre-headline,.badges){max-width:60%}
}

/* Card (Molecules:Card) – dark, glow from website-2025. Content starts at the top; the free space sits above the result line,
   or above the button when there is no result line, so result lines and buttons of a row line up at the bottom */
.card{position:relative;z-index:1;overflow:hidden;display:flex;align-items:stretch;min-height:var(--cors-card-min-h);width:100%;height:100%}
.card--dark{background-color:var(--surface)}
.card--dark::after{content:"";position:absolute;inset:0;z-index:-1;background:url(theme/card-glow.webp) no-repeat center top / 100% auto;opacity:0;transition:opacity .2s ease}
.card__container{width:100%;display:flex;flex-direction:column;padding:var(--cors-pad)}
.card__icon{margin-bottom:var(--space-4);color:var(--fg)}
.card h3{margin-bottom:clamp(16px, calc(16px + ((1vw - 9.9px) * 1.7778)), 24px)}
.card p{color:var(--fg-2)}
.card ul{margin-top:var(--space-4);padding-left:var(--space-4);color:var(--fg-2)}
.card li + li{margin-top:var(--space-1)}
.card li::marker{color:var(--cors-primary)}
.card__container > :has(+ .card__deliv){margin-bottom:var(--space-5)}
.card__deliv{margin-top:auto;padding-top:var(--space-4);border-top:var(--line-1) solid var(--border);font-size:var(--fs-sm)}
.card__deliv b{font-weight:600;color:var(--fg)}
.card__button{margin-top:var(--space-5)}
.card__container > :last-child,.card__deliv:has(+ .card__button){margin-bottom:0}
.card__container:not(:has(.card__deliv)) > :has(+ .card__button){margin-bottom:var(--space-5)}
.card__container:not(:has(.card__deliv)) > .card__button{margin-top:auto}
@media (hover:hover){
  /* Button that only appears on hover: fades in at its place, the text does not move */
  .card--has-button .card__button{opacity:0;translate:0 var(--space-4);transition:opacity var(--cors-micro) var(--cors-cubic),translate var(--cors-micro) var(--cors-cubic)}
  .card--has-button:is(:hover,:focus-within) .card__button{opacity:1;translate:0 0}
  .card--dark:not(.card--static):hover::after{opacity:.8}
}
.card--outline{background:transparent;border:var(--line-1) solid var(--border)}
.card--outline::after{display:none}
.card--static{display:block;min-height:0;height:auto}
.card .small-caps{margin-bottom:var(--space-4)}

/* Facts (Molecules:Fact) */

/* Facts List */

/* Case Stage: featured reference on a full-bleed image; the content sits in the container, inset by --cors-stage-inset */
.c-case-stage{position:relative;display:flex;width:100vw;margin-left:calc(50% - 50vw);min-height:var(--cors-stage-h);overflow:hidden;color:var(--cors-white);background:var(--cors-gradient)}
.c-case-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--cors-black) 45%,transparent) 0%,transparent 22%,transparent 38%,color-mix(in srgb,var(--cors-black) 88%,transparent) 72%,var(--cors-black) 100%)}
/* Detail page: the stage starts under the fixed topbar; a darker scrim keeps the topbar readable on bright images */
.c-case-stage--page{min-height:var(--cors-stage-page-h)}
.c-case-stage--page .c-case-stage__inner{padding-top:calc(var(--cors-topbar-h) * .6)}
.c-case-stage--page::before{content:"";position:absolute;z-index:1;inset:0 0 auto 0;height:var(--cors-cover-scrim-h);pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--cors-black) var(--cors-cover-scrim),transparent),transparent)}
.c-case-stage--page .breadcrumb{margin:0;color:var(--cors-light)}
.c-case-stage__bottom > .h6{margin:0 0 var(--space-5);color:var(--cors-white)}
.c-case-stage__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter 1s ease,transform 1.2s var(--cors-cubic)}
.c-case-stage:has(.btn:is(:hover,:focus-visible)) .c-case-stage__img{filter:none;transform:scale(1.02)}
.c-case-stage__inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-16);padding-block:var(--cors-stage-pad)}
.c-case-stage__top,.c-case-stage__bottom{padding-inline:var(--cors-stage-inset)}
.c-case-stage__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4)}
.c-case-stage__top .h6{margin:0;color:var(--cors-white)}
.c-case-stage .badge{background:linear-gradient(color-mix(in srgb,var(--badge-c) 14%,transparent),color-mix(in srgb,var(--badge-c) 14%,transparent)),color-mix(in srgb,var(--cors-black) var(--cors-badge-overlay),transparent)}
.c-case-stage__title{display:grid;gap:var(--space-6);align-items:end}
.c-case-stage__title > :first-child{margin:0;line-height:1.06;color:var(--cors-white);hyphens:manual;text-wrap:balance}
.c-case-stage__title .btn{justify-self:start}
.c-case-stage__title > :first-child:not(.display-2){font-size:var(--fs-h2)}
@media (min-width:992px){.c-case-stage__title{grid-template-columns:minmax(0,2fr) auto;gap:var(--space-8)}.c-case-stage__title > :first-child{max-width:var(--cors-feature-head-w)}}
.c-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-8);margin:0}
* + .c-stats{margin-top:clamp(32px, calc(32px + ((1vw - 9.9px) * 5.3333)), 56px)}
@media (min-width:992px){.c-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.c-stats > div{padding-top:var(--space-5);border-top:var(--line-1) solid var(--border)}
.c-case-stage .c-stats > div{border-top-color:color-mix(in srgb,var(--cors-white) 22%,transparent)}
.c-stats dd{margin:0;white-space:nowrap;font-size:var(--cors-stage-number);font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.c-stats dt{margin-top:var(--space-2-5);font-size:var(--fs-sm);color:var(--fg-2)}
/* Case Intro: lead next to the quote, aligned with the content of the stage above */
.c-case-intro{display:grid;gap:var(--space-8);margin-top:clamp(48px, calc(48px + ((1vw - 9.9px) * 5.3333)), 72px);padding-inline:var(--cors-stage-inset)}
.c-case-intro > p{margin:0;font-size:var(--fs-lg);color:var(--fg-2)}
@media (min-width:992px){.c-case-intro{grid-template-columns:repeat(12,minmax(0,1fr))}.c-case-intro > p{grid-column:1 / span 5}.c-case-intro .c-quote{grid-column:7 / span 6}.c-case-intro--solo > p{grid-column:1 / span 8}}
/* Subhead: small label separating a group inside a section */
.c-case-intro + .pre-headline{margin:clamp(96px, calc(96px + ((1vw - 9.9px) * 8.8889)), 136px) 0 var(--space-6);color:var(--fg-muted)}

/* Project Card (Molecules:Project:Card) / Project Grid brick */
.c-project-grid{display:grid;gap:clamp(48px, calc(48px + ((1vw - 9.9px) * 7.1111)), 80px) var(--space-8);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.c-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.c-project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.project-card{position:relative}
.iteration{display:block;margin-left:auto;font-size:var(--fs-number);font-weight:300;line-height:1}
.project-card__image{position:relative;aspect-ratio:421/544;overflow:hidden;margin-bottom:var(--space-5);background:var(--surface)}
.project-card__image > img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter 1s ease,transform 1s var(--cors-cubic)}
.project-card:hover .project-card__image > img{filter:grayscale(0);transform:scale(1.03)}
.project-card__logo{display:grid;place-items:center;height:100%;padding:18%;background:var(--cors-gradient);background-size:300% 300%;transition:background-size 1s ease}
.project-card:hover .project-card__logo{background-size:100% 100%}
.project-card__logo img{max-height:var(--cors-card-logo-h);width:auto;opacity:.75;transition:opacity .3s}
.project-card:hover .project-card__logo img{opacity:1}
.project-card__logo b{font-size:var(--fs-h4);font-weight:500}
.project-card .small-caps{margin-bottom:var(--space-2);color:var(--fg-muted);font-size:var(--fs-micro)}
.project-card .h4{margin:0}
.project-card .h4 a{text-decoration:none}
.project-card:hover .h4 a{color:var(--cors-white)}
.project-card__edition{display:block;margin-top:var(--space-3)}

/* Project detail (project/detail.html.twig) */

/* Case Facts ("Short Facts") */
.c-case-facts{display:grid;gap:clamp(40px, calc(40px + ((1vw - 9.9px) * 5.3333)), 64px)}
@media (min-width:768px){.c-case-facts{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}}
.c-case-facts__main > div + div{margin-top:clamp(32px, calc(32px + ((1vw - 9.9px) * 3.5556)), 48px)}
.c-case-facts__main p{font-size:var(--fs-lg);line-height:1.6;color:var(--fg-2)}
.c-case-facts__side > div{margin-bottom:var(--space-6)}
.c-case-facts__side .small-caps{margin-bottom:var(--space-2);color:var(--fg-muted)}
.c-case-facts__side p{font-size:var(--fs-sm);line-height:1.6}

/* Browser Frame (common/browserframe) */
.browser{margin:0}
.browserframe{display:flex;align-items:center;gap:clamp(var(--space-1),1vw,var(--space-4));padding:var(--space-2);border-radius:var(--r-lg) var(--r-lg) 0 0;background-color:var(--cors-frame-bar)}
.browserframe svg{width:var(--cors-icon-md);height:var(--cors-icon-md);color:var(--cors-frame-field);flex:0 0 auto}
.browserframe__chevrons{display:flex}
.addressbar{flex:1 1 auto;height:var(--cors-icon-md);border-radius:var(--r-pill);background-color:var(--cors-frame-field);font-size:var(--fs-xs);line-height:var(--cors-icon-md);padding-inline:var(--space-3);color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pseudo-button{width:var(--cors-icon-md);height:var(--cors-icon-md);border-radius:var(--r-pill);background-color:var(--cors-frame-field);flex:0 0 auto}
.browser > img{display:block;width:100%;height:auto;border-radius:0 0 var(--r-lg) var(--r-lg)}
@media (max-width:575.98px){.browserframe__chevrons,.pseudo-button{display:none}}

/* Project Gallery */
.project-gallery{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-8)}
@media (min-width:992px){.project-gallery.n3{grid-template-columns:repeat(3,1fr)}.project-gallery.n4{grid-template-columns:repeat(4,1fr)}.project-gallery.n5{grid-template-columns:repeat(5,1fr)}}
.project-gallery figure{margin:0;overflow:hidden}
.project-gallery img{display:block;width:100%;height:auto;transition:transform 1s var(--cors-cubic)}
.project-gallery figure:hover img{transform:scale(1.03)}

/* Logos (Logos brick) */
.c-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:center;gap:var(--cors-logo-gap)}
.c-logos__logo{text-align:center}
.c-logos__logo img{max-width:100%;width:var(--cors-logo-w-sm);max-height:100%;height:auto;object-fit:contain;object-position:center;opacity:var(--cors-logo-opacity)}
@media (min-width:1180px){.c-logos{display:flex;flex-flow:row wrap}.c-logos__logo img{width:var(--cors-logo-w);height:var(--cors-logo-h)}}
* + .c-logos{margin-top:clamp(48px, calc(48px + ((1vw - 9.9px) * 7.1111)), 80px)}

/* Inline Links */
.c-inline-links{margin-top:var(--space-8);font-size:var(--fs-lg)}
.c-inline-links .pre-headline{display:inline;margin:0 var(--space-3) 0 0;color:var(--fg-muted)}
* + .c-inline-links + .c-inline-links{margin-top:var(--space-3)}
.c-inline-links--badges{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.c-inline-links--badges .pre-headline{margin-right:var(--space-1)}
.c-inline-links--stacked{display:block;text-align:center}
.c-inline-links--stacked .pre-headline{display:block;margin:0 0 var(--space-3)}
.c-inline-links--stacked > p:last-child{margin:0}
.c-inline-links--stacked.c-inline-links--badges > p:last-child{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}
.c-inline-links--stacked:first-child{margin-top:var(--cors-head-gap)}
.c-inline-links--stacked + .c-inline-links--stacked{margin-top:var(--space-8)}
.c-inline-links--stacked ~ .ctas{justify-content:center}

/* Quote (Molecules:Quote) */
.c-quote{margin:0}
.c-quote .quote{font-style:normal;font-weight:600;font-size:var(--fs-h3);line-height:1.3;color:var(--cors-white)}
.c-quote footer{margin-top:var(--space-6)}
.c-quote footer .pre-headline{margin:0 0 var(--space-1)}
.c-quote footer span:not(.pre-headline){font-size:var(--fs-sm);color:var(--fg-muted)}
/* A quote on its own in a section stands in the middle 8 of 12 columns */
@media (min-width:992px){.c-section > .container > .c-quote{width:66.667%;margin-left:16.667%}}

/* Checklist */
.c-checks{display:grid;gap:0 var(--space-8);grid-template-columns:minmax(0,1fr);border-top:var(--line-1) solid var(--border)}
@media (min-width:768px){.c-checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.c-checks__item{display:flex;gap:var(--space-4);align-items:flex-start;padding-block:var(--space-5);border-bottom:var(--line-1) solid var(--border)}
.c-checks__item > .icon{width:var(--cors-check-size);height:var(--cors-check-size);padding:var(--space-1-5);background:var(--cors-primary);color:var(--cors-white);--cors-stroke:2}
.c-checks__item b{font-weight:500;font-size:var(--fs-h5)}
.c-checks__item small{display:block;margin-top:var(--space-1);font-size:var(--fs-sm);color:var(--fg-muted)}
.c-checks__item .pre-headline{display:inline-block;margin:0 0 0 var(--space-2);padding:var(--space-0-5) var(--space-2-5);border:var(--line-1) dashed var(--border-strong);border-radius:var(--r-pill);font-size:var(--fs-micro)}
.c-checks__item.is-planned > .icon{background:transparent;border:var(--line-1) dashed var(--border-strong);color:var(--fg-muted)}

/* Steps */
.c-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-8);grid-template-columns:repeat(auto-fit,minmax(var(--cors-step-min-w),1fr))}
.c-steps li{display:flex;flex-direction:column;padding-top:var(--space-5);border-top:var(--line-1) solid var(--border-strong)}
.c-steps .iteration{margin:0 0 clamp(24px, calc(24px + ((1vw - 9.9px) * 3.5556)), 40px);color:var(--fg-muted)}
.c-steps h3{margin-bottom:var(--space-4)}
.c-steps p{color:var(--fg-2)}
.c-steps__out{margin-top:auto;padding-top:var(--space-4);font-size:var(--fs-sm)}
.c-steps__out .small-caps{display:block;margin-bottom:var(--space-1);color:var(--fg-muted);font-size:var(--fs-micro)}

/* Table */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl table{width:100%;border-collapse:collapse;font-size:var(--fs-lg);line-height:1.45}
.tbl th,.tbl td{padding:var(--space-4) var(--space-5) var(--space-4) 0;text-align:left;vertical-align:top;border-bottom:var(--line-1) solid var(--border)}
.tbl thead th{font-size:var(--fs-label);font-weight:400;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-muted);border-bottom-color:var(--border-strong);vertical-align:bottom}
.tbl thead th small{display:block;margin-top:var(--space-1);font-size:var(--fs-xs);letter-spacing:var(--tracking-wide);text-transform:none}
.tbl tbody th{font-weight:500;color:var(--fg)}
.tbl td{color:var(--fg-2)}
.tbl .hi{background:var(--surface);padding-inline:var(--space-5)}
.tbl thead .hi{border-top:var(--line-3) solid var(--cors-primary);color:var(--fg)}
.tbl .grp th{padding-top:var(--space-8);font-size:var(--fs-label);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg)}
.tbl.compare td,.tbl.compare thead th:not(:first-child){text-align:center;padding-inline:var(--space-3)}
.tbl .ck svg{width:var(--cors-icon-sm);height:var(--cors-icon-sm);fill:none;stroke:var(--cors-success);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tbl .no{color:var(--fg-muted)}
.tbl .sr{position:absolute;width:var(--line-1);height:var(--line-1);overflow:hidden;clip:rect(0,0,0,0)}
.tbl .tx{font-size:var(--fs-sm)}
@media (max-width:767.98px){
  .tbl table{font-size:var(--fs-small)}
  .tbl.compare{overflow:visible}
  .tbl.compare th,.tbl.compare td{padding:var(--space-2-5) var(--space-1)}
  .tbl.compare thead th{letter-spacing:var(--tracking-wide);font-size:var(--fs-micro)}
  .tbl .m-hide{display:none}
}

/* Photo (Image brick) */
.c-photo{margin:0}
.c-photo img{display:block;width:100%;height:auto}
.c-photo figcaption{margin-top:var(--space-3);font-size:var(--fs-sm);color:var(--fg-muted)}
.c-photo--wide{margin-bottom:var(--space-8)}
/* Black and white, colour on hover (like project cards and team photos) */
.c-photo--bw{overflow:hidden}
.c-photo--bw img{filter:grayscale(1);transition:filter 1s ease}
.c-photo--bw:hover img{filter:none}

/* Accordion (FAQ) */
.accordion{border-top:var(--line-1) solid var(--border)}
.accordion details{border-bottom:var(--line-1) solid var(--border)}
.accordion summary{position:relative;display:block;list-style:none;cursor:pointer;padding:var(--space-6) var(--space-12) var(--space-6) 0;font-size:var(--fs-h5);font-weight:500;line-height:1.35}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::before,.accordion summary::after{content:"";position:absolute;right:var(--space-1-5);top:50%;width:var(--cors-check-input);height:var(--line-1-5);background:var(--cors-light);transition:transform .3s var(--cors-cubic)}
.accordion summary::after{transform:rotate(90deg)}
.accordion details[open] summary::after{transform:rotate(0)}
.accordion summary:hover{color:var(--cors-white)}
.accordion details p{padding:0 var(--space-12) var(--space-6) 0;font-size:var(--fs-lg);line-height:1.6;color:var(--fg-2)}
@media (min-width:992px){.accordion{width:83.333%;margin-inline:auto}}

/* Team Card (Molecules:TeamCard) */
.c-team{display:grid;gap:clamp(32px, calc(32px + ((1vw - 9.9px) * 3.5556)), 48px) var(--space-8);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.c-team{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.c-team{grid-template-columns:repeat(4,minmax(0,1fr))}}
.team-card__img{aspect-ratio:3/4;overflow:hidden;margin-bottom:var(--space-4);background:var(--surface)}
.team-card__img img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(100%);transition:filter .7s ease-in-out}
.team-card:hover .team-card__img img{filter:none}
.team-card__initials{display:grid;place-items:center;height:100%;font-size:var(--fs-h2);font-weight:300;background:var(--cors-gradient)}
.team-card h3{margin-bottom:var(--space-1)}
.team-card .small-caps{font-size:var(--fs-micro);color:var(--fg-muted)}

/* Contact Meta (Molecules:ContactMeta) – closing, CTA, post author */
.contact-meta{position:relative;z-index:1;overflow:hidden;display:grid;gap:clamp(32px, calc(32px + ((1vw - 9.9px) * 7.1111)), 64px);align-items:center;padding:clamp(32px, calc(32px + ((1vw - 9.9px) * 7.1111)), 64px);background:var(--surface)}
.contact-meta::after{content:"";position:absolute;inset:0;z-index:-1;background:url(theme/card-glow.webp) no-repeat center top / 100% auto;opacity:.35}
@media (min-width:992px){.contact-meta{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.contact-meta__person{text-align:center}
.contact-meta__img{width:min(var(--cors-avatar-lg),60%);aspect-ratio:3/4;margin:0 auto var(--space-4);overflow:hidden;background:var(--cors-black)}
.contact-meta__img img{display:block;width:100%;height:100%;object-fit:cover}
.contact-meta__person .h4{margin-bottom:var(--space-1)}
.contact-meta :is(.contact-meta__person,.contact-meta__body) .small-caps{font-size:var(--fs-micro);color:var(--fg-muted)}
.contact-meta--author .contact-meta__body .h4{margin:var(--space-2) 0 var(--space-1)}
.contact-meta__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-5);margin-top:var(--space-4);font-size:var(--fs-sm)}
.contact-meta__links :is(a,span){display:inline-flex;align-items:center;gap:var(--space-1-5);text-decoration:none}
.contact-meta__links a:hover{text-decoration:underline}
.contact-meta__body h2{margin-bottom:clamp(16px, calc(16px + ((1vw - 9.9px) * 1.7778)), 24px)}
.contact-meta__body > p{font-size:var(--fs-lg);line-height:1.5;color:var(--fg-2)}
.contact-meta__list{list-style:none;padding:0;margin:var(--space-6) 0 0}
.contact-meta__list li{display:flex;gap:var(--space-2-5);align-items:center;padding-block:var(--space-1-5);font-size:var(--fs-sm)}
.contact-meta__list .icon{color:var(--cors-primary)}
.contact-meta__paths{display:grid;gap:var(--space-8);margin-top:var(--space-8)}
@media (min-width:768px){.contact-meta__paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
.contact-meta__paths > div{display:flex;flex-direction:column;align-items:flex-start;padding-top:var(--space-5);border-top:var(--line-1) solid var(--border-strong)}
/* Rule: texts inside a contact meta (list items, entry descriptions) are text-sm */
.contact-meta__paths p{flex:1;font-size:var(--fs-sm);color:var(--fg-2)}
/* Band: surface and glow across the full window width, the content stays in the container */
@media (min-width:992px){.contact-meta--band{grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-16)}.contact-meta--band .contact-meta__img{width:var(--cors-avatar-lg)}}
.contact-meta--band{overflow:visible;padding-inline:0;padding-block:var(--cors-section);background:none}
.contact-meta--band::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-2;background:var(--surface)}
.contact-meta--band::after{inset:0 calc(50% - 50vw);background-size:cover}
/* Contact section: form instead of the text; fields on the canvas colour so they stand out from the band */
.contact-meta--form{align-items:start}
.contact-meta--form .c-form{margin-top:var(--space-8)}
.contact-meta--form .c-form :is(input,select,textarea){background:var(--cors-black)}
/* Violet band for Pimcore topics: light text on violet, no red glow */
.contact-meta--violet{--fg:var(--cors-white);--fg-2:color-mix(in srgb,var(--cors-white) 85%,transparent);--fg-muted:color-mix(in srgb,var(--cors-white) 70%,transparent);--border:color-mix(in srgb,var(--cors-white) 25%,transparent);--border-strong:color-mix(in srgb,var(--cors-white) 40%,transparent);color:var(--fg)}
.contact-meta--violet::before{background:radial-gradient(circle at 85% 15%,color-mix(in srgb,color-mix(in srgb,var(--cors-violet) 55%,var(--cors-white)) 45%,transparent),transparent 55%),linear-gradient(135deg,var(--cors-violet) 0%,color-mix(in srgb,var(--cors-violet) 30%,var(--cors-shade)) 100%)}
.contact-meta--violet::after{background:var(--cors-grain);opacity:.22;mix-blend-mode:overlay}
.contact-meta--violet .contact-meta__list .icon{color:var(--cors-white)}
.contact-meta--author{max-width:var(--cors-reading-w);margin-inline:auto;grid-template-columns:auto;margin-top:clamp(48px, calc(48px + ((1vw - 9.9px) * 7.1111)), 80px)}
@media (min-width:768px){.contact-meta--author{grid-template-columns:var(--cors-avatar-md) 1fr}}
.contact-meta--author .contact-meta__img{width:var(--cors-avatar-md);margin:0}
.contact-meta--author .contact-meta__links{justify-content:flex-start}

/* Jobs (Jobs brick) */
/* Job: a line between hairlines like rows and the FAQ, no surface */
.c-job{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-3) var(--space-8);padding-block:var(--space-8);border-bottom:var(--line-1) solid var(--border)}
:not(.c-job) + .c-job{border-top:var(--line-1) solid var(--border)}
.c-job h3{transition:color var(--cors-micro) var(--cors-cubic)}
.c-job:hover h3{color:var(--cors-white)}
.c-job h3{margin:0;flex:1 1 var(--cors-job-title-w)}
.c-job .pre-headline{margin:0}
.c-job > .icon{transition:transform .2s var(--cors-cubic)}
.c-job:hover > .icon{transform:translateX(var(--space-1))}

/* Form (Form brick) */
.c-form{display:grid;gap:var(--space-5)}
.c-form__row{display:grid;gap:var(--space-5)}
@media (min-width:576px){.c-form__row{grid-template-columns:1fr 1fr}}
.c-form label{display:grid;gap:var(--space-1-5);font-size:var(--fs-label);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-muted)}
.c-form input,.c-form select,.c-form textarea{width:100%;padding:var(--space-3) var(--space-4);font:inherit;font-size:var(--fs-ui);letter-spacing:0;text-transform:none;color:var(--fg);background:var(--surface);border:var(--line-1) solid var(--border);border-radius:0;transition:border-color .2s,box-shadow .2s}
.c-form input:focus,.c-form select:focus,.c-form textarea:focus{outline:none;border-color:var(--cors-light);box-shadow:var(--cors-focus-glow)}
.c-form .c-form__check{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--fs-sm);letter-spacing:0;text-transform:none;color:var(--fg-2)}
.c-form__check input{width:var(--cors-check-input);height:var(--cors-check-input);margin-top:var(--space-0-5);flex:0 0 auto;accent-color:var(--cors-primary)}
.c-form .btn{justify-self:start}

/* Blog (Blog brick, Molecules:Blog:Card, blog detail) */
.c-blog{display:grid;gap:clamp(48px, calc(48px + ((1vw - 9.9px) * 3.5556)), 64px) var(--space-8);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.c-blog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.c-blog{grid-template-columns:repeat(3,minmax(0,1fr))}}
.blog-card{position:relative}
.blog-card__img{position:relative;aspect-ratio:16/9;overflow:hidden;margin-bottom:var(--space-8);background:var(--cors-gradient)}
.blog-card__img img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter 1s ease,transform 1s var(--cors-cubic)}
.blog-card:hover .blog-card__img img{filter:none;transform:scale(1.03)}
.blog-card h3{margin-bottom:var(--space-3)}
.blog-card h3 a{text-decoration:none}
.blog-card:hover h3 a{color:var(--cors-white)}
.blog-card > p:not(.text-sm){color:var(--fg-2)}
.blog-card .text-sm{color:var(--fg-muted)}
@media (min-width:768px){.blog-detail__head{width:66.667%;margin-left:16.667%}}
.blog-detail .lead{margin-bottom:0}
.blog-detail__head > .badges{margin-bottom:var(--space-4)}
.post-meta{display:flex;align-items:center;gap:var(--space-6);margin-top:clamp(32px, calc(32px + ((1vw - 9.9px) * 3.5556)), 48px)}
.post-meta__img{flex:none;width:var(--cors-avatar-sm);aspect-ratio:3/4;overflow:hidden;display:grid;place-items:center;background:var(--surface);font-weight:700}
.post-meta__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.post-meta .h5{display:block;margin-bottom:var(--space-1-5)}
.post-meta .text-sm{display:block;color:var(--fg-muted)}
.article{max-width:var(--cors-reading-w);margin-inline:auto}
.article a{overflow-wrap:anywhere}
.article :not(pre) > code{font:400 .88em var(--font-mono);background:var(--surface);padding:var(--line-1) var(--space-1-5);color:var(--fg-strong);overflow-wrap:anywhere}
.article blockquote{margin:var(--space-10) 0;padding-left:var(--space-6);border-left:var(--line-2) solid var(--cors-primary)}
.article blockquote p{font-size:clamp(22px, calc(22px + ((1vw - 9.9px) * 1.3333)), 28px);font-style:italic;line-height:1.45;color:var(--fg)}
.post-fig{margin:var(--space-8) 0}
.post-fig img{display:block;width:auto;max-width:100%;height:auto;margin-inline:auto;border-radius:var(--r-lg)}
.post-fig figcaption{margin-top:var(--space-2-5);font-size:var(--fs-sm);color:var(--fg-muted);text-align:center}
.post-fig--cover{max-width:none;margin:0 0 clamp(48px, calc(48px + ((1vw - 9.9px) * 10.6667)), 96px)}
.post-fig--cover img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0}

/* Code (Atoms:Code) – highlight.js a11y-dark */
.code{margin:var(--space-6) 0;max-width:100%;min-width:0;background:var(--code-bg);border-radius:var(--r-lg);overflow:hidden}
.code-lang{display:block;padding:var(--space-2) var(--space-4);border-bottom:var(--line-1) solid color-mix(in srgb,var(--cors-white) 8%,transparent);font-size:var(--fs-xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-2)}
.code pre{margin:0;padding:1em;overflow:auto;max-height:var(--cors-code-max-h);font:400 var(--fs-label)/1.6 var(--font-mono);color:var(--code-fg);tab-size:4;scrollbar-color:var(--fg-muted) transparent}
/* In an article code blocks and images are wider than the text column, centred on it, never wider than the window minus its edges */
.article :is(.code,.post-fig){--code-w:min(var(--cors-code-w),100vw - var(--cors-container-pad) * 2);width:var(--code-w);max-width:none;margin-inline:calc((100% - var(--code-w)) / 2)}
.hl-k{color:var(--code-keyword)}.hl-s{color:var(--code-string)}.hl-c{color:var(--code-comment)}
.hl-n{color:var(--code-number)}.hl-v{color:var(--code-variable)}.hl-f{color:var(--code-function)}.hl-p{color:var(--code-property)}.hl-t{color:var(--code-tag)}

/* Pager */
.c-pager{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-4);align-items:center;padding-block:var(--space-6);border-block:var(--line-1) solid var(--border)}
.c-pager .text-link{margin:0}
.c-pager a:last-child{justify-self:end;text-align:right}
.text-link--back:hover .icon{translate:calc(var(--space-1) * -1) 0}
.c-pager__overview:hover .icon{translate:none}
@media (max-width:575.98px){.c-pager{grid-template-columns:1fr 1fr}.c-pager__overview{grid-column:1 / -1;grid-row:2;justify-self:center}}

/* Legal Embed (DataReporter WebCare) */
.legal-embed{max-width:var(--cors-reading-w)}
.legal-embed h1,.legal-embed h2,.legal-embed h3{font-size:var(--fs-h4);margin:var(--space-8) 0 var(--space-4)}

/* Taken over from the 2026 design, re-tokenised: MCP tool panel, example flow, principle, tech stack, map card */
/* Werkzeug-Übersicht (MCP) */
.tool-panel{margin:var(--space-12) 0 0;padding:var(--space-8);border:var(--line-1) solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.tool-panel figcaption{margin-bottom:var(--space-6)}
.tool-panel h3{margin-top:var(--space-2);font-size:var(--fs-h5)}
.tool-panel h4{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--tracking-wide);color:var(--fg-muted);margin:var(--space-4) 0 var(--space-2)}
.tool-panel h4:first-child{margin-top:0}
.tp-chain{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--surface-2);margin-bottom:var(--space-6)}
.tp-node{display:flex;flex-direction:column;padding:var(--space-2) var(--space-4);background:var(--surface);border:var(--line-1) solid var(--border-strong);}
.tp-node small{font-size:var(--fs-xs);color:var(--fg-muted)}
.tp-arrow{color:var(--fg-muted);font-weight:700}
.tp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8)}
.tp-chips{display:flex;flex-wrap:wrap;gap:var(--space-1-5)}
.tp-dialog{display:flex;flex-direction:column;gap:var(--space-1-5);margin-bottom:var(--space-4)}
.tp-msg{padding:var(--space-2) var(--space-3);font-size:var(--fs-small);background:var(--surface-2)}
.tp-msg span{display:block;font:600 var(--fs-micro) var(--font-sans);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--fg-muted);margin-bottom:var(--space-0-5)}
.tp-msg.tp-user{background:var(--fg);color:var(--bg)}
.tp-msg.tp-user span{color:var(--bg);opacity:.7}
.tp-msg.tp-tool{font-family:var(--font-mono);font-size:var(--fs-label);border:var(--line-1) dashed var(--border-strong);background:transparent}
.tp-limits{list-style:none;display:grid;gap:var(--space-2)}
.tp-limits li{position:relative;padding-left:var(--space-5);font-size:var(--fs-small);color:var(--fg-2)}
.tp-limits li::before{content:"";position:absolute;left:var(--space-0-5);top:.55em;width:var(--cors-dot);height:var(--cors-dot);border:var(--line-2) solid var(--accent);border-radius:var(--r-sm)}
@media (max-width:820px){.tool-panel{padding:var(--space-4)}.tp-grid{grid-template-columns:1fr;gap:var(--space-6)}.tp-chain{flex-direction:column;align-items:stretch}.tp-arrow{transform:rotate(90deg);align-self:center}}

/* Beispiel-Ablauf (schematisch) */
.example-flow{margin:var(--space-12) 0 0;padding:var(--space-8);border:var(--line-1) dashed var(--border-strong);border-radius:var(--r-lg);background:var(--surface)}
.example-flow figcaption{margin-bottom:var(--space-6)}
.example-flow h3{margin-top:var(--space-2);font-size:var(--fs-h5)}
.example-flow ol{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3);counter-reset:none}
.example-flow li{position:relative;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);background:var(--surface-2);}
.example-flow li + li::before{content:"→";position:absolute;left:calc(var(--space-3) * -1);top:var(--space-5);color:var(--fg-muted);font-weight:700}
.ef-n{display:grid;place-items:center;width:var(--cors-icon-md);height:var(--cors-icon-md);border-radius:var(--r-round);background:var(--fg);color:var(--bg);font-size:var(--fs-label);font-weight:700}
.example-flow li b{font-size:var(--fs-small)}
.ef-vis{min-height:var(--cors-flow-visual-h);display:flex;align-items:center}
.example-flow li p{font-size:var(--fs-small);color:var(--fg-muted);line-height:1.45}
/* Principle – Leitsatz-Box */
.principle{margin-top:var(--space-5);display:flex;gap:var(--space-4);align-items:center;border:var(--line-1) solid var(--dg-hairline);padding:var(--space-4) var(--space-5);color:var(--fg-strong);font-weight:500;font-size:var(--fs-ui);background:color-mix(in srgb,var(--cors-white) 6%,transparent)}
.principle p{margin:0}
.principle span{font:600 var(--fs-micro) var(--font-sans);letter-spacing:var(--tracking-caps);color:var(--fg-2);white-space:nowrap}
@media (max-width:820px){.principle{flex-direction:column;align-items:flex-start}}

/* Tech Stack */
.stack-board{display:grid;gap:var(--space-10)}
.stack-group h3{font:600 var(--fs-xs) var(--font-sans);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--dg-label);margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-2-5)}
.stack-group h3::before{content:"";width:var(--cors-dot);height:var(--cors-dot);background:var(--accent)}
.stack-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.tech{position:relative;display:grid;grid-template-columns:var(--cors-tech-icon) 1fr;column-gap:var(--space-3);align-items:center;background:var(--surface);border:var(--line-1) solid var(--border);padding:var(--space-4);overflow:hidden;transition:border-color var(--cors-quick),translate var(--cors-quick)}
.tech::after{content:"";position:absolute;inset:auto 0 0 0;height:var(--line-2);background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.tech:hover{border-color:var(--border-strong);translate:0 calc(var(--space-0-5) * -1)}
.tech:hover::after{transform:scaleX(1)}
.tech .ico{grid-row:span 2;width:var(--cors-tech-icon);height:var(--cors-tech-icon);display:grid;place-items:center;border-radius:var(--r-xl);background:var(--bg);border:var(--line-1) solid var(--border)}
.tech .ico svg{width:var(--cors-icon-md);height:var(--cors-icon-md);fill:var(--dg-icon);transition:fill var(--cors-quick)}
.tech .ico svg.wide{width:var(--cors-tech-logo-wide);height:var(--cors-tech-logo-wide)}
.tech .ico img{width:var(--cors-tech-logo);height:var(--cors-tech-logo);object-fit:contain;filter:grayscale(1) brightness(1.6);transition:filter var(--cors-quick)}
.tech:hover .ico svg{fill:var(--brand)}
.tech:hover .ico img{filter:none}
.tech .nm{font-weight:700;font-size:var(--fs-ui);min-width:0}
.tech .sb{font:400 var(--fs-xs) var(--font-sans);color:var(--dg-label);min-width:0}
.stack-credit{margin-top:var(--space-6);font:400 var(--fs-micro) var(--font-sans);color:var(--fg-muted)}
@media (max-width:1000px){.stack-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stack-tiles{grid-template-columns:1fr}}

/* Map Card – gestylte Standortkarte */
.map-card{display:flex;flex-direction:column;height:100%;margin:0}
.map-card__map{position:relative;flex:1 1 auto;overflow:hidden;border:var(--line-1) solid var(--dg-night-line);background:var(--dg-night)}
.map-card__canvas{position:relative}
.map-card__map img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover}
.map-card__map::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(calc(var(--cors-map-pin) * 19) calc(var(--cors-map-pin) * 12) at 50% 50%,color-mix(in srgb,var(--cors-primary) 22%,transparent),transparent 70%),linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--cors-video-shade) 92%,transparent))}
.map-pin{position:absolute;left:50%;top:50%;width:var(--cors-map-pin);height:var(--cors-map-pin);translate:-50% -50%;z-index:2}
.map-pin i{position:absolute;inset:0;background:var(--cors-primary-hot);rotate:45deg;box-shadow:0 0 0 var(--space-1-5) color-mix(in srgb,var(--cors-primary-hot) 25%,transparent),0 0 var(--space-8) color-mix(in srgb,var(--cors-primary-hot) 80%,transparent)}
.map-pin::before,.map-pin::after{content:"";position:absolute;inset:calc(var(--space-3) * -1);border:var(--line-2) solid var(--cors-primary-hot);border-radius:var(--r-round);animation:mappulse 2.4s ease-out infinite}
.map-pin::after{animation-delay:1.2s}
@keyframes mappulse{0%{opacity:.9;scale:.4}100%{opacity:0;scale:2.2}}
.map-card__info{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-6);color:var(--cors-white)}
.map-card__info b{display:block;font-size:var(--fs-h5)}
.map-card__info p span{color:var(--dg-muted);font-size:var(--fs-small)}
.map-card > figcaption{margin-top:var(--space-3);font-size:var(--fs-sm);color:var(--fg-muted)}
@media (max-width:700px){.map-card__map img{aspect-ratio:4/3}.map-card__info{position:relative}}
@media (min-width:992px){.c-split--stretch .map-card__canvas{position:absolute;inset:0}.c-split--stretch .map-card__map img{height:100%;aspect-ratio:auto}}


/* ---------- 5b Entrance micro animations ----------
   CSS only; the page is complete without them (no JS, nothing hidden at rest once played) and they are off for reduced motion.
   Hero text rises a few pixels and fades in, staggered; images fade in from below as they enter the viewport (see below). */
@keyframes cors-rise{from{opacity:0;translate:0 var(--cors-enter-shift)}}
@keyframes cors-fade{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  :is(.c-hero__head,.c-hero__lead,.blog-detail__head) > *,.c-case-stage__top,.c-case-stage__bottom > *{animation:cors-rise var(--cors-enter-time) var(--cors-cubic) backwards}
  .c-hero__head > :nth-child(2){animation-delay:var(--cors-enter-step)}
  .c-hero__head > :nth-child(3){animation-delay:calc(var(--cors-enter-step) * 2)}
  .c-hero__lead > :nth-child(1),.c-case-stage__bottom > :nth-child(2){animation-delay:calc(var(--cors-enter-step) * 3)}
  .c-hero__lead > :nth-child(2),.c-case-stage__bottom > :nth-child(3){animation-delay:calc(var(--cors-enter-step) * 4)}
  .blog-detail__head > :nth-child(n+2){animation-delay:calc(var(--cors-enter-step) * 2)}
  .c-case-stage__img{animation:cors-fade calc(var(--cors-enter-time) * 1.5) ease backwards}
}

/* Images fade in from below once they enter the viewport: a time-based transition. navigation.js sets .js-enter on <html>
   (not for reduced motion) and .is-in on each element when it becomes visible; without JS everything is shown at once. */
.js-enter :is(.project-card__image,.blog-card__img,.team-card__img,.c-photo,.browser,.project-gallery figure,.c-case-intro).is-in{transition:opacity var(--cors-enter-time) var(--cors-cubic),translate var(--cors-enter-time) var(--cors-cubic)}
.js-enter :is(.project-card__image,.blog-card__img,.team-card__img,.c-photo,.browser,.project-gallery figure,.c-case-intro):not(.is-in){opacity:0;translate:0 var(--cors-enter-shift-img)}

/* ---------- 6 Diagramme ---------- */
/* Diagrams sit directly on the section (no panel, border or radius), like the Data Spine on the home page */
.diagram{overflow-x:auto;-webkit-overflow-scrolling:touch}
.diagram svg{display:block;width:100%;height:auto;min-width:var(--dg-min-w)}
.diagram .nb rect{fill:var(--dg-node);stroke:var(--dg-node-line);stroke-width:1.2}
.diagram .t{font:700 var(--dg-fs-title) var(--font-sans);fill:var(--dg-text)}
.diagram .s{font:400 var(--dg-fs-sub) var(--font-sans);fill:var(--dg-label)}
/* Diagram text sizes and accents as classes (no inline styles); --d is the per-element animation delay set as data */
.diagram .fs-xs{font-size:var(--dg-fs-xs)}.diagram .fs-s{font-size:var(--dg-fs-s)}.diagram .fs-m{font-size:var(--dg-fs-m)}.diagram .fs-l{font-size:var(--dg-fs-l)}
.diagram .amber{fill:var(--dg-amber)}
.diagram .big{font:800 var(--dg-fs-big) var(--font-sans);fill:var(--cors-white);letter-spacing:-.02em}
.diagram .cap{font:500 var(--fs-micro) var(--font-sans);fill:var(--dg-caption);letter-spacing:var(--tracking-caps)}
.diagram .cap2{font:700 var(--fs-micro) var(--font-sans);fill:var(--cors-primary-hot);letter-spacing:var(--tracking-caps)}
.diagram .ln{fill:none;stroke:var(--dg-line);stroke-width:1.5}
.diagram .ln.thin{stroke-width:1.1}
.diagram .ln.red{stroke:var(--cors-primary);stroke-width:2;stroke-dasharray:6 6}
.diagram .out rect,.diagram .svc rect{fill:var(--dg-node-2)}
.diagram .data rect{fill:var(--dg-node-2);stroke:var(--dg-line-strong)}
.diagram .argo rect{stroke:var(--cors-primary-hot)}

/* Hub-Diagramm (Data Spine) */
.diagram .hub .halo{fill:color-mix(in srgb,var(--cors-primary-hot) 7%,transparent);transform-box:fill-box;transform-origin:center}
.diagram .hub .disc{fill:var(--dg-node);stroke:var(--dg-line);stroke-width:1.3}
.diagram .hub .ico{fill:none;stroke:var(--dg-text);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.diagram .hub .src .disc{stroke:var(--cors-primary-hot)}
.diagram .hub .out .halo{fill:color-mix(in srgb,var(--cors-white) 7%,transparent)}
.diagram .hub .cap-node .halo{fill:color-mix(in srgb,var(--cors-white) 5%,transparent)}
.diagram .hub .ai .disc{stroke:var(--cors-primary-hot);stroke-dasharray:4 4;fill:var(--dg-node-red)}
.diagram .hub .ai .ico{stroke:var(--dg-red-soft)}
.diagram .hub .ln.ai{stroke:var(--cors-primary);stroke-dasharray:5 6;stroke-opacity:.8}
.diagram .hub .core{fill:var(--dg-core);stroke:var(--dg-core-line)}
.diagram .hub .t{font-size:var(--dg-fs-title-hub)}
.diagram .cluster{fill:color-mix(in srgb,var(--cors-white) 1.5%,transparent);stroke:var(--cors-primary);stroke-width:1.5;stroke-dasharray:6 6}
.diagram .pod{fill:var(--dg-pod);stroke:var(--cors-primary-hot);stroke-width:1.3;animation:podpulse 2.8s ease-in-out infinite}
@keyframes podpulse{0%,100%{fill:var(--dg-pod)}50%{fill:var(--dg-pod-hot)}}
.diagram .pod.heal{animation:podpulse 2.8s ease-in-out infinite,podheal 7s ease-in-out infinite}
@keyframes podheal{0%,42%{stroke:var(--cors-primary-hot);opacity:1}48%,64%{stroke:var(--dg-amber);fill:color-mix(in srgb,var(--dg-amber) 12%,transparent);opacity:.35}74%,100%{stroke:var(--cors-primary-hot);opacity:1}}
.diagram .pod.ghost{fill:transparent;stroke-dasharray:4 4;animation:ghost 7s ease-in-out infinite}
@keyframes ghost{0%,30%{opacity:.25}45%,80%{opacity:1;fill:color-mix(in srgb,var(--cors-primary-hot) 12%,transparent)}95%,100%{opacity:.25}}
.diagram-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-6)}
.diagram-legend div{border-top:var(--line-1) solid var(--dg-night-line);padding-top:var(--space-3);font-size:var(--fs-small);color:var(--dg-legend)}
.diagram-legend b{display:block;color:var(--cors-white);margin-bottom:var(--space-1)}
.diagram-legend b::before{content:"";display:inline-block;width:var(--cors-dot);height:var(--cors-dot);background:var(--cors-primary-hot);margin-right:var(--space-2)}
@media (max-width:820px){.diagram-legend{grid-template-columns:1fr}}

/* Commerce: getrennt vs. integriert */
.cx-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);margin-bottom:var(--space-8)}
.cx-wrap > div{min-width:0}
.cx-wrap > div + div{border-left:var(--line-1) solid var(--dg-night-line);padding-left:var(--space-8)}
.diagram .cx{min-width:0}
.cx-h{font:600 var(--fs-label) var(--font-sans);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--dg-label);margin-bottom:var(--space-3)}
.cx-h.on{color:var(--fg-strong)}
.diagram .cx-sync rect{fill:var(--dg-node);stroke:var(--dg-amber);stroke-dasharray:4 3;stroke-width:1.2}
.diagram .cx-copy{fill:var(--dg-node-2);stroke:var(--dg-line);stroke-width:1.1;animation:cxcopy 4.8s ease-in-out infinite}
.diagram :is(.pod,.cx-copy){animation-delay:var(--d,0s)}
@keyframes cxcopy{0%,100%{stroke:var(--dg-line)}45%,55%{stroke:var(--dg-amber)}}
.diagram .cx-chip rect{fill:var(--dg-node);stroke:var(--dg-line);stroke-width:1.2}
.diagram .cx-chip.on rect{fill:var(--dg-pod-hot);stroke:var(--cors-primary-hot)}
.diagram .cx-model{fill:color-mix(in srgb,var(--cors-primary-hot) 8%,transparent);stroke:var(--cors-primary);stroke-width:1.2;stroke-dasharray:5 4}
@media (max-width:820px){.cx-wrap{grid-template-columns:1fr}.cx-wrap > div + div{border-left:0;padding-left:0;border-top:var(--line-1) solid var(--dg-night-line);padding-top:var(--space-6)}}

/* Wireframe (UX/UI-Beispiel) */
.wireframe{margin:0;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:var(--space-8);align-items:start}
.wireframe svg{width:100%;height:auto;display:block}
.wf{--border-strong:var(--dg-wf-ink-400)}  /* Wireframes sind immer hell, auch in dunklen Sections */
.wf .wf-frame{fill:var(--dg-wf-paper);stroke:var(--border-strong);stroke-width:2}
.wf .wf-bar{fill:var(--dg-wf-paper-2)}
.wf .wf-dot{fill:var(--border-strong)}
.wf .wf-box,.wf .wf-tab{fill:var(--dg-wf-paper);stroke:var(--border-strong);stroke-width:1.5}
.wf .wf-tab.on{fill:var(--dg-wf-paper-2)}
.wf .wf-line{fill:var(--dg-wf-line)}
.wf .wf-h{fill:var(--dg-wf-muted);opacity:.45}
.wf .wf-img{fill:var(--dg-wf-paper-2);stroke:var(--border-strong);stroke-width:1.5}
.wf .wf-x{stroke:var(--border-strong);stroke-width:1.2}
.wf .wf-panel{fill:var(--dg-wf-paper-2);stroke:var(--border-strong);stroke-width:1.5}
.wf .wf-btn{fill:var(--dg-wf-ink)}
.wf .wf-ok{fill:var(--dg-wf-muted)}
.wf .wf-t{font:600 var(--fs-label) var(--font-sans);fill:var(--dg-wf-ink-2)}
.wf .wf-s{font:400 var(--fs-xs) var(--font-sans);fill:var(--dg-wf-muted)}
.wf .wf-tl{font:500 var(--fs-xs) var(--font-sans);fill:var(--dg-wf-paper-2)}
.wf .wf-a{font:600 var(--fs-micro) var(--font-sans);fill:var(--cors-primary)}
.wf .wf-g{font:700 var(--dg-fs-wf) var(--font-sans);fill:var(--dg-wf-ink-2)}
.wf .wf-dark{fill:var(--dg-wf-ink-2)}
.wf .wf-tabd{fill:var(--dg-wf-ink-500)}
.wf .wf-rail{fill:var(--dg-wf-ink-500)}
.wf .wf-rail2{fill:var(--border-strong)}
.wf .wf-save{fill:var(--dg-wf-muted)}
.wf .wf-state{fill:var(--dg-wf-paper-2);stroke:var(--border-strong)}
.wf .wf-menu{fill:var(--dg-wf-paper);stroke:var(--border-strong);stroke-width:1.5;filter:drop-shadow(0 var(--space-1-5) var(--space-2-5) color-mix(in srgb,var(--cors-shade) 25%,transparent))}
.wf .wf-xd{stroke:var(--dg-wf-ink-500)}
.wf .wf-tb{font:600 var(--fs-label) var(--font-sans);fill:var(--dg-wf-paper)}
.wf .wf-mark circle{fill:var(--cors-primary)}
.wf .wf-mark text{font:700 var(--fs-label) var(--font-sans);fill:var(--dg-wf-paper)}
.wireframe figcaption span{display:block;font-size:var(--fs-sm);color:var(--fg-muted);margin-bottom:var(--space-4)}
.wf-legend{list-style:none;display:grid;gap:var(--space-3)}
.wireframe + .wireframe{margin-top:var(--space-12)}
.wf-legend li{display:grid;grid-template-columns:var(--cors-icon-md) 1fr;gap:var(--space-2-5);align-items:baseline;font-size:var(--fs-lg);line-height:1.5;color:var(--fg-2)}
.wf-legend b{display:grid;place-items:center;width:var(--cors-icon-md);height:var(--cors-icon-md);border-radius:var(--r-round);background:var(--cors-primary);color:var(--dg-wf-paper);font-size:var(--fs-label)}
@media (max-width:900px){.wireframe{grid-template-columns:1fr}}

/* Spine fließend: 100vw × Bildschirmhöhe, Linien dehnen sich, Knoten behalten ihre Größe */
.dx-stage.full{max-width:none;width:100vw;margin-left:calc(50% - 50vw)}
.diagram.fluid{padding:0;border:0;border-radius:0;background:none;overflow:visible}
.spine-fluid{position:relative;height:calc(100svh - var(--dg-spine-offset));min-height:var(--dg-spine-min-h);max-height:var(--dg-spine-max-h);background:radial-gradient(ellipse 45% 30% at 50% 50%,color-mix(in srgb,var(--cors-primary) 16%,transparent),transparent 70%)}
.spine-fluid svg{min-width:0}
.spine-fluid .fl-lines{position:absolute;inset:0;width:100%;height:100%;min-width:0}
.fl-lines .ln{fill:none;stroke:var(--dg-night-line-2);stroke-width:1.5;vector-effect:non-scaling-stroke}
.fl-lines .ln.ai{stroke:var(--cors-primary);stroke-dasharray:5 6;stroke-opacity:.8}
.fl-lines .fdot{fill:none;stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fl-lines .fdot.red{stroke:var(--cors-primary-hot)}
.fl-lines .fdot.white{stroke:var(--cors-white);stroke-width:5}
.fl-cap{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);white-space:nowrap;font:500 var(--fs-xs) var(--font-sans);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-muted)}
.fl-cap.red{color:var(--cors-primary-hot);font-weight:600}
.fn{position:absolute;left:var(--x);top:var(--y);width:0;height:0;text-decoration:none;color:inherit}
.fn .disc{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:var(--dg-node);height:var(--dg-node);border-radius:var(--r-round);display:grid;place-items:center;background:var(--dg-wf-dark);border:var(--line-1-5) solid var(--dg-night-line-2);box-shadow:0 0 0 var(--dg-halo) color-mix(in srgb,var(--cors-white) 3.5%,transparent);transition:border-color var(--cors-quick),box-shadow var(--cors-quick)}
.fn .disc svg{width:var(--dg-node-icon);height:var(--dg-node-icon);fill:none;stroke:var(--fg-strong);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fn-src .disc{border-color:var(--cors-primary-hot);box-shadow:0 0 0 var(--dg-halo) color-mix(in srgb,var(--cors-primary-hot) 8%,transparent)}
.fn-ai .disc{border:var(--line-1-5) dashed var(--cors-primary-hot);background:var(--dg-node-red);box-shadow:0 0 0 var(--dg-halo) color-mix(in srgb,var(--cors-primary-hot) 6%,transparent)}
.fn-ai .disc svg{stroke:var(--dg-red-soft)}
.fn .lbl{position:absolute;display:flex;flex-direction:column;white-space:nowrap;line-height:1.25}
.fn .lbl b{font-size:var(--fs-small);font-weight:600;color:var(--fg-strong)}
.fn .lbl small{font-size:var(--fs-xs);color:var(--fg-muted)}
.fn-src .lbl{right:var(--space-10);top:0;transform:translateY(-50%);text-align:right}
.fn-out .lbl{left:var(--space-10);top:0;transform:translateY(-50%)}
.fn-cap .lbl{bottom:var(--space-10);left:0;transform:translateX(-50%);text-align:center}
.fn-ai .lbl{top:var(--space-10);left:0;transform:translateX(-50%);text-align:center}
.fn-core .disc{width:var(--dg-core-w);height:var(--dg-core-h);border-radius:calc(var(--dg-core-h) / 2);border:var(--line-1-5) solid var(--dg-night-line-2);background:var(--dg-core);box-shadow:0 0 0 var(--dg-halo-inner) var(--cors-black),0 0 0 var(--dg-halo) var(--cors-primary);display:flex;flex-direction:column;justify-content:center;gap:var(--space-0-5);text-align:center}
.fn-core .core-t{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);font-size:var(--fs-h4);font-weight:700;color:var(--cors-white);letter-spacing:-.01em}
.fn-core .core-t i{width:var(--dg-core-mark);height:var(--dg-core-mark);background:var(--cors-primary)}
.fn-core small{font-size:var(--fs-xs);color:var(--fg-muted)}
.fn:hover .disc,.fn:focus-visible .disc,.dx-js .fn.on .disc{border-color:var(--cors-primary-hot);box-shadow:0 0 0 var(--dg-halo) color-mix(in srgb,var(--cors-primary-hot) 18%,transparent)}
.fn:hover .lbl b,.fn:focus-visible .lbl b,.dx-js .fn.on .lbl b{color:var(--cors-primary-hot)}
.fn:focus{outline:none}
.dx-js .dx-open .fn:not(.on){opacity:.4}
@media (max-width:1100px){.fn .lbl small{display:none}}
@media (max-width:820px){.spine-fluid{display:none}.dx-stage.full{width:auto;margin-left:0}}
@media (prefers-reduced-motion:reduce){.fl-lines .fx{display:none}}

/* Diagramm-Explorer – klickbare Punkte, Detail-Panel per :target (kein JS) */
.diagram .hot{cursor:pointer}
.diagram .hot:focus{outline:none}
.diagram .hit{fill:transparent}
.diagram .hot .disc,.diagram .hot rect,.diagram .hot .t{transition:stroke var(--cors-quick),fill var(--cors-quick)}
.diagram .hot:hover .disc,.diagram .hot:focus .disc,.diagram .hot:hover .nb rect,.diagram .hot:focus .nb rect{stroke:var(--cors-primary-hot);stroke-width:2.2}
.diagram .hot:hover .t,.diagram .hot:focus .t{fill:var(--cors-primary-hot)}
.diagram .hot:focus-visible .hit{stroke:var(--cors-primary-hot);stroke-dasharray:3 4}
.dx-g{display:block;flex-basis:100%;font:600 var(--fs-label) var(--font-sans);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent)}
.dx-stage{position:relative}
/* Diagramme bleiben auf der früheren Inhaltsbreite (1180 px Satzspiegel), damit sie nicht zu hoch werden */
.dx-stage,.diagram-legend,.dx-stage ~ .principle,.dx-stage ~ .rows,.dx-stage ~ .ctas,.dx-stage ~ p{max-width:var(--dg-max-w);margin-inline:auto}
.dx-stage.wide,.dx-stage.wide ~ .diagram-legend{max-width:none}
.dx-stage .diagram{transition:opacity var(--cors-quick)}
.dx-stage:has(.dx-pop:target) .diagram{opacity:.45}
.dx-pop{display:none;position:absolute;z-index:5;top:var(--space-6);right:var(--space-6);width:min(var(--dg-pop-w),calc(100% - 2 * var(--space-6)));max-height:calc(100% - 2 * var(--space-6));overflow:auto;scroll-margin-top:calc(var(--space-16) + 2 * var(--space-6));background:var(--surface);border:var(--line-1) solid var(--border-strong);border-top:var(--line-3) solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--dg-shadow);padding:var(--space-6)}
.dx-pop.l{right:auto;left:var(--space-6)}
.dx-pop:target{display:block;animation:dx-in var(--cors-quick) var(--cors-cubic)}
@keyframes dx-in{from{opacity:0;transform:translateY(var(--space-2))}}
.dx-pop h3{font-size:var(--fs-h3);margin:var(--space-2) var(--space-12) var(--space-2) 0;color:var(--fg)}
.dx-pop p{font-size:var(--fs-small);color:var(--fg-2)}
.dx-pop ul{list-style:none;margin-top:var(--space-3)}
.dx-pop li{position:relative;padding-left:var(--space-6);font-size:var(--fs-small);color:var(--fg-2);margin-top:var(--space-1)}
.dx-pop li::before{content:"";position:absolute;left:var(--space-0-5);top:.6em;width:var(--dg-dot);height:var(--dg-dot);background:var(--accent)}
.dx-pop .text-link{margin:var(--space-4) 0 0}
.dx-x{position:absolute;top:var(--space-3);right:var(--space-3);width:var(--dg-close);height:var(--dg-close);display:grid;place-items:center;border-radius:var(--r-round);color:var(--fg-muted);text-decoration:none}
.dx-x:hover,.dx-x:focus-visible{color:var(--fg);background:var(--surface-2)}
@media (max-width:820px){
  .dx-pop,.dx-pop.l{left:var(--space-3);right:var(--space-3);top:var(--space-3);width:auto;max-height:calc(100% - 2 * var(--space-3));padding:var(--space-4);scroll-margin-top:calc(var(--space-16) + var(--space-4))}
  .dx-pop h3{font-size:var(--fs-h5)}
}
/* Mit JS (explorer.js): Popover am Punkt statt :target-Karte */
.dx-js .dx-pop:target{display:none}
.dx-js .dx-stage:has(.dx-pop:target) .diagram{opacity:1}
.dx-js .dx-pop.open{display:block;width:var(--dg-pop-js-w);max-height:none;overflow:visible;padding:var(--space-4) var(--space-6) var(--space-6);animation:dx-in var(--cors-quick) var(--cors-cubic)}
.dx-js .dx-pop.open:focus{outline:none}
.dx-js .dx-pop.open::before{content:"";position:absolute;top:var(--ay,var(--space-10));width:var(--dg-pop-arrow);height:var(--dg-pop-arrow);background:var(--surface);border:var(--line-1) solid var(--border-strong);transform:translateY(-50%) rotate(45deg)}
.dx-js .dx-pop.to-r::before{left:calc(var(--space-1-5) * -1);border-top:0;border-right:0}
.dx-js .dx-pop.to-l::before{right:calc(var(--space-1-5) * -1);border-bottom:0;border-left:0}
.dx-js .dx-open .hot{transition:opacity var(--cors-quick)}
.dx-js .dx-open .hot:not(.on){opacity:.4}
.dx-js .hot.on .disc,.dx-js .hot.on .nb rect{stroke:var(--cors-primary-hot);stroke-width:2.4}
.dx-js .hot.on .t{fill:var(--cors-primary-hot)}
@media (max-width:820px){
  .dx-js .dx-pop.open{left:var(--space-2);right:var(--space-2);width:auto}
  .dx-js .dx-pop.to-b::before{top:calc(var(--space-1-5) * -1);left:var(--ax,50%);border-right:0;border-bottom:0;transform:translateX(-50%) rotate(45deg)}
}
/* Hochformat-Varianten der Diagramme (≤ 820 px) */
.diagram .dx-m{display:none}
@media (max-width:820px){
  .dx-stage .diagram{overflow:visible}
  .dx-stage .diagram svg{display:none;min-width:0}
  .dx-stage .diagram svg.dx-m{display:block}
  .diagram .hub .t.m{font-size:var(--fs-meta)}
}
@media (prefers-reduced-motion:reduce){.dx-pop:target{animation:none}.dx-stage .diagram{transition:none}}

/* ---------- 7 Entwicklungs-Marker (vor Livegang entfernen) ---------- */
.draftbar{position:relative;z-index:60;background:var(--draft-bg);color:var(--draft-fg);font-size:var(--fs-label);text-align:center;padding:var(--space-2) var(--space-4);border-bottom:var(--line-1) solid var(--draft-border)}
.todo{background:var(--draft-bg);outline:var(--line-1) dashed var(--draft-line);border-radius:var(--r-sm);padding:0 var(--space-1);color:var(--draft-fg)}
.todo-note{display:block;font:var(--fs-micro) var(--font-sans);color:var(--draft-note);margin-top:var(--space-1)}
.is-dark .todo,.c-section--dark .todo,.c-hero .todo{background:color-mix(in srgb,var(--draft-line) 16%,transparent);color:var(--dg-amber);outline-color:var(--draft-line-dark)}
.is-dark .todo-note,.c-section--dark .todo-note,.c-hero .todo-note{color:var(--draft-note-dark)}

/* ---------- Styleguide-Seite ---------- */
.sg-nav{display:flex;flex-wrap:wrap;gap:var(--space-1-5);margin-bottom:var(--space-12)}
.sg-item{border-top:var(--line-1) solid var(--border);padding-block:var(--space-12)}
.sg-item > header{display:grid;grid-template-columns:1fr auto;gap:var(--space-4);align-items:baseline;margin-bottom:var(--space-6)}
.sg-item > header h3{font-size:var(--fs-h4)}
.sg-item > header code{font:500 var(--fs-label) var(--font-sans);color:var(--accent)}
.sg-item > p{color:var(--fg-muted);max-width:var(--sg-text-w);margin-bottom:var(--space-4)}
.sg-props{font:400 var(--fs-label)/1.6 var(--font-sans);color:var(--fg-2);background:var(--surface-2);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-6);overflow-x:auto;white-space:pre}
.sg-stage{border:var(--line-1) dashed var(--border-strong);padding:var(--space-6);background:var(--bg)}
.sg-stage.is-dark{background:var(--dg-night)}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--sg-swatch-w),1fr));gap:var(--space-3)}
.sg-swatch{border:var(--line-1) solid var(--border);overflow:hidden;font:400 var(--fs-xs) var(--font-sans)}
.sg-swatch i{display:block;height:var(--sg-swatch-h);background:var(--c)}
.sg-swatch span{display:block;padding:var(--space-2) var(--space-2-5);color:var(--fg-2)}
.sg-type > div{display:grid;grid-template-columns:var(--sg-label-w) 1fr;gap:var(--space-4);align-items:baseline;padding-block:var(--space-3);border-bottom:var(--line-1) solid var(--border)}
.sg-type code{font:500 var(--fs-xs) var(--font-sans);color:var(--fg-muted)}
/* Three columns shared by all rows (token, bar, value), so every bar starts on the same line */
.sg-space{display:grid;grid-template-columns:max-content max-content 1fr;align-items:center;gap:var(--space-1-5) var(--space-3);font:400 var(--fs-xs) var(--font-sans);color:var(--fg-muted)}
.sg-space div{display:contents}
.sg-space i{display:block;width:var(--w);height:var(--space-3);background:var(--cors-primary)}
.sg-subhead{margin-top:var(--space-12)}
.sg-demo-pager{position:relative;min-height:calc(var(--cors-pager-line-lg) + var(--space-30) * 2 + var(--space-16))}
.sg-demo-more{position:relative;min-height:var(--cors-more-size)}
.sg-demo-more .c-hero__more a{position:relative;top:auto;left:auto;right:auto;bottom:auto}
.sg-logo-lg{width:calc(var(--cors-logo-mark-w) * 2);height:auto}
@media (max-width:700px){.sg-type > div{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.diagram .fx{display:none}}