/* ============================================================
   Jeti - Friseurmeisterin Schalchen
   Editorial one-pager. Native @layer, no frameworks, no build.
   Anchors: Susanne Kaufmann, Aman, The Row, Buly 1803, Le Labo.
   ============================================================ */

@layer reset, tokens, base, layout, components, utilities;

/* ---- Self-hosted fonts (Cormorant Garamond + Inter) ---- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/styles/fonts/cormorant-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/styles/fonts/cormorant-500-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("/styles/fonts/cormorant-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("/styles/fonts/cormorant-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/styles/fonts/inter-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/styles/fonts/inter-400-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/styles/fonts/inter-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/styles/fonts/inter-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/styles/fonts/inter-600-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* =========================================================
   TOKENS — canonical names from docs/glossary.md
   ========================================================= */
@layer tokens {
  :root {
    /* Surfaces */
    --surface-page:        #f7f2ea;
    --surface-card:        #fffdf8;
    --surface-watercolor:  #f1e7d6;
    --surface-inverse:     #1d1815;

    /* Ink */
    --ink-primary:    #1a1614;
    --ink-secondary:  #5e544c;
    --ink-tertiary:   #6e6258;   /* WCAG-AA against --surface-page */
    --ink-on-inverse: #f3ead9;

    /* Brand */
    --brand-gold:        #8a5e2d;   /* AA-compliant on cream; was #a9763c */
    --brand-gold-deep:   #6e4a23;
    --brand-gold-light:  #f0e4d0;
    --brand-gold-hi:     #a9763c;   /* original warm tone, for non-text uses only */
    --brand-lila:        #7e48ad;
    --brand-lila-deep:   #5a2d80;
    --brand-lila-wash:   #efe8f6;

    /* Lines & focus */
    --rule-soft:    #e6dccb;
    --rule-strong:  #d8cab2;
    --focus-ring:   var(--brand-gold);

    /* Type */
    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Type scale */
    --fs-display:  clamp(2.6rem, 1.4rem + 4.8vw, 4.8rem);
    --fs-h2:       clamp(2rem, 1.2rem + 2.6vw, 3.1rem);
    --fs-h3:       clamp(1.35rem, 1.1rem + .9vw, 1.7rem);
    --fs-body-l:   clamp(1.08rem, 1rem + .4vw, 1.28rem);
    --fs-body:     1.0625rem;
    --fs-body-s:   .95rem;
    --fs-eyebrow:  .78rem;

    /* Layout rhythm — unified container + section padding everywhere.
       Each section now gets full top AND bottom padding (no collapsed
       adjacent rule), so the value is sized so totals add up to roughly
       editorial-canon 160–200px gaps between sections. */
    --container:         71rem;
    --container-narrow:  50rem;
    --container-wide:    86rem;
    --gutter:            clamp(1.25rem, 4vw, 2.5rem);
    --section-pad:       clamp(4.75rem, 9vw, 5.5rem);

    /* Restrained radii — no rounded-2xl */
    --r-sm: 3px;
    --r:    6px;

    /* Motion */
    --ease: cubic-bezier(.22,1,.36,1);
    --dur:  .25s;
  }
}

/* =========================================================
   RESET
   ========================================================= */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; }
  html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    color-scheme: light;
    scroll-behavior: smooth;
    scroll-padding-top: 6.5rem;
    background-color: var(--surface-page);
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  img, picture, svg, video { display: block; max-width: 100%; }
  /* Critical: without height:auto, the HTML `height` attribute renders
     literally and breaks responsive layout when CSS sets width:100%. */
  img, video { height: auto; }
  ul, ol { list-style: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  table { border-collapse: collapse; width: 100%; }
  input, textarea, select { font: inherit; color: inherit; }
}

/* =========================================================
   BASE
   ========================================================= */
@layer base {
  body {
    background-color: var(--surface-page);
    background-image: url("/images/textures/paper-tile.webp");
    background-image: image-set(
      url("/images/textures/paper-tile.webp") type("image/webp"),
      url("/images/textures/paper-tile.jpg") type("image/jpeg")
    );
    background-repeat: repeat;
    background-size: 460px;
    color: var(--ink-primary);
    font: 400 var(--fs-body)/1.7 var(--font-body);
    font-feature-settings: "kern", "liga";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  /* The paper texture tiles down the whole page and scrolls with the content. */
  @media print { body { background-image: none; } }
  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
    text-wrap: balance;
    color: var(--ink-primary);
  }
  p { text-wrap: pretty; }
  :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
  }
  ::selection { background: var(--brand-gold-light); color: var(--ink-primary); }
}

/* =========================================================
   LAYOUT — container + section rhythm
   ========================================================= */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--narrow { max-width: var(--container-narrow); }
  .container--wide   { max-width: var(--container-wide); }

  .section { padding-block: var(--section-pad); }

  /* Section heads — single source of truth for eyebrow + h2 + intro */
  .section__head {
    max-width: 44rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
  }
  .section__head--center {
    margin-inline: auto;
    text-align: center;
  }

  .section__eyebrow,
  .eyebrow {
    display: inline-block;
    font: 500 var(--fs-eyebrow)/1 var(--font-body);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--brand-gold);
    margin-bottom: 1.1rem;
  }
  .section__title { font-size: var(--fs-h2); }
  .section__intro {
    margin-top: 1.2rem;
    color: var(--ink-secondary);
    font-size: var(--fs-body-l);
    max-width: 40rem;
  }
  .section__head--center .section__intro { margin-inline: auto; }

  /* Hairline rule used as section separator inside cards / between rows */
  .rule {
    border: 0;
    border-top: 1px solid var(--rule-soft);
    margin: 0;
  }
  .rule--strong { border-top-color: var(--rule-strong); }
  .rule--gold {
    border-top: 1px solid var(--brand-gold);
    max-width: 3rem;
  }
}

/* =========================================================
   COMPONENTS
   ========================================================= */
