@font-face { font-family: 'Bricolage Pfeile'; src: url('fonts/bricolage/bricolage-pfeile.woff2') format('woff2'); font-weight: 100 900; font-display: block; unicode-range: U+2190-2193, U+2197, U+2199; }  /* bold Bricolage arrows ← ↑ → ↓ ↗ ↙ (weight 800, → and ← built from Bricolage's own ↑) */
@font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/bricolage/bricolage-mail.woff2') format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+002D-002E, U+0030-0039, U+0040, U+005F, U+0061-007A, U+2191, U+2193; }  /* only for the mail address (@ rule) and the arrows; subset a–z 0–9 @ . - _ ↑ ↓ */

@font-face {
  font-family: 'Hanken Rund';
  src: url('fonts/hanken/hanken-rund-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Rund';
  src: url('fonts/hanken/hanken-rund-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: 'Big Shoulders'; src: url('fonts/display/BigShoulders-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }






@font-face {
  font-family: 'Unbounded';
  src: url('fonts/Unbounded.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
  :root {
  /* type scale: 10 steps, values at 1440px, each scales down with the viewport (logo + running "say hy!" excepted) */
  --fs-1: clamp(16px, 1.25vw, 18px);   /* buttons, © line, small legal links */
  --fs-2: clamp(18px, 1.39vw, 20px);   /* header, menu + footer links, eyebrows, labels, notes */
  --fs-3: clamp(19px, 1.53vw, 22px);   /* body copy */
  --fs-4: clamp(21px, 1.81vw, 26px);   /* leads, text links, project names */
  --fs-5: clamp(26px, 2.5vw, 36px);    /* booking chips + mail line, phase numbers */
  --fs-6: clamp(32px, 3.34vw, 48px);   /* footer wordmark, sub heads, band */
  --fs-7: clamp(32px, 3.34vw, 48px);   /* phase names, facts, contact statement (2026-11-04 E2: one step down) */
  --fs-8: clamp(38px, 4.45vw, 64px);   /* hero claim, menu nav, footer head, booking titles */
  --fs-9: clamp(44px, 5.56vw, 80px);   /* statements, section titles */
  --fs-10: clamp(48px, 7.23vw, 104px); /* page titles */
  /* tracking that belongs to the steps: Hanken Rund needs negative letter-spacing once it gets big */
  --ls-1: 0; --ls-2: 0; --ls-3: 0; --ls-4: 0; --ls-5: 0;
  --ls-6: -0.01em; --ls-7: -0.01em; --ls-8: -0.015em; --ls-9: -0.02em; --ls-10: -0.03em;
  --ls-studio: -0.02em;                /* "studio" in the logo */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --accent: #5578e0;
    --menu-bg: #5578e0;
    --cursor-hover: #c8a060;
    --cursor-mail: #a8d8c0;
    --sh-c1: #fff;
    --sh-c2: #fff;
    --bg: #f5f0ea;
    --fg: #1a1a1a;
    --mesh1: #e8ddd0;
    --mesh2: #d4c9bc;
    --mesh3: #c8d8e8;
    --mesh4: #ddd0c8;
  }

  html, body {
    width: 100%; height: 100%;
    background: var(--bg);
    color: var(--fg);
    font-family: 'Hanken Rund', system-ui, sans-serif;
    font-weight: 200;
    overflow-x: hidden;
    cursor: none;
  }

  /* ── Custom cursor ── */
  #cursor {
    position: fixed; z-index: 9999;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--menu-bg);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width .18s, height .18s, background .25s, border-radius .12s;
    mix-blend-mode: multiply;
  }
  #cursor.hovering {
    background: var(--cursor-hover);
  }
  #cursor.in-menu {
    mix-blend-mode: normal;
    background: var(--cursor-hover);
  }
  #cursor.on-mail {
    mix-blend-mode: normal;
    background: var(--cursor-mail);
  }
  @media (hover: none) {
    #cursor { display: none !important; }
    html, body { cursor: auto; }
  }



  /* ── Animated mesh background ── */
  #mesh {
    position: fixed; inset: 0; z-index: 0;
    background: var(--bg);
    overflow: hidden;
  }
  #mesh canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
  }

  /* ── Logo top-left (appears after scroll) ── */
  #logo-fixed {
    position: fixed; top: 28px; left: 32px; z-index: 100;
     letter-spacing: .04em;
    color: var(--fg); opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
    user-select: none;
  }
  #logo-fixed.visible { opacity: 1; pointer-events: auto; }

  /* ── Hamburger ── */
  #menu-btn {
    position: fixed; top: 22px; right: 28px; z-index: 200;
    width: 36px; height: 36px;
    cursor: none;
    background: none; border: none; outline: none;
  }
  #menu-btn span {
    display: block;
    position: absolute;
    left: 0; width: 100%; height: 2.5px;
    background: var(--fg);
    transition: transform .38s cubic-bezier(.77,0,.18,1), opacity .22s;
    transform-origin: 50% 50%;
  }
  #menu-btn span:nth-child(1) { top: 11px; transition: transform .38s cubic-bezier(.77,0,.18,1), opacity .22s, translateX .3s; }
  #menu-btn span:nth-child(2) { top: 23px; }
  #menu-btn span:nth-child(3) { display: none; }
  #menu-btn:hover span:nth-child(1) { transform: translateX(5px); }
  #menu-btn:hover span:nth-child(2) { transform: translateX(-5px); }
  #menu-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  #menu-btn.open span:nth-child(2) { transform: translateY(-6px) rotate(-45deg); }

  /* ── Menu drawer ── */
  #menu-drawer {
    position: fixed; inset: 0; z-index: 150;
    background: var(--menu-bg);
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.77,0,.18,1);
    display: flex; flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 60px 48px;
  }
  #menu-drawer.open { transform: translateX(0); }
  #drawer-top {
    display: flex;
    align-items: flex-end;
    gap: 0;
  }
  .sayhy-wrap {
    width: clamp(34px, 5.5vw, 64px);
    height: clamp(42px, 6.5vw, 76px);
    will-change: transform;
    flex-shrink: 0;
    margin-right: clamp(-6px, -1vw, -3px);
    position: relative;
  }
  #sh-gap { margin-right: clamp(4px, 1vw, 12px) !important; }
  .sayhy-wrap svg { width: 100%; height: 100%; filter: url(#glass); }

  #menu-drawer .drawer-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 80px;
  }
  #menu-drawer .drawer-name,
  #menu-drawer .drawer-role,
  #menu-drawer .drawer-mail {
    font-size: var(--fs-6);
    font-weight: 200;
    line-height: 1.5;
    letter-spacing: .04em;
  }
  #menu-drawer .drawer-name {
    color: #fff;
  }
  #menu-drawer .drawer-role {
    color: rgba(255,255,255,.5);
    text-transform: none;
  }
  #menu-drawer .drawer-mail {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    width: fit-content;
    position: relative;
    letter-spacing: .04em;
    transition: color .3s;
  }
  #menu-drawer .drawer-mail::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    height: 1.5px;
    width: 0;
    background: var(--cursor-hover);
    transition: width .22s cubic-bezier(0, 0.8, 0.2, 1);
  }
  #menu-drawer .drawer-mail:hover {
    color: rgba(255,255,255,.7);
  }
  #menu-drawer .drawer-mail:hover::after {
    width: 100%;
  }
  #menu-drawer .drawer-mail .mc {
    display: inline-block;
    transition: color .2s;
  }
  #menu-drawer .drawer-mail:hover .mc {
    color: var(--cursor-hover);
  }

  /* ── Font loading ── */
  #letters, #subtitle {
    opacity: 0;
    transition: opacity .6s ease;
  }
  body.fonts-loaded #letters,
  body.fonts-loaded #subtitle {
    opacity: 1;
  }

  /* ── Hero ── */
  #hero {
    position: fixed; inset: 0; z-index: 10;
    height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 40px;
    transition: padding-bottom .2s;
  }


  /* ── SVG letters ── */
  #letters {
    display: flex; gap: 0;
    align-items: center; justify-content: center;
  }
  .letter-wrap {
    position: relative;
    width: clamp(80px, 13.8vw, 153px);
    height: clamp(80px, 13.8vw, 153px);
    will-change: transform;
  }
  .letter-wrap svg {
    width: 100%; height: 100%;
    filter: url(#glass);
  }

  /* ── Subtitle ── */
  #subtitle {
    font-size: clamp(22px, 3.6vw, 42px);
    font-weight: 300;
    letter-spacing: .15em;
    text-transform: none;
    color: #1a1a1a;
    opacity: .88;
    text-align: center;
    display: block;
  }




  /* ── Ticker ── */
  #ticker {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    overflow: hidden;
    padding: 12px 0 20px;
    pointer-events: auto;
  }
  #ticker-inner {
    display: flex;
    white-space: nowrap;
    width: max-content;
    will-change: transform;
  }
  .ticker-bullet {
    display: inline-block;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: var(--menu-bg);
    vertical-align: middle;
    margin-bottom: 0.12em;
    margin-left: 0.8em;
    margin-right: 0.8em;
    flex-shrink: 0;
  }
  .ticker-text {
    font-family: 'Hanken Rund', system-ui, sans-serif;
    font-weight: 200;
    font-size: var(--fs-6);
    letter-spacing: .18em;
    color: var(--fg);
    opacity: 1;
    white-space: nowrap;
    padding-right: 0;
  }

  /* ── Main Ticker ── */
  #main-ticker {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    overflow: hidden;
    padding: 12px 0 20px;
    pointer-events: auto;
    opacity: 1;
  }
  #main-ticker-inner {
    display: flex;
    white-space: nowrap;
    width: max-content;
    will-change: transform;
  }
  .main-ticker-text {
    font-family: 'Hanken Rund', system-ui, sans-serif;
    font-weight: 300;
    
    letter-spacing: .05em;
    color: #1a1a1a;
    white-space: nowrap;
  }
  .main-ticker-text .ticker-bullet {
    background: var(--cursor-hover);
  }
  /* ── Back to top ── */
  #btt {
    position: fixed; bottom: 28px; right: 28px; z-index: 100;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--fg);
    border-radius: 50%;
    cursor: none; opacity: 0;
    transition: opacity .4s;
    background: transparent;
  }
  #btt.visible { opacity: .4; }
  #btt:hover { opacity: 1 !important; }
  #btt svg { width: 16px; height: 16px; }



  .drawer-legal {
    position: absolute;
    bottom: 20px; left: 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3em;
  }
  .drawer-legal-link {
    font-size: var(--fs-3);
    font-weight: 200;
    letter-spacing: .06em;
    color: rgba(255,255,255,.25) !important;
    text-decoration: none !important;
    transition: color .2s;
  }
  .drawer-legal-link:hover { color: #fff !important; }

  /* ══ BRAND STUDIO CONTENT (scrollt über den Hero) ══ */
  html, body { height: auto; }
  #content {
    position: relative; z-index: 20;
    margin-top: 100vh;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    color: var(--fg);
  }
  .c-section {
    max-width: 1240px; margin: 0 auto;
    padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 64px);
    border-top: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  }
  .c-section:first-child { border-top: 0; }
  .c-eyebrow {
     font-weight: 300; letter-spacing: .18em;
    opacity: .55; margin-bottom: 36px;
    display: flex; align-items: center; gap: 12px;
  }
  .c-eyebrow::before {
    content: ''; width: 10px; height: 10px; border-radius: 50%;
    background: var(--cursor-hover); flex-shrink: 0;
  }
  .c-statement {
     font-weight: 200;
    line-height: 1.16; letter-spacing: -.005em; max-width: 18ch;
  }
  .c-statement em, .c-h em { font-style: normal; color: var(--cursor-hover); }
  .c-lead {
    font-size: var(--fs-2); font-weight: 300; line-height: 1.7;
    max-width: 56ch; margin-top: 44px; opacity: .82;
  }
  .c-h {
     font-weight: 200; line-height: 1.2;
    max-width: 22ch;
  }
  .c-link {
    display: inline-flex; align-items: center; gap: .6em; margin-top: 40px;
     font-weight: 300; letter-spacing: .04em;
    color: var(--fg); text-decoration: none; cursor: none;
    border-bottom: 1px solid currentColor; padding-bottom: 4px;
    transition: color .25s, border-color .25s;
  }
  .c-link:hover { color: var(--cursor-hover); }
  .c-link .arr { transition: transform .25s; }
  .c-link:hover .arr { transform: translateX(5px); }

  /* Phasen */
  .phases { margin-top: 72px; display: grid; gap: 0; }
  .phase {
    display: grid; grid-template-columns: 90px 1fr 1fr; gap: 32px;
    padding: 44px 0;
    border-top: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  }
  .phase-no {  font-weight: 300; letter-spacing: .12em; opacity: .5; padding-top: 8px; }
  .phase-title {  font-weight: 200; line-height: 1.25; }
  .phase-title small {
    display: block;  font-weight: 300; letter-spacing: .14em;
    opacity: .55; margin-bottom: 12px;
  }
  .phase-body p {  font-weight: 300; line-height: 1.75; opacity: .85; }
  .phase-deliv {
    margin-top: 20px;  font-weight: 300; letter-spacing: .06em;
    line-height: 1.9; opacity: .6;
  }
  .c-why {
    margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
    align-items: start;
  }
  .c-why p { font-size: var(--fs-1); font-weight: 300; line-height: 1.75; opacity: .82; }

  /* Arbeiten */
  .work-grid {
    margin-top: 64px; display: grid; grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 3vw, 40px);
  }
  .work-card { text-decoration: none; color: var(--fg); cursor: none; display: block; }
  .work-img {
    aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; position: relative;
    background: linear-gradient(135deg, var(--mesh1), var(--mesh3) 60%, var(--mesh2));
    opacity: .55; transition: opacity .4s, transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .work-img span {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-1); letter-spacing: .16em; color: #fff; opacity: .9;
  }
  .work-card:hover .work-img { opacity: .8; transform: scale(.985); }
  .work-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; }
  .work-name {  font-weight: 300; }
  .work-tags {  font-weight: 300; letter-spacing: .06em; opacity: .55; text-align: right; }

  /* Über */
  .about-grid {
    display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start;
  }
  .about-portrait {
    aspect-ratio: 4 / 5; border-radius: 4px;
    background: linear-gradient(160deg, var(--mesh4), var(--mesh2));
    opacity: .6; display: flex; align-items: flex-end; padding: 20px;
    font-size: var(--fs-1); letter-spacing: .14em; color: #fff;
  }
  .about-facts {
    margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  }
  .fact-no {  font-weight: 200; }
  .fact-label {  font-weight: 300; letter-spacing: .06em; opacity: .6; margin-top: 6px; line-height: 1.5; }

  /* Kunden */
  .clients {
    margin-top: 48px; columns: 3 220px; column-gap: 40px;
     font-weight: 200; line-height: 2;
  }
  .clients span { display: block; opacity: .75; }

  /* Abschluss */
  .c-cta { text-align: left; }
  .c-cta .c-statement { max-width: 16ch; }
  .c-mail-big {
    display: inline-block; margin-top: 48px;
    font-size: var(--fs-7); font-weight: 200; letter-spacing: .02em;
    color: var(--fg); text-decoration: none; cursor: none;
    border-bottom: 1.5px solid var(--cursor-hover); padding-bottom: 6px;
    transition: color .25s;
  }
  .c-mail-big:hover { color: var(--cursor-hover); }
  .c-footer {
    max-width: 1240px; margin: 0 auto;
    padding: 28px clamp(20px, 5vw, 64px) 40px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
     font-weight: 300; letter-spacing: .08em; opacity: .55;
  }
  .c-footer a { color: inherit; text-decoration: none; margin-left: 24px; cursor: none; }
  .c-footer a:hover { opacity: 1; color: var(--cursor-hover); }

  #main-ticker { transition: opacity .5s ease; }
  body.scrolled #main-ticker { opacity: 0 !important; pointer-events: none; }

  @media (max-width: 820px) {
    .phase { grid-template-columns: 1fr; gap: 14px; padding: 36px 0; }
    .c-why, .about-grid { grid-template-columns: 1fr; }
    .work-grid { grid-template-columns: 1fr; }
    .about-facts { grid-template-columns: 1fr 1fr; }
    .c-footer a { margin-left: 0; margin-right: 20px; }
  }

  #topfade {
    position: fixed; top: 0; left: 0; right: 0; height: 96px; z-index: 30;
    pointer-events: none; opacity: 0; transition: opacity .4s;
    background: linear-gradient(to bottom, var(--bg) 45%, color-mix(in srgb, var(--bg) 0%, transparent));
  }
  body.scrolled #topfade { opacity: 1; }
  .c-footer { padding-right: clamp(84px, 8vw, 110px); }

  #lang-switch {
    position: fixed; top: 30px; right: 84px; z-index: 200;
    font-size: var(--fs-1); font-weight: 300; letter-spacing: .12em;
    display: flex; gap: 10px;
  }
  #lang-switch a { color: var(--fg); text-decoration: none; opacity: .4; cursor: none; transition: opacity .2s; }
  #lang-switch a.active, #lang-switch a:hover { opacity: 1; }
  body:has(#menu-drawer.open) #lang-switch a { color: #fff; }

  /* hero shortened + booking CTA */
  #hero { inset: auto; top: 0; left: 0; right: 0; height: 68vh; gap: 22px; }
  #content { margin-top: 68vh; }
  #main-ticker { position: absolute; top: 68vh; bottom: auto; transform: translateY(-100%); }
  .hero-services { font-size: var(--fs-1); font-weight: 300; letter-spacing: .14em; opacity: .6; text-align: center; }
  .cta-btn {
    display: inline-flex; align-items: center; gap: .55em;
    padding: 11px 20px; border-radius: 999px;
    background: var(--fg); color: var(--bg) !important; text-decoration: none;
    font-family: inherit; font-size: var(--fs-1); font-weight: 300; letter-spacing: .08em;
    cursor: none; transition: background .25s, transform .25s; white-space: nowrap;
  }
  .cta-btn:hover { background: var(--cursor-hover); transform: translateY(-1px); }
  .cta-btn .arr { transition: transform .25s; }
  .cta-btn:hover .arr { transform: translateX(4px); }
  .cta-btn.big { padding: 16px 28px; font-size: var(--fs-1); }
  #hero .cta-btn { margin-top: 6px; position: relative; z-index: 2; }
  #cta-top { position: fixed; top: 22px; right: 150px; z-index: 200; opacity: 0; pointer-events: none; transition: opacity .4s; }
  body.scrolled #cta-top { opacity: 1; pointer-events: auto; }
  body:has(#menu-drawer.open) #cta-top { opacity: 0; pointer-events: none; }
  .cta-after-why { margin-top: 48px; }
  .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-top: 40px; }
  .cta-row .c-mail-big { margin-top: 0; }
  @media (max-width: 820px) { #cta-top { top: auto; bottom: 24px; left: 20px; right: auto; } }

  /* ── Header bar (logo left, CTA + burger right) ── */
  #site-bar {
    position: fixed; top: 0; left: 0; right: 0; height: 76px; z-index: 180;
    background: var(--bg);
    border-bottom: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
    transition: opacity .3s;
  }
  #topfade { display: none; }
  #logo-fixed {
    top: 0; left: 32px; height: 76px; z-index: 190;
    display: flex; align-items: center;
    font-family: 'Unbounded', sans-serif; font-weight: 200;  letter-spacing: .04em;
    color: var(--fg); text-decoration: none; cursor: none;
    opacity: 1; pointer-events: auto; transition: opacity .3s;
  }
  #menu-btn { top: 20px; }
  #top-right {
    position: fixed; top: 0; right: 84px; height: 76px; z-index: 200;
    display: flex; align-items: center; gap: 28px;
  }
  #top-right #lang-switch { position: static; }
  #top-right #cta-top {
    position: static; opacity: 1; pointer-events: auto; text-decoration: none;
    display: inline-flex; align-items: center; gap: .55em;
    padding: 0; border-radius: 0; background: none; color: var(--fg) !important;
    font-size: var(--fs-2); font-weight: 300; letter-spacing: .01em; transform: none;
    transition: color .25s, opacity .3s;
  }
  #cta-top .dot {
    width: 10px; height: 10px; border-radius: 50%; flex: none;
    background: var(--cursor-hover); transition: transform .25s;
  }
  #top-right #cta-top:hover { background: none; color: var(--cursor-hover) !important; transform: none; }
  #cta-top:hover .dot { transform: scale(1.35); }
  #cta-top .s { display: none; }
  body:has(#menu-drawer.open) #site-bar,
  body:has(#menu-drawer.open) #logo-fixed,
  body:has(#menu-drawer.open) #cta-top { opacity: 0; pointer-events: none; }
  #hero { top: 76px; height: calc(68vh - 76px); }
  @media (max-width: 820px) {
    #site-bar, #logo-fixed, #top-right { height: 64px; }
    #logo-fixed { left: 20px;  }
    #menu-btn { top: 14px; right: 18px; }
    #top-right { right: 68px; gap: 18px; }
    #top-right #cta-top {  }
    #cta-top .dot { width: 8px; height: 8px; }
    #hero { top: 64px; height: calc(68vh - 64px); }
  }
  @media (max-width: 400px) {
    #cta-top .l { display: none; }
    #cta-top .s { display: inline; }
  }

  /* ── Header v2: descriptor left, wavy vry centre ── */
  #logo-fixed { font-family: inherit; font-weight: 300; font-size: var(--fs-2); letter-spacing: .01em; }
  #logo-center {
    position: fixed; top: 0; left: 50%; height: 76px; z-index: 190;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: .14em;
    font-family: 'Unbounded', sans-serif; font-weight: 200;  line-height: 1;
    color: var(--fg); text-decoration: none; cursor: none;
    filter: url(#glass-sm);
    opacity: 0; pointer-events: none; transition: opacity .4s;
  }
  #logo-center.visible { opacity: 1; pointer-events: auto; }
  #logo-center span { display: inline-block; animation: vry-waber 6s ease-in-out infinite; }
  #logo-center span:nth-child(2) { animation-delay: -2s; animation-duration: 7s; }
  #logo-center span:nth-child(3) { animation-delay: -4s; animation-duration: 6.5s; }
  @keyframes vry-waber {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-2px) rotate(-2deg); }
    75%      { transform: translateY(2px) rotate(2deg); }
  }
  @media (prefers-reduced-motion: reduce) { #logo-center span { animation: none; } }
  body:has(#menu-drawer.open) #logo-center { opacity: 0; pointer-events: none; }
  .drawer-lang { display: none; margin-bottom: .6em; }
  .drawer-lang a { margin-right: 1em; }
  @media (max-width: 820px) {
    #logo-fixed {  }
    #logo-center { height: 64px;  }
    #top-right #lang-switch { display: none; }
    .drawer-lang { display: block; }
  }

  /* ── No filled buttons: CTAs are text links with a dot ── */
  .cta-btn, .cta-btn.big {
    display: inline-flex; align-items: center; gap: .5em;
    padding: 0 0 4px; border-radius: 0; background: none; color: var(--fg) !important;
    font-size: var(--fs-4); font-weight: 300; letter-spacing: .01em;
    text-decoration: none; border-bottom: 1px solid var(--cursor-hover);
    transition: color .25s;
  }
  .cta-btn:hover, .cta-btn.big:hover { background: none; color: var(--cursor-hover) !important; transform: none; }
  .cta-btn .dot {
    width: 10px; height: 10px; border-radius: 50%; flex: none;
    background: var(--cursor-hover); transition: transform .25s;
  }
  .cta-btn:hover .dot { transform: scale(1.35); }

  /* narrow phones: "brand & design" morphs into the wavy vry on scroll, CTA gets the room */
  @media (max-width: 430px) {
    #logo-fixed { font-size: var(--fs-1); }
    #logo-center { left: 20px; transform: none; font-size: 19px; }
    body:has(#logo-center.visible) #logo-fixed { opacity: 0; pointer-events: none; }
    #top-right { right: 58px; }
    #menu-btn { right: 14px; }
    #top-right #cta-top { font-size: var(--fs-1); letter-spacing: 0; }
    #cta-top .dot { width: 7px; height: 7px; }
  }

  /* ── Text font (historic note): now Hanken Rund everywhere, Bricolage only for the mail address ── */
  html, body { font-weight: 300; }
  #subtitle { font-family: 'Unbounded', sans-serif; }
  .c-statement, .c-h, .phase-title { font-weight: 300; letter-spacing: -0.01em; }
  .c-lead, .phase-body p, .c-why p { font-weight: 300; }
  .c-eyebrow, .phase-deliv, .work-tags, .fact-label { font-weight: 400; }
  .ticker-text, .main-ticker-text { font-weight: 300; letter-spacing: .02em; }
  #logo-fixed, #top-right #cta-top { font-size: var(--fs-2); font-weight: 300; }
  @media (max-width: 820px) {
    #logo-fixed { font-size: var(--fs-1); }
    #top-right #cta-top { font-size: var(--fs-1); }
  }
  @media (max-width: 430px) {
    #logo-fixed { font-size: var(--fs-1); }
    #top-right #cta-top { font-size: var(--fs-1); }
    #cta-top .l { display: inline; }
    #cta-top .s { display: none; }
  }
  @media (max-width: 350px) {
    #cta-top .l { display: none; }
    #cta-top .s { display: inline; }
  }

  /* ── Running text: Hanken Grotesk ── */
  .c-lead, .phase-body p, .c-why p {
    font-family: 'Hanken Rund', system-ui, sans-serif;
    font-weight: 300; line-height: 1.7;
  }

  /* ── No hairlines ── */
  .c-section, .phase { border-top: 0; }
  #site-bar { border-bottom: 0; }

  /* ── Rule: nothing tiny or faint ── */
  #top-right #lang-switch { font-size: var(--fs-2); font-weight: 300; letter-spacing: .02em; gap: 14px; }
  #lang-switch a { opacity: .6; }
  #lang-switch a.active, #lang-switch a:hover { opacity: 1; }
  .c-eyebrow {  letter-spacing: .08em; opacity: .75; }
  .phase-no {  letter-spacing: .06em; opacity: .75; }
  .phase-title small { font-size: var(--fs-1); letter-spacing: .06em; opacity: .75; }
  .phase-deliv {  letter-spacing: .02em; opacity: .8; }
  .work-tags {  letter-spacing: .02em; opacity: .75; }
  .work-img span, .about-portrait { font-size: var(--fs-1); letter-spacing: .08em; }
  .fact-label {  letter-spacing: .02em; opacity: .8; }
  .c-footer { font-size: var(--fs-1); letter-spacing: .02em; opacity: .8; }
  .c-link {  }
  .c-lead, .phase-body p, .c-why p { opacity: 1; }
  #menu-drawer .drawer-role { color: rgba(255,255,255,.8); }
  .drawer-legal-link { color: rgba(255,255,255,.75) !important; font-weight: 300; }
  #btt.visible { opacity: .75; }
  @media (max-width: 820px) {
    #logo-fixed, #top-right #cta-top { font-size: var(--fs-1); }
  }
  @media (max-width: 430px) {
    #logo-fixed, #top-right #cta-top { font-size: var(--fs-1); }
  }
  @media (max-width: 380px) {
    #cta-top .l { display: none; }
    #cta-top .s { display: inline; }
  }

  /* ── Big footer ── */
  #site-foot {
    position: relative; overflow: hidden;
    background: var(--menu-bg); color: var(--foot-fg, #fff);
    padding: clamp(64px, 9vw, 140px) clamp(20px, 5vw, 64px) 0;
  }
  .foot-inner { max-width: 1240px; margin: 0 auto; }
  .foot-statement {
    font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 300;
    font-size: var(--fs-9); line-height: 1.02; letter-spacing: -0.02em;
    max-width: 14ch;
  }
  .foot-statement em { font-style: normal; color: var(--foot-accent, var(--cursor-hover)); }
  #site-foot .cta-btn.big {
    margin-top: clamp(36px, 4vw, 56px);
    
    color: var(--foot-fg, #fff) !important; border-bottom-color: var(--foot-accent, var(--cursor-hover));
  }
  #site-foot .cta-btn:hover { color: var(--foot-accent, var(--cursor-hover)) !important; }
  #site-foot .cta-btn .dot { background: var(--foot-accent, var(--cursor-hover)); }
  .foot-info {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px;
    margin-top: clamp(64px, 8vw, 120px);
    font-family: 'Hanken Rund', system-ui, sans-serif;  font-weight: 300;
  }
  .foot-info a {
    color: inherit; cursor: none;
    text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
    transition: color .2s;
  }
  .foot-info a:hover { color: var(--foot-accent, var(--cursor-hover)); }
  .foot-info .sep { opacity: .8; margin: 0 .4em; }
  .foot-mark {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin: clamp(40px, 5vw, 72px) calc(-1 * clamp(20px, 5vw, 64px)) 0;
    padding: 0 clamp(8px, 1.2vw, 20px);
    font-family: 'Unbounded', sans-serif; font-weight: 200; line-height: .8;
    white-space: nowrap; user-select: none;
    filter: url(#glass-xl);
    line-height: 1; padding-bottom: .04em;
  }
  .foot-mark span { display: inline-block; will-change: transform; }
  .foot-mark .gap { width: .32em; }
  @media (max-width: 820px) {
    .foot-info { flex-direction: column; }
    #site-foot .cta-btn.big {  }
    .foot-mark .gap { width: .4em; }
  }

  /* ── Full width layout: one edge for header and content ── */
  :root { --edge: clamp(20px, 4vw, 64px); }
  .c-section { max-width: none; padding-left: var(--edge); padding-right: var(--edge); }
  .foot-inner { max-width: none; }
  #site-foot { padding-left: var(--edge); padding-right: var(--edge); }
  .foot-mark { margin-left: calc(-1 * var(--edge)); margin-right: calc(-1 * var(--edge)); }
  #logo-fixed { left: var(--edge); }
  #menu-btn { right: var(--edge); }
  #top-right { right: calc(var(--edge) + 56px); }
  .c-statement {  line-height: 1.08; max-width: 20ch; }
  .c-h {  line-height: 1.08; max-width: 20ch; }
  .c-lead { max-width: 60ch; }
  .phase { grid-template-columns: 1fr 4fr 7fr; gap: clamp(24px, 3vw, 56px); }
  .phase-body p { max-width: 60ch; }
  .work-grid { gap: clamp(20px, 2vw, 40px); }
  .about-grid { grid-template-columns: 5fr 7fr; }
  .clients { columns: 4 220px; }
  @media (min-width: 1025px) {
    /* editorial offset: statements wide on the left, running text in the right half */
    #intro .c-lead, #intro .c-link { margin-left: 50%; }
    #intro .c-link { display: inline-flex; }
    .c-why { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 120px); }
    .c-why p { max-width: 60ch; }
  }
  @media (max-width: 820px) {
    .phase { grid-template-columns: 1fr; }
    #logo-fixed { left: var(--edge); }
    #menu-btn { right: var(--edge); }
    #top-right { right: calc(var(--edge) + 50px); }
  }
  @media (max-width: 430px) {
    #logo-center { left: var(--edge); }
    #top-right { right: calc(var(--edge) + 46px); }
  }

  /* ── Footer v2: bookend to the hero (living mesh + glass "say hy!") ── */
  #site-foot {
    position: relative; z-index: 20; overflow: hidden;
    min-height: 100vh; background: transparent; color: var(--fg);
    padding: 120px var(--edge) clamp(28px, 3vw, 44px);
    display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  }
  .foot-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(36px, 5vw, 72px); }
  .foot-sayhy { display: flex; align-items: flex-end; text-decoration: none; cursor: none; }
  .foot-sayhy .sayhy-wrap {
    --h: clamp(80px, 14vw, 220px);
    width: calc(var(--h) * .84); height: var(--h);
    margin-right: calc(var(--h) * -.06);
  }
  .foot-sayhy #shf-gap { width: calc(var(--h) * .3) !important; margin-right: 0 !important; }
  .foot-sayhy .sayhy-wrap svg { filter: url(#glass-md); }
  #site-foot .cta-btn.big { margin-top: 0; font-size: var(--fs-4); color: var(--fg) !important; }
  #site-foot .cta-btn:hover { color: var(--cursor-hover) !important; }
  .foot-info {
    width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px;
    font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-1); font-weight: 300;
  }
  .foot-info a { color: inherit; cursor: none; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color .2s; }
  .foot-info a:hover { color: var(--cursor-hover); }
  .foot-info .sep { margin: 0 .4em; }
  @media (max-width: 820px) {
    .foot-info { flex-direction: column; align-items: center; text-align: center; }
    .foot-sayhy .sayhy-wrap { --h: 64px; }
    #site-foot .cta-btn.big { font-size: var(--fs-3); }
  }

  /* ── Header logo with more presence ── */
  #site-bar, #logo-fixed, #top-right, #logo-center { height: 88px; }
  #menu-btn { top: 26px; }
  #logo-center {  font-weight: 400; letter-spacing: -0.01em; gap: .02em; color: var(--fg); }
  #hero { top: 88px; height: calc(68vh - 88px); }
  @media (max-width: 820px) {
    #site-bar, #logo-fixed, #top-right, #logo-center { height: 68px; }
    #menu-btn { top: 16px; }
    #logo-center {  }
    #hero { top: 68px; height: calc(68vh - 68px); }
  }
  /* keep clear of the back-to-top button */
  .foot-info { padding-right: 64px; }
  @media (max-width: 820px) { .foot-info { padding-right: 0; padding-bottom: 56px; } }

  /* ── Footer v3: calm, static, always the palette's dark tone ── */
  #site-foot.foot-calm {
    position: relative; z-index: 20; min-height: 0; overflow: visible;
    background: var(--foot-bg, #1a1a1a); color: var(--foot-fg, #f6f2ea);
    padding: clamp(80px, 10vw, 140px) var(--edge) clamp(32px, 3vw, 48px);
    display: block;
  }
  .fc-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(48px, 6vw, 120px); align-items: start; }
  .fc-h { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 300; font-size: var(--fs-8); line-height: 1.04; letter-spacing: -0.02em; max-width: 16ch; }
  #site-foot.foot-calm .cta-btn.big {
    margin-top: clamp(32px, 4vw, 56px); font-size: var(--fs-4);
    color: var(--foot-fg) !important; border-bottom-color: var(--foot-accent);
  }
  #site-foot.foot-calm .cta-btn:hover { color: var(--foot-accent) !important; }
  #site-foot.foot-calm .cta-btn .dot { background: var(--foot-accent); }
  .fc-note { margin-top: 18px; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-2); font-weight: 300; line-height: 1.5; opacity: .85; }
  .fc-list { list-style: none; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-2); font-weight: 300; line-height: 1.9; padding-top: .4em; }
  .fc-list .gap { height: 1.2em; }
  .fc-list a, .fc-bottom a { color: inherit; text-decoration: none; cursor: none; transition: color .2s; }
  .fc-list a:hover, .fc-bottom a:hover { color: var(--foot-accent); }
  .fc-bottom { margin-top: clamp(64px, 8vw, 120px); padding-right: 64px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: var(--fs-1); }
  .fc-mark { font-family: 'Unbounded', sans-serif; font-weight: 400;  letter-spacing: -0.01em; }
  @media (max-width: 820px) {
    .fc-grid { grid-template-columns: 1fr; }
    .fc-bottom { padding-right: 0; padding-bottom: 56px; }
  }
  body.on-foot #btt { border-color: #f6f2ea; color: #f6f2ea; }

  /* ── vry lighter and alive again; colour in the footer ── */
  #logo-center { font-weight: 200; }
  #logo-center span { animation-name: vry-waber2; }
  @keyframes vry-waber2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-3px) rotate(-3deg); }
    75%      { transform: translateY(3px) rotate(3deg); }
  }
  .fc-mark { display: inline-flex; gap: .02em; font-weight: 200;  filter: url(#glass-sm); }
  .fc-mark span { display: inline-block; animation: vry-waber2 7s ease-in-out infinite; }
  .fc-mark span:nth-child(2n) { animation-delay: -2.3s; animation-duration: 8s; }
  .fc-mark span:nth-child(3n) { animation-delay: -4.1s; animation-duration: 7.5s; }
  .fc-mark .sp { width: .3em; animation: none; }
  @media (prefers-reduced-motion: reduce) { .fc-mark span { animation: none; } }
  #site-foot.foot-calm {
    background:
      radial-gradient(55% 75% at 92% 95%, color-mix(in srgb, var(--foot-c1) 40%, transparent), transparent 70%),
      radial-gradient(45% 60% at 70% 110%, color-mix(in srgb, var(--foot-c2) 40%, transparent), transparent 70%),
      var(--foot-bg, #1a1a1a);
  }
  .fc-h em { font-style: normal; color: var(--foot-accent); }
  .fc-list a { text-decoration: underline; text-decoration-color: var(--foot-accent); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
  #site-foot.foot-calm .cta-btn.big { color: var(--foot-accent) !important; }
  #site-foot.foot-calm .cta-btn.big:hover { color: var(--foot-fg) !important; }
  #site-foot.foot-calm .cta-btn .dot { background: var(--foot-dot, var(--foot-accent)); }

  /* ── Header vry: crisp edges, hero letter spacing, morph target ── */
  #logo-center { filter: none; gap: 0; letter-spacing: 0; }
  #logo-center span { width: 1.23em; text-align: center; }
  .fc-mark { filter: none; }
  #hero { z-index: 185; pointer-events: none; }
  #letters { transform-origin: 50% 50%; will-change: transform; }
  #letters.crisp .letter-wrap svg { filter: none; }

  /* ── Header vry: smaller, a little bolder, no gap at hand-over ── */
  #logo-center { font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; transition: none; }
  @media (max-width: 820px) { #logo-center { font-size: 24px; } }

  /* ── Letters a little closer in the header (gaps x .85, same ratios), interpolated along the morph ── */
  #logo-center span { width: 1.05em; }
  #letters .letter-wrap { margin-left: calc(var(--sq, 0) * -0.075 * clamp(80px, 13.8vw, 153px)); margin-right: calc(var(--sq, 0) * -0.075 * clamp(80px, 13.8vw, 153px)); }
  /* no fade on the hand-over: hero letters and header logo switch in the same frame */
  #letters { transition: none !important; }

  /* ── Solid content, no watercolour behind text ── */
  #content { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* ── Bolder, less fragmented sections ── */
  .c-h { font-size: var(--fs-9); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; max-width: 18ch; }
  .c-statement { font-size: var(--fs-9); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; }
  .c-lead, .c-why p { font-size: var(--fs-3); line-height: 1.6; max-width: 58ch; }
  .c-eyebrow { font-size: var(--fs-1); opacity: 1; letter-spacing: .02em; font-weight: 400; }
  .c-why .c-h { font-size: var(--fs-6) !important; }
  .phases { margin-top: clamp(56px, 7vw, 112px); display: grid; gap: clamp(56px, 7vw, 112px); }
  .phase {
    grid-template-columns: 5fr 7fr; grid-template-areas: "no body" "title body";
    grid-template-rows: auto 1fr; column-gap: clamp(32px, 5vw, 96px); row-gap: 10px; padding: 0;
  }
  .phase-no { grid-area: no; font-size: var(--fs-2); font-weight: 400; letter-spacing: .02em; opacity: 1; padding-top: 0; color: var(--cursor-hover); font-family: 'Hanken Rund', system-ui, sans-serif; }
  .phase-no .nm { color: var(--fg); margin-left: .6em; }
  .phase-title { grid-area: title; font-size: var(--fs-8); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; }
  .phase-title small { display: none; }
  .phase-body { grid-area: body; padding-top: 4px; }
  .phase-body p { font-size: var(--fs-3); line-height: 1.6; max-width: 58ch; opacity: 1; }
  .phase-deliv { font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-2); font-weight: 400; letter-spacing: 0; line-height: 1.8; opacity: 1; margin-top: 24px; }
  .phase-deliv .sep { color: var(--cursor-hover); margin: 0 .5em; }
  .work-name { font-size: var(--fs-4); }
  .work-tags { font-size: var(--fs-1); opacity: .85; }
  .fact-no { font-size: var(--fs-7); font-weight: 300; }
  .fact-label { font-size: var(--fs-1); opacity: .9; }
  .clients { font-size: var(--fs-4); font-weight: 300; }
  .clients span { opacity: 1; }
  .c-link { font-size: var(--fs-4); }
  @media (max-width: 820px) {
    .phase { grid-template-columns: 1fr; grid-template-areas: "no" "title" "body"; row-gap: 12px; }
  }
  /* warm beige content: solid, no watercolour overlay, same beige on every visit */
  :root { --paper: #f3ede3; }
  #content, #site-bar { background: var(--paper); }

  /* ── Hero ticker: caps, only what defines vry ── */
  .main-ticker-text { text-transform: none; font-weight: 300; letter-spacing: .02em; }
  /* header: solid bar in the palette's dark tone along the bottom edge */
  #site-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: var(--dark, var(--fg)); opacity: 0; transition: opacity .18s ease-out; }
  body.scrolled #site-bar::after { opacity: 1; }
  /* eggshell header bar, always */
  #site-bar { background: #f6f3ec; }

  /* ── Quiet eggshell hero; the colour mesh lives only in the ticker band ── */
  body.scrolled #main-ticker { opacity: 1 !important; pointer-events: auto; }
  html, body { background: #f6f3ec; }
  #main-ticker {
    height: clamp(64px, 8vw, 120px); padding: 0; display: flex; align-items: center;
    background: transparent;
  }
  .main-ticker-text {
    font-family: 'Anton', 'Bebas Neue', Impact, sans-serif; font-weight: 400;
    text-transform: uppercase; letter-spacing: .03em;
     line-height: 1; color: var(--fg); filter: none;
  }
  .main-ticker-text { font-family: 'Big Shoulders', 'Anton', Impact, sans-serif; font-weight: 600; letter-spacing: .03em; font-size: var(--fs-6); }

  /* ── Band at the top under the header (fixed, content glides over it) and again above the footer ── */
  :root { --band: clamp(64px, 8vw, 120px); --barh: 88px; }
  @media (max-width: 820px) { :root { --barh: 68px; } }
  #main-ticker { position: fixed !important; top: var(--barh) !important; bottom: auto !important; left: 0; right: 0; transform: none !important; z-index: 15 !important; height: var(--band); }
  #hero { top: calc(var(--barh) + var(--band)) !important; height: calc(68vh - var(--barh) - var(--band) + var(--band)) !important; padding-bottom: 0 !important; }
  #foot-ticker {
    position: relative; z-index: 20; overflow: hidden; height: var(--band);
    display: flex; align-items: center; background: transparent;
  }
  #foot-ticker-inner { display: flex; white-space: nowrap; width: max-content; will-change: transform; }
  /* reveal footer */
  body.foot-reveal-on #foot-reveal { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; }
  #content { position: relative; z-index: 20; }
  /* mesh lives inside the bands */
  #mesh { display: none; }
  #main-ticker, #foot-ticker { position: relative; overflow: hidden; }
  #main-ticker { position: fixed !important; }
  .band-mesh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; image-rendering: auto; }
  #main-ticker-inner, #foot-ticker-inner { position: relative; z-index: 1; }
  /* footer bottom: clean wordmark + bold back-to-top */
  #btt { display: none !important; }
  .fc-bottom { padding-right: 0; align-items: center; }
  .fc-mark { font-family: 'Unbounded', sans-serif; font-weight: 200; font-size: var(--fs-6); letter-spacing: 0; color: #f6f3ec; filter: none; display: inline-block; animation: mark-float 7s ease-in-out infinite; }
  @keyframes mark-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-1deg); } }
  .fc-top { display: inline-flex; align-items: center; gap: .45em; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-3); font-weight: 300; color: #f6f3ec; text-decoration: none; cursor: none; transition: color .2s; }
  .fc-top .arr { font-weight: 800; font-size: var(--fs-5); line-height: 1; color: var(--foot-accent); transition: transform .25s; }
  .fc-top .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--foot-dot, var(--foot-accent)); }
  .fc-top:hover { color: var(--foot-accent); }
  .fc-top:hover .arr { transform: translateY(-4px); }
  @media (max-width: 820px) { .fc-bottom { flex-wrap: wrap; row-gap: 20px; padding-bottom: 0; } }
  @media (prefers-reduced-motion: reduce) { .fc-mark { animation: none; } }

