/* -----------------------------
       Fonts (aus ./fonts)
       ----------------------------- */
    @font-face{
      font-family:"PMNCaeciliaSans";
      src:url("./fonts/PMNCaeciliaSansTextRg.TTF") format("truetype");
      font-weight:400;
      font-style:normal;
      font-display:swap;
    }
    @font-face{
      font-family:"PMNCaeciliaSans";
      src:url("./fonts/PMNCaeciliaSansTextRgIt.TTF") format("truetype");
      font-weight:400;
      font-style:italic;
      font-display:swap;
    }
    @font-face{
      font-family:"PMNCaeciliaSans";
      src:url("./fonts/PMNCaeciliaSansTextBd.TTF") format("truetype");
      font-weight:700;
      font-style:normal;
      font-display:swap;
    }
    @font-face{
      font-family:"PMNCaeciliaSans";
      src:url("./fonts/PMNCaeciliaSansTextBdIt.TTF") format("truetype");
      font-weight:700;
      font-style:italic;
      font-display:swap;
    }

    :root{
      /* -----------------------------------------------------------
         Design system (Feinkost)
         -----------------------------------------------------------
         Token categories (naming guide):
         - Spacing: --space-*   -> margin/padding/gap/offset rhythm
         - Size:    --size-*    -> width/height and object dimensions
         - Radius:  --radius-*  -> border-radius values
         - Line:    --line-*    -> stroke/border/1px-2px UI lines
         - Color:   --color-*   -> semantic theme roles (text/surface/accent)
         - Button:  --btn-*     -> reusable button color behaviors

         Spacing scale (strict 4px grid):
         --space-1  =  4px  | --space-5  = 24px | --space-9  =  96px | --space-13 = 256px
         --space-2  =  8px  | --space-6  = 32px | --space-10 = 128px | --space-14 = 320px
         --space-3  = 12px  | --space-7  = 48px | --space-11 = 160px | --space-15 = 384px
         --space-4  = 16px  | --space-8  = 64px | --space-12 = 192px | --space-16 = 448px

         Typography scale (reduced):
         --text-xs 16px | --text-s 20px | --text-m 24px | --text-l 32px
         --text-xl 48px | --text-2xl 64px | --text-3xl 96px | --text-4xl 128px

         Utilities:
         Spacing  -> .m-*, .mt-*, .mb-*, .ml-*, .mr-*, .mx-*, .my-*,
                     .p-*, .pt-*, .pb-*, .pl-*, .pr-*, .px-*, .py-*, .gap-*
         Type     -> .text-*, .lh-*
         ----------------------------------------------------------- */

      /* Spacing scale (4px base) */
      --space-1: 0.25rem;  /* 4px */
      --space-2: 0.5rem;   /* 8px */
      --space-3: 0.75rem;  /* 12px */
      --space-4: 1rem;     /* 16px */
      --space-5: 1.5rem;   /* 24px */
      --space-6: 2rem;     /* 32px */
      --space-7: 3rem;     /* 48px */
      --space-8: 4rem;     /* 64px */
      --space-9: 6rem;     /* 96px */
      --space-10: 8rem;    /* 128px */
      --space-11: 10rem;   /* 160px */
      --space-12: 12rem;   /* 192px */
      --space-13: 16rem;   /* 256px */
      --space-14: 20rem;   /* 320px */
      --space-15: 24rem;   /* 384px */
      --space-16: 28rem;   /* 448px */

      /* Generic size tokens (reusable object dimensions) */
      --size-1: var(--space-1);
      --size-2: var(--space-2);
      --size-3: var(--space-3);
      --size-4: var(--space-4);
      --size-5: var(--space-5);
      --size-6: var(--space-6);
      --size-7: var(--space-7);
      --size-8: var(--space-8);
      --size-9: var(--space-9);
      --size-10: var(--space-10);
      --size-11: var(--space-11);
      --size-12: var(--space-12);
      --size-13: var(--space-13);
      --size-14: var(--space-14);
      --size-15: var(--space-15);
      --size-16: var(--space-16);

      /* Generic radius tokens */
      --radius-none: 0;
      --radius-3: var(--space-3);
      --radius-4: var(--space-4);
      --radius-round: 50%;
      --radius-full: 999px;
      --line-1: 1px;
      --line-2: 2px;

      /* Typography scale */
      --text-xs: 1rem;      /* 16px */
      --text-s: 1.25rem;    /* 20px */
      --text-m: 1.5rem;     /* 24px */
      --text-l: 2rem;       /* 32px */
      --text-xl: 3rem;      /* 48px */
      --text-2xl: 4rem;     /* 64px */
      --text-3xl: 6rem;     /* 96px */
      --text-4xl: 8rem;     /* 128px */
      --baseline-grid: calc(var(--text-s) * var(--lh-normal));

      /* Line heights */
      --lh-display: 1.05;
      --lh-flat: 1;
      --lh-snug: 1.2;
      --lh-tight: 1.15;
      --lh-normal: 1.35;
      --lh-relaxed: 1.5;

      --marker-top-base: 0;
      --header-visible: 0px;
      --header-logo-offset: var(--space-8);
      --content-cols: 12; /* content area columns (grid-cols - rail-span) */
      --color-black: #000000;
      --color-white: #ffffff;
      --color-turquoise: #00ffe0;
      --color-purple: #6633cc;
      --color-legal-light: #ccfff9;
      --color-legal-dark: #291452;
      --color-gray: #999999;
      --color-clients-hover: var(--color-legal-light);

      --color-bg: var(--color-white);
      --color-bg-rgb: 255, 255, 255;
      --color-text: var(--color-black);
      --color-text-rgb: 0, 0, 0;
      --color-accent: var(--color-turquoise);
      --color-accent-contrast: var(--color-black);
      --btn-secondary-border: var(--color-text);
      --btn-secondary-fg: var(--color-text);
      --btn-secondary-hover-bg: var(--color-text);
      --btn-secondary-hover-fg: var(--bg);
      --btn-primary-bg: var(--color-text);
      --btn-primary-fg: var(--bg);
      --btn-primary-border: var(--marker-border) solid transparent;
      --btn-primary-hover-bg: transparent;
      --btn-primary-hover-fg: var(--color-text);
      --btn-primary-hover-border: var(--marker-border) solid var(--color-text);
      --btn-attention-bg: var(--color-accent);
      --btn-attention-fg: var(--color-accent-contrast);
      --btn-attention-border: var(--marker-border) solid transparent;
      --btn-attention-hover-bg: var(--color-text);
      --btn-attention-hover-fg: var(--bg);
      --btn-attention-hover-border: var(--marker-border) solid transparent;

      --cursor-accent: var(--color-turquoise);
      --cursor-accent-contrast: var(--color-black);
      --cursor-special-bg: var(--color-black);
      --cursor-special-fg: var(--color-white);
      --bg: var(--color-bg);
      --text-main: var(--color-text);
      --line: var(--color-gray);
      --ink: var(--color-text);
      --paper: var(--color-bg);
      --ink-rgb: var(--color-text-rgb);
      --paper-rgb: var(--color-bg-rgb);
      --icon-filter: none;
      --meta-muted: var(--color-gray);

      /* Grid system (Desktop default) */
      --outer-pad-left: var(--space-8);  /* mobile overrides to asymmetric values */
      --outer-pad-right: var(--space-8);
      --gap: var(--space-6);

      --grid-cols: 16;     /* desktop */
      --rail-span: 4;      /* desktop: 4/12 */
      --content-start: 5;  /* rail-span + 1 */
      --display-heading-span: 15;
      --menu-panel-start-column: 6;
      --menu-panel-link-start: 9;
      --menu-panel-cols: 11;
      --menu-grid-col-w: calc((100vw - var(--outer-pad-left) - var(--outer-pad-right) - ((var(--grid-cols) - 1) * var(--gap))) / var(--grid-cols));
      --menu-panel-left: calc((var(--menu-panel-start-column) - 1) * (var(--menu-grid-col-w) + var(--gap)));
      --projects-card-row-offset: var(--space-8);
      --after-divider-offset: var(--space-8);
      --site-min-width: 20rem;

      /* Marker styling */
      --marker-h: var(--size-7);
      --marker-radius: var(--radius-full);
      --marker-border: var(--line-2);

      /* Filter / tags */
      --filter-btn-h: calc(var(--marker-h) - var(--space-3));
      --color-control-track: #e8e8e8;

      /* Project image placeholder */
      --img: url("./placeholder.jpg"); /* <- ersetze durch dein Desktopbild */
    }

    html,
    body{
      min-width: var(--site-min-width);
      max-width:100%;
    }

    html{
      overflow-x:auto;
    }

    body{
      overflow-x:clip;
    }

    :root[data-theme="dark"]{
      --color-bg: var(--color-black);
      --color-bg-rgb: 0, 0, 0;
      --color-text: var(--color-white);
      --color-text-rgb: 255, 255, 255;
      --color-accent: var(--color-purple);
      --color-accent-contrast: var(--color-white);
      --color-gray: #666666;
      --color-clients-hover: var(--color-legal-dark);

      --cursor-accent: var(--color-purple);
      --cursor-accent-contrast: var(--color-white);
      --cursor-special-bg: var(--color-white);
      --cursor-special-fg: var(--color-black);
      --bg: var(--color-bg);
      --line: var(--color-gray);
      --ink: var(--color-text);
      --paper: var(--color-bg);
      --ink-rgb: var(--color-text-rgb);
      --paper-rgb: var(--color-bg-rgb);
      --icon-filter: invert(1);
      --meta-muted: var(--color-gray);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      background:var(--bg);
      color:var(--text-main);
      font-family:"PMNCaeciliaSans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size: var(--text-s);
      font-weight:400;
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }
    strong,
    b{
      font-weight:700;
    }

    /* Sprachabhängige Worttrennung nur in längeren redaktionellen Texten. */
    :where(
      .hero-intro-text,
      .intro-body,
      .section-copy,
      .services-preview-copy,
      .service-item-content,
      .project-description-body,
      .team-card-copy,
      .contact-intro-copy,
      .legal-intro-body,
      .section-marker-copy,
      .project-related-copy
    ){
      word-break:normal;
      overflow-wrap:normal;
      -webkit-hyphens:auto;
      hyphens:auto;
      hyphenate-limit-chars:8 3 3;
    }
    :where(h1, h2, h3, h4, h5, h6, nav, button, label, summary){
      -webkit-hyphens:none;
      hyphens:none;
    }
    body.menu-open{
      overflow:hidden;
    }
    body.home-page{
      --home-hero-top-offset: var(--space-12);
      --home-hero-bottom-gap: var(--space-8);
      display:block;
    }
    body.legal-page{
      --legal-bg-light: var(--color-legal-light);
      --legal-bg-dark: var(--color-legal-dark);
      --legal-main-light: var(--color-black);
      --legal-main-dark: var(--color-white);
      --legal-main-dark-rgb: 255, 255, 255;
      --color-bg: var(--legal-bg-light);
      --color-bg-rgb: 204, 255, 249;
      --color-text: var(--legal-main-light);
      --color-text-rgb: 0, 0, 0;
      --bg: var(--color-bg);
      --paper: var(--color-bg);
      --text-main: var(--color-text);
      --line: var(--color-gray);
      --ink: var(--color-text);
      --ink-rgb: var(--color-text-rgb);
      --paper-rgb: var(--color-bg-rgb);
      background: var(--bg);
    }
    :root[data-theme="dark"] body.legal-page{
      --color-bg: var(--legal-bg-dark);
      --color-bg-rgb: 41, 20, 82;
      --color-text: var(--legal-main-dark);
      --color-text-rgb: var(--legal-main-dark-rgb);
      --bg: var(--color-bg);
      --paper: var(--color-bg);
      --text-main: var(--color-text);
      --line: var(--color-gray);
      --ink: var(--color-text);
      --ink-rgb: var(--color-text-rgb);
      --paper-rgb: var(--color-bg-rgb);
    }
    body.legal-page .stage{
      background: transparent;
    }
    body.legal-page .intro{
      border-bottom: 0;
    }
    body.legal-page .legal-intro-body{
      grid-column: var(--content-start) / span 8;
      display:grid;
      gap: var(--space-6);
      font-size: var(--text-s);
      line-height: var(--lh-relaxed);
      max-width: 70ch;
    }
    body.legal-page .legal-intro-body p{
      margin: 0;
    }
    body.legal-page h1.marker{
      margin: 0;
    }
    body.legal-page .legal-meta{
      margin: 0;
      color: var(--color-gray);
    }
    body.legal-page .legal-section{
      display: grid;
      gap: var(--space-4);
      margin: 0;
      max-width: 70ch;
    }
    body.legal-page .legal-section-body{
      display: grid;
      gap: var(--space-4);
    }
    body.legal-page .legal-heading,
    body.legal-page .legal-intro-body > h2,
    body.legal-page .legal-intro-body > h3{
      margin: 0;
      font-size: var(--text-m);
      line-height: var(--lh-snug);
      font-weight:700;
      font-style: normal;
    }
    body.legal-page .legal-intro-body ul{
      margin: 0;
      padding-left: var(--space-5);
      display: grid;
      gap: var(--space-2);
    }
    body.legal-page .legal-intro-body ul.legal-toc{
      padding-left: 0;
      list-style: none;
    }
    body.legal-page .legal-intro-body p small{
      font-size: var(--text-xs);
      letter-spacing: 0.01em;
    }
    .legal-toc{
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: var(--space-2);
    }
    .legal-toc a{
      color: var(--text-main);
      text-decoration: none;
      font-style: italic;
    }
    body.legal-page .legal-intro-body a{
      color: var(--text-main);
      text-decoration: none;
      font-style: italic;
    }
    body.legal-page .legal-intro-body a:hover,
    body.legal-page .legal-intro-body a:focus-visible{
      text-decoration: none;
      outline: none;
    }
    body.legal-page footer.footer{
      --color-bg: var(--color-white);
      --color-bg-rgb: 255, 255, 255;
      --color-text: var(--color-black);
      --color-text-rgb: 0, 0, 0;
      --bg: var(--color-bg);
      --ink: var(--color-text);
      --paper: var(--color-bg);
      --ink-rgb: var(--color-text-rgb);
      --paper-rgb: var(--color-bg-rgb);
      --text-main: var(--color-text);
    }
    :root[data-theme="dark"] body.legal-page footer.footer{
      --color-bg: var(--color-black);
      --color-bg-rgb: 0, 0, 0;
      --color-text: var(--color-white);
      --color-text-rgb: 255, 255, 255;
      --bg: var(--color-bg);
      --ink: var(--color-text);
      --paper: var(--color-bg);
      --ink-rgb: var(--color-text-rgb);
      --paper-rgb: var(--color-bg-rgb);
      --text-main: var(--color-text);
    }
    .legal-toc a:hover,
    .legal-toc a:focus-visible{
      text-decoration: none;
      outline: none;
    }
    @media (min-width: 700px) and (max-width: 1519px){
      body.legal-page .legal-intro-body{
        grid-column: var(--content-start) / span 6;
      }
    }

    @media (min-width: 1520px){
      body.legal-page .legal-intro-body{
        grid-column: var(--content-start) / span 6;
      }
    }
    a,
    button,
    [role="button"]{
      cursor: pointer;
    }

    html.has-custom-cursor,
    html.has-custom-cursor *{
      cursor: none;
    }

