:root {
      /* Neutral foundation (enterprise): clean white base */
      --bg: #ffffff;
      --surface: #ffffff;
      --surface-2: #f6f8fb;
      --surface-3: #eef2f7;
      --border: #d8d2c7;
      --divider: #e3ddd3;
      --text: #151410;
      --muted: #67635d;
      --faint: #999385;
      --inverse: #fbfaf7;
      /* Brand colors (2-color CI): deep blue + teal-blue */
      --primary: #174a7a;     /* Deep Slate Blue */
      --primary-2: #0b6a8c;   /* Teal-Blue (less green) */
      --primary-soft: #dbe7f3;/* Blue-tinted soft background */
      /* Masterbrand anchors (avoid subpage variable overrides) */
      --ceperia-primary: #174a7a;
      --ceperia-inverse: #fbfaf7;
      --gold: #9c7a2e;
      --success: #174a7a; /* keep UI "success" non-green for enterprise CI */
      --shadow-sm: 0 1px 2px rgba(10,10,10,.05);
      --shadow-md: 0 10px 30px rgba(10,10,10,.08);
      --shadow-lg: 0 24px 70px rgba(10,10,10,.12);
      --radius-sm: .25rem;  /* 4px */
      --radius-md: .375rem; /* 6px */
      --radius-lg: .5rem;   /* 8px */
      --radius-xl: .75rem;  /* 12px */
      --font-display: "Manrope", system-ui, -apple-system, Segoe UI, sans-serif;
      --font-body: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
      --text-xs: clamp(.75rem,.72rem + .2vw,.85rem);
      --text-sm: clamp(.9rem,.85rem + .2vw,1rem);
      --text-base: clamp(1rem,.97rem + .2vw,1.08rem);
      --text-lg: clamp(1.18rem,1.05rem + .6vw,1.45rem);
      --text-xl: clamp(1.7rem,1.2rem + 1.35vw,2.45rem);
      --text-2xl: clamp(2.2rem,1.55rem + 2.55vw,4.4rem);
      --text-hero: clamp(2.6rem,1.6rem + 3.9vw,5.4rem);
      --space-2: .5rem;
      --space-3: .75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;
      --space-24: 6rem;
      --content: 1180px;
      --layout-columns: 12;
      /* Single gutter: every section uses the same column gap so edges align. */
      --layout-gutter: 1.25rem;
      /* Extra Luft zwischen Intro-Text und Karten (Solutions + Proof, 4+8) */
      --editorial-bridge: clamp(1.5rem, 0.95rem + 0.85vw, 2.25rem);
      --transition: 180ms cubic-bezier(.16,1,.3,1);
      /* Anchor scroll offset for sticky header */
      --scroll-offset: 3.5rem;
    }

    /* Intentionally no dark mode for enterprise masterbrand site. */

    *,:before,:after{ box-sizing: border-box; }
    html{
      scroll-behavior: smooth;
      scroll-padding-top: var(--scroll-offset);
    }
    body{
      margin: 0;
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img,svg{ display:block; max-width:100%; height:auto; }
    a{ text-decoration:none; color: inherit; }
    button{ font: inherit; }
    :focus-visible{ outline: 2px solid color-mix(in srgb, var(--primary) 65%, transparent); outline-offset: 2px; }
    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior: auto; }
      *,*:before,*:after{ transition:none !important; animation:none !important; }
    }

    .container{ width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; }
    /* Master 12 columns (--layout-gutter). Patterns: (A) intro + block e.g. 4+8; (B) 6+6; (C) 4×4 card grid. */
    .layout-12{
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--layout-gutter);
      row-gap: var(--layout-gutter);
      align-items: start;
      width: 100%;
    }
    .content-anchor{
      height: 0;
      width: 0;
      overflow: hidden;
      scroll-margin-top: var(--scroll-offset);
    }

    /* Ensure all in-page anchor targets are not hidden under the sticky header */
    main :where([id]){
      scroll-margin-top: var(--scroll-offset);
    }
    .cluster{ display:flex; gap: var(--space-3); align-items:center; flex-wrap: wrap; }
    .stack{ display:grid; gap: var(--space-4); }
    .muted{ color: var(--muted); }
    .faint{ color: var(--faint); }
    .sr-only{
      position:absolute; width:1px; height:1px;
      padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
      white-space:nowrap; border:0;
    }

    /* =========================================================
       Design-guidelines: shared type + section patterns
       (applied via utility classes, keeps existing tokens)
       ========================================================= */
    .dg-kicker{
      margin: 0 0 .75rem;
      font-family: var(--font-display);
      font-size: var(--text-xs);
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      line-height: 1.3;
      color: color-mix(in srgb, var(--text) 82%, var(--muted));
    }
    .dg-lead{
      margin: 0;
      font-size: var(--text-sm);
      line-height: 1.6;
      color: var(--muted);
      max-width: min(68ch, 100%);
    }
    .dg-body{
      max-width: min(72ch, 100%);
    }

    /* Eyebrow provenance cue (hero placement) */
    main .trust-eyebrow{
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      margin: 0 0 .75rem;
      font-size: var(--text-xs);
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      line-height: 1.2;
      color: color-mix(in srgb, var(--text) 82%, var(--muted));
      width: fit-content;
    }
    main .trust-eyebrow__flag{ line-height: 1; }
    main .trust-eyebrow--inverse{ color: rgba(255,255,255,0.82); }

    /* Home hero: slightly smaller eyebrow (match other pages visually) */
    body.page-home main .trust-eyebrow{
      font-size: clamp(.7rem, .68rem + .12vw, .8rem);
    }

    /* Trust badge: short provenance cue (e.g. German technology) */
    main .trust-badge{
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      margin: .85rem 0 0;
      padding: .35rem .6rem;
      border: 1px solid var(--divider);
      background: color-mix(in srgb, var(--surface-2) 82%, transparent);
      color: color-mix(in srgb, var(--text) 86%, var(--muted));
      font-size: var(--text-xs);
      font-weight: 650;
      letter-spacing: -.01em;
      line-height: 1.25;
      border-radius: var(--radius-md);
      width: fit-content;
    }
    main .trust-badge__flag{
      font-size: 1em;
      line-height: 1;
    }

    main .trust-badge--plain{
      margin-top: .9rem;
      padding: 0;
      border: 0;
      background: transparent;
      border-radius: 0;
      color: color-mix(in srgb, var(--text) 80%, var(--muted));
    }

    /* Explicit inverse variant (for dark heroes) */
    .trust-badge--inverse{
      color: rgba(255,255,255,0.92);
    }

    /* Dark hero contexts: keep badge readable on dark backgrounds */
    .oc-hero .trust-badge,
    .dg-final .trust-badge{
      border-color: rgba(255,255,255,0.22);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);
    }
    .oc-hero .trust-badge--plain,
    .dg-final .trust-badge--plain{
      border: 0;
      background: transparent;
    }

    .dg-hero{
      padding: clamp(2.75rem, 5vw, 4.25rem) 0 clamp(2.25rem, 4vw, 3.25rem);
      border-bottom: 0;
      background: linear-gradient(165deg, #fff 0%, color-mix(in srgb, var(--primary) 4%, #fff) 45%, var(--surface-2) 100%);
    }
    .dg-hero__inner{
      text-align: left;
    }
    .dg-hero h1{
      margin: 0 0 1rem;
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      letter-spacing: -0.04em;
      line-height: 1.06;
      max-width: 16ch;
    }
    .dg-hero .dg-lead{ font-size: var(--text-base); max-width: min(66ch, 100%); }
    /* Abstand Intro → Buttons (Layout: siehe gemeinsamer Hero‑CTA‑Block bei .hero-actions) */
    .dg-hero__actions{ margin-top: 1.35rem; }

    /* Home trust stack (no client logos): enterprise-like, monochrome */
    .trust-stack{
      padding: 1.15rem 0 0.25rem;
      border-bottom: 1px solid var(--divider);
      background: transparent;
    }
    .trust-stack__inner{
      display: grid;
      gap: 0.6rem;
    }
    .trust-stack__label{
      margin: 0;
      font-size: var(--text-xs);
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: color-mix(in srgb, var(--text) 72%, var(--muted));
    }
    .trust-stack__row{
      display: flex;
      flex-wrap: wrap;
      gap: .75rem 1rem;
      align-items: center;
      margin: 0;
      padding: 0;
    }
    .trust-logo{
      height: 18px;
      width: auto;
      opacity: 0.86;
      display: inline-block;
    }
    .trust-stack__signals{
      display: flex;
      flex-wrap: wrap;
      gap: .5rem .6rem;
    }
    .trust-signal{
      display: inline-flex;
      align-items: center;
      padding: .2rem .5rem;
      border: 1px solid var(--divider);
      border-radius: 999px;
      font-size: var(--text-xs);
      font-weight: 650;
      color: color-mix(in srgb, var(--text) 78%, var(--muted));
      background: transparent;
      white-space: nowrap;
    }

    .dg-section{
      padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
      border-top: 1px solid var(--divider);
      background: transparent;
    }
    .dg-section--bleed{ background: var(--surface); }
    .dg-section__head{
      margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem);
      max-width: min(72rem, 100%);
      text-align: left;
    }
    .dg-section__head h2{
      margin: 0 0 .85rem;
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1.12;
      max-width: min(36ch, 100%);
    }
    .dg-section__head .dg-lead{ max-width: min(58ch, 100%); }

    /* Final CTA (dark) — consistent last block before footer */
    .dg-final{
      padding: clamp(2.75rem, 5vw, 4rem) 0;
      background: #0f172a;
      color: #f8fafc;
    }
    .dg-final__grid{
      display: grid;
      grid-template-columns: minmax(0, min(50%, 40rem)) minmax(0, 1fr);
      gap: clamp(1.5rem, 3.5vw, 2.75rem);
      align-items: center;
    }
    @media (max-width: 900px){
      .dg-final__grid{ grid-template-columns: 1fr; }
      .dg-final .cta-actions{
        justify-self: start;
        align-items: stretch;
      }
      .dg-final .cta-actions > .btn{ width: 100%; }
    }
    .dg-final h2{
      margin: 0 0 0.75rem;
      font-family: var(--font-display);
      font-size: clamp(1.65rem, 1.15rem + 1.5vw, 2.35rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.12;
      color: #f8fafc;
      max-width: 22ch;
    }
    .dg-final p{
      margin: 0;
      font-size: var(--text-sm);
      line-height: 1.62;
      color: color-mix(in srgb, #f8fafc 78%, #94a3b8);
      /* stay within the capped copy column (≤ half stripe) */
      max-width: 100%;
    }

    /* Page-level chrome defaults (overridable per page via CSS vars) */
    body{
      --page-bg: var(--bg);
      --page-divider: var(--divider);
    }
    main{ background: var(--page-bg); }

    /* Header (mega dropdown is a child → one hover zone, no gap-flash) */
    .site-header{
      position: sticky;
      top: 0;
      z-index: 60;
      border-bottom: 1px solid var(--page-divider);
      backdrop-filter: blur(14px);
      background: color-mix(in srgb, var(--page-bg) 88%, transparent);
    }
    .header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 1rem 0; gap: 1rem; }
    .brand{ display:flex; align-items:center; gap: .8rem; font-weight: 800; letter-spacing: -.03em; font-family: var(--font-display); }
    .brand-logo{
      height: 30px;
      width: auto;
      display: block;
    }
    .brand-mark{
      width: 2rem; height: 2rem; border-radius: var(--radius-lg);
      background: var(--primary);
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
    }
    .brand-mark:before{
      content:"";
      position:absolute;
      inset: .38rem;
      border: 2px solid rgba(255,255,255,.92);
      border-radius: var(--radius-sm);
    }
    .nav{ display:flex; gap: .5rem; align-items: center; position: relative; z-index: 1; }
    .nav a,
    .nav button{
      font-size: var(--text-sm);
      color: var(--muted);
      padding: .4rem .2rem;
      background: transparent;
      border: 0;
      cursor: pointer;
      font-weight: 600;
      align-self: center;
    }
    .nav a:hover{ color: var(--text); }

    /* Mega menu (desktop): sits under header bar — no air gap, no hover flapping */
    .mega-backdrop{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.16);
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease;
      z-index: 55;
    }
    .mega{
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      /* Bündig zur Header-Linie (vorher -1px wirkte zu hoch / unsauber neben dem Tab) */
      margin-top: 0;
      z-index: 2;
      pointer-events: none;
    }
    html[data-mega-open="true"] .mega{
      pointer-events: auto;
    }
    .mega-inner{
      width: min(calc(100% - 2rem), var(--content));
      margin-inline: auto;
      padding: 0 0 1.5rem;
    }
    .mega-panel{
      position: relative;
      display: none;
      pointer-events: auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-top: 0;
      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
      box-shadow: var(--shadow-lg);
      padding: 1.35rem 1.35rem 1.45rem;
    }
    .mega-panel[aria-hidden="false"]{ display: block; }
    .mega-grid{
      display: grid;
      grid-template-columns: 1.1fr .9fr .9fr;
      gap: 1rem;
      /* Stretch: Spalten gleich hoch wie die höchste → Trennlinien laufen die volle Höhe */
      align-items: stretch;
    }
    #mega-company .mega-grid{
      grid-template-columns: 1fr 1fr minmax(11.5rem, 1.15fr);
    }
    .mega-col--lede{
      justify-content: flex-start;
      padding: .25rem .25rem .25rem 1.25rem;
    }
    .mega-about-title{
      margin: 0 0 .5rem;
      font-family: var(--font-display);
      font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
      font-weight: 700;
      letter-spacing: -.035em;
      line-height: 1.12;
      color: var(--text);
    }
    .mega-about-title a{
      color: inherit;
      text-decoration: none;
      transition: color var(--transition);
    }
    .mega-about-title a:hover,
    .mega-about-title a:focus-visible{
      color: var(--primary);
    }
    .mega-panel .mega-about-lede{
      margin: 0;
      font-size: var(--text-sm);
      line-height: 1.55;
      color: var(--muted);
      max-width: 28ch;
    }
    .mega-col{
      display: flex;
      flex-direction: column;
      min-height: 0;
      padding: .25rem .25rem .25rem 0;
    }
    .mega-col + .mega-col{
      border-left: 1px solid var(--divider);
      padding-left: 1.25rem;
    }
    .mega-col h4{ margin: 0 0 .85rem; font-size: .95rem; letter-spacing: -.01em; }
    .mega-col-heading{
      margin: 0 0 .75rem;
      font-size: var(--text-xs);
      font-weight: 600;
      font-family: var(--font-body);
      letter-spacing: .1em;
      text-transform: uppercase;
      line-height: 1.3;
      color: var(--faint);
    }
    .mega-audience-summary{
      margin: 0 0 .65rem;
      font-size: var(--text-xs);
      line-height: 1.5;
      color: var(--muted);
      max-width: 36ch;
    }
    .mega-links{ display: grid; gap: .1rem; margin-top: 0; }
    .mega-link{
      display: grid;
      gap: .1rem;
      padding: .35rem 0;
      border: 0;
      background: transparent;
    }
    .mega-link:hover strong{ text-decoration: underline; text-underline-offset: 3px; }
    .mega-link[aria-current="page"] strong{
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .mega-link strong{ font-weight: 650; font-family: var(--font-display); letter-spacing: -.01em; color: var(--text); }
    .mega-link span{ color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }

    /* ---------------------------------------------------------
       Compact mega (single column, anchored to active tab)
       --------------------------------------------------------- */
    :root{
      --mega-panel-width: 19rem;
      --mega-panel-pad: 1rem;
      --mega-panel-radius: 0rem;
    }
    .mega-inner{
      width: 100%;
      margin: 0;
      padding: 0;
      position: relative;
    }
    .mega-panel{
      position: absolute;
      top: 0;
      left: var(--mega-left, 0px);
      width: var(--mega-panel-width);
      padding: var(--mega-panel-pad);
      border-top: 1px solid var(--border);
      border-radius: var(--mega-panel-radius);
    }
    .mega-grid,
    .mega-col,
    .mega-col--lede,
    .mega-audience-summary,
    .mega-col-heading{
      display: none !important;
    }
    .mega-links{
      gap: .15rem;
    }
    .mega-link{
      padding: .45rem .25rem;
      border-radius: 0;
    }

    /* Keep menu hover minimal (underscore only) */
    .mega-link:hover{ background: transparent; }
    .nav a:hover,
    .nav button:hover{
      color: var(--muted);
    }
    .mega-kicker{
      color: var(--faint);
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: .09em;
    }
    .mega-link--cta{
      margin-top: .45rem;
      padding: .65rem .85rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--surface-2);
    }
    .mega-link--cta strong{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      text-decoration: none;
    }
    .mega-link--cta:hover{ background: var(--surface); border-color: color-mix(in srgb, var(--primary) 16%, var(--border)); }
    .mega-link--cta:hover strong{ text-decoration: none; }
    .mega-link-cta__arrow{ flex-shrink: 0; font-weight: 500; color: var(--text); }

    /* Consultation CTA: keep CTA styling but remove filled background. */
    .mega-link--cta.mega-link--consultation{
      background: transparent;
    }
    .mega-link--cta.mega-link--consultation:hover,
    .mega-link--cta.mega-link--consultation:focus-visible{
      background: transparent;
    }

    /* About mega menu (col 3): align typography with menu scale (no oversized lede). */
    #mega-company .mega-col--lede .mega-about-title{
      font-size: 1rem;
      font-weight: 650;
      letter-spacing: -0.01em;
      line-height: 1.2;
      margin-bottom: .35rem;
    }
    #mega-company .mega-col--lede .mega-about-lede{
      font-size: var(--text-xs);
      line-height: 1.4;
      max-width: 34ch;
    }

    html[data-mega-open="true"] .mega-backdrop{
      opacity: 1;
      pointer-events: auto;
    }

    /* Mega-Nav: kein Flächen-Hintergrund — nur kurze Unterlinie bei Hover/aktiv */
    .nav button[data-mega-trigger]{
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: .85rem;
      padding: .4rem .65rem .45rem;
      align-self: center;
      background: transparent;
      transition: color var(--transition);
    }
    .nav button[data-mega-trigger]::before{
      content: "";
      position: absolute;
      left: 0;
      right: clamp(.85rem, 1.5vw, 1.5rem);
      bottom: 0;
      height: 2px;
      background: currentColor;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition);
    }
    .nav button[data-mega-trigger]::after{
      content: "";
      width: .42rem;
      height: .42rem;
      border-right: 1.6px solid currentColor;
      border-bottom: 1.6px solid currentColor;
      rotate: 45deg;
      translate: 0 -3px;
      opacity: .85;
      flex-shrink: 0;
      transition: rotate var(--transition), translate var(--transition), opacity var(--transition);
    }
    .nav button[data-mega-trigger]:hover,
    .nav button[data-mega-trigger][aria-expanded="true"]{
      color: var(--text);
      font-weight: 700;
    }
    .nav button[data-mega-trigger]:hover::before,
    .nav button[data-mega-trigger][aria-expanded="true"]::before{
      opacity: 1;
      right: 0.3rem; /* match OneCivic: underline nearly full width */
    }
    .nav button[data-mega-trigger][aria-expanded="true"]::after{
      rotate: -135deg;
      translate: 0 -1px;
      opacity: 1;
    }
    .nav button[data-mega-trigger]:focus-visible{
      outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
      outline-offset: 2px;
      z-index: 2;
    }

    /* Active top-nav section per page (underline like hover) */
    body.page-onecivic .nav button[data-mega-trigger="products"]::before,
    body.page-legal-ops .nav button[data-mega-trigger="products"]::before,
    body.page-who-serve .nav button[data-mega-trigger="company"]::before,
    body.page-our-journey .nav button[data-mega-trigger="company"]::before,
    body.page-careers .nav button[data-mega-trigger="company"]::before,
    body.page-how-we-work .nav button[data-mega-trigger="solutions"]::before,
    body.page-commerce-growth .nav button[data-mega-trigger="solutions"]::before,
    body.page-public-services .nav button[data-mega-trigger="solutions"]::before,
    body.page-internal-operations .nav button[data-mega-trigger="solutions"]::before{
      opacity: 1;
      right: 0.3rem;
    }

    body.page-onecivic .nav button[data-mega-trigger="products"],
    body.page-legal-ops .nav button[data-mega-trigger="products"],
    body.page-who-serve .nav button[data-mega-trigger="company"],
    body.page-our-journey .nav button[data-mega-trigger="company"],
    body.page-careers .nav button[data-mega-trigger="company"],
    body.page-how-we-work .nav button[data-mega-trigger="solutions"],
    body.page-commerce-growth .nav button[data-mega-trigger="solutions"],
    body.page-public-services .nav button[data-mega-trigger="solutions"],
    body.page-internal-operations .nav button[data-mega-trigger="solutions"]{
      color: var(--text);
      font-weight: 700;
    }

    .lang-switch{
      display:flex;
      align-items:center;
      gap: .5rem;
      padding-left: 0;
      border-left: 0;
      margin-left: 0;
    }
    .lang-switch__current{
      font-size: var(--text-xs);
      font-weight: 650;
      letter-spacing: .04em;
      color: var(--muted);
      text-transform: uppercase;
      padding: .25rem .2rem;
      cursor: default;
      pointer-events: none;
      user-select: none;
    }
    .lang-switch a{
      font-size: var(--text-xs);
      font-weight: 650;
      letter-spacing: .04em;
      color: var(--text);
      text-transform: uppercase;
      padding: .25rem .2rem;
      text-decoration: none;
    }
    .lang-switch a:hover{ color: var(--primary); }
    .lang-switch a:focus-visible{
      outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
      outline-offset: 2px;
      border-radius: 2px;
    }

    /* Controls */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: .6rem;
      min-height: 44px;
      padding: .95rem 1.15rem;
      border-radius: 28px; /* unify pill radius across site */
      font-size: var(--text-sm);
      font-weight: 600;
      border: 1px solid transparent;
      transition: all var(--transition);
      white-space: nowrap;
    }
    .btn-primary{ background: var(--primary); color: var(--inverse); }
    .btn-primary:hover{ filter: brightness(.96); }
    .btn-secondary{ background: var(--surface); border-color: var(--border); }
    .btn-secondary:hover{ background: var(--surface-2); }
    .btn-ghost{ background: transparent; border-color: var(--border); }
    .btn-ghost:hover{ background: var(--surface-2); }
    .btn-ghost:focus-visible{
      outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
      outline-offset: 3px;
    }
    .btn-dark{
      background: var(--inverse);
      color: color-mix(in srgb, var(--text) 92%, #000);
      border: 1px solid var(--inverse);
    }
    .btn-dark:hover{
      background: var(--surface-3);
      filter: none;
    }
    .btn-secondary.btn-dark{
      background: transparent;
      border-color: rgba(243, 245, 247, 0.14);
      color: var(--inverse);
    }
    .btn-secondary.btn-dark:hover{
      background: rgba(243, 245, 247, 0.08);
    }
    /* Hero CTA: more "enterprise" polish */
    .btn-hero{
      min-height: 46px;
      padding: .5rem 1.7rem;
      border-radius: 28px;
      letter-spacing: -.01em;
      /* Visual style is controlled by primary/secondary variants */
    }
    /* Pill shape (same radius as hero CTAs) */
    .btn-pill{
      min-height: 46px;
      padding: .5rem 1.7rem;
      border-radius: 28px;
      letter-spacing: -.01em;
    }
    .btn-primary.btn-hero{
      background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, #000 8%) 0%, var(--primary) 100%);
      border-color: rgba(255,255,255,.14);
    }
    .btn-secondary.btn-hero{
      background: transparent;
      border-color: var(--border);
      color: var(--text);
    }
    .btn-secondary.btn-hero:hover{
      background: var(--surface-2);
    }
    .btn-hero:hover{
      filter: none;
      transform: translateY(-1px);
    }
    .btn-hero:active{
      transform: translateY(0px);
    }

    .icon-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 44px;
      height: 44px;
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 999px;
      color: var(--text);
      cursor: pointer;
      transition: all var(--transition);
    }
    .icon-btn:hover{ background: var(--surface-2); }

    .tag{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: .35rem .6rem;
      border-radius: var(--radius-xl);
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 75%, transparent);
      color: var(--muted);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .02em;
    }
    .tag-strong{
      color: var(--text);
      background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface));
      border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
    }

    /* Typography */
    h1,h2,h3,h4{
      font-family: var(--font-display);
      line-height: 1.06;
      letter-spacing: -.04em;
      margin: 0 0 .7rem;
    }
    h1{ font-size: var(--text-hero); max-width: 14ch; }
    h2{ font-size: var(--text-xl); }
    h3{ font-size: var(--text-lg); }
    h4{ font-size: 1.05rem; letter-spacing: -.02em; }
    p{ margin: 0 0 1rem; color: var(--muted); max-width: 72ch; }

    /* Sections — top divider matches `.container` width (same outer edge as headline + body copy). */
    section{
      padding: 4rem 0;
      border-top: none;
      position: relative;
    }
    /* Kein Strich zwischen erstem Block (Hero/Intro) und zweitem — sonst doppelt mit Hero-Ende bzw. wirkt wie bottom+top border. Ab Section 3 wie gewohnt. */
    main > section:not(:first-of-type):not(:nth-of-type(2)):not(.dg-final)::before{
      content: "";
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      width: min(calc(100% - 2rem), var(--content));
      border-top: 1px solid var(--page-divider);
      pointer-events: none;
    }
    .hero{
      position: relative;
      padding: clamp(3.5rem, 7vw, 7.5rem) 0 3rem;
      border-top: none;
      overflow: clip;
    }
    .hero::before{
      content: "";
      position: absolute;
      inset: 0;
      /* Reference asset not bundled in Suite — avoid 404; override per page if needed */
      background-image: none;
      /* Show the original image without cropping/distortion */
      background-size: 100% auto;
      background-position: center;
      background-repeat: no-repeat;
      pointer-events: none;
      z-index: 0;
    }

    /* Mobile: make background fill the hero height (no distortion, may crop). */
    @media (max-width: 760px){
      .hero::before{
        background-size: cover;
        background-position: 50% 50%;
      }
    }
    .hero::after{
      content: "";
      position: absolute;
      inset: 0;
      /* no overlay/gradient — keep background image 100% original */
      background: none;
      pointer-events: none;
      z-index: 0;
    }
    .hero-layout{
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--layout-gutter);
      row-gap: 1.25rem;
      align-items: start;
      width: 100%;
      max-width: none; /* keep hero "full", container controls padding */
    }
    /* CTAs volle Containerbreite (wie Subpages mit .cg-hero__inner), nicht nur hero-copy-Spalte */
    .hero-layout > .hero-actions{
      grid-column: 1 / -1;
      margin-top: 0; /* Abstand: nur hero-layout row-gap, nicht + .dg-hero__actions */
    }

    .hero-copy{
      grid-column: 1 / span 7;
      width: 100%;
      max-width: none;
      margin-inline: 0;
      text-align: left;
    }
    @media (min-width: 1200px){
      .hero-copy{ grid-column: 1 / span 8; }
    }
    .hero-copy h1{
      max-width: none;
      font-size: clamp(2.35rem, 1.5rem + 3.2vw, 4.95rem);
      color: #f8fafc;
    }
    .hero .dg-kicker{
      color: rgba(248, 250, 252, .78);
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap: .5rem;
      padding: .45rem .8rem;
      border-radius: var(--radius-xl);
      background: rgba(248, 250, 252, .10);
      border: 1px solid rgba(248, 250, 252, .22);
      color: rgba(248, 250, 252, .92);
      font-weight: 800;
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: .09em;
    }
    .hero-copy p{ font-size: 1.06rem; max-width: none; color: rgba(248, 250, 252, .86); }

    /*
      Hero-CTAs: mobile-first 1 Spalte (volle Breite je Button).
      ≥901px: 4 gleiche Spalten — Buttons Spalte 1+2; ein Button nur Spalte 1.
      (grid-column mit :nth-child nur im Desktop-Block, sonst erzeugen hohe Spezifität
      implizite Spalten und halten zwei Buttons nebeneinander.)
    */
    .hero-actions,
    .dg-hero__actions,
    .cg-hero__actions,
    .io-hero__actions,
    .hww-hero__actions,
    .oc-hero__actions,
    .lo-hero__actions{
      display: grid;
      grid-template-columns: 1fr;
      column-gap: var(--layout-gutter);
      row-gap: 0.85rem;
      align-items: stretch;
      justify-items: stretch;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    :is(.hero-actions, .dg-hero__actions, .cg-hero__actions, .io-hero__actions, .hww-hero__actions, .oc-hero__actions, .lo-hero__actions) > .btn{
      width: 100%;
      min-width: 0;
      justify-self: stretch;
      justify-content: center;
      text-align: center;
      white-space: normal;
    }
    @media (min-width: 901px){
      .hero-actions,
      .dg-hero__actions,
      .cg-hero__actions,
      .io-hero__actions,
      .hww-hero__actions,
      .oc-hero__actions,
      .lo-hero__actions{
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      :is(.hero-actions, .dg-hero__actions, .cg-hero__actions, .io-hero__actions, .hww-hero__actions, .oc-hero__actions, .lo-hero__actions) > .btn:only-child{
        grid-column: 1;
      }
      :is(.hero-actions, .dg-hero__actions, .cg-hero__actions, .io-hero__actions, .hww-hero__actions, .oc-hero__actions, .lo-hero__actions) > .btn:nth-child(1):nth-last-child(2){
        grid-column: 1;
      }
      :is(.hero-actions, .dg-hero__actions, .cg-hero__actions, .io-hero__actions, .hww-hero__actions, .oc-hero__actions, .lo-hero__actions) > .btn:nth-child(2):nth-last-child(1){
        grid-column: 2;
      }
    }

    .hero-brand-images{
      display:flex;
      gap: .75rem;
      align-items:center;
      flex-wrap: wrap;
      margin-top: .85rem;
    }
    .hero-brand-images img{
      height: 36px;
      width: auto;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .hero-subline{
      font-size: 1.14rem;
      max-width: none;
    }
    .hero-supporting-line{
      margin-top: .25rem;
      font-size: var(--text-sm);
      color: rgba(248, 250, 252, .72);
      max-width: none;
    }

    /* Hero secondary button on image background */
    .hero .btn-secondary.btn-hero{
      background: rgba(248, 250, 252, .08);
      border-color: rgba(248, 250, 252, .50);
      color: #f8fafc;
    }
    .hero .btn-secondary.btn-hero:hover{
      background: rgba(248, 250, 252, .14);
      border-color: rgba(248, 250, 252, .62);
      color: #f8fafc;
    }

    /* Brand highlights section (business lines) */
    .brand-highlights{
      background: color-mix(in srgb, var(--surface-2) 36%, var(--bg));
    }
    /* Product showcase: two columns, divider, framed visual, left-aligned (no “cards”) */
    .product-showcase{
      background: var(--bg);
    }
    .showcase{
      display: grid;
      gap: 0;
    }
    /* (showcase--stack removed; use split cards without background images) */
    .showcase--split{
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: 0;
      align-items: stretch;
      gap: clamp(1rem, 2.2vw, 1.5rem);
      margin-top: 1.25rem;
    }
    .showcase--split .showcase-column{
      grid-column: span 6;
      height: 100%;
      min-height: 0;
    }
    .showcase-column{
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      text-align: left;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .showcase-logo{
      position: absolute;
      right: 1.05rem;
      top: 1.05rem;
      z-index: 2;
      padding: .35rem .55rem;
      border-radius: 999px;
      border: 1px solid var(--divider);
      background: color-mix(in srgb, var(--surface) 85%, transparent);
      color: var(--text);
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1;
      pointer-events: none;
    }
    .showcase-column .showcase-content{ position: relative; }
    .showcase-column:not(:last-child){
      border-right: 1px solid var(--divider);
      padding-right: clamp(1.5rem, 2.8vw, 2.5rem);
    }
    .showcase-column:not(:first-child){
      padding-left: clamp(1.5rem, 2.8vw, 2.5rem);
    }
    .showcase-media--image-only{
      position: relative;
      width: 100%;
      margin: 0;
      padding: 0;
      min-height: 0;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      border-radius: var(--radius-md);
    }
    .showcase-hero-image{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .showcase-column .showcase-content{
      margin-top: 1.1rem;
      max-width: none;
    }
    .showcase--split .showcase-column .showcase-content{
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .showcase-content h2{
      margin: 0;
      padding-bottom: 0.6rem;
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1.12;
      color: var(--text);
    }
    .showcase-subline{
      font-size: var(--text-sm);
      color: var(--muted);
      margin: 0 0 0.75rem;
      max-width: 70ch;
      line-height: 1.6;
    }
    .showcase-intro{
      margin: 0 0 0.5rem;
      color: var(--muted);
      max-width: 72ch;
      font-size: var(--text-sm);
      line-height: 1.62;
    }
    .showcase--split .showcase-intro{
      margin-bottom: 0;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      line-clamp: 5;
    }
    .showcase-features{
      margin: 1.05rem 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: .65rem;
    }
    .showcase-feature{
      display: grid;
      gap: .15rem;
      padding: 0;
      border: 0;
      background: transparent;
    }
    .showcase-feature strong{
      font-family: var(--font-display);
      letter-spacing: -.02em;
      color: var(--text);
      font-weight: 800;
    }
    .showcase-feature span{ color: var(--muted); font-size: var(--text-sm); }
    .showcase-cta{
      margin-top: clamp(1.35rem, 2.5vw, 2.1rem);
      display: flex;
      gap: .85rem;
      align-items: center;
      flex-wrap: wrap;
    }
    .showcase--split .showcase-cta{
      margin-top: auto;
      padding-top: clamp(1rem, 2vw, 1.35rem);
    }
    .section-intro{
      display: grid;
      gap: .6rem;
      margin-bottom: 1.25rem;
    }
    .section-intro h2{ margin: 0; }
    .brand-panels{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }
    .brand-panel{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 1.25rem 1.25rem 1.15rem;
      box-shadow: var(--shadow-sm);
      display: grid;
      gap: .65rem;
      transition: background var(--transition), transform var(--transition), border-color var(--transition);
    }
    .brand-panel:hover{
      background: var(--surface-2);
      border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
      transform: translateY(-1px);
    }
    .brand-panel-header{
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
    }
    .brand-panel-header h3{ margin: .2rem 0 0; }
    .brand-tag{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: .35rem .6rem;
      border-radius: var(--radius-xl);
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface));
      color: var(--text);
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: .02em;
      white-space: nowrap;
    }
    .text-link{
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      font-weight: 650;
      color: var(--primary);
      width: fit-content;
    }
    .text-link:hover{ text-decoration: underline; text-underline-offset: 3px; }
    .text-link::after{
      content: ">";
      translate: 0 -1px;
      text-decoration: none;
    }

    .hero-highlights{
      margin-top: 2rem;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }
    .highlight{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 1.1rem 1.15rem;
      box-shadow: var(--shadow-sm);
      display: grid;
      gap: .35rem;
      transition: background var(--transition), transform var(--transition), border-color var(--transition);
    }
    .highlight:hover{
      background: var(--surface-2);
      border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
      transform: translateY(-1px);
    }
    .highlight-top{
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: .25rem;
    }
    .highlight-top strong{
      font-family: var(--font-display);
      letter-spacing: -.03em;
      font-weight: 800;
    }
    .highlight p{ margin: 0; max-width: 70ch; }

    .trust-bar{
      margin-top: 1.15rem;
      display:flex;
      gap: .7rem;
      flex-wrap: wrap;
    }
    .trust-pill{
      padding: .55rem .78rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      background: var(--surface);
      font-size: var(--text-xs);
      color: var(--muted);
      display:inline-flex;
      gap: .5rem;
      align-items:center;
    }
    .trust-dot{
      width: .55rem;
      height: .55rem;
      border-radius: 999px;
      background: color-mix(in srgb, var(--primary) 70%, var(--border));
    }

    /* Enterprise panel */
    .hero-panel{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 1rem;
      box-shadow: var(--shadow-lg);
    }
    .panel-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 1rem; }
    .panel-title{ display:flex; gap: .6rem; align-items:baseline; }
    .panel-title strong{ font-family: var(--font-display); letter-spacing: -.03em; }
    .panel-sub{ color: var(--faint); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; }
    .dots{ display:flex; gap: .45rem; }
    .dots span{ width: .6rem; height: .6rem; border-radius: 999px; background: var(--border); }

    .panel-grid{ display:grid; grid-template-columns: 1fr; gap: 1rem; }
    .panel-card{
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1rem;
    }
    .panel-split{
      display:grid;
      grid-template-columns: 1fr;
      gap: .85rem;
      margin-top: .85rem;
    }
    .panel-mini{
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: .95rem;
    }
    .panel-mini h4{ margin: 0 0 .4rem; }
    .panel-mini p{ margin: 0; }
    .panel-card .kicker{
      display:block;
      color: var(--faint);
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: .09em;
      margin-bottom: .5rem;
    }
    .list{ display:grid; gap: .7rem; }
    .list-item{
      display:grid;
      grid-template-columns: auto 1fr auto;
      gap: .75rem;
      align-items:center;
      padding: .85rem;
      border-radius: var(--radius-md);
      background: var(--surface);
      border: 1px solid var(--border);
    }
    .bullet{
      width: .9rem; height: .9rem; border-radius: 999px;
      background: var(--primary);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
    }
    .bullet.blue{ background: var(--primary-2); }
    .bullet.green{ background: var(--success); }

    /* Standard .editorial-intro: linke 4 Spalten (Solutions + Proof). How we deliver: volle Zeile. */
    .section-head{
      display:grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--layout-gutter);
      row-gap: 1rem;
      align-items: start;
      margin-bottom: 2rem;
    }
    .editorial-intro{
      grid-column: 1 / span 4;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.9rem;
    }
    .editorial-intro h2{
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(1.9rem, 1.32rem + 1.4vw, 2.75rem);
      line-height: 1.08;
      letter-spacing: -.04em;
      color: var(--text);
    }
    .editorial-intro > p:not(.dg-kicker),
    .editorial-intro .approach-band-lead{
      margin: 0;
      font-size: var(--text-sm);
      color: var(--muted);
      line-height: 1.6;
      max-width: min(68ch, 100%);
    }
    .approach-band-head .editorial-intro{
      grid-column: 1 / -1;
      width: 100%;
      max-width: 100%;
      align-items: stretch;
    }
    .approach-band-head .editorial-intro h2{
      font-size: clamp(2rem, 1.45rem + 1.65vw, 2.9rem);
      line-height: 1.06;
      max-width: min(36ch, 100%);
      align-self: flex-start;
    }
    .approach-band-head .editorial-intro .approach-band-lead{
      max-width: min(68ch, 100%);
      width: auto;
      line-height: 1.6;
      box-sizing: border-box;
    }
    .editorial-intro a{
      color: #2b76f3;
      font-weight: 600;
      text-decoration: none;
    }
    .editorial-intro a:hover,
    .editorial-intro a:focus-visible{
      text-decoration: none;
      opacity: .88;
    }
    .editorial-intro a:focus-visible{
      outline: 2px solid color-mix(in srgb, #2b76f3 45%, transparent);
      outline-offset: 2px;
      border-radius: 2px;
    }

    .grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
    .grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
    .card{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 1.2rem;
      box-shadow: var(--shadow-sm);
    }
    .card p{ margin-bottom: 0; }

    .card-top{ display:flex; justify-content:space-between; gap: 1rem; margin-bottom: 1rem; align-items:flex-start; }
    .icon{
      width: 2.5rem; height: 2.5rem;
      border-radius: var(--radius-lg);
      background: var(--primary-soft);
      display:grid;
      place-items:center;
      color: var(--primary);
      font-family: var(--font-display);
      font-weight: 800;
      letter-spacing: -.03em;
    }
    .icon.alt{ color: var(--primary-2); background: color-mix(in srgb, var(--primary-2) 12%, var(--surface)); }

    .card ul{ margin: 0; padding-left: 1.1rem; }
    .card li{ margin: .35rem 0; color: var(--muted); }

    .quote{
      background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface));
      border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
    }

    /* Company: knapper editorialer Trenner — eine starke Zeile, kein Panel */
    #company{
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, #f7f4ee) 0%, #f7f4ee 28%, #f7f4ee 100%);
      padding: clamp(2.25rem, 4.5vw, 3.25rem) 0 clamp(2.5rem, 5vw, 3.5rem);
    }
    .company-bridge{
      max-width: 100%;
    }
    .company-bridge__headline{
      font-family: var(--font-display);
      font-size: var(--text-hero);
      font-weight: 600;
      line-height: 1.02;
      letter-spacing: -.045em;
      color: var(--text);
      margin: 0 0 .85rem;
      max-width: 22ch;
    }
    .company-bridge__statement{
      margin: 0;
      font-size: clamp(1.12rem, 1rem + .35vw, 1.25rem);
      line-height: 1.5;
      letter-spacing: -.015em;
      color: var(--text);
      max-width: 100%;
    }

    /* Solutions: headline + copy on top, 4 cards below (like reference screenshot) */
    .solutions-grid{
      display: block;
    }
    .solutions-grid .editorial-intro{
      padding-right: 0;
      max-width: 62rem;
    }
    .solutions-kicker{
      /* keep `.dg-kicker` as the source of truth (no local overrides) */
      margin: 0 0 .75rem;
      color: color-mix(in srgb, var(--text) 82%, var(--muted));
    }
    .solutions-grid .editorial-intro h2{
      font-size: clamp(1.95rem, 1.35rem + 1.55vw, 2.65rem);
      line-height: 1.06;
      margin: 0 0 1rem;
      max-width: 15ch;
    }
    .solutions-grid .editorial-intro > p{
      max-width: 68ch;
      line-height: 1.55;
    }
    .solutions-cards{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
      align-items: stretch;
      min-width: 0;
      margin-top: clamp(1.25rem, 2.4vw, 1.85rem);
    }
    @media (max-width: 1024px){
      .solutions-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px){
      .solutions-cards{ grid-template-columns: 1fr; }
    }
    .solution-card{
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      min-width: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: none;
    }
    .solution-card-img{
      flex-shrink: 0;
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      display: block;
      overflow: hidden;
    }
    /* Solutions: Desktop Panorama (::before + fixed); Mobil keine Bildzeilen (page-home). */
    .solution-card-img img{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 48%;
      display: block;
      z-index: 1;
    }
    @media (min-width: 901px){
      .solution-card-img img{
        display: none;
      }
      .solution-card-img::before{
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: none;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-attachment: fixed;
      }
    }
    @media (max-width: 900px){
      body.page-home #solutions .solution-card-img{
        display: none;
      }
      body.page-home #solutions .solution-card-body{
        border-radius: var(--radius-lg);
      }
    }
    .solution-card-body{
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
      background: var(--surface);
      padding:
        clamp(1.85rem, 2.8vw, 2.35rem)
        clamp(1.55rem, 2.6vw, 2.05rem)
        clamp(1.95rem, 3vw, 2.55rem);
    }
    .solution-card h3{
      font-size: clamp(1.35rem, 1.1rem + 0.65vw, 1.75rem);
      margin: 0 0 .55rem;
      letter-spacing: -.03em;
      line-height: 1.12;
    }
    .solution-card-body p{
      margin: 0;
      font-size: var(--text-sm);
      color: var(--muted);
      line-height: 1.6;
      max-width: none;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      line-clamp: 4;
    }
    .solution-card-link{
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      margin-top: auto;
      padding-top: clamp(.75rem, 1.6vw, 1rem);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--primary);
      width: fit-content;
      text-decoration: none;
      transition: color var(--transition), opacity var(--transition);
    }
    /* Arrow style like reference (simple →) */
    .solution-card-link::after{
      content: "→";
      margin-left: .25rem;
      line-height: 1;
      transform: translateX(0);
      transition: transform var(--transition);
    }
    .solution-card-link:hover,
    .solution-card-link:active{
      text-decoration: none;
      color: color-mix(in srgb, var(--primary) 88%, #000);
    }
    .solution-card-link:focus-visible{
      text-decoration: none;
      outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
      outline-offset: 3px;
      border-radius: 2px;
    }
    .solution-card-link__icon{
      flex-shrink: 0;
      display: none;
      margin-top: 1px;
      transition: transform var(--transition);
    }
    .solution-card-link:hover::after,
    .solution-card-link:focus-visible::after{
      transform: translateX(3px);
    }

    /* How we deliver — enterprise grid (header + 8 tiles) */
    .approach-band-head{
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--layout-gutter);
      row-gap: 1rem;
      align-items: start;
      margin-bottom: 2.35rem;
    }
    /* How we deliver — typical outcomes (Homepage) */
    .approach-outcomes{
      max-width: 100%;
    }
    .approach-outcome-features{
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(1.25rem, 3vw, 2.25rem);
      max-width: 100%;
      margin-inline: 0;
      align-items: start;
      list-style: none;
      padding: 0;
    }
    .approach-outcome-feature{
      margin: 0;
      padding: clamp(0.9rem, 1.5vw, 1.1rem) 0 0;
      border-top: 1px solid var(--divider);
      text-align: left;
      min-width: 0;
    }
    .approach-outcome-feature__title{
      margin: 0 0 0.55rem;
      font-family: var(--font-display);
      font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.3;
      color: var(--text);
    }
    .approach-outcome-feature__text{
      margin: 0;
      font-size: var(--text-sm);
      line-height: 1.55;
      color: var(--muted);
      max-width: none;
    }
    .approach-outcomes__actions{
      display: flex;
      justify-content: center;
      margin-top: clamp(1.5rem, 3vw, 2.1rem);
    }
    @media (min-width: 901px){
      .approach-outcome-features{
        grid-template-columns: repeat(12, minmax(0, 1fr));
      }
      .approach-outcome-feature{
        grid-column: span 4; /* 3 items in first row */
      }
      /* When there are 5 items: keep last row left-aligned (same width as above) */
      .approach-outcome-feature:nth-child(4){
        grid-column: 1 / span 4;
      }
      .approach-outcome-feature:nth-child(5){
        grid-column: 5 / span 4;
      }
    }
    .approach-snapshot{
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--layout-gutter);
      row-gap: clamp(1.25rem, 2.2vw, 1.75rem);
      align-items: center;
    }
    .approach-snapshot__media{
      grid-column: 1 / span 6;
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 1px solid var(--divider);
      background-image: none;
      background-color: var(--surface-2);
      /* Fit width to the block */
      background-size: 100% auto;
      background-repeat: no-repeat;
      /* push focus noticeably upwards */
      background-position: 50% 12%;
      aspect-ratio: 16 / 11;
    }
    .approach-snapshot__sr{
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .approach-snapshot__svg{
      width: 100%;
      height: auto;
      display: block;
    }
    .approach-snapshot__content{
      grid-column: 7 / -1;
      min-width: 0;
      padding-left: clamp(0.5rem, 1.1vw, 1rem);
    }
    .approach-snapshot__items{
      display: grid;
      gap: 1.1rem;
    }
    .approach-snapshot__item{
      padding: 0;
      border: 0;
    }
    .approach-snapshot__item h3{
      margin: 0 0 0.35rem;
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.25;
      color: var(--text);
    }
    .approach-snapshot__item p{
      margin: 0;
      font-size: var(--text-sm);
      line-height: 1.6;
      color: var(--muted);
      max-width: 66ch;
    }
    .approach-snapshot__actions{
      margin-top: 1.35rem;
    }
    @media (max-width: 900px){
      .approach-snapshot__media{ grid-column: 1 / -1; }
      .approach-snapshot__content{ grid-column: 1 / -1; }
    }
    .approach-grid{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
    }
    .approach-tile{
      display: flex;
      flex-direction: column;
      min-height: 168px;
      padding: 1.2rem 1.15rem 1.15rem;
      background: var(--surface);
      border: 1px solid var(--divider);
      border-radius: var(--radius-md);
      box-shadow: none;
      text-decoration: none;
      color: inherit;
      transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    }
    .approach-tile:hover{
      text-decoration: none;
      border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
      box-shadow: 0 6px 22px rgba(10,10,10,.05);
      transform: translateY(-1px);
    }
    .approach-tile:focus-visible{
      outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
      outline-offset: 3px;
    }
    .approach-tile__body{
      display: grid;
      align-items: start;
      min-height: 6rem;
    }
    .approach-tile__title,
    .approach-tile__desc{
      grid-area: 1 / 1;
      align-self: start;
      max-width: 100%;
      transition: opacity var(--transition);
    }
    .approach-tile__title{
      font-family: var(--font-display);
      font-size: var(--text-sm);
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.25;
      color: var(--text);
      max-width: 20ch;
    }
    .approach-tile__desc{
      margin: 0;
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.55;
      color: var(--muted);
      opacity: 0;
      pointer-events: none;
    }
    .approach-tile:hover .approach-tile__title,
    .approach-tile:focus-within .approach-tile__title{
      opacity: 0;
      pointer-events: none;
    }
    .approach-tile:hover .approach-tile__desc,
    .approach-tile:focus-within .approach-tile__desc{
      opacity: 1;
      pointer-events: auto;
    }
    .approach-tile__spacer{
      flex: 1;
      min-height: 1.25rem;
    }
    .approach-tile__foot{
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: .75rem;
    }
    .approach-tile__icon{
      flex-shrink: 0;
      width: 38px;
      height: 38px;
      color: #2b76f3;
    }
    .approach-tile__arrow{
      flex-shrink: 0;
      width: 20px;
      height: 10px;
      color: #2b76f3;
      transition: transform var(--transition);
    }
    .approach-tile:hover .approach-tile__arrow,
    .approach-tile:focus-visible .approach-tile__arrow{
      transform: translateX(3px);
    }
    .approach-tile:nth-child(n+5){
      min-height: 152px;
      padding: 1.05rem 1rem 1rem;
    }
    .approach-tile:nth-child(n+5) .approach-tile__desc{ font-size: .85rem; }

    /* Proof: intro 4 + 2×2 Karten 8 (eine Zeile) */
    .proof-layout{
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--layout-gutter);
      row-gap: clamp(1.5rem, 2.2vw, 2.5rem);
      align-items: start;
    }
    .proof-layout .editorial-intro{
      padding-right: var(--editorial-bridge);
    }
    .proof-layout .editorial-intro h2{
      margin: 0 0 1rem;
      font-size: clamp(1.8rem, 1.3rem + 1.3vw, 2.4rem);
      line-height: 1.08;
      letter-spacing: -.04em;
    }
    .proof-layout .editorial-intro > p{
      line-height: 1.65;
      max-width: 40ch;
    }
    /* Proof outcomes — icon + text grid (no card backgrounds) */
    .proof-layout .editorial-intro{
      grid-column: 1 / -1;
      padding-right: 0;
      max-width: 62rem;
    }
    .proof-layout .editorial-intro > p{
      max-width: 68ch;
    }
    .proof-outcomes{
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(1.35rem, 2.8vw, 2.35rem);
      margin-top: clamp(0.05rem, 0.35vw, 0.25rem);
    }
    @media (max-width: 1024px){
      .proof-outcomes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px){
      .proof-outcomes{ grid-template-columns: 1fr; }
    }
    .proof-outcome{
      padding-top: clamp(0.85rem, 1.4vw, 1.05rem);
      min-width: 0;
    }
    .proof-outcome__icon{
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 50%;
      background: var(--text);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 0 color-mix(in srgb, #fff 12%, transparent) inset;
      margin-bottom: 0.85rem;
    }
    .proof-outcome__icon svg{
      display: block;
      width: 1.25rem;
      height: 1.25rem;
    }
    .proof-outcome h3{
      margin: 0 0 0.55rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.25;
    }
    .proof-outcome p{
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
      max-width: 44ch;
    }

    /* CTA band */
    .cta-band{
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      padding: 2.75rem 2.5rem;
      border-radius: var(--radius-xl);
      background: var(--text);
      display:grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--layout-gutter);
      row-gap: 1.25rem;
      align-items:end;
      box-shadow: var(--shadow-lg);
    }
    .cta-band > div:first-child{ grid-column: 1 / span 8; min-width: 0; }
    .cta-band .cta-actions{
      grid-column: 9 / span 4;
      justify-self: end;
      display: grid;
      grid-template-columns: 1fr;
      column-gap: var(--layout-gutter);
      row-gap: 0.85rem;
      justify-items: stretch;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    .cta-band h2,.cta-band p{ color: #f7f4ee; }
    .cta-band p{ color: rgba(247,244,238,.84); max-width: 60ch; }
    .cta-band .cta-actions > .btn{
      width: 100%;
      min-width: 0;
      justify-self: stretch;
      justify-content: center;
      text-align: center;
      white-space: normal;
    }
    @media (min-width: 901px){
      .cta-band .cta-actions{
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .cta-band .cta-actions > .btn:only-child{
        grid-column: 1;
      }
      .cta-band .cta-actions > .btn:nth-child(1):nth-last-child(2){
        grid-column: 1;
      }
      .cta-band .cta-actions > .btn:nth-child(2):nth-last-child(1){
        grid-column: 2;
      }
    }
    /* dg-final: copy links max. halbe Breite, rechts Platz für Button nach Textbreite */
    .dg-final .cta-actions{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.85rem;
      width: auto;
      max-width: 100%;
      justify-self: end;
    }
    .dg-final .cta-actions > .btn{
      width: auto;
      max-width: 100%;
      justify-content: center;
      text-align: center;
      /* wie übrige Hero-/Showcase-CTAs: Zeile aus .btn (nowrap), Maße aus .btn-hero */
    }

    /* Footer */
    .footer{ padding: 2rem 0 2.5rem; border-top: 1px solid var(--divider); }
    .footer-grid{
      display:grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 1.5rem 2rem;
      align-items: start;
    }
    .footer .footer-section + .footer-section{ margin-top: 1.25rem; }
    .footer p,.footer a{ color: var(--muted); }
    .footer a:hover,
    .footer a:focus-visible{
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .footer strong{ color: var(--text); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
    .footer .brand{ margin: 0; }
    .footer .brand-logo{ height: 22px; width: auto; }
    .footer p.footer-brand-subline{
      margin: .6rem 0 .7rem;
      padding-right: clamp(2rem, 5vw + 0.5rem, 4.5rem);
      max-width: min(42rem, 100%);
      font-size: var(--text-sm);
      line-height: 1.6;
      font-weight: 400;
      color: var(--muted);
    }
    .footer-contact{
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      margin-top: .85rem;
      font-weight: 600;
      font-size: var(--text-sm);
      color: var(--text);
      text-decoration: none;
      transition: color var(--transition);
    }
    .footer-contact:hover{ color: var(--primary); }
    .footer-contact__icon{
      width: 1.125rem;
      height: 1.125rem;
      flex-shrink: 0;
      color: var(--muted);
    }
    .footer-contact:hover .footer-contact__icon{ color: var(--text); }
    .footer-links{ display:grid; gap: .45rem; margin-top: .7rem; }
    .footer-col-heading{
      display: block;
      margin: 0 0 .65rem;
    }
    .footer-col-heading + .brand{ margin-top: 0.15rem; }
    .footer-col-heading + .footer-section{ margin-top: 0.15rem; }
    .footer-section > strong{ display: block; }
    .footer-meta{
      margin-top: 2.25rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--divider);
    }
    .footer-copyright{
      margin: 0;
      font-size: .8125rem;
      color: var(--muted);
    }
    .footer-grid > div:first-child .footer-social{
      margin-top: 1.1rem;
    }
    .footer-social{
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
    }
    .footer-social a{
      display: grid;
      place-items: center;
      width: 2.1rem;
      height: 2.1rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--muted);
      transition: color var(--transition), border-color var(--transition), background var(--transition);
    }
    .footer-social a:hover{
      color: var(--text);
      border-color: color-mix(in srgb, var(--text) 25%, var(--border));
      background: var(--surface-2);
    }
    .footer-social svg{ width: 1rem; height: 1rem; }

    /* Mobile footer accordion (Ceperia look & feel) */
    .footer-mobile{ display:none; margin-top: 1.25rem; }
    .footer-mobile{ --footer-acc-lead: 1.1rem; --footer-acc-gap: 1rem; }
    .footer-acc{
      border-top: 1px solid var(--divider);
    }
    .footer-acc:last-child{ border-bottom: 0; }
    .footer-acc__summary{
      list-style: none;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap: var(--footer-acc-gap);
      padding: 1rem 0.1rem;
      cursor: pointer;
      font-weight: 650;
      color: var(--text);
      user-select: none;
    }
    .footer-acc__lead{
      color: color-mix(in srgb, var(--text) 55%, var(--muted));
      width: var(--footer-acc-lead);
      flex: 0 0 auto;
      line-height: 1;
      display:inline-flex;
      justify-content:flex-start;
    }
    .footer-acc__summary::-webkit-details-marker{ display:none; }
    /* right-side chevron intentionally removed (left lead arrow only) */
    .footer-acc__body{
      padding: 0 0 1rem;
      padding-left: calc(var(--footer-acc-lead) + var(--footer-acc-gap));
      margin: 0;
    }
    .footer-acc__body.footer-links{ margin-top: 0; }

    /* Mobile menu */
    .menu-toggle{ display:none; }
    .drawer-backdrop{
      position: fixed; inset: 0;
      background: rgba(0,0,0,.35);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition);
      z-index: 60;
    }
    .drawer{
      position: fixed;
      top: 0; right: 0;
      height: 100%;
      width: min(420px, calc(100% - 3rem));
      background: var(--bg);
      border-left: 1px solid var(--border);
      transform: translateX(105%);
      transition: transform var(--transition);
      z-index: 70;
      display:grid;
      grid-template-rows: auto 1fr auto;
      box-shadow: var(--shadow-lg);
      overflow: hidden; /* ensure scroll stays inside .drawer-nav */
    }
    .drawer-header{
      padding: 1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom: 1px solid var(--divider);
    }
    /* Use the same visual language switch as header */
    .drawer-header .drawer-lang{
      display:flex;
      align-items:center;
    }

    /* Drawer nav: SAP-like drilldown list (no search/icons) */
    .drawer-nav{
      padding: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      min-height: 0; /* allow grid child to be scroll container */
    }
    /* Global `section{ padding: ... }` must not affect drawer subviews */
    .drawer :where(section){ padding: 0; border-top: 0; }
    .drawer-list{
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
    }
    .drawer-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      width: 100%;
      padding: 1.05rem 1rem;
      border: 0;
      border-bottom: 1px solid var(--divider);
      background: transparent;
      color: var(--text);
      font-weight: 650;
      font-size: var(--text-sm);
      text-align:left;
      cursor: pointer;
    }
    /* Submenus (2nd level) should not appear bold */
    .drawer :where([data-drawer-view="sub"]) .drawer-item{
      font-weight: 600;
    }
    .drawer-item:where(a){ cursor: pointer; }
    .drawer-item:hover{ background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
    .drawer-item__chev{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 999px;
      color: color-mix(in srgb, var(--text) 50%, var(--muted));
    }

    .drawer-subhead{
      display:grid;
      grid-template-columns: auto 1fr auto;
      align-items:center;
      gap: .5rem;
      padding: .9rem 1rem;
      border-bottom: 1px solid var(--divider);
      width: 100%;
      background: transparent;
      border-left: 0;
      border-right: 0;
      border-top: 0;
      text-align: left;
      cursor: pointer;
    }
    .drawer-subhead__title{
      text-align:center;
      font-weight: 800;
      font-family: var(--font-display);
      letter-spacing: -.01em;
    }
    .drawer-back{
      display:inline-flex;
      align-items:center;
      justify-content:flex-start;
      width: 2.2rem;
      height: 2.2rem;
      color: var(--text);
      border-radius: 999px;
      padding: 0 .15rem;
    }
    /* Entire header is clickable back; no hover background on arrow */
    .drawer-subhead:hover{ background: transparent; }

    .drawer-footer{
      padding: 1rem;
      border-top: 1px solid var(--divider);
      display:flex;
      gap: .75rem;
      flex-wrap: wrap;
    }
    /* Keep drawer CTA consistent across subpages (e.g. OneCivic overrides) */
    .drawer-footer .btn-drawer-cta{
      background: var(--ceperia-primary);
      border-color: var(--ceperia-primary);
      color: var(--ceperia-inverse);
    }
    .drawer-footer .btn-drawer-cta:hover{
      filter: brightness(.96);
    }
    [data-menu-open="true"] .drawer-backdrop{ opacity: 1; pointer-events: auto; }
    [data-menu-open="true"] .drawer{ transform: translateX(0%); }

    /* Responsive */
    @media (max-width: 1080px){
      .hero-copy{ grid-column: 1 / span 10; }
      .solutions-grid .editorial-intro{
        grid-column: 1 / -1;
        max-width: 42rem;
        padding-right: 0;
      }
      .solutions-cards{
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
      }
      /* Einspaltig unter 1080px: voller Rahmen (kein border-right: 0, sonst fehlt die rechte Kante). */
      .solutions-cards .solution-card:not(:last-child){
        border-bottom: 1px solid var(--border);
      }
      .approach-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .proof-layout .editorial-intro{
        grid-column: 1 / -1;
        max-width: 44rem;
        padding-right: 0;
      }
      .proof-outcomes{ grid-column: 1 / -1; }
      .showcase--split .showcase-column{ grid-column: 1 / -1; }
      .showcase--split{ gap: 0; }
      .grid-4{ grid-template-columns: repeat(2,1fr); }
      .grid-3{ grid-template-columns: 1fr 1fr; }
      .footer-grid{ grid-template-columns: 1fr 1fr; }
      .footer-grid > div:nth-child(3){ grid-column: 1 / -1; }
      .cta-band > div:first-child,
      .cta-band .cta-actions{ grid-column: 1 / -1; }
      .cta-band .cta-actions{ justify-self: start; }
      .showcase-column:not(:last-child){
        border-right: 0;
        padding-right: 0;
        border-bottom: 1px solid var(--divider);
        padding-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
        margin-bottom: 0;
      }
      .showcase-column:not(:first-child){
        padding-left: 0;
        padding-top: clamp(2.25rem, 4.5vw, 3.25rem);
      }
      /* Label nicht mehr neben der Headline (absolute Ecke), sondern darüber im Fluss */
      .showcase--split .showcase-logo{
        position: static;
        margin: 0 0 0.65rem;
        align-self: flex-start;
      }
    }
    @media (max-width: 820px){
      .nav{ display:none; }
      .menu-toggle{ display:inline-flex; }
      .site-header .lang-switch{ display:none; }
      .mega, .mega-backdrop{ display:none; }
    }
    @media (max-width: 760px){
      .hero-copy{ grid-column: 1 / -1; }
      .approach-grid{ grid-template-columns: 1fr; }
      .proof-outcomes{ grid-template-columns: 1fr; }
      .panel-grid,.grid-4,.grid-3,.footer-grid{ grid-template-columns: 1fr; }
      .footer-grid > div:nth-child(3){ grid-column: auto; }
      /* Footer: keep brand column, switch nav to accordion */
      .footer-grid > div:nth-child(2),
      .footer-grid > div:nth-child(3){ display:none; }
      .footer-mobile{ display:block; }
      .hero{ padding-top: 3rem; }
      .hero-copy p{ font-size: 1rem; }
      h1{ max-width: 15ch; }
      .brand-panels{ grid-template-columns: 1fr; }
    }

    /* Density options (high-end “enterprise polish”) */
    [data-density="compact"] section{ padding: 3.25rem 0; }
    [data-density="compact"] .hero{ padding: clamp(3rem, 6vw, 6.5rem) 0 2.25rem; }