/* ── multi-page additions ── */
.drawer-nav { list-style: none; display: flex; flex-direction: column; gap: .1em; margin: 0 0 auto; padding-top: 4vh; }
.drawer-nav a { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 300; font-size: var(--fs-8); line-height: 1.05; letter-spacing: -0.02em; color: #fff !important; text-decoration: none; cursor: none; transition: color .2s; }
.drawer-nav a:hover, .drawer-nav a[aria-current="page"] { color: var(--cursor-hover) !important; }
body.sub #hero { display: none; }
body.sub #content { margin-top: calc(var(--barh) + var(--band)); }
.page-title .c-statement { font-size: var(--fs-10); max-width: 16ch; }
.page-title .c-lead { margin-top: 36px; }
.home #work .work-card:nth-child(n+4) { display: none; }
.more-link { margin-top: clamp(40px, 5vw, 72px); }
.contact-big { display: flex; flex-direction: column; gap: 36px; margin-top: 48px; align-items: flex-start; }
.legal-placeholder p { font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-3); line-height: 1.6; max-width: 58ch; }

/* ── only one band, above the footer; the top band is retired (kept invisible as the motion source) ── */
#main-ticker { visibility: hidden !important; pointer-events: none !important; }
#hero { top: var(--barh) !important; height: calc(68vh - var(--barh)) !important; }
body.sub #content { margin-top: var(--barh); }
#foot-reveal { display: flex; flex-direction: column; }
body.band-below #foot-ticker { order: 2; }

/* decided 2026-11-03: the band closes the page, below the footer */
#foot-reveal #foot-ticker { order: 2; }

/* back-to-top: arrow + text only, no dot */
.fc-top .dot { display: none; }

/* contact: booking + mail in a column right of the headline */
.contact-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 120px); align-items: start; }
.contact-grid .contact-big { margin-top: clamp(12px, 1.6vw, 28px); gap: clamp(40px, 4vw, 64px); }
.contact-grid .c-mail-big { margin-top: 0; font-size: var(--fs-6); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ── contact page: full colour field, giant running wordmark ── */
.contact-full { background: var(--cf-bg, var(--menu-bg)) !important; color: var(--cf-ink, var(--fg)); min-height: calc(100vh - var(--barh)); display: flex; flex-direction: column; }
.cf-marquee { overflow: hidden; white-space: nowrap; padding-top: clamp(24px, 4vh, 56px); }
.cf-track { display: inline-flex; width: max-content; animation: cf-run 60s linear infinite; }
.cf-track span { font-family: 'Unbounded', sans-serif; font-weight: 200; font-size: 27vh; line-height: 1; padding-right: .5em; letter-spacing: -0.01em; }
@keyframes cf-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cf-track { animation: none; } }
.cf-body { padding: clamp(32px, 5vh, 72px) var(--edge) 0; }
.cf-h { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 300; font-size: var(--fs-7); line-height: 1.06; letter-spacing: -0.02em; max-width: 20ch; }
.contact-full .cta-btn.big { margin-top: clamp(28px, 3vw, 48px); color: var(--cf-ink) !important; border-bottom-color: var(--cf-ink); }
.contact-full .cta-btn .dot { background: var(--cf-ink); }
.contact-full .cta-btn:hover { opacity: .75; }
.cf-bottom { margin-top: auto; padding: clamp(48px, 8vh, 120px) var(--edge) clamp(40px, 6vh, 80px); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-3); font-weight: 300; }
.cf-right { display: flex; flex-direction: column; gap: 18px; min-width: 18ch; }
.cf-bottom a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; cursor: none; }
.cf-bottom a:hover { opacity: .7; }
.cf-mail { font-size: var(--fs-5); text-decoration: none !important; }
@media (max-width: 820px) { .cf-bottom { flex-direction: column-reverse; align-items: flex-start; } .cf-track span { font-size: 18vh; } }

/* ── contact variant B: big glass "say hy!" on the palette colour ── */
.contact-b .cb-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(36px, 5vw, 72px); padding: clamp(48px, 8vh, 120px) var(--edge) 0; }
.cb-sayhy { display: flex; align-items: flex-end; text-decoration: none; cursor: none; }
.cb-sayhy .sayhy-wrap { --h: clamp(90px, 16vw, 260px); width: calc(var(--h) * .84); height: var(--h); margin-right: calc(var(--h) * -.06); }
.cb-sayhy #shc-gap { width: calc(var(--h) * .3) !important; margin-right: 0 !important; }
.cb-sayhy .sayhy-wrap svg { filter: url(#glass-md); }
.cb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px 40px; flex-wrap: wrap; padding: clamp(56px, 9vh, 120px) var(--edge) clamp(36px, 5vh, 64px); font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-3); font-weight: 300; }
.cb-row a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; cursor: none; }
.cb-mid { display: inline-flex; gap: 32px; }
@media (max-width: 820px) { .cb-sayhy .sayhy-wrap { --h: 64px; } .cb-row { flex-direction: column; align-items: flex-start; } }

.contact-full .cb-row, .contact-full .cf-bottom, .contact-full .cf-h, .contact-full .cf-track { color: var(--cf-ink); }
.cb-sayhy .sayhy-wrap svg { filter: url(#glass-md); }

.cb-sayhy .sayhy-wrap svg { filter: none !important; }

/* contact A: running wordmark on a strip of the colour mesh, descenders fully visible */
.cf-marquee { position: relative; overflow-x: hidden; overflow-y: visible; padding: 2vh 0 4vh; margin-top: clamp(24px, 4vh, 56px); }
.cf-marquee .cf-track { position: relative; z-index: 1; }
.cf-track span { line-height: 1.2; color: #141414; }

/* contact A: mesh inside the running letters, no strip behind */
.cf-marquee { background: none; }
.cf-track { background-size: 50% 100%; background-repeat: repeat-x; -webkit-background-clip: text; background-clip: text; }
.cf-track span { color: transparent !important; }

/* contact A: the mesh image drifts through the letters (no image swapping, so no flicker) */
.cf-track { background-size: 160vw 100%; background-repeat: repeat-x; animation: cf-run 60s linear infinite, cf-drift 24s linear infinite; }
@keyframes cf-drift { from { background-position: 0 0; } to { background-position: -160vw 0; } }
/* contact B: statement under "say hy!" */
.cb-h { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 300; font-size: var(--fs-6); line-height: 1.08; letter-spacing: -0.02em; text-align: center; color: var(--cf-ink); }

/* contact B: statement + CTA left-aligned under "say hy!" */
.cb-statement { padding: clamp(48px, 7vh, 96px) var(--edge) 0; }
.cb-statement .cb-h { text-align: left; font-size: var(--fs-7); max-width: 20ch; }
.cb-statement .cta-btn.big { margin-top: clamp(28px, 3vw, 48px); }
.contact-b .cb-center { flex: 0 0 auto; padding-top: clamp(64px, 10vh, 140px); }

/* ── personal @: a small wobbling colour disc with the @ from the logo font ── */
.vry-at { display: inline-flex; align-items: center; justify-content: center; width: 1.08em; height: 1.08em; margin: 0 .14em; vertical-align: -.16em;
  border-radius: 50%; background: var(--cursor-hover); color: var(--fg); animation: at-waber 6s ease-in-out infinite; }
.vry-at span { font-family: 'Unbounded', sans-serif; font-weight: 300;  line-height: 1; transform: translateY(-.04em); }
@keyframes at-waber { 0%, 100% { transform: rotate(0deg) scale(1); border-radius: 50%; } 33% { transform: rotate(-8deg) scale(1.04); border-radius: 46% 54% 52% 48%; } 66% { transform: rotate(6deg) scale(.98); border-radius: 54% 46% 48% 52%; } }
#site-foot .vry-at { background: var(--foot-accent); color: var(--foot-bg); }
.contact-full .vry-at { background: var(--cf-ink); color: var(--cf-bg); }
@media (prefers-reduced-motion: reduce) { .vry-at { animation: none; } }

.vry-at { width: 1.22em; height: 1.22em; vertical-align: -.22em; margin: 0 .1em; }
.vry-at span { font-size: .7em; }

/* contact A without the running wordmark: statement sits high, info at the bottom */
.contact-full:not(.contact-b) .cf-body { padding-top: 15vh; }
/* contact B: smaller "say hy!", left-aligned on the page edge */
.contact-b .cb-center { align-items: flex-start; padding-left: var(--edge); padding-right: var(--edge); }
.cb-sayhy .sayhy-wrap { --h: clamp(64px, 9vw, 150px); }
@media (max-width: 820px) { .cb-sayhy .sayhy-wrap { --h: 52px; } }

.contact-b .cb-row { margin-top: auto; }

/* contact pages: one horizontal info row along the bottom edge */
.cf-row { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 20px 48px;
  padding: clamp(56px, 9vh, 120px) var(--edge) clamp(36px, 5vh, 64px); font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-3); font-weight: 300; color: var(--cf-ink); }
.cf-row a { color: inherit; text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 6px; cursor: none; }
.cf-row a:hover { opacity: .7; }
.cf-row .cf-mail { font-size: inherit; text-decoration: none; }
@media (max-width: 820px) { .cf-row { flex-direction: column; align-items: flex-start; } }

/* mail address set entirely in Unbounded 200 (its @ is special enough) */
.mail-unb { font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif !important; font-weight: 300 !important; letter-spacing: 0; }
#site-foot .fc-list .mail-unb {  }
.contact-full .cf-row .mail-unb, .contact-full .cf-mail.mail-unb { font-size: var(--fs-7); }
.vry-at { display: none; }

/* ── menu: full-screen eggshell overlay, big page links, small two-column links at the bottom ── */
#menu-drawer { background: #f6f3ec !important; color: var(--fg); padding: 0 var(--edge) clamp(32px, 5vh, 64px) !important; transition: transform .38s cubic-bezier(.7,0,.2,1) !important; justify-content: flex-start !important; }
#menu-drawer .md-top { height: var(--barh); display: flex; align-items: center; justify-content: flex-end; padding-right: calc(36px + 28px); }
.md-cta { display: inline-flex; align-items: center; gap: .55em; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-2); font-weight: 300; color: var(--fg); text-decoration: none; cursor: none; }
.md-cta .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cursor-hover); }
.md-cta:hover { color: var(--cursor-hover); }
.md-nav { display: flex; flex-direction: column; margin-top: clamp(32px, 8vh, 120px); }
.md-nav a { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 300;  line-height: 1.05; letter-spacing: -0.03em; color: var(--fg); text-decoration: none; cursor: none; width: max-content; transition: color .2s, transform .25s; }
.md-nav a:hover { color: var(--cursor-hover); transform: translateX(8px); }
.md-nav a[aria-current="page"] { color: var(--cursor-hover); }
.md-bottom { margin-top: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 22rem)); gap: 24px 48px; }
.md-col { display: flex; flex-direction: column; gap: 6px; }
.md-col a { font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-2); font-weight: 300; color: var(--fg); text-decoration: none; cursor: none; width: max-content; }
.md-col a:hover { color: var(--cursor-hover); }
#menu-btn.open span { background: var(--fg) !important; height: 3px; }
body.menu-open { overflow: hidden; }
body:has(#menu-drawer.open) #top-right, body:has(#menu-drawer.open) #logo-fixed, body:has(#menu-drawer.open) #logo-center, body:has(#menu-drawer.open) #site-bar::after { opacity: 0 !important; pointer-events: none !important; }
@media (max-width: 820px) { .md-bottom { grid-template-columns: 1fr 1fr; } .md-nav a { font-size: var(--fs-8); } }
/* contact pages: link row like the footer */
.contact-full .cf-row { justify-content: space-between; font-size: var(--fs-2); }
.contact-full .cf-row .cf-mail.mail-unb, .contact-full .cf-row .mail-unb { font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif !important; font-weight: 300 !important; font-size: var(--fs-2) !important; text-decoration: underline !important; text-decoration-thickness: 2.5px !important; text-underline-offset: 6px; }
.cf-legal { display: inline-flex; gap: 20px; }
/* footer mail like the other footer links */
#site-foot .fc-list .mail-unb { font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif !important; font-weight: 300 !important; font-size: var(--fs-2); }
.studio-add { margin-top: 28px; }

#menu-drawer .md-top { flex: none; }

/* ── menu as a panel sliding in from the right; the page stays visible, dimmed ── */
#menu-drawer { left: auto !important; right: 0; width: min(560px, 100vw); z-index: 195 !important; border-left: 5px solid var(--dark, var(--fg)); }
#menu-overlay { position: fixed; inset: 0; z-index: 192; background: rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .3s; }
body.menu-open #menu-overlay { opacity: 1; pointer-events: auto; }
#menu-drawer .md-top { padding-right: calc(36px + 20px); }
.md-nav a { font-size: var(--fs-8); }
.md-bottom { grid-template-columns: 1fr 1fr; }
body:has(#menu-drawer.open) #site-bar, body:has(#menu-drawer.open) #logo-fixed, body:has(#menu-drawer.open) #logo-center { opacity: 1 !important; }
body:has(#menu-drawer.open) #top-right { opacity: 0 !important; pointer-events: none !important; }
@media (max-width: 640px) { #menu-drawer { width: 100vw; border-left: 0; } }

.imp-adr { font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-3); line-height: 1.6; margin-bottom: 28px; }
.imp-adr a { color: inherit; }

/* ── menu items fly in one after another (open), all leave together quickly (close) ── */
#menu-drawer { transition: transform .35s cubic-bezier(.2,.8,.2,1) !important; }
.md-nav a, .md-col a { opacity: 0; transform: translateX(90px); transition: opacity .2s ease, transform .2s ease; }
#menu-drawer.open .md-nav a, #menu-drawer.open .md-col a { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), color .2s; }
#menu-drawer.open .md-nav a:nth-child(1) { transition-delay: .18s; }
#menu-drawer.open .md-nav a:nth-child(2) { transition-delay: .25s; }
#menu-drawer.open .md-nav a:nth-child(3) { transition-delay: .32s; }
#menu-drawer.open .md-nav a:nth-child(4) { transition-delay: .39s; }
#menu-drawer.open .md-nav a:nth-child(5) { transition-delay: .46s; }
#menu-drawer.open .md-col:nth-child(1) a:nth-child(1) { transition-delay: .52s; }
#menu-drawer.open .md-col:nth-child(1) a:nth-child(2) { transition-delay: .57s; }
#menu-drawer.open .md-col:nth-child(2) a:nth-child(1) { transition-delay: .62s; }
#menu-drawer.open .md-col:nth-child(2) a:nth-child(2) { transition-delay: .67s; }
#menu-drawer.open .md-nav a:hover { transform: translateX(8px); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .md-nav a, .md-col a { transform: none !important; transition: opacity .2s !important; } }

/* ── Buttons (booking CTAs): pill after Studio Morf - arrows slide, text shifts; 2px rim, no fill ── */
.pill { position: relative; display: inline-flex; align-items: center; overflow: hidden; white-space: nowrap;
  border: 2px solid currentColor; border-radius: 999px; padding: 12px 28px; line-height: 1;
  font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-1); font-weight: 400; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fg); background: none; text-decoration: none !important; cursor: none; }
.pill .pt { display: inline-block; transform: translateX(-.5rem); transition: transform .5s cubic-bezier(.86,0,.07,1); }
.pill .pa { position: absolute; top: 50%; transition: transform .5s cubic-bezier(.86,0,.07,1); }
.pill .pa-l { left: 0; transform: translate(-2.5rem, -50%); }
.pill .pa-r { right: 0; transform: translate(-1rem, -50%); }
.pill:hover .pt, .pill:focus-visible .pt { transform: translateX(.5rem); }
.pill:hover .pa-l, .pill:focus-visible .pa-l { transform: translate(1rem, -50%); }
.pill:hover .pa-r, .pill:focus-visible .pa-r { transform: translate(1.25rem, -50%); }
.pill:focus-visible { outline: 3px solid var(--cursor-hover); outline-offset: 4px; }
.pill .s { display: none; }
#top-right .pill { font-size: var(--fs-1); padding: 10px 24px; }
#site-foot .pill { color: var(--foot-fg, #f6f3ec); margin-top: clamp(32px, 4vw, 56px); }
.contact-full .pill { color: var(--cf-ink); margin-top: clamp(28px, 3vw, 48px); }
#menu-drawer .md-top .pill { font-size: var(--fs-1); padding: 10px 24px; }
@media (max-width: 430px) { #cta-top .l { display: none; } #cta-top .s { display: inline; } }
@media (prefers-reduced-motion: reduce) { .pill .pt, .pill .pa { transition: none; } }

/* ── Links: underline slides in on hover (as on the live site), 2px, accent colour ── */
.fc-list a, .fc-bottom a, .cf-row a, .md-col a, .foot-info a, .imp-adr a, .c-link, .cf-legal a {
  position: relative; text-decoration: none !important; border-bottom: 0 !important; }
.fc-list a::after, .fc-bottom a::after, .cf-row a::after, .md-col a::after, .foot-info a::after, .imp-adr a::after, .c-link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0; background: var(--cursor-hover); transition: width .22s cubic-bezier(0,.8,.2,1); }
.fc-list a:hover::after, .fc-bottom a:hover::after, .cf-row a:hover::after, .md-col a:hover::after, .foot-info a:hover::after, .imp-adr a:hover::after, .c-link:hover::after,
.fc-list a:focus-visible::after, .cf-row a:focus-visible::after, .md-col a:focus-visible::after, .c-link:focus-visible::after { width: 100%; }
#site-foot .fc-list a::after, #site-foot .fc-bottom a::after { background: var(--foot-accent); }
.contact-full .cf-row a::after { background: var(--cf-ink); }
.fc-mark::after { display: none; }
#top-right #cta-top.pill { font-size: var(--fs-1); padding: 10px 24px; display: inline-flex; color: var(--fg) !important; }
#top-right #cta-top.pill:hover { color: var(--fg) !important; }
.contact-full .cf-row .cf-mail.mail-unb, .contact-full .cf-row .mail-unb, .contact-full .cf-row a { text-decoration: none !important; }
#top-right #cta-top.pill, #menu-drawer .md-top .pill { border-radius: 999px !important; overflow: hidden !important; border: 2px solid currentColor !important; background: none !important; }
#top-right #cta-top.pill, #menu-drawer .md-top .pill { position: relative !important; }
#top-right #cta-top.pill { top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }


/* ════════ clean design (merged from clean.css, 2026-11-04) ════════ */
/* clean start page (comparison version) — loads after vry.css and only overrides it */
/* Schriften des Zufallslogos: Web/logo/random/vry-fonts.css (in jeder Seite vor dieser Datei eingebunden) */

/* ── black & white base ── */
body.clean { --bg: #fafaf8; --paper: #fafaf8; --fg: #111; background: #fafaf8; color: #111; }
body.clean #site-bar { background: #fafaf8; }
body.clean #mesh { display: none; }
body.clean #content { background: #fafaf8; }

/* ── random typo logo ── */
.vry-rand { display: inline-flex; align-items: baseline; white-space: nowrap; line-height: 1; color: #111; }
.vry-rand span { display: inline-block; line-height: 1; margin: 0 .015em; width: auto !important; text-align: left; }
body.clean #logo-center { font-size: clamp(30px, 2.8vw, 40px); font-weight: 400; letter-spacing: 0; }
body.clean #logo-center span { width: auto !important; }

/* ── hero: big logo left, claim, button, lots of white ── */
.cl-hero { padding: clamp(56px, 9vh, 120px) var(--edge) clamp(96px, 16vh, 200px); }
.cl-logo { margin: 0; font-size: clamp(140px, 30vh, 380px); font-weight: 400; margin-left: -.04em; }
.cl-claim { margin: clamp(32px, 5vh, 64px) 0 0; font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 400; font-size: var(--fs-8); line-height: 1.02; letter-spacing: -.025em; color: #111; }
.cl-hero .pill:not(.hero-action) { margin-top: clamp(36px, 5vh, 56px); font-size: var(--fs-1); padding: 16px 34px; border-width: 3px; }

/* ── colour block 1: intro statement, full width, hard edges ── */
.cl-block { background: var(--block-bg, #3848a0); color: var(--block-ink, #f6f3ec); padding: clamp(80px, 12vw, 180px) var(--edge); border-radius: 0; }
.cl-block .c-statement { color: inherit; font-size: var(--fs-9); font-weight: 400; line-height: 1.02; letter-spacing: -.03em; max-width: 16ch; margin: 0; }
.cl-block .c-statement em { font-style: normal; color: inherit; }
.cl-block .c-lead { color: inherit; opacity: 1; font-size: var(--fs-4); line-height: 1.5; max-width: 56ch; margin: clamp(40px, 5vw, 72px) 0 0 auto; width: 50%; }
.cl-block .c-link { color: inherit; margin-left: 50%; }
.cl-block .c-link::after { background: currentColor !important; }

/* ── black on white sections ── */
.cl-sec { padding: clamp(96px, 12vw, 180px) var(--edge) 0; }
.cl-sec:last-of-type { padding-bottom: clamp(96px, 12vw, 180px); }
.cl-eyebrow { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-2); letter-spacing: .02em; margin: 0 0 clamp(32px, 4vw, 56px); color: #111; }
.cl-h { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 400; font-size: var(--fs-8); line-height: 1.04; letter-spacing: -.025em; margin: 0; max-width: 18ch; color: #111; }

/* services: four phases as one big list */
.cl-phases { list-style: none; margin: 0; padding: 0; border-top: 3px solid #111; }
.cl-phases li { display: grid; grid-template-columns: minmax(80px, 1fr) 4fr 5fr; gap: 24px 40px; align-items: baseline; padding: clamp(28px, 3vw, 44px) 0; border-bottom: 3px solid #111; }
.cl-no { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 400; font-size: var(--fs-5); }
.cl-name { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 400; font-size: var(--fs-7); line-height: 1.02; letter-spacing: -.025em; }
.cl-phases p { margin: 0; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-3); line-height: 1.5; color: #111; }

/* work: black and white placeholders with a heavy rim */
.cl-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px); margin-top: clamp(40px, 5vw, 72px); }
.cl-card { display: block; color: #111; text-decoration: none; cursor: none; }
.cl-card .cl-img { aspect-ratio: 4 / 5; border: 3px solid #111; background: #fafaf8; display: flex; align-items: flex-end; padding: 24px; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-2); transition: background .3s, color .3s; }
.cl-card:nth-child(2) .cl-img { background: #111; color: #fafaf8; }
.cl-card:hover .cl-img { background: #111; color: #fafaf8; }
.cl-card:nth-child(2):hover .cl-img { background: #fafaf8; color: #111; }
.cl-card .cl-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-2); }
.cl-card .cl-meta b { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-4); }

/* studio teaser */
.cl-studio { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.cl-studio .c-lead { margin: 0; font-size: var(--fs-4); line-height: 1.5; max-width: 56ch; opacity: 1; color: #111; }
.cl-studio .c-lead + .c-lead { margin-top: 1em; }

/* links: underline slides in, in the palette colour (the one accent on white) */
body.clean .c-link { color: #111; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-4); font-weight: 400; margin-top: clamp(40px, 5vw, 64px); border: 0 !important; }
body.clean .c-link:hover { color: #111; }
body.clean .c-link .arr { font-weight: 500; }
body.clean main .c-link::after { background: var(--cl-accent, var(--cursor-hover)); height: 3px; }
body.clean main .cl-block .c-link::after { background: currentColor; }
body.clean main .pill { color: #111; }

@media (max-width: 820px) {
  .cl-block .c-lead { width: auto; margin-left: 0; }
  .cl-block .c-link { margin-left: 0; }
  .cl-phases li { grid-template-columns: 1fr; gap: 10px; }
  .cl-work { grid-template-columns: 1fr; }
  .cl-studio { grid-template-columns: 1fr; }
  .cl-logo { font-size: clamp(110px, 34vw, 200px); }
}

/* ── reshuffle hint (space bar / tap): bottom right of the hero, acts like a text link ── */
.cl-hero { position: relative; }
.cl-logo { cursor: none; user-select: none; }
body.clean main .cl-shuffle { margin: 0; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-2); font-weight: 500; color: #111; }
.cl-row { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; margin-top: clamp(36px, 5vh, 56px); }
.cl-row .pill { margin-top: 0 !important; }
/* colour fields switch fast but not abruptly */
.cl-block, #site-foot { transition: background-color .12s linear; }
@media (prefers-reduced-motion: reduce) { .cl-block, #site-foot { transition: none; } }

/* ══ clean design on all pages ══ */
/* one colour field per page only: accents inside text go black, eyebrow dots go */
body.clean main em { color: inherit !important; font-style: normal; }
body.clean .c-eyebrow { color: #111; opacity: 1; font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-2); }
body.clean .c-eyebrow::before { display: none; }
body.clean main { color: #111; }
body.clean .c-lead, body.clean .phase-body p, body.clean .c-why p { opacity: 1; color: #111; }
body.clean .phase-no, body.clean .phase-title small { color: #111; opacity: 1; }
body.clean .phase-deliv .sep { color: #111; }

/* colour block that breaks out of the section padding (Leistungen) */
.cl-block.cl-inset { margin: 0 calc(-1 * var(--edge)) clamp(48px, 6vw, 96px); padding: clamp(72px, 9vw, 140px) var(--edge); }
.cl-block .c-eyebrow { color: inherit; }
.cl-block .c-h { color: inherit; font-weight: 400; font-size: var(--fs-9); line-height: 1.02; letter-spacing: -.03em; max-width: 16ch; margin-top: 0; }

/* Studio facts as colour block */
.about-facts.cl-block { padding: clamp(32px, 3vw, 48px); gap: 32px; }
.cl-facts .fact-no, .cl-facts .fact-label { color: inherit; opacity: 1; }
.cl-facts .fact-label { font-size: var(--fs-2); }
.cl-facts > div { border: 0 !important; }

/* images / placeholders: black and white with a heavy rim, no gradients */
body.clean .work-img, body.clean .about-portrait { background: #fafaf8 !important; border: 3px solid #111; border-radius: 0; color: #111; }
body.clean .work-img::before, body.clean .work-img::after, body.clean .about-portrait::before, body.clean .about-portrait::after { display: none !important; }
body.clean .work-card:nth-child(4n+2) .work-img, body.clean .work-card:nth-child(4n+3) .work-img { background: #111 !important; color: #fafaf8; }
body.clean .work-img span, body.clean .about-portrait { font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-2); letter-spacing: 0; color: inherit; opacity: 1; }
body.clean .work-card:hover .work-img { opacity: 1; transform: none; background: #111 !important; color: #fafaf8; }
body.clean .work-card:nth-child(4n+2):hover .work-img, body.clean .work-card:nth-child(4n+3):hover .work-img { background: #fafaf8 !important; color: #111; }
body.clean .work-name, body.clean .work-tags { color: #111; opacity: 1; font-size: var(--fs-2); }
body.clean .work-name { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-4); }

/* menu panel in white */
body.clean #menu-drawer { background: #fafaf8 !important; color: #111; border-left: 5px solid #111; }
body.clean #menu-drawer .md-nav a { color: #111 !important; }
body.clean #menu-drawer .md-nav a[aria-current="page"], body.clean #menu-drawer .md-nav a:hover { color: var(--cl-accent, var(--cursor-hover)) !important; }
body.clean .md-col a::after { background: var(--cl-accent, var(--cursor-hover)); }

/* clients list, legal text */
body.clean .clients span { color: #111; opacity: 1; font-size: var(--fs-3); }
body.clean .imp-adr, body.clean .legal-placeholder p { color: #111; opacity: 1; }
body.clean .imp-adr a::after { background: var(--cl-accent, var(--cursor-hover)); height: 3px; }
body.clean .work-img { opacity: 1 !important; transition: background-color .3s, color .3s; }
body.clean main .cl-shuffle .arr { font-weight: 600; }

/* ── fixed geometry: rolling the logo never moves the layout ── */
body.clean .cl-hero { height: clamp(560px, 78vh, 900px); display: flex; flex-direction: column; justify-content: center; padding-top: 0; padding-bottom: 0; overflow: visible; }
body.clean .cl-logo { display: flex; align-items: baseline; font-size: clamp(120px, 27vh, 300px); line-height: 1; height: 1.26em; padding-top: .14em; overflow: visible; flex: none; }
body.clean .cl-logo span { line-height: 1; height: auto; }
body.clean .cl-claim, body.clean .cl-row { flex: none; }
body.clean #logo-center { overflow: visible; }
body.clean #logo-center.vry-rand { line-height: 1; }
@media (max-width: 820px) { body.clean .cl-hero { height: auto; min-height: 0; padding: 56px var(--edge) 72px; } body.clean .cl-logo { font-size: clamp(100px, 30vw, 180px); } }
body.clean .cl-logo { margin-bottom: .46em; } body.clean .cl-claim { margin-top: 0; }
#top-right #cta-top.pill, #menu-drawer .md-top .pill { padding: 10px 34px 10px 28px !important; }
body.clean .cl-block .c-lead, body.clean .cl-block p, body.clean .cl-block .c-eyebrow { color: inherit !important; }


/* ── 2026-11-04: Hanken Rund also for headlines, menu, buttons and claim (Bricolage stays only for the mail address) ── */
body.clean .c-statement, body.clean .cl-h, body.clean .c-h, body.clean .hd-formula, body.clean .fc-h, body.clean .cl-claim, body.clean .phase-title, body.clean .cf-h, body.clean .cl-name, body.clean .fact-no { font-weight: 300 !important; }
body.clean .page-title .c-statement { font-weight: 200 !important; }
body.clean #menu-drawer .md-nav a { font-weight: 300 !important; }
body.clean .pill, body.clean .pill .pt { font-weight: 500 !important; }
body.clean .c-eyebrow, body.clean .cl-eyebrow, body.clean #logo-fixed, body.clean .c-link, body.clean .cl-shuffle { font-weight: 500 !important; }
/* tracking per step (--ls-*): Hanken gets tighter as it grows */
body.clean h3.c-h { letter-spacing: var(--ls-6) !important; }
body.clean .cl-name, body.clean .fact-no, body.clean .cf-h { letter-spacing: var(--ls-7) !important; }
body.clean #menu-drawer .md-nav a, body.clean .fc-h, body.clean .phase-title, body.clean .cl-h, body.clean .hd-formula, body.clean .cl-claim { letter-spacing: var(--ls-8) !important; }
body.clean .c-statement, body.clean h2.c-h { letter-spacing: var(--ls-9) !important; }
body.clean .page-title .c-statement { letter-spacing: var(--ls-10) !important; }
.lg-studio { letter-spacing: var(--ls-studio) !important; }
a[href^="mailto:"] { font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif; }


/* ── start page hero (2026-11-04): two columns; the formula builds up first, then "vry studio" appears ── */
body.clean .cl-d { height: clamp(640px, calc(100vh - 88px), 1000px) !important; position: relative; }
.hd-grid { display: grid; grid-template-columns: 55fr 45fr; gap: clamp(32px, 4vw, 72px); align-items: center; width: 100%; }
.hd-box { height: clamp(200px, 30vh, 320px); display: flex; align-items: center; overflow: visible; min-width: 0; }
.hd-logo { margin: 0; font-weight: 400; color: #111; font-size: 160px; line-height: 1; display: inline-flex; align-items: baseline; gap: .26em; white-space: nowrap; transform-origin: left center; }
.hd-logo .vry-rand { display: inline-flex; align-items: baseline; }
.hd-logo .vry-rand span { margin: 0 .015em; }
.lg-studio { font-family: 'Hanken Rund', sans-serif; font-weight: 200; font-size: 1em; letter-spacing: var(--ls-studio); line-height: 1; }
.hd-formula { margin: 0; font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 300; font-size: var(--fs-8); line-height: 1.06; letter-spacing: -.025em; color: #111; }
.hd-formula span { display: block; }
.hd-cta { margin-top: clamp(32px, 4vh, 56px); }
body.clean .cl-d .cl-shuffle { position: absolute; right: var(--edge); bottom: clamp(28px, 4vh, 48px); }
/* header: "vry studio" — studio clean and the same size */
body.clean #logo-center { gap: .26em; align-items: baseline; }
body.clean #logo-center .vry-rand { display: inline-flex; align-items: baseline; }
body.clean #logo-center .lg-studio { display: inline-block; animation: none; }
/* intro: statement left, paragraph right, same height */
.intro-split .cl-block-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.intro-split .c-lead { width: auto !important; margin: 0 !important; max-width: 56ch; }
.intro-split .c-statement { max-width: 14ch !important; }
/* entrance, once per session: formula part by part, then the name, then the button */
@keyframes hd-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hd-name { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.intro-run .hd-formula span, .intro-run .hd-cta { opacity: 0; animation: hd-up .6s cubic-bezier(.2,.8,.2,1) forwards; }
.intro-run .hd-formula span:nth-child(1) { animation-delay: .2s; }
.intro-run .hd-formula span:nth-child(2) { animation-delay: .65s; }
.intro-run .hd-formula span:nth-child(3) { animation-delay: 1.1s; }
.intro-run .hd-formula span:nth-child(4) { animation-delay: 1.55s; }
.intro-run .hd-formula span:nth-child(5) { animation-delay: 2s; }
.intro-run .hd-formula span:nth-child(6) { animation-delay: 2.45s; }
/* the result "= vry" comes last, then the big logo answers it */
.intro-run .hd-formula .hd-res { animation-delay: 2.45s; }
.intro-run .hd-logo { opacity: 0; animation: hd-name .7s cubic-bezier(.2,.8,.2,1) 2.95s forwards; }
.intro-run .hd-cta { animation-delay: 3.45s; }
/* five-part formula: the result may wrap; its second line hangs under the word, not under "=" */
.hd-formula .hd-res { padding-left: .82em; text-indent: -.82em; max-width: 14em; }
@media (prefers-reduced-motion: reduce) { .intro-run .hd-formula span, .intro-run .hd-cta, .intro-run .hd-logo { animation: none; opacity: 1; } }
@media (max-width: 820px) {
  body.clean .cl-d { height: auto !important; padding: 48px var(--edge) 72px; }
  .hd-grid { grid-template-columns: 1fr; }
  .hd-box { height: clamp(96px, 30vw, 200px); }
  .intro-split .cl-block-in { grid-template-columns: 1fr; }
  body.clean .cl-d .cl-shuffle { position: static; display: inline-block; margin-top: 32px; }
}

/* Hanken runs wider than Bricolage: give the contact statement room for one line per sentence */
body.clean .cf-h { max-width: 26ch !important; }

/* ── 2026-11-04 (E2): big type as strong as "Brand & Design" — Hanken Rund 500, one step smaller ── */
body.clean .c-statement, body.clean .page-title .c-statement, body.clean .cl-h, body.clean .c-h, body.clean .hd-formula, body.clean .fc-h, body.clean .cl-claim, body.clean .phase-title, body.clean .cf-h, body.clean .cl-name, body.clean .fact-no, body.clean #menu-drawer .md-nav a { font-weight: 500 !important; }

/* ── 2026-11-04: the band runs above the footer again (above the CTA "Neugierig geworden?") ── */
#foot-reveal #foot-ticker { order: 0 !important; }

/* ── arrows keep the old look: Bricolage (↑ ↓ are in the subset), → ← ↗ fall back to the system font exactly as before the Hanken switch ── */
.pa, .arr, .flow-nav .pa { font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif !important; }

/* phone header: below 400px the top pill is just the arrow, so "vry studio" always has room */
@media (max-width: 399px) {
  body.clean #top-right #cta-top { width: 2.9em; padding-left: 0 !important; padding-right: 0 !important; justify-content: center; }
  body.clean #cta-top .pt { visibility: hidden; width: 0; overflow: hidden; display: inline-block; }
  body.clean #cta-top .pa-l { display: none; }
  body.clean #cta-top .pa-r, body.clean #cta-top:hover .pa-r { right: 50%; transform: translate(50%, -50%) !important; }
}

/* header logo: the baseline of "studio" sits at a fixed height, so the x-height centre lands on the bar's middle line
   whatever the roll (Hanken Rund at line-height 1: baseline .8485em below the top, x-height .493em → centre .602em).
   The random vry is lifted out of the baseline calculation (margin-top -1em), so a tall roll can never push the line down. */
body.clean #logo-center { align-items: baseline !important; box-sizing: border-box; padding-top: calc(44px - .602em); }
body.clean #logo-center .vry-rand { margin-top: -1em; }
@media (max-width: 820px) { body.clean #logo-center { padding-top: calc(34px - .602em); } }

/* ── "push for some magic": round badge bottom right on every page, does what the space bar does ── */
body.clean main .cl-shuffle { display: none !important; }
/* fill = the palette colour that stands out most against white AND against the colour block (set in vry.js), ink by luminance */
#vry-magic { position: fixed; right: var(--edge); bottom: var(--edge); z-index: 180; width: 140px; height: 140px; padding: 0; border: 0; border-radius: 50%;
  background: var(--magic-bg, #111); color: var(--magic-ink, #f6f3ec); cursor: pointer; transition: transform .5s cubic-bezier(.16,1,.3,1), background-color .4s; }
#vry-magic svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#vry-magic .ring { transform-origin: 70px 70px; animation: magic-spin 12s linear infinite; }
#vry-magic text { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: 18px; letter-spacing: .12em; fill: currentColor; }
#vry-magic .mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-4); line-height: 1; transition: transform .5s cubic-bezier(.16,1,.3,1); }
#vry-magic.empty .mid { display: none; }
#vry-magic:hover { transform: scale(1.05); }
#vry-magic:hover .ring { animation-duration: 4s; }
#vry-magic:hover .mid { transform: translateX(4px); }
#vry-magic:focus-visible { outline: 2px solid var(--magic-bg, #111); outline-offset: 4px; }
@keyframes magic-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #vry-magic .ring { animation: none; } }
@media (max-width: 820px) { #vry-magic { width: 120px; height: 120px; } }
body:has(#menu-drawer.open) #vry-magic { opacity: 0; pointer-events: none; }

/* ── start page as a sum: the parts, "=", then the big random logo as the result; no second logo ── */
body.clean .cl-d.rx { display: flex; flex-direction: column; justify-content: center; }
.rx .hd-col { width: min(62%, 980px); margin: 0 auto; }
.rx .hd-formula span { display: block; }
.rx .hd-box { width: 100%; height: clamp(150px, 25vh, 230px); }
.rx .hd-cta { margin-top: clamp(16px, 2.5vh, 32px); }
/* placement 2: the parts on the left, the result pulled out to the right */
.rx.rx-pull .hd-col { width: 100%; margin: 0; }
.rx.rx-pull .hd-box { width: 62%; margin-left: auto; }
.rx.rx-pull .hd-cta { width: 62%; margin-left: auto; }
/* entrance: "=" comes after the last part, the logo answers it */
.intro-run .rx .hd-formula .hd-eq { animation-delay: 2.45s; }
@media (max-width: 820px) {
  .rx .hd-col, .rx.rx-pull .hd-col { width: 100%; }
  .rx .hd-box, .rx.rx-pull .hd-box, .rx.rx-pull .hd-cta { width: 100%; margin-left: 0; height: clamp(80px, 26vw, 200px); }
}
/* entrance of the sum, like the menu items fly in (from the right, same curve), only slower and with more offset */
@keyframes rx-in { from { opacity: 0; transform: translateX(140px); } to { opacity: 1; transform: none; } }
.intro-run .rx .hd-formula span, .intro-run .rx .hd-logo, .intro-run .rx .hd-cta { opacity: 0; animation: rx-in 1.1s cubic-bezier(.2,.8,.2,1) forwards !important; }
.intro-run .rx .hd-formula span:nth-child(1) { animation-delay: .2s !important; }
.intro-run .rx .hd-formula span:nth-child(2) { animation-delay: .5s !important; }
.intro-run .rx .hd-formula span:nth-child(3) { animation-delay: .8s !important; }
.intro-run .rx .hd-formula span:nth-child(4) { animation-delay: 1.1s !important; }
.intro-run .rx .hd-formula span:nth-child(5) { animation-delay: 1.4s !important; }
.intro-run .rx .hd-logo { animation-duration: 1.4s !important; animation-delay: 1.9s !important; transform-origin: left center; }
.intro-run .rx .hd-cta { animation-delay: 2.9s !important; }
@media (prefers-reduced-motion: reduce) { .intro-run .rx .hd-formula span, .intro-run .rx .hd-logo, .intro-run .rx .hd-cta { animation: none !important; opacity: 1; } }
body.clean .cl-d.rx { overflow-x: clip; }

/* the result of the sum sits right under "=" */
.rx .hd-box { align-items: flex-start; }
/* at the page end the badge moves up, so "↑ Nach oben" stays free */
#vry-magic { transition: transform .5s cubic-bezier(.16,1,.3,1), background-color .4s, bottom .6s cubic-bezier(.16,1,.3,1); }
#vry-magic.lift { bottom: calc(var(--edge) + 96px); }
#vry-magic * { pointer-events: none; }

/* magic badge, round, empty centre; the text turns slowly, a small rosette sits between MAGIC and PUSH */
#vry-magic .ring { animation-duration: 24s; }
#vry-magic:hover .ring { animation-duration: 10s; }
#vry-magic .rosette ellipse { fill: currentColor; }
#vry-magic .rosette .hole { fill: var(--magic-bg, #111); }
#vry-magic .mid { display: none; }

/* ── start page: centred logo (vry, "studio" below), the sum runs as a live ticker between hero and colour section ── */
:root { --tk-h: 96px; }
body.clean .cl-d.rx-c { height: calc(100svh - 88px - var(--tk-h)) !important; min-height: 520px; justify-content: center; }
.rx-c .hd-col { width: 100%; margin: 0; display: flex; justify-content: center; }
.rx-c .hd-box { width: min(40%, 600px); height: 100%; max-height: 560px; justify-content: center; align-items: center; }
.rx-c .hd-logo { flex-direction: column; align-items: center; gap: .02em !important; transform-origin: center !important; }
.intro-run .rx-c .hd-logo { opacity: 1; animation: none !important; }
/* the vry runs through the generator (vry.js); "studio" fades in softly afterwards */
.intro-run .rx-c .hd-logo .lg-studio { opacity: 0; animation: rx-soft 1.35s cubic-bezier(.22,.61,.36,1) 1.42s forwards; }
@keyframes rx-soft { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .intro-run .rx-c .hd-logo .lg-studio { animation: none; opacity: 1; } }
@keyframes rx-calm { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.sum-tick { height: var(--tk-h); display: flex; align-items: center; overflow: hidden; background: var(--bg, #fafaf8); }
.sum-track { display: flex; align-items: baseline; gap: .4em; width: max-content; white-space: nowrap; font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-7); line-height: 1; color: #111; animation: sum-run 70s linear infinite; }
.sum-track i { font-style: normal; }
.sum-track .tk-logo { display: inline-flex; align-items: baseline; gap: .26em; font-weight: 400; }
.sum-track .tk-logo .lg-studio { font-weight: 200; }
.sum-track .ros { display: inline-block; align-self: center; width: .42em; height: .42em; margin: 0 .55em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cg id='p'%3E%3Cellipse cx='0' cy='-4.6' rx='2.3' ry='4.6'/%3E%3C/g%3E%3Cuse href='%23p' transform='rotate(45)'/%3E%3Cuse href='%23p' transform='rotate(90)'/%3E%3Cuse href='%23p' transform='rotate(135)'/%3E%3Cuse href='%23p' transform='rotate(180)'/%3E%3Cuse href='%23p' transform='rotate(225)'/%3E%3Cuse href='%23p' transform='rotate(270)'/%3E%3Cuse href='%23p' transform='rotate(315)'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cg id='p'%3E%3Cellipse cx='0' cy='-4.6' rx='2.3' ry='4.6'/%3E%3C/g%3E%3Cuse href='%23p' transform='rotate(45)'/%3E%3Cuse href='%23p' transform='rotate(90)'/%3E%3Cuse href='%23p' transform='rotate(135)'/%3E%3Cuse href='%23p' transform='rotate(180)'/%3E%3Cuse href='%23p' transform='rotate(225)'/%3E%3Cuse href='%23p' transform='rotate(270)'/%3E%3Cuse href='%23p' transform='rotate(315)'/%3E%3C/svg%3E") center/contain no-repeat; }
@keyframes sum-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sum-track { animation: none; } }
@media (max-width: 820px) {
  :root { --tk-h: 72px; }
  body.clean .cl-d.rx-c { height: calc(100svh - 68px - var(--tk-h)) !important; min-height: 420px; padding: 0 var(--edge) !important; }
  .rx-c .hd-box { width: 72%; height: 80%; }
  .sum-track { font-size: var(--fs-5); }
}

/* header: no booking pill any more (it lives in the menu panel and on the pages); the 5px line under the bar is always there, in the highlight colour */
body.clean #cta-top { display: none !important; }
body.clean #site-bar::after { opacity: 1 !important; background: var(--hi, var(--fg)); transition: background-color .4s; }
body:has(#menu-drawer.open) #site-bar::after { opacity: 0 !important; }

/* start page: header logo hidden above the bar until the hero logo has gone, then it slides down */
body.hdr-hide #logo-center { transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s ease-out; transform: translateX(-50%) translateY(-120%) !important; opacity: 0 !important; pointer-events: none !important; }
body.hdr-hide.hdr-show #logo-center { transform: translateX(-50%) !important; opacity: 1 !important; pointer-events: auto !important; }
@media (max-width: 820px) {
  body.hdr-hide #logo-center { transform: translateY(-120%) !important; }
  body.hdr-hide.hdr-show #logo-center { transform: none !important; }
}

/* ── the sum under the hero, styled like the colour band above the footer (same mesh, type, height, pace);
      thick plus signs in the palette colours instead of the bullets ── */
:root { --tk-h: var(--band); }
.sum-band { position: relative; overflow: hidden; height: var(--band); display: flex; align-items: center; }
.sum-band-inner { position: relative; z-index: 1; display: flex; white-space: nowrap; width: max-content; animation: sum-run 60s linear infinite; }
.sum-band .main-ticker-text { display: inline-flex; align-items: center; color: var(--fg); }
.sum-band .x { width: .58em; height: .58em; margin: 0 .55em; flex: none; }
.sum-band .x rect { fill: currentColor; }
.sum-band .x:nth-of-type(4n+1) { color: var(--cursor-hover); }
.sum-band .x:nth-of-type(4n+2) { color: var(--menu-bg); }
.sum-band .x:nth-of-type(4n+3) { color: var(--cursor-mail); }
.sum-band .x:nth-of-type(4n+4) { color: var(--mesh1); }
@media (prefers-reduced-motion: reduce) { .sum-band-inner { animation: none; } }
@media (max-width: 820px) { :root { --tk-h: var(--band); } }

/* start page: hero + sum band together only ~55vh, so a colour block always shows below */
body.clean .cl-d.rx-c { height: calc(55svh - var(--tk-h)) !important; min-height: 280px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.rx-c .hd-box { width: min(34%, 520px); height: 92%; max-height: none; }
@media (max-width: 820px) {
  body.clean .cl-d.rx-c { height: calc(55svh - var(--tk-h)) !important; min-height: 260px !important; }
  .rx-c .hd-box { width: 62%; height: 92%; }
}

/* ── cursor: a thick cross in the highlight colour; on anything clickable it becomes a thick ↗ (tip = pointer):
      the east arm vanishes, the north arm swings down to south-west and becomes the shaft, west and south stay as the head ── */
body.clean #cursor { width: 30px; height: 30px; border-radius: 0; background: none !important; mix-blend-mode: normal !important; transition: opacity .2s; color: var(--plus-color, var(--hi, var(--fg))); }
body.clean #cursor svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.clean #cursor rect { fill: currentColor; transform-box: view-box; transform-origin: 15px 15px; transition: transform .36s cubic-bezier(.2,.8,.2,1); }
body.clean #cursor.link .arm-e { transform: scale(0); }
body.clean #cursor.link .arm-n { transform: rotate(-135deg) scaleY(1.45); }
body.clean #cursor.text { opacity: 0; }
body.clean input:not([type=checkbox]):not([type=radio]):not([type=submit]), body.clean textarea { cursor: text !important; }
@media (prefers-reduced-motion: reduce) { body.clean #cursor rect { transition: none; } }

/* sum band: no rainbow — an amorphous, slowly moving field in tints and shades of ONE colour
   (A, live: the highlight colour of the header line; B, preview: the palette's third colour); plus signs only in the highlight colour */
.sum-band { --tone: var(--hi, var(--mesh2)); background:
    radial-gradient(60% 140% at 15% 30%, color-mix(in srgb, var(--tone) 35%, #fafaf8) 0%, transparent 70%),
    radial-gradient(50% 160% at 55% 80%, color-mix(in srgb, var(--tone) 75%, #fafaf8) 0%, transparent 70%),
    radial-gradient(45% 150% at 85% 20%, color-mix(in srgb, var(--tone) 85%, #111) 0%, transparent 70%),
    color-mix(in srgb, var(--tone) 55%, #fafaf8);
  background-size: 180% 100%; animation: sum-amorph 18s ease-in-out infinite alternate; }
.sum-band.tone-3 { --tone: var(--mesh3); }
@keyframes sum-amorph { 0% { background-position: 0% 50%; } 50% { background-position: 60% 40%; } 100% { background-position: 100% 60%; } }
.sum-band .band-mesh { display: none; }
.sum-band .x, .sum-band .x:nth-of-type(n) { color: var(--plus-color, var(--hi, var(--fg))) !important; }
@media (prefers-reduced-motion: reduce) { .sum-band { animation: none; } }

/* height: hero + band about 83vh including the header, so ~17vh of the colour block shows; the logo a step smaller, with air */
body.clean .cl-d.rx-c { height: calc(83svh - 88px - var(--tk-h)) !important; }
.rx-c .hd-box { width: min(26%, 400px); height: 80%; }
@media (max-width: 820px) {
  body.clean .cl-d.rx-c { height: calc(83svh - 68px - var(--tk-h)) !important; }
  .rx-c .hd-box { width: 52%; height: 70%; }
}
/* A: only light tints of the highlight colour, so the saturated plus signs stand out on it */
.sum-band:not(.tone-3) { background:
    radial-gradient(60% 140% at 15% 30%, color-mix(in srgb, var(--tone) 14%, #fafaf8) 0%, transparent 70%),
    radial-gradient(50% 160% at 55% 80%, color-mix(in srgb, var(--tone) 42%, #fafaf8) 0%, transparent 70%),
    radial-gradient(45% 150% at 85% 20%, color-mix(in srgb, var(--tone) 30%, #fafaf8) 0%, transparent 70%),
    color-mix(in srgb, var(--tone) 24%, #fafaf8); background-size: 180% 100%; }
.sum-band:not(.tone-3) .main-ticker-text { color: #111; }
/* start page, before scrolling: the badge sits in the hero, above the band */
body.hdr-hide:not(.scrolled) #vry-magic { bottom: calc(17svh + var(--tk-h) + 24px); }

/* cursor v2: the cross turns 45° as a whole and blends into a sharp arrow ↗ (no arm swings on its own) */
body.clean #cursor { --turn: 45deg; }
body.clean #cursor .turn { transform-box: view-box; transform-origin: 15px 15px; transition: transform .33s cubic-bezier(.2,.8,.2,1); }
body.clean #cursor .cross rect { fill: currentColor; transform: none !important; transition: opacity .2s ease-out; }
body.clean #cursor .arrow path { fill: none; stroke: currentColor; stroke-width: 7; stroke-linejoin: miter; stroke-miterlimit: 10; stroke-linecap: butt; }
body.clean #cursor .arrow { opacity: 0; transition: opacity .2s ease-out .08s; }
body.clean #cursor.link .turn { transform: rotate(var(--turn)); }
body.clean #cursor.link .cross { opacity: 0; transition: opacity .18s ease-out .1s; }
body.clean #cursor.link .arrow { opacity: 1; }
body.clean #cursor .cross { transition: opacity .2s ease-out; }
@media (prefers-reduced-motion: reduce) { body.clean #cursor .turn, body.clean #cursor .cross, body.clean #cursor .arrow { transition: none; } }

/* own cursor everywhere (no hand, no system arrow) as soon as a fine pointer is there; only text fields keep the text cursor */
@media (hover: hover) and (pointer: fine) {
  body.clean, body.clean *, body.clean *:hover, body.clean *:active { cursor: none !important; }
  body.clean input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), body.clean textarea { cursor: text !important; }
}
/* the cursor works as a negative: difference blending keeps it visible on surfaces in its own colour */
body.clean #cursor { z-index: 2147483000; mix-blend-mode: difference !important; }
body.clean #cursor.neg-white { color: #fff; }
/* white + difference = a clean negative on every surface (black on white, complementary on colour) */
body.clean #cursor { color: #fff !important; }
#vry-magic text { letter-spacing: .05em; }
#vry-magic text { letter-spacing: .05em !important; word-spacing: .9em; }
#vry-magic { width: 160px; height: 160px; }
@media (max-width: 820px) { #vry-magic { width: 136px; height: 136px; } }
#vry-magic text { word-spacing: normal; }
/* sum band final: the light neutral ground of the colour band, with amorphous fields of the highlight colour drifting through */
.sum-band:not(.tone-3) { background:
    radial-gradient(38% 190% at 88% 50%, var(--tone) 0%, color-mix(in srgb, var(--tone) 55%, transparent) 38%, transparent 72%),
    radial-gradient(26% 160% at 40% 110%, color-mix(in srgb, var(--tone) 60%, transparent) 0%, transparent 70%),
    radial-gradient(30% 150% at 8% 0%, color-mix(in srgb, var(--tone) 35%, transparent) 0%, transparent 70%),
    var(--bg, #eceae4);
  background-size: 200% 100%; animation: sum-amorph 22s ease-in-out infinite alternate; }
/* badge filled by its text, like the reference: 140px, text at step 2 close to the rim */
#vry-magic { width: 140px; height: 140px; }
@media (max-width: 820px) { #vry-magic { width: 140px; height: 140px; } }
#vry-magic { width: 146px; height: 146px; }
@media (max-width: 820px) { #vry-magic { width: 146px; height: 146px; } }

/* badge variants (previews): YAY! in a contrasting palette tone, or a glass badge */
#vry-magic.yay-contrast .yay { fill: var(--magic-yay); }
#vry-magic.glass { background: color-mix(in srgb, #ffffff 30%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #ffffff 65%, transparent), 0 10px 30px color-mix(in srgb, #000 14%, transparent); color: #111; }

/* live: YAY! in the palette's contrast tone */
#vry-magic .yay { fill: var(--magic-yay, currentColor); }
/* glass (preview): the highlight colour at a third, blurred backdrop, a light rim and a soft glow at the top */
#vry-magic.glass { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, #fff 35%, transparent), transparent 60%), color-mix(in srgb, var(--magic-bg) 32%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 55%, transparent), 0 10px 30px color-mix(in srgb, #000 12%, transparent); color: var(--glass-ink, #111); }

/* sum band: no plus signs, the words run together, DESIGN between them in the complementary colour of the highlight */
.sum-band .main-ticker-text { gap: 0; letter-spacing: .03em; }
.sum-band .dz { color: var(--hi-comp, var(--hi)); }

/* sum band words are links: dark, underline slides in on hover like every text link */
.sum-band .sum-link { position: relative; color: inherit; text-decoration: none; }
.sum-band .sum-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: .02em; height: .07em; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.sum-band .sum-link:hover::after, .sum-band .sum-link:focus-visible::after { transform: scaleX(1); }
.sum-band .sum-link:focus-visible { outline: none; }

/* sum band in the main type: Hanken Rund 500, mixed case, words run together */
.sum-band .main-ticker-text { font-family: 'Hanken Rund', system-ui, sans-serif !important; font-weight: 500 !important; text-transform: none !important; font-size: var(--fs-6) !important; letter-spacing: var(--ls-6, -.01em) !important; line-height: 1; }

/* glass badge live; positioned by vry.js (centred on the hero/colour edge on the start page, else bottom right) */
#vry-magic.js-pos { right: auto !important; bottom: auto !important; transition: transform .5s cubic-bezier(.16,1,.3,1), background-color .4s; }
#vry-magic.js-pos.moving { transition: left .6s cubic-bezier(.2,.8,.2,1), top .6s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.16,1,.3,1); }
/* formula band now sits at the bottom, under the colour band, right above the footer; the hero is just the logo */
body.clean .cl-d.rx-c { height: calc(83svh - 88px) !important; }
@media (max-width: 820px) { body.clean .cl-d.rx-c { height: calc(83svh - 68px) !important; } }
#foot-reveal #sum-ticker { order: 1; position: relative; z-index: 20; }
#foot-reveal > footer, #foot-reveal #site-foot { order: 2; }
/* formula band in capitals */
.sum-band .main-ticker-text { text-transform: uppercase !important; }
/* over the dark footer YAY! takes the footer accent */
#vry-magic.on-dark .yay { fill: var(--foot-accent, #f6f3ec); }
.rx-c .hd-logo { gap: .14em !important; }
#vry-magic text { letter-spacing: .02em !important; }
#vry-magic { width: 166px !important; height: 166px !important; }

/* header filled with the highlight colour at the top of the page; shrinks to the 5px line after scrolling */
body.clean #site-bar::after { top: auto; bottom: -5px; height: 5px; transition: height .5s cubic-bezier(.2,.8,.2,1), background-color .4s; }
body.clean.hdr-filled #site-bar::after { height: calc(100% + 5px); }
body.clean.hdr-filled #lang-switch a, body.clean.hdr-filled #logo-fixed, body.clean.hdr-filled #logo-center, body.clean.hdr-filled #logo-center .vry-rand { color: var(--hi-ink, #111) !important; }
body.clean.hdr-filled #menu-btn span { background: var(--hi-ink, #111) !important; }
body.clean #lang-switch a, body.clean #logo-fixed, body.clean #menu-btn span { transition: color .4s, background-color .4s, opacity .2s; }
/* start page: "Brand & Design" sits under the logo; the header copy hides until the big logo has gone */
body.hdr-hide #logo-fixed { transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s ease-out, color .4s; transform: translateY(-120%); opacity: 0; }
body.hdr-hide.hdr-show #logo-fixed { transform: none; opacity: 1; }
.hd-what { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-3); letter-spacing: .12em; text-transform: uppercase; color: #111; margin: 2.6em 0 0; text-align: center; }
.rx-c .hd-col { flex-direction: column; align-items: center; }
.rx-c .hd-box { height: 72%; }
.intro-run .rx-c .hd-what { opacity: 0; animation: rx-soft 1.2s cubic-bezier(.22,.61,.36,1) 3.17s forwards; }
@media (prefers-reduced-motion: reduce) { .intro-run .rx-c .hd-what { animation: none; opacity: 1; } }
/* hero only: "studio" one step smaller under the big vry (the box narrows by the same factor, so vry keeps its size) */
.rx-c .hd-logo .lg-studio { font-size: .74em; }
.rx-c .hd-box { width: min(19.3%, 296px); }
.rx-c .hd-logo { gap: .1em !important; }
.hd-what { margin-top: 2.2em; }
@media (max-width: 820px) { .rx-c .hd-box { width: 39%; } }
/* hero: the vry box keeps one fixed height whatever the cut, so "studio" and BRAND & DESIGN never move during the generator */
.rx-c .hd-logo .vry-rand { height: 1.62em; overflow: visible; align-items: baseline; }
/* fixed box 1.62em tall; a strut puts the baseline at 1.05em (about 65%), the space below holds every descender of the pool */
.rx-c .hd-logo .vry-rand::before { content: ''; display: inline-block; width: 0; height: 1.05em; }
.rx-c .hd-logo .vry-rand span { line-height: 1; }
.rx-c .hd-logo { gap: .04em !important; }
#vry-magic.js-pos, #vry-magic.js-pos.moving { transition: transform .5s cubic-bezier(.16,1,.3,1), background-color .4s !important; }

/* header line 8px */
body.clean #site-bar::after { bottom: -8px; height: 8px; }
body.clean.hdr-filled #site-bar::after { height: calc(100% + 8px); }
/* cursor: highlight colour, drawn normally; on surfaces in the highlight colour it turns into a negative; on links the arrow is in the complementary colour */
body.clean #cursor { mix-blend-mode: normal !important; color: var(--hi, #111) !important; }
body.clean #cursor.link { color: var(--hi-comp, var(--hi)) !important; }
body.clean #cursor.on-hl { mix-blend-mode: difference !important; color: #fff !important; }
/* header line 12px */
body.clean #site-bar::after { bottom: -12px; height: 12px; }
body.clean.hdr-filled #site-bar::after { height: calc(100% + 12px); }
/* "Brand & Design" between vry and studio, in the highlight colour; it fills the room the descenders need */
.rx-c .hd-logo .hd-what { display: block; margin: 0; color: var(--hi, #111); line-height: 1; transition: color .4s; }
.rx-c .hd-logo .vry-rand { height: 1.42em; }
.rx-c .hd-logo { gap: 0 !important; }
.rx-c .hd-logo .lg-studio { margin-top: .12em; }
/* compact block: the box only as deep as the deepest descender in the pool (measured .505em) plus reserve; baseline just under the tallest ascent (.889em) */
.rx-c .hd-logo .vry-rand { height: 1.46em !important; }
.rx-c .hd-logo .vry-rand::before { height: .92em !important; }
.rx-c .hd-logo .hd-what { margin: .3em 0 .55em; }
.rx-c .hd-logo .lg-studio { margin-top: 0; }
/* arrow over links is always opaque in the complementary colour and above everything; only the cross turns negative on highlight surfaces */
body.clean #cursor.link, body.clean #cursor.link.on-hl { mix-blend-mode: normal !important; color: var(--hi-comp, var(--hi)) !important; }
body.clean #cursor { opacity: 1; z-index: 2147483000 !important; }

/* only the & in the highlight colour */
.rx-c .hd-logo .hd-what { color: #111 !important; }
.rx-c .hd-logo .hd-what .amp { color: var(--hi, #111); transition: color .4s; }
/* shorter entrance: generator ~0.8s, then the line, then studio overlapping; all in place after ~2.3s */
.intro-run .rx-c .hd-what { opacity: 0; animation: rx-soft .9s cubic-bezier(.22,.61,.36,1) .91s forwards !important; }
.intro-run .rx-c .hd-logo .lg-studio { opacity: 0; animation: rx-soft .9s cubic-bezier(.22,.61,.36,1) 1.36s forwards !important; }

/* the plus between BRAND and DESIGN: the cursor's cross, in the highlight colour */
.rx-c .hd-logo .hd-what { display: flex; align-items: center; justify-content: center; }
.rx-c .hd-logo .hd-what .plus { width: .82em; height: .82em; margin: 0 .5em 0 .38em; fill: var(--plus-color, var(--hi, #111)); transition: fill .4s; flex: none; }
/* the cursor starts on that plus: hidden until the line is in, parked on the plus at its size, then glides to the pointer */
body.clean #cursor.wait { visibility: hidden; }
body.clean #cursor.parked { transform: translate(-50%, -50%) scale(var(--park-s, .6)); }
body.clean #cursor.gliding { transition: left .5s cubic-bezier(.2,.8,.2,1), top .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), opacity .2s; }

/* header: "Brand + Design studio" on the left (plus = the cursor's cross in the highlight colour), the logo in the bar is just the variable vry */
body.clean #logo-fixed { display: inline-flex; align-items: baseline; white-space: nowrap; }
body.clean #logo-fixed .hplus { width: .62em; height: .62em; margin: 0 .34em; fill: var(--plus-color, var(--hi, currentColor)); align-self: center; flex: none; transition: fill .4s; }
body.clean #logo-fixed .hdr-studio { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 200; margin-left: .28em; }
body.clean #logo-center .lg-studio { display: none !important; }
body.clean.hdr-filled #logo-fixed .hplus { fill: var(--hi-ink, currentColor); }
body.clean #logo-fixed { align-items: center; }
body.clean #logo-fixed .hplus { align-self: auto; display: block; }
/* the hidden studio still anchors the baseline of the header logo, but takes no room */
body.clean #logo-center .lg-studio { display: inline-block !important; visibility: hidden; width: 0; overflow: hidden; }
body.clean #logo-center { gap: 0 !important; }
#vry-magic.tucked { opacity: 0; pointer-events: none; transition: opacity .3s; }
/* "Brand + Design studio": one line, one cut */
body.clean #logo-fixed .hdr-studio { font-family: inherit; font-weight: inherit; }

/* start page: the strip of the colour block visible at load carries no text yet */
body.clean #intro.cl-block { padding-top: max(clamp(80px, 12vw, 180px), calc(17svh + 56px)); }
/* scroll reveal: texts come in one after another as they scroll into view (only with JS; reduced motion: all visible) */
html.rv-on .rv { opacity: 0; transform: translateY(16px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
html.rv-on .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.rv-on .rv { opacity: 1; transform: none; transition: none; } }

/* cursor v3: one continuous morph (no cross-fade): four arms, same duration and curve for everything, colour fades along */
body.clean #cursor { --mt: .33s; --me: cubic-bezier(.45,0,.25,1); transition: opacity .2s, color var(--mt) var(--me) !important; }
body.clean #cursor .turn { transition: transform var(--mt) var(--me) !important; }
body.clean #cursor .arm { transform-box: view-box; transform-origin: 0 0; transition: transform var(--mt) var(--me), opacity var(--mt) var(--me); }
body.clean #cursor .arm rect { fill: currentColor; }
body.clean #cursor .arm .len { transform-box: fill-box; transform-origin: 50% 100%; transition: transform var(--mt) var(--me); transform: scaleY(15); }
body.clean #cursor .a-n { transform: translate(15px, 15px) rotate(0deg); }
body.clean #cursor .a-e { transform: translate(15px, 15px) rotate(90deg); }
body.clean #cursor .a-s { transform: translate(15px, 15px) rotate(180deg); }
body.clean #cursor .a-w { transform: translate(15px, 15px) rotate(270deg); }
/* arrow (inside the 45° turn): tip on the hotspot, right-angled head (barbs 22), shaft 30.5 from the tip */
body.clean #cursor.link .a-n { transform: translate(15px, 15px) rotate(0deg) scale(0); opacity: 0; }
body.clean #cursor.link .a-e { transform: translate(15px, 22.21px) rotate(135deg); }
body.clean #cursor.link .a-w { transform: translate(15px, 22.21px) rotate(225deg); }
body.clean #cursor.link .a-s { transform: translate(15px, 22.21px) rotate(180deg); }
body.clean #cursor.link .a-e .len, body.clean #cursor.link .a-w .len { transform: scaleY(22); }
body.clean #cursor.link .a-s .len { transform: scaleY(23.29); }
@media (prefers-reduced-motion: reduce) { body.clean #cursor .arm, body.clean #cursor .arm .len, body.clean #cursor .turn { transition: none !important; } }
/* the plus in BRAND + DESIGN (hero and header) in the third colour of the set */
.rx-c .hd-logo .hd-what .plus, body.clean #logo-fixed .hplus, body.clean.hdr-filled #logo-fixed .hplus { fill: var(--plus-third, var(--third, var(--hi))) !important; }
/* reveal v2: clearly from below, slower, the lines of rows come along with their element */
html.rv-on .rv { transform: translateY(48px); transition: opacity 1.05s cubic-bezier(.22,.61,.36,1), transform 1.05s cubic-bezier(.22,.61,.36,1); }
/* arrow tip: the two barb roots form a clean diamond at the tip; the shaft's square root is not needed there (it made the notches) */
body.clean #cursor .arm .cap { transition: opacity var(--mt) var(--me); }
body.clean #cursor.link .a-s .cap { opacity: 0; }
/* the hero logo is not a link: plain cross over it */
.rx-c .hd-logo { cursor: none; }
/* the plus in the hero line, larger */
.rx-c .hd-logo .hd-what .plus { width: 1.1em; height: 1.1em; margin: 0 .45em 0 .35em; }

/* header label in lower case: brand + design studio */
body.clean #logo-fixed { text-transform: lowercase; }
/* contact pages: no "Neugierig geworden?" call to action in the footer, only the links */
body:has(.contact-full) #site-foot .fc-grid > div:first-child { display: none; }
/* deliverables as outline pills (like the Morf project tags) */
.phase-deliv { display: flex; flex-wrap: wrap; gap: 12px; }
.phase-deliv .tag { display: inline-flex; align-items: center; border: 2px solid currentColor; border-radius: 999px; padding: .42em 1.1em .38em;
  font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-2); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: 1; white-space: nowrap; }

/* "Warum ein Prozess?" in the same grid as the phases: title left on one line, text in the phase-text column, thick rule above */
body.clean .c-why { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 5vw, 96px); align-items: start;
  margin-top: clamp(56px, 7vw, 112px); padding-top: clamp(56px, 7vw, 112px); border-top: 3px solid var(--fg, #111); }
body.clean .c-why .c-h { white-space: nowrap; margin: 0; }
body.clean .c-why p { margin: 0; padding-top: 4px; }
@media (max-width: 820px) { body.clean .c-why { grid-template-columns: 1fr; row-gap: 16px; } body.clean .c-why .c-h { white-space: normal; } }
body.clean #cursor.parked { color: var(--plus-third, var(--third, var(--hi))) !important; }

/* ── Morf-like statements, three ways, service rows, 5 signs ── */
.mf-lead { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-9); line-height: 1.06; letter-spacing: var(--ls-9, -.02em); margin: 0; color: inherit; }
.mf-lbl { display: inline-block; font-size: var(--fs-1); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; vertical-align: top; margin: .7em 1.6em 0 0; line-height: 1; }
.mf-sec { padding: clamp(80px, 10vw, 150px) var(--edge) clamp(56px, 7vw, 110px); }
.mf-statement { padding-left: var(--edge) !important; padding-right: var(--edge) !important; }
.mf-cta { margin-top: clamp(32px, 4vw, 56px); }
.mf-statement .pill { color: inherit; }
.mf-no { font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-1); font-weight: 500; color: var(--third, var(--hi)); letter-spacing: .02em; }
.mf-ways { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 var(--edge) clamp(72px, 9vw, 140px); border-top: 3px solid currentColor; border-bottom: 3px solid currentColor; }
.mf-way { padding: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 48px); }
.mf-way + .mf-way { border-left: 3px solid currentColor; }
.mf-way:first-child { padding-left: 0; } .mf-way:last-child { padding-right: 0; }
.mf-way h3 { margin: 14px 0 18px; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-3); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.mf-way p { margin: 0; font-size: var(--fs-2); line-height: 1.55; max-width: 34ch; }
.mf-rows { padding: 0 var(--edge) clamp(80px, 10vw, 140px); }
.mf-row { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: clamp(24px, 4vw, 72px); padding: clamp(48px, 6vw, 96px) 0; border-top: 3px solid currentColor; }
.mf-row:first-child { border-top: 0; padding-top: 0; }
.mf-row h2 { margin: 0; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-2); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.mf-row h2 .mf-no { margin-right: .8em; }
.mf-row p { margin: 0; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-5); font-weight: 400; line-height: 1.3; }
.mf-row ul { list-style: none; margin: 0; padding: 0; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-3); line-height: 1.6; }
.mf-row li::before { content: '–'; margin-right: .6em; }
.mf-signs { margin-top: clamp(56px, 7vw, 112px); padding-top: clamp(56px, 7vw, 112px); border-top: 3px solid currentColor; display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 5vw, 96px); }
.mf-signs-h { margin: 0; font-size: var(--fs-6) !important; }
.mf-signs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3vw, 44px); }
.mf-signs-list li { display: grid; grid-template-columns: 3em 1fr; row-gap: 6px; }
.mf-signs-list .mf-no { grid-row: span 2; padding-top: .3em; }
.mf-signs-list strong { font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-4); font-weight: 500; line-height: 1.25; }
.mf-signs-list .mf-sub { font-size: var(--fs-3); line-height: 1.55; }
@media (max-width: 820px) { .mf-row, .mf-ways, .mf-signs { grid-template-columns: 1fr; } .mf-way + .mf-way { border-left: 0; border-top: 3px solid currentColor; } .mf-way { padding-left: 0; padding-right: 0; } .mf-lead { font-size: var(--fs-7); } }
.studio-focus strong { font-weight: 600; }

/* random-fun badge: part of the hero, centred on its lower edge, scrolls away with it */
body.clean .cl-d.rx-c { position: relative; overflow: visible; z-index: 30; }
#vry-magic.in-hero { position: absolute !important; left: auto !important; top: auto !important; right: calc(var(--edge) + 28px) !important; bottom: -73px !important; opacity: 1 !important; pointer-events: auto !important; }
/* project badge: highlight colour, bottom right on every page (start page: on the hero/colour edge) */
#vry-project { position: fixed; right: calc(var(--edge) + 28px); top: auto; z-index: 180; width: 146px; height: 146px; border-radius: 50%;
  background: var(--hi, #111); color: var(--hi-ink, #f6f3ec); text-decoration: none; transition: transform .5s cubic-bezier(.16,1,.3,1), background-color .4s, color .4s, opacity .3s; }
#vry-project.tucked { opacity: 0; pointer-events: none; }
#vry-project:hover { transform: scale(1.05); }
#vry-project svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#vry-project .ring { transform-origin: 70px 70px; animation: magic-spin 24s linear infinite; }
#vry-project:hover .ring { animation-duration: 10s; }
#vry-project text { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; letter-spacing: .02em; fill: currentColor; }
#vry-project .arw { font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 600; }
@media (max-width: 820px) { #vry-project { width: 120px; height: 120px; } }
@media (prefers-reduced-motion: reduce) { #vry-project .ring { animation: none; } }
body:has(#menu-drawer.open) #vry-project { opacity: 0 !important; pointer-events: none !important; }
/* fun control in the hero: A glass pill (live), B small glass circle (preview, html.fun-b) — left, on the hero/colour edge */
#vry-magic.in-hero { display: none !important; }
#vry-fun { position: absolute; left: var(--edge); bottom: -26px; z-index: 31; height: 52px; display: inline-flex; align-items: center; gap: .7em; padding: 0 1.4em 0 1.1em; border-radius: 999px; border: 0;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, #fff 40%, transparent), transparent 65%), color-mix(in srgb, var(--hi, #888) 32%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 60%, transparent), 0 10px 30px color-mix(in srgb, #000 12%, transparent);
  font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .06em; color: #111; transition: transform .5s cubic-bezier(.16,1,.3,1); }
#vry-fun svg { width: 16px; height: 16px; fill: var(--plus-third, var(--third, var(--hi))); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
#vry-fun:hover { transform: scale(1.04); }
#vry-fun:hover svg { transform: rotate(90deg); }
html.fun-b #vry-fun { display: none; }
html.fun-b #vry-magic.in-hero { display: block !important; width: 120px !important; height: 120px !important; right: auto !important; left: var(--edge) !important; bottom: -60px !important; }

/* project badge in glass, text close to the rim, no arrow */
#vry-project { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, #fff 38%, transparent), transparent 60%), color-mix(in srgb, var(--hi, #888) 34%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 60%, transparent), 0 10px 30px color-mix(in srgb, #000 12%, transparent); color: var(--glass-ink, #111); }

/* (tag hover marquee removed; see vry.bak-tagsC.css) */

/* pill buttons: on hover the label runs through as a marquee (same type, word gaps, the bold Bricolage arrow as part of the sequence)
   on a clean light two-tone wash of the palette; normal state unchanged */
.pill .run { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; pointer-events: none; border-radius: inherit; z-index: 1;
  background: radial-gradient(70% 160% at 15% 30%, var(--hi-light, #eee) 0%, transparent 70%), radial-gradient(70% 160% at 85% 70%, var(--third-light, #eee) 0%, transparent 70%), var(--hi-light, #eee);
  background-size: 200% 100%; transition: opacity .35s ease; animation: pill-wash 6s ease-in-out infinite alternate; }
.pill .run i { font-style: normal; display: flex; align-items: center; gap: 1em; padding-left: 1em; white-space: nowrap; color: #111; animation: pill-run 6.5s linear infinite; }
.pill .run i b { font-weight: inherit; }
.pill .run i .arr { font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif !important; font-weight: inherit; line-height: 1; }
.pill:hover .run, .pill:focus-visible .run { opacity: 1; }
.pill .pt, .pill .pa { transition: transform .5s cubic-bezier(.86,0,.07,1), opacity .35s ease; }
.pill:hover .pt, .pill:hover .pa, .pill:focus-visible .pt, .pill:focus-visible .pa { opacity: 0; }
@keyframes pill-run { to { transform: translateX(-50%); } }
@keyframes pill-wash { to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .pill .run, .pill .run i { animation: none; } }

/* hero pattern layer: behind logo and text, above the white */
.cl-d.rx-c .hero-pattern { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .5; }
.cl-d.rx-c .hero-pattern .hp { position: absolute; inset: 0; transition: opacity .5s ease; }
.cl-d.rx-c .hero-pattern svg { display: block; width: 100%; height: 100%; }
.cl-d.rx-c > .hd-col { position: relative; z-index: 1; }
/* project badge: glass as a plain surface, no light rim; same size and text inset as the old fun circle */
#vry-project { width: 166px !important; height: 166px !important; box-shadow: 0 10px 30px color-mix(in srgb, #000 10%, transparent) !important; }
@media (max-width: 820px) { #vry-project { width: 136px !important; height: 136px !important; } }
.pill.more-pill { margin-top: clamp(32px, 4vw, 56px); align-self: flex-start; }
.cl-d.rx-c .hero-pattern { opacity: .25 !important; }
/* rule: every arrow is the bold Bricolage arrow (as at "Nach oben"), never thin */
.pill .pa, .pill .run i .arr, #top-right .pill .pa { font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif !important; font-weight: 800 !important; }

/* ── footer (Morf-like): big mail with turning @, booking pill, one row of links, huge SAY HY! cut at the bottom ── */
#site-foot.foot-hy { padding-top: clamp(72px, 9vw, 140px); padding-bottom: 0; overflow: hidden; background: var(--foot-bg, var(--menu-bg)) !important; background-image: none !important; }
#site-foot.foot-hy::before, #site-foot.foot-hy::after { display: none !important; }
.foot-hy .fh-top { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(28px, 3vw, 44px); }
.foot-hy .fh-mail-big { font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif !important; font-weight: 300; font-size: var(--fs-10); line-height: 1; letter-spacing: -.02em; color: var(--foot-fg, #f6f3ec); text-decoration: none; white-space: nowrap; }
.foot-hy .fh-mail-big .at { display: inline-block; color: var(--hi, var(--foot-accent)); transform-origin: 50% 58%; }
.foot-hy .fh-mail-big:hover .at { animation: at-turn .8s cubic-bezier(.45,0,.25,1); }
@keyframes at-turn { to { transform: rotate(360deg); } }
.foot-hy .pill { margin-top: 0 !important; }
.foot-hy .fh-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 14px 32px; margin-top: clamp(96px, 12vw, 200px);
  font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-2); font-weight: 400; color: var(--foot-fg, #f6f3ec); }
.foot-hy .fh-row a { color: inherit; }
.foot-hy .fh-row span > a, .foot-hy .fh-row > a:not(.js-mail) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; }
.foot-hy .fh-row .js-mail { font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif; }
.foot-hy .fh-end { display: inline-flex; gap: 32px; align-items: baseline; }
.foot-hy .fh-end .fc-top { text-decoration: none !important; font-size: var(--fs-2); }
.foot-hy .fh-big { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; line-height: .74; letter-spacing: -.03em; white-space: nowrap; color: var(--foot-fg, #f6f3ec);
  margin: clamp(12px, 2vw, 28px) 0 -.02em; }
.foot-hy .fc-bottom, .foot-hy .fc-mark, .foot-hy .fc-grid { display: none !important; }
@media (max-width: 820px) { .foot-hy .fh-mail-big { font-size: var(--fs-7); } .foot-hy .fh-row { flex-direction: column; align-items: flex-start; } .foot-hy .fh-end { gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .foot-hy .fh-mail-big:hover .at { animation: none; } }
/* footer fits in one screen at 1440×900, so the reveal shows all of it */
#site-foot.foot-hy { padding-top: clamp(56px, 6vw, 96px); }
.foot-hy .fh-row { margin-top: clamp(48px, 6vw, 96px); }

/* start-page hero in a very soft tone of the palette (set in vry.js), fades along with every roll */
.cl-d.rx-c { transition: background-color .6s ease; }

/* the fun pill is gone; instead a small rounded flag "action!" sits at the top right of the project badge and rolls */
#vry-fun { display: none !important; }
#vry-action { position: fixed; z-index: 181; height: 34px; padding: 0 .9em; border: 0; border-radius: 999px; background: var(--third, var(--hi)); color: var(--third-ink, #111);
  font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-1); letter-spacing: .02em; line-height: 1; transform: rotate(-8deg);
  box-shadow: 0 6px 18px color-mix(in srgb, #000 14%, transparent); transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s, background-color .4s; }
#vry-action:hover { transform: rotate(-2deg) scale(1.06); }
#vry-action.tucked { opacity: 0; pointer-events: none; }
body:has(#menu-drawer.open) #vry-action { opacity: 0 !important; pointer-events: none !important; }
#vry-action { transform: rotate(-10deg); padding: 6px 14px; height: auto; }
#vry-action:hover { transform: rotate(-4deg) scale(1.06); }
#vry-action.wiggle { animation: flag-wiggle .3s ease-in-out; }
@keyframes flag-wiggle { 25% { transform: rotate(-16deg); } 75% { transform: rotate(-4deg); } }
@media (max-width: 820px) { #vry-action { padding: 4px 10px; } }
/* no colour band above the footer any more: the content ends with breathing room before the footer */
#content { padding-bottom: clamp(64px, 8vw, 120px); }
/* SAY HY! at scale step 10, left aligned, not cut */
.foot-hy .fh-big { font-size: var(--fs-10) !important; line-height: 1; letter-spacing: -.03em; margin: clamp(40px, 5vw, 72px) 0 0; padding-bottom: clamp(40px, 5vw, 72px); }
/* "action!" as a flag sticking out of the right screen edge: level, round on the left, cut straight at the edge */
#vry-action { right: 0 !important; left: auto !important; transform: none !important; border-radius: 999px 0 0 999px; padding: 8px 28px 8px 20px; min-width: 120px; text-align: left; height: auto; }
#vry-action:hover { transform: translateX(-4px) !important; }
#vry-action.wiggle { animation: flag-nudge .3s ease-in-out; }
@keyframes flag-nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (max-width: 820px) { #vry-action { padding: 6px 22px 6px 16px; min-width: 100px; } }
/* closed: only a bold plus peeks out of the edge; on hover the flag slides out and shows "+ action!" */
#vry-action { display: inline-flex; align-items: center; gap: .55em; min-width: 0; padding: 9px 18px 9px 16px; overflow: hidden; max-width: 52px; white-space: nowrap; transition: max-width .35s cubic-bezier(.2,.8,.2,1), background-color .4s, opacity .3s; }
#vry-action svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
#vry-action span { opacity: 0; transition: opacity .25s ease .05s; }
#vry-action:hover, #vry-action.open { max-width: 170px; transform: none !important; }
#vry-action:hover span, #vry-action.open span { opacity: 1; }
@media (max-width: 820px) { #vry-action { padding: 8px 16px 8px 14px; max-width: 48px; } }

/* hero: "Action!" pill under studio rolls palette, logo and hero tone; plus instead of the arrow, in the third colour */
#vry-action { display: none !important; }
.rx-c .hd-col { display: flex; flex-direction: column; align-items: center; }
.rx-c .hd-box { height: 64%; }
/* hero pill: a normal pill (text + bold arrow), more air above */

/* hero pill: same pill as all others; only the spacing under "studio" is its own */
.pill.hero-action { margin-top: clamp(96px, 10.4vw, 150px); position: relative; z-index: 2; flex-shrink: 0; }
/* the pill is the last step of the hero sequence: studio is in at 2.26s, the pill starts 0.8s later and rises like the scroll reveals */
@keyframes hero-pill-in { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
.intro-run .pill.hero-action { opacity: 0; animation: hero-pill-in .9s cubic-bezier(.22,.61,.36,1) 3.06s forwards; }
@media (prefers-reduced-motion: reduce) { .intro-run .pill.hero-action { opacity: 1; animation: none; } }

/* ── one info row style for the footer row and the contact row (.info-row): Hanken Rund 300, fs-2, no static underline,
      2px underline slides in on hover; mail in Bricolage 300; spread over the full width ── */
.info-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 20px 48px;
  font-family: 'Hanken Rund', system-ui, sans-serif !important; font-size: var(--fs-2) !important; font-weight: 300 !important; letter-spacing: normal; text-transform: none; }
.info-row a { color: inherit; position: relative; text-decoration: none !important; border-bottom: 0 !important; opacity: 1 !important; cursor: none; }
.info-row a::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0; background: currentColor; transition: width .22s cubic-bezier(0,.8,.2,1); }
.info-row a:hover::after, .info-row a:focus-visible::after { width: 100%; }
.info-row .js-mail, .info-row .mail-unb { font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif !important; font-weight: 300 !important; font-size: var(--fs-2) !important; }
.info-row .fh-end, .info-row .cf-legal { display: inline-flex; gap: 20px 48px; align-items: baseline; }
.info-row .fc-top { font: inherit !important; color: inherit; }
.info-row .fc-top .arr { font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif !important; font-weight: 800 !important; }
@media (max-width: 820px) { .info-row { flex-direction: column; align-items: flex-start; } .info-row .fh-end, .info-row .cf-legal { gap: 20px; } }
/* pill arrows 25% larger (all pills + hover marquee); height and padding unchanged */
.pill .pa, .pill .run i .arr { font-size: 1.25em !important; line-height: 1 !important; }
.pill .run i .arr { margin-block: -.2em; }

/* ── footer order (2026-11-04): SAY HY! large first, one line below, then pill + mail, then the info row ── */
.foot-hy .fh-head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2vw, 28px); }
.foot-hy .fh-head .fh-big { margin: 0 !important; padding: 0 !important; line-height: .9; }
.foot-hy .fh-lead { margin: 0; font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 300; font-size: var(--fs-5); line-height: 1.2; max-width: 22em; color: var(--foot-fg, #f6f3ec); }
.foot-hy .fh-top { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; gap: 20px clamp(32px, 4vw, 56px) !important; margin-top: clamp(40px, 5vw, 72px); }
.foot-hy .fh-mail-big.fh-mail-sm { font-size: var(--fs-5) !important; letter-spacing: 0; }
.foot-hy .fh-row { padding-bottom: clamp(36px, 5vh, 64px); }
@media (max-width: 820px) { .foot-hy .fh-top { flex-direction: column !important; align-items: flex-start !important; } }
/* contact pages: no CTA part in the footer, only the bottom row */
body:has(.contact-full) .foot-hy .fh-head, body:has(.contact-full) .foot-hy .fh-top { display: none !important; }
body:has(.contact-full) .foot-hy .fh-row { margin-top: 0 !important; }
.foot-hy .fh-mail-sm .at { color: var(--foot-accent, var(--hi)) !important; }
/* arrow centre on the cap-height centre of the label (measured: was 1px low) */
.pill .pa, .pill .run i .arr { translate: 0 -.045em; }

/* ── footer like Morf (2026-11-04): two-line statement at fs-9, pill below, big calm space, info row at the bottom ── */
#site-foot.foot-hy { padding: clamp(64px, 6.7vw, 96px) var(--edge) 0 !important; min-height: 520px; box-sizing: border-box; display: flex; flex-direction: column; }
.foot-hy .fh-head { gap: 0; }
.foot-hy .fh-lead { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-9); line-height: 1.05; letter-spacing: var(--ls-9, -.02em); max-width: none;
  color: var(--foot-statement, var(--foot-fg, #f6f3ec)); transition: color .4s; }
.foot-hy .fh-top { margin-top: 32px !important; }
.foot-hy .fh-row { margin-top: auto !important; padding-top: clamp(96px, 12vw, 180px); padding-bottom: clamp(28px, 3vw, 40px); }
.foot-hy .fh-mail-row { font-family: 'Bricolage Pfeile', 'Bricolage Grotesque', system-ui, sans-serif !important; font-weight: 300 !important; }
.foot-hy .fh-mail-row .at { display: inline-block; transform-origin: 50% 58%; }
.foot-hy .fh-mail-row:hover .at { animation: at-turn .8s cubic-bezier(.45,0,.25,1); }
@media (max-width: 820px) { .foot-hy .fh-lead { font-size: var(--fs-7); } #site-foot.foot-hy { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .foot-hy .fh-mail-row:hover .at { animation: none; } }
body:has(.contact-full) #site-foot.foot-hy { min-height: 0; padding-top: 0 !important; }
body:has(.contact-full) .foot-hy .fh-row { padding-top: clamp(28px, 3vw, 40px); }
#site-foot.foot-hy { align-items: stretch !important; text-align: left !important; }
.foot-hy .fh-head, .foot-hy .fh-top { align-items: flex-start !important; justify-content: flex-start !important; width: 100%; }
.foot-hy .fh-row { width: 100%; justify-content: space-between !important; }
@media (max-width: 820px) { .foot-hy .fh-row { align-items: flex-start !important; } }
@media (min-width: 1100px) { .foot-hy .fh-lead { white-space: nowrap; letter-spacing: -.027em; } }
/* arrows outside the pills (menu LinkedIn ↗ etc.): bold Bricolage arrow, same size and centring as in the pills */
.arr { font-family: 'Bricolage Pfeile', 'Hanken Rund', system-ui, sans-serif; }
#menu-drawer .arr { font-weight: 800; font-size: 1.25em; line-height: 1; display: inline-block; translate: 0 -.045em; }
/* subscript digits in Hanken Rund (CO2): no fallback font */
sub.sub2 { font-family: inherit; font-size: .7em; vertical-align: baseline; position: relative; top: .22em; line-height: 0; }
/* footer statement in Bricolage Grotesque 500 (Jen, 2026-11-04) */
.foot-hy .fh-lead { font-family: 'Bricolage Grotesque', system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: -.03em !important; }
/* studio: the colour block carries the statement instead of the fact tiles */
.about-facts.sd-statement { display: block !important; padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px) !important; }
.about-facts.sd-statement .mf-lead { font-size: var(--fs-9); line-height: 1.05; color: inherit; text-align: left; }
@media (max-width: 820px) { .about-facts.sd-statement .mf-lead { font-size: var(--fs-7); } }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr !important; } .about-portrait { max-width: 100%; } }
/* studio statement without colour block (Jen: block removed) */
.about-grid .sd-statement { background: none !important; padding: 0 !important; margin-top: clamp(48px, 6vw, 96px); }
.about-grid .sd-statement .mf-lead { font-size: var(--fs-9); line-height: 1.05; color: inherit; }
@media (max-width: 820px) { .about-grid .sd-statement .mf-lead { font-size: var(--fs-7); } }
.sd-sec { padding-top: clamp(72px, 9vw, 140px) !important; padding-bottom: clamp(72px, 9vw, 140px) !important; }
.sd-sec .mf-lead { font-size: var(--fs-9); line-height: 1.05; color: var(--fg, #111); text-align: left; max-width: 16em; }
@media (max-width: 820px) { .sd-sec .mf-lead { font-size: var(--fs-7); } }

/* studio portrait (variant C, 2026-11-05): the whole 3:2 photo, small, left at about 40 %, text beside it; mobile: photo above text */
.sf-small img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; }
.sf-c .about-grid { grid-template-columns: 40% 1fr !important; align-items: start; }
@media (max-width: 820px) { .sf-c .about-grid { grid-template-columns: 1fr !important; } }
#vry-project .hy { fill: var(--third, var(--hi)); font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; letter-spacing: .02em; }
/* SEI VRY panel (preview only): slides up from the bottom, full width, dark palette tone like the footer */
#sv-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 260; min-height: 38vh; box-sizing: border-box;
  padding: clamp(40px, 5vw, 72px) var(--edge, 56px) clamp(32px, 4vw, 56px);
  background: var(--foot-bg, var(--menu-bg, #1a1a1a)); color: var(--foot-fg, #f6f3ec);
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(32px, 4vw, 56px);
  transform: translateY(100%); visibility: hidden;
  transition: transform 1.05s cubic-bezier(.22,.61,.36,1), visibility 0s linear 1.05s; }
#sv-panel.open { transform: none; visibility: visible; transition: transform 1.05s cubic-bezier(.22,.61,.36,1), visibility 0s; }

/* close: bold X like the open menu */
.sv-x { position: absolute; top: 22px; right: 28px; width: 36px; height: 36px; background: none; border: 0; padding: 0; cursor: none; }
.sv-x span { position: absolute; left: 0; top: 17px; width: 100%; height: 3px; background: currentColor; transition: transform .38s cubic-bezier(.77,0,.18,1); }
.sv-x span:nth-child(1) { transform: rotate(45deg); }
.sv-x span:nth-child(2) { transform: rotate(-45deg); }
.sv-x:hover span:nth-child(1) { transform: rotate(45deg) scaleX(1.15); }
.sv-x:hover span:nth-child(2) { transform: rotate(-45deg) scaleX(1.15); }

/* three scales side by side */
.sv-scales { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 72px); margin-top: 24px; }
.sv-sc { display: flex; align-items: center; gap: 16px; }
.sv-end { font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }

/* slider: 2px track, round 28px knob in the highlight colour, no browser look */
.sv-sc input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 60px; height: 28px; margin: 0; background: none; cursor: none; }
.sv-sc input[type=range]:focus { outline: none; }
.sv-sc input[type=range]::-webkit-slider-runnable-track { height: 2px; background: currentColor; border-radius: 2px; }
.sv-sc input[type=range]::-moz-range-track { height: 2px; background: currentColor; border-radius: 2px; }
.sv-sc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -13px; border-radius: 50%; border: 0;
  background: var(--hi, #f6f3ec); transition: transform .2s, background-color .4s; }
.sv-sc input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--hi, #f6f3ec); }
.sv-sc input[type=range]:hover::-webkit-slider-thumb, .sv-sc input[type=range]:focus-visible::-webkit-slider-thumb { transform: scale(1.15); }

/* result line + pills */
.sv-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 48px; }
.sv-btns { display: flex; flex-wrap: wrap; gap: 16px; }
#sv-panel .pill { color: inherit !important; margin: 0 !important; }

@media (max-width: 820px) {
  #sv-panel { min-height: 0; max-height: 80vh; overflow: auto; padding: 72px 20px 28px; }
  .sv-scales { grid-template-columns: 1fr; gap: 28px; margin-top: 0; }
  .sv-foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { #sv-panel, #sv-panel.open { transition: none; } }
/* controls take the panel's light ink; the knob keeps a light rim so it reads on the dark panel in every palette */
.sv-x, .sv-sc input[type=range] { color: inherit; }
.sv-sc input[type=range]::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--foot-fg, #f6f3ec); }
.sv-sc input[type=range]::-moz-range-thumb { box-shadow: 0 0 0 3px var(--foot-fg, #f6f3ec); }

/* ── language switch as a rectangular box with a colourful slider (2026-11-05) ── */
#lang-switch { position: relative; display: inline-grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; height: 36px; box-sizing: border-box;
  border: 2px solid currentColor; border-radius: 0; color: var(--fg, #111); overflow: hidden; }
#lang-switch a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 46px; padding: 0 10px; opacity: 1 !important;
  color: inherit !important; font-family: 'Hanken Rund', system-ui, sans-serif !important; font-weight: 500 !important; font-size: var(--fs-1) !important; letter-spacing: .06em !important;
  text-transform: uppercase; text-decoration: none; transition: color .35s cubic-bezier(.65,0,.35,1); }
#lang-switch a.active { color: var(--hi-ink, #111) !important; }
#lang-switch .ls-knob { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 50%; background: var(--hi, #111);
  transform: translateX(calc(var(--p, 0) * 100% + var(--nudge, 0px))); transition: transform .35s cubic-bezier(.65,0,.35,1), background-color .4s; }
#lang-switch:hover { --nudge: calc((1 - 2 * var(--p, 0)) * 4px); }
/* filled header (all highlight colour on load): dark slider and dark rim */
body.clean.hdr-filled #lang-switch { color: var(--hi-ink, #111); border-color: var(--hi-ink, #111); }
body.clean.hdr-filled #lang-switch .ls-knob { background: var(--menu-bg, #111); }
body.clean.hdr-filled #lang-switch a.active { color: #f6f3ec !important; }
body:has(#menu-drawer.open) #lang-switch { color: #f6f3ec; }
@media (max-width: 820px) { #top-right #lang-switch { display: inline-grid !important; height: 32px; } #lang-switch a { min-width: 40px; padding: 0 8px; } }
#top-right #lang-switch, #lang-switch { position: relative !important; align-self: center; }
body.clean.hdr-filled #lang-switch .ls-knob { background: var(--hi-ink, #111); }
body.clean.hdr-filled #lang-switch a.active { color: var(--hi, #f6f3ec) !important; }
#top-right #lang-switch, #lang-switch { top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }

/* ── one rim width for all pills and the language tab (2026-11-05: 1.5px) ── */
:root { --pill-bw: 1.5px; }
.pill, #top-right #cta-top.pill, #menu-drawer .md-top .pill { border-width: var(--pill-bw) !important; }
/* language tab docks under the header line like a tab: top edge flush with the line, no rim at the top */
#top-right #lang-switch, #lang-switch { position: fixed !important; top: 100px !important; right: var(--edge, 56px) !important; z-index: 199;
  border-width: var(--pill-bw) !important; border-top-width: 0 !important; height: 38px; background: var(--bg, #fafaf8); }
body.clean.hdr-filled #lang-switch { background: var(--hi, #fafaf8); }
@media (max-width: 820px) { #top-right #lang-switch, #lang-switch { top: 80px !important; height: 34px; } }
body:has(#menu-drawer.open) #lang-switch { opacity: 0; pointer-events: none; }
/* tab under the filled header: continues the header colour, dark slider, dark rim */
body.clean.hdr-filled #lang-switch { background: var(--hi, #fafaf8) !important; color: var(--hi-ink, #111) !important; border-color: var(--hi-ink, #111) !important; }
body.clean.hdr-filled #lang-switch .ls-knob { background: var(--hi-ink, #111) !important; }
body.clean.hdr-filled #lang-switch a { color: var(--hi-ink, #111) !important; }
body.clean.hdr-filled #lang-switch a.active { color: var(--hi, #fafaf8) !important; }


/* ── header (2026-11-05): the variable vry sits left, right before "brand + design studio"; no vry in the middle any more ── */
#logo-center { display: none !important; }
#logo-fixed { align-items: baseline !important; }
#logo-fixed .hdr-vry { display: inline-block; font-size: 1.45em; line-height: 1; margin-right: .32em; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s ease-out; }
#logo-fixed .hdr-vry .vry-rand { display: inline-flex; align-items: baseline; }
/* start page: the line stays, only the vry glides in from above once the hero logo has left (space reserved from the start) */
body.hdr-hide #logo-fixed { transform: none !important; opacity: 1 !important; }
body.hdr-hide #logo-fixed .hdr-vry { transform: translateY(-140%); opacity: 0; }
body.hdr-hide.hdr-show #logo-fixed .hdr-vry { transform: none; opacity: 1; }
@media (max-width: 430px) { #logo-fixed .hdr-studio { display: none; } }
body.clean #logo-fixed { align-items: center !important; }
body.clean #logo-fixed .hdr-vry { align-self: center; position: relative; top: -.04em; }
body:has(#logo-center.visible) #logo-fixed, body:has(#logo-center) #logo-fixed { opacity: 1 !important; pointer-events: auto !important; }
body:has(#menu-drawer.open) #logo-fixed { opacity: 0 !important; pointer-events: none !important; }
#logo-fixed .vry-rand, #logo-fixed .vry-rand > span { color: inherit !important; }

/* header vry (2026-11-05): on the start page the line begins with a plain "vry" in the same type as "brand + design studio";
   once the hero logo has left, the plain vry slides down out and the variable vry drops in from above */
#logo-fixed .hdr-vry { display: inline-grid !important; overflow: hidden; padding: .18em 0; margin-top: -.18em; margin-bottom: -.18em; transform: none !important; opacity: 1 !important; }
#logo-fixed .hdr-vry > * { grid-area: 1 / 1; align-self: center; justify-self: start; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s ease-out; }
#logo-fixed .hdr-vry-plain { font-size: calc(1em / 1.45); font-family: inherit; font-weight: inherit; letter-spacing: inherit; transform: translateY(140%); opacity: 0; }
body.hdr-hide:not(.hdr-show) #logo-fixed .hdr-vry-plain { transform: none; opacity: 1; }
body.hdr-hide:not(.hdr-show) #logo-fixed .hdr-vry .vry-rand { transform: translateY(-140%); opacity: 0; }
body.hdr-hide.hdr-show #logo-fixed .hdr-vry .vry-rand { transform: none; opacity: 1; }
#logo-fixed .hdr-vry-plain { justify-self: end !important; }

/* ── SEI VRY panel as a side drawer from the left (2026-11-05): random design on top, the scales stacked below ── */
#sv-panel { top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important; width: min(520px, 100vw); min-height: 0 !important; height: 100%;
  padding: calc(var(--barh, 100px) + 24px) clamp(28px, 3vw, 48px) clamp(28px, 4vh, 48px) !important; overflow-y: auto;
  display: flex !important; flex-direction: column; justify-content: flex-start !important; gap: 0 !important;
  transform: translateX(-100%) !important; transition: transform .45s cubic-bezier(.7,0,.2,1), visibility 0s linear .45s !important; box-shadow: none; }
#sv-panel.open { transform: none !important; transition: transform .45s cubic-bezier(.7,0,.2,1), visibility 0s !important; }
#sv-panel .sv-x { top: 22px; right: 22px; left: auto; }
#sv-panel .sv-top { margin: 0; }
#sv-panel .sv-ask { margin: clamp(40px, 6vh, 64px) 0 0; font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-4); line-height: 1.25; }
#sv-panel .sv-scales { display: flex !important; flex-direction: column; gap: 30px !important; margin: 28px 0 0 !important; grid-template-columns: none !important; }
#sv-panel .sv-sc { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; }
#sv-panel .sv-ends { display: flex; justify-content: space-between; }
#sv-panel .sv-sc input[type=range] { width: 100%; flex: none; }
#sv-panel .sv-foot { margin-top: auto; padding-top: clamp(40px, 6vh, 64px); display: block !important; }
#sv-panel .sv-foot .pill { white-space: normal; }
@media (max-width: 820px) { #sv-panel { width: 100vw; padding-top: 88px !important; } }
/* panel: menu width (about 40 %), labels left and right of each bar, full height, items glide in one after another */
#sv-panel { width: clamp(420px, 40vw, 640px); height: 100vh; height: 100dvh; }
#sv-panel .sv-sc { flex-direction: row !important; align-items: center !important; gap: 16px !important; }
#sv-panel .sv-sc .sv-end { flex: none; width: 7.2em; }
#sv-panel .sv-sc .sv-end:last-child { text-align: right; }
#sv-panel .sv-sc input[type=range] { flex: 1 !important; width: auto; }
#sv-panel .sv-top, #sv-panel .sv-ask, #sv-panel .sv-sc, #sv-panel .sv-foot { opacity: 0; transform: translateX(-24px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
#sv-panel.open .sv-top, #sv-panel.open .sv-ask, #sv-panel.open .sv-sc, #sv-panel.open .sv-foot { opacity: 1; transform: none; }
#sv-panel.open .sv-top { transition-delay: .15s; } #sv-panel.open .sv-ask { transition-delay: .22s; }
#sv-panel.open .sv-sc:nth-child(1) { transition-delay: .29s; } #sv-panel.open .sv-sc:nth-child(2) { transition-delay: .36s; } #sv-panel.open .sv-sc:nth-child(3) { transition-delay: .43s; }
#sv-panel.open .sv-foot { transition-delay: .5s; }
@media (max-width: 820px) { #sv-panel { width: 100vw; } #sv-panel .sv-sc .sv-end { width: 6.4em; } }
@media (prefers-reduced-motion: reduce) { #sv-panel .sv-top, #sv-panel .sv-ask, #sv-panel .sv-sc, #sv-panel .sv-foot { transition: none; opacity: 1; transform: none; } }
/* language box without a rim (2026-11-05): only the fields and the sliding marker */
#top-right #lang-switch, #lang-switch, body.clean.hdr-filled #lang-switch { border: 0 !important; outline: 0 !important; }
/* SEI VRY panel on phones: full height, labels above each bar */
#sv-panel { max-height: none !important; }
@media (max-width: 820px) {
  #sv-panel .sv-sc { display: grid !important; grid-template-columns: 1fr 1fr; row-gap: 10px !important; }
  #sv-panel .sv-sc .sv-end { width: auto; }
  #sv-panel .sv-sc input[type=range] { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}
#sv-panel .sv-sc .sv-end { width: auto !important; min-width: 6.6em; }
@media (min-width: 821px) {
  #sv-panel .sv-scales { display: grid !important; grid-template-columns: max-content 1fr max-content !important; column-gap: 16px !important; row-gap: 30px !important; align-items: center;
    opacity: 0; transform: translateX(-24px); transition: opacity .5s ease .29s, transform .6s cubic-bezier(.2,.8,.2,1) .29s; }
  #sv-panel.open .sv-scales { opacity: 1; transform: none; }
  #sv-panel .sv-sc { display: contents !important; }
  #sv-panel .sv-sc .sv-end { min-width: 0; }
}

/* ── double space before the arrow in all pills (2026-11-05): one variable, the pill grows by it ── */
:root { --pill-gap-add: 6px; }
.pill { padding-right: calc(28px + var(--pill-gap-add)) !important; }
#top-right #cta-top.pill, #menu-drawer .md-top .pill { padding-right: calc(34px + var(--pill-gap-add)) !important; }
.pill .run i .arr { margin-left: calc(var(--pill-gap-add) * 2 - 1em); }
/* language tab on the filled header: the slider is the highlight colour darkened, not black */
body.clean.hdr-filled #lang-switch .ls-knob { background: color-mix(in srgb, var(--hi, #888) 62%, #000) !important; }
body.clean.hdr-filled #lang-switch a.active { color: #f6f3ec !important; }

/* header padding (2026-11-05): left / right edge the same as the space above and below the line (header only, content unchanged) */
:root { --hdr-pad: 34px; }
@media (max-width: 820px) { :root { --hdr-pad: 24px; } }
#logo-fixed { left: var(--hdr-pad) !important; }
#menu-btn { right: var(--hdr-pad) !important; }
#top-right #lang-switch, #lang-switch { right: var(--hdr-pad) !important; }
#top-right { right: var(--hdr-pad) !important; }
/* the variable vry in the header keeps its calm idle sway (as it did in the centre); the box itself stays fixed */
#logo-fixed .vry-rand > span { display: inline-block; animation: vry-waber2 6s ease-in-out infinite; }
#logo-fixed .vry-rand > span:nth-child(2) { animation-delay: -2s; animation-duration: 7s; }
#logo-fixed .vry-rand > span:nth-child(3) { animation-delay: -4s; animation-duration: 6.5s; }
@media (prefers-reduced-motion: reduce) { #logo-fixed .vry-rand > span { animation: none; } }
/* plain header vry sits left in its fixed box (left edge = header padding); the box and the line keep their place */
#logo-fixed .hdr-vry-plain { justify-self: start !important; }
/* language box the same in both header states: inactive half in the highlight colour, slider = highlight darkened, light text on it */
#top-right #lang-switch, #lang-switch, body.clean.hdr-filled #lang-switch { background: var(--hi, #888) !important; color: var(--hi-ink, #111) !important; }
#lang-switch .ls-knob, body.clean.hdr-filled #lang-switch .ls-knob { background: color-mix(in srgb, var(--hi, #888) 62%, #000) !important; }
#lang-switch a, body.clean.hdr-filled #lang-switch a { color: var(--hi-ink, #111) !important; }
#lang-switch a.active, body.clean.hdr-filled #lang-switch a.active { color: #f6f3ec !important; }
/* panel: process pill under the scales, free call line + pill at the bottom; pills never wrap */
#sv-panel .sv-more { margin-top: clamp(32px, 5vh, 48px); opacity: 0; transform: translateX(-24px); transition: opacity .5s ease .43s, transform .6s cubic-bezier(.2,.8,.2,1) .43s; }
#sv-panel.open .sv-more { opacity: 1; transform: none; }
#sv-panel .sv-free { margin: 0 0 16px; font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-4); line-height: 1.25; }
#sv-panel .pill { white-space: nowrap !important; }
#sv-panel .sv-foot .pill { white-space: nowrap !important; }
@media (max-width: 420px) { #sv-panel .pill { padding-left: 20px !important; padding-right: 26px !important; } }
#sv-panel .sv-disc { margin: 0 0 8px; font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-4); line-height: 1.25; }
#sv-panel .sv-free { font-size: var(--fs-2) !important; font-weight: 300 !important; margin-bottom: 18px !important; }
#logo-fixed .hdr-vry { transition: width .55s cubic-bezier(.2,.8,.2,1) !important; }
#logo-fixed .hdr-vry { margin-right: .19em !important; }   /* = one word space of the header line */
#logo-fixed .hdr-vry { transition: none !important; }
#logo-fixed .pw { display: inline-block; will-change: transform; }
#logo-fixed .pw-plus { display: inline-flex; align-self: center; }

/* ── SEI VRY panel on phones (2026-11-05): a bottom sheet instead of the side drawer, so the hero vry stays visible above it ── */
@media (max-width: 760px) {
  #sv-panel { top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important;
    height: auto !important; max-height: 50vh !important; max-height: 50dvh !important; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 24px 24px 0 0; padding: 26px 20px calc(24px + env(safe-area-inset-bottom)) !important;
    transform: translateY(100%) !important; transition: transform .45s cubic-bezier(.7,0,.2,1), visibility 0s linear .45s !important; }
  #sv-panel.open { transform: none !important; transition: transform .45s cubic-bezier(.7,0,.2,1), visibility 0s !important; }
  #sv-panel .sv-x { position: absolute; top: 18px; right: 16px; width: 30px; height: 30px; }
  #sv-panel .sv-x span { top: 14px; }
  #sv-panel .sv-top { padding-right: 44px; }
  #sv-panel .sv-ask { margin: 22px 0 0 !important; font-size: var(--fs-4) !important; }
  #sv-panel .sv-scales { gap: 18px !important; margin: 14px 0 0 !important; }
  #sv-panel .sv-sc { row-gap: 4px !important; }
  #sv-panel .sv-more { margin-top: 24px !important; }
  #sv-panel .sv-foot { margin-top: 0 !important; padding-top: 26px !important; }
  #sv-panel .sv-disc { margin-bottom: 2px !important; }
  #sv-panel .sv-free { margin-bottom: 14px !important; }
  #sv-panel .sv-top, #sv-panel .sv-ask, #sv-panel .sv-sc, #sv-panel .sv-scales, #sv-panel .sv-more, #sv-panel .sv-foot { transform: translateY(14px); }
  #sv-panel.open .sv-top, #sv-panel.open .sv-ask, #sv-panel.open .sv-sc, #sv-panel.open .sv-scales, #sv-panel.open .sv-more, #sv-panel.open .sv-foot { transform: none; }
}
@media (max-width: 420px) { #sv-panel .pill { padding-right: calc(26px + var(--pill-gap-add)) !important; } }
#sv-panel input[type=range] { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

/* ── plus bullets (2026-11-05): every plain list on the site gets a thick plus in the third palette colour, cut like the header / cursor plus (bar = 34 %) ── */
:root { --plus-b: linear-gradient(var(--plus-third, var(--third, var(--hi))), var(--plus-third, var(--third, var(--hi)))); }
main ul:not([class]) { list-style: none; padding-left: 0; }
main ul:not([class]) > li { position: relative; padding-left: 1.35em; }
main ul:not([class]) > li::before { content: '' !important; position: absolute; left: 0; top: calc(.8em - .35em); width: .7em; height: .7em; margin: 0 !important;
  background: var(--plus-b) center / 100% 34% no-repeat, var(--plus-b) center / 34% 100% no-repeat; }

/* ── panel knobs as a thick filled plus in the highlight colour (no ring, no circle); 44 px grab area ── */
#sv-panel .sv-sc input[type=range] { height: 44px !important; }
#sv-panel .sv-sc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 44px !important; height: 44px !important; margin-top: -21px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: linear-gradient(var(--sv-knob, var(--plus-color, var(--hi))), var(--sv-knob, var(--plus-color, var(--hi)))) center / 28px 9.5px no-repeat, linear-gradient(var(--sv-knob, var(--plus-color, var(--hi))), var(--sv-knob, var(--plus-color, var(--hi)))) center / 9.5px 28px no-repeat !important; }
#sv-panel .sv-sc input[type=range]::-moz-range-thumb { width: 44px; height: 44px; border: 0; border-radius: 0; box-shadow: none !important;
  background: linear-gradient(var(--sv-knob, var(--plus-color, var(--hi))), var(--sv-knob, var(--plus-color, var(--hi)))) center / 28px 9.5px no-repeat, linear-gradient(var(--sv-knob, var(--plus-color, var(--hi))), var(--sv-knob, var(--plus-color, var(--hi)))) center / 9.5px 28px no-repeat !important; }
#sv-panel .sv-sc input[type=range]:hover::-webkit-slider-thumb, #sv-panel .sv-sc input[type=range]:focus-visible::-webkit-slider-thumb { transform: scale(1.12); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
/* panel bars (2026-11-05): the line steps back (38 % of the ink), the plus knob is 2 px larger */
#sv-panel .sv-sc input[type=range]::-webkit-slider-runnable-track { background: color-mix(in srgb, currentColor 38%, transparent) !important; }
#sv-panel .sv-sc input[type=range]::-moz-range-track { background: color-mix(in srgb, currentColor 38%, transparent) !important; }
#sv-panel .sv-sc input[type=range]::-webkit-slider-thumb { background: linear-gradient(var(--sv-knob, var(--plus-color, var(--hi))), var(--sv-knob, var(--plus-color, var(--hi)))) center / 30px 10.2px no-repeat, linear-gradient(var(--sv-knob, var(--plus-color, var(--hi))), var(--sv-knob, var(--plus-color, var(--hi)))) center / 10.2px 30px no-repeat !important; }
#sv-panel .sv-sc input[type=range]::-moz-range-thumb { background: linear-gradient(var(--sv-knob, var(--plus-color, var(--hi))), var(--sv-knob, var(--plus-color, var(--hi)))) center / 30px 10.2px no-repeat, linear-gradient(var(--sv-knob, var(--plus-color, var(--hi))), var(--sv-knob, var(--plus-color, var(--hi)))) center / 10.2px 30px no-repeat !important; }

/* ── DE/EN tag (2026-11-05): scrolls away with the hero; only the active language gets the darkened box (highlight darkened about 40 %, light text),
      the other one stands in muted ink directly on the tag colour (never black, never white) ── */
#lang-switch, #top-right #lang-switch, body.clean.hdr-filled #lang-switch { position: absolute !important; z-index: 90 !important; }
#lang-switch .ls-knob, body.clean.hdr-filled #lang-switch .ls-knob { background: color-mix(in srgb, var(--hi, #888) 60%, #000) !important; }
#lang-switch a, body.clean.hdr-filled #lang-switch a { color: color-mix(in srgb, var(--hi-ink, #111) 62%, var(--hi, #888)) !important; font-weight: 400; }
#lang-switch a.active, body.clean.hdr-filled #lang-switch a.active { color: color-mix(in srgb, #f6f3ec 92%, var(--hi, #888)) !important; font-weight: 500; }
/* language in the menu: a small row below the other small links */
.md-bottom .md-lang { flex-direction: row; gap: 18px; grid-column: 1 / -1; }
.md-bottom .md-lang a[aria-current] { font-weight: 500; }

.info-row a.pill::after { display: none !important; }

/* ── footer / contact row: Instagram + LinkedIn as one group, Impressum + Datenschutz (+ pill) as the second, more room between the groups ── */
.info-row .ir-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.info-row .cf-legal { display: contents !important; }
.info-row .pill-look { font-size: var(--fs-1) !important; padding-top: 8px !important; padding-bottom: 8px !important; margin: 0 !important; align-self: center; }
#site-foot .info-row .pill-look { color: var(--foot-statement, currentColor) !important; border-color: currentColor !important; }
@media (max-width: 820px) { .info-row .pill-look { margin-left: 0 !important; } }

/* ── project badge: the same gap to the right edge as to the bottom edge (one variable) ── */
:root { --badge-gap: var(--edge, 40px); }
#vry-project { right: var(--badge-gap) !important; }
.info-row a.pill, #site-foot .info-row a.pill { border: var(--pill-bw, 1.5px) solid currentColor !important; }

/* ── serif placeholder (2026-11-05) ── */




/* serif slot: Vollkorn as the placeholder (SIL OFL, Web/fonts/vollkorn/); the purchased serif goes here later */
:root { --font-serif: "Vollkorn", Georgia, serif; }
/* page titles, section titles, statements (fs-9) and the footer two-liner in the serif; medium, tracking at most -0.01em.
   Body copy, menu, pills and header stay Hanken Rund */
.c-statement, .page-title .c-statement, .cl-block .c-statement, .cf-h, .c-h, .cl-block .c-h, .cl-h, .mf-lead, .sd-sec .mf-lead,
.about-facts.sd-statement .mf-lead, .about-grid .sd-statement .mf-lead, .foot-hy .fh-lead, .pz-way h3, .pz-ways h3 {
  font-family: var(--font-serif) !important; font-weight: 500 !important; letter-spacing: -.01em !important; }
.mf-lead .mf-lbl { font-family: 'Hanken Rund', system-ui, sans-serif !important; letter-spacing: .07em !important; }

/* ── three ways (2026-11-05): three soft colour fields instead of a table with lines; small gap, generous padding ── */
.mf-ways { border: 0 !important; gap: clamp(10px, 1.2vw, 16px); }
.mf-way, .mf-way + .mf-way, .mf-way:first-child, .mf-way:last-child { border: 0 !important; padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 44px) !important;
  background: color-mix(in srgb, var(--hi, #888) 11%, var(--bg, #f7f5f0)); }
.mf-way .mf-no { color: var(--third, var(--hi)); font-weight: 500; }
.mf-way h3 { font-family: var(--font-serif) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: -.01em !important; font-size: var(--fs-6) !important; line-height: 1.1; margin: 14px 0 20px !important; }
.mf-way .mf-price { font-weight: 600 !important; margin-top: 20px !important; }
@media (max-width: 820px) { .mf-ways { grid-template-columns: 1fr !important; } .mf-way + .mf-way { border-top: 0 !important; } }
/* footer two-liner in the serif: the wider letters still fit one line each on desktop */
@media (min-width: 1100px) { .foot-hy .fh-lead { font-size: min(var(--fs-9), calc((100vw - 2 * var(--edge, 56px)) / 21)) !important; } }

/* ── accessibility (2026-11-05) ── */
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 10000; padding: 12px 22px; border-radius: 99px; background: var(--menu-bg, #1d1d1d); color: #f6f3ec;
  font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-1); text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 16px; }
/* visible focus rings in the highlight colour for links, pills, sliders, menu, language and badge */
a:focus-visible, button:focus-visible, input:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible,
#lang-switch a:focus-visible, #top-right #lang-switch a:focus-visible, .pill:focus-visible, #vry-project:focus-visible, #menu-btn:focus-visible {
  outline: 3px solid var(--hi, #2b6cff) !important; outline-offset: 3px !important; }
main:focus { outline: none; }
#sv-panel a:focus-visible, #sv-panel button:focus-visible, #sv-panel input:focus-visible, #site-foot a:focus-visible { outline-color: var(--sv-knob, var(--plus-color, var(--hi))) !important; }

/* the flag: a small upright tab at the lower left edge in the third colour */
#a11y-flag { position: fixed; left: 0; bottom: clamp(96px, 16vh, 160px); z-index: 250; writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 18px 9px; border: 0; border-radius: 0 12px 12px 0; background: var(--third, #3a9a6a); color: var(--third-ink, #111); cursor: pointer;
  font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 500; font-size: var(--fs-1); letter-spacing: .06em; text-transform: uppercase; }
#a11y-flag { border-radius: 12px 0 0 12px; }
#a11y-panel { position: fixed; left: 56px; bottom: clamp(60px, 10vh, 120px); z-index: 251; width: min(360px, calc(100vw - 72px)); padding: 26px 26px 22px;
  background: var(--menu-bg, #1d1d1d); color: #f6f3ec; border-radius: 22px; box-shadow: 0 14px 40px rgba(0,0,0,.18); font-family: 'Hanken Rund', system-ui, sans-serif; }
#a11y-panel[hidden] { display: none; }
#a11y-panel .a11y-h { margin: 0 44px 16px 0; font-weight: 500; font-size: var(--fs-4); }
#a11y-panel .a11y-tg { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#a11y-panel .pill { color: #f6f3ec !important; background: none; font-size: var(--fs-1); padding-right: 22px !important; gap: 10px; }
#a11y-panel .pill .pa { display: none; }
#a11y-panel .a11y-mark { width: 16px; height: 16px; flex: none; margin-left: 10px; opacity: .35;
  background: linear-gradient(currentColor, currentColor) center / 100% 34% no-repeat, linear-gradient(currentColor, currentColor) center / 34% 100% no-repeat; }
#a11y-panel .pill[aria-pressed="true"] { color: var(--hi, #f6f3ec) !important; }
#a11y-panel .pill[aria-pressed="true"] .a11y-mark { opacity: 1; }
#a11y-panel .a11y-more { display: inline-block; margin-top: 18px; color: inherit; font-size: var(--fs-2); text-decoration: none; position: relative; }
#a11y-panel .a11y-x { position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border: 0; background: none; color: inherit; cursor: pointer; }
#a11y-panel .a11y-x span { position: absolute; left: 0; top: 13px; width: 100%; height: 3px; background: currentColor; }
#a11y-panel .a11y-x span:first-child { transform: rotate(45deg); } #a11y-panel .a11y-x span:last-child { transform: rotate(-45deg); }
body:has(#menu-drawer.open) #a11y-flag, body:has(#sv-panel.open) #a11y-flag { opacity: 0; pointer-events: none; }

/* larger text: the body sizes step up (headlines stay) */
html.a11y-big { --fs-1: clamp(19px, 1.45vw, 21px); --fs-2: clamp(21px, 1.6vw, 23px); --fs-3: clamp(22px, 1.75vw, 25px); --fs-4: clamp(24px, 2vw, 29px); }
/* more contrast: no faded text, full-strength lines */
html.a11y-contrast * { text-shadow: none !important; }
html.a11y-contrast [style*="opacity"], html.a11y-contrast .mf-sub, html.a11y-contrast .md-col a { opacity: 1 !important; }
html.a11y-contrast #sv-panel .sv-sc input[type=range]::-webkit-slider-runnable-track { background: currentColor !important; }
/* less motion: system setting or the switch */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }
html.a11y-calm *, html.a11y-calm *::before, html.a11y-calm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
#a11y-panel .pill[aria-pressed="true"] { color: color-mix(in srgb, var(--third, #45b07a) 75%, #fff) !important; } #a11y-panel .pill[aria-pressed="true"] .a11y-mark { opacity: 1; }
#a11y-panel .a11y-run-plus { display: inline-block; width: .8em; height: .8em; vertical-align: -.05em; background: linear-gradient(currentColor, currentColor) center / 100% 34% no-repeat, linear-gradient(currentColor, currentColor) center / 34% 100% no-repeat; }

/* colourful hover underline: only for the statement link in the accessibility panel (Jen: "aber nur hier") */
#a11y-panel .a11y-more::after { content: ''; position: absolute; left: 0; bottom: -5px; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--block-bg, var(--hi)), var(--hi), var(--third, var(--hi))) !important; transition: width .3s cubic-bezier(0,.8,.2,1); }
#a11y-panel .a11y-more:hover::after, #a11y-panel .a11y-more:focus-visible::after { width: 100%; }
@media (max-width: 820px) { .info-row .pill-look { align-self: flex-start !important; } }

/* project badge hover (2026-11-05): the whole badge scales softly as one unit; the ring keeps its animation (no new duration = no jump),
   the speed-up runs through the Web Animations playback rate in vry.js */
#vry-project { transition: transform .4s ease, opacity .35s ease !important; }
#vry-project:hover { transform: scale(1.06) !important; }
#vry-project:hover .ring { animation-duration: 24s !important; }

/* ── PP Pangaia Medium (2026-11-05, licensed for web): the serif for titles only.
      2026-11-08 to 11-12: the site used fonts/pangaia-vry/ (straightened a, n, m, h); 2026-11-12 Jen: back to the unchanged original fonts/pangaia/PPPangaia-Medium.woff2. pangaia-vry/ stays on disk, loaded nowhere.
      fonts/pangaia/PPPangaia-Medium.woff2 = the purchased file, unchanged. (Its a.001 / n.001 are the same shapes as a / n,
      so there is no straight a or n in this file; asked Pangram.) The Pangaia v and W stay as they are (Jen wants them); ss01 (plain V, W, J) is not switched on.
      Vollkorn stays as fallback in the chain. ── */
/* Titelschrift: nur das a aufgerichtet (a mittel), sonst unverändertes Original (Jen, 2026-11-12). Zurück zum Original: die nächste Zeile durch die auskommentierte ersetzen. */
@font-face { font-family: "PP Pangaia"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/pangaia-vry/PPPangaiavry-Medium-a.woff2") format("woff2"); }
/* Original (Datei fonts/pangaia/PPPangaia-Medium.woff2 aus Web/fonts/pangaia/ dazukopieren): @font-face { font-family: "PP Pangaia"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/pangaia/PPPangaia-Medium.woff2") format("woff2"); } */
:root { --font-serif: "PP Pangaia", "Vollkorn", Georgia, serif; }
.c-statement, .page-title .c-statement, .cl-block .c-statement, .cf-h, .c-h, .cl-block .c-h, .cl-h, .mf-lead, .sd-sec .mf-lead,
.about-facts.sd-statement .mf-lead, .about-grid .sd-statement .mf-lead, .foot-hy .fh-lead, .mf-way h3 {
  font-family: var(--font-serif) !important; font-weight: 500 !important; letter-spacing: -.01em !important; line-height: 1.04 !important; }

/* ── SEI VRY panel (2026-11-05): "Überrasch mich!" more prominent, with a colourful rim that slowly runs around; more air ── */
@property --sv-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes sv-rim { to { --sv-ang: 360deg; } }
#sv-panel .sv-again { font-size: var(--fs-2) !important; padding: 16px calc(34px + var(--pill-gap-add)) 16px 32px !important;
  border: 3px solid transparent !important;
  background: linear-gradient(var(--foot-bg, var(--menu-bg, #1a1a1a)), var(--foot-bg, var(--menu-bg, #1a1a1a))) padding-box,
              conic-gradient(from var(--sv-ang), var(--block-bg, #e0703a), var(--hi, #f0c419), var(--third, #45b07a), var(--block-bg, #e0703a)) border-box !important;
  animation: sv-rim 7s linear infinite; }
#sv-panel .sv-again .arr, #sv-panel .sv-again .pa { font-size: 1.25em; }
@media (prefers-reduced-motion: reduce) { #sv-panel .sv-again { animation: none; } }
html.a11y-calm #sv-panel .sv-again { animation: none !important; }
/* spacing: the top block gets room, the scales breathe, the free-call block stays at the bottom */
#sv-panel .sv-top { margin: 0 0 clamp(64px, 10vh, 96px) !important; }
#sv-panel .sv-ask { margin-top: 0 !important; }
#sv-panel .sv-scales { margin-top: clamp(28px, 4vh, 40px) !important; row-gap: clamp(34px, 5vh, 48px) !important; }
#sv-panel .sv-more { margin-top: clamp(40px, 6vh, 64px) !important; }
#sv-panel .sv-foot { margin-top: auto !important; padding-top: clamp(48px, 7vh, 80px) !important; }
@media (max-width: 760px) {
  #sv-panel .sv-again { font-size: var(--fs-1) !important; padding: 13px calc(26px + var(--pill-gap-add)) 13px 22px !important; }
  #sv-panel .sv-top { margin-bottom: 30px !important; }
  #sv-panel .sv-scales { margin-top: 14px !important; row-gap: 22px !important; }
  #sv-panel .sv-more { margin-top: 26px !important; }
  #sv-panel .sv-foot { padding-top: 28px !important; }
}
#sv-panel .sv-disc { max-width: 22em; text-wrap: balance; }

/* ── 2026-11-05 later: hero pill a little earlier; panel: more air around "Überrasch mich!", filled with the palette colours, the part below calmer ── */
.intro-run .pill.hero-action { animation-delay: 1.9s !important; }
#sv-panel .sv-top { margin: clamp(24px, 4vh, 48px) 0 clamp(80px, 12vh, 120px) !important; }
#sv-panel .sv-again { border: 0 !important; padding: 19px calc(37px + var(--pill-gap-add)) 19px 35px !important; color: #151515 !important; font-weight: 500 !important;
  background: conic-gradient(from var(--sv-ang), var(--block-bg, #e0703a), var(--hi, #f0c419), var(--third, #45b07a), var(--block-bg, #e0703a)) !important;
  background-size: 160% 300% !important; background-position: center !important; }
#sv-panel .sv-again .pa, #sv-panel .sv-again .arr { color: #151515 !important; }
#sv-panel .sv-again .run i { color: #151515 !important; }
/* calmer: question and pole labels one step lighter in weight and size (still readable, no faint grey) */
#sv-panel .sv-ask { font-size: var(--fs-3) !important; font-weight: 400 !important; }
#sv-panel .sv-sc .sv-end { font-weight: 400 !important; letter-spacing: .06em !important; }
@media (max-width: 760px) {
  #sv-panel .sv-top { margin: 6px 0 34px !important; }
  #sv-panel .sv-again { padding: 14px calc(28px + var(--pill-gap-add)) 14px 24px !important; }
}
#sv-panel .sv-top { margin-top: 0 !important; }
#sv-panel .sv-scales { row-gap: clamp(26px, 4vh, 40px) !important; }
#sv-panel .sv-sc .sv-end { color: color-mix(in srgb, currentColor 80%, transparent) !important; }
@media (max-width: 760px) { #sv-panel { padding-top: 48px !important; } }

/* Pangaia tracking (2026-11-05): a touch more air; large sizes +0.01em, smaller titles +0.015em */
:root { --ls-serif: .01em; --ls-serif-s: .015em; }
.c-statement, .page-title .c-statement, .cl-block .c-statement, .cf-h, .c-h, .cl-block .c-h, .cl-h, .mf-lead, .sd-sec .mf-lead,
.about-facts.sd-statement .mf-lead, .about-grid .sd-statement .mf-lead, .foot-hy .fh-lead { letter-spacing: var(--ls-serif) !important; }
.mf-way h3 { letter-spacing: var(--ls-serif-s) !important; }
@media (max-width: 820px) { .c-statement, .cf-h, .c-h, .cl-h, .mf-lead, .foot-hy .fh-lead { letter-spacing: var(--ls-serif-s) !important; } }
/* "Überrasch mich!" fill lighter: the three palette colours lifted towards white */
#sv-panel .sv-again { background: conic-gradient(from var(--sv-ang),
    color-mix(in srgb, var(--block-bg, #e0703a) 62%, #fff), color-mix(in srgb, var(--hi, #f0c419) 62%, #fff),
    color-mix(in srgb, var(--third, #45b07a) 62%, #fff), color-mix(in srgb, var(--block-bg, #e0703a) 62%, #fff)) !important;
  background-size: 160% 300% !important; background-position: center !important; }

/* ── panel fills its height (desktop): X on top, then the blocks spread evenly; scrolls on low windows ── */
@media (min-width: 761px) {
  #sv-panel { justify-content: space-evenly !important; padding-top: 96px !important; padding-bottom: clamp(40px, 6vh, 64px) !important; }
  #sv-panel > .sv-top, #sv-panel > .sv-mid, #sv-panel > .sv-more, #sv-panel > .sv-foot { margin: 0 !important; padding: 0 !important; flex: none; }
  #sv-panel > * + * { margin-top: 40px !important; }
  #sv-panel .sv-mid .sv-scales { margin-top: clamp(24px, 3.5vh, 36px) !important; }
  #sv-panel .sv-mid { opacity: 0; transform: translateX(-24px); transition: opacity .5s ease .22s, transform .6s cubic-bezier(.2,.8,.2,1) .22s; }
  #sv-panel.open .sv-mid { opacity: 1; transform: none; }
}
@media (max-width: 760px) { #sv-panel .sv-mid .sv-ask { margin-top: 0 !important; } }
@media (min-width: 761px) {
  #sv-panel { justify-content: space-between !important; }
  #sv-panel > .sv-top { margin-top: clamp(24px, 12vh, 200px) !important; }
  #sv-panel > .sv-mid, #sv-panel > .sv-more, #sv-panel > .sv-foot { margin-top: 40px !important; }
}
/* the visible line ends where the centre of the plus can go: the plus reaches both ends of the line */
#sv-panel .sv-sc input[type=range]::-webkit-slider-runnable-track { height: 44px !important; margin: 0 !important;
  background: linear-gradient(color-mix(in srgb, currentColor 38%, transparent), color-mix(in srgb, currentColor 38%, transparent)) 22px 50% / calc(100% - 44px) 2px no-repeat !important; }
#sv-panel .sv-sc input[type=range]::-webkit-slider-thumb { margin-top: 0 !important; }
#sv-panel .sv-sc input[type=range]::-moz-range-track { height: 44px !important;
  background: linear-gradient(color-mix(in srgb, currentColor 38%, transparent), color-mix(in srgb, currentColor 38%, transparent)) 22px 50% / calc(100% - 44px) 2px no-repeat !important; }

/* footer "hy!" on the same colourful fill as "Überrasch mich!" (slowly turning, still with less motion) */
.foot-hy .fh-lead .hy-bunt { display: inline-block; padding: 0 .28em .06em; margin-left: -.04em; border-radius: 999px; line-height: 1.1; color: #151515 !important;
  background: conic-gradient(from var(--sv-ang),
    color-mix(in srgb, var(--block-bg, #e0703a) 62%, #fff), color-mix(in srgb, var(--hi, #f0c419) 62%, #fff),
    color-mix(in srgb, var(--third, #45b07a) 62%, #fff), color-mix(in srgb, var(--block-bg, #e0703a) 62%, #fff)) center / 160% 300%;
  animation: sv-rim 7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .foot-hy .fh-lead .hy-bunt { animation: none; } }
html.a11y-calm .foot-hy .fh-lead .hy-bunt { animation: none !important; }

/* ── 2026-11-05 footer round ── */
/* 1. "hy!" on the colourful fill: dark ink (wins over the statement colour) */
#site-foot .fh-lead .hy-bunt, .foot-hy .fh-lead .hy-bunt { color: #151515 !important; -webkit-text-fill-color: #151515; vertical-align: baseline; }
/* 2a. the @ in the mail address: larger and filled with the same colourful gradient */
.fh-mail-row .at, .info-row .js-mail .at, .cf-mail .at { display: inline-block; font-size: 1.3em; line-height: 0; vertical-align: -.06em; margin: 0 .02em;
  background: conic-gradient(from var(--sv-ang),
    color-mix(in srgb, var(--block-bg, #e0703a) 62%, #fff), color-mix(in srgb, var(--hi, #f0c419) 62%, #fff),
    color-mix(in srgb, var(--third, #45b07a) 62%, #fff), color-mix(in srgb, var(--block-bg, #e0703a) 62%, #fff)) center / 200% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; animation: sv-rim 7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .fh-mail-row .at, .info-row .js-mail .at { animation: none; } }
/* 2b. hover underline of every text link in the highlight colour (footer: the highlight if it reads on the dark ground, otherwise the footer accent) */
.fc-list a::after, .fc-bottom a::after, .cf-row a::after, .md-col a::after, .foot-info a::after, .imp-adr a::after, .c-link::after, .info-row a:not(.pill)::after,
body.clean .md-col a::after, body.clean .imp-adr a::after, body.clean main .c-link::after, .cl-block .c-link::after, body.clean main .cl-block .c-link::after, .sum-band .sum-link::after {
  background: var(--hi, currentColor) !important; }
#site-foot a::after, #site-foot .info-row a:not(.pill)::after { background: var(--foot-hi, var(--hi)) !important; }
.contact-full .cf-row a::after { background: var(--hi-on-cf, var(--hi)) !important; }
.fh-mail-row .at, .info-row .js-mail .at, .cf-mail .at { line-height: 1 !important; vertical-align: -.08em !important; background-size: 100% 100% !important; }
/* project badge: ring direction as one switch. reverse = counter-clockwise (letters at the top come towards the eye); normal = clockwise as before */
:root { --ring-dir: reverse; }
#vry-project .ring { animation-direction: var(--ring-dir) !important; }

/* footer "hy!": no fill behind it any more, the colours move inside the letters */
#site-foot .fh-lead .hy-bunt, .foot-hy .fh-lead .hy-bunt { padding: 0 !important; margin: 0 !important; border-radius: 0 !important; display: inline !important;
  background: conic-gradient(from var(--sv-ang),
    color-mix(in srgb, var(--block-bg, #e0703a) 50%, #fff), color-mix(in srgb, var(--hi, #f0c419) 50%, #fff),
    color-mix(in srgb, var(--third, #45b07a) 50%, #fff), color-mix(in srgb, var(--block-bg, #e0703a) 50%, #fff)) center / 100% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important;
  -webkit-box-decoration-break: clone; }

/* ── accessibility flag + panel, new (2026-11-05): small flag, panel slides out from the left at the bottom, options in the slider look ── */
:root { --a11y-w: min(340px, calc(100vw - 48px)); --a11y-tab-h: 36px; --a11y-left: var(--edge, 24px); --a11y-pad: 20px; --a11y-ease: .5s cubic-bezier(.65,0,.2,1); }
/* one shape: closed, the panel is clipped down to the tab's footprint on the bottom edge; open, it grows upward and the tab rides up with its top edge and becomes the heading */
#a11y-flag { position: fixed; left: var(--a11y-left) !important; bottom: var(--a11y-up, 0px) !important; writing-mode: horizontal-tb !important; transform: none !important; z-index: 252;
  height: var(--a11y-tab-h); padding: 0 var(--a11y-pad) !important; font-family: 'Hanken Rund', system-ui, sans-serif; font-weight: 400; font-size: var(--fs-1) !important; letter-spacing: normal !important; text-transform: none !important; line-height: 1; white-space: nowrap;
  background: var(--menu-bg, #1d1d1d) !important; color: #f6f3ec !important; border-radius: 14px 14px 0 0 !important; transition: transform var(--a11y-ease), border-radius var(--a11y-ease), opacity .3s; }
html.a11y-lift #a11y-flag { border-radius: 14px !important; }
html.a11y-open #a11y-flag { transform: translateY(calc(var(--a11y-rise, 0px) * -1)) !important; border-radius: 18px 0 0 0 !important; }
#a11y-flag:focus-visible { outline: 3px solid var(--hi, #f0c419); outline-offset: -5px; }
#a11y-panel { display: block !important; position: fixed; left: var(--a11y-left) !important; bottom: var(--a11y-up, 0px) !important; width: var(--a11y-w) !important; z-index: 251; box-shadow: none !important;
  padding: calc(var(--a11y-tab-h) + 30px) var(--a11y-pad) 24px !important; border-radius: 0 !important; transform: none !important; visibility: hidden;
  clip-path: inset(calc(100% - var(--a11y-tab-h)) calc(100% - var(--a11y-tab-w, 180px)) 0 0 round 14px 14px 0 0); transition: clip-path var(--a11y-ease), visibility 0s linear .5s; }
#a11y-panel.open { visibility: visible; clip-path: inset(0 0 0 0 round 18px 18px 0 0); transition: clip-path var(--a11y-ease), visibility 0s; }
html.a11y-lift #a11y-panel { clip-path: inset(calc(100% - var(--a11y-tab-h)) calc(100% - var(--a11y-tab-w, 180px)) 0 0 round 14px); }
html.a11y-lift #a11y-panel.open { clip-path: inset(0 0 0 0 round 18px); }
/* the content unfolds below the rising title and folds away first on closing */
#a11y-panel .a11y-tg, #a11y-panel .a11y-more, #a11y-panel .a11y-x { opacity: 0; transform: translateY(12px); transition: opacity .18s, transform .18s; }
#a11y-panel.open .a11y-tg, #a11y-panel.open .a11y-more, #a11y-panel.open .a11y-x { opacity: 1; transform: none; transition: opacity .3s .22s, transform .3s .22s; }
#a11y-panel .a11y-x { top: calc((var(--a11y-tab-h) - 28px) / 2); right: 18px; }   /* X auf einer Linie mit dem Titel in der Fahne */
#a11y-panel .a11y-tg { display: flex !important; flex-direction: column; gap: 14px !important; align-items: stretch !important; }
#a11y-panel .a11y-t { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 6px 0; border: 0; background: none; color: inherit; cursor: pointer;
  font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-1); font-weight: 400; letter-spacing: normal; text-transform: none; text-align: left; }
#a11y-panel .a11y-track { position: relative; flex: none; width: 64px; height: 30px; }
#a11y-panel .a11y-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: color-mix(in srgb, currentColor 38%, transparent); }
#a11y-panel .a11y-track i { position: absolute; top: 50%; left: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; transition: left .3s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(currentColor, currentColor) center / 24px 8.2px no-repeat, linear-gradient(currentColor, currentColor) center / 8.2px 24px no-repeat; opacity: .7; }
#a11y-panel .a11y-t[aria-checked="true"] .a11y-track i { left: 100%; opacity: 1;
  background: linear-gradient(var(--plus-color, #f0c419), var(--plus-color, #f0c419)) center / 24px 8.2px no-repeat, linear-gradient(var(--plus-color, #f0c419), var(--plus-color, #f0c419)) center / 8.2px 24px no-repeat; }
#a11y-panel .a11y-more { margin-top: 20px !important; font-size: var(--fs-1) !important; font-weight: 400 !important; display: inline-flex; align-items: baseline; gap: .5em; }
#a11y-panel .a11y-more::before, #a11y-panel .a11y-more::after { content: none !important; }
#a11y-panel .a11y-more .arr { font-weight: 800; }
#a11y-panel .a11y-more-t { position: relative; display: inline-block; }   /* permanent 2px underline, so it reads as a link; the colourful 3px one slides in over it on hover */
#a11y-panel .a11y-more-t::before { content: ''; position: absolute; left: 0; right: 0; bottom: -.14em; height: 2px; background: currentColor; opacity: .6; }
#a11y-panel .a11y-more-t::after { content: ''; position: absolute; left: 0; bottom: calc(-.14em - 1px); height: 3px; width: 0; background: linear-gradient(90deg, var(--block-bg, var(--hi)), var(--hi), var(--third, var(--hi))); transition: width .3s cubic-bezier(0,.8,.2,1); }
#a11y-panel .a11y-more:hover .a11y-more-t::after, #a11y-panel .a11y-more:focus-visible .a11y-more-t::after { width: 100%; }
@media (max-width: 760px) {
  /* bottom sheet across the full width: the tab sits flush left and rises to become its heading */
  :root { --a11y-w: 100vw; --a11y-left: 0px; --a11y-pad: 20px; }
  #a11y-flag { border-radius: 0 14px 0 0 !important; }
  html.a11y-lift #a11y-flag { border-radius: 0 14px 14px 0 !important; }
  html.a11y-open #a11y-flag { border-radius: 22px 0 0 0 !important; }
  #a11y-panel { width: 100vw !important; padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; clip-path: inset(calc(100% - var(--a11y-tab-h)) calc(100% - var(--a11y-tab-w, 180px)) 0 0 round 0 14px 0 0); }
  #a11y-panel.open { clip-path: inset(0 0 0 0 round 22px 22px 0 0); }
}
@media (prefers-reduced-motion: reduce) { #a11y-panel, #a11y-flag, #a11y-panel .a11y-track i, #a11y-panel .a11y-tg, #a11y-panel .a11y-more, #a11y-panel .a11y-x { transition: none !important; } }
/* on state readable on every panel colour: knob in the light panel ink, line full strength */
#a11y-panel .a11y-t[aria-checked="true"] .a11y-track i { background: linear-gradient(currentColor, currentColor) center / 24px 8.2px no-repeat, linear-gradient(currentColor, currentColor) center / 8.2px 24px no-repeat !important; opacity: 1; }
#a11y-panel .a11y-t[aria-checked="true"] .a11y-track::before { background: currentColor; }

/* glass disc behind the logo block while a background pattern runs (EXPERIMENTELL), set by vry.js */
.cl-d.rx-c { position: relative; }
.cl-d.rx-c > .vry-glass { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 18px 50px rgba(0,0,0,.08); }
.cl-d.rx-c > .hd-col { position: relative; z-index: 1; }
@media (prefers-reduced-transparency: reduce) { .cl-d.rx-c > .vry-glass { backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* MEHR KONTRAST: clearly visible on every palette. Text colours and mid-tone grounds are set per element in a11y.js (fix) */
html.a11y-contrast { --paper: #fff !important; --hi-light: #fff !important; --third-light: #fff !important; --pill-bw: 3px; }
html.a11y-contrast body.clean { --bg: #fff; --paper: #fff; --fg: #0a0a0a; background: #fff; color: #0a0a0a; }
html.a11y-contrast #content, html.a11y-contrast #site-bar { background: #fff; }
html.a11y-contrast .hero-pattern, html.a11y-contrast .vry-glass { display: none !important; }
html.a11y-contrast .cl-d.rx-c { background-image: none !important; }
html.a11y-contrast .c-eyebrow, html.a11y-contrast .phase-no, html.a11y-contrast .phase-title small, html.a11y-contrast .phase-body p, html.a11y-contrast .phase-deliv, html.a11y-contrast .c-why p, html.a11y-contrast .work-tags, html.a11y-contrast .fact-label, html.a11y-contrast .clients span, html.a11y-contrast .c-footer, html.a11y-contrast .hero-services, html.a11y-contrast #lang-switch a, html.a11y-contrast .foot-info .sep, html.a11y-contrast .fc-note, html.a11y-contrast #btt.visible, html.a11y-contrast #a11y-panel .a11y-track i, html.a11y-contrast #a11y-panel .a11y-more-t::before { opacity: 1 !important; }
html.a11y-contrast #a11y-panel .a11y-track::before { height: 3px; margin-top: -1.5px; background: currentColor; }
html.a11y-contrast .pill { border-width: 3px !important; }
html.a11y-contrast :focus-visible { outline: 3px solid currentColor !important; outline-offset: 2px; }
html.a11y-contrast main a:not(.pill), html.a11y-contrast #site-foot a:not(.pill), html.a11y-contrast .md-col a, html.a11y-contrast .cf-legal a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .2em; }
html.a11y-contrast body.clean { --hi-ink: #0a0a0a; }
html.a11y-contrast body.clean.hdr-filled #site-bar::after { background: #fff !important; }
html.a11y-contrast body.clean #lang-switch, html.a11y-contrast body.clean.hdr-filled #lang-switch { background: #0a0a0a !important; color: #fff !important; border-color: #0a0a0a !important; }
html.a11y-contrast body.clean #lang-switch a, html.a11y-contrast body.clean.hdr-filled #lang-switch a { color: #fff !important; }
html.a11y-contrast body.clean #lang-switch .ls-knob, html.a11y-contrast body.clean.hdr-filled #lang-switch .ls-knob { background: #fff !important; }
html.a11y-contrast body.clean #lang-switch a.active, html.a11y-contrast body.clean.hdr-filled #lang-switch a.active { color: #0a0a0a !important; }

/* hero block as one unit (2026-11-08): visible gap vry baseline → top of BRAND + DESIGN = gap bottom of BRAND + DESIGN → top of the d in studio.
   The vry box ends on its baseline; the y descender hangs freely into that gap. --lg is the logo size in px, so the sum works at every viewport */
@property --lg { syntax: '<length>'; inherits: true; initial-value: 0px; }
.rx-c .hd-logo { --lg: 1em; }
.rx-c .hd-logo .vry-rand { height: .92em !important; }
.rx-c .hd-logo .vry-rand span { line-height: 0 !important; }   /* tall cuts must not push the shared baseline down */
.rx-c .hd-logo .hd-what { margin-top: calc(1.2473em + .1073 * var(--lg)) !important; }

/* tab and panel: once open, the panel alone paints the top edge, so no step can show where the title meets it */
html.a11y-open #a11y-flag { background: transparent !important; transition: transform var(--a11y-ease), border-radius var(--a11y-ease), opacity .3s, background-color 0s linear .5s; }

/* ── FAQ: built like studiomorf.nl/faq (7 of 12 columns from column 2, one flat list, one answer open at a time); vry fonts, sizes and colours.
   Morf's 1px rules become 3px lines in the mid palette colour, because vry has no hairlines; the plus takes the dark palette colour ── */
.faq-head, .faq-g { padding-left: calc(var(--edge) + (100% - 2 * var(--edge)) / 12) !important; padding-right: var(--edge) !important; }
.faq-head { padding-bottom: clamp(28px, 3vw, 44px); }
.faq-g { padding-top: 0; padding-bottom: clamp(56px, 6vw, 96px); }
.faq-list { display: block; width: calc(700% / 11); border-top: 3px solid var(--band-faq, var(--plus-third, var(--third, var(--hi)))); }
.faq-item { border-bottom: 3px solid var(--band-faq, var(--plus-third, var(--third, var(--hi)))); }
.faq-q { margin: 0; font: inherit; }
.faq-btn { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 18px; width: 100%; padding: 36px 0; font-family: 'Hanken Rund', system-ui, sans-serif; font-size: var(--fs-3); font-weight: 300; letter-spacing: normal; line-height: 1.6; color: inherit; }
.faq-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.faq-btn svg { width: 24px; height: 24px; flex: none; fill: var(--plus-dark, var(--dark, #111)); }
.faq-btn svg rect:first-child { transform-box: fill-box; transform-origin: center; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.faq-btn[aria-expanded="true"] svg rect:first-child { transform: scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s ease, visibility 0s linear .35s; }
.faq-a > div { overflow: hidden; }
.faq-a.open > div { padding-top: 6px; }
.faq-a.open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s ease; }
.faq-a p, .faq-a ul { margin: 0; padding: 0 0 52px; font-size: var(--fs-1); font-weight: 300; line-height: 1.45; max-width: 90%; }
.faq-a ul { display: grid; gap: 8px; }
.faq-a p:not(:last-child) { padding-bottom: 16px; }
html.a11y-contrast .faq-list, html.a11y-contrast .faq-item { --band-faq: #0a0a0a; border-width: 3px; }
@media (max-width: 820px) {
  .faq-head, .faq-g { padding-left: var(--edge) !important; }
  .faq-list { width: 100%; }
  .faq-btn { padding: 36px 0; gap: 20px; }
  .faq-a p, .faq-a ul { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .faq-btn svg rect, .faq-a { transition: none; } }

/* menu: the big page links in Pangaia, the small links stay Hanken Rund (active language bold) */
body.clean #menu-drawer .md-nav a { font-family: var(--font-serif) !important; font-weight: 500 !important; letter-spacing: var(--ls-serif) !important; }

/* ── 5 signs: own colour block at the end of the services page. A = big title, five tiles (live); B = sticky title, large sentences (preview) ── */
.signs-block { background: var(--hi); color: var(--hi-ink, #111); padding: clamp(80px, 10vw, 160px) var(--edge); }
.signs-block .mf-signs { margin: 0; padding: 0; border: 0; }
.signs-block .mf-signs-h { font-family: var(--font-serif) !important; font-weight: 500 !important; letter-spacing: var(--ls-serif) !important; color: inherit; }
.signs-block .mf-no { color: var(--third, var(--hi-ink)); font-family: var(--font-serif); font-weight: 500; }
.signs-block .cta-after-why { margin: clamp(56px, 6vw, 96px) 0 0; }
.signs-block .pill, .signs-block .pill .pt, .signs-block .pill .pa { color: var(--hi-ink, #111) !important; }
.signs-a .mf-signs { display: block; }
.signs-a .mf-signs-h { font-size: var(--fs-9) !important; line-height: 1.05; max-width: 20em; margin: 0 0 clamp(48px, 6vw, 96px); }
.signs-a .mf-signs-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 44px); }
.signs-a .mf-signs-list li { display: flex; flex-direction: column; gap: 14px; }
.signs-a .mf-no { font-size: var(--fs-9); line-height: 1; padding: 0; }
.signs-a .mf-signs-list strong { font-weight: 600; font-size: var(--fs-3); line-height: 1.25; }
.signs-a .mf-signs-list .mf-sub { font-size: var(--fs-1); line-height: 1.5; }
.signs-b .mf-signs { display: grid; grid-template-columns: 4fr 8fr; column-gap: clamp(40px, 6vw, 110px); align-items: start; }
.signs-b .mf-signs-h { font-size: var(--fs-7) !important; line-height: 1.08; position: sticky; top: 130px; }
.signs-b .mf-signs-list { gap: clamp(56px, 7vw, 112px); }
.signs-b .mf-signs-list li { grid-template-columns: 3.2em 1fr; row-gap: 12px; }
.signs-b .mf-no { font-size: var(--fs-4); padding-top: .4em; }
.signs-b .mf-signs-list strong { font-family: var(--font-serif); font-weight: 500; letter-spacing: var(--ls-serif); font-size: clamp(36px, 3.4vw, 48px); line-height: 1.08; }
.signs-b .mf-signs-list .mf-sub { grid-column: 2; font-size: var(--fs-1); line-height: 1.5; }
@media (max-width: 1100px) { .signs-a .mf-signs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .signs-a .mf-signs-list, .signs-b .mf-signs { grid-template-columns: 1fr; }
  .signs-b .mf-signs-h { position: static; margin-bottom: 48px; }
  .signs-a .mf-signs-h { font-size: var(--fs-7) !important; }
  .signs-block .pill { max-width: 100%; white-space: normal; padding-left: 20px !important; padding-right: 20px !important; line-height: 1.25; }
  .signs-block .pill .pt { transform: none; }
  .signs-block .pill .pa-r { position: static; transform: none; margin-left: 10px; }
  .signs-block .pill .pa-l, .signs-block .pill .run { display: none; }
}

/* cursor colour: set per position in vry.js (--cur): the plus colour, or the palette colour that reads best on the ground under it; never red */
body.clean #cursor, body.clean #cursor.on-hl { mix-blend-mode: normal !important; color: var(--cur, var(--plus-color, var(--hi, #111))) !important; }
body.clean #cursor.link, body.clean #cursor.link.on-hl { mix-blend-mode: normal !important; color: var(--cur, var(--hi-comp, var(--hi))) !important; }

/* flag "Barrierefreiheit": flush at the bottom; over the footer it sits flush on its top edge, no gap (variant B, Jen 2026-11-13) */
html.a11y-lift #a11y-flag { border-radius: 14px 14px 0 0 !important; }
@media (max-width: 760px) { html.a11y-lift #a11y-flag { border-radius: 0 14px 0 0 !important; } }
html.a11y-open #a11y-flag { border-radius: 18px 0 0 0 !important; }
@media (max-width: 760px) { html.a11y-open #a11y-flag { border-radius: 22px 0 0 0 !important; } }
/* on the footer the flag takes the footer colour, so it grows out of it */
html.a11y-lift:not(.a11y-open) #a11y-flag { background: var(--a11y-foot-bg, var(--menu-bg, #1d1d1d)) !important; color: var(--a11y-foot-fg, #f6f3ec) !important; }

/* footer "hy!" and the @ of the mail address: three soft palette fields wander through the letters at different speeds, like a lava lamp
   (variant B, Jen 2026-11-13). Colours --hy-a/b/c come from vry.js (block, highlight, third colour; red is left out). */
@property --hx1 { syntax: '<percentage>'; inherits: false; initial-value: 10%; } @property --hy1 { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
@property --hx2 { syntax: '<percentage>'; inherits: false; initial-value: 80%; } @property --hy2 { syntax: '<percentage>'; inherits: false; initial-value: 70%; }
@property --hx3 { syntax: '<percentage>'; inherits: false; initial-value: 50%; } @property --hy3 { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
#site-foot .fh-lead .hy-bunt, .foot-hy .fh-lead .hy-bunt, .fh-mail-row .at, .info-row .js-mail .at, .cf-mail .at {
  background:
    radial-gradient(circle at var(--hx1) var(--hy1), color-mix(in srgb, var(--hy-a, #e0703a) 88%, #fff) 0, transparent 55%),
    radial-gradient(circle at var(--hx2) var(--hy2), color-mix(in srgb, var(--hy-b, #f0c419) 88%, #fff) 0, transparent 55%),
    radial-gradient(circle at var(--hx3) var(--hy3), color-mix(in srgb, var(--hy-c, #45b07a) 88%, #fff) 0, transparent 60%),
    color-mix(in srgb, var(--hy-b, #f0c419) 62%, #fff) !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important;
  animation: hy-l1 6.5s ease-in-out infinite alternate, hy-l2 8.3s ease-in-out infinite alternate, hy-l3 10.7s ease-in-out infinite alternate !important; }
@keyframes hy-l1 { 0% { --hx1: 5%; --hy1: 15%; } 50% { --hx1: 60%; --hy1: 85%; } 100% { --hx1: 95%; --hy1: 30%; } }
@keyframes hy-l2 { 0% { --hx2: 90%; --hy2: 80%; } 50% { --hx2: 25%; --hy2: 20%; } 100% { --hx2: 10%; --hy2: 75%; } }
@keyframes hy-l3 { 0% { --hx3: 50%; --hy3: 100%; } 50% { --hx3: 85%; --hy3: 10%; } 100% { --hx3: 20%; --hy3: 40%; } }
@media (prefers-reduced-motion: reduce) { #site-foot .fh-lead .hy-bunt, .foot-hy .fh-lead .hy-bunt, .fh-mail-row .at, .info-row .js-mail .at, .cf-mail .at { animation: none !important; } }
html.a11y-calm #site-foot .fh-lead .hy-bunt, html.a11y-calm .foot-hy .fh-lead .hy-bunt, html.a11y-calm .fh-mail-row .at, html.a11y-calm .info-row .js-mail .at, html.a11y-calm .cf-mail .at { animation: none !important; }