.custom-cursor{
      position: fixed;
      top: 0;
      left: 0;
      width: var(--line-1);
      height: var(--line-1);
      pointer-events: none;
  z-index: 2147483647;
      opacity: 0;
      transition: opacity 120ms ease;
      --cursor-badge-size: 72px;
    }
    body.has-custom-cursor .custom-cursor{ opacity:1; }
    .custom-cursor{
      --cursor-context-dot: var(--ink);
      --cursor-context-hover: var(--cursor-accent);
      --cursor-context-button: var(--cursor-accent);
    }
    .custom-cursor .cursor-dot,
    .custom-cursor .cursor-badge{
      position: absolute;
      top: 0;
      left: 0;
      transform: translate3d(-50%, -50%, 0);
      border-radius: var(--radius-round);
      pointer-events: none;
    }
    .custom-cursor .cursor-dot{
      width: var(--size-4);
      height: var(--size-4);
      background: none;
      --cursor-dot-bg: var(--cursor-context-dot);
      transition: background-color 160ms ease, opacity 160ms ease;
    }
    .custom-cursor.is-hover .cursor-dot{
      --cursor-dot-bg: var(--cursor-context-hover);
    }
    .custom-cursor .cursor-dot::before{
      content:"";
      position:absolute;
      inset:0;
      background: var(--cursor-dot-bg);
      border-radius: var(--radius-round);
      transform: none;
    }
    .custom-cursor .cursor-badge{
      width: var(--cursor-badge-size);
      height: var(--cursor-badge-size);
      background: var(--cursor-badge-bg, var(--color-text));
      color: var(--cursor-badge-fg, var(--paper));
      display:flex;
      align-items:center;
      justify-content:center;
      text-transform: uppercase;
      font-weight:700;
      letter-spacing: .08em;
      font-size: var(--text-xs);
      opacity:0;
      transform: translate3d(-50%, -50%, 0) scale(0.6);
      transition: opacity 160ms ease, background-color 160ms ease;
    }
    .custom-cursor .cursor-text{
      display:none;
      font-style: italic;
      transform: rotate(-8deg);
    }
    .custom-cursor .cursor-arrow{
      width: var(--size-5);
      height: var(--size-5);
      display:none;
      fill: var(--paper);
    }
    .custom-cursor.is-hero{
      --cursor-badge-size: 86px;
      --cursor-badge-bg: var(--cursor-accent);
      --cursor-badge-fg: var(--cursor-accent-contrast);
    }
    .custom-cursor.is-explore{
      --cursor-badge-size: 86px;
      --cursor-badge-bg: var(--cursor-accent);
      --cursor-badge-fg: var(--cursor-accent-contrast);
    }
    .custom-cursor.is-hero .cursor-badge,
    .custom-cursor.is-explore .cursor-badge{
      background: var(--cursor-badge-bg);
      color: var(--cursor-badge-fg);
    }
    .custom-cursor.is-hero .cursor-arrow,
    .custom-cursor.is-explore .cursor-arrow{
      fill: var(--cursor-badge-fg);
    }
    .custom-cursor.is-hero .cursor-badge,
    .custom-cursor.is-explore .cursor-badge{
      opacity:1;
      transform: translate3d(-50%, -50%, 0) scale(1);
    }
.custom-cursor.is-footer,
.custom-cursor.is-accent-surface{
  --cursor-context-dot: var(--color-black);
  --cursor-context-hover: var(--color-white);
  --cursor-context-button: var(--color-turquoise);
}
:root[data-theme="dark"] .custom-cursor.is-footer,
:root[data-theme="dark"] .custom-cursor.is-accent-surface{
  --cursor-context-dot: var(--color-white);
  --cursor-context-hover: var(--color-black);
  --cursor-context-button: var(--color-purple);
}
.custom-cursor.is-footer.is-footer-button .cursor-dot,
.custom-cursor.is-accent-surface.is-accent-button .cursor-dot{
  --cursor-dot-bg: var(--cursor-context-button);
}
    .custom-cursor.is-accent-filter{
      --cursor-context-hover: var(--color-accent-contrast);
    }
    .custom-cursor.is-special{
      --cursor-badge-bg: var(--cursor-special-bg);
      --cursor-badge-fg: var(--cursor-special-fg);
    }
    .custom-cursor.is-special .cursor-badge{
      background: var(--cursor-badge-bg);
      color: var(--cursor-badge-fg);
    }
    .custom-cursor.is-special .cursor-arrow{
      fill: var(--cursor-badge-fg);
    }
    .custom-cursor.is-special .cursor-text{
      color: var(--cursor-badge-fg);
    }
    body.menu-open .custom-cursor{
      --cursor-context-dot: var(--color-black);
      --cursor-context-hover: var(--color-white);
    }
    :root[data-theme="dark"] body.menu-open .custom-cursor{
      --cursor-context-dot: var(--color-white);
      --cursor-context-hover: var(--color-black);
    }
    .custom-cursor.is-menu-hover{
      --cursor-context-hover: var(--cursor-context-hover);
    }
    body.legal-page.menu-open .custom-cursor{
      --cursor-context-dot: var(--color-white);
      --cursor-context-hover: var(--color-black);
    }
    body.legal-page.menu-open .custom-cursor.is-menu-hover{
      --cursor-context-hover: var(--color-black);
    }
    body.menu-open .burger,
    body.menu-open .theme-switch{
      color: var(--color-accent-contrast);
      border-color: currentColor;
    }
    body.menu-open .theme-switch .switch-knob{
      background: currentColor;
    }
    .custom-cursor.is-hero .cursor-dot,
    .custom-cursor.is-explore .cursor-dot{
      opacity:0;
    }
    .custom-cursor.is-hero .cursor-arrow{ display:block; }
    .custom-cursor.is-explore .cursor-arrow{
      display:block;
      transform: rotate(-90deg);
    }

    @media (pointer: coarse){
      html.has-custom-cursor,
      html.has-custom-cursor *{
        cursor: auto;
      }
      .custom-cursor{ display:none; }
    }

    /* Wrapper for consistent side padding (= "margin") */
    .wrap{
      padding-left: var(--outer-pad-left);
      padding-right: var(--outer-pad-right);
      padding-top: var(--space-12);
      flex: 1 0 auto;
    }
    body.home-page .wrap{
      padding-top: var(--space-8);
    }

/* Section divider lines (respect wrapper padding) */
.section-divider{
  height: 1px;
  margin-left: calc(-1 * var(--outer-pad-left));
  margin-right: calc(-1 * var(--outer-pad-right));
  background: var(--text-main);
}
.section-divider + .rail-section{
  padding-top: calc(var(--after-divider-offset) + var(--gap));
}

/* -----------------------------
   Header / Navigation
   ----------------------------- */
    header{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 120;

      transform: translateY(calc(-1 * var(--header-hide, 0px)));
      will-change: transform;

      padding-left: var(--header-logo-offset);
      padding-right: var(--outer-pad-right);
      padding-top: var(--space-5);
      padding-bottom: var(--space-5);

      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: var(--space-4);

      background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
      border-bottom: none;
      transition: background-color 240ms ease;
    }

    header::after{
      content:"";
      position:absolute;
      left: var(--header-logo-offset);
      right: var(--outer-pad-right);
      bottom: 0;
      height: var(--line-1);
      background: transparent;
    }


    .logo-slot{
      position: relative;
      z-index: 130;
      justify-self: start;
      height: var(--marker-h);
      min-width: var(--size-10);
      border-radius: var(--radius-full);
      border: var(--marker-border) solid transparent;
      background: rgba(var(--paper-rgb),.0);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      padding: 0;
      gap: var(--space-3);
    }
    .logo-slot .logo-image{
      height: var(--size-8);
      width: auto;
      display:block;
      fill: currentColor;
    }
    .logo-slot a{
      color: inherit;
      display:inline-flex;
      align-items:center;
    }
    .logo-slot .logo-image-responsive{
      display:none;
    }

    

    .header-actions{
      position: relative;
      z-index: 130;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap: var(--space-4);
      min-width:0;
    }

    .header-tools{
      position: relative;
      z-index: 130;
      display:flex;
      align-items:center;
      gap:var(--space-3);
      margin-right: var(--space-7);
    }

    .theme-switch{
      width: var(--size-8);
      height: var(--size-6);
      border-radius: var(--radius-full);
      border: var(--marker-border) solid var(--ink);
      background: transparent;
      padding: 0 var(--space-2);
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-2);
      position: relative;
      cursor: pointer;
      transition: transform 90ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
      -webkit-tap-highlight-color: transparent;
      isolation: isolate;
    }
    .theme-switch:hover,
    .theme-switch:focus-visible{
      transform: none;
      outline: none;
    }
    .theme-switch .switch-icon{
      width: var(--size-4);
      height: var(--size-4);
      display: inline-flex;
      align-items:center;
      justify-content:center;
      color: var(--ink);
      opacity:1;
      position: relative;
      z-index:2;
      pointer-events:none;
    }
    .theme-switch .switch-icon img{
      width: 100%;
      height: 100%;
      display:block;
      filter: var(--icon-filter);
    }
    .theme-switch .switch-icon--sun{
      transform: translateX(-3px);
    }
    .theme-switch .switch-icon--moon{
      transform: translateX(3px);
    }
    .theme-switch .switch-knob{
      position:absolute;
      left: 0;
      width: calc(var(--size-6) - var(--size-1));
      height: calc(var(--size-6) - var(--size-1));
      border-radius: var(--radius-round);
      background: var(--ink);
      transition: transform 160ms ease, background-color 160ms ease;
      z-index:1;
      pointer-events:none;
    }
    :root:not([data-theme="dark"]) .theme-switch[aria-checked="false"] .switch-icon--sun{
      opacity:1;
      color:var(--color-white);
    }
    :root:not([data-theme="dark"]) .theme-switch[aria-checked="false"] .switch-icon--sun img{
      filter: brightness(0) invert(1);
    }
    :root[data-theme="dark"] .theme-switch[aria-checked="true"] .switch-icon--moon{
      opacity:1;
      color:var(--color-black);
    }
    :root[data-theme="dark"] .theme-switch[aria-checked="true"] .switch-icon--moon img{
      filter: brightness(0);
    }
    .theme-switch[aria-checked="false"] .switch-icon--sun{ opacity:1; }
    .theme-switch[aria-checked="false"] .switch-icon--moon{ opacity:1; }
    .theme-switch[aria-checked="true"] .switch-icon--sun{ opacity:1; }
    .theme-switch[aria-checked="true"] .switch-icon--moon{ opacity:1; }
    .theme-switch[aria-checked="true"] .switch-knob{
      transform: translateX(calc(var(--size-8) - var(--size-6)));
    }
    .grid-toggle,
    .baseline-toggle{
      width: var(--size-5);
      height: var(--size-5);
      border-radius: var(--radius-none);
      border: var(--marker-border) solid transparent;
      padding: var(--space-1);
      background-color: transparent;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transition: transform 90ms ease, box-shadow 160ms ease, border-color 160ms ease;
      -webkit-tap-highlight-color: transparent;
    }
    .grid-toggle{
      --grid-line-w: var(--line-2);
      --grid-line-color: rgba(var(--ink-rgb),.7);
      background-image:
        linear-gradient(to right, var(--grid-line-color) 0 var(--grid-line-w), transparent 0),
        linear-gradient(to right, var(--grid-line-color) 0 var(--grid-line-w), transparent 0),
        linear-gradient(to right, var(--grid-line-color) 0 var(--grid-line-w), transparent 0),
        linear-gradient(to right, var(--grid-line-color) 0 var(--grid-line-w), transparent 0);
      background-size: var(--grid-line-w) 100%;
      background-position: 0 0, 33.333% 0, 66.666% 0, 100% 0;
      background-repeat: no-repeat;
      background-origin: content-box;
      background-clip: content-box;
    }
    .baseline-toggle{
      --baseline-line-h: var(--line-2);
      --baseline-line-color: rgba(var(--ink-rgb),.7);
      background-image:
        linear-gradient(to bottom, var(--baseline-line-color) 0 var(--baseline-line-h), transparent 0),
        linear-gradient(to bottom, var(--baseline-line-color) 0 var(--baseline-line-h), transparent 0),
        linear-gradient(to bottom, var(--baseline-line-color) 0 var(--baseline-line-h), transparent 0),
        linear-gradient(to bottom, var(--baseline-line-color) 0 var(--baseline-line-h), transparent 0);
      background-size: 100% var(--baseline-line-h);
      background-position: 0 0, 0 33.333%, 0 66.666%, 0 100%;
      background-repeat: no-repeat;
      background-origin: content-box;
      background-clip: content-box;
    }
    .grid-toggle.is-on{
      --grid-line-w: var(--space-1);
    }
    .baseline-toggle.is-on{
      --baseline-line-h: var(--space-1);
    }
    .grid-toggle:hover,
    .grid-toggle:focus-visible,
    .baseline-toggle:hover,
    .baseline-toggle:focus-visible{
      transform: translateY(calc(-1 * var(--line-1)));
      outline:none;
    }

    .nav{
      display:flex;
      gap:var(--space-4);
      align-items:center;
      justify-content:flex-end;
    }
    .nav a{
      font-size: var(--text-m);
      line-height: var(--lh-flat);
      font-weight:700;
      font-style: italic;

      text-decoration:none;
      text-transform: uppercase;

      display:inline-flex;
      align-items:center;
      justify-content:center;
      height:auto;
      padding:0;
      border-radius: var(--radius-none);

      background: transparent;
      border:0;
      color: var(--text-main);

      transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 90ms ease;
      -webkit-tap-highlight-color: transparent;
      position: relative;
    }
    .nav a.active{
      background:transparent;
      border-color: transparent;
      color: var(--text-main);
      font-style:normal;
      cursor: default;
      pointer-events: none;
    }
    .nav a.active::after{
      content:"";
      position:absolute;
      left: 0.08em;
      right: 0.03em;
      bottom: -0.14em;
      height: 3px;
      background: currentColor;
    }
    .nav a.active:hover,
    .nav a.active:focus-visible{
      color: var(--text-main);
      font-style: normal;
      outline:none;
    }
    .nav a:hover,
    .nav a:focus-visible{
      background:transparent;
      border-color: transparent;
      color:var(--ink);
      font-style: italic;
      outline:none;
    }
    .nav a:active{ transform: translateY(var(--line-1)) scale(0.98); }

    .burger{
      display:none;
      width:var(--size-7);
      height:var(--size-7);
      padding: 0;
      border-radius: var(--radius-none);
      border:0;
      background:transparent;
      color:var(--text-main);
      cursor:pointer;
      align-items:center;
      justify-content:flex-end;
      transition: transform 140ms ease, color 180ms ease;
      -webkit-tap-highlight-color: transparent;
    }
    .burger:hover,
    .burger:focus-visible{
      color: var(--ink);
      outline:none;
    }
    .burger-icon{
      width: 1.96293rem;
      height: 1.37408rem;
      display:block;
      overflow: visible;
    }
    .burger-line{
      fill: currentColor;
      transform-box: fill-box;
      transform-origin: 50% 50%;
      transition: transform 240ms cubic-bezier(.22,1,.36,1), opacity 180ms ease;
    }
    .burger[aria-expanded="true"] .burger-line--top{
      transform: translateY(9.29697px) rotate(45deg);
    }
    .burger[aria-expanded="true"] .burger-line--mid{
      transform: scaleX(.2);
      opacity:0;
    }
    .burger[aria-expanded="true"] .burger-line--bot{
      transform: translateY(-9.29698px) rotate(-45deg);
    }
    .burger[aria-expanded="true"]:hover .burger-line--top,
    .burger[aria-expanded="true"]:focus-visible .burger-line--top{
      transform: translateY(9.29697px) rotate(45deg);
    }
    .burger[aria-expanded="true"]:hover .burger-line--mid,
    .burger[aria-expanded="true"]:focus-visible .burger-line--mid{
      transform: scaleX(.2);
      opacity:0;
    }
    .burger[aria-expanded="true"]:hover .burger-line--bot,
    .burger[aria-expanded="true"]:focus-visible .burger-line--bot{
      transform: translateY(-9.29698px) rotate(-45deg);
    }

.burger-panel{
  position:fixed;
  inset:0;
  width:100vw;
      height:100vh;
      display:grid;
      grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
      column-gap: var(--gap);
      align-content:center;
      row-gap: var(--space-6);
      padding-left: var(--outer-pad-left);
      padding-right: var(--outer-pad-right);
  color: var(--color-accent-contrast);
  z-index:115;
  visibility:hidden;
  pointer-events:none;
  transition: visibility 0s linear 460ms;
}
    .burger-panel::before,
    .burger-panel::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
    }
.burger-panel::before{
  background: rgba(var(--paper-rgb), .08);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity:0;
  transition:
    opacity 460ms cubic-bezier(.16, 1, .3, 1),
    backdrop-filter 460ms cubic-bezier(.16, 1, .3, 1),
    -webkit-backdrop-filter 460ms cubic-bezier(.16, 1, .3, 1);
}
    .burger-panel::after{
      left: var(--menu-panel-left);
      background: var(--color-accent);
      transform: translate3d(100%, 0, 0);
      transition: transform 460ms cubic-bezier(.16, 1, .3, 1);
    }
.burger-panel.open{
  visibility:visible;
  pointer-events:auto;
  transition: visibility 0s linear 0s;
}
.burger-panel.open::before{
  opacity:1;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
    .burger-panel.open::after{
      transform: translate3d(0, 0, 0);
    }
    .burger-panel a{
      grid-column: var(--menu-panel-link-start) / -1;
      justify-self: start;
      display:inline-block;
      width: fit-content;
      padding:0;
      border-radius: var(--radius-none);
      text-decoration:none;
      text-transform: uppercase;
      background: transparent;
      border:0;
      color: currentColor;
      font-size: var(--text-xl);
      line-height: 1.15;
      font-style:italic;
      font-weight:700;

      transform: translate3d(24px, 0, 0);
      opacity:0;
      transition: color 160ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1), opacity 240ms ease;
      -webkit-tap-highlight-color: transparent;
      position: relative;
      z-index: 2;
    }
    .burger-panel.open a{
      transform: translate3d(0, 0, 0);
      opacity:1;
    }
    .burger-panel.open a:nth-child(1){ transition-delay: 80ms; }
    .burger-panel.open a:nth-child(2){ transition-delay: 120ms; }
    .burger-panel.open a:nth-child(3){ transition-delay: 160ms; }
    .burger-panel.open a:nth-child(4){ transition-delay: 200ms; }
    .burger-panel.open a:nth-child(5){ transition-delay: 260ms; }
    .burger-panel.open a:nth-child(6){ transition-delay: 300ms; }
    .burger-panel a:nth-child(1){ transition-delay: 0ms; }
    .burger-panel a:nth-child(2){ transition-delay: 0ms; }
    .burger-panel a:nth-child(3){ transition-delay: 0ms; }
    .burger-panel a:nth-child(4){ transition-delay: 0ms; }
    .burger-panel a:nth-child(5){ transition-delay: 0ms; }
    .burger-panel a:nth-child(6){ transition-delay: 0ms; }
    .burger-panel a.active{
      color: currentColor;
      font-style:normal;
      cursor: default;
      pointer-events: none;
      text-decoration: none;
    }
    .burger-panel a.burger-panel-legal{
      margin-top: var(--space-7);
      font-size: var(--text-m);
      line-height: var(--lh-snug);
    }
    .burger-panel a.burger-panel-legal + .burger-panel-legal{
      margin-top: var(--space-1);
    }
    .burger-panel a.active::after{
      content:"";
      position:absolute;
      left: 0.08em;
      right: 0.03em;
      bottom: -0.14em;
      height: 5px;
      background: currentColor;
    }
    .burger-panel a.burger-panel-legal.active{
      font-style: normal;
    }
    .burger-panel a.burger-panel-legal.active::after{
      left: 0;
      right: 0;
      bottom: -0.12em;
      height: 3px;
    }
    .burger-panel a.active:hover,
    .burger-panel a.active:focus-visible{
      color: currentColor;
      font-style: normal;
      outline:none;
    }
    .burger-panel a:hover,
    .burger-panel a:focus-visible{
      color: currentColor;
      font-style: italic;
      outline:none;
    }
    .burger-panel a:active{ transform: translateY(var(--line-1)) scale(0.98); }

    /* -----------------------------
       Stage (responsive grid)
       ----------------------------- */
    .stage{
      display:grid;
      grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
      column-gap: var(--gap);
      row-gap: var(--gap);
      align-items:start;
      position:relative;
      min-width:0;
      /* Column width helper (for slider card sizing) */
      --col: calc((100% - ((var(--grid-cols) - 1) * var(--gap))) / var(--grid-cols));
    }

    /* Rail item (Pillen-Spalte) */
    .rail-item{
      grid-column: 1 / span var(--rail-span);
      justify-self:start;
      z-index:10;
      min-width:0;
    }

    /* Main column defaults per section */
    .hero h1,
    .hero .lead,
    .hero .cta-row,
    #services-preview .section-actions,
    #projects-preview .section-actions,
    #projects-all .cards-wrap,
    #clients .clients-logo-wall,
    #clients .section-actions{
      grid-column: var(--content-start) / -1;
      min-width:0;
    }

    /* -----------------------------
       Markers
       ----------------------------- */
    .marker{
      display:inline-flex;
      align-items:flex-start;
      justify-content:flex-start;
      height:auto;
      padding:0;
      border-radius:0;
      border:0;
      background: transparent;
      color:var(--text-main);
      font-size: var(--text-xs);
      line-height: var(--lh-snug);
      font-style:normal;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.15em;
      white-space:nowrap;
      user-select:none;
    }
    @media (min-width: 960px){
      .marker--horizontal{
        display:block;
        width:100%;
        max-width:100%;
        white-space:normal;
      }
    }

    /* Mobile only: vertical markers */
    @media (max-width: 959px){
      .marker--vertical{
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        height:auto;
        padding:0;
      }
    }

    /* -----------------------------
       Hero
       ----------------------------- */
    /* -----------------------------
       Intro (Projekte)
       ----------------------------- */
    .intro{
      padding-top:0;
      padding-bottom:var(--space-6);
      background: var(--bg);
      position: relative;
      z-index: 1;
    }
    .intro .lead{
      grid-column: var(--content-start) / -1;
    }
    .display-heading{
      grid-column: 1 / span var(--display-heading-span);
      font-size: var(--text-4xl);
      line-height: var(--lh-flat);
      font-weight: 700;
      margin: 0;
      transform: translateY(0.125em);
      text-wrap: balance;
    }
    .projects-period{
      grid-column: 1 / span var(--display-heading-span);
      grid-row: 1;
      margin: 0;
      font-size: var(--text-l);
      line-height: var(--lh-snug);
      font-weight: 400;
      color: var(--meta-muted);
      letter-spacing: 0.15em;
    }
    #projects-all .display-heading{
      grid-row: 2;
    }
    .projects-counter{
      grid-column: -2 / -1;
      grid-row: 2;
      justify-self: end;
      align-self: end;
      margin: 0;
      font-size: var(--text-xs);
      line-height: var(--lh-flat);
      color: var(--meta-muted);
      white-space: nowrap;
    }
    .intro .lead{
      margin-bottom: var(--space-4);
    }
    .intro-body{
      grid-column: var(--content-start) / -1;
      display:grid;
      gap: var(--space-3);
      font-size: var(--text-s);
      line-height: var(--lh-relaxed);
    }
    .intro--marker-with-copy .section-marker-wrap.rail-item,
    .intro--marker-with-copy .intro-body{
      grid-row: 3;
      align-self: start;
      margin-top: var(--after-divider-offset);
    }
    .intro--marker-with-copy .stage-divider{
      grid-row: 2;
    }
    .intro-body p{ margin:0; }
    #services-intro .services-accordion{
      grid-row: 4;
      margin-top: 0;
    }
    .section-copy{
      grid-column: var(--content-start) / -1;
      display:grid;
      gap: var(--space-3);
      max-width: 70ch;
      font-size: var(--text-s);
      line-height: var(--lh-relaxed);
    }
    .section-copy p{
      margin: 0;
    }
    #services-startups .section-copy{
      width: 100%;
      min-width: 0;
      grid-template-columns: minmax(0, 1fr);
    }
    #services-startups h2{
      -webkit-hyphens: auto;
      hyphens: auto;
      overflow-wrap: anywhere;
    }
    body.services-page .intro-body,
    body.services-page .section-copy,
    body.services-page .services-preview-copy,
    body.about-page .intro-body,
    body.about-page .section-copy{
      grid-column: var(--content-start) / -1;
      max-width: 70ch;
      justify-self: start;
      word-break: normal;
      overflow-wrap: normal;
      -webkit-hyphens: auto;
      hyphens: auto;
    }
    .services-preview-layout{
      grid-column: var(--content-start) / -1;
      display:grid;
      grid-template-columns: repeat(var(--content-cols), minmax(0, 1fr));
      gap: var(--space-6);
      align-items:start;
    }
    .services-preview-copy{
      grid-column: 1 / span 6;
      display:grid;
      gap: var(--space-3);
      max-width: 70ch;
      font-size: var(--text-s);
      line-height: var(--lh-relaxed);
    }
    .services-preview-copy p{
      margin:0;
    }
    .services-preview-list{
      grid-column: 1 / -1;
      margin:0;
      padding:0;
      list-style:none;
      display:flex;
      flex-wrap:wrap;
      align-items:baseline;
      gap: var(--space-2) 0;
      font-size: var(--text-xl);
      line-height: var(--lh-snug);
    }
    .services-preview-list li{
      margin:0;
      display:inline-flex;
      align-items:baseline;
    }
    .services-preview-list li:not(:last-child)::after{
      content:"|";
      display:inline-block;
      margin: 0 var(--space-3);
      font-style:normal;
      font-weight:400;
    }
    .services-preview-list a{
      color: inherit;
      text-decoration:none;
      font-style:italic;
    }
    .services-preview-list a:hover,
    .services-preview-list a:focus-visible{
      text-decoration:none;
    }
    .stage-divider{
      grid-column: 1 / -1;
      height: 1px;
      margin-left: calc(-1 * var(--outer-pad-left));
      margin-right: calc(-1 * var(--outer-pad-right));
      background: var(--text-main);
      justify-self: stretch;
      align-self: start;
      pointer-events: none;
    }
    #projects-preview .stage-divider{
      grid-column: 1 / -1;
      grid-row: 2;
    }
    #projects-preview .section-actions{
      grid-row: auto;
    }
    #projects-preview .display-heading{
      grid-row: 1;
      letter-spacing:-0.03em;
    }
    .projects-preview-counter{
      grid-column: -2 / -1;
      grid-row: 1;
      justify-self:end;
      align-self:end;
      margin:0;
      font-size: var(--text-xs);
      line-height: var(--lh-flat);
      color: var(--meta-muted);
      white-space:nowrap;
    }
    .projects-preview-count-source{
      grid-column: 1;
      grid-row: 1;
      position:absolute;
      width:0;
      height:0;
      border:0;
      opacity:0;
      pointer-events:none;
    }
    #projects-preview .projects-preview-card{
      grid-column: var(--content-start) / -1;
      margin-top: var(--projects-card-row-offset);
      min-width:0;
    }
    .projects-preview-marker-lower{
      display:none;
    }
    .services-accordion{
      grid-column: var(--content-start) / -1;
      display:grid;
      margin-top: var(--space-7);
    }
    @media (min-width: 1520px){
      .services-accordion{
        grid-column: var(--content-start) / span 8;
      }
    }
    .service-item{
      border-top: var(--line-1) solid var(--color-gray);
    }
    .service-item:last-child{
      border-bottom: var(--line-1) solid var(--color-gray);
    }
    .service-item summary{
      list-style:none;
      cursor:pointer;
      display:grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items:center;
      column-gap: var(--space-5);
      padding: var(--space-4) 0;
      font-size: var(--text-l);
      line-height: var(--lh-snug);
      font-weight:400;
    }
    .service-item summary::-webkit-details-marker{
      display:none;
    }
    .service-item summary::after{
      content:"+";
      font-size: var(--text-l);
      line-height: 1;
      font-weight:400;
    }
    .service-item[open] summary::after{
      content:"−";
    }
    .service-item-content{
      max-width: 70ch;
      padding: var(--space-5) 0 0;
      font-size: var(--text-s);
      line-height: var(--lh-relaxed);
      overflow:hidden;
    }
    .service-item-content > :last-child{
      margin-bottom: var(--space-6);
    }
    .service-item-content h4{
      margin: var(--space-5) 0 var(--space-2) 0;
      font-size: var(--text-s);
      line-height: var(--lh-snug);
      font-weight:700;
    }
    .service-item-content p{
      margin:0 0 var(--space-3) 0;
    }
    .service-item-content p:last-of-type{
      margin-bottom:0;
    }
    .service-item-content ul{
      margin:0;
      padding-left: var(--space-5);
      display:grid;
      gap: var(--space-2);
    }
    .service-item-content li{
      margin:0;
    }
    .service-item-lists{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--space-8);
      row-gap: var(--space-4);
      margin-top: var(--space-7);
      color: var(--color-gray);
    }
    .service-item-list{
      display:grid;
      align-content:start;
      gap: var(--space-2);
    }
    .service-item-list h4{
      margin: 0;
    }

    .hero{
      --hero-inset-x: var(--space-8);
      --hero-stage-col: calc((100vw - (var(--hero-inset-x) * 2) - ((var(--grid-cols) - 1) * var(--gap))) / var(--grid-cols));
      position: relative;
      margin-top: var(--home-hero-top-offset);
      padding-top: 0;
      padding-bottom:var(--space-7);
      min-height: calc(100vh - var(--home-hero-top-offset) - var(--home-hero-bottom-gap));
      min-height: calc(100svh - var(--home-hero-top-offset) - var(--home-hero-bottom-gap));
      background: var(--bg);
      margin-inline: 0;
      padding-left: var(--hero-inset-x);
      padding-right: var(--hero-inset-x);
      z-index: 0;
      overflow: hidden;
    }
    .hero-media-frame{
      position:absolute;
      top: 0;
      left: var(--hero-inset-x);
      right: var(--hero-inset-x);
      bottom: 0;
      overflow:hidden;
      z-index:0;
    }
    .hero-video{
      position:absolute;
      inset:0;
      width: 100%;
      height: 100%;
      object-fit:cover;
      object-position: center top;
      display:block;
      z-index:0;
    }
    .hero-wordmark{
      position:absolute;
      left:50%;
      bottom: clamp(5.5rem, 16vw, 12rem);
      width: min(76rem, calc((10 * var(--hero-stage-col)) + (9 * var(--gap))));
      transform: translateX(-50%);
      transform-origin:center center;
      z-index:2;
      pointer-events:none;
      line-height:0;
    }
    .hero-wordmark-base{
      display:block;
      width:100%;
      height:auto;
      filter: brightness(0) invert(1);
    }
    .hero-wordmark-face-wrap{
      position:absolute;
      left: 76.76%;
      top: 29.96%;
      width: 23.24%;
      aspect-ratio: 1 / 1;
      overflow:hidden;
      border-radius:50%;
    }
    .hero-wordmark-face{
      position:absolute;
      left:50%;
      top:50%;
      width:40%;
      height:auto;
      filter: brightness(0) invert(1);
      transform: translate(
        calc(-50% + var(--smiley-face-x, 0px)),
        calc(-50% + var(--smiley-face-y, 0px))
      );
      transition: transform 140ms ease-out;
      will-change: transform;
    }
    .hero .stage{
      position:relative;
      z-index:2;
      min-height: calc(100vh - var(--home-hero-top-offset) - var(--home-hero-bottom-gap) - var(--space-7));
      min-height: calc(100svh - var(--home-hero-top-offset) - var(--home-hero-bottom-gap) - var(--space-7));
    }

    .hero-intro-text{
      grid-column: var(--content-start) / -1;
      font-size: var(--text-xl);
      line-height: var(--lh-tight);
      font-weight: 400;
    }
    .hero-intro-text p{ margin: 0; }
    @media (min-width: 960px){
      .hero-intro-section .hero-intro-text{
        grid-column: 1 / -1;
        grid-row: 1;
      }
      .hero-intro-section .hero-intro-text p{
        text-indent: calc(
          ((var(--content-start) - 1) * ((100% - ((var(--grid-cols) - 1) * var(--gap))) / var(--grid-cols)))
          + ((var(--content-start) - 1) * var(--gap))
        );
      }
      .hero-intro-section .section-marker-wrap--static-horizontal{
        grid-column: 1 / span var(--rail-span);
        grid-row: 1;
        position: static;
        top: auto;
      }
    }
    @media (max-width: 959px){
      body.home-page{
        --home-hero-bottom-gap: var(--space-4);
      }
      .hero{
        --hero-inset-x: var(--space-4);
      }
      .intro > .stage > .display-heading,
      #projects-preview > .stage > .display-heading,
      #projects-all > .stage > .display-heading{
        margin-left: calc(-1 * (var(--outer-pad-left) - var(--space-4)));
      }
      #projects-preview .projects-preview-card--feature{
        margin-left: calc(-1 * (var(--outer-pad-left) - var(--space-4)));
      }
    }
    @media (max-width: 699px){
      .projects-preview-marker-lower{
        display:block;
        grid-row: 4;
        margin-top: var(--projects-card-row-offset);
      }
      .hero-intro-text{
        grid-column: var(--content-start) / -1;
        font-size: var(--text-xl);
      }
      .services-preview-layout{
        grid-template-columns: 1fr;
        gap: var(--space-6);
      }
      .services-preview-copy,
      .services-preview-list{
        grid-column: auto;
      }
      .services-preview-list{
        font-size: var(--text-xl);
      }
    }
    @media (max-width: 959px){
      .hero-wordmark{
        top: 50%;
        bottom: auto;
        width: calc(100svh - var(--home-hero-top-offset) - var(--home-hero-bottom-gap) - (2 * var(--space-8)));
        transform: translate(-50%, -50%) rotate(-90deg);
      }
      .hero-wordmark-face-wrap{
        transform: rotate(90deg);
        transform-origin:center center;
      }
    }

    @media (min-width: 700px) and (max-width: 959px){
      .projects-preview-marker-lower{
        display:block;
        grid-column: 1 / span var(--rail-span);
        position: static;
        top: auto;
        align-self:start;
        grid-row: 4;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .projects-preview-card--feature{
        grid-row: 3;
        grid-column: 1 / 4;
      }
      #projects-preview .projects-preview-card--secondary{
        grid-row: 3;
        grid-column: 4 / 7;
        align-self: start;
      }
      #projects-preview .projects-preview-card--tertiary{
        grid-column: 1 / 4;
        grid-row: 4;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .projects-preview-card--quaternary{
        grid-column: 4 / 7;
        grid-row: 4;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .projects-preview-card--quinary{
        grid-column: 1 / 4;
        grid-row: 5;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .projects-preview-card--senary{
        grid-column: 4 / 7;
        grid-row: 5;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .section-actions{
        grid-row: 6;
      }
      .services-preview-copy{
        grid-column: 1 / span 4;
      }
      .services-preview-list{
        font-size: var(--text-xl);
      }
    }

    @media (min-width: 960px) and (max-width: 1519px){
      .projects-preview-marker-lower{
        display:block;
        grid-column: 1 / span var(--rail-span);
        position: static;
        top: auto;
        align-self:start;
        grid-row: 4;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .projects-preview-card--feature{
        grid-row: 3;
        grid-column: 1 / 6;
      }
      #projects-preview .projects-preview-card--secondary{
        grid-row: 3;
        grid-column: 6 / 9;
        align-self: start;
      }
      #projects-preview .projects-preview-card--tertiary{
        grid-column: 3 / 6;
        grid-row: 4;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .projects-preview-card--quaternary{
        grid-column: 6 / 9;
        grid-row: 4;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .projects-preview-card--quinary{
        grid-column: 3 / 6;
        grid-row: 5;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .projects-preview-card--senary{
        grid-column: 6 / 9;
        grid-row: 5;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .section-actions{
        grid-row: 6;
      }
      .services-preview-copy{
        grid-column: 1 / span 4;
      }
      .services-preview-list{
        font-size: var(--text-xl);
      }
    }

    @media (min-width: 1520px){
      .projects-preview-marker-lower{
        display:block;
        grid-column: 1 / span var(--rail-span);
        position: static;
        top: auto;
        align-self:start;
        grid-row: 4;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .projects-preview-card--feature{
        grid-row: 3;
        grid-column: 1 / 9;
      }
      #projects-preview .projects-preview-card--secondary{
        grid-row: 3;
        grid-column: 9 / 13;
        align-self: start;
      }
      #projects-preview .projects-preview-card--tertiary{
        grid-row: 3;
        grid-column: 13 / 17;
        align-self:start;
      }
      #projects-preview .projects-preview-card--quaternary{
        grid-column: 5 / 9;
        grid-row: 4;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .projects-preview-card--quinary{
        grid-column: 9 / 13;
        grid-row: 4;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .projects-preview-card--senary{
        grid-column: 13 / 17;
        grid-row: 4;
        margin-top: var(--projects-card-row-offset);
      }
      #projects-preview .section-actions{
        grid-row: 5;
      }
    }

    h1{
      margin:0 0 var(--space-5) 0;
      font-weight:700;
      font-style:normal;
      letter-spacing:-0.02em;
      font-size: var(--text-2xl);
      line-height: var(--lh-display);
    }

    h2{
      margin: 0 0 var(--space-2);
      font-size: var(--text-2xl);
      line-height: var(--lh-snug);
      font-weight: 700;
    }

    .lead{
      margin:0;
      max-width:44ch;
      font-weight:700;
      font-style:normal;
      font-size: var(--text-s);
      line-height: var(--lh-normal);
    }

    .cta-row{
      margin-top:var(--space-5);
      display:flex;
      justify-content:flex-end; /* Buttons immer rechts */
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 0 var(--space-5);
      height: var(--marker-h);
      border-radius: var(--marker-radius);
      background: var(--btn-primary-bg);
      color: var(--btn-primary-fg);
      border: var(--btn-primary-border);
      cursor:pointer;
      text-decoration:none;
      font-family:"PMNCaeciliaSans", system-ui, sans-serif;
      font-style:italic;
      font-weight:700;
      font-size: var(--text-xs);
      line-height: var(--lh-flat);
      transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 90ms ease;
      -webkit-tap-highlight-color: transparent;
    }
    .btn:hover,
    .btn:focus-visible{
      background: var(--btn-primary-hover-bg);
      color: var(--btn-primary-hover-fg);
      border: var(--btn-primary-hover-border);
      outline:none;
    }
    .btn:active{ transform: translateY(var(--line-1)) scale(0.98); }
    .btn-secondary{
      background: transparent;
      color: var(--btn-secondary-fg);
      border: var(--marker-border) solid var(--btn-secondary-border);
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible{
      background: var(--btn-secondary-hover-bg);
      color: var(--btn-secondary-hover-fg);
      border: var(--marker-border) solid transparent;
      outline:none;
    }
    .btn-attention{
      background: var(--btn-attention-bg);
      color: var(--btn-attention-fg);
      border: var(--btn-attention-border);
    }
    .btn-attention:hover,
    .btn-attention:focus-visible{
      background: var(--btn-attention-hover-bg);
      color: var(--btn-attention-hover-fg);
      border: var(--btn-attention-hover-border);
      outline:none;
    }

    /* -----------------------------
       Projekte section (Cards: horizontal only)
       ----------------------------- */

    /* Team section */
    .team-list{
      grid-column: var(--content-start) / -1;
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-6);
      align-items:start;
    }
    .team-member{
      min-width:0;
      display:grid;
      grid-template-rows: auto auto;
      gap: var(--space-4);
      align-items:start;
      align-self:start;
    }
    .team-portrait{
      margin:0;
      min-width:0;
      aspect-ratio: 2 / 3;
      overflow:hidden;
      background: rgba(var(--ink-rgb), .06);
    }
    .team-portrait img{
      display:block;
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .team-card{
      display:grid;
      gap: 0;
      font-size: var(--text-s);
      line-height: var(--lh-normal);
      min-width:0;
    }
    .team-card-body{
      display:grid;
      gap: var(--space-2);
      padding-bottom: var(--space-4);
    }
    .team-name{
      margin:0;
      font-weight:700;
      font-size: var(--text-s);
      line-height: var(--lh-snug);
      text-transform: uppercase;
    }
    .team-role,
    .team-meta{
      margin:0;
    }
    .team-role{
      margin-top: calc(-1 * var(--space-1));
    }
    .team-role-title{
      font-weight: 700;
    }
    .team-role-focus{
      color: var(--color-gray);
    }
    .team-meta a{
      color: inherit;
      text-decoration:none;
      font-style: italic;
    }
    .team-link{
      color: inherit;
      text-decoration:none;
      font-style: italic;
      font-size: var(--text-s);
    }
    .team-card-divider{
      border-top: var(--line-1) solid var(--color-gray);
      display:none;
    }
    .team-card.is-open .team-card-divider{
      display:block;
    }
    .team-card-reveal{
      overflow:hidden;
      height:0;
      opacity:0;
      min-width:0;
      transition: height 320ms ease, opacity 220ms ease;
    }
    .team-card-copy{
      padding-top: var(--space-3);
      padding-bottom: var(--space-3);
      max-width: 44ch;
    }
    .team-card-copy p{
      margin:0 0 var(--space-3) 0;
    }
    .team-card-copy p:last-child{
      margin-bottom:0;
    }
    .team-card-toggle{
      width:100%;
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: var(--space-4);
      padding-top: var(--space-3);
      padding-right:0;
      padding-bottom:0;
      padding-left:0;
      margin-top:0;
      border-top: var(--line-1) solid var(--color-gray);
      border-right:0;
      border-bottom:0;
      border-left:0;
      border-radius:0;
      background:transparent;
      color: var(--color-gray);
      cursor:pointer;
      font-size: var(--text-s);
      font-style: italic;
      font-family: inherit;
      font-weight: 400;
      text-align:left;
      appearance:none;
      -webkit-appearance:none;
      box-shadow:none;
    }
    .team-card-plus{
      font-style: normal;
      font-size: var(--text-s);
      line-height: 1;
      min-width: 1ch;
      text-align: right;
    }
    .team-card-toggle[aria-expanded="true"] .team-card-plus::before{
      content:"−";
    }
    .team-card-toggle[aria-expanded="false"] .team-card-plus::before{
      content:"+";
    }
    @media (min-width: 960px) and (max-width: 1519px){
      .team-list{
        grid-template-columns: 1fr;
        gap: var(--space-7);
      }
      .team-member{
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        grid-template-rows: auto;
        gap: var(--space-5);
      }
      .team-portrait{
        aspect-ratio: 2 / 3;
      }
    }
    @media (max-width: 959px){
      .team-list{
        grid-template-columns: 1fr;
        gap: var(--space-7);
      }
    }

    /* Arbeitsweise */
    .approach-grid{
      grid-column: var(--content-start) / -1;
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-4);
    }
    .approach-card{
      border: var(--line-1) solid var(--color-gray);
      padding: var(--space-4);
      min-height: var(--size-15);
      display:grid;
      gap: var(--space-3);
      font-size: var(--text-xs);
      line-height: var(--lh-relaxed);
    }
    .approach-card h4{
      margin:0;
      font-size: var(--text-s);
      font-weight:700;
    }
    .approach-card p{ margin:0; }

    /* Clients */
    .clients-block{
      grid-column: var(--content-start) / -1;
      min-width: 0;
    }
    .clients-directory{
      display:grid;
      row-gap: 0;
      min-width: 0;
      position: relative;
      border-bottom: var(--line-1) solid var(--color-gray);
    }
    .clients-group{
      display: contents;
    }
    .clients-items{
      list-style:none;
      margin:0;
      padding:0;
      display: contents;
    }
    .client-entry{
      border-top: var(--line-1) solid var(--color-gray);
      min-width: 0;
      position: relative;
      z-index: 1;
    }
    .client-entry-main{
      display:grid;
      --clients-name-start: 1;
      --clients-name-span: 4;
      --clients-sector-start: 5;
      --clients-sector-span: 3;
      --clients-project-start: 11;
      --clients-project-span: 2;
      grid-template-columns: repeat(var(--content-cols), minmax(0, 1fr));
      column-gap: var(--gap);
      align-items:center;
      min-width:0;
      min-height: calc(var(--size-6) + (var(--space-3) * 2));
      padding: var(--space-3) 0;
    }
    .client-name,
    .work-title{
      grid-column: var(--clients-name-start) / span var(--clients-name-span);
      font-size: var(--text-s);
      font-weight:400;
      line-height: var(--lh-snug);
      min-width:0;
      transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
    }
    .client-sector,
    .work-tags{
      grid-column: var(--clients-sector-start) / span var(--clients-sector-span);
      justify-self:start;
      text-align:left;
      color: var(--color-gray);
      font-size: var(--text-s);
      line-height: var(--lh-normal);
      white-space: nowrap;
    }
    .client-projects{
      position:relative;
      grid-column: var(--clients-project-start) / span var(--clients-project-span);
      justify-self:end;
      display:flex;
      align-items:center;
      gap: var(--space-3);
      transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
    }
    .client-entry.is-hovered .client-name,
    .client-entry.is-hovered .work-title{
      transform: translateX(var(--space-2));
    }
    .client-entry.is-hovered .client-projects{
      transform: translateX(calc(-1 * var(--space-2)));
    }
    .client-project-link{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      width: auto;
      min-width: 0;
      flex: 0 0 auto;
      height: auto;
      min-height: var(--filter-btn-h);
      border-radius: var(--marker-radius);
      border: var(--line-1) solid var(--btn-secondary-border);
      padding: 0 var(--space-3);
      background: transparent;
      color: var(--btn-secondary-fg);
      font-size: var(--text-xs);
      font-weight:400;
      font-style: italic;
      line-height: var(--lh-flat);
      white-space: nowrap;
      z-index: 1;
      transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease;
    }
    .client-project-link:hover,
    .client-project-link:focus-visible{
      transform: translateY(calc(-1 * var(--line-1)));
      background: var(--ink);
      color: var(--paper);
      border-color: transparent;
      z-index: 80;
      outline:none;
    }
    .client-project-tooltip{
      display:none;
    }
    .client-project-tooltip img{
      display:block;
    }
    .client-project-tooltip span{
      display:block;
    }
    .clients-hover-preview{
      position:absolute;
      left:0;
      top:0;
      width: var(--clients-preview-w, 0px);
      height: var(--clients-preview-h, 0px);
      transform: translate3d(var(--clients-preview-x, 0px), var(--clients-preview-y, 0px), 0);
      opacity:0;
      pointer-events:none;
      overflow:visible;
      z-index:2;
      transition:
        transform 280ms cubic-bezier(.16, 1, .3, 1),
        width 280ms cubic-bezier(.16, 1, .3, 1),
        height 280ms cubic-bezier(.16, 1, .3, 1),
        opacity 180ms ease;
    }
    .clients-hover-row{
      position:absolute;
      left:0;
      top:0;
      width: var(--clients-row-w, 0px);
      height: var(--clients-row-h, 0px);
      transform: translate3d(var(--clients-row-x, 0px), var(--clients-row-y, 0px), 0);
      opacity:0;
      pointer-events:none;
      z-index:0;
      transition:
        transform 280ms cubic-bezier(.16, 1, .3, 1),
        width 280ms cubic-bezier(.16, 1, .3, 1),
        height 280ms cubic-bezier(.16, 1, .3, 1),
        opacity 180ms ease;
    }
    .clients-hover-row::before{
      content:"";
      position:absolute;
      inset: 0;
      background: var(--color-clients-hover);
    }
    .clients-hover-row.is-visible{
      opacity:1;
    }
    .clients-hover-row.is-collapsing{
      opacity:1;
    }
    .clients-hover-preview.is-visible{
      opacity:1;
    }
    .clients-hover-preview img{
      position:absolute;
      left:50%;
      top:50%;
      width: 18rem;
      height: 12rem;
      transform: translate(-50%, -50%);
      object-fit:cover;
      opacity:1;
    }
    .clients-logo-wall{
      grid-column: var(--content-start) / -1;
      position: relative;
      min-width: 0;
      width: calc(100% + var(--outer-pad-right));
      margin-right: calc(-1 * var(--outer-pad-right));
      overflow: hidden;
      --clients-logo-height: 4rem;
      --clients-logo-gap: var(--space-10);
      --clients-logo-row-gap: var(--space-7);
    }
    .clients-logo-wall::after{
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(18rem, 24vw);
      pointer-events: none;
      background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
      z-index: 2;
    }
    .clients-logo-wall-track{
      position: relative;
      min-width: 0;
      min-height: var(--clients-logo-height);
    }
    .clients-logo{
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      height: var(--clients-logo-height);
      width: auto;
      max-width: none;
      opacity: .75;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }
    :root[data-theme="dark"] .clients-logo{
      filter: invert(1);
    }
    @media (min-width: 700px) and (max-width: 1519px){
      .clients-hover-preview{
        transition:
          transform 260ms cubic-bezier(.16, 1, .3, 1),
          width 260ms cubic-bezier(.16, 1, .3, 1),
          height 260ms cubic-bezier(.16, 1, .3, 1),
          opacity 180ms ease;
      }
    }
    @media (min-width: 960px) and (max-width: 1519px){
      .client-entry-main{
        --clients-name-start: 1;
        --clients-name-span: 2;
        --clients-sector-start: 3;
        --clients-sector-span: 2;
        --clients-project-start: 5;
        --clients-project-span: 2;
      }
    }
    @media (min-width: 700px) and (max-width: 959px){
      .client-entry-main{
        --clients-name-start: 1;
        --clients-name-span: 2;
        --clients-sector-start: 3;
        --clients-sector-span: 2;
        --clients-project-start: 6;
        --clients-project-span: 1;
      }
    }
    @media (max-width: 699px){
      .clients-logo-wall{
        grid-column: 1 / -1;
        --clients-logo-height: 3rem;
        --clients-logo-gap: var(--space-9);
        --clients-logo-row-gap: var(--space-7);
      }
      .client-entry-main{
        --clients-name-start: 1;
        --clients-name-span: 2;
        --clients-sector-start: 1;
        --clients-sector-span: 2;
        --clients-project-start: 3;
        --clients-project-span: 2;
        grid-template-columns: repeat(var(--content-cols), minmax(0, 1fr));
        column-gap: var(--gap);
        row-gap: var(--space-1);
      }
      .client-sector{
        grid-row: 2;
      }
      .client-projects{
        grid-row: 1 / span 2;
        align-self:start;
      }
      .client-project-tooltip{
        display:none;
      }
      .clients-hover-preview{
        display:none;
      }
      .clients-hover-row{
        display:none;
      }
    }

    .card{
      display:block;
      gap:var(--space-3);
      color:var(--text-main);
      text-decoration:none;
      cursor:pointer;
      min-width:0;

      transform: translateZ(0);
      will-change: transform;
    }
    .card.is-hidden{ display:none; }

    .card.is-special{
      background: var(--color-accent);
      color: var(--color-accent-contrast);
      padding: var(--space-6);
      display:flex;
      flex-direction:column;
      gap: var(--space-4);
      min-height: 100%;
    }
    .card.is-special .special-text{
      margin: 0;
      font-size: var(--text-m);
      line-height: var(--lh-snug);
      font-weight:700;
      max-width: 16ch;
    }
    .card.is-contact-promo{
      cursor: default;
      min-height: var(--contact-card-height, 100%);
    }
    .card.is-contact-promo .contact-promo-actions{
      margin-top: auto;
      display:flex;
      align-items:flex-end;
      justify-content:flex-start;
      gap: var(--space-3);
    }
    .card.is-contact-promo .btn{
      background: var(--color-text);
      color: var(--color-bg);
      border: var(--marker-border) solid transparent;
      min-width: 0;
    }
    .card.is-contact-promo .btn:hover,
    .card.is-contact-promo .btn:focus-visible{
      background: transparent;
      color: var(--color-text);
      border: var(--marker-border) solid var(--color-text);
    }
    @media (min-width: 1520px){
      #projects-all .card.is-contact-promo .special-text{
        font-size: var(--text-m);
        max-width: 100%;
      }
    }
    @media (max-width: 699px){
      .card.is-special .special-text{
        font-size: var(--text-m);
        max-width: 100%;
      }
    }
    .filters{
      grid-column: 1 / -1;
      grid-row: 4;
      display:flex;
      flex-wrap:wrap;
      gap:var(--space-3);
      margin: var(--after-divider-offset) 0 0;
    }
    #projects-all .projects-marker-top{
      grid-row: 5;
      margin-top: var(--projects-card-row-offset);
    }
    #projects-all .stage-divider{
      grid-row: 3;
    }
    #projects-all .projects-marker-lower{
      display:none;
    }
    #projects-all .card[data-tags]{
      grid-column: var(--projects-card-col-start, var(--content-start)) / span var(--projects-card-col-span, var(--content-cols));
      grid-row: var(--projects-card-row-start, 5);
      margin-top: var(--projects-card-offset-top, 0);
      min-width: 0;
    }
    @media (max-width: 959px){
      #projects-all .projects-period,
      #projects-all .filters,
      #projects-all .card.is-new{
        margin-left: calc(-1 * (var(--outer-pad-left) - var(--space-4)));
      }
      #projects-all .projects-marker-top{
        grid-row: 6;
      }
    }
    @media (min-width: 960px){
      #projects-all.has-featured-project .projects-marker-top{
        display:none;
      }
      #projects-all.has-featured-project .projects-marker-lower{
        display:block;
        grid-column: 1 / span var(--rail-span);
        grid-row: var(--projects-marker-row-start, auto);
        align-self:start;
        margin-top: var(--projects-marker-offset-top, 0);
      }
    }
    .filter-btn,
    .contact-service{
      height: auto;
      min-height: var(--filter-btn-h);
      padding: 0 var(--space-3);
      border-radius: var(--marker-radius);
      border: var(--line-1) solid var(--btn-secondary-border);
      background: transparent;
      color: var(--btn-secondary-fg);
      font-family:"PMNCaeciliaSans", system-ui, sans-serif;
      font-size: var(--text-xs);
      line-height: var(--lh-flat);
      font-style: italic;
      font-weight:400;
      transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
    }
    .filter-btn:hover,
    .filter-btn:focus-visible,
    .contact-service:hover,
    .contact-service:focus-visible{
      background: var(--btn-secondary-hover-bg);
      color: var(--btn-secondary-hover-fg);
      border: var(--line-1) solid transparent;
      outline: none;
    }
    .filter-btn.is-active,
    .contact-service.is-active{
      background: var(--color-accent);
      border: var(--line-1) solid transparent;
      color: var(--color-accent-contrast);
      font-style: italic;
    }
    .filter-btn.is-active:hover,
    .filter-btn.is-active:focus-visible,
    .contact-service.is-active:hover,
    .contact-service.is-active:focus-visible{
      background: var(--color-accent);
      border: var(--line-1) solid transparent;
      color: var(--color-accent-contrast);
      outline: none;
    }

    .media{
      width:100%;
      position:relative;
      background: rgba(var(--ink-rgb),.03);
      aspect-ratio: 3 / 2;
    }

    /* Image frame: keeps zoom cropped, badge can overflow */
    .media-inner{
      position:relative;
      width:100%;
      height:100%;
      overflow:hidden;
    }

    .media-inner::after{
      content:"";
      position:absolute;
      inset:0;
      background: var(--card-img, var(--img)) center / cover no-repeat;
      transform: scale(1);
            transition: background-color 240ms ease;
      will-change: transform;
    }

    .media-inner.has-responsive-image::after{
      content:none;
    }

    .media-inner .project-card-image{
      display:block;
      width:100%;
      height:100%;
      object-fit:cover;
      transform:scale(1);
      transition:transform 240ms ease;
      will-change:transform;
    }

    /* NEU Marker (first card) */
    .badge-new{
      position:absolute;
      right:var(--space-3);
      top: calc(-1 * var(--space-3));
      width:var(--size-11);
      height:var(--size-11);
      border-radius: var(--radius-round);
      display:flex;
      align-items:center;
      justify-content:center;
      z-index: 3;
      pointer-events:none;
    }
    .badge-new-svg{
      position:absolute;
      inset:0;
      width: 100%;
      height: 100%;
      display:block;
    }
    .badge-new-form{
      animation: badgeSpin 18s linear infinite;
      transform-origin: 50% 50%;
      z-index: 0;
    }
    .badge-new-circle{
      color: var(--color-accent);
      animation: badgeSpin 18s linear infinite;
      transform-origin: 50% 50%;
      z-index: 1;
    }
    .badge-new-fill{
      color: var(--color-accent);
      z-index: 2;
    }
    .badge-new-svg path,
    .badge-new-svg polygon{
      fill: currentColor;
    }
    .badge-new-form path{
      fill: rgba(var(--paper-rgb), .16);
    }

@keyframes badgeSpin{
      to{ transform: rotate(360deg); }
    }

    .meta{
      display:block;
      margin-top: 1em;
    }
    .cap-lines{
      display:grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: var(--space-4);
      row-gap: var(--space-2);
      align-items: baseline;
    }

    .cap-lines .project-card-client,
    .project-id{
      margin:0;
      line-height: var(--lh-snug);
      font-weight:400;
      color: var(--meta-muted);
    }
    .cap-lines .project-card-client{
      grid-column: 1;
      grid-row: 1;
      font-size: var(--text-s);
      font-style:normal;
    }
    .project-id{
      grid-column: 2;
      grid-row: 1;
      font-size: var(--text-xs);
      letter-spacing: 0.03em;
      justify-self:end;
      align-self: baseline;
    }
    .project-id::before{
      content: "(";
    }
    .project-id::after{
      content: ")";
    }
    .cap-lines .project-card-title{
      grid-column: 1 / -1;
      grid-row: 2;
      margin:0;
      font-size: var(--text-l);
      line-height: var(--lh-snug);
      font-style:normal;
      font-weight:400;
    }
    .special-header .project-id{
      color: currentColor;
      opacity: .75;
    }

    /* Hover effects: only scale image, not the card frame */
    @media (hover:hover) and (pointer:fine){
      .card:hover .media-inner::after,
      .card:hover .media-inner .project-card-image{ transform: scale(1.05); }
    }

    .section-actions{
      display:flex;
      justify-content:flex-start;
      margin-top: var(--space-6);
    }

    /* -----------------------------
       Einzelprojekt
       ----------------------------- */
    .project-detail-page{
      --project-hero-top-offset: var(--space-12);
      --project-hero-bottom-gap: var(--space-8);
    }
    .project-detail-hero{
      padding-top: 0;
    }
    .rail-section.no-border.project-overview{
      padding-top: 0;
    }
    .project-overview .stage{
      row-gap: var(--space-8);
    }
    .project-hero-media{
      grid-column: 1 / -1;
      min-width:0;
      width: 100%;
      height: min(
        calc((100vw - var(--outer-pad-left) - var(--outer-pad-right)) * 9 / 16),
        calc(100vh - var(--project-hero-top-offset) - var(--project-hero-bottom-gap)),
        calc(100svh - var(--project-hero-top-offset) - var(--project-hero-bottom-gap))
      );
      overflow: hidden;
    }
    .project-hero-media img,
    .project-gallery-item img{
      display:block;
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .project-overview .display-heading{
      grid-row: 1;
      min-width: 0;
      font-size: var(--text-3xl);
      line-height: var(--lh-snug);
      word-break: normal;
      overflow-wrap: break-word;
      -webkit-hyphens: auto;
      hyphens: auto;
      hyphenate-limit-chars: 8 3 3;
    }
    .project-title-highlight{
      --project-title-highlight-top: 0.72em;
      --project-title-highlight-height: 0.52em;
      padding-bottom: calc(
        var(--project-title-highlight-top) + var(--project-title-highlight-height) - 1em
      );
      background-image: linear-gradient(
        to bottom,
        transparent 0,
        transparent var(--project-title-highlight-top),
        var(--color-accent) var(--project-title-highlight-top),
        var(--color-accent) calc(
          var(--project-title-highlight-top) + var(--project-title-highlight-height)
        ),
        transparent calc(
          var(--project-title-highlight-top) + var(--project-title-highlight-height)
        )
      );
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
    .project-detail-code{
      grid-column: -2 / -1;
      grid-row: 1;
      justify-self: end;
      margin: calc(var(--space-7) + var(--space-2)) 0 0 0;
      font-size: var(--text-xs);
      line-height: var(--lh-flat);
      color: var(--meta-muted);
      white-space: nowrap;
      letter-spacing: 0.15em;
    }
    .project-overview .section-marker-wrap.rail-item,
    .project-overview-text,
    .project-facts{
      grid-row: 2;
      align-self: start;
    }
    .project-overview-text{
      grid-column: 5 / span 7;
      min-width:0;
    }
    .project-description{
      font-size: var(--text-s);
      line-height: var(--lh-normal);
    }
    .project-description p{
      margin: 0 0 var(--space-4) 0;
    }
    .project-description p:last-child{
      margin-bottom:0;
    }
    .project-description-body{
      position:relative;
      overflow:hidden;
      transition:max-height 320ms ease;
    }
    .project-description-body::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:var(--space-8);
      pointer-events:none;
      opacity:0;
      background: linear-gradient(
        to bottom,
        rgba(var(--paper-rgb), 0) 0%,
        rgba(var(--paper-rgb), 0.8) 72%,
        var(--bg) 100%
      );
    }
    .project-description-toggle{
      position: relative;
      width:100%;
      cursor:pointer;
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: var(--space-4);
      font-size: var(--text-s);
      font-style: italic;
      font-weight:400;
      line-height: var(--lh-normal);
      color: var(--color-gray);
      margin-top: var(--space-5);
      padding-top: var(--space-3);
      padding-right:0;
      padding-bottom:0;
      padding-left:0;
      border-top: var(--line-1) solid var(--color-gray);
      border-right:0;
      border-bottom:0;
      border-left:0;
      border-radius:0;
      background:transparent;
      font-family:inherit;
      text-align:left;
      appearance:none;
      -webkit-appearance:none;
      box-shadow:none;
    }
    .project-description.is-collapsible:not(.is-open) .project-description-body::after{
      opacity:1;
    }
    .project-description-toggle[hidden]{
      display:none;
    }
    .project-description-toggle-icon{
      font-style: normal;
      font-size: var(--text-s);
      line-height: 1;
      font-weight:400;
      min-width: 1ch;
      text-align: right;
    }
    .project-facts{
      grid-column: 13 / -1;
      margin: 0;
      display:grid;
      gap: var(--space-5);
      font-size: var(--text-s);
      line-height: var(--lh-normal);
    }
    .project-facts div{
      display:grid;
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--space-1);
      align-items:start;
    }
    .project-facts dt{
      font-weight:400;
      color: var(--color-gray);
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: 0.15em;
    }
    .project-facts dd{
      margin:0;
    }
    .project-facts a{
      color:inherit;
      font-style: italic;
      text-decoration:none;
    }
    .project-gallery{
      grid-column: var(--content-start) / -1;
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--space-6);
      row-gap: var(--projects-card-row-offset);
      min-width:0;
    }
    .project-gallery-item{
      margin:0;
      min-width:0;
      aspect-ratio: 3 / 2;
    }
    .project-gallery-item.is-wide{
      grid-column: 1 / -1;
      aspect-ratio: 16 / 9;
    }
    .project-gallery-item.is-portrait{
      aspect-ratio: 2 / 3;
    }
    .project-related-topbar,
    .project-related-viewport,
    .project-related-actions{
      grid-column: var(--content-start) / -1;
      min-width:0;
    }
    .project-related-topbar{
      --project-related-copy-span: 7;
      --project-related-nav-span: 2;
      grid-row: 1;
      display: grid;
      grid-template-columns: repeat(var(--content-cols), minmax(0, 1fr));
      column-gap: var(--gap);
      align-items: end;
      width: 100%;
    }
    .project-related-heading{
      grid-column: 1 / span var(--project-related-copy-span);
      grid-row: 1;
      display:block;
      min-width: 0;
      align-self: end;
    }
    .project-related-copy{
      display: block;
      margin: 0;
      width: auto;
      max-width: none;
      font-size: var(--text-s);
      line-height: var(--lh-normal);
      font-weight: 400;
    }
    .project-related-viewport{
      grid-row: 2;
      --project-related-bleed-left: calc(
        var(--outer-pad-left) +
        ((var(--content-start) - 1) * ((((100vw - var(--outer-pad-left) - var(--outer-pad-right) - ((var(--grid-cols) - 1) * var(--gap))) / var(--grid-cols))) + var(--gap)))
      );
      overflow:hidden;
      width: calc(100% + var(--project-related-bleed-left) + var(--outer-pad-right));
      margin-left: calc(-1 * var(--project-related-bleed-left));
      margin-right: calc(-1 * var(--outer-pad-right));
    }
    .project-related-cards{
      --project-related-card-span: 4;
      display:flex;
      gap: var(--gap);
      width:100%;
      min-width:100%;
      will-change: transform;
      touch-action: pan-y;
    }
    .project-related-cards .card{
      flex: 0 0 calc(
        (var(--project-related-card-span) * ((100vw - var(--outer-pad-left) - var(--outer-pad-right) - ((var(--grid-cols) - 1) * var(--gap))) / var(--grid-cols)))
        + ((var(--project-related-card-span) - 1) * var(--gap))
      );
    }
    .project-related-nav{
      grid-column: calc(var(--content-cols) - var(--project-related-nav-span) + 1) / -1;
      grid-row: 1;
      display: grid;
      justify-items: end;
      align-items: end;
      align-self:end;
      justify-self:end;
      min-width: 0;
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      margin-top: 0;
      margin-bottom: 0;
    }
    .project-related .section-marker-support .section-marker-copy{
      display: none;
    }
    @media (max-width: 1519px){
      .project-related-topbar{
        --project-related-copy-span: 4;
        --project-related-nav-span: 2;
      }
      .project-related-cards{
        --project-related-card-span: 3;
      }
    }
    @media (min-width: 960px) and (max-width: 1519px){
      .project-overview-text{
        grid-column: 3 / -1;
        grid-row: 3;
      }
      .project-facts{
        grid-column: 3 / -1;
        grid-row: 2;
      }
    }
    @media (max-width: 959px){
      .display-heading{
        min-width:0;
        font-size:var(--text-3xl);
        overflow-wrap:break-word;
        hyphens:auto;
      }
      .project-overview .display-heading{
        font-size: var(--text-2xl);
      }
      .project-related .section-marker-wrap.rail-item{
        position: absolute;
        top: 0;
        left: calc(-1 * var(--outer-pad-left));
        width: var(--outer-pad-left);
        height: auto;
        display: block;
        margin-left: 0;
        justify-self: start;
        align-self: start;
      }
      .project-related .section-marker-wrap.rail-item .marker{
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        position: static;
      }
      .project-hero-media,
      .project-gallery,
      .project-related-topbar,
      .project-related-viewport,
      .project-related-actions{
        grid-column: var(--content-start) / -1;
      }
      .project-hero-media{
        grid-column: 1 / -1;
        width: calc(
          100% +
          (var(--outer-pad-left) - var(--space-4)) +
          (var(--outer-pad-right) - var(--space-4))
        );
        margin-left: calc(-1 * (var(--outer-pad-left) - var(--space-4)));
        margin-right: calc(-1 * (var(--outer-pad-right) - var(--space-4)));
      }
      .project-overview .display-heading{
        margin-left: calc(-1 * (var(--outer-pad-left) - var(--space-4)));
      }
      .project-overview .section-marker-wrap.rail-item,
      .project-facts{
        grid-row: 2;
      }
      .project-overview .section-marker-wrap.rail-item{
        position: relative;
        top: auto;
        left: calc(-1 * var(--outer-pad-left));
        grid-column: var(--content-start) / -1;
        grid-row: 2 / span 2;
        width: var(--outer-pad-left);
        height: 100%;
        display: block;
      }
      .project-overview-text{
        grid-column: var(--content-start) / -1;
        grid-row: 3;
      }
      .project-facts{
        grid-column: var(--content-start) / -1;
      }
      .project-related-topbar{
        --project-related-copy-span: 3;
        --project-related-nav-span: 1;
      }
      .project-related-viewport{
        width: calc(100% + var(--outer-pad-right));
        margin-left: 0;
        margin-right: calc(-1 * var(--outer-pad-right));
      }
    }
    @media (max-width: 699px){
      .project-description{
        font-size: var(--text-s);
      }
      .project-gallery{
        grid-template-columns: 1fr;
      }
      .project-related-cards{
        --project-related-card-span: 3;
      }
    }

    /* -----------------------------
       Kontaktseite
       ----------------------------- */
    .contact-section{
      min-height: calc(100vh - var(--size-14));
      display: grid;
      align-items: start;
    }
    .contact-main{
      grid-column: var(--content-start) / -1;
      display:grid;
      grid-template-columns: repeat(var(--content-cols), minmax(0, 1fr));
      column-gap: var(--gap);
      row-gap: var(--space-7);
      margin-top: 0;
      min-width:0;
    }
    .contact-intro{
      grid-column: 1 / span 6;
      display:grid;
      gap: var(--space-4);
      align-content:start;
    }
    .contact-intro h1{
      margin: 0 0 var(--space-2);
      line-height: var(--lh-snug);
    }
    .contact-intro-copy{
      display:grid;
      gap: var(--space-4);
    }
    .contact-intro-copy p{
      margin:0;
      max-width: none;
      font-size: var(--text-s);
      line-height: var(--lh-normal);
    }
    .contact-form{
      grid-column: 1 / span 8;
      display:grid;
      gap: var(--space-6);
      min-width:0;
    }
    .contact-grid{
      display:grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-6) var(--space-5);
      min-width:0;
    }
    .form-col{
      display:grid;
      gap: var(--space-5);
      min-width:0;
      align-content:start;
    }
    .field{
      display:grid;
      gap: var(--space-2);
    }
    .field label{
      font-size: var(--text-s);
      line-height: var(--lh-snug);
      font-weight:400;
      font-style: normal;
    }
    .field input,
    .field textarea{
      width:100%;
      border: 0;
      border-bottom: var(--line-1) solid var(--color-gray);
      background: transparent;
      color: var(--ink);
      font-family:"PMNCaeciliaSans", system-ui, sans-serif;
      font-size: var(--text-s);
      line-height: var(--lh-normal);
      border-radius: var(--radius-none);
      padding: var(--space-2) 0 var(--space-3);
      transition: border-color 150ms ease, color 150ms ease;
    }
    .field input{
      min-height: var(--size-8);
    }
    .field input#name,
    .field input#email{
      height: var(--size-7);
      min-height: var(--size-7);
    }
    .field textarea{
      min-height: var(--size-14);
      resize: vertical;
    }
    .field input:focus-visible,
    .field textarea:focus-visible{
      outline: none;
      border-bottom-color: var(--color-accent);
      background: transparent;
    }
    .field textarea::placeholder{
      color: var(--color-gray);
    }
    .field input[aria-invalid="true"],
    .field textarea[aria-invalid="true"]{
      border-bottom-color: var(--color-accent);
    }
    .field-note{
      margin:0;
      font-size: var(--text-xs);
      color: var(--color-gray);
      line-height: var(--lh-normal);
    }
    .services-head{
      display:grid;
      gap: var(--space-2);
    }
    .services-list{
      display:flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-top: var(--space-1);
    }
    .form-required-note{
      margin: var(--space-2) 0 0 0;
      justify-self:start;
      margin-left:0;
      text-align:left;
      color: var(--color-gray);
      font-size: var(--text-xs);
      line-height: var(--lh-snug);
    }
    @media (min-width: 1520px){
      .contact-form{
        grid-column: 1 / span 12;
        grid-template-columns: repeat(12, minmax(0, 1fr));
      }
      .contact-grid{
        grid-column: 1 / -1;
        grid-template-columns: repeat(12, minmax(0, 1fr));
      }
      .form-col:first-child{
        grid-column: span 4;
      }
      .form-col:last-child{
        grid-column: span 6;
      }
    }
    .contact-budget{
      display:grid;
      gap: var(--space-2);
      margin-top: var(--space-1);
    }
    .budget-slider{
      --budget-thumb-size: calc(var(--size-6) - var(--size-1));
      position: relative;
      padding-top: var(--space-7);
      padding-bottom: var(--space-7);
    }
    .budget-value{
      position:absolute;
      top: var(--space-2);
      left: 0;
      transform: translateX(-50%);
      padding: var(--space-1) var(--space-2);
      border-radius: var(--radius-full);
      background: var(--ink);
      color: var(--paper);
      font-size: var(--text-xs);
      line-height: var(--lh-flat);
      white-space: nowrap;
      opacity:0;
      pointer-events:none;
      transition: opacity 130ms ease;
    }
    .budget-value::after{
      content:"";
      position:absolute;
      left:50%;
      bottom: calc(-1 * var(--size-1));
      width: var(--size-2);
      height: var(--size-2);
      background: inherit;
      transform: translateX(-50%) rotate(45deg);
    }
    .budget-value.is-visible{
      opacity:1;
    }
    .budget-slider input[type="range"]{
      width:100%;
      margin:0;
      padding:0;
      border:0;
      appearance:none;
      -webkit-appearance:none;
      background: transparent;
      height: var(--budget-thumb-size);
      cursor: none;
      display:block;
    }
    .budget-slider input[type="range"]::-webkit-slider-runnable-track{
      height: var(--budget-thumb-size);
      border-radius: var(--radius-full);
      background: var(--color-control-track);
      border: 0;
    }
    .budget-slider input[type="range"]::-webkit-slider-thumb{
      appearance:none;
      -webkit-appearance:none;
      margin-top: 0;
      width: var(--budget-thumb-size);
      height: var(--budget-thumb-size);
      border-radius: var(--radius-round);
      border: 0;
      background: var(--ink);
      cursor: none;
      transition: transform 120ms ease, opacity 150ms ease;
    }
    .budget-slider input[type="range"]::-moz-range-track{
      height: var(--budget-thumb-size);
      border-radius: var(--radius-full);
      background: var(--color-control-track);
      border: 0;
    }
    .budget-slider input[type="range"]::-moz-range-thumb{
      width: var(--budget-thumb-size);
      height: var(--budget-thumb-size);
      border-radius: var(--radius-round);
      border: 0;
      background: var(--ink);
      cursor: none;
      transition: transform 120ms ease, opacity 150ms ease;
    }
    .budget-slider input[type="range"].is-pristine::-webkit-slider-thumb{
      opacity:0;
      transform: scale(0);
    }
    .budget-slider input[type="range"].is-pristine::-moz-range-thumb{
      opacity:0;
      transform: scale(0);
    }
    .budget-slider input[type="range"]:focus-visible{
      outline:none;
    }
    .budget-slider input[type="range"]:focus-visible::-webkit-slider-thumb,
    .budget-slider input[type="range"]:focus-visible::-moz-range-thumb{
      transform: scale(1.05);
    }
    .budget-markers{
      position:absolute;
      left: calc(var(--budget-thumb-size) / 2);
      right: calc(var(--budget-thumb-size) / 2);
      top: 50%;
      transform: translateY(-50%);
      height: var(--budget-thumb-size);
      pointer-events:none;
    }
    .budget-marker{
      position:absolute;
      top: 0;
      left: 0;
      transform: translateX(-50%);
      padding-top: calc(var(--budget-thumb-size) + var(--space-2));
      color: var(--color-gray);
      font-size: var(--text-xs);
      line-height: var(--lh-flat);
      white-space: nowrap;
      text-align:center;
    }
    .budget-marker::before{
      content:"";
      position:absolute;
      top:0;
      left:50%;
      transform: translateX(-50%);
      width: var(--line-1);
      height: calc(var(--size-6) - var(--size-1));
      background: var(--color-gray);
    }
    .form-error{
      margin:0;
      font-size: var(--text-xs);
      line-height: var(--lh-normal);
      color: var(--color-accent);
      opacity:0;
      min-height: 1.2em;
      transition: opacity 140ms ease;
    }
    .form-error.is-visible{
      opacity:1;
    }
    .form-error--services{
      margin-top: var(--space-1);
    }
    .contact-submit{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      flex-wrap: wrap;
      margin-top: var(--space-5);
    }
    .contact-privacy{
      margin-top: var(--space-2);
    }
    .contact-privacy-label{
      display:grid !important;
      grid-template-columns: var(--size-4) minmax(0, 1fr);
      gap: var(--space-2);
      align-items:start;
      font-size: var(--text-xs) !important;
      line-height: var(--lh-normal) !important;
    }
    .contact-privacy-label input{
      width: var(--size-4);
      height: var(--size-4);
      min-height: 0;
      margin: 0.15em 0 0;
      padding: 0;
      accent-color: var(--color-accent);
    }
    .contact-privacy-label a{
      color: inherit;
      font-style: italic;
      text-underline-offset: 0.18em;
    }
    .contact-honeypot{
      position:absolute !important;
      width: var(--line-1) !important;
      height: var(--line-1) !important;
      overflow:hidden !important;
      clip: rect(0 0 0 0) !important;
      clip-path: inset(50%) !important;
      white-space: nowrap !important;
    }
    .contact-submit .btn[disabled]{
      background: var(--color-text);
      color: var(--color-bg);
      border: var(--marker-border) solid transparent;
      opacity:1;
      pointer-events:none;
    }
    .contact-submit .btn:not([disabled]){
      background: var(--btn-attention-bg);
      color: var(--btn-attention-fg);
      border: var(--btn-attention-border);
    }
    .contact-submit .btn:not([disabled]):hover,
    .contact-submit .btn:not([disabled]):focus-visible{
      background: var(--btn-attention-hover-bg);
      color: var(--btn-attention-hover-fg);
      border: var(--btn-attention-hover-border);
    }
    .contact-submit .btn.is-sent{
      background: transparent;
      border: var(--marker-border) solid var(--btn-secondary-border);
      color: var(--btn-secondary-fg);
      font-style: italic;
      pointer-events:none;
    }
    .contact-submit .btn.is-sent:hover,
    .contact-submit .btn.is-sent:focus-visible{
      background: transparent;
      border: var(--marker-border) solid var(--btn-secondary-border);
      color: var(--btn-secondary-fg);
      outline:none;
    }
    .submit-status{
      margin:0;
      width: 100%;
      text-align: right;
      font-size: var(--text-xs);
      color: var(--color-gray);
      line-height: var(--lh-normal);
    }
    .submit-status.is-error{
      color: var(--color-accent);
    }
    .submit-status.is-success{
      color: var(--ink);
    }
    @media (min-width: 700px) and (max-width: 1519px){
      .contact-main{
        grid-template-columns: 1fr;
      }
      .contact-intro,
      .contact-form{
        grid-column: 1 / -1;
      }
      .contact-intro-copy p{
        max-width: 55ch;
      }
    }
    @media (max-width: 699px){
      .contact-main{
        grid-template-columns: 1fr;
      }
      .contact-intro,
      .contact-form{
        grid-column: 1 / -1;
      }
      .contact-grid{
        grid-template-columns: 1fr;
      }
    }

    /* -----------------------------
       Auftraggeber:innen & Resonanz
       ----------------------------- */
    .rail-section{
      position: relative;
      z-index: 2;
      background: var(--bg);
      padding-top:0;
      padding-bottom: var(--space-10);
    }
    .rail-section + .rail-section{
      padding-top: var(--space-7);
    }
    .rail-section.no-border{ border-bottom: 0; }
    .intro.intro--marker-with-copy{
      padding-bottom: var(--space-10);
    }
    body.about-page #clients.rail-section{
      padding-top: 0;
    }

    .section-marker-wrap{
      position: sticky;
      top: calc(var(--header-visible) + var(--space-7));
      z-index: 20;
      align-self: flex-start;
    }
    .section-marker-wrap--static{
      position: static;
      top: auto;
    }
    .section-marker-support{
      display: grid;
      gap: var(--space-3);
      overflow: visible;
    }
    .section-marker-copy{
      margin: 0;
      width: min(40rem, calc(100vw - var(--outer-pad-left) - var(--outer-pad-right) - var(--space-8)));
      max-width: none;
      font-size: var(--text-s);
      line-height: var(--lh-normal);
      font-weight: 400;
      text-transform: none;
      letter-spacing: 0;
    }
    .project-related-cards.is-dragging{ cursor: grabbing; }

    .section-navmarker{
      display:block;
      height: auto;
      padding: 0;
      background: transparent;
      width: fit-content;
      font-size: 0;
      line-height: 0;
      user-select:none;
      overflow: visible;
    }
    .section-navmarker .navmarker-btn + .navmarker-btn{
      margin-left: var(--space-5);
    }
    .navmarker-btn{
      height: auto;
      width: auto;
      padding: 0;
      border: 0;
      color: var(--text-main);
      background: transparent;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      line-height: 0;
      vertical-align: top;
      transition: color 160ms ease, transform 90ms ease;
      -webkit-tap-highlight-color: transparent;
    }
    .nav-arrow{
      width: calc(var(--space-4) + var(--space-1));
      height: calc(var(--space-4) + var(--space-1));
      display:block;
      fill: currentColor;
      overflow: visible;
      transform: rotate(-90deg);
    }
    .navmarker-btn.is-prev .nav-arrow{
      transform: rotate(90deg);
    }
    .navmarker-btn:hover,
    .navmarker-btn:focus-visible{
      color: var(--text-main);
      outline:none;
    }
    .navmarker-btn[disabled]{
      color: var(--color-gray);
      cursor: default;
      pointer-events: none;
    }
    .navmarker-btn:active{ transform: translateY(var(--line-1)) scale(0.98); }
    /* -----------------------------
       Footer (Screenshot-Layout) + Grid Toggle
       ----------------------------- */
    footer.footer{
      margin-top: auto;
      background: var(--color-accent);
      color: var(--color-accent-contrast);
      padding: var(--space-7) var(--outer-pad-right) var(--space-5) var(--outer-pad-left);
      position: relative;
    }
    .footer-stage{
      row-gap: var(--space-5);
    }
    .footer-links{
      --footer-link-col: 12ch;
      --footer-link-gap: var(--gap);
      grid-column: 5 / -1;
      grid-row: 2;
      display: grid;
      grid-template-columns:
        var(--footer-link-col)
        var(--footer-link-gap)
        var(--footer-link-col)
        var(--footer-link-col)
        var(--footer-link-col);
      column-gap: 0;
      color: var(--color-accent-contrast);
      align-self: start;
      min-width: 0;
    }
    .footer-logo{
      --footer-logo-optical-shift: -4%;
      --footer-logo-optical-width: 104.17%;
      grid-column: 1 / -1;
      grid-row: 3;
      justify-self: stretch;
      align-self: end;
      color: var(--color-accent-contrast);
      display: block;
      line-height: 0;
      text-decoration: none;
      margin-top: var(--space-9);
      width: 100%;
    }
    .footer-logo svg{
      display: block;
      width: var(--footer-logo-optical-width);
      height: auto;
      fill: currentColor;
      overflow: visible;
      transform: translateX(var(--footer-logo-optical-shift));
    }

    .footer h4{
      margin:0 0 var(--space-3) 0;
      font-size: var(--text-xs);
      font-weight:700;
      font-style: normal;
      color: currentColor;
      text-transform: uppercase;
      letter-spacing: 0.15em;
    }
    .footer a:not(.btn){
      color: currentColor;
      text-decoration:none;
      font-style: italic;
      font-weight: 400;
    }
    .footer a:not(.btn):hover,
    .footer a:not(.btn):focus-visible{
      color: currentColor;
      outline:none;
    }

    .footer-cookie-settings{
      appearance:none;
      display:inline;
      width:auto;
      margin:0;
      padding:0;
      background:none;
      color:currentColor;
      border:0;
      border-radius:0;
      font:inherit;
      font-style:italic;
      font-weight:400;
      line-height:inherit;
      text-align:left;
      cursor:pointer;
    }
    .footer-cookie-settings:hover,
    .footer-cookie-settings:focus-visible{
      color:currentColor;
      outline:none;
    }

    .footer-nav{
      list-style:none;
      padding:0;
      margin:0;
      display:flex;
      flex-direction:column;
      gap: var(--space-2);
    }

    .footer-col{
      min-width:0;
    }
    .footer-links > .footer-col:nth-child(1){
      grid-column: 1;
    }
    .footer-links > .footer-col:nth-child(2){
      grid-column: 3;
    }
    .footer-links > .footer-col:nth-child(3){
      grid-column: 5;
    }

    .footer-meta{
      grid-column: 1 / -1;
      grid-row: 4;
      justify-self:start;
      align-self:end;
      color: var(--color-accent-contrast);
      margin: 0;
    }

    .to-top{
      grid-column: 13 / -1;
      grid-row: 1;
      justify-self:end;
      align-self:start;
    }
    .footer{
      --btn-secondary-border: var(--color-accent-contrast);
      --btn-secondary-fg: var(--color-accent-contrast);
      --btn-secondary-hover-bg: var(--color-accent-contrast);
      --btn-secondary-hover-fg: var(--color-bg);
      --btn-primary-bg: var(--color-accent-contrast);
      --btn-primary-fg: var(--color-bg);
      --btn-primary-border: var(--marker-border) solid transparent;
      --btn-primary-hover-bg: var(--color-bg);
      --btn-primary-hover-fg: var(--color-text);
      --btn-primary-hover-border: var(--marker-border) solid transparent;
      --btn-attention-bg: var(--color-accent-contrast);
      --btn-attention-fg: var(--color-bg);
      --btn-attention-border: var(--marker-border) solid transparent;
      --btn-attention-hover-bg: var(--color-bg);
      --btn-attention-hover-fg: var(--color-text);
      --btn-attention-hover-border: var(--marker-border) solid transparent;
    }

    @media (max-width: 1519px){
      footer.footer{
        padding-top: var(--space-7);
        padding-bottom: var(--space-5);
      }
    }

    @media (min-width: 700px) and (max-width: 959px){
      .footer-links{
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--gap);
      }
      .footer-links > .footer-col:nth-child(1){
        grid-column: 1;
      }
      .footer-links > .footer-col:nth-child(2){
        grid-column: 2;
      }
      .footer-links > .footer-col:nth-child(3){
        grid-column: 3;
      }
      .to-top{
        grid-column: 5 / -1;
      }
    }

    @media (min-width: 960px) and (max-width: 1519px){
      .footer-logo{
        grid-column: 3 / -1;
      }
      .footer-links{
        grid-column: 3 / -1;
      }
      .to-top{
        grid-column: 7 / -1;
      }
    }

    @media (min-width: 1520px){
      .footer-logo{
        grid-column: 5 / -1;
      }
    }

    @media (max-width: 699px){
      footer.footer{
        padding: var(--space-6) var(--outer-pad-right) var(--space-5) var(--outer-pad-left);
      }
      .footer-stage{
        row-gap: var(--space-6);
      }
      .footer-links{
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--gap);
        row-gap: var(--space-6);
      }
      .footer-links > .footer-col:nth-child(1){
        grid-column: 1;
      }
      .footer-links > .footer-col:nth-child(2){
        grid-column: 2;
      }
      .footer-links > .footer-col:nth-child(3){
        grid-column: 1;
        grid-row: 2;
      }
      .to-top{
        grid-column: 3 / -1;
        grid-row: 1;
        justify-self:end;
      }
      .footer-logo{
        grid-row: 3;
      }
      .footer-meta{
        grid-row: 4;
        justify-self:start;
        margin-top: var(--space-2);
      }
    }

    /* -----------------------------
       Breakpoints: 5 / 10 / 15 col system
       ----------------------------- */

    /* Mobile: compact layout */
    @media (max-width:699px){
      :root{
        --outer-pad-left: var(--space-8);
        --outer-pad-right: var(--space-4);
        --gap: var(--space-5);
        --grid-cols: 4;
        --content-cols: 4;
        --rail-span: 1;
        --content-start: 1;
        --display-heading-span: 3;
        --menu-panel-start-column: 2;
        --menu-panel-link-start: 1;
      }


      .nav{ display:none; }
      .burger{ display:inline-flex; }
      .logo-slot .logo-image-full{ display:none; }
      .logo-slot .logo-image-responsive{ display:block; }
      .burger-panel::after{
        left: 0;
      }
      .projects-counter{
        grid-column: -2 / -1;
      }
      .projects-counter{
        justify-self: end;
        margin-top: 0;
      }
    }

    /* Compact marker logic: markers stay vertical in the outer rail */
    @media (max-width:959px){
      .rail-item{
        grid-column: 1 / -1;
        width: var(--outer-pad-left);
        justify-self: start;
        margin-left: 0;
        display:flex;
        justify-content:center;
        position:absolute;
        left: calc(-1 * var(--outer-pad-left));
        top: 0;
        z-index: 20;
      }
      /* Mobile rail markers need two roles at once:
         the wrapper sits absolutely in the left rail so it does not create
         an extra stage row, while the inner marker stays sticky within that
         full-height wrapper. Do not collapse these back onto one element. */
      .section-marker-wrap.rail-item{
        position: absolute;
        top: 0;
        left: calc(-1 * var(--outer-pad-left));
        width: var(--outer-pad-left);
        height: 100%;
        display: block;
        margin-left: 0;
        justify-self:start;
        align-self:start;
      }
      .intro--marker-with-copy .section-marker-wrap.rail-item{
        height: calc(100% - var(--after-divider-offset));
      }
      .section-marker-wrap.rail-item:not(.section-marker-wrap--static) .marker{
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        position: sticky;
        top: calc(var(--header-visible) + var(--space-7));
      }
      .section-marker-wrap--static.rail-item{
        position: static;
        top: auto;
        width: auto;
        height: auto;
      }
      .section-marker-wrap--static.rail-item .marker{
        position: static;
      }
      .hero .rail-item{ align-self:start; }
    }

    /* Transition: laptop-like content, markers still vertical in the rail */
    @media (min-width: 700px) and (max-width: 959px){
      :root{
        --outer-pad-left: var(--space-8);
        --outer-pad-right: var(--space-4);
        --gap: var(--space-6);
        --header-logo-offset: var(--space-8);
        --grid-cols: 6;
        --content-cols: 6;
        --rail-span: 1;
        --content-start: 1;
        --display-heading-span: 5;
        --menu-panel-start-column: 3;
        --menu-panel-link-start: 4;
        --menu-panel-cols: 6;
      }

      .burger-panel{
        grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
        padding-left: var(--outer-pad-left);
        padding-right: var(--outer-pad-right);
      }
      .burger-panel::after{
        left: calc(var(--outer-pad-left) + var(--menu-panel-left));
      }
      .nav{ display:none; }
      .burger{ display:inline-flex; }
      .logo-slot .logo-image-full{ display:none; }
      .logo-slot .logo-image-responsive{ display:block; }
    }

    /* Laptop/Tablet Landscape: 8er Grid (2 Marker / 6 Content) */
    @media (min-width: 960px) and (max-width: 1519px){
      .hero-wordmark{
        width: calc((6 * var(--hero-stage-col)) + (5 * var(--gap)));
      }
      :root{
        --outer-pad-left: var(--space-8);
        --outer-pad-right: var(--space-8);
        --gap: var(--space-6);
        --header-logo-offset: var(--space-8);
        --grid-cols: 8;
        --content-cols: 6;
        --rail-span: 2;
        --content-start: 3;
        --display-heading-span: 7;
        --menu-panel-start-column: 4;
        --menu-panel-link-start: 2;
        --menu-panel-cols: 5;
      }

      .burger-panel{
        grid-template-columns: repeat(var(--menu-panel-cols), var(--menu-grid-col-w));
        padding-left: calc(var(--outer-pad-left) + var(--menu-panel-left));
        padding-right: var(--outer-pad-right);
      }
      .burger-panel::after{
        left: calc(var(--outer-pad-left) + var(--menu-panel-left));
      }
      .nav{ display:none; }
      .burger{ display:inline-flex; }
      .logo-slot .logo-image-full{ display:none; }
      .logo-slot .logo-image-responsive{ display:block; }
    }
    @media (min-width: 1240px) and (max-width: 1519px){
      .logo-slot .logo-image-full{ display:block; }
      .logo-slot .logo-image-responsive{ display:none; }
    }

    /* Desktop: 16er Grid (4/12) – default values in :root */

    /* -----------------------------
       Utilities (Spacing + Type)
       ----------------------------- */
    /* How to use utilities:
       - Spacing: use the strict scale, e.g. .mt-5 (24px), .px-6 (32px), .gap-4 (16px)
       - Type: use .text-* for size and .lh-* for rhythm (avoid ad-hoc font-size)
       - Clamp: only for display sizes (H1/Lead), keep body text on fixed tokens
    */
    /* Examples:
       - Button: class="px-5 py-3 text-s lh-flat"
       - Card: class="p-6 mb-7"
       - Section: class="py-8"
       - Eyebrow/Label: class="text-xs lh-tight"
       - Lead: class="text-s lh-normal"
    */
    .text-xs{ font-size: var(--text-xs); }
    .text-s{ font-size: var(--text-s); }
    .text-m{ font-size: var(--text-m); }
    .text-l{ font-size: var(--text-l); }
    .text-xl{ font-size: var(--text-xl); }
    .text-2xl{ font-size: var(--text-2xl); }
    .text-3xl{ font-size: var(--text-3xl); }
    .text-4xl{ font-size: var(--text-4xl); }

    .lh-display{ line-height: var(--lh-display); }
    .lh-flat{ line-height: var(--lh-flat); }
    .lh-snug{ line-height: var(--lh-snug); }
    .lh-tight{ line-height: var(--lh-tight); }
    .lh-normal{ line-height: var(--lh-normal); }
    .lh-relaxed{ line-height: var(--lh-relaxed); }

    .m-1{ margin: var(--space-1); }
    .m-2{ margin: var(--space-2); }
    .m-3{ margin: var(--space-3); }
    .m-4{ margin: var(--space-4); }
    .m-5{ margin: var(--space-5); }
    .m-6{ margin: var(--space-6); }
    .m-7{ margin: var(--space-7); }
    .m-8{ margin: var(--space-8); }
    .m-9{ margin: var(--space-9); }
    .m-10{ margin: var(--space-10); }
    .m-11{ margin: var(--space-11); }
    .m-12{ margin: var(--space-12); }
    .m-13{ margin: var(--space-13); }
    .m-14{ margin: var(--space-14); }
    .m-15{ margin: var(--space-15); }
    .m-16{ margin: var(--space-16); }

    .mt-1{ margin-top: var(--space-1); }
    .mt-2{ margin-top: var(--space-2); }
    .mt-3{ margin-top: var(--space-3); }
    .mt-4{ margin-top: var(--space-4); }
    .mt-5{ margin-top: var(--space-5); }
    .mt-6{ margin-top: var(--space-6); }
    .mt-7{ margin-top: var(--space-7); }
    .mt-8{ margin-top: var(--space-8); }
    .mt-9{ margin-top: var(--space-9); }
    .mt-10{ margin-top: var(--space-10); }
    .mt-11{ margin-top: var(--space-11); }
    .mt-12{ margin-top: var(--space-12); }
    .mt-13{ margin-top: var(--space-13); }
    .mt-14{ margin-top: var(--space-14); }
    .mt-15{ margin-top: var(--space-15); }
    .mt-16{ margin-top: var(--space-16); }

    .mb-1{ margin-bottom: var(--space-1); }
    .mb-2{ margin-bottom: var(--space-2); }
    .mb-3{ margin-bottom: var(--space-3); }
    .mb-4{ margin-bottom: var(--space-4); }
    .mb-5{ margin-bottom: var(--space-5); }
    .mb-6{ margin-bottom: var(--space-6); }
    .mb-7{ margin-bottom: var(--space-7); }
    .mb-8{ margin-bottom: var(--space-8); }
    .mb-9{ margin-bottom: var(--space-9); }
    .mb-10{ margin-bottom: var(--space-10); }
    .mb-11{ margin-bottom: var(--space-11); }
    .mb-12{ margin-bottom: var(--space-12); }
    .mb-13{ margin-bottom: var(--space-13); }
    .mb-14{ margin-bottom: var(--space-14); }
    .mb-15{ margin-bottom: var(--space-15); }
    .mb-16{ margin-bottom: var(--space-16); }

    .ml-1{ margin-left: var(--space-1); }
    .ml-2{ margin-left: var(--space-2); }
    .ml-3{ margin-left: var(--space-3); }
    .ml-4{ margin-left: var(--space-4); }
    .ml-5{ margin-left: var(--space-5); }
    .ml-6{ margin-left: var(--space-6); }
    .ml-7{ margin-left: var(--space-7); }
    .ml-8{ margin-left: var(--space-8); }
    .ml-9{ margin-left: var(--space-9); }
    .ml-10{ margin-left: var(--space-10); }
    .ml-11{ margin-left: var(--space-11); }
    .ml-12{ margin-left: var(--space-12); }
    .ml-13{ margin-left: var(--space-13); }
    .ml-14{ margin-left: var(--space-14); }
    .ml-15{ margin-left: var(--space-15); }
    .ml-16{ margin-left: var(--space-16); }

    .mr-1{ margin-right: var(--space-1); }
    .mr-2{ margin-right: var(--space-2); }
    .mr-3{ margin-right: var(--space-3); }
    .mr-4{ margin-right: var(--space-4); }
    .mr-5{ margin-right: var(--space-5); }
    .mr-6{ margin-right: var(--space-6); }
    .mr-7{ margin-right: var(--space-7); }
    .mr-8{ margin-right: var(--space-8); }
    .mr-9{ margin-right: var(--space-9); }
    .mr-10{ margin-right: var(--space-10); }
    .mr-11{ margin-right: var(--space-11); }
    .mr-12{ margin-right: var(--space-12); }
    .mr-13{ margin-right: var(--space-13); }
    .mr-14{ margin-right: var(--space-14); }
    .mr-15{ margin-right: var(--space-15); }
    .mr-16{ margin-right: var(--space-16); }

    .mx-1{ margin-left: var(--space-1); margin-right: var(--space-1); }
    .mx-2{ margin-left: var(--space-2); margin-right: var(--space-2); }
    .mx-3{ margin-left: var(--space-3); margin-right: var(--space-3); }
    .mx-4{ margin-left: var(--space-4); margin-right: var(--space-4); }
    .mx-5{ margin-left: var(--space-5); margin-right: var(--space-5); }
    .mx-6{ margin-left: var(--space-6); margin-right: var(--space-6); }
    .mx-7{ margin-left: var(--space-7); margin-right: var(--space-7); }
    .mx-8{ margin-left: var(--space-8); margin-right: var(--space-8); }
    .mx-9{ margin-left: var(--space-9); margin-right: var(--space-9); }
    .mx-10{ margin-left: var(--space-10); margin-right: var(--space-10); }
    .mx-11{ margin-left: var(--space-11); margin-right: var(--space-11); }
    .mx-12{ margin-left: var(--space-12); margin-right: var(--space-12); }
    .mx-13{ margin-left: var(--space-13); margin-right: var(--space-13); }
    .mx-14{ margin-left: var(--space-14); margin-right: var(--space-14); }
    .mx-15{ margin-left: var(--space-15); margin-right: var(--space-15); }
    .mx-16{ margin-left: var(--space-16); margin-right: var(--space-16); }

    .my-1{ margin-top: var(--space-1); margin-bottom: var(--space-1); }
    .my-2{ margin-top: var(--space-2); margin-bottom: var(--space-2); }
    .my-3{ margin-top: var(--space-3); margin-bottom: var(--space-3); }
    .my-4{ margin-top: var(--space-4); margin-bottom: var(--space-4); }
    .my-5{ margin-top: var(--space-5); margin-bottom: var(--space-5); }
    .my-6{ margin-top: var(--space-6); margin-bottom: var(--space-6); }
    .my-7{ margin-top: var(--space-7); margin-bottom: var(--space-7); }
    .my-8{ margin-top: var(--space-8); margin-bottom: var(--space-8); }
    .my-9{ margin-top: var(--space-9); margin-bottom: var(--space-9); }
    .my-10{ margin-top: var(--space-10); margin-bottom: var(--space-10); }
    .my-11{ margin-top: var(--space-11); margin-bottom: var(--space-11); }
    .my-12{ margin-top: var(--space-12); margin-bottom: var(--space-12); }
    .my-13{ margin-top: var(--space-13); margin-bottom: var(--space-13); }
    .my-14{ margin-top: var(--space-14); margin-bottom: var(--space-14); }
    .my-15{ margin-top: var(--space-15); margin-bottom: var(--space-15); }
    .my-16{ margin-top: var(--space-16); margin-bottom: var(--space-16); }

    .p-1{ padding: var(--space-1); }
    .p-2{ padding: var(--space-2); }
    .p-3{ padding: var(--space-3); }
    .p-4{ padding: var(--space-4); }
    .p-5{ padding: var(--space-5); }
    .p-6{ padding: var(--space-6); }
    .p-7{ padding: var(--space-7); }
    .p-8{ padding: var(--space-8); }
    .p-9{ padding: var(--space-9); }
    .p-10{ padding: var(--space-10); }
    .p-11{ padding: var(--space-11); }
    .p-12{ padding: var(--space-12); }
    .p-13{ padding: var(--space-13); }
    .p-14{ padding: var(--space-14); }
    .p-15{ padding: var(--space-15); }
    .p-16{ padding: var(--space-16); }

    .pt-1{ padding-top: var(--space-1); }
    .pt-2{ padding-top: var(--space-2); }
    .pt-3{ padding-top: var(--space-3); }
    .pt-4{ padding-top: var(--space-4); }
    .pt-5{ padding-top: var(--space-5); }
    .pt-6{ padding-top: var(--space-6); }
    .pt-7{ padding-top: var(--space-7); }
    .pt-8{ padding-top: var(--space-8); }
    .pt-9{ padding-top: var(--space-9); }
    .pt-10{ padding-top: var(--space-10); }
    .pt-11{ padding-top: var(--space-11); }
    .pt-12{ padding-top: var(--space-12); }
    .pt-13{ padding-top: var(--space-13); }
    .pt-14{ padding-top: var(--space-14); }
    .pt-15{ padding-top: var(--space-15); }
    .pt-16{ padding-top: var(--space-16); }

    .pb-1{ padding-bottom: var(--space-1); }
    .pb-2{ padding-bottom: var(--space-2); }
    .pb-3{ padding-bottom: var(--space-3); }
    .pb-4{ padding-bottom: var(--space-4); }
    .pb-5{ padding-bottom: var(--space-5); }
    .pb-6{ padding-bottom: var(--space-6); }
    .pb-7{ padding-bottom: var(--space-7); }
    .pb-8{ padding-bottom: var(--space-8); }
    .pb-9{ padding-bottom: var(--space-9); }
    .pb-10{ padding-bottom: var(--space-10); }
    .pb-11{ padding-bottom: var(--space-11); }
    .pb-12{ padding-bottom: var(--space-12); }
    .pb-13{ padding-bottom: var(--space-13); }
    .pb-14{ padding-bottom: var(--space-14); }
    .pb-15{ padding-bottom: var(--space-15); }
    .pb-16{ padding-bottom: var(--space-16); }

    .pl-1{ padding-left: var(--space-1); }
    .pl-2{ padding-left: var(--space-2); }
    .pl-3{ padding-left: var(--space-3); }
    .pl-4{ padding-left: var(--space-4); }
    .pl-5{ padding-left: var(--space-5); }
    .pl-6{ padding-left: var(--space-6); }
    .pl-7{ padding-left: var(--space-7); }
    .pl-8{ padding-left: var(--space-8); }
    .pl-9{ padding-left: var(--space-9); }
    .pl-10{ padding-left: var(--space-10); }
    .pl-11{ padding-left: var(--space-11); }
    .pl-12{ padding-left: var(--space-12); }
    .pl-13{ padding-left: var(--space-13); }
    .pl-14{ padding-left: var(--space-14); }
    .pl-15{ padding-left: var(--space-15); }
    .pl-16{ padding-left: var(--space-16); }

    .pr-1{ padding-right: var(--space-1); }
    .pr-2{ padding-right: var(--space-2); }
    .pr-3{ padding-right: var(--space-3); }
    .pr-4{ padding-right: var(--space-4); }
    .pr-5{ padding-right: var(--space-5); }
    .pr-6{ padding-right: var(--space-6); }
    .pr-7{ padding-right: var(--space-7); }
    .pr-8{ padding-right: var(--space-8); }
    .pr-9{ padding-right: var(--space-9); }
    .pr-10{ padding-right: var(--space-10); }
    .pr-11{ padding-right: var(--space-11); }
    .pr-12{ padding-right: var(--space-12); }
    .pr-13{ padding-right: var(--space-13); }
    .pr-14{ padding-right: var(--space-14); }
    .pr-15{ padding-right: var(--space-15); }
    .pr-16{ padding-right: var(--space-16); }

    .px-1{ padding-left: var(--space-1); padding-right: var(--space-1); }
    .px-2{ padding-left: var(--space-2); padding-right: var(--space-2); }
    .px-3{ padding-left: var(--space-3); padding-right: var(--space-3); }
    .px-4{ padding-left: var(--space-4); padding-right: var(--space-4); }
    .px-5{ padding-left: var(--space-5); padding-right: var(--space-5); }
    .px-6{ padding-left: var(--space-6); padding-right: var(--space-6); }
    .px-7{ padding-left: var(--space-7); padding-right: var(--space-7); }
    .px-8{ padding-left: var(--space-8); padding-right: var(--space-8); }
    .px-9{ padding-left: var(--space-9); padding-right: var(--space-9); }
    .px-10{ padding-left: var(--space-10); padding-right: var(--space-10); }
    .px-11{ padding-left: var(--space-11); padding-right: var(--space-11); }
    .px-12{ padding-left: var(--space-12); padding-right: var(--space-12); }
    .px-13{ padding-left: var(--space-13); padding-right: var(--space-13); }
    .px-14{ padding-left: var(--space-14); padding-right: var(--space-14); }
    .px-15{ padding-left: var(--space-15); padding-right: var(--space-15); }
    .px-16{ padding-left: var(--space-16); padding-right: var(--space-16); }

    .py-1{ padding-top: var(--space-1); padding-bottom: var(--space-1); }
    .py-2{ padding-top: var(--space-2); padding-bottom: var(--space-2); }
    .py-3{ padding-top: var(--space-3); padding-bottom: var(--space-3); }
    .py-4{ padding-top: var(--space-4); padding-bottom: var(--space-4); }
    .py-5{ padding-top: var(--space-5); padding-bottom: var(--space-5); }
    .py-6{ padding-top: var(--space-6); padding-bottom: var(--space-6); }
    .py-7{ padding-top: var(--space-7); padding-bottom: var(--space-7); }
    .py-8{ padding-top: var(--space-8); padding-bottom: var(--space-8); }
    .py-9{ padding-top: var(--space-9); padding-bottom: var(--space-9); }
    .py-10{ padding-top: var(--space-10); padding-bottom: var(--space-10); }
    .py-11{ padding-top: var(--space-11); padding-bottom: var(--space-11); }
    .py-12{ padding-top: var(--space-12); padding-bottom: var(--space-12); }
    .py-13{ padding-top: var(--space-13); padding-bottom: var(--space-13); }
    .py-14{ padding-top: var(--space-14); padding-bottom: var(--space-14); }
    .py-15{ padding-top: var(--space-15); padding-bottom: var(--space-15); }
    .py-16{ padding-top: var(--space-16); padding-bottom: var(--space-16); }

    .gap-1{ gap: var(--space-1); }
    .gap-2{ gap: var(--space-2); }
    .gap-3{ gap: var(--space-3); }
    .gap-4{ gap: var(--space-4); }
    .gap-5{ gap: var(--space-5); }
    .gap-6{ gap: var(--space-6); }
    .gap-7{ gap: var(--space-7); }
    .gap-8{ gap: var(--space-8); }
    .gap-9{ gap: var(--space-9); }
    .gap-10{ gap: var(--space-10); }
    .gap-11{ gap: var(--space-11); }
    .gap-12{ gap: var(--space-12); }
    .gap-13{ gap: var(--space-13); }
    .gap-14{ gap: var(--space-14); }
    .gap-15{ gap: var(--space-15); }
    .gap-16{ gap: var(--space-16); }

    @media (prefers-reduced-motion: reduce){
      .hero-wordmark-face{ transition:none; }
      .media-inner::after,
      .media-inner .project-card-image{ transition:none; }
    }

    /* -----------------------------
       Grid Overlay (Header Toggle) – aligned to outer padding
       ----------------------------- */
    body.show-grid::before{
      content:"";
      position: fixed;
      top: 0;
      bottom: 0;
      left: var(--outer-pad-left);
      right: var(--outer-pad-right);
      z-index: 9999;
      pointer-events: none;

      --g: var(--gap);
      --cols: var(--grid-cols);
      --avail: 100%;
      --col: calc((var(--avail) - ((var(--cols) - 1) * var(--g))) / var(--cols));

      background:
        repeating-linear-gradient(
          to right,
          rgba(var(--ink-rgb), 0) 0,
          rgba(var(--ink-rgb), 0) var(--col),
          rgba(var(--ink-rgb), .12) var(--col),
          rgba(var(--ink-rgb), .12) calc(var(--col) + var(--g))
        ),
        repeating-linear-gradient(
          to right,
          rgba(var(--paper-rgb), 0) 0,
          rgba(var(--paper-rgb), 0) var(--col),
          rgba(var(--paper-rgb), .08) var(--col),
          rgba(var(--paper-rgb), .08) calc(var(--col) + var(--g))
        );
      opacity: .9;
    }
    body.show-baseline::after{
      content:"";
      position: fixed;
      top: 0;
      bottom: 0;
      left: var(--outer-pad-left);
      right: var(--outer-pad-right);
      z-index: 9998;
      pointer-events: none;
      --baseline-major: calc(var(--baseline-grid) * 4);
      background-image:
        repeating-linear-gradient(
          to bottom,
          rgba(var(--ink-rgb), .08) 0,
          rgba(var(--ink-rgb), .08) var(--line-1),
          transparent var(--line-1),
          transparent var(--baseline-grid)
        ),
        repeating-linear-gradient(
          to bottom,
          rgba(var(--ink-rgb), .14) 0,
          rgba(var(--ink-rgb), .14) var(--line-1),
          transparent var(--line-1),
          transparent var(--baseline-major)
        );
      opacity: .85;
    }