@layer components {

  /* ---- Utility primitives ---- */
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: absolute; left: 1rem; top: 1rem; z-index: 200;
    transform: translateY(-150%);
    background: var(--ink-primary); color: var(--ink-on-inverse);
    padding: .7rem 1rem; border-radius: var(--r-sm);
    font: 600 .9rem/1 var(--font-body);
    transition: transform .18s var(--ease);
  }
  .skip-link:focus { transform: translateY(0); }

  /* ---- Buttons ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .55rem;
    padding: .95rem 1.7rem;
    border-radius: 0;
    font: 500 .92rem/1 var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  .btn--sm { padding: .65rem 1.15rem; font-size: .78rem; }
  .btn--block { width: 100%; }

  .btn--primary {
    background: var(--ink-primary);
    color: var(--ink-on-inverse);
    border-color: var(--ink-primary);
  }
  .btn--primary:hover { background: var(--brand-gold); border-color: var(--brand-gold); }

  .btn--ghost {
    background: transparent;
    border-color: var(--ink-primary);
    color: var(--ink-primary);
  }
  .btn--ghost:hover {
    background: var(--ink-primary);
    color: var(--ink-on-inverse);
  }

  .btn--light  { background: var(--ink-on-inverse); color: var(--ink-primary); border-color: var(--ink-on-inverse); }
  .btn--light:hover { background: #fff; }

  /* Quiet text link (replaces .btn--ghost where it was used as a "second CTA" pill) */
  .text-link {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--ink-primary);
    font: 500 1rem/1 var(--font-body);
    padding: .4rem 0;
    border-bottom: 1px solid currentColor;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .text-link:hover { color: var(--brand-gold); border-color: var(--brand-gold); }

  /* ====================================================================
     MOTION SYSTEM
     1. Splash logo intro (first visit per session, JS-gated)
     2. Hero entrance — eyebrow / headline / body / CTA / photo staggered
     3. Scroll-driven section reveals (eyebrow → title → intro)
     4. Hero portrait subtle scroll-coupled scale
     5. Gallery + service stagger as they enter the view
     All sit behind @media (prefers-reduced-motion: no-preference).
     ==================================================================== */

  /* --- 1. SPLASH --- */
  .splash {
    position: fixed; inset: 0;
    z-index: 10000;
    display: grid; place-items: center;
    background: var(--surface-inverse);
    isolation: isolate;
  }
  .splash__logo {
    display: block;
    width: clamp(8rem, 22vw, 13rem);
    height: auto;
    opacity: 0;
    transform: scale(.94);
    animation: splash-logo-in 1.9s cubic-bezier(.22,1,.36,1) forwards;
  }
  @keyframes splash-logo-in {
    0%   { opacity: 0; transform: scale(.94); }
    20%  { opacity: 1; transform: scale(1); }
    65%  { opacity: 1; transform: scale(1); }
    100% { opacity: .92; transform: scale(1.06); }
  }
  .splash--leaving {
    opacity: 0;
    transition: opacity .35s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
  }
  /* Avoid blocking interaction even while visible */
  html.is-splashing { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) {
    .splash, .splash__logo { animation: none; }
    .splash { display: none; }
  }

  /* --- 2. HERO ENTRANCE (plays once on load, behind the splash on first visit) --- */
  @media (prefers-reduced-motion: no-preference) {
    .hero__content .eyebrow,
    .hero__content .hero__title,
    .hero__content .hero__text,
    .hero__content .hero__actions {
      opacity: 0;
      transform: translateY(18px);
      animation: hero-rise .95s cubic-bezier(.22,1,.36,1) forwards;
    }
    .hero__content .eyebrow      { animation-delay: 60ms; }
    .hero__content .hero__title  { animation-delay: 180ms; }
    .hero__content .hero__text   { animation-delay: 340ms; }
    .hero__content .hero__actions{ animation-delay: 500ms; }

    .hero__media picture {
      opacity: 0;
      transform: scale(1.05);
      animation: hero-photo-in 1.3s cubic-bezier(.22,1,.36,1) forwards;
      animation-delay: 220ms;
    }
  }
  @keyframes hero-rise {
    to { opacity: 1; transform: none; }
  }
  @keyframes hero-photo-in {
    to { opacity: 1; transform: scale(1); }
  }

  /* --- 3. SCROLL-DRIVEN REVEALS via IntersectionObserver ---
     `.reveal` elements start hidden (opacity 0, translated down). When JS
     adds `.is-in` on entry, they transition to their final state.
     Stagger handled by JS setting --anim-delay on children of [data-stagger]. */
  @media (prefers-reduced-motion: no-preference) {
    html.js .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition:
        opacity .9s cubic-bezier(.22, 1, .36, 1),
        transform .9s cubic-bezier(.22, 1, .36, 1);
      transition-delay: var(--anim-delay, 0ms);
      will-change: opacity, transform;
    }
    html.js .reveal.is-in {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
  }

  /* --- 4. HERO PORTRAIT scroll-coupled gentle zoom-out (parallax-lite) --- */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .hero__media {
        overflow: hidden;
      }
      .hero__media picture img {
        animation: hero-scroll-scale linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }
    }
  }
  @keyframes hero-scroll-scale {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
  }

  /* ============== HEADER + NAV ============== */
  .site-header {
    position: sticky; top: 0; z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: border-color .55s var(--ease), background-color .55s var(--ease), backdrop-filter .55s var(--ease);
  }
  /* Transparent over the hero; solidifies as soon as you scroll (ui.js). */
  .site-header[data-scrolled="true"] {
    background: color-mix(in srgb, var(--surface-page) 90%, transparent);
    backdrop-filter: saturate(1.3) blur(10px);
    border-bottom-color: var(--rule-soft);
  }
  .site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; min-height: 7.5rem;
    transition: min-height .55s var(--ease);
  }
  .site-header[data-scrolled="true"] .site-header__inner { min-height: 5.5rem; }
  .brand {
    display: inline-flex; align-items: center;
    line-height: 1;
    padding: .4rem 0;
  }
  .brand__logo {
    display: block;
    height: 6.5rem;
    width: auto;
    transition: opacity .2s var(--ease), height .55s var(--ease);
  }
  .site-header[data-scrolled="true"] .brand__logo { height: 4.5rem; }
  .brand:hover .brand__logo { opacity: .85; }
  @media (max-width: 30rem) {
    .brand__logo { height: 5rem; }
    .site-header[data-scrolled="true"] .brand__logo { height: 3.75rem; }
  }
  /* Legacy text-brand fallback if image fails (and a11y) */
  .brand__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.65rem;
    color: var(--ink-primary);
    letter-spacing: .01em;
  }
  .brand__tag {
    font: 500 .58rem/1 var(--font-body);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    margin-top: .35rem;
  }

  .nav { display: flex; align-items: center; }
  .nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.9rem); }
  .nav__list a:not(.btn) {
    font: 500 .9rem/1 var(--font-body);
    color: var(--ink-secondary);
    padding: .5rem 0;
    position: relative;
    transition: color .2s var(--ease);
  }
  .nav__list a:not(.btn)::after {
    content: ""; position: absolute;
    left: 0; right: 100%; bottom: -.15rem;
    height: 1px; background: var(--brand-gold);
    transition: right .25s var(--ease);
  }
  .nav__list a:not(.btn):hover { color: var(--ink-primary); }
  .nav__list a:not(.btn):hover::after { right: 0; }

  .nav__toggle {
    display: none;
    width: 2.75rem; height: 2.75rem;
    flex-direction: column; justify-content: center; gap: 5px;
  }
  .nav__toggle span {
    display: block; height: 1.5px; width: 1.4rem;
    margin-inline: auto;
    background: var(--ink-primary);
    transition: transform .25s var(--ease), opacity .2s var(--ease);
  }

  @media (max-width: 60rem) {
    .nav__toggle { display: flex; }
    .nav__list {
      position: absolute; left: 0; right: 0; top: 100%;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--surface-page);
      border-bottom: 1px solid var(--rule-soft);
      padding: .5rem var(--gutter) 1.5rem;
      clip-path: inset(0 0 100% 0);
      transition: clip-path .3s var(--ease);
    }
    .site-header[data-nav="open"] .nav__list { clip-path: inset(0 0 0 0); }
    .site-header[data-nav="open"] .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .site-header[data-nav="open"] .nav__toggle span:nth-child(2) { opacity: 0; }
    .site-header[data-nav="open"] .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    .nav__list li { border-bottom: 1px solid var(--rule-soft); }
    .nav__list li:last-child { border-bottom: 0; }
    .nav__list a:not(.btn) { display: block; padding: 1rem .25rem; }
    .nav__cta-item { padding-top: 1.1rem; }
    .nav__cta-item .btn { width: 100%; }
  }

  /* ============== HERO ============== */
  .hero {
    padding-block: clamp(3rem, 6vw, 5rem) var(--section-pad);
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    z-index: 1;
  }
  /* Oversized brand wordmark as a faint letterpress watermark — bleeds off the
     lower-left so it reads as paper texture, not a second logo. Reuses the
     header logo file, so it costs no extra network request. */
  .hero::before {
    content: "";
    position: absolute;
    left: -10%;
    bottom: -30%;
    width: min(70rem, 112vw);
    aspect-ratio: 1240 / 920;
    background: url("/images/optimized/01-branding/logo-black-480.webp") no-repeat left bottom / contain;
    opacity: .055;
    pointer-events: none;
    z-index: 0;
  }
  .hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }
  .hero__title {
    font-size: var(--fs-display);
    margin-bottom: 1.3rem;
    max-width: 18ch;
  }
  .hero__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--brand-gold);
  }
  .hero__text {
    font-size: var(--fs-body-l);
    color: var(--ink-secondary);
    max-width: 34rem;
  }
  .hero__actions {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 1.2rem 2rem;
    margin-top: 2.2rem;
  }
  .hero__phone {
    font: 500 1rem/1 var(--font-body);
    color: var(--ink-primary);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: .35rem;
    transition: color .2s var(--ease), border-color .2s var(--ease);
  }
  .hero__phone:hover { color: var(--brand-gold); border-color: var(--brand-gold); }

  .hero__media { position: relative; justify-self: center; width: 100%; }
  .hero__media picture { display: block; }
  .hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    aspect-ratio: 4/5;
    border-radius: 0;
    border: 0;
  }

  @media (min-width: 60rem) {
    .hero__inner { grid-template-columns: 1fr .9fr; }
    .hero__media img { max-height: 42rem; }
    /* Desktop: the watermark moves to the right, framing the photo. */
    .hero::before {
      left: auto;
      right: -12%;
      bottom: -20%;
    }
  }

  /* ============== ÜBER MICH ============== */
  /* Deeper-toned sections — alternate the page tone for editorial rhythm.
     The deeper paper rides on a ::before that fades out at the top and bottom
     edges, so the tone shifts are soft pools, not hard seams. Light sections
     (hero, services, FAQ) show the body's base paper. */
  .section--about,
  .section--gallery,
  .section--contact {
    position: relative;
  }
  .section--about::before,
  .section--gallery::before,
  .section--contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--surface-watercolor);
    background-image: url("/images/textures/paper-tile-deep.webp");
    background-image: image-set(
      url("/images/textures/paper-tile-deep.webp") type("image/webp"),
      url("/images/textures/paper-tile-deep.jpg") type("image/jpeg")
    );
    background-repeat: repeat;
    background-size: 460px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7rem, #000 calc(100% - 7rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 7rem, #000 calc(100% - 7rem), transparent 100%);
  }

  /* --- Purple watercolour marks — the Jeti brand accent. Four genuinely
     different shapes (a brush stroke, a dense patch, two streaks), each at
     its own size, angle, side and opacity so they read as scattered rather
     than one repeated stamp. Multiply soaks the watercolour into the paper. */
  .hero::after,
  .section--about::after,
  .section--services::after,
  .section--gallery::after,
  .section--faq::after,
  .section--contact::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background: no-repeat center / contain;
    mix-blend-mode: multiply;
  }
  /* Each mark is clipped to its own section, so a steep angle can't spill. */
  .section--about, .section--services, .section--gallery,
  .section--faq, .section--contact { overflow: hidden; }
  /* Section content is lifted above the decorations (deep texture + mark). */
  .section--about    > .container,
  .section--services > .container,
  .section--gallery  > .container,
  .section--faq      > .container,
  .section--contact  > .container { position: relative; z-index: 1; }

  .hero::after {
    background-image: url("/images/textures/splash-streak1.webp");
    width: 46rem; aspect-ratio: 1100 / 528;
    top: 28%; left: -17rem; opacity: .52; transform: rotate(-6deg);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 55%, transparent 95%);
    mask-image: linear-gradient(to right, #000 0, #000 55%, transparent 95%);
  }
  /* The blob artwork has a hard edge baked into its own alpha, so unlike the
     streaks it can't bleed off-section — the overflow clip would slice it on
     a straight line. Kept flush inside (right: 0) so it reads as a whole mark. */
  /* Below-the-fold section watercolors load only after first paint.
     scripts/ui.js adds .has-watercolor on `load` to start the fetch chain
     after the hero LCP has settled. ~340 KB deferred. */
  .section--about::after {
    width: 28rem; aspect-ratio: 820 / 560;
    top: 9%; right: 0; opacity: .55; transform: scaleX(-1) rotate(18deg);
  }
  .section--services::after {
    width: 36rem; aspect-ratio: 1100 / 733;
    bottom: 16%; left: -13rem; opacity: .5; transform: rotate(-14deg);
  }
  .section--gallery::after {
    width: 42rem; aspect-ratio: 1100 / 545;
    top: 32%; right: -15rem; opacity: .58; transform: scaleX(-1) rotate(8deg);
  }
  .section--faq::after {
    width: 32rem; aspect-ratio: 1100 / 528;
    top: 14%; left: -10rem; opacity: .6; transform: rotate(-32deg);
  }
  .section--contact::after {
    width: 32rem; aspect-ratio: 820 / 560;
    bottom: 10%; right: 0; opacity: .52; transform: rotate(-10deg);
  }
  html.has-watercolor .section--about::after    { background-image: url("/images/textures/splash-blob.webp"); }
  html.has-watercolor .section--services::after { background-image: url("/images/textures/splash-stroke.webp"); }
  html.has-watercolor .section--gallery::after  { background-image: url("/images/textures/splash-streak2.webp"); }
  html.has-watercolor .section--faq::after      { background-image: url("/images/textures/splash-streak1.webp"); }
  html.has-watercolor .section--contact::after  { background-image: url("/images/textures/splash-blob.webp"); }
  @media (max-width: 48rem) {
    .hero::after, .section--about::after, .section--services::after,
    .section--gallery::after, .section--faq::after, .section--contact::after {
      width: 24rem; opacity: .38;
    }
  }
  .about__grid {
    display: grid;
    gap: clamp(2.4rem, 5vw, 4rem);
    align-items: start;
  }
  .about__media {
    display: flex;
    flex-direction: column;
    gap: clamp(1.8rem, 3vw, 2.4rem);
  }
  .about__portrait { display: block; }
  .about__portrait img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 0;
  }
  .about__body p {
    color: var(--ink-secondary);
    margin-top: 1.1rem;
    max-width: 36rem;
  }
  .about__body p:first-of-type {
    margin-top: 1.3rem;
    color: var(--ink-primary);
    font-size: var(--fs-body-l);
  }
  .about__signoff {
    margin-top: 2rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--brand-gold);
  }
  /* Meisterbrief inset — evidence under the third paragraph. Aman discipline:
     one photograph, small, hairline rule, italic caption — not a hero. */
  .about__cert {
    margin: 2.2rem 0 0;
    max-width: 24rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule-soft);
  }
  .about__cert-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-1, 2px);
  }
  .about__cert-cap {
    margin-top: .65rem;
    font: italic 400 .85rem/1.4 var(--font-display);
    color: var(--ink-tertiary);
    letter-spacing: .01em;
  }

  /* Credentials as an editorial roster — NOT 3-up boxed cards */
  .credentials {
    display: grid; gap: 0;
    margin-top: 2.6rem;
    border-top: 1px solid var(--rule-soft);
  }
  .credentials__item {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule-soft);
    align-items: baseline;
  }
  .credentials__label {
    font: 500 var(--fs-eyebrow)/1.4 var(--font-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brand-gold);
  }
  .credentials__value {
    color: var(--ink-primary);
    font-size: 1rem;
  }
  @media (max-width: 40rem) {
    .credentials__item { grid-template-columns: 1fr; gap: .15rem; }
  }

  /* Meisterbrief evidence — small editorial inset in the LEFT column,
     stacked below the portrait so the column heights balance. */
  .about__evidence {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 1.2rem;
    align-items: start;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule-soft);
  }
  .about__evidence picture { position: relative; display: block; }
  .about__evidence img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
  }
  .about__evidence-caption {
    font: italic 500 .94rem/1.5 var(--font-display);
    color: var(--ink-secondary);
  }
  .about__evidence-caption strong {
    display: block;
    font-style: normal;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: .7rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brand-gold);
    margin-bottom: .5rem;
  }

  @media (min-width: 60rem) {
    .about__grid { grid-template-columns: .85fr 1fr; }
  }
  @media (max-width: 40rem) {
    .about__evidence { grid-template-columns: 6rem 1fr; gap: 1rem; }
  }
  /* Phone: text before media, so the hero photo and the About photo don't
     stack image-on-image at the section seam. */
  @media (max-width: 59.99rem) {
    .about__media { order: 2; }
  }

  /* ============== LEISTUNGEN — Buly-1803 ledger feel ============== */
  .section--services { background: transparent; position: relative; }
  /* 6-col internal grid so we can give row-2 items wider spans, eliminating
     the dead 6th cell that would exist with a plain 3-col layout. */
  .services__grid {
    display: grid;
    gap: clamp(2.4rem, 4vw, 3.4rem) clamp(1.6rem, 3vw, 2.6rem);
    grid-template-columns: 1fr;
  }
  @media (min-width: 46rem) and (max-width: 75.99rem) {
    .services__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 76rem) {
    .services__grid { grid-template-columns: repeat(6, 1fr); }
    .service--row1 { grid-column: span 2; }   /* 3 cards across at top */
    .service--row2 { grid-column: span 3; }   /* 2 cards across, wider */
  }

  .service {
    /* No box. No shadow. No hover-lift. Pure typography. */
    background: transparent;
    border: 0;
    padding: 0;
  }
  /* Each category is a collapsible <details> on phones; the first ships open.
     Tablet/desktop force every category open (see the min-width override). */
  .service__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .9rem;
    margin-bottom: .2rem;
    border-bottom: 1px solid var(--ink-primary);
  }
  .service__summary::-webkit-details-marker { display: none; }
  .service__summary::after {
    content: "+";
    font: 300 1.5rem/1 var(--font-body);
    color: var(--brand-gold);
    flex: none;
    transition: transform .25s var(--ease);
  }
  .service[open] > .service__summary::after { transform: rotate(45deg); }
  .service__title {
    font-size: var(--fs-h3);
    color: var(--ink-primary);
  }
  @media (min-width: 46rem) {
    .service__summary { cursor: default; }
    .service__summary::after { display: none; }
    /* Force every category open regardless of the [open] attribute:
       modern browsers gate closed content via ::details-content; older ones
       hide the children directly. Cover both. */
    .service::details-content { content-visibility: visible; }
    .service:not([open]) > .price-list { display: table; }
  }
  .service__lead {
    color: var(--ink-secondary);
    font-style: italic;
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin: .8rem 0 .2rem;
  }

  /* Braut-Paket as a centered editorial feature below the grid,
     not a card crammed into row 2. */
  .service-feature {
    max-width: 38rem;
    margin: clamp(3.5rem, 6vw, 5rem) auto 0;
    padding-block: clamp(2rem, 4vw, 2.8rem);
    text-align: center;
    border-top: 1px solid var(--brand-gold);
    border-bottom: 1px solid var(--brand-gold);
  }
  .service-feature__eyebrow {
    display: inline-block;
    font: 500 var(--fs-eyebrow)/1 var(--font-body);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--brand-gold);
    margin-bottom: 1rem;
  }
  .service-feature__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.4rem);
    color: var(--ink-primary);
    line-height: 1.1;
    margin-bottom: .8rem;
  }
  .service-feature__lead {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem);
    color: var(--ink-secondary);
    margin-bottom: 1.6rem;
  }
  .service-feature__prices {
    width: auto;
    margin: 0 auto;
    font-size: var(--fs-body-s);
  }
  .service-feature__prices thead th {
    font: 500 .68rem/1 var(--font-body);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    padding: .6rem .9rem;
    text-align: center;
    border-bottom: 1px solid var(--rule-soft);
  }
  .service-feature__prices thead th:first-child {
    text-align: left;
  }
  .service-feature__prices tbody th {
    font-weight: 400;
    color: var(--ink-primary);
    text-align: left;
    padding: .8rem .9rem;
  }
  .service-feature__prices tbody td {
    font-variant-numeric: tabular-nums;
    color: var(--ink-primary);
    text-align: center;
    padding: .8rem .9rem;
    white-space: nowrap;
  }
  @media (max-width: 46rem) {
    .service-feature__prices { width: 100%; }
  }

  .price-list { font-size: var(--fs-body-s); }
  .price-list thead th {
    font: 500 .68rem/1 var(--font-body);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    text-align: right;
    padding: .65rem .35rem .55rem;
    border-bottom: 1px solid var(--rule-soft);
  }
  .price-list thead th:first-child { text-align: left; }
  .price-list tbody th {
    font-weight: 400;
    color: var(--ink-primary);
    text-align: left;
    padding: .7rem .35rem;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
  }
  .price-list tbody td {
    font-variant-numeric: tabular-nums;
    color: var(--ink-primary);
    text-align: right;
    padding: .7rem .35rem;
    border-bottom: 1px solid var(--rule-soft);
    white-space: nowrap;
  }
  .price-list tbody tr:last-child th,
  .price-list tbody tr:last-child td { border-bottom: 0; }

  .services__quote {
    max-width: 46rem;
    margin: clamp(3rem, 5vw, 4.5rem) auto 0;
    text-align: center;
    padding-block: 2rem;
    border-top: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
  }
  .services__quote blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem);
    color: var(--ink-primary);
    line-height: 1.45;
  }
  .services__quote figcaption {
    margin-top: 1.2rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--brand-gold);
  }
  .services__fineprint {
    margin-top: 1.8rem;
    text-align: center;
    color: var(--ink-tertiary);
    font-size: .88rem;
  }

  /* ============== FAQ ============== */
  .section--faq { background: transparent; position: relative; }
  .faq {
    max-width: 50rem;
    margin-inline: auto;
    border-top: 1px solid var(--rule-strong);
  }
  .faq__item {
    border-bottom: 1px solid var(--rule-soft);
  }
  .faq__item summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1.2rem;
    padding: 1.4rem 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--ink-primary);
  }
  .faq__item summary::-webkit-details-marker { display: none; }
  .faq__item summary::after {
    content: "+";
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--brand-gold);
    flex: none;
    transition: transform .25s var(--ease);
  }
  .faq__item[open] summary::after { transform: rotate(45deg); }
  .faq__a { padding: 0 0 1.4rem; }
  .faq__a p { color: var(--ink-secondary); max-width: 42rem; }
  .faq__a a {
    color: var(--brand-gold);
    border-bottom: 1px solid currentColor;
  }

  /* ============== GALERIE — row-aligned editorial spread ==============
     Display aspect ratios MATCH each source image's native aspect so no
     subject gets cropped. Sources we use here:
       portraits  = 2:3 (1080×1620)
       landscapes = 3:2 (1620×1080)
       hero       = 3:2 (1620×1080) — shown full width, no extreme crop. */
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);            /* mobile + tablet: 2 per row */
    gap: clamp(.6rem, 1.2vw, 1.1rem);
  }
  .gallery__item {
    position: relative;
    overflow: hidden;
    background: var(--surface-watercolor);
    aspect-ratio: 4 / 3;                              /* uniform editorial frame */
  }
  .gallery__item picture { position: absolute; inset: 0; }
  .gallery__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
  }
  .gallery__item:hover img { transform: scale(1.025); }

  /* Subject-bias for portrait sources cropped into a 4:3 landscape frame —
     keep the gold pillar / mirrors / tulips legible instead of dead-centring. */
  .gallery__item--pillar  img { object-position: 70% 50%; }   /* gold pillar sits right */
  .gallery__item--mirrors img { object-position: 30% 35%; }   /* mirrors anchor left */
  .gallery__item--tulips  img { object-position: 50% 35%; }   /* tulips + shelf upper */

  @media (min-width: 62rem) {
    .gallery { grid-template-columns: repeat(3, 1fr); }       /* desktop: 3 per row */
  }

  /* ============== STIMMEN (Google reviews) ============== */
  .section--reviews { background: transparent; position: relative; }
  .reviews__aggregate {
    display: inline-flex;
    align-items: baseline;
    gap: .85rem;
    margin-top: 1.6rem;
    flex-wrap: wrap;
    justify-content: center;
    color: var(--ink-secondary);
    font-size: 1rem;
  }
  .reviews__score {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.4rem);
    font-weight: 500;
    color: var(--ink-primary);
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
  }
  .reviews__stars {
    color: var(--brand-gold);
    font-size: 1.25rem;
    letter-spacing: .15em;
  }
  .reviews__count {
    color: var(--ink-tertiary);
    font-size: .95rem;
  }
  .reviews__list {
    list-style: none;
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    max-width: 64rem;
    padding: 0;
    display: grid;
    gap: clamp(1.2rem, 2vw, 1.8rem);
    grid-template-columns: 1fr;
  }
  @media (min-width: 50rem) {
    .reviews__list { grid-template-columns: 1fr 1fr; }
  }
  .reviews__card {
    background: var(--surface-card, #fff8ec);
    border: 1px solid var(--rule-soft);
    padding: clamp(1.6rem, 2.5vw, 2.2rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
  }
  .reviews__stars-small {
    color: var(--brand-gold);
    letter-spacing: .14em;
    font-size: 1rem;
    margin: 0;
  }
  .reviews__text {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, .9rem + .35vw, 1.2rem);
    line-height: 1.55;
    color: var(--ink-primary);
    margin: 0;
    font-style: italic;
    font-weight: 400;
  }
  .reviews__meta {
    margin-top: auto;
    padding-top: .8rem;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    align-items: baseline;
    border-top: 1px solid var(--rule-soft);
  }
  .reviews__author {
    font-style: normal;
    font-weight: 500;
    color: var(--ink-primary);
    font-size: 1rem;
  }
  .reviews__when {
    color: var(--ink-tertiary);
    font-size: .88rem;
  }
  .reviews__more {
    text-align: center;
    margin-top: clamp(2rem, 3.5vw, 3rem);
  }
  .reviews__more .link-arrow { margin-top: 0; }

  /* ============== KONTAKT ============== */
  /* Contact info sits on the cream surface as a single row (action +
     address + hours); the storefront photo runs full-bleed below it,
     then the map. */
  .contact__info-row {
    display: grid;
    gap: clamp(2rem, 4vw, 2.75rem);
  }
  @media (min-width: 60rem) {
    .contact__info-row {
      grid-template-columns: 1.3fr 1fr 1fr;
      gap: clamp(2rem, 4vw, 3.5rem);
      align-items: start;
    }
    .contact__info-row .contact__block + .contact__block { border-top: 0; padding-top: 0; }
  }

  /* WhatsApp CTA — WhatsApp's deeper brand green (#008069); white logo +
     label, 4.9:1 contrast (AA), sits better on the warm palette. */
  .btn--whatsapp {
    align-self: flex-start;
    background: #008069;
    color: #fff;
    border-color: #008069;
    font-size: 1rem;
    padding: 1.05rem 1.7rem;
    white-space: nowrap;
  }
  .btn--whatsapp:hover {
    background: #006a57;
    border-color: #006a57;
    color: #fff;
  }
  .btn__icon { width: 1.35em; height: 1.35em; flex: none; }

  /* Even vertical rhythm in the action column (eyebrow / button / phone / mail) */
  .contact__block--action { gap: .9rem; }
  .contact__block--action h3 { margin-bottom: 0; }
  .contact__block--action .contact__line + .contact__line { margin-top: 0; }

  /* Storefront photo — contained to the content width and shown WHOLE at its
     native 16:9 (the source is 1672×941). No full-bleed, no max-height, so
     nothing is cropped and both signs are always fully visible. No
     object-position needed — there is no crop to position. */
  .contact__feature {
    margin-block: clamp(2.5rem, 5vw, 4rem);
    background: var(--surface-watercolor);
  }
  .contact__feature picture { display: block; }
  .contact__feature-img {
    display: block;
    width: 100%;
    height: auto;
  }
  .contact__block { display: flex; flex-direction: column; }
  .contact__block + .contact__block {
    padding-top: 1.8rem;
    border-top: 1px solid var(--rule-soft);
  }
  .contact__block h3 {
    font: 500 var(--fs-eyebrow)/1 var(--font-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brand-gold);
    margin-bottom: 1rem;
  }
  .contact__block address {
    font-style: normal;
    color: var(--ink-primary);
    line-height: 1.8;
    font-size: 1.05rem;
  }
  .contact__line {
    font-size: 1.15rem;
    color: var(--ink-primary);
  }
  .contact__line a {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--ink-primary);
    font-weight: 500;
    transition: color .2s var(--ease);
  }
  .contact__ico {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    color: var(--brand-gold);
    transition: color .2s var(--ease);
  }
  .contact__line a > span {
    border-bottom: 1px solid var(--rule-soft);
    padding-bottom: 2px;
    transition: border-color .2s var(--ease);
  }
  .contact__line a:hover { color: var(--brand-gold); }
  .contact__line a:hover > span { border-color: var(--brand-gold); }
  .contact__line a:hover .contact__ico { color: var(--brand-gold-deep); }
  .contact__line + .contact__line { margin-top: .55rem; }
  .link-arrow {
    display: inline-flex; gap: .5rem;
    margin-top: 1rem;
    color: var(--brand-gold);
    font: 500 .92rem/1 var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--brand-gold);
    padding-bottom: .3rem;
    align-self: flex-start;
  }
  .link-arrow:hover { color: var(--brand-gold-deep); border-color: var(--brand-gold-deep); }

  .hours {
    width: auto;
    max-width: 18rem;
  }
  .hours th, .hours td {
    padding: .42rem 0;
    color: var(--ink-primary);
    font-size: 1rem;
  }
  .hours th { text-align: left; font-weight: 400; }
  .hours td {
    text-align: right;
    color: var(--ink-secondary);
    font-variant-numeric: tabular-nums;
    padding-left: 2rem;
  }
  .contact__note {
    margin-top: .9rem;
    color: var(--ink-tertiary);
    font-size: .9rem;
    font-style: italic;
  }


  /* Map — restrained placeholder, real address shown.
     IMPORTANT: width must be explicit otherwise aspect-ratio + a height
     constraint causes the browser to size the width DOWN from the height,
     leaving the map narrower than the container. */
  .map {
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    width: 100%;
    aspect-ratio: 21/9;
    background: var(--surface-watercolor);
    border: 1px solid var(--rule-soft);
    overflow: hidden;
    position: relative;
  }
  @media (max-width: 46rem) {
    .map { aspect-ratio: 4/3; }
  }
  .map__placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1.1rem;
    padding: 1.5rem;
    text-align: center;
  }
  .map__pin {
    width: 2.6rem; height: 2.6rem;
    color: var(--brand-gold);
  }
  .map__address {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--ink-primary);
  }
  .map__notice {
    color: var(--ink-tertiary);
    font-size: .82rem;
    max-width: 30rem;
    margin-top: .4rem;
  }
  .map__notice a { color: var(--brand-gold); border-bottom: 1px solid currentColor; }
  .map iframe { width: 100%; height: 100%; border: 0; display: block; }
  .map[data-map-state="on"] .map__placeholder { display: none; }

  /* ============== FOOTER ============== */
  .footer {
    background: var(--surface-inverse);
    color: var(--ink-on-inverse);
    padding-top: clamp(3.5rem, 6vw, 5rem);
  }
  .footer .brand__name,
  .footer__brand .brand__name { color: var(--ink-on-inverse); }
  .footer__grid {
    display: grid; gap: 2.5rem;
  }
  @media (min-width: 48rem) {
    .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }
  }
  .footer__logo-link {
    display: inline-block;
    margin-bottom: 1.1rem;
    transition: opacity .2s var(--ease);
  }
  .footer__logo-link:hover { opacity: .85; }
  .footer__logo {
    display: block;
    height: 5.4rem;
    width: auto;
  }
  @media (max-width: 48rem) {
    .footer__logo { height: 4.4rem; }
  }
  /* Legacy text fallback */
  .brand__name--footer {
    font-size: 1.8rem;
    display: block;
    margin-bottom: .8rem;
  }
  .footer__brand p {
    color: color-mix(in srgb, var(--ink-on-inverse) 75%, transparent);
    font-size: .95rem;
    margin-top: .4rem;
  }
  .footer__brand a:not(.footer__logo-link) {
    color: var(--ink-on-inverse);
    border-bottom: 1px solid color-mix(in srgb, var(--ink-on-inverse) 30%, transparent);
    padding-bottom: 1px;
  }
  .footer__brand a:not(.footer__logo-link):hover {
    border-bottom-color: var(--brand-gold);
    color: var(--brand-gold);
  }
  .footer__nav h3 {
    font: 500 var(--fs-eyebrow)/1 var(--font-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brand-gold-light); /* lighter gold for AA contrast on dark footer */
    margin-bottom: 1.1rem;
  }
  .footer__nav li { margin-bottom: .65rem; }
  .footer__nav a,
  .linkbtn {
    color: color-mix(in srgb, var(--ink-on-inverse) 75%, transparent);
    font-size: .95rem;
    transition: color .2s var(--ease);
  }
  .footer__nav a:hover,
  .linkbtn:hover { color: var(--ink-on-inverse); }
  .linkbtn { padding: 0; font: inherit; }
  .footer__base {
    margin-top: clamp(3rem, 5vw, 4rem);
    border-top: 1px solid color-mix(in srgb, var(--ink-on-inverse) 15%, transparent);
    padding-block: 1.6rem;
  }
  .footer__base p {
    /* 65% gives ≥4.5:1 on the dark footer (WCAG 1.4.3); 55% was 4.30:1. */
    color: color-mix(in srgb, var(--ink-on-inverse) 65%, transparent);
    font-size: .85rem;
  }

  /* ============== LIGHTBOX ============== */
  /* The JS wraps each clickable picture in a real <button> so list / figure
     semantics stay intact. Two variants: gallery (absolute, fills its LI)
     and about__evidence (block, fits inside the figure's first column). */
  .gallery__item-btn {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    padding: 0; margin: 0;
    background: transparent;
    border: 0;
    cursor: zoom-in;
    color: inherit;
  }
  .gallery__item-btn picture { position: absolute; inset: 0; }
  .gallery__item-btn:focus-visible {
    outline: 3px solid var(--brand-gold);
    outline-offset: -3px;
  }

  .about__evidence-btn {
    display: block;
    padding: 0; margin: 0;
    background: transparent;
    border: 0;
    cursor: zoom-in;
    color: inherit;
  }
  .about__evidence-btn:focus-visible {
    outline: 3px solid var(--brand-gold);
    outline-offset: 3px;
  }
  .about__evidence-btn:hover picture { opacity: .9; }
  .about__evidence-btn picture { transition: opacity .2s var(--ease); }

  body.body--lightbox-open { overflow: hidden; }

  .lightbox {
    position: fixed; inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: #14110e; /* fully opaque so no page content shows through */
    opacity: 0;
    transition: opacity .25s var(--ease);
  }
  .lightbox[hidden] { display: none; }
  .lightbox--open { opacity: 1; }

  .lightbox__stage {
    display: flex; flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 100%;
    max-height: 100%;
  }
  .lightbox__img {
    display: block;
    max-width: min(94vw, 1400px);
    max-height: 82vh;
    width: auto; height: auto;
    object-fit: contain;
    background: var(--surface-page);
    user-select: none;
    -webkit-user-drag: none;
  }
  /* Caption hidden visually but kept in DOM for screen readers + as aria-label
     target on the dialog. Per client direction: no visible image descriptions. */
  .lightbox__caption {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }

  /* Controls */
  .lightbox__close,
  .lightbox__nav {
    position: absolute;
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.2rem; height: 3.2rem;
    color: var(--ink-on-inverse);
    background: rgb(0 0 0 / .35);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .2s var(--ease), transform .2s var(--ease);
  }
  .lightbox__close:hover,
  .lightbox__nav:hover {
    background: rgb(255 255 255 / .18);
  }
  .lightbox__close:focus-visible,
  .lightbox__nav:focus-visible {
    outline: 2px solid var(--ink-on-inverse);
    outline-offset: 3px;
  }
  .lightbox__close svg,
  .lightbox__nav svg { width: 1.4rem; height: 1.4rem; }

  .lightbox__close {
    top: clamp(.8rem, 2vw, 1.4rem);
    right: clamp(.8rem, 2vw, 1.4rem);
  }
  .lightbox__nav--prev { left:  clamp(.8rem, 2vw, 1.6rem); }
  .lightbox__nav--next { right: clamp(.8rem, 2vw, 1.6rem); }

  .lightbox__counter {
    position: absolute;
    bottom: clamp(.8rem, 2vw, 1.4rem);
    color: var(--ink-on-inverse);
    opacity: .75;
    font: 500 .82rem/1 var(--font-body);
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  /* Mobile: stack nav controls at the BOTTOM (easier thumb reach),
     bigger tap targets, hide caption to reclaim space */
  @media (max-width: 46rem) {
    .lightbox__img { max-height: 70vh; }
    .lightbox__nav {
      top: auto;
      bottom: 3.6rem;
      width: 3rem; height: 3rem;
    }
    .lightbox__nav--prev { left:  18%; }
    .lightbox__nav--next { right: 18%; }
    .lightbox__counter { bottom: .9rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lightbox { transition: opacity .1s linear; }
  }

  /* ============== COOKIE CONSENT ============== */
  .consent {
    position: fixed; inset: auto 0 0 0;
    z-index: 150;
    padding: clamp(1rem, 3vw, 1.6rem);
    pointer-events: none;
  }
  .consent[hidden] { display: none; }
  .consent__panel {
    pointer-events: auto;
    width: 100%; max-width: 30rem;
    margin-inline: auto;
    background: var(--surface-card);
    border: 1px solid var(--rule-soft);
    padding: clamp(1.3rem, 3vw, 1.7rem);
    transform: translateY(130%); opacity: 0;
    transition: transform .4s var(--ease), opacity .3s var(--ease);
  }
  .consent--open .consent__panel { transform: none; opacity: 1; }
  @media (min-width: 48rem) {
    .consent__panel { margin-right: 0; }
  }
  .consent__title {
    font-size: 1.3rem;
    color: var(--ink-primary);
    margin-bottom: .7rem;
  }
  .consent__body {
    font-size: .92rem;
    color: var(--ink-secondary);
    margin-bottom: 1.2rem;
  }
  .consent__body a { color: var(--brand-gold); border-bottom: 1px solid currentColor; }
  .consent__actions { display: grid; gap: .55rem; }
  @media (min-width: 28rem) { .consent__actions { grid-template-columns: repeat(3, 1fr); } }
  .btn--consent {
    border: 1px solid var(--ink-primary);
    border-radius: 0;
    padding: .65rem .8rem;
    color: var(--ink-primary);
    font: 500 .78rem/1.2 var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    background: transparent;
    transition: background-color .2s var(--ease), color .2s var(--ease);
  }
  .btn--consent:hover { background: var(--ink-primary); color: var(--ink-on-inverse); }
  .consent__layer[hidden] { display: none; }
  .consent__settings-head {
    display: flex; flex-direction: column; gap: .5rem;
    margin-bottom: 1.2rem;
  }
  .consent__back {
    align-self: flex-start;
    color: var(--ink-secondary);
    font: 500 .78rem/1 var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .consent__back:hover { color: var(--brand-gold); }
  .consent__category {
    display: block;
    padding-block: 1rem;
    border-top: 1px solid var(--rule-soft);
  }
  .consent__category-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    margin-bottom: .3rem;
  }
  .consent__category-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink-primary);
  }
  .consent__category-status {
    font-size: .8rem;
    font-style: italic;
    color: var(--ink-tertiary);
  }
  .consent__category-desc {
    display: block;
    font-size: .85rem;
    color: var(--ink-secondary);
  }
  .consent__category input[type=checkbox] {
    appearance: none;
    width: 2.4rem; height: 1.35rem;
    border-radius: 999px;
    background: var(--surface-watercolor);
    /* --ink-tertiary border gives ≥3:1 against surface-card (WCAG 1.4.11). */
    border: 1.5px solid var(--ink-tertiary);
    position: relative; cursor: pointer; flex: none;
    transition: background-color .2s var(--ease), border-color .2s var(--ease);
  }
  .consent__category input[type=checkbox]::after {
    content: ""; position: absolute;
    top: 1px; left: 1px;
    width: 1rem; height: 1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / .15);
    transition: transform .2s var(--ease);
  }
  .consent__category input[type=checkbox]:checked {
    background: var(--ink-primary); border-color: var(--ink-primary);
  }
  .consent__category input[type=checkbox]:checked::after { transform: translateX(1.05rem); }
  .consent__actions--save { margin-top: 1.2rem; grid-template-columns: 1fr; }
  .consent__actions--save .btn--consent {
    background: var(--ink-primary); color: var(--ink-on-inverse);
  }
  .consent__actions--save .btn--consent:hover {
    background: var(--brand-gold); border-color: var(--brand-gold);
  }
  @media (prefers-reduced-motion: reduce) {
    .consent__panel { transform: none; transition: opacity .2s; }
  }

  /* ============== LEGAL PAGES (Impressum + Datenschutz) ============== */
  .page--legal .site-header { background: var(--surface-page); }
  .legal-page { padding-block: clamp(5rem, 9vw, 7rem); }
  .legal {
    max-width: 50rem;
    margin-inline: auto;
    display: flex; flex-direction: column;
    gap: 1.6rem;
  }
  .legal__header {
    border-bottom: 1px solid var(--rule-soft);
    padding-bottom: 1.6rem;
    margin-bottom: 1rem;
  }
  .legal__title {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    margin-top: .7rem;
  }
  .legal__intro {
    color: var(--ink-secondary);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    margin-top: .7rem;
  }
  .legal__section { display: flex; flex-direction: column; gap: .9rem; }
  .legal__section h2 { font-size: 1.5rem; }
  .legal__section h3 { font-size: 1.15rem; margin-top: .6rem; }
  .legal__section p,
  .legal__list { color: var(--ink-secondary); max-width: 46rem; }
  .legal__section a {
    color: var(--brand-gold);
    border-bottom: 1px solid currentColor;
  }
  .legal__list { padding-left: 1.4rem; list-style: disc; display: flex; flex-direction: column; gap: .35rem; }
  .legal__address { font-style: normal; color: var(--ink-primary); }
  .legal__inline-btn {
    color: var(--brand-gold);
    border-bottom: 1px solid currentColor;
    padding: 0;
    font: inherit;
    background: transparent;
  }
  .legal__stand { color: var(--ink-tertiary); font-size: .9rem; margin-top: 1.5rem; }
  .legal__back { margin-top: 1.5rem; }
  .legal__back a {
    color: var(--brand-gold);
    font-weight: 500;
    border-bottom: 1px solid currentColor;
  }

  /* ============== 404 ============== */
  .section--notfound {
    max-width: 38rem;
    margin: 0 auto;
    padding: clamp(5rem, 12vw, 9rem) var(--gutter);
    text-align: center;
  }
  .section--notfound h1 {
    font-size: clamp(2.2rem, 1.4rem + 3vw, 3.5rem);
    margin-bottom: 1.2rem;
  }
  .section--notfound p {
    color: var(--ink-secondary);
    margin-bottom: 1.2rem;
  }
  .section--notfound a {
    color: var(--brand-gold);
    border-bottom: 1px solid currentColor;
    font-weight: 500;
  }
}

/* =========================================================
   UTILITIES
   ========================================================= */
@layer utilities {
  .text-center  { text-align: center; }
  .mt-0  { margin-top: 0 !important; }
  [hidden] { display: none !important; }
}