/* tokens.css */
/* tokens.css — design tokens (D1). No external resources. */
/* Class prefix `zt-`, BEM-light. No hex values outside this file. */

:root {
  /* 1.1 Color */
  --bg: #111214;
  --bg-deep: #0a0b0c;
  --surface-1: #17191c;
  --surface-2: #1e2124;
  --surface-3: #262a2e;
  --studio: #26272b;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .15);
  --text: #ecebe7;
  --text-2: #a6acb1;
  --text-3: #767d83;
  --accent: #d6342b;
  --accent-hover: #e8483e;
  --accent-deep: #9e211a;
  --accent-soft: rgba(214, 52, 43, .14);
  --accent-glow: rgba(214, 52, 43, .38);
  /* Second accent (amber, from the test banner): orientation, labels, numbers, active states.
     Red stays for actions (buttons, cart). */
  --accent-2: #e3b04b;
  --accent-2-hover: #efc266;
  --accent-2-soft: rgba(227, 176, 75, .12);
  --accent-2-line: rgba(227, 176, 75, .38);
  --ok: #7fae72;
  --ok-soft: rgba(127, 174, 114, .14);
  --ok-line: rgba(127, 174, 114, .38);
  --warn: #dcaa45;
  --warn-soft: rgba(220, 170, 69, .14);
  --warn-line: rgba(220, 170, 69, .38);
  --glass: rgba(20, 21, 24, .66);
  --glass-strong: rgba(14, 15, 17, .86);
  --overlay-backdrop: rgba(0, 0, 0, 0.8);

  /* 1.2 Typography */
  --font-display: "Encode Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-display: clamp(3rem, 1.6rem + 6vw, 6.5rem);
  --fs-h1: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.3vw, 3.4rem);
  --fs-h3: clamp(1.35rem, 1.18rem + .7vw, 1.75rem);
  --fs-lead: clamp(1.075rem, 1rem + .4vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-s: .9375rem;
  --fs-xs: .8125rem;
  --fs-label: .72rem;
  --lh-display: .92;
  --lh-head: 1.02;
  --lh-body: 1.65;
  --tracking-display: -.012em;
  --tracking-label: .16em;
  --measure: 64ch;

  /* 1.3 Spacing & layout */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --gutter: clamp(1rem, .6rem + 2.2vw, 2.5rem);
  --container: 1240px;
  --container-narrow: 760px;
  --header-h: 64px;

  /* 1.4 Radii */
  /* Revision 3 (Felix): a bit softer again, between V2 and R2. */
  --r-xs: 6px;
  --r-s: 10px;
  --r-btn: 12px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* 1.5 Shadows & surfaces */
  /* Revision 3: visible, soft, layered elevation (Felix wants shadows on elements). */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 2px 6px rgba(0, 0, 0, .28), 0 14px 34px -14px rgba(0, 0, 0, .75);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 6px 16px rgba(0, 0, 0, .3), 0 34px 70px -24px rgba(0, 0, 0, .9);
  --shadow-btn: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 6px 14px -6px rgba(0, 0, 0, .7);
  --shadow-accent: 0 10px 30px -10px var(--accent-glow);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .07);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* 1.6 Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --d-1: 160ms;
  --d-2: 280ms;
  --d-3: 520ms;
  --d-4: 900ms;

  /* 1.7 Focus & layers */
  --z-base: 1;
  --z-header: 30;
  --z-overlay: 40;
  --z-consent: 60;
  --z-grain: 80;

  /* 1.8 Legacy tokens (older site stylesheets such as checkout.css; the admin CSS no longer uses them) */

  /* Surfaces */
  --grund: var(--bg);
  --grund-tief: var(--bg-deep);
  --flaeche: var(--surface-1);
  --flaeche-2: var(--surface-2);

  /* Lines */
  --linie: var(--line);
  --linie-hell: var(--line-strong);

  /* Accent */
  --rot: var(--accent);
  --rot-hell: var(--accent-hover);
  --rot-tief: var(--accent-deep);
  --rot-leise: var(--accent-soft);
  --muted: var(--text-2);

  /* Typography families */
  --schrift-head: var(--font-display);
  --schrift-text: var(--font-text);
  --schrift-mono: var(--font-mono);
  --mono: var(--font-mono);

  /* Type scale (legacy fixed sizes) */
  --fs-m: 1rem;
  --fs-l: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.125rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: var(--fs-h1);

  /* Line heights */
  --lh-tight: var(--lh-head);
  --lh-eng: 1.35;
  --lh-weit: var(--lh-body);

  /* Label */
  --ls-label: var(--tracking-label);
  --spur: var(--tracking-label);

  /* Geometry */
  --radius: var(--r-s);
  --schatten: var(--shadow-2);
  --inhalt: var(--container);
  --gap: var(--s-5);
  --grid-gap: var(--s-5);
  --pad-x: var(--gutter);

  /* Motion */
  --t-schnell: var(--d-1);
  --t-normal: var(--d-2);
}

/* base.css */
/* base.css — font faces, reset, typography, grain, layout, reveal, transitions (D1). */

/* Fonts are self-hosted under /assets/fonts (no Google Fonts, no CDN). */
@font-face {
  font-family: "Encode Condensed";
  src: url("../fonts/encode-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Encode Condensed";
  src: url("../fonts/encode-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 85% -10%, rgba(214, 52, 43, .07), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(255, 255, 255, .025), transparent 60%);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  background-image: var(--noise);
  opacity: .035;
}

/* Headings */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin-block: 0 var(--s-4);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.2rem; }

p {
  max-width: var(--measure);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

/* Inline links within prose */
a { color: inherit; }
.zt-prose a:not(.zt-btn),
.zt-content a:not(.zt-btn),
.zt-editorial p a:not(.zt-btn),
.zt-product__notice a,
.zt-form__hint a {
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: .22em;
  text-decoration-thickness: 1.5px;
  transition: color var(--d-2) var(--ease-out), text-decoration-color var(--d-2) var(--ease-out);
}
.zt-prose a:not(.zt-btn):hover,
.zt-content a:not(.zt-btn):hover,
.zt-editorial p a:not(.zt-btn):hover,
.zt-product__notice a:hover,
.zt-form__hint a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}

::selection { background: var(--accent); color: #fff; }

/* Skip link */
.zt-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: calc(var(--z-consent) + 1);
  transform: translateY(-120%);
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-s);
}
.zt-skip-link:not(:focus) { opacity: 0; pointer-events: none; } /* stays hidden on iOS overscroll */
.zt-skip-link:focus { transform: translateY(0); opacity: 1; }

/* Layout helpers */
.zt-container {
  width: min(calc(100% - 2 * var(--gutter)), var(--container));
  margin-inline: auto;
}
.zt-container--narrow {
  width: min(calc(100% - 2 * var(--gutter)), var(--container-narrow));
}

.zt-main { display: block; }

/* Sections */
.zt-section {
  padding-block: var(--section-y) calc(var(--section-y) * 1.08);
}
.zt-section--tight { padding-block: calc(var(--section-y) * .55); }

/* Form base */
input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}

/* Scroll-reveal (CSS only, no JS) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal]:not([data-reveal="stagger"]) {
      animation: zt-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    [data-reveal="stagger"] > * {
      animation: zt-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    [data-reveal="stagger"] > *:nth-child(2) { animation-range: entry 6% entry 66%; }
    [data-reveal="stagger"] > *:nth-child(3) { animation-range: entry 12% entry 72%; }
    [data-reveal="stagger"] > *:nth-child(4) { animation-range: entry 18% entry 78%; }
    [data-reveal="stagger"] > *:nth-child(n+5) { animation-range: entry 22% entry 82%; }
  }
}

/* Uses the individual translate/scale properties (not transform), so hover
   transforms on revealed cards keep working after the entry animation. */
@keyframes zt-reveal {
  from {
    opacity: 0;
    translate: 0 28px;
    scale: .985;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: none;
  }
}

/* Revision 3 (Felix: more transitions/animations) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* Reading progress: thin amber-to-red bar on top of the viewport. */
    .zt-body::before {
      content: "";
      position: fixed;
      inset: 0 0 auto 0;
      height: 2px;
      z-index: calc(var(--z-header) + 1);
      background: linear-gradient(90deg, var(--accent-2), var(--accent));
      transform-origin: 0 50%;
      scale: 0 1;
      pointer-events: none;
      animation: zt-progress linear both;
      animation-timeline: scroll(root);
    }
    /* The header island gains depth once the page scrolls. */
    .zt-header__inner {
      animation: zt-header-lift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 180px;
    }
  }
  @supports (animation-timeline: view()) {
    /* Cards on every page ease in while scrolling, no markup hooks needed. */
    .zt-product-grid > *, .zt-cards-3 > *, .zt-cards-4 > *, .zt-grid > *,
    .zt-channels > *, .zt-contact-card, .zt-contact-form, .zt-cart-line,
    .zt-facts, .zt-related, .zt-faq__item, .zt-blog-card, .zt-frame-card {
      animation: zt-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
  /* Page heads and product panels rise in on load. */
  .zt-page-head, .zt-editorial__head, .zt-contact-head, .zt-shop__head,
  .zt-product__media, .zt-product__body, .zt-error {
    animation: zt-rise-in .8s var(--ease-out) both;
  }
  .zt-product__body { animation-delay: .12s; }
}
@keyframes zt-progress { to { scale: 1 1; } }
@keyframes zt-header-lift { to { box-shadow: var(--shadow-2), 0 0 0 1px var(--line-strong); } }
@keyframes zt-rise-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

/* View transitions */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: var(--d-2) var(--ease-in-out) both zt-fade-out;
}
::view-transition-new(root) {
  animation: var(--d-3) var(--ease-out) both zt-fade-in;
}

@keyframes zt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes zt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* components.css */
/* components.css — UI components per DESIGN-V2 section 3. BEM-light, `zt-`. D2. */

/* ============================================================================
   3.1 Buttons
   ========================================================================== */
.zt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.1;
  cursor: pointer;
  color: var(--text);
  background: var(--surface-3);
  transition: transform var(--d-2) var(--ease-out),
    background-color var(--d-2) var(--ease-out),
    border-color var(--d-2) var(--ease-out),
    box-shadow var(--d-2) var(--ease-out),
    color var(--d-2) var(--ease-out);
}
.zt-btn:active { transform: scale(0.98); }
.zt-btn:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}

.zt-btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--highlight), var(--shadow-accent);
}
.zt-btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.zt-btn--outline {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.zt-btn--outline:hover {
  background: var(--surface-2);
  border-color: rgba(255, 255, 255, 0.28);
}

.zt-btn--ghost {
  background: transparent;
  color: var(--text);
  padding-inline: 0.25rem;
}
.zt-btn--ghost:hover { color: var(--accent-hover); }

.zt-btn--glass {
  background: var(--glass);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.zt-btn--glass:hover { background: rgba(255, 255, 255, 0.12); }

.zt-btn--block { width: 100%; }
.zt-btn--small {
  min-height: 38px;
  padding: 0 1rem;
  font-size: 0.95rem;
}

.zt-btn__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: calc(var(--r-btn) - 3px);
  margin-right: -0.6rem;
  background: var(--surface-3);
  transition: transform var(--d-2) var(--ease-spring);
}
.zt-btn__icon svg { width: 14px; height: 14px; }
.zt-btn--primary .zt-btn__icon { background: rgba(0, 0, 0, 0.18); }
.zt-btn:hover .zt-btn__icon { transform: translateX(3px); }

.zt-btn:disabled,
.zt-btn[aria-disabled="true"],
.zt-btn[disabled],
.zt-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================================
   3.2 Label / Eyebrow
   ========================================================================== */
.zt-eyebrow,
.zt-label,
.zt-page-head__label {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-2);
  margin-bottom: var(--s-5);
}
.zt-eyebrow::before,
.zt-label::before,
.zt-page-head__label::before {
  content: "";
  width: 32px;
  height: 1px;
  flex: none;
  background: var(--accent-2);
}
/* Home sections are numbered: "01 ——— LEISTUNGEN" (number + hairline in amber). */
.zt-main { counter-reset: zt-sec; }
.zt-section__head .zt-eyebrow,
.zt-split__text .zt-eyebrow,
.zt-reasons__head .zt-eyebrow,
.zt-cta .zt-eyebrow { counter-increment: zt-sec; }
.zt-section__head .zt-eyebrow::before,
.zt-split__text .zt-eyebrow::before,
.zt-reasons__head .zt-eyebrow::before,
.zt-cta .zt-eyebrow::before {
  content: counter(zt-sec, decimal-leading-zero);
  width: auto;
  height: auto;
  padding-right: 44px;
  color: var(--accent-2);
  background: linear-gradient(var(--accent-2-line), var(--accent-2-line)) right center / 32px 1px no-repeat;
}
.zt-eyebrow--glass { color: rgba(236, 235, 231, .82); }

/* ============================================================================
   3.3 Header (floating island)
   ========================================================================== */
.zt-header {
  position: sticky;
  top: 0.75rem;
  z-index: var(--z-header);
  padding-inline: var(--gutter);
  margin-top: 0.75rem;
  view-transition-name: zt-header;
}
.zt-header__inner {
  width: min(100%, var(--container));
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border-radius: var(--r-l);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  position: relative;
  isolation: isolate;
}
/* Glass lives on a pseudo-element: backdrop-filter on the island itself would
   become the containing block of the fixed mobile menu overlay. */
.zt-header__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--glass-strong);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.zt-header__brand {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  color: var(--text);
  text-decoration: none;
  line-height: 1;
}
.zt-header__brand:hover { color: var(--text); }
.zt-header__brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.zt-header__brand-claim {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
@media (max-width: 399px) {
  .zt-header__brand-claim { display: none; }
}

/* Cart icon */
.zt-header__cart {
  order: 3;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: var(--r-btn);
  background: var(--surface-3);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--d-2) var(--ease-out),
    color var(--d-2) var(--ease-out);
}
.zt-header__cart { width: 44px; padding: 0; justify-content: center; flex-shrink: 0; }
.zt-header__cart-icon { display: grid; place-items: center; }
/* Narrow screens: keep brand, menu and cart on one line. */
@media (max-width: 640px) {
  .zt-header__inner { gap: .5rem; padding-left: 1rem; }
  .zt-header__brand { min-width: 0; }
  .zt-header__brand-name { font-size: .98rem; line-height: 1.02; max-width: 11ch; }
  .zt-header__brand-claim { display: none; }
}
@media (max-width: 400px) { .zt-nav__toggle-label { display: none; } .zt-nav__toggle { grid-template-columns: 18px; } }
.zt-header__cart:hover { color: var(--text); background: var(--surface-2); }
.zt-header__cart:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}
.zt-header__cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
}

/* Nav base */
.zt-nav { order: 2; margin-left: auto; }
.zt-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Toggle (mobile only) */
.zt-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--surface-3);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: background-color var(--d-2) var(--ease-out),
    color var(--d-2) var(--ease-out);
}
.zt-nav__toggle:hover { background: var(--surface-2); }
.zt-nav__toggle:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}
.zt-nav__toggle-label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); }
.zt-nav__toggle-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--d-3) var(--ease-spring);
}
.zt-nav__toggle { display: inline-grid; grid-template-columns: 18px auto; grid-template-rows: 1.5px 1.5px; column-gap: .6rem; row-gap: 5px; align-content: center; }
.zt-nav__toggle-bar { grid-column: 1; }
.zt-nav__toggle-label { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.zt-nav__toggle[aria-expanded="true"] .zt-nav__toggle-bar:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.zt-nav__toggle[aria-expanded="true"] .zt-nav__toggle-bar + .zt-nav__toggle-bar {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* Desktop nav */
@media (min-width: 960px) {
  .zt-nav__toggle { display: none; }
  .zt-nav__list {
    display: flex;
    align-items: center;
    gap: 0.15rem;
  }
  .zt-nav__item { position: relative; }
  .zt-nav__link {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 0.55rem 0.95rem;
    border-radius: var(--r-s);
    color: var(--text-2);
    font-size: 0.95rem;
    text-decoration: none;
    transition: color var(--d-2) var(--ease-out),
      background-color var(--d-2) var(--ease-out);
  }
  .zt-nav__link:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
  }
  .zt-nav__link:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: 3px;
  }
  .zt-nav__item.is-active > .zt-nav__link,
  .zt-nav__link[aria-current="page"] {
    color: var(--accent-2);
    background: var(--accent-2-soft);
    box-shadow: inset 0 0 0 1px var(--accent-2-line);
  }

  /* Sublist dropdown */
  .zt-nav__sublist {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    border-radius: var(--r-m);
    background: var(--glass-strong);
    border: 1px solid var(--line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity var(--d-2) var(--ease-out),
      transform var(--d-2) var(--ease-out),
      visibility 0s linear var(--d-2);
  }
  .zt-nav__item:hover > .zt-nav__sublist,
  .zt-nav__item:focus-within > .zt-nav__sublist {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s;
  }
  .zt-nav__sublink {
    display: block;
    padding: 0.55rem 0.9rem;
    border-radius: var(--r-s);
    color: var(--text-2);
    font-size: 0.95rem;
    text-decoration: none;
    transition: color var(--d-2) var(--ease-out),
      background-color var(--d-2) var(--ease-out);
  }
  .zt-nav__sublink:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
  }
  .zt-nav__subitem.is-active > .zt-nav__sublink,
  .zt-nav__sublink[aria-current="page"] { color: var(--text); }
}

/* Mobile full-screen menu */
@media (max-width: 959px) {
  .zt-header .zt-nav__list {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    justify-content: center;
    gap: 0.25rem;
    padding: calc(var(--header-h) + 3rem) var(--gutter) 3rem;
    background: radial-gradient(700px 420px at 100% 0%, var(--accent-soft), transparent 70%), rgba(10, 11, 12, .97);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--d-3) var(--ease-out),
      visibility 0s linear var(--d-3);
  }
  .zt-header .zt-nav__list.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .zt-header .zt-nav__item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--d-3) var(--ease-out),
      transform var(--d-3) var(--ease-out);
  }
  .zt-header .zt-nav__list.is-open .zt-nav__item {
    opacity: 1;
    transform: none;
  }
  .zt-header .zt-nav__list.is-open .zt-nav__item:nth-child(1) { transition-delay: 80ms; }
  .zt-header .zt-nav__list.is-open .zt-nav__item:nth-child(2) { transition-delay: 120ms; }
  .zt-header .zt-nav__list.is-open .zt-nav__item:nth-child(3) { transition-delay: 160ms; }
  .zt-header .zt-nav__list.is-open .zt-nav__item:nth-child(4) { transition-delay: 200ms; }
  .zt-header .zt-nav__list.is-open .zt-nav__item:nth-child(5) { transition-delay: 240ms; }
  .zt-header .zt-nav__list.is-open .zt-nav__item:nth-child(6) { transition-delay: 280ms; }
  .zt-header .zt-nav__list.is-open .zt-nav__item:nth-child(7) { transition-delay: 320ms; }
  .zt-header .zt-nav__list.is-open .zt-nav__item:nth-child(8) { transition-delay: 360ms; }
  .zt-header .zt-nav__item:nth-child(n+9) { transition-delay: 400ms; }

  .zt-header .zt-nav__link {
    display: inline-block;
    padding: 0.3rem 0;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 8vw, 2.75rem);
    line-height: 1.05;
    text-decoration: none;
    transition: color var(--d-2) var(--ease-out);
  }
  .zt-header .zt-nav__link:hover { color: var(--accent-hover); }
  .zt-header .zt-nav__link:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: 3px;
  }

  .zt-header .zt-nav__sublist {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    list-style: none;
    margin: 0.25rem 0 0.5rem;
    padding: 0;
  }
  .zt-header .zt-nav__sublink {
    display: inline-block;
    color: var(--text-2);
    font-size: var(--fs-s);
    text-decoration: none;
    transition: color var(--d-2) var(--ease-out);
  }
  .zt-header .zt-nav__sublink:hover { color: var(--text); }

  .zt-header .zt-nav__toggle {
    position: relative;
    z-index: calc(var(--z-overlay) + 1);
  }
}
body.zt-nav-open { overflow: hidden; }

/* ============================================================================
   3.4 Banner (test operation)
   ========================================================================== */
.zt-banner {
  text-align: center;
}
.zt-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: fit-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 0.75rem auto 0;
  padding: 0.45rem 1rem;
  border-radius: var(--r-s);
  background: var(--warn-soft);
  border: 1px solid rgba(220, 170, 69, 0.3);
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.zt-banner__text { margin: 0; }
.zt-banner__link {
  color: var(--warn);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.zt-banner__link:hover { color: var(--text); }

/* ============================================================================
   3.5 Cards
   ========================================================================== */
.zt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 0.5rem;
  box-shadow: var(--shadow-1);
  transition: transform var(--d-3) var(--ease-out),
    border-color var(--d-2) var(--ease-out),
    box-shadow var(--d-3) var(--ease-out);
}
.zt-card:has(a):hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}
.zt-card:has(a):hover .zt-card__media img { transform: scale(1.04); }

.zt-card__media {
  display: block;
  border-radius: var(--r-m);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: radial-gradient(120% 90% at 50% 20%, #34363b, var(--studio) 55%, #1b1c1f);
}
.zt-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-4) var(--ease-out);
}
.zt-card__media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-3);
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 14px);
}

.zt-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 0.75rem 0.75rem;
  flex: 1;
}
.zt-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.1;
}
.zt-card__title-link {
  color: var(--text);
  text-decoration: none;
}
.zt-card__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.zt-card__title-link:focus-visible { outline: none; }
.zt-card:has(.zt-card__title-link):focus-within {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}
.zt-card__text {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-s);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zt-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.zt-card__meta-item + .zt-card__meta-item::before {
  content: "\00b7";
  margin-right: 0.6rem;
  color: var(--text-3);
}
.zt-card__price {
  margin: auto 0 0;
  padding-top: 0.5rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.zt-card__badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}
.zt-card__more { margin: auto 0 0; }
.zt-card__more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text);
  text-decoration: none;
  transition: color var(--d-2) var(--ease-out);
}
.zt-card__more-link:hover { color: var(--accent-hover); }
.zt-card__more-link:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}

/* Variants */
.zt-blog-card .zt-card__media { aspect-ratio: 16 / 10; }
.zt-blog-card .zt-card__media-placeholder { aspect-ratio: 16 / 10; }

/* ============================================================================
   3.6 Badges
   ========================================================================== */
.zt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.zt-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--text);
}
.zt-badge--ok {
  background: var(--ok-soft);
  border-color: rgba(127, 174, 114, 0.35);
  color: var(--ok);
}
.zt-badge--ok::before { background: var(--ok); }
.zt-badge--warn {
  background: var(--warn-soft);
  border-color: rgba(220, 170, 69, 0.35);
  color: var(--warn);
}
.zt-badge--warn::before { background: var(--warn); }
.zt-badge--muted { color: var(--text-2); }
.zt-badge--muted::before { background: var(--text-2); }
.zt-badge--accent {
  background: var(--accent-soft);
  border-color: rgba(214, 52, 43, 0.4);
  color: var(--accent-hover);
}
.zt-badge--accent::before { background: var(--accent); }
.zt-badge--rot {
  background: var(--accent-soft);
  border-color: rgba(214, 52, 43, 0.4);
  color: var(--accent-hover);
}
.zt-badge--rot::before { background: var(--accent); }

/* ============================================================================
   3.7 Forms
   ========================================================================== */
.zt-form {
  display: grid;
  gap: var(--s-5);
}
.zt-form__field {
  display: grid;
  gap: 0.45rem;
}
.zt-form__label {
  font-size: var(--fs-s);
  font-weight: 500;
  color: var(--text);
}
.zt-form__hint {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin: 0;
}
.zt-form__error {
  font-size: var(--fs-s);
  color: var(--accent-hover);
  margin: 0;
}

.zt-form__input,
.zt-form input:not([type="checkbox"]):not([type="radio"]),
.zt-form select,
.zt-form textarea,
select.zt-form__input,
textarea.zt-form__input {
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 1rem;
  border-radius: var(--r-s);
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--text);
  transition: border-color var(--d-2) var(--ease-out),
    box-shadow var(--d-2) var(--ease-out),
    background-color var(--d-2) var(--ease-out);
}
.zt-form__input:hover,
.zt-form input:not([type="checkbox"]):not([type="radio"]):hover,
.zt-form select:hover,
.zt-form textarea:hover { border-color: var(--line-strong); }
.zt-form__input:focus,
.zt-form input:not([type="checkbox"]):not([type="radio"]):focus,
.zt-form select:focus,
.zt-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  background: var(--surface-2);
}
.zt-form textarea,
textarea.zt-form__input {
  min-height: 160px;
  resize: vertical;
}
.zt-form select,
select.zt-form__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23767d83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.zt-form input[type="checkbox"],
.zt-form input[type="radio"] {
  accent-color: var(--accent);
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}
.zt-form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-s);
  color: var(--text-2);
}
.zt-form__field--check { display: flex; }

.zt-form__input[aria-invalid="true"],
.zt-form input[aria-invalid="true"],
.zt-form select[aria-invalid="true"],
.zt-form textarea[aria-invalid="true"] {
  border-color: var(--accent);
}

.zt-form-errors,
.zt-notice--error {
  border: 1px solid rgba(214, 52, 43, 0.35);
  border-radius: var(--r-m);
  background: var(--accent-soft);
  padding: 1rem 1.25rem;
  font-size: var(--fs-s);
  color: var(--text);
}
.zt-form-success,
.zt-notice--ok {
  border: 1px solid rgba(127, 174, 114, 0.35);
  border-radius: var(--r-m);
  background: var(--ok-soft);
  padding: 1rem 1.25rem;
  font-size: var(--fs-s);
  color: var(--text);
}

.zt-form__notice,
.zt-notice,
.zt-note {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-1);
  padding: 1rem 1.25rem;
  font-size: var(--fs-s);
  color: var(--text);
}

.zt-form__honeypot {
  position: absolute !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.zt-form__fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-1);
  padding: 1rem 1.25rem;
  margin: 0;
}
.zt-form__fieldset legend {
  padding: 0 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-2);
}

/* ============================================================================
   3.8 Breadcrumbs
   ========================================================================== */
.zt-breadcrumb { margin-bottom: var(--s-5); }
.zt-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.zt-breadcrumb__item { display: inline-flex; align-items: center; }
.zt-breadcrumb__item + .zt-breadcrumb__item::before {
  content: "/";
  margin-right: 0.45rem;
  color: var(--line-strong);
}
.zt-breadcrumb__link { color: var(--text-2); text-decoration: none; transition: color var(--d-2) var(--ease-out); }
.zt-breadcrumb__link:hover { color: var(--text); }
.zt-breadcrumb__link:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
.zt-breadcrumb__current { color: var(--text); }

/* ============================================================================
   3.9 Filter bar
   ========================================================================== */
.zt-filter {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 0.75rem;
  box-shadow: var(--shadow-1);
}
.zt-filter__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  align-items: end;
}
.zt-filter__group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.zt-filter__group label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-2);
}
.zt-filter input[type="search"],
.zt-filter select {
  min-height: 44px;
  border-radius: var(--r-s);
}
.zt-filter__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media (min-width: 640px) {
  .zt-filter__row {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
  .zt-filter__group--grow { grid-column: span 2; }
}

/* ============================================================================
   3.10 Pagination
   ========================================================================== */
.zt-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.zt-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.6rem;
  border-radius: var(--r-s);
  background: var(--surface-1);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--d-2) var(--ease-out),
    border-color var(--d-2) var(--ease-out),
    color var(--d-2) var(--ease-out);
}
.zt-pagination__item:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}
.zt-pagination__item:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}
.zt-pagination__item[aria-current="page"],
.zt-pagination__item.is-active {
  background: var(--text);
  color: var(--bg);
}

/* ============================================================================
   3.11 Gallery
   ========================================================================== */
.zt-gallery { display: flex; flex-direction: column; }
.zt-gallery__main {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: radial-gradient(120% 90% at 50% 20%, #34363b, var(--studio) 55%, #1b1c1f);
  border: 1px solid var(--line);
}
.zt-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zt-gallery__thumbs {
  display: flex;
  gap: 0.6rem;
  margin: 0.75rem 0 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
}
.zt-gallery__thumb {
  flex: none;
  width: 84px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: var(--r-s);
  overflow: hidden;
  opacity: 0.6;
  cursor: pointer;
  scroll-snap-align: start;
  transition: opacity var(--d-2) var(--ease-out),
    outline-color var(--d-2) var(--ease-out);
}
.zt-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zt-gallery__thumb:hover { opacity: 1; }
.zt-gallery__thumb:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
  opacity: 1;
}
.zt-gallery__thumb.is-active,
.zt-gallery__thumb[aria-current],
.zt-gallery__thumb[aria-pressed="true"] {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================================
   3.12 Facts
   ========================================================================== */
.zt-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface-1);
  overflow: hidden;
}
.zt-facts__item {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
}
.zt-facts__item + .zt-facts__item { border-top: 1px solid var(--line); }
.zt-facts__key {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-3);
}
.zt-facts__value { color: var(--text); }

/* ============================================================================
   3.13 Consent
   ========================================================================== */
.zt-consent {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  right: var(--gutter);
  max-width: 440px;
  z-index: var(--z-consent);
  border-radius: var(--r-l);
  background: var(--glass-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2);
  padding: 1.25rem;
  animation: zt-consent-in var(--d-3) var(--ease-out);
}
@keyframes zt-consent-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.zt-consent[hidden] { display: none; }
.zt-consent__inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.zt-consent__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
}
.zt-consent__text {
  margin: 0;
  font-size: var(--fs-s);
  color: var(--text-2);
}
.zt-consent__link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
}
.zt-consent__link:hover { color: var(--accent-hover); }
.zt-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ============================================================================
   3.14 Footer
   ========================================================================== */
.zt-footer {
  margin-top: var(--s-8);
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-top: var(--s-9);
  overflow: hidden;
  position: relative;
}
.zt-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 960px) {
  .zt-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--s-7);
  }
}
.zt-footer__brand-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.zt-footer__brand-claim {
  margin: 0;
  color: var(--text-2);
  max-width: 36ch;
}
.zt-footer__heading {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-2);
}
.zt-footer__heading::before {
  content: "";
  width: 20px;
  height: 1px;
  flex: none;
  background: var(--accent-2);
}
.zt-footer__contact .zt-footer__heading:not(:first-child) { margin-top: 1.75rem; }
.zt-footer__address { font-style: normal; color: var(--text-2); }
.zt-footer__address-line { display: block; margin: 0 0 0.25rem; }
.zt-footer__hours { margin: 0 0 1rem; color: var(--text-2); }

.zt-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.zt-footer__link {
  display: inline-block;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--d-2) var(--ease-out),
    transform var(--d-2) var(--ease-out);
}
.zt-footer__link:hover {
  color: var(--text);
  transform: translateX(2px);
}
.zt-footer__link:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}

.zt-footer__legal, .zt-footer__notice { max-width: none; }
.zt-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: var(--s-8) 0 0;
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.zt-footer__notice {
  margin: var(--s-5) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.zt-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3rem, 10.6vw, 12.5rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09);
  text-align: center;
  white-space: nowrap;
  margin: var(--s-6) 0 -0.12em;
  user-select: none;
  max-width: none;
}

/* Footer nav (menu=footer): vertical deck, no pills, no toggle */
.zt-footer .zt-nav { margin-left: 0; }
.zt-footer .zt-nav__toggle { display: none; }
.zt-footer .zt-nav__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  position: static;
  inset: auto;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.zt-footer .zt-nav__item {
  opacity: 1;
  transform: none;
}
.zt-footer .zt-nav__link {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--fs-s);
  color: var(--text-2);
  text-decoration: none;
  padding: 0;
  display: inline-block;
  transition: color var(--d-2) var(--ease-out),
    transform var(--d-2) var(--ease-out);
}
.zt-footer .zt-nav__link:hover {
  color: var(--text);
  background: none;
  transform: translateX(2px);
}
.zt-footer .zt-nav__link::after { content: none; }
/* The header's active pill has no padding here; in the footer the current page is marked by colour only. */
.zt-footer .zt-nav__item.is-active > .zt-nav__link,
.zt-footer .zt-nav__link[aria-current="page"] {
  color: var(--accent-2);
  background: none;
  box-shadow: none;
}
.zt-footer .zt-nav__sublist {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.25rem 0 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  border-radius: 0;
}
.zt-footer .zt-nav__sublink {
  color: var(--text-3);
  font-size: var(--fs-xs);
  padding: 0;
}
.zt-footer .zt-nav__sublink:hover { color: var(--text); background: none; }

/* ============================================================================
   3.15 Misc
   ========================================================================== */
.zt-actions,
.zt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--s-6);
}
.zt-summary__actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.zt-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.zt-hint::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--text-3);
}

.zt-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-l);
  text-align: center;
  padding: var(--s-8) var(--s-5);
  color: var(--text-2);
}

.zt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.zt-list > li {
  position: relative;
  padding-left: 1.25rem;
}
.zt-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 10px;
  height: 1.5px;
  background: var(--accent-2);
}

.zt-grid,
.zt-cards-4,
.zt-product-grid,
.zt-post-grid,
.zt-frame-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.zt-cards-3 {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.zt-grid > *,
.zt-cards-3 > *,
.zt-cards-4 > *,
.zt-product-grid > *,
.zt-post-grid > *,
.zt-frame-grid > * { min-width: 0; }

.zt-figure {
  border-radius: var(--r-l);
  overflow: hidden;
}
.zt-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.zt-figure figcaption {
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.zt-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--r-btn);
  background: var(--surface-3);
}
.zt-qty button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: background-color var(--d-2) var(--ease-out),
    color var(--d-2) var(--ease-out);
}
.zt-qty button:hover { background: var(--surface-3); color: var(--accent-hover); }
.zt-qty button:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}
.zt-qty input {
  width: 3rem;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.zt-qty input:focus { outline: none; }
input.zt-cart-qty-input { width: 3.5rem; text-align: center; }

/* ============================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .zt-btn,
  .zt-btn__icon,
  .zt-nav__toggle-bar,
  .zt-nav__sublist,
  .zt-nav__link,
  .zt-nav__sublink,
  .zt-nav__item,
  .zt-nav__list,
  .zt-card,
  .zt-card__media img,
  .zt-card__more-link,
  .zt-card__title-link,
  .zt-breadcrumb__link,
  .zt-pagination__item,
  .zt-gallery__thumb,
  .zt-footer__link,
  .zt-footer .zt-nav__link,
  .zt-footer .zt-nav__sublink,
  .zt-qty button,
  .zt-consent,
  .zt-header__cart,
  .zt-nav__toggle {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Review fixes (phase 7 gate) */
.zt-eyebrow, .zt-label, .zt-page-head__label { align-self: flex-start; width: fit-content; }
/* Breadcrumbs rendered outside a container (editorial views) align with the grid. */
/* Any breadcrumb that is not already inside a container aligns with the grid. */
.zt-main .zt-breadcrumb:not(.zt-container .zt-breadcrumb) {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  padding-top: var(--s-4);
}
/* Filter in the narrow shop sidebar: one column. */
.zt-shop__aside .zt-filter__row { grid-template-columns: minmax(0, 1fr); }
.zt-shop__aside .zt-filter__group--grow { grid-column: auto; }
.zt-shop__aside .zt-filter__actions { flex-wrap: wrap; }
.zt-shop__aside .zt-filter__actions .zt-btn { flex: 1 1 auto; justify-content: center; }
.zt-filter .zt-form__input, .zt-filter select, .zt-filter input { width: 100%; min-width: 0; }
.zt-gallery__thumbs img, .zt-gallery__thumb img { border-radius: var(--r-m); }

/* Revision 2: active menu entry in the overlay menu (mobile) */
.zt-header .zt-nav__item.is-active > .zt-nav__link,
.zt-header .zt-nav__link[aria-current="page"] { color: var(--accent-2); }

/* Revision 3: depth and micro-interactions */
.zt-btn { position: relative; isolation: isolate; }
.zt-btn--primary { overflow: hidden; } /* clip only the shine sweep; other buttons keep their icon */
.zt-btn--ghost .zt-btn__icon { margin-right: 0; }
.zt-btn--outline, .zt-btn--glass { box-shadow: var(--shadow-btn); }
.zt-btn--outline:hover, .zt-btn--glass:hover { box-shadow: var(--shadow-1); }
/* Light sweep across the primary button on hover. */
.zt-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  translate: -120% 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .zt-btn--primary::after { transition: translate .8s var(--ease-out); }
  .zt-btn--primary:hover::after { translate: 120% 0; }
  .zt-nav__link, .zt-header__cart { transition: color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-spring); }
  .zt-header__cart:hover { transform: translateY(-1px); }
  .zt-header__cart-count { animation: zt-pop .45s var(--ease-spring) both; }
}
@keyframes zt-pop { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } }
.zt-card, .zt-filter, .zt-facts, .zt-banner__inner { box-shadow: var(--shadow-1); }


/* Review fix: status badges sit on top of card images and must not swallow clicks. */
.zt-card .zt-badge { pointer-events: none; }

/* consent.css */
/* consent.css — two-level consent banner (level 1 + collapsible level 2). */
/* Tokens only, no hex values. Base card framing comes from components.css. */

.zt-consent {
  background: var(--surface-1);
  max-height: calc(100dvh - 2 * var(--gutter));
  overflow-y: auto;
}

.zt-consent__title {
  margin: 0 0 var(--s-3);
}

.zt-consent__text {
  font-size: var(--fs-s);
  color: var(--text);
  margin: 0 0 var(--s-4);
}

.zt-consent__link {
  color: var(--accent);
  text-decoration: underline;
}

/* Level 1 actions: accept (primary) / necessary / settings in a row. */
.zt-consent__actions {
  display: flex;
  gap: var(--s-2);
}

.zt-consent__actions .zt-btn--outline {
  flex: 1 1 0;
}

/* Level 2 settings panel (hidden by default, toggled by consent.js). */
.zt-consent__settings {
  margin-top: var(--s-4);
}

.zt-consent__options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
}

.zt-consent__option {
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: var(--s-3) var(--s-4);
}

.zt-consent__option-label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  color: var(--text);
}

.zt-consent__option-text {
  color: var(--text-2);
  font-size: var(--fs-s);
  line-height: var(--lh-body);
}

.zt-consent__option-text strong {
  color: var(--text);
  font-weight: 500;
}

/* Switch-styled checkboxes (native checkbox, visually a switch). */
.zt-consent__box {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.zt-consent__switch {
  position: relative;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 1.375rem;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  transition: background-color 200ms var(--ease-in-out), border-color 200ms var(--ease-in-out);
}

.zt-consent__switch::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--text-3);
  transition: transform 200ms var(--ease-in-out), background-color 200ms var(--ease-in-out);
}

.zt-consent__box:checked + .zt-consent__switch {
  background: var(--accent-soft);
  border-color: var(--accent-2-line);
}

.zt-consent__box:checked + .zt-consent__switch::after {
  transform: translateX(1rem);
  background: var(--accent-2);
}

.zt-consent__box:focus-visible + .zt-consent__switch {
  outline: 2px solid var(--accent-2);
  outline-offset: var(--s-1);
}

.zt-consent__box:disabled + .zt-consent__switch {
  cursor: not-allowed;
  opacity: 0.7;
}

.zt-consent__box:disabled + .zt-consent__switch::after {
  background: var(--text-2);
}

/* Native details/summary facts list. */
.zt-consent__details {
  margin-top: var(--s-3);
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}

.zt-consent__details summary {
  cursor: pointer;
  color: var(--text-2);
  font-size: var(--fs-xs);
  color: var(--accent);
  user-select: none;
}

.zt-consent__details summary:hover {
  color: var(--accent-hover);
}

.zt-consent__details summary:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: var(--s-1);
}

.zt-consent__facts {
  margin: var(--s-3) 0 0;
  padding-left: var(--s-5);
  color: var(--text-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.zt-consent__facts li + li {
  margin-top: var(--s-2);
}

.zt-consent__facts code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* Reduce motion: disable the switch transition. */
@media (prefers-reduced-motion: reduce) {
  .zt-consent__switch,
  .zt-consent__switch::after {
    transition: none;
  }
}

/* Desktop: floating card bottom-left, max 440px. */
@media (min-width: 48rem) {
  .zt-consent {
    position: fixed;
    bottom: calc(2 * var(--gutter));
    left: var(--gutter);
    width: min(27.5rem, calc(100vw - 2 * var(--gutter)));
    max-height: calc(100dvh - 4 * var(--gutter));
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    box-shadow: var(--shadow-2);
  }
}

/* Mobile (max-width: 767.98px): bar along the bottom, full width, 16px margin,
   two choices side by side, settings as text button; level 2 open max 80vh with inner scroll. */
@media (max-width: 47.99875rem) {
  .zt-consent {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    box-shadow: var(--shadow-2);
    max-height: 80vh;
    overflow-y: auto;
  }

  .zt-consent { max-width: none; padding: 0; }
  .zt-consent__inner { padding: var(--s-4); }
  .zt-consent__title { font-size: var(--fs-m); margin-bottom: var(--s-1); }
  .zt-consent__text { font-size: .875rem; line-height: 1.4; margin-bottom: var(--s-3); }

  /* Keep level 1 at about a third of the screen: the two choices side by side,
     "Einstellungen" as a slim text button underneath. */
  .zt-consent__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-2);
    width: 100%;
  }

  .zt-consent__actions .zt-btn {
    flex: 1 1 calc(50% - var(--s-2));
    min-width: 0;
    min-height: 44px;
    padding-inline: var(--s-3);
    font-size: var(--fs-s);
  }

  .zt-consent__actions .zt-consent__settings-toggle,
  .zt-consent__actions--save .zt-btn {
    flex-basis: 100%;
  }

  .zt-consent__actions .zt-consent__settings-toggle {
    min-height: 36px;
    border-color: transparent;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* Programmatic focus on the dialog title (keyboard users still see :focus-visible). */
.zt-consent__title:focus:not(:focus-visible) { outline: none; }

/* brand.css */
/* brand.css — wordmark lockup in the header and the highlighted "Service anfragen" nav item. */

/* Account icon in the header (mirrors the cart button, without a badge). */
.zt-header__account {
  order: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--r-btn);
  background: var(--surface-3);
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color var(--d-2) var(--ease-out),
    color var(--d-2) var(--ease-out),
    transform var(--d-2) var(--ease-spring);
}
.zt-header__account-icon { display: grid; place-items: center; }
.zt-header__account:hover {
  color: var(--text);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.zt-header__account:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  .zt-header__account {
    width: 40px;
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zt-header__account {
    transition-duration: 0.01ms !important;
  }
}


.zt-header__brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.55rem;
  line-height: .82;
  letter-spacing: -0.02em;
  color: var(--text);
  background: linear-gradient(180deg, var(--text) 0%, var(--text) 55%, var(--text-2) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  max-width: none;
}

.zt-header__brand-claim {
  display: block;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-top: .3rem;
}

.zt-header__brand {
  gap: 0;
}

@media (max-width: 959.98px) {
  .zt-header__brand-name {
    font-size: 1.25rem;
    max-width: none;
  }

  .zt-header__brand-claim {
    display: block;
    font-size: .5rem;
    letter-spacing: .2em;
  }

  /* Mobile: the CTA item carries the accent color inside the opened panel. */
  .zt-header .zt-nav__link--cta {
    color: var(--accent-2);
  }
}

@media (max-width: 359.98px) {
  .zt-header__brand-claim {
    display: none;
  }
}

@media (min-width: 960px) {
  .zt-nav__link--cta {
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--line-strong);
  }

  .zt-nav__link--cta:hover {
    background: var(--accent-2-soft);
    box-shadow: inset 0 0 0 1px var(--accent-2-line);
  }

  /* Active state: no extra rule, inherits the default active styling. */
}

/* pages.css */
/* pages.css — page-level layouts (home, shop, product, frames, blog, editorial). D3. */

/* ============================================================================
   Shared section / page head
   ========================================================================== */

.zt-main { display: block; }

.zt-section { padding-block: var(--section-y) calc(var(--section-y) * 1.08); }
.zt-section--tight { padding-block: calc(var(--section-y) * .55); }
.zt-section--flaeche,
.zt-panel {
  margin-inline: var(--gutter);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface-1), rgba(23, 25, 28, .6));
  border: 1px solid var(--line);
  padding-block: var(--section-y);
}
@media (max-width: 640px) {
  .zt-section--flaeche,
  .zt-panel { border-radius: var(--r-l); }
}

.zt-section__head {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  max-width: 760px;
}
.zt-section__title { font-size: var(--fs-h2); }
.zt-section__lead { font-size: var(--fs-lead); color: var(--text-2); max-width: var(--measure); }
.zt-section__head--row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-6);
  max-width: none;
}
@media (min-width: 960px) {
  .zt-section__head--row { display: flex; }
}

/* ============================================================================
   Page head (sub-pages)
   ========================================================================== */

.zt-page-head,
.zt-editorial__head,
.zt-shop__head {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3rem);
}
.zt-page-head__title { font-size: var(--fs-h1); max-width: 18ch; }
.zt-page-head__lead { font-size: var(--fs-lead); color: var(--text-2); max-width: 56ch; }

/* Image variant */
.zt-page-head--image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
  margin-top: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--shadow-2);
}
.zt-page-head--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: center/cover no-repeat var(--studio);
}
.zt-page-head--shop::before {
  background-image: url("../img/site/teile.webp");
  background-position: 75% 50%;
}
.zt-page-head--frames::before {
  background-image: url("../img/site/rahmen-kopf.webp");
  background-position: 80% 60%;
}
.zt-page-head--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 11, 12, .92) 0%, rgba(10, 11, 12, .6) 50%, rgba(10, 11, 12, .2) 100%);
}
@media (max-width: 640px) {
  .zt-page-head--image { border-radius: var(--r-l); }
}

/* ============================================================================
   Hero (home)
   ========================================================================== */

.zt-hero { padding: .75rem var(--gutter) 0; }
.zt-hero__frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-xl);
  min-height: min(86dvh, 880px);
  display: grid;
  align-items: end;
  width: min(100%, 1440px);
  margin-inline: auto;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.zt-hero__media,
.zt-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  z-index: -2;
}
.zt-hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(10, 11, 12, .92) 0%, rgba(10, 11, 12, .35) 45%, rgba(10, 11, 12, .1) 70%),
    linear-gradient(to right, rgba(10, 11, 12, .75) 0%, transparent 60%);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes zt-hero-zoom {
    from { transform: scale(1.08); opacity: .4; }
    to { transform: scale(1); opacity: 1; }
  }
  .zt-hero__media img { animation: zt-hero-zoom 1.6s var(--ease-out) both; }

  @keyframes zt-rise {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
  .zt-hero__content .zt-eyebrow { animation: zt-rise .9s var(--ease-out) .15s both; }
  .zt-hero__title { animation: zt-rise .9s var(--ease-out) .3s both; }
  .zt-hero__lead { animation: zt-rise .9s var(--ease-out) .45s both; }
  .zt-hero__actions { animation: zt-rise .9s var(--ease-out) .6s both; }
}
.zt-hero__content { padding: clamp(1.5rem, 4vw, 4rem); max-width: 820px; }
.zt-hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  max-width: 12ch;
  margin-bottom: var(--s-5);
}
.zt-hero__lead {
  font-size: var(--fs-lead);
  color: rgba(236, 235, 231, .86);
  max-width: 46ch;
}
.zt-hero__actions { margin-top: var(--s-6); }

.zt-hero__frame { grid-template-columns: minmax(0, 1fr); }
.zt-hero__content { min-width: 0; }
.zt-hero__facts {
  list-style: none;
  padding: 0;
  margin: 0 1.25rem 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-radius: var(--r-l);
  background: var(--glass);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
}
.zt-hero__fact { padding: 1rem 1.25rem; }
.zt-hero__fact + .zt-hero__fact { border-left: 1px solid var(--line); }
.zt-hero__fact-key {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-3);
}
.zt-hero__fact-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text);
}

@media (min-width: 960px) {
  .zt-hero__facts {
    position: absolute;
    right: clamp(1.5rem, 4vw, 4rem);
    bottom: clamp(1.5rem, 4vw, 4rem);
    margin: 0;
    grid-template-columns: repeat(3, auto);
  }
}
@media (max-width: 640px) {
  .zt-hero__facts { grid-template-columns: 1fr; }
  .zt-hero__fact { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 1rem; }
  .zt-hero__fact + .zt-hero__fact { border-left: 0; border-top: 1px solid var(--line); }
  .zt-hero__fact-value { font-size: 1.05rem; text-align: right; }
}
@media (max-width: 640px) {
  .zt-hero__frame { min-height: 82dvh; }
  .zt-hero__title { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .zt-hero__actions .zt-btn { width: 100%; }
  .zt-hero__actions { flex-direction: column; }
}

/* Chromium/Safari 18.2+ view transitions (defined in base.css also handled there). */

/* ============================================================================
   Bento (services)
   ========================================================================== */

.zt-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 960px) {
  .zt-bento {
    grid-template-columns: 7fr 5fr;
    grid-template-rows: repeat(2, minmax(300px, 1fr));
    gap: var(--s-5);
  }
}
.zt-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-l);
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--line);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
  transition: border-color var(--d-2) var(--ease-out), box-shadow var(--d-3) var(--ease-out);
}
.zt-tile:hover { border-color: var(--line-strong); }
.zt-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--d-4) var(--ease-out);
}
.zt-tile:hover .zt-tile__img { transform: scale(1.05); }
/* Narrow screens: photo on top fading into the card, text below (no text over busy photos). */
@media (max-width: 959px) {
  .zt-tile { flex-direction: column; align-items: stretch; min-height: 0; }
  .zt-tile__img { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent); mask-image: linear-gradient(to bottom, black 55%, transparent); }
  .zt-tile::before { display: none; }
  .zt-tile__body { margin-top: -3rem; }
}
.zt-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 11, 12, .95) 0%, rgba(10, 11, 12, .55) 40%, rgba(10, 11, 12, .05) 75%);
}
.zt-tile__body {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  gap: .5rem;
}
.zt-tile__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .2em;
  color: var(--accent-2);
}
.zt-tile__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: var(--lh-head);
}
.zt-tile__link {
  position: static; /* the ::after overlay must span the whole tile */
  color: #fff;
  text-decoration: none;
}
.zt-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.zt-tile__text { color: var(--text-2); max-width: 42ch; }
.zt-tile__more {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.zt-tile__more .zt-btn__icon { transition: transform var(--d-2) var(--ease-spring); }
.zt-tile:hover .zt-tile__more .zt-btn__icon { transform: translateX(4px); }
.zt-tile:focus-within { outline: 2px solid var(--accent-hover); outline-offset: 3px; }

@media (min-width: 960px) {
  .zt-tile--feature { grid-row: span 2; min-height: 640px; }
  .zt-tile--feature .zt-tile__title { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); }
}

/* ============================================================================
   Split / bezel
   ========================================================================== */

.zt-split { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
.zt-split::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 600px;
  height: 600px;
  transform: translateY(-50%);
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  filter: blur(40px);
  z-index: -1;
}
.zt-split__text { display: grid; gap: var(--s-5); justify-items: start; }
.zt-split__lead { font-size: var(--fs-lead); color: var(--text-2); max-width: var(--measure); }
.zt-split__media { width: 100%; }

@media (min-width: 960px) {
  .zt-split {
    grid-template-columns: 5fr 7fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
}

.zt-bezel {
  padding: .5rem;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  margin: 0;
}
.zt-bezel img {
  border-radius: calc(var(--r-xl) - .5rem);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--highlight);
}

/* ============================================================================
   Models rail
   ========================================================================== */

.zt-models {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--s-4);
  padding-bottom: .5rem;
  scrollbar-width: thin;
}
.zt-models > * { scroll-snap-align: start; }
@media (min-width: 640px) {
  .zt-models {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
  }
}
@media (min-width: 1200px) {
  .zt-models { grid-template-columns: repeat(5, 1fr); }
}

.zt-model {
  display: block;
  border-radius: var(--r-l);
  padding: .5rem;
  background: linear-gradient(180deg, #232428, #17181b);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--d-3) var(--ease-out), border-color var(--d-2) var(--ease-out), box-shadow var(--d-3) var(--ease-out);
}
.zt-model:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}
.zt-model__media {
  display: block;
  border-radius: var(--r-m);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--studio);
}
.zt-model__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-4) var(--ease-out);
}
.zt-model:hover .zt-model__media img { transform: scale(1.05); }
.zt-model__media--empty {
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 20%, #34363b, var(--studio) 55%, #1b1c1f);
}
.zt-model__ghost {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .18);
}
.zt-model__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .9rem .6rem .5rem .75rem;
}
.zt-model__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
}
.zt-model__body .zt-btn__icon { transition: transform var(--d-2) var(--ease-spring), background-color var(--d-2) var(--ease-out); }
.zt-model:hover .zt-model__body .zt-btn__icon {
  transform: translateX(3px);
  background: var(--accent);
  color: #fff;
}

/* ============================================================================
   Reasons
   ========================================================================== */

.zt-reasons { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 960px) {
  .zt-reasons {
    grid-template-columns: 4fr 8fr;
    gap: clamp(2rem, 5vw, 5rem);
  }
  .zt-reasons__head {
    position: sticky;
    top: calc(var(--header-h) + 3rem);
    align-self: start;
  }
}
.zt-reasons__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 640px) {
  .zt-reasons__list { grid-template-columns: repeat(2, 1fr); }
}
.zt-reason {
  border-radius: var(--r-l);
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-1);
  transition: transform var(--d-3) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.zt-reason:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.zt-reason__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: var(--tracking-label);
  color: var(--accent-2);
  margin-bottom: 2.5rem;
}
.zt-reason__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: var(--lh-head);
}
.zt-reason__text { color: var(--text-2); font-size: var(--fs-s); }

/* ============================================================================
   CTA
   ========================================================================== */

.zt-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-xl);
  min-height: 460px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.zt-cta__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  z-index: -2;
}
.zt-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(10, 11, 12, .94) 0%, rgba(10, 11, 12, .7) 45%, rgba(10, 11, 12, .15) 100%);
}
.zt-cta__body { padding: clamp(1.5rem, 5vw, 4.5rem); max-width: 620px; }
.zt-cta__title { font-size: var(--fs-h2); }
.zt-cta__text { color: var(--text-2); max-width: var(--measure); }
.zt-cta__body .zt-actions { margin-top: var(--s-6); }

@media (max-width: 640px) {
  .zt-cta { align-items: flex-end; border-radius: var(--r-l); }
  .zt-cta::before {
    background: linear-gradient(to top, rgba(10, 11, 12, .94) 0%, rgba(10, 11, 12, .7) 45%, rgba(10, 11, 12, .15) 100%);
  }
}

/* ============================================================================
   Shop list
   ========================================================================== */

.zt-shop__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  padding-block: var(--s-4) var(--s-7);
}
.zt-shop__aside { display: block; } /* was hidden below 1024px: phones had no filter */
.zt-shop__count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}
.zt-shop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: var(--s-5);
  padding-block: 0;
}
@media (min-width: 1024px) {
  .zt-shop__layout {
    grid-template-columns: 280px 1fr;
    gap: var(--s-6);
  }
  .zt-shop__aside {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
  }
}

.zt-product-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--s-5);
}
.zt-product-grid > li { margin: 0; display: flex; min-width: 0; }
.zt-product-grid .zt-card { width: 100%; }

/* ============================================================================
   Product / frame detail
   ========================================================================== */

.zt-product { display: grid; grid-template-columns: 1fr; gap: var(--s-5); padding-block: var(--s-4) var(--s-7); align-items: start; }
@media (min-width: 960px) {
  .zt-product { grid-template-columns: 7fr 5fr; gap: clamp(2rem, 4vw, 4rem); }
}

.zt-product__media { min-width: 0; }

.zt-product__body {
  border-radius: var(--r-xl);
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-1);
}
@media (min-width: 960px) {
  .zt-product__body { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.zt-product__title { font-size: var(--fs-h1); max-width: 18ch; }
@media (min-width: 960px) {
  .zt-product__title { font-size: min(3.2rem, var(--fs-h1)); }
}
.zt-product__price {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-4);
}
.zt-product__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--s-4); }
.zt-product__notice { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--text-3); }
.zt-product__buy { display: grid; gap: .75rem; margin-block: var(--s-5); }
.zt-product__qty input { max-width: 7rem; }
.zt-product__desc { color: var(--text-2); }

.zt-product__variants {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
}
.zt-product__variants li {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-block: .6rem;
  font-size: var(--fs-s);
  color: var(--text-2);
}
.zt-product__variants li:last-child { border-bottom: 1px solid var(--line); }

.zt-related { margin-top: var(--section-y); }
.zt-related .zt-eyebrow { margin-bottom: var(--s-4); }

/* Chips (radio labels as pills) live in components.css; variant select is a select. */

/* ============================================================================
   Frames list
   ========================================================================== */

.zt-frames__intro { max-width: 56ch; }
.zt-frame-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--s-5);
}
.zt-frame-grid > li { margin: 0; display: flex; min-width: 0; }
.zt-frame-grid .zt-card { width: 100%; }

.zt-frame-detail { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
@media (min-width: 960px) {
  .zt-frame-detail { grid-template-columns: 7fr 5fr; gap: clamp(2rem, 4vw, 4rem); }
}

/* ============================================================================
   Editorial / prose
   ========================================================================== */

.zt-editorial { padding-block: var(--s-5) var(--s-9); }
.zt-editorial__head { max-width: 760px; }
.zt-editorial__head h1,
.zt-editorial h1 { font-size: var(--fs-h1); max-width: 18ch; margin-bottom: var(--s-4); }
.zt-editorial > .zt-container > h1:first-child,
.zt-editorial > .zt-container > .zt-label + h1 { font-size: var(--fs-h1); max-width: 18ch; }

.zt-content,
.zt-prose {
  max-width: 72ch;
  line-height: var(--lh-body);
  color: var(--text);
}
.zt-content h2,
.zt-prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  line-height: var(--lh-head);
  margin: 2.5em 0 .75rem;
}
.zt-content h3,
.zt-prose h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  margin: 2em 0 .5rem;
}
.zt-content ul,
.zt-prose ul,
.zt-content ol,
.zt-prose ol { margin: 0 0 var(--s-5); padding-left: 1.25rem; }
.zt-content li,
.zt-prose li { margin-bottom: .4rem; }
.zt-content ul li::marker,
.zt-prose ul li::marker { color: var(--accent); }
.zt-content blockquote,
.zt-prose blockquote {
  margin: var(--s-5) 0;
  padding: .25rem 0 .25rem 1rem;
  border-left: 3px solid var(--accent);
  border-radius: var(--r-xs);
  color: var(--text-2);
}
.zt-content table,
.zt-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-5) 0;
  font-size: var(--fs-s);
  border-radius: var(--r-m);
  overflow: hidden;
}
/* Wide tables (5+ columns) and every table on phones scroll sideways instead of being clipped. */
.zt-content table:has(tr > :nth-child(5)),
.zt-prose table:has(tr > :nth-child(5)) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.zt-content table:has(tr > :nth-child(5)) th,
.zt-prose table:has(tr > :nth-child(5)) th {
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .zt-content table,
  .zt-prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}
.zt-content th,
.zt-content td,
.zt-prose th,
.zt-prose td {
  border: 1px solid var(--line);
  padding: .5rem .65rem;
  text-align: left;
}
.zt-content th,
.zt-prose th {
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.zt-content img,
.zt-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--s-5) 0;
  border-radius: var(--r-l);
}
.zt-content code,
.zt-prose code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--surface-2);
  padding: .1rem .3rem;
  border-radius: var(--r-xs);
}

.zt-post__cover { border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--s-5); }
.zt-post__cover img { display: block; width: 100%; height: auto; }
.zt-post__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

.zt-post-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--s-5);
}
.zt-post-grid > li { margin: 0; display: flex; min-width: 0; }
.zt-post-grid .zt-card { width: 100%; }

/* Generic card grids */
.zt-grid,
.zt-cards-3,
.zt-cards-4 {
  display: grid;
  gap: var(--s-5);
}
.zt-cards-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.zt-cards-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.zt-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.zt-grid > *,
.zt-cards-3 > *,
.zt-cards-4 > * { min-width: 0; }

.zt-lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-2); max-width: 60ch; }

/* Contact page: see contact.css (revision 2). */

/* ============================================================================
   FAQ
   ========================================================================== */

.zt-faq { list-style: none; margin: 0 0 var(--s-7); padding: 0; }
.zt-faq__item { border-top: 1px solid var(--line); }
.zt-faq__item:last-child { border-bottom: 1px solid var(--line); }
.zt-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  color: var(--text);
}
.zt-faq__question::-webkit-details-marker { display: none; }
.zt-faq__question::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  color: var(--accent-hover);
  font-size: 1.25rem;
  transition: transform var(--d-2) var(--ease-out);
}
.zt-faq__item[open] > .zt-faq__question::after { content: "\2212"; }
.zt-faq__question:hover { color: var(--accent-hover); }
.zt-faq__item .zt-content {
  padding: 0 0 1.25rem;
  max-width: 68ch;
  color: var(--text-2);
}

/* ============================================================================
   Error pages
   ========================================================================== */

.zt-error {
  position: relative;
  isolation: isolate;
  min-height: 60dvh;
  display: grid;
  place-content: center;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.zt-error__code {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 25vw, 14rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
  margin-bottom: var(--s-4);
}
.zt-error::before {
  content: "";
  position: absolute;
  inset: auto 0 40% 0;
  height: 300px;
  background: radial-gradient(50% 50% at 50% 50%, var(--accent-soft), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}
.zt-error__title { font-size: var(--fs-h2); margin-block: var(--s-3) var(--s-4); }
.zt-error__hint { color: var(--text-2); max-width: 62ch; margin-inline: auto; }
.zt-error .zt-actions { justify-content: center; }

/* ============================================================================
   Legal placeholder hint
   ========================================================================== */

.zt-legal-hint {
  border: 1px solid var(--warn);
  border-radius: var(--r-m);
  background: var(--warn-soft);
  padding: .75rem 1rem;
  margin-bottom: var(--s-5);
  font-size: var(--fs-s);
  color: var(--text-2);
}

/* ============================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .zt-hero__media img { animation: none; }
  .zt-tile__img,
  .zt-model__media img,
  .zt-tile__more .zt-btn__icon,
  .zt-model__body .zt-btn__icon { transition: none; }
}

/* Review fixes (phase 7 gate) */
.zt-product__body h2, .zt-product__body h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); margin: var(--s-6) 0 var(--s-3); }
.zt-container.zt-editorial__head { max-width: none; }
.zt-editorial__head > p { max-width: 60ch; }
.zt-editorial + .zt-section { padding-top: var(--s-4); }
.zt-page-head--photo::before { display: none; }
.zt-page-head__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; }
.zt-page-head--photo { min-height: clamp(300px, 42vw, 460px); }
.zt-page-head + .zt-content { margin-top: var(--s-7); }

/* Fourth service (Tuning) runs as a wide banner tile under the bento. */
@media (min-width: 960px) {
  .zt-tile--wide { grid-column: 1 / -1; min-height: 340px; }
  .zt-tile--wide .zt-tile__img { object-position: 50% 60%; }
}

/* Shop: VAT note sits next to the article count (moved from the page bottom). */
.zt-shop__count { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1rem; }
.zt-shop__vat { order: 2; color: var(--text-3); text-transform: none; letter-spacing: .02em; }

/* ============================================================================
   Phase 10: Service configurator tile in the home bento
   ========================================================================== */

.zt-tile--service {
  border-color: var(--accent-2-line);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--accent-2-soft), 0 18px 44px -22px var(--accent-2-soft);
}
.zt-tile--service:hover { border-color: var(--accent-2); }
.zt-tile__price {
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent-2-line);
  background: var(--accent-2-soft);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

@media (min-width: 960px) {
  /* Last row: fourth tile left, service tile right (grid is 7fr 5fr). */
  .zt-bento > .zt-tile:nth-child(4) { grid-column: 1; min-height: 300px; }
  .zt-bento > .zt-tile--service { grid-column: 2; min-height: 300px; }
}

/* Tablet: filter sits above the grid now, use the space in two columns. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .zt-shop__aside .zt-filter__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zt-shop__aside .zt-filter__group--grow,
  .zt-shop__aside .zt-filter__actions { grid-column: 1 / -1; }
}

/* Variant picker on the product page (radio cards, one line each). */
fieldset.zt-product__variants { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); padding: 0; border: 0; }
.zt-product__variant { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-1); cursor: pointer; transition: border-color .2s, background-color .2s; }
.zt-product__variant:hover { border-color: var(--line-strong); }
.zt-product__variant:has(input:checked) { border-color: var(--accent-2-line); background: var(--accent-2-soft); }
.zt-product__variant:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.zt-product__variant input { accent-color: var(--accent-2); margin: 0; }
.zt-product__variant-price { font-family: var(--font-mono); color: var(--text); }
.zt-product__variant-stock { grid-column: 2 / -1; font-size: var(--fs-xs); color: var(--text-3); }

/* contact.css */
/* contact.css — Kontaktseite (D5). Tokens only, no hex values here. */

.zt-contact-page {
  padding-block: var(--s-5) var(--section-y);
}

/* --- Head --- */

.zt-contact-head {
  display: grid;
  gap: var(--s-6);
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
}

.zt-contact-head__title {
  font-size: var(--fs-h1);
  max-width: 14ch;
}

.zt-contact-head__lead {
  font-size: var(--fs-lead);
  color: var(--text-2);
  max-width: 52ch;
  margin: 0;
}

.zt-contact-head__media {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  aspect-ratio: 16 / 9;
}

.zt-contact-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 50%;
}

/* --- Channels --- */

.zt-channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

.zt-channel {
  position: relative;
  display: grid;
  align-content: start;
  gap: .45rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
  transition: transform var(--d-3) var(--ease-out), border-color var(--d-2) var(--ease-out);
}

.zt-channel:has(a):hover {
  transform: translateY(-3px);
  border-color: var(--accent-2-line);
}

.zt-channel--primary {
  background: linear-gradient(160deg, var(--accent-2-soft), var(--surface-1) 55%);
  border-color: var(--accent-2-line);
}

.zt-channel__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-s);
  background: var(--accent-2-soft);
  color: var(--accent-2);
  margin-bottom: var(--s-3);
}

.zt-channel__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-3);
}

.zt-channel__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem);
  line-height: 1.1;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.zt-channel__value::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.zt-channel:focus-within {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.zt-channel__value--address {
  font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem);
}

.zt-channel__note {
  font-size: var(--fs-s);
  color: var(--text-2);
  margin-top: auto;
}

/* --- Grid --- */

.zt-contact-grid {
  display: grid;
  gap: var(--s-5);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* --- Form --- */

.zt-contact-form {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-1);
}

.zt-contact-form__head {
  margin-bottom: var(--s-5);
}

.zt-contact-form__title {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  margin: 0;
}

.zt-contact-form__status {
  font-size: var(--fs-s);
  color: var(--text-2);
  padding: .75rem 1rem;
  border-left: 2px solid var(--accent-2);
  background: var(--accent-2-soft);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  margin: 0 0 var(--s-5);
  max-width: none;
}

.zt-form--grid {
  display: grid;
  gap: var(--s-5) var(--s-4);
  grid-template-columns: 1fr;
}

.zt-form--grid .zt-form__field--full {
  grid-column: 1 / -1;
}

.zt-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-2);
}

/* --- Aside --- */

.zt-contact-aside {
  display: grid;
  gap: var(--s-4);
}

.zt-contact-card {
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
}

.zt-contact-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.zt-contact-card__body {
  display: grid;
  gap: var(--s-3);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  justify-items: start;
}

.zt-contact-card__title {
  font-size: 1.45rem;
  margin: 0;
}

.zt-contact-card__text {
  color: var(--text-2);
  margin: 0;
}

/* --- Hours --- */

.zt-hours {
  margin: 0;
  width: 100%;
  display: grid;
  gap: .35rem;
}

.zt-hours__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .35rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-s);
}

.zt-hours__row dt {
  color: var(--text-2);
}

.zt-hours__row dd {
  margin: 0;
  color: var(--text);
}

/* --- Breakpoints --- */

@media (min-width: 640px) {
  .zt-form--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .zt-channels {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .zt-contact-head {
    grid-template-columns: 7fr 5fr;
    align-items: end;
    gap: clamp(2rem, 5vw, 4.5rem);
  }

  .zt-contact-head__media {
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 1024px) {
  .zt-contact-grid {
    grid-template-columns: 7fr 5fr;
    align-items: start;
    gap: var(--s-6);
  }

  .zt-contact-aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .zt-channel {
    transition: none;
  }
}

/* service.css */
/* service.css — service content pages (D10). Tokens only; photo overlays as rgba. */

/* Tabs */
.zt-service-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .4rem;
  margin: var(--s-6) 0 0;
  width: fit-content;
  max-width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
}

.zt-service-tabs__link {
  padding: .6rem 1.1rem;
  border-radius: var(--r-m);
  color: var(--text-2);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}

.zt-service-tabs__link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .05);
}

.zt-service-tabs__link.is-active {
  color: var(--accent-2);
  background: var(--accent-2-soft);
  box-shadow: inset 0 0 0 1px var(--accent-2-line);
}

/* Service block */
.zt-service {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.zt-service__intro {
  font-size: var(--fs-lead);
  color: var(--text);
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent-2);
}

.zt-service__intro p {
  margin-bottom: .9em;
}

.zt-service__sections {
  display: grid;
  gap: var(--s-5);
}

.zt-service-section {
  position: relative;
  background: linear-gradient(180deg, var(--surface-1), rgba(23, 25, 28, .7));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow-1);
  transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out), border-color var(--d-2) var(--ease-out);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}

.zt-service-section:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}

.zt-service-section__num {
  display: inline-flex;
  gap: .75rem;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .8rem;
  color: var(--accent-2);
  letter-spacing: .16em;
  margin-bottom: var(--s-3);
}

.zt-service-section__num::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent-2-line);
}

.zt-service-section__title {
  font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.4rem);
  margin: 0;
  max-width: 16ch;
}

.zt-service-section__body {
  color: var(--text-2);
}

.zt-service-section__body p {
  max-width: 64ch;
}

.zt-service-section__body strong {
  color: var(--text);
}

.zt-service-section__body a {
  text-decoration-color: var(--accent-2);
}

/* Checklist */
.zt-checklist {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0;
  display: grid;
  gap: .6rem;
}

.zt-checklist li {
  position: relative;
  padding: .75rem 1rem .75rem 2.75rem;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  color: var(--text);
  transition: border-color var(--d-2) var(--ease-out);
}

.zt-checklist li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--accent-2);
  border-bottom: 2px solid var(--accent-2);
  transform: rotate(-45deg);
}

.zt-checklist li strong {
  display: block;
  color: var(--text);
}

.zt-checklist li {
  color: var(--text-2);
}

.zt-checklist li:hover {
  border-color: var(--accent-2-line);
}

/* Sub-items */
.zt-service-section__items {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.zt-service-item {
  padding: 1.25rem 1.4rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
  transition: transform var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}

.zt-service-item:hover {
  transform: translateY(-2px);
  border-color: var(--accent-2-line);
}

.zt-service-item__title {
  font-size: 1.2rem;
  margin: 0 0 .4rem;
  color: var(--text);
}

.zt-service-item__text {
  font-size: var(--fs-s);
  color: var(--text-2);
}

.zt-service-item__text p:last-child {
  margin-bottom: 0;
}

/* Timeline variant */
.zt-service--timeline .zt-service__sections {
  position: relative;
  padding-left: 3.5rem;
  gap: var(--s-4);
}

.zt-service--timeline .zt-service__sections::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: linear-gradient(var(--accent-2-line), transparent);
}

.zt-service--timeline .zt-service-section::before {
  content: "";
  position: absolute;
  left: -2.55rem;
  top: 2.1rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-2-soft);
}

/* CTA (home-style) */
.zt-service-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(3rem, 6vw, 5rem);
  border-radius: var(--r-xl);
  min-height: 380px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

.zt-service-cta__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  z-index: -2;
  transition: transform var(--d-4) var(--ease-out);
}

.zt-service-cta:hover .zt-service-cta__img {
  transform: scale(1.04);
}

.zt-service-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 11, 12, .94) 0%, rgba(10, 11, 12, .72) 50%, rgba(10, 11, 12, .2) 100%);
  z-index: -1;
}

.zt-service-cta__body {
  padding: clamp(1.5rem, 5vw, 4rem);
  max-width: 620px;
}

.zt-service-cta__title {
  font-size: var(--fs-h2);
  margin: 0 0 .5rem;
  color: var(--text);
}

.zt-service-cta__text {
  color: var(--text-2);
  margin: 0 0 var(--s-5);
}

/* Desktop */
@media (min-width: 960px) {
  .zt-service-section {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .zt-service-section__head {
    position: sticky;
    top: calc(var(--header-h) + 2.5rem);
  }

  .zt-service--timeline .zt-service-section {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  }
}

@media (min-width: 640px) {
  .zt-service-section__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 639.98px) {
  .zt-service-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
  }

  .zt-service-section {
    padding: 1.25rem;
  }

  .zt-service--timeline .zt-service__sections {
    padding-left: 2.25rem;
  }

  .zt-service--timeline .zt-service__sections::before {
    left: .8rem;
  }

  .zt-service--timeline .zt-service-section::before {
    left: -1.85rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .zt-service-tabs__link,
  .zt-service-section,
  .zt-checklist li,
  .zt-service-item,
  .zt-service-cta__img {
    transition: none;
  }

  .zt-service-section:hover,
  .zt-service-item:hover,
  .zt-service-cta:hover .zt-service-cta__img {
    transform: none;
  }
}

/* Gate fixes: beat the generic .zt-prose heading/list rules inside service cards. */
.zt-prose .zt-service-item__title { font-size: 1.2rem; line-height: 1.2; margin: 0 0 .5rem; max-width: none; }
.zt-prose .zt-checklist { padding-left: 0; margin-left: 0; list-style: none; }
.zt-prose .zt-checklist > li { margin: 0; }
.zt-prose .zt-checklist > li::marker { content: none; }

/* Inline service photos (Revision 3) */
.zt-service-figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--shadow-2); background: var(--surface-1); }
.zt-service-figure img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; transition: transform var(--d-4) var(--ease-out); }
.zt-service-figure:hover img { transform: scale(1.03); }
.zt-service-figure figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: .45rem .8rem; border-radius: var(--r-s); background: var(--glass-strong); color: var(--text-2); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; }
.zt-service__intro + .zt-service-figure, .zt-service > .zt-service-figure { margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (max-width: 640px) { .zt-service-figure img { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .zt-service-figure img { transition: none; } }

/* Entry to the service configurator on /reparatur */
.zt-service-promo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.25rem; align-items: center; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--accent-2-line); border-radius: var(--r-xl); background: linear-gradient(135deg, var(--accent-2-soft), var(--surface-1) 60%); box-shadow: var(--shadow-1); color: var(--text); text-decoration: none; transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out); }
.zt-service-promo:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.zt-service-promo__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-m); background: var(--accent-2-soft); color: var(--accent-2); }
.zt-service-promo__body { display: grid; gap: .3rem; }
.zt-service-promo__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); }
.zt-service-promo__text { color: var(--text-2); font-size: var(--fs-s); }
.zt-service-promo .zt-btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 960px) { .zt-service-promo { grid-template-columns: auto minmax(0, 1fr) auto; } .zt-service-promo .zt-btn { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .zt-service-promo { transition: none; } }

/* checkout.css */
/* checkout.css — cart, checkout, thanks and build-request (D8, CART-R2).
   Uses tokens from tokens.css only; no inline styles, no external resources. */

/* ---------- Page shell ---------- */
.zt-checkout,
.zt-thanks,
.zt-build-request {
  padding-block: clamp(2rem, 5vw, 4rem) var(--section-y);
}
.zt-checkout .zt-lead {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.zt-checkout h1 {
  font-size: var(--fs-h1);
}

/* ---------- Two-column layouts ---------- */
.zt-cart,
.zt-checkout__grid {
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 1024px) {
  .zt-cart,
  .zt-checkout__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
  }
  .zt-cart__summary,
  .zt-checkout__aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

/* ---------- Summary panels ---------- */
.zt-cart__summary,
.zt-checkout__aside .zt-card,
.zt-thanks__summary {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-1);
}
.zt-summary__title {
  font-size: 1.35rem;
  margin: 0 0 var(--s-4);
}
.zt-summary {
  margin: 0;
  display: grid;
  gap: 0;
}
.zt-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.zt-summary__row dt {
  color: var(--text-2);
  font-size: var(--fs-s);
}
.zt-summary__row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.zt-summary__row--total {
  border-bottom: 0;
  padding-top: 1rem;
}
.zt-summary__row--total dt {
  color: var(--text);
  font-weight: 600;
}
.zt-summary__row--total dd {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--text);
}
.zt-summary__note {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin: var(--s-3) 0 0;
}
.zt-summary__actions {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--s-5);
}
.zt-summary__items,
.zt-summary-items {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
}
.zt-summary__items li,
.zt-summary-items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-s);
}

/* ---------- Cart ---------- */
.zt-cart__count {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-3);
  margin-bottom: var(--s-3);
}
.zt-cart__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.zt-cart-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  grid-template-areas:
    "media info total"
    "media qty remove";
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 1rem;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
}
.zt-cart-line__media {
  grid-area: media;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-m);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, #34363b, var(--studio) 55%, #1b1c1f);
  display: block;
}
.zt-cart-line__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zt-cart-line__media.is-empty {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--surface-3) 8px, var(--surface-3) 9px);
}
.zt-cart-line__info {
  grid-area: info;
  min-width: 0;
}
.zt-cart-line__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--text);
  text-decoration: none;
}
.zt-cart-line__name:hover {
  color: var(--accent-2-hover);
  text-decoration: none;
}
.zt-cart-line__variant,
.zt-cart-line__unit {
  font-size: var(--fs-s);
  color: var(--text-2);
  margin: 0;
}
.zt-cart-line__warning {
  font-size: var(--fs-xs);
  color: var(--warn);
  margin: 0;
}
.zt-cart-line__warning[hidden] {
  display: none;
}
.zt-cart-line__total {
  grid-area: total;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin: 0;
}
.zt-cart-line__remove {
  grid-area: remove;
  justify-self: end;
  background: none;
  border: 0;
  padding: 0.25rem 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
  cursor: pointer;
}
.zt-cart-line__remove:hover {
  color: var(--accent-hover);
}
.zt-cart-line__remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.zt-cart-line.is-unavailable {
  opacity: 0.6;
  border-style: dashed;
}
.zt-cart-line.is-loading {
  min-height: 96px;
}
.zt-cart-line.is-loading .zt-cart-line__media,
.zt-cart-line.is-loading .zt-cart-line__info,
.zt-cart-line.is-loading .zt-cart-line__total {
  border-radius: var(--r-m);
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%;
  animation: zt-shimmer 1.2s linear infinite;
  color: transparent;
}
.zt-cart-line.is-loading .zt-cart-line__info {
  height: 1.2rem;
  margin-block: 0.5rem;
}
@media (min-width: 760px) {
  .zt-cart-line {
    grid-template-columns: 120px minmax(0, 1fr) auto auto auto;
    grid-template-areas: "media info qty total remove";
  }
}

@keyframes zt-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* ---------- Quantity stepper ---------- */
.zt-qty {
  grid-area: qty;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--surface-3);
  overflow: hidden;
  justify-self: start;
}
.zt-qty__btn {
  width: 36px;
  height: 40px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
}
.zt-qty__btn:hover {
  background: var(--surface-2);
}
.zt-qty__input {
  width: 44px;
  height: 40px;
  text-align: center;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  appearance: textfield;
  -moz-appearance: textfield;
}
.zt-qty__input::-webkit-inner-spin-button,
.zt-qty__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- Empty states ---------- */
.zt-cart__empty,
.zt-thanks-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-l);
  padding: var(--s-8) var(--s-5);
  text-align: center;
}
.zt-cart__empty[hidden],
.zt-thanks-empty[hidden] {
  display: none;
}

/* ---------- Cart info ---------- */
.zt-cart__info {
  margin-top: var(--s-7);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--r-l);
  background: transparent;
  border: 1px solid var(--line);
}
.zt-cart__info-title {
  font-size: 1.2rem;
}

/* ---------- Notices ---------- */
.zt-notice {
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--surface-1);
  padding: 0.75rem 1rem;
  margin-block: 0.75rem;
  font-size: var(--fs-s);
  color: var(--text);
}
.zt-notice[hidden] {
  display: none;
}
.zt-notice ul {
  margin: 0;
  padding-left: 1.1rem;
}
.zt-notice--error {
  border-color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.zt-notice--info {
  border-left-color: var(--ok);
}
.zt-notice h2,
.zt-notice h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--s-3);
}

/* ---------- Checkout form ---------- */
.zt-checkout__form {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-1);
  counter-reset: zt-step;
}
.zt-checkout__form h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  margin: 0 0 var(--s-4);
}
.zt-checkout__form h2 {
  counter-increment: zt-step;
}
.zt-checkout__form h2:not(:first-child) { margin-top: var(--s-7); }
.zt-checkout__form h2::before {
  content: counter(zt-step, decimal-leading-zero) " ";
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin-right: 0.6rem;
}
.zt-form__fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-7);
}
.zt-form__fieldset legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  margin-bottom: var(--s-4);
  color: var(--text);
}
@media (min-width: 640px) {
  .zt-form__fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s-5);
  }
  .zt-form__fieldset legend,
  .zt-checkout__form h2 {
    grid-column: 1 / -1;
  }
}
.zt-form__field--full,
.zt-form__fieldset > .zt-form__field--full,
.zt-form__fieldset > .zt-form__field--check,
.zt-checkout__form textarea,
.zt-checkout__form .zt-form__field:has(textarea) {
  grid-column: 1 / -1;
}
.zt-checkout__billing {
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
}
.zt-checkout__billing[hidden] {
  display: none;
}

/* ---------- Radio groups / option cards ---------- */
.zt-radio-group,
.zt-shipping-options {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.zt-radio-group label,
.zt-shipping-options label {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  cursor: pointer;
  background: var(--surface-1);
}
.zt-radio-group label:has(input:checked),
.zt-shipping-options label:has(input:checked) {
  border-color: var(--accent-2-line);
  background: var(--accent-2-soft);
}

/* ---------- Coupon ---------- */
.zt-coupon-apply {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.zt-coupon-status {
  font-size: var(--fs-s);
}
.zt-coupon-status[hidden] {
  display: none;
}

/* ---------- Thanks ---------- */
.zt-thanks {
  max-width: 760px;
  margin-inline: auto;
}
.zt-thanks__summary {
  margin-block: var(--s-6);
}
.zt-thanks__notice {
  margin-top: var(--s-4);
}

/* ---------- Build request ---------- */
.zt-build-request .zt-checkout__form {
  margin-bottom: var(--s-7);
}
.zt-build-request aside,
.zt-build-request .zt-checkout__aside {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-1);
}
.zt-file-upload {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-l);
  padding: var(--s-6);
  text-align: center;
  background: var(--surface-2);
}
.zt-file-upload:hover,
.zt-file-upload:focus-within {
  border-color: var(--accent-2-line);
}
.zt-file-list,
.zt-file-upload__list {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
  text-align: left;
}
.zt-file-list[hidden],
.zt-file-upload__list[hidden] {
  display: none;
}
.zt-build-request-success {
  border: 1px solid var(--ok);
  border-left: 3px solid var(--ok);
  border-radius: var(--r-m);
  background: var(--ok-soft);
  padding: 1rem 1.25rem;
}

/* ---------- Form feedback ---------- */
.zt-form__error {
  display: block;
  margin-top: 0.25rem;
  color: var(--accent-hover);
  font-size: var(--fs-xs);
}
.zt-form-errors {
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-s);
  background: var(--accent-soft);
  padding: 0.75rem 1rem;
  font-size: var(--fs-s);
}
.zt-form-success {
  border: 1px solid var(--ok);
  border-left: 3px solid var(--ok);
  border-radius: var(--r-s);
  background: var(--ok-soft);
  padding: 0.75rem 1rem;
  color: var(--text);
  font-size: var(--fs-s);
}
.zt-form-success[hidden],
.zt-form-errors[hidden] {
  display: none;
}

/* ---------- Visually hidden ---------- */
.zt-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;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .zt-cart-line.is-loading .zt-cart-line__media,
  .zt-cart-line.is-loading .zt-cart-line__info,
  .zt-cart-line.is-loading .zt-cart-line__total {
    animation: none;
  }
}

/* [hidden] must win over display:grid on toggled containers. */
.zt-cart[hidden], .zt-cart-page [hidden] { display: none !important; }

/* Selectable option cards (shipping + payment), rendered by checkout.js / checkout.php. */
.zt-radio-group { display: grid; gap: var(--s-3); }
.zt-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.zt-option:hover { border-color: var(--line-strong); }
.zt-option:has(input:checked) { border-color: var(--accent-2-line); background: var(--accent-2-soft); }
.zt-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.zt-option:has(input:focus-visible) { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.zt-option input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent-2); }
.zt-option__body { display: grid; gap: .15rem; min-width: 0; }
.zt-option__title { font-weight: 500; color: var(--text); }
.zt-option__meta { font-size: var(--fs-xs); color: var(--text-2); }
.zt-option__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }

/* Item list in the order summary */
.zt-summary__items { list-style: none; margin: 0 0 var(--s-4); padding: 0 0 var(--s-3); border-bottom: 1px solid var(--line); display: grid; gap: .5rem; }
.zt-summary__item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--fs-s); }
.zt-summary__item-name { color: var(--text); min-width: 0; }
.zt-summary__item-qty { color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.zt-summary__item-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Empty cart: centred text and actions */
.zt-cart__empty p { margin-inline: auto; }
.zt-cart__empty .zt-actions { justify-content: center; }


/* Gate fixes: option cards must beat the generic radio-group label rule; hidden rows stay hidden. */
.zt-radio-group .zt-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; }
.zt-radio-group .zt-option input { accent-color: var(--accent-2); margin: 0; }
.zt-summary__row[hidden] { display: none; }
.zt-summary__item-qty { margin-left: .4rem; }
.zt-checkout__form .zt-form__fieldset { margin-bottom: var(--s-2); }
.zt-checkout__form h2:not(:first-child) { margin-top: var(--s-6); }

.zt-thanks [hidden] { display: none !important; }

/* flow.css */
/* flow.css – checkout/build-request flow styling (Revision 3). Loaded after checkout.css. */

.zt-steps {
    list-style: none;
    margin: 0 0 var(--s-5);
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.zt-steps__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}

.zt-steps__item + .zt-steps__item::before {
    content: "";
    width: clamp(16px, 4vw, 40px);
    height: 1px;
    background: var(--line-strong);
    margin-right: 0.5rem;
}

.zt-steps__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 0.75rem;
}

.zt-steps__item.is-current {
    color: var(--text);
}

.zt-steps__item.is-current .zt-steps__num {
    background: var(--accent-2);
    color: var(--bg);
    border-color: var(--accent-2);
    box-shadow: 0 0 0 4px var(--accent-2-soft);
}

.zt-steps__item.is-done .zt-steps__num {
    background: var(--ok-soft);
    color: var(--ok);
    border-color: rgba(127, 174, 114, 0.4);
}

.zt-steps__item.is-done + .zt-steps__item::before {
    background: var(--ok);
}

.zt-steps__link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: inherit;
    text-decoration: none;
}

.zt-steps__link:hover .zt-steps__label {
    color: var(--text);
}

@media (max-width: 479.98px) {
    .zt-steps__item:not(.is-current) .zt-steps__label {
        display: none;
    }
}

/* Build request: two-column grid with sticky aside */
.zt-request-grid {
    display: grid;
    gap: var(--s-6);
}

@media (min-width: 1024px) {
    .zt-request-grid {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
        align-items: start;
    }

    .zt-request-grid__aside {
        position: sticky;
        top: calc(var(--header-h) + 2rem);
    }
}

.zt-request-grid__aside {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.zt-request-grid__aside > *:not(img) {
    padding-left: clamp(1.25rem, 3vw, 1.75rem);
    padding-right: clamp(1.25rem, 3vw, 1.75rem);
}

.zt-request-grid__aside > img {
    display: block;
}

.zt-request-aside__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Field groups: 2-column grid from 640px */
.zt-fields {
    display: grid;
    gap: var(--s-4) var(--s-4);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .zt-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.zt-fields > .zt-form__field--full,
.zt-fields > .zt-form__field--check,
.zt-fields > .zt-file-upload {
    grid-column: 1 / -1;
}

.zt-fields .zt-form__input {
    width: 100%;
}

/* Coupon row */
.zt-coupon {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: end;
}

.zt-coupon .zt-btn {
    min-height: 50px;
}

/* Success mark on /checkout/danke */
.zt-success-mark {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ok-soft);
    color: var(--ok);
    box-shadow: 0 0 0 8px rgba(127, 174, 114, 0.08);
    margin-bottom: var(--s-5);
}

@media (prefers-reduced-motion: no-preference) {
    .zt-success-mark {
        animation: zt-pop-in 0.6s var(--ease-spring);
    }
}

@keyframes zt-pop-in {
    from {
        transform: scale(0.6);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Tighten panel spacing */
.zt-checkout__form h2:not(:first-child),
.zt-build-request h2:not(:first-child) {
    margin-top: var(--s-6);
}

/* Address field grid spans the full fieldset (fieldset itself may be a 2-col grid). */
.zt-form__fieldset > .zt-fields, .zt-checkout__form .zt-fields { grid-column: 1 / -1; width: 100%; }

/* post.css */
/* post.css – editorial single post (magazine layout) */

.zt-post {
    padding-bottom: var(--section-y);
}

.zt-post-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: var(--s-5);
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    min-height: clamp(320px, 42vw, 520px);
    display: flex;
    align-items: flex-end;
    background: var(--surface-1);
}

.zt-post-hero:not(.zt-post-hero--image) {
    min-height: auto;
    padding-top: var(--s-7);
}

.zt-post-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transform: scale(1.06);
    animation: zt-post-zoom 1.4s ease forwards;
}

.zt-post-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(10, 11, 12, 0.95) 0%, rgba(10, 11, 12, 0.55) 45%, rgba(10, 11, 12, 0.1) 100%);
}

.zt-post-hero__body {
    padding: clamp(1.5rem, 4vw, 3.5rem);
    max-width: 900px;
}

.zt-post-hero__title {
    font-size: var(--fs-h1);
    max-width: 22ch;
}

.zt-post-hero__meta {
    display: flex;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-2);
}

.zt-post-hero__meta span + span::before {
    content: "·";
    margin-right: 1rem;
    color: var(--accent-2);
}

.zt-post-layout {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.zt-post-lead {
    font-size: var(--fs-lead);
    color: var(--text);
    padding-left: 1.25rem;
    border-left: 2px solid var(--accent-2);
    margin: 0 0 var(--s-6);
    max-width: 62ch;
}

.zt-post-content {
    max-width: 70ch;
}

.zt-post-content p {
    color: var(--text-2);
}

.zt-post-content strong {
    color: var(--text);
}

.zt-post-content h2 {
    font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem);
    margin: 2.2em 0 0.6em;
    scroll-margin-top: calc(var(--header-h) + 2rem);
}

.zt-post-content h2::before {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    background: var(--accent-2);
    margin-bottom: 0.8rem;
}

.zt-post-content h3 {
    font-size: 1.3rem;
}

.zt-post-content ul,
.zt-post-content ol {
    padding-left: 1.4rem;
}

.zt-post-content blockquote {
    background: var(--surface-1);
    border-left: 3px solid var(--accent-2);
    border-radius: 0 var(--r-m) var(--r-m) 0;
    padding: 1rem 1.25rem;
}

.zt-post-content table {
    border-color: var(--line);
    border-radius: var(--r-m);
}

.zt-post-end {
    margin-top: var(--s-7);
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-1);
}

.zt-post-aside {
    display: grid;
    gap: var(--s-4);
}

.zt-post-toc {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-1);
    padding: 1.25rem 1.4rem;
}

.zt-post-toc__title {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    text-transform: uppercase;
    color: var(--text-3);
}

.zt-post-toc__title::before {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    background: var(--accent-2);
    margin-bottom: 0.8rem;
}

.zt-post-toc__list {
    list-style: none;
    counter-reset: toc;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}

.zt-post-toc__list li {
    counter-increment: toc;
}

.zt-post-toc__list a {
    display: grid;
    grid-template-columns: 2rem 1fr;
    padding: 0.45rem 0.5rem;
    border-radius: var(--r-s);
    color: var(--text-2);
    text-decoration: none;
    font-size: var(--fs-s);
}

.zt-post-toc__list a::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent-2);
}

.zt-post-toc__list a:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}

.zt-post-card {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.zt-post-card__img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
}

.zt-post-card__body {
    padding: 1.25rem 1.4rem;
    display: grid;
    gap: 0.6rem;
}

.zt-post-card__title {
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--text);
}

.zt-post-card__text {
    font-size: var(--fs-s);
    color: var(--text-2);
}

.zt-post-related {
    margin-top: var(--section-y);
}

@keyframes zt-post-zoom {
    from {
        transform: scale(1.06);
    }
    to {
        transform: scale(1);
    }
}

@media (min-width: 1024px) {
    .zt-post-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
        align-items: start;
    }

    .zt-post-aside {
        position: sticky;
        top: calc(var(--header-h) + 2rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .zt-post-hero__img {
        animation: none;
        transform: scale(1);
    }
}

/* service-config.css */
/* service-config.css — service funnel (phase 10). Loaded after flow.css.
   Package cards, service cards, form, done panel and fixed bottom bar are kept.
   Added: sticky stepper, per-step heroes, groups, request layout + summary. Only tokens. */

/* Page gets bottom padding so the fixed bar never covers content. */
.zt-svc {
    padding-bottom: 96px;
}

/* --- Header --- */
.zt-svc-head {
    max-width: var(--measure);
    margin-bottom: var(--s-6);
}

.zt-svc-head h1 {
    margin: var(--s-3) 0 var(--s-3);
    font-size: var(--fs-h1);
    line-height: var(--lh-head);
}

.zt-svc-head p:last-child {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
}

.zt-svc-section-title {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-h2);
    line-height: var(--lh-head);
}

/* --- Stepper --- */
.zt-svc-steps {
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
    z-index: var(--z-header);
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-1);
    padding: var(--s-3);
    margin-bottom: var(--s-6);
    scroll-margin-top: calc(var(--header-h) + var(--s-6));
}

/* Without the funnel JS the stepper has no function: hide it, stack steps. */
.zt-svc:not(.is-funnel) .zt-svc-steps {
    display: none;
}

.zt-svc-steps__list {
    display: flex;
    align-items: stretch;
    gap: var(--s-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.zt-svc-steps__entry {
    flex: 1 1 0;
    min-width: 0;
}

.zt-svc-steps__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-2) var(--s-3);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r-s);
    cursor: pointer;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: var(--fs-s);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    transition: color var(--d-1) var(--ease-out),
        background var(--d-1) var(--ease-out);
}

.zt-svc-steps__num {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    border: 1px solid var(--line-strong);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-3);
    transition: background var(--d-1) var(--ease-out),
        color var(--d-1) var(--ease-out),
        border-color var(--d-1) var(--ease-out);
}

.zt-svc-steps__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zt-svc-steps__entry.has-selection .zt-svc-steps__count {
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--s-1);
    border-radius: var(--r-pill);
    background: var(--accent-2);
    color: var(--bg-deep);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: normal;
}

.zt-svc-steps__item[aria-current="step"] {
    color: var(--accent-2);
    background: var(--accent-2-soft);
    border-color: var(--accent-2-line);
}

.zt-svc-steps__item[aria-current="step"] .zt-svc-steps__num {
    background: var(--accent-2);
    color: var(--bg-deep);
    border-color: var(--accent-2);
}

.zt-svc-steps__item.is-past {
    color: var(--text-2);
}

.zt-svc-steps__item.is-past .zt-svc-steps__num {
    background: var(--accent-2-soft);
    color: var(--accent-2);
    border-color: var(--accent-2-line);
}

.zt-svc-steps__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Step sections --- */
.zt-svc-step__head {
    max-width: var(--measure);
    margin-bottom: var(--s-6);
}

.zt-svc-step__kicker {
    margin: 0 0 var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--accent-2);
}

.zt-svc-step__title {
    margin: 0 0 var(--s-3);
    font-size: var(--fs-h2);
    line-height: var(--lh-head);
}

.zt-svc-step__title:focus {
    outline: none;
}

.zt-svc-step__lead {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
}

.zt-svc-step__skip {
    margin: var(--s-5) 0 0;
}

.zt-svc-step__skip .zt-svc-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}

.zt-svc-step__skip .zt-svc-link svg {
    width: 1em;
    height: 1em;
}

/* --- Step hero (media steps) --- */
.zt-svc-step__hero {
    position: relative;
    border-radius: var(--r-l);
    overflow: hidden;
    margin-bottom: var(--s-6);
    background: var(--surface-3);
}

.zt-svc-step__img {
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: cover;
    display: block;
    aspect-ratio: 16 / 9;
}

.zt-svc-step__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: var(--measure);
    padding: var(--s-6);
    background: linear-gradient(90deg, var(--bg-deep) 0%, transparent 100%);
}

.zt-svc-step__overlay .zt-svc-step__kicker {
    margin-bottom: var(--s-2);
}

.zt-svc-step__overlay .zt-svc-step__lead {
    color: var(--text-2);
}

/* --- Groups --- */
.zt-svc-group {
    margin-bottom: var(--s-6);
}

.zt-svc-group__title {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: 0 0 var(--s-4);
    font-size: var(--fs-h3);
    line-height: var(--lh-head);
}

.zt-svc-group__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--r-s);
    background: var(--accent-2-soft);
    color: var(--accent-2);
}

/* --- Packages --- */
.zt-svc-packages__grid {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
    .zt-svc-packages__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile: horizontal scroll-snap rail. */
@media (max-width: 959.98px) {
    .zt-svc-packages__grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 85%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: var(--s-2);
    }

    .zt-svc-package {
        scroll-snap-align: start;
    }
}

.zt-svc-package {
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    transition: transform var(--d-2) var(--ease-out),
        box-shadow var(--d-2) var(--ease-out),
        border-color var(--d-2) var(--ease-out),
        background var(--d-2) var(--ease-out);
}

.zt-svc-package:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
}

.zt-svc-package.is-selected {
    border-color: var(--accent-2-line);
    background: var(--accent-2-soft);
}

.zt-svc-package__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--surface-3);
}

.zt-svc-package__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zt-svc-package__badge {
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
}

.zt-svc-package__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-5);
    flex: 1;
}

.zt-svc-package__title {
    margin: 0;
    font-size: var(--fs-h3);
    line-height: var(--lh-head);
}

.zt-svc-package__desc {
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-s);
    line-height: var(--lh-body);
}

.zt-svc-package__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-2);
}

.zt-svc-package__features li {
    position: relative;
    padding-left: var(--s-5);
    font-size: var(--fs-s);
    color: var(--text-2);
}

.zt-svc-package__features li::before {
    content: "·";
    position: absolute;
    left: var(--s-2);
    color: var(--accent-2);
    font-weight: 700;
}

.zt-svc-package__toggle {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--accent-2);
    font-family: var(--font-mono);
    font-size: var(--fs-s);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.zt-svc-package__foot {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
}

.zt-svc-package__price {
    font-family: var(--font-mono);
    font-size: var(--fs-h3);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.zt-svc-package__save {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ok);
}

/* --- Services --- */
.zt-svc-services__grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 480px) {
    .zt-svc-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .zt-svc-services__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.zt-svc-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    min-height: 150px;
    padding: var(--s-4);
    text-align: left;
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    cursor: pointer;
    color: var(--text);
    transition: border-color var(--d-1) var(--ease-out),
        background var(--d-1) var(--ease-out),
        opacity var(--d-1) var(--ease-out);
}

.zt-svc-card:hover {
    border-color: var(--line-strong);
}

.zt-svc-card.is-selected {
    border-color: var(--accent-2);
    background: var(--accent-2-soft);
}

.zt-svc-card.is-included {
    opacity: 0.55;
    cursor: default;
}

.zt-svc-card__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-s);
    background: var(--accent-2-soft);
    color: var(--accent-2);
}

.zt-svc-card__name {
    font-weight: 500;
    line-height: var(--lh-head);
}

.zt-svc-card__desc {
    font-size: var(--fs-xs);
    color: var(--text-2);
    line-height: var(--lh-body);
}

.zt-svc-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    margin-top: auto;
}

.zt-svc-card__price {
    font-family: var(--font-mono);
    font-size: var(--fs-s);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.zt-svc-card__state {
    display: grid;
    place-items: center;
    color: var(--text-3);
}

.zt-svc-card.is-selected .zt-svc-card__state {
    color: var(--accent-2);
}

.zt-svc-card__included {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-3);
}

/* --- Chips (slot radios) --- */
.zt-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: var(--text-2);
    border-radius: var(--r-pill);
    padding: var(--s-2) var(--s-4);
    font-family: var(--font-mono);
    font-size: var(--fs-s);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--d-1) var(--ease-out),
        color var(--d-1) var(--ease-out),
        background var(--d-1) var(--ease-out);
}

.zt-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.zt-chip.is-active,
.zt-chip:has(input:checked) {
    border-color: var(--accent-2);
    background: var(--accent-2-soft);
    color: var(--accent-2);
}

.zt-chip:has(input:focus-visible),
.zt-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Request step --- */
.zt-svc-request {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
    .zt-svc-request {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }
}

.zt-svc-form {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
    .zt-svc-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.zt-svc-form__col {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.zt-svc-slots {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.zt-svc-slots legend {
    padding: 0;
    margin-bottom: var(--s-3);
}

/* --- Summary --- */
.zt-svc-summary {
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    box-shadow: var(--shadow-1);
    padding: var(--s-5);
}

@media (min-width: 960px) {
    .zt-svc-summary {
        position: sticky;
        top: calc(var(--header-h) + var(--s-6));
    }
}

.zt-svc-summary__title {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-h3);
    line-height: var(--lh-head);
}

.zt-svc-summary__empty {
    margin: 0;
    color: var(--text-3);
    font-size: var(--fs-s);
    line-height: var(--lh-body);
}

.zt-svc-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    margin: var(--s-4) 0 var(--s-2);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-s);
    color: var(--text-2);
}

.zt-svc-summary__total strong {
    font-family: var(--font-mono);
    font-size: var(--fs-h3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.zt-svc-summary__note {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-xs);
    color: var(--text-3);
    line-height: var(--lh-body);
}

.zt-svc-summary__edit {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-2);
}

/* --- Text link button (accent-2) --- */
.zt-svc-link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--accent-2);
    font-family: var(--font-mono);
    font-size: var(--fs-s);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--d-1) var(--ease-out);
}

.zt-svc-link:hover {
    color: var(--accent-2-hover);
}

.zt-svc-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* --- Actions & done --- */
.zt-svc__actions {
    margin-top: var(--s-2);
}

.zt-svc__actions--row {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.zt-svc-done {
    text-align: center;
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
    padding: var(--s-8) var(--s-6);
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.zt-svc-done .zt-success-mark {
    margin-left: auto;
    margin-right: auto;
}

.zt-svc-done__total {
    font-family: var(--font-mono);
    font-size: var(--fs-h3);
    font-variant-numeric: tabular-nums;
    color: var(--text);
    margin-bottom: var(--s-5);
}

/* --- Fixed summary bar --- */
.zt-svc-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-overlay);
    background: var(--glass-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.55);
}

.zt-svc-bar__inner {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-height: 72px;
}

.zt-svc-bar__prev {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--r-s);
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--d-1) var(--ease-out),
        background var(--d-1) var(--ease-out);
}

.zt-svc-bar__prev svg {
    transform: scale(-1, 1);
    width: 18px;
    height: 18px;
}

.zt-svc-bar__prev:hover {
    border-color: var(--accent-2-line);
    background: var(--accent-2-soft);
    color: var(--accent-2);
}

.zt-svc-bar__prev:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.zt-svc-bar__summary {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--text);
    font-family: var(--font-mono);
}

.zt-svc-bar__count {
    font-size: var(--fs-s);
    color: var(--accent-2);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.zt-svc-bar__total {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-2);
    font-size: var(--fs-s);
    color: var(--text-3);
}

.zt-svc-bar__total strong {
    font-family: var(--font-mono);
    font-size: var(--fs-h3);
    font-variant-numeric: tabular-nums;
    color: var(--text);
    font-weight: 600;
}

.zt-svc-bar__inner > .zt-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.zt-svc-bar__panel {
    border-top: 1px solid var(--line);
    max-height: 50vh;
    overflow-y: auto;
    background: var(--glass-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--s-4) 0;
}

.zt-svc-bar__panel .zt-container {
    display: grid;
    gap: var(--s-3);
}

.zt-svc__lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-2);
}

.zt-svc__line {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    font-size: var(--fs-s);
    color: var(--text-2);
}

.zt-svc__line span:last-child {
    flex: none;
    color: var(--text);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.zt-svc__empty {
    color: var(--text-3);
    font-size: var(--fs-s);
}

.zt-svc__note {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-3);
    line-height: var(--lh-body);
}

/* --- Step transition (only when motion allowed) --- */
@media (prefers-reduced-motion: no-preference) {
    .zt-svc-step {
        animation: zt-svc-fade var(--d-2) var(--ease-out);
    }

    @keyframes zt-svc-fade {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .zt-svc-package,
    .zt-svc-card,
    .zt-chip,
    .zt-svc-link,
    .zt-svc-steps__item,
    .zt-svc-bar__prev {
        transition: none;
    }
}

/* --- Mobile --- */
@media (max-width: 767.98px) {
    /* Stepper: horizontal rail, compact. */
    .zt-svc-steps {
        top: calc(var(--header-h) + var(--s-3));
        padding: var(--s-2);
    }

    .zt-svc-steps__list {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .zt-svc-steps__entry {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .zt-svc-steps__item {
        padding: var(--s-1) var(--s-2);
    }

    .zt-svc-steps__num {
        width: 24px;
        height: 24px;
    }

    /* Step hero: image on top, text below (no overlay). */
    .zt-svc-step__hero {
        margin-bottom: var(--s-4);
    }

    .zt-svc-step__img {
        max-height: 200px;
    }

    .zt-svc-step__overlay {
        position: static;
        padding: var(--s-4);
        background: none;
        justify-content: flex-start;
    }

    /* Cards: single column, compact. */
    .zt-svc-services__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-3);
    }

    .zt-svc-card {
        min-height: 0;
        padding: var(--s-3);
    }

    /* Request: stack, summary before form. */
    .zt-svc-request {
        display: flex;
        flex-direction: column;
    }

    .zt-svc-summary {
        order: -1;
        position: static;
    }

    /* Room for the fixed bottom bar. */
    .zt-svc {
        padding-bottom: calc(96px + var(--s-6));
    }

    .zt-svc-bar__inner > .zt-btn {
        padding-inline: var(--s-4);
    }

    .zt-svc-bar__inner > .zt-btn .zt-btn__icon {
        display: none;
    }

    [data-zt-svc-total-label] {
        display: none;
    }
}

/* Review fix: display rules above must not override the hidden attribute. */
.zt-svc-bar__inner > [hidden] { display: none; }

/* Review fix: compact bottom bar on phones (count and total on two short lines). */
@media (max-width: 767.98px) {
    .zt-svc-bar__summary { flex-direction: column; align-items: flex-start; gap: 0; }
    .zt-svc-bar__count { font-size: var(--fs-xs); white-space: nowrap; }
    .zt-svc-bar__total [data-zt-svc-total-label] { display: none; }
    .zt-svc-bar__total strong { font-size: 1.15rem; }
}

/* Phones: header island + sticky stepper took too much height, so the stepper
   scrolls with the page there (the bottom bar keeps navigation in reach). */
@media (max-width: 767.98px) {
    .zt-svc-steps { position: static; }
}

/* frames.css */
/* frames.css — /rahmen page and frames-in-shop blocks (P10c). Tokens only. */

/* Actions in the page head */
.zt-frames__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* Trust strip */
.zt-frames-trust {
  list-style: none;
  padding: var(--s-4);
  margin: var(--s-6) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
}

.zt-frames-trust li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text);
}

.zt-frames-trust .zt-icon {
  color: var(--accent-2);
  flex-shrink: 0;
}

/* List section */
.zt-frames-list {
  margin-top: var(--s-8);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}

.zt-frames-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.zt-frames-list__title {
  font-size: var(--fs-h2);
  margin: 0;
}

.zt-frames-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
}

.zt-frames-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

/* Wish tile */
.zt-frames-wish {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-3);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  border: 1px dashed var(--accent-2-line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
}

.zt-frames-wish__title {
  font-size: var(--fs-h3);
  margin: 0;
}

.zt-frames-wish__text {
  color: var(--text-2);
  margin: 0;
}

.zt-frames-wish .zt-btn {
  align-self: flex-start;
}

/* Without frames: wish tile spans full width */
.zt-frames-grid:only-child,
.zt-frames-wish:only-child {
  grid-column: 1 / -1;
}

/* Features: image + text */
.zt-frames-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-top: var(--s-9);
}

.zt-frames-features__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-l);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
}

.zt-frames-features__title {
  font-size: var(--fs-h2);
  margin: 0 0 var(--s-5);
}

.zt-frames-features__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-3);
}

.zt-frames-features__list li {
  padding: var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  color: var(--text-2);
  box-shadow: var(--shadow-1);
}

.zt-frames-features__list strong {
  display: block;
  color: var(--text);
  margin-bottom: .2rem;
}

/* Steps */
.zt-frames-steps {
  margin-top: var(--s-9);
}

.zt-frames-steps__title {
  font-size: var(--fs-h2);
  margin: 0 0 var(--s-5);
}

.zt-frames-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}

.zt-frames-steps__list li {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: var(--s-5);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
  color: var(--text-2);
  font-size: var(--fs-s);
}

.zt-frames-steps__num {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-pill);
  background: var(--accent-2-soft);
  border: 1px solid var(--accent-2-line);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent-2);
}

.zt-frames-steps__list strong {
  color: var(--text);
  font-size: var(--fs-body);
}

.zt-frames-steps__list a {
  color: var(--accent-2);
}

/* Coat: image + text */
.zt-frames-coat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-top: var(--s-9);
}

.zt-frames-coat__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-l);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--line);
}

.zt-frames-coat__title {
  font-size: var(--fs-h2);
  margin: 0 0 var(--s-3);
}

.zt-frames-coat__body p {
  color: var(--text-2);
  margin: 0 0 var(--s-4);
}

.zt-frames-coat__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* Shop frames block */
.zt-shop-frames {
  margin-bottom: var(--s-6);
}

.zt-shop-frames__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-5);
}

.zt-shop-frames__title {
  font-size: var(--fs-h2);
  margin: 0;
}

.zt-shop-frames__text {
  color: var(--text-2);
  margin: 0;
  flex: 1 1 100%;
}

.zt-shop-frames__link {
  color: var(--accent-2);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
}

.zt-shop-frames__link:hover {
  color: var(--accent-2-hover);
  text-decoration: underline;
}

.zt-shop-frames__next {
  font-size: var(--fs-h3);
  margin: var(--s-7) 0 var(--s-4);
}

/* Aside card */
.zt-shop-aside-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .3rem var(--s-3);
  align-items: center;
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: var(--text);
  transition: transform var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}

.zt-shop-aside-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-2-line);
}

.zt-shop-aside-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  grid-column: 1 / -1;
}

.zt-shop-aside-card__text {
  color: var(--text-2);
  font-size: var(--fs-s);
}

.zt-shop-aside-card__icon {
  display: grid;
  place-items: center;
  color: var(--accent-2);
}

/* Tablet */
@media (max-width: 959.98px) {
  .zt-frames-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zt-frames-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zt-frames-steps__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  .zt-frames__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .zt-frames__actions .zt-btn {
    width: 100%;
    justify-content: center;
  }

  .zt-frames-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
    padding: var(--s-3);
  }

  .zt-frames-trust li {
    font-size: var(--fs-s);
  }

  .zt-frames-grid {
    grid-template-columns: 1fr;
  }

  .zt-frames-features,
  .zt-frames-coat {
    grid-template-columns: 1fr;
  }

  .zt-frames-features__img,
  .zt-frames-coat__img {
    max-height: 220px;
    aspect-ratio: 16 / 9;
  }

  .zt-frames-steps__list {
    grid-template-columns: 1fr;
  }

  .zt-shop-frames__link {
    margin-left: 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .zt-shop-aside-card {
    transition: none;
  }

  .zt-shop-aside-card:hover {
    transform: none;
  }
}


/* order-lookup.css */
/* order-lookup.css — public order tracking (/bestellung).
   Scoped to the new .zt-lookup* classes. Colors and spacing use tokens only. */

.zt-lookup__form {
  max-width: 32rem;
}

.zt-lookup__result {
  margin-top: var(--s-5);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: var(--s-5);
}

/* 1. Head */
.zt-lookup__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}

.zt-lookup__number {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: var(--text);
  margin: var(--s-1) 0 0;
}

.zt-lookup__badge {
  flex-shrink: 0;
  background: var(--accent-2-soft);
  border: 1px solid var(--accent-2-line);
  color: var(--accent-2);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.zt-lookup__date {
  color: var(--text-3);
  font-size: var(--fs-s);
  margin: 0;
}

/* Labels for section headings */
.zt-lookup__label {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
}

/* 2. Blocks */
.zt-lookup__block {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.zt-lookup__block:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* 3. Timeline */
.zt-lookup__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--line);
  padding-left: var(--s-3);
}

.zt-lookup__timeline li {
  position: relative;
  padding: var(--s-2) 0;
}

.zt-lookup__timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-3) - 5px);
  top: calc(var(--s-2) + var(--s-1));
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
}

.zt-lookup__timeline li.is-current::before {
  background: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-2-soft);
}

.zt-lookup__timeline li.is-current .zt-lookup__timeline-label {
  color: var(--accent-2);
}

.zt-lookup__timeline-label,
.zt-lookup__timeline-when {
  display: block;
}

.zt-lookup__timeline-label {
  color: var(--text);
}

.zt-lookup__timeline-when {
  color: var(--text-3);
  font-size: var(--fs-xs);
  margin-top: var(--s-1);
}

/* 4. Items */
.zt-lookup__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zt-lookup__item {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}

.zt-lookup__item:last-child {
  border-bottom: 0;
}

.zt-lookup__item-qty {
  color: var(--text-2);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
}

.zt-lookup__item-name {
  flex: 1;
}

.zt-lookup__item-variant {
  color: var(--text-2);
}

/* 5. Totals */
.zt-lookup__totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-3);
  margin: 0;
}

.zt-lookup__totals dt {
  color: var(--text-2);
}

.zt-lookup__totals dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.zt-lookup__totals .zt-lookup__total-label {
  color: var(--text);
  font-weight: 600;
}

.zt-lookup__totals .zt-lookup__total {
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1;
  border-top: 1px solid var(--line-strong);
  padding-top: var(--s-2);
}

/* 6. Payment rows */
.zt-lookup__row {
  margin: 0 0 var(--s-1);
}

.zt-lookup__row .zt-lookup__label {
  display: inline;
  margin: 0;
}

/* 7. Hint */
.zt-lookup__hint {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: var(--fs-s);
}

.zt-lookup__hint a {
  color: var(--accent-2);
}

/* Mobile: stack the head, keep totals two-column. */
@media (max-width: 767.98px) {
  .zt-lookup__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }

  .zt-lookup__badge {
    order: -1;
  }
}

/* frame-check.css */
/* frame-check.css — /rahmennummer-check. Tokens only. Mobile first. */

/* 1. Hero */
.zt-fc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-y);
}

.zt-fc-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
}

.zt-fc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 34%, transparent 100%);
}

.zt-fc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .zt-fc-hero {
    min-height: min(44rem, 88dvh);
  }
  .zt-fc-hero::after {
    background: linear-gradient(to right, var(--bg) 8%, rgba(17, 18, 20, .88) 34%, transparent 82%);
  }
  .zt-fc-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  }
}

/* 2. Facts list */
.zt-fc-facts {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.zt-fc-facts li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-2);
}

.zt-fc-facts .zt-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

/* 3. Card (form container) */
.zt-fc-card {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: var(--s-6);
}

.zt-fc-card__title {
  margin: 0 0 var(--s-4);
}

.zt-fc-examples {
  color: var(--text-3);
  font-size: var(--fs-s);
  margin: var(--s-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

/* 4. Chips */
.zt-fc-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  padding: .3rem .8rem;
  cursor: pointer;
}

.zt-fc-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.zt-fc-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 5. Where section */
.zt-fc-where__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
}

@media (min-width: 900px) {
  .zt-fc-where__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-8);
  }
}

.zt-fc-where__figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
}

.zt-fc-where__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.zt-fc-where__figure figcaption {
  color: var(--text-3);
  font-size: var(--fs-s);
  padding: var(--s-3) var(--s-1);
}

.zt-fc-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-1);
}

/* Pin positions on aufbau-rahmen-v2.webp (inline styles are blocked by the CSP). */
.zt-fc-pin--1 { --x: 66%; --y: 21%; }
.zt-fc-pin--2 { --x: 73%; --y: 13%; }

.zt-fc-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: zt-fc-pin-pulse var(--d-4) var(--ease-out) infinite;
}

@keyframes zt-fc-pin-pulse {
  0% {
    transform: scale(1);
    opacity: .9;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zt-fc-pin::after {
    animation: none;
    display: none;
  }
}

/* 6. Steps */
.zt-fc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}

.zt-fc-steps li {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
}

.zt-fc-steps__num {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .1rem;
}

/* 7. Layout with aside */
.zt-fc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
}

@media (min-width: 1024px) {
  .zt-fc-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

.zt-fc-aside {
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

@media (min-width: 1024px) {
  .zt-fc-aside {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
  }
}

/* 8. Note boxes */
.zt-fc-note {
  background: var(--surface-1);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--r-m);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
}

.zt-fc-note--warn {
  border-left-color: var(--warn);
}

.zt-fc-note__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
}

.zt-fc-note__head .zt-icon {
  color: var(--warn);
}

.zt-fc-note__head h2 {
  margin: 0;
}

/* 9. Jump nav */
.zt-fc-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

/* 10. Side cards */
.zt-fc-side {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: var(--s-5);
}

.zt-fc-side--media {
  padding: 0;
  overflow: hidden;
}

.zt-fc-side--media img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.zt-fc-side--media .zt-fc-side__body {
  padding: var(--s-5);
}

.zt-fc-side__title {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-h3);
}

.zt-fc-side p {
  color: var(--text-2);
  margin: 0 0 var(--s-3);
}

.zt-fc-side ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}

.zt-fc-side a:not(.zt-btn) {
  color: var(--accent);
  text-decoration: none;
}

.zt-fc-side a:not(.zt-btn):hover {
  text-decoration: underline;
}

.zt-fc-side__contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.zt-fc-side__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text);
  text-decoration: none;
}

.zt-fc-side__contact a:hover {
  color: var(--accent);
}

.zt-fc-side__contact .zt-icon {
  color: var(--text-3);
}

/* 11. Form */
.zt-frame-check__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}

.zt-frame-check__number {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

@media (min-width: 720px) {
  /* Inside the hero card the form stays single-column; the button spans the card. */
  .zt-fc-card .zt-frame-check__form .zt-btn {
    width: 100%;
  }
}

/* 12. Result */
.zt-frame-check__result {
  margin-top: var(--s-6);
  animation: zt-frame-check-in var(--d-2) var(--ease-out) both;
}

@keyframes zt-frame-check-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zt-frame-check__result {
    animation: none;
  }
}

.zt-frame-check__result-heading {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--s-4);
}

/* Focused by script: no ring for script/mouse focus, keep it for keyboard. */
.zt-frame-check__result-heading:focus:not(:focus-visible) {
  outline: none;
}

.zt-frame-check__multi {
  color: var(--text-2);
  font-size: var(--fs-s);
  margin: 0 0 var(--s-3);
}

/* 13. Hit cards */
.zt-frame-check__hit {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}

.zt-frame-check__hit:last-of-type {
  margin-bottom: 0;
}

.zt-frame-check__hit--warn {
  background: var(--warn-soft);
  border-color: var(--warn-line);
}

.zt-frame-check__hit--gap {
  border-style: dashed;
  border-color: var(--line-strong);
}

.zt-frame-check__hit-series {
  display: block;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin: 0;
}

.zt-frame-check__hit-title {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.15;
  margin: var(--s-1) 0 0;
}

.zt-frame-check__hit-meta {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-s);
  margin: var(--s-2) 0 0;
}

.zt-frame-check__hit-link {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  margin-top: var(--s-3);
}

.zt-frame-check__hit-link:hover,
.zt-frame-check__hit-link:focus-visible {
  text-decoration: underline;
}

/* 14. Hint under the result */
.zt-frame-check__hint {
  color: var(--text-3);
  font-size: var(--fs-s);
  margin-top: var(--s-3);
}

/* 15. Series tables */
details.zt-frame-check__series {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  margin-bottom: var(--s-3);
}

details.zt-frame-check__series:last-of-type {
  margin-bottom: 0;
}

details.zt-frame-check__series summary {
  font-weight: 600;
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  border-radius: var(--r-m);
}

details.zt-frame-check__series summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

details.zt-frame-check__series > p {
  padding: 0 var(--s-4);
  margin: 0 0 var(--s-3);
  color: var(--text-2);
}

details.zt-frame-check__series .zt-content {
  padding: 0 var(--s-4) var(--s-4);
}

details.zt-frame-check__series table {
  width: 100%;
}

/* Long compound words in the hero heading must not overflow narrow phones. */
@media (max-width: 30rem) {
  .zt-fc-hero h1 {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

.zt-fc-side__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.zt-fc-side__list a {
  color: var(--text);
  text-decoration: none;
}

.zt-fc-side__list a:hover,
.zt-fc-side__list a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

/* offer.css */
/* offer.css — public offer page (phase 13, Teil C).
   New component classes only, everything referenced through design tokens. */

.zt-offer__head {
  margin-bottom: var(--s-6);
}

.zt-offer__head h1 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}

.zt-offer__valid {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-2);
}

.zt-offer__valid .zt-label {
  margin-right: var(--s-1);
}

.zt-offer__intro {
  margin: 0 0 var(--s-6);
  color: var(--text);
  line-height: 1.6;
}

.zt-offer__items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s-6);
}

.zt-offer__items th,
.zt-offer__items td {
  padding: var(--s-2) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

.zt-offer__items thead th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.zt-offer__item-title {
  display: block;
  color: var(--text);
  font-weight: 500;
}

.zt-offer__item-note {
  display: block;
  margin-top: var(--s-1);
  color: var(--text-2);
  font-size: 0.9rem;
}

.zt-offer__totals {
  margin: 0 0 var(--s-6);
  max-width: 24rem;
  margin-left: auto;
}

.zt-offer__totals div,
.zt-offer__totals {
  display: grid;
}

.zt-offer__totals {
  grid-template-columns: 1fr;
  gap: 0;
}

.zt-offer__totals > div {
  display: flex;
  justify-content: space-between;
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--linie);
}

.zt-offer__totals dt {
  color: var(--text-2);
}

.zt-offer__totals dd {
  margin: 0;
  color: var(--text);
  font-weight: 500;
}

.zt-offer__totals > div:last-child {
  border-bottom: 0;
  border-top: 2px solid var(--rot);
  padding-top: var(--s-2);
}

.zt-offer__totals > div:last-child dt,
.zt-offer__totals > div:last-child dd {
  color: var(--text);
  font-weight: 700;
}

.zt-offer__note {
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.6;
}

.zt-offer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.zt-offer__confirmation {
  color: var(--ok);
  font-weight: 500;
}

.zt-offer__confirmation--muted {
  color: var(--text-2);
}

.zt-offer__state {
  padding: var(--s-2) var(--s-4);
  margin-bottom: var(--s-4);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
}

.zt-offer__state--error {
  border-color: var(--rot);
  background: var(--rot-leise);
  color: var(--text);
}

.zt-offer__state--muted {
  border-color: var(--linie);
  color: var(--text-2);
}

.zt-offer__loading {
  color: var(--text-2);
}

/* Mobile: single column, table as list. */
@media (max-width: 640px) {
  .zt-offer__items thead {
    display: none;
  }

  .zt-offer__items,
  .zt-offer__items tbody,
  .zt-offer__items tr,
  .zt-offer__items td {
    display: block;
    width: 100%;
  }

  .zt-offer__items tr {
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--linie);
  }

  .zt-offer__items td {
    border-bottom: 0;
    padding: var(--s-1) var(--s-2);
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--s-2);
  }

  .zt-offer__items td[data-label]::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
  }
}

/* product-gallery.css */
/* product-gallery.css — fullscreen dialog viewer for .zt-gallery (product & frame pages). */

.zt-gallery__main.is-zoomable {
  cursor: zoom-in;
}

.zt-gallery__main.is-zoomable:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.zt-lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(10, 11, 12, 0.94);
}

.zt-lightbox::backdrop {
  background: rgba(10, 11, 12, 0.94);
}

.zt-lightbox__img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
}

.zt-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--glass-strong);
  color: var(--text);
  cursor: pointer;
}

.zt-lightbox__close:hover {
  color: var(--accent-2);
}

.zt-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--glass-strong);
  color: var(--text);
  cursor: pointer;
}

.zt-lightbox__nav:hover {
  color: var(--accent-2);
}

.zt-lightbox__nav--prev {
  left: 1rem;
}

.zt-lightbox__nav--next {
  right: 1rem;
}

.zt-lightbox__counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-2);
}

.zt-lightbox :focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

@media (max-width: 719px) {
  .zt-lightbox__close {
    top: 0.75rem;
    right: 0.75rem;
  }

  .zt-lightbox__nav {
    top: auto;
    bottom: 1rem;
    transform: none;
  }

  .zt-lightbox__nav--prev {
    left: 0.75rem;
  }

  .zt-lightbox__nav--next {
    right: 0.75rem;
  }

  .zt-lightbox__counter {
    bottom: calc(1rem + 64px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zt-lightbox,
  .zt-lightbox *,
  .zt-gallery__main {
    transition: none !important;
  }
}

/* mobile/content.css */
/* mobile/content.css — service tabs stay on one swipeable line and the post TOC is hidden. */

@media (max-width: 767.98px) {
  .zt-service-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .zt-service-tabs::-webkit-scrollbar {
    display: none;
  }

  .zt-service-tabs__link {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* On phones the TOC renders after the article text and is of no help there. */
  .zt-post-toc {
    display: none;
  }
}

/* mobile/global.css */
/* mobile/global.css — keeps breadcrumbs on a single line and trims long titles with an ellipsis. */

@media (max-width: 767.98px) {
  .zt-breadcrumb__list {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .zt-breadcrumb__item {
    flex-shrink: 0;
    min-width: 0;
  }

  .zt-breadcrumb__item:last-child {
    flex-shrink: 1;
    overflow: hidden;
  }

  .zt-breadcrumb__current {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Breadcrumbs placed directly in the container stuck to the test banner. */
  .zt-container > .zt-breadcrumb:first-child {
    padding-top: var(--s-3);
  }
}

/* mobile/shop.css */
/* mobile/shop.css — mobile optimizations for shop, product, cart, checkout pages.
   Only mobile-specific overrides within @media (max-width: 767.98px).
   Uses design tokens from tokens.css; no inline styles, no external resources.
   Loaded last; does not touch global headers, nav, footer, buttons, typography base. */

@media (max-width: 767.98px) {
  /* ---------- Cart line: optimize mobile layout ---------- */
  /* Markup (cart.php) uses: media, info (name/variant/unit), qty, total, remove. */
  .zt-cart-line {
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas:
      "media info"
      "media total"
      "qty remove";
    gap: 0.5rem;
    padding: 0.75rem;
    align-items: start;
  }

  .zt-cart-line__media {
    width: 80px;
    height: 60px;
  }

  .zt-cart-line__name {
    font-size: 1rem;
  }

  .zt-cart-line__variant,
  .zt-cart-line__unit {
    font-size: var(--fs-xs);
    margin-top: 0.25rem;
  }

  .zt-cart-line__total {
    grid-area: total;
    text-align: left;
    margin-top: 0.25rem;
    font-size: 1rem;
  }

  /* qty and remove in a row below image */
  .zt-qty {
    grid-area: qty;
    width: auto;
    justify-self: start;
  }

  .zt-qty__btn {
    width: 32px;
    height: 36px;
  }

  .zt-qty__input {
    width: 40px;
    height: 36px;
  }

  .zt-cart-line__remove {
    grid-area: remove;
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    background: var(--surface-2);
    border-radius: var(--r-btn);
    border: 1px solid var(--line);
    justify-self: end;
  }

  .zt-cart-line__remove:hover {
    background: var(--surface-3);
  }

  /* ---------- Cart page layout ---------- */
  .zt-cart {
    grid-template-columns: 1fr;
  }

  .zt-cart__summary {
    order: -1;
  }

  .zt-cart__list {
    gap: var(--s-2);
  }

  /* ---------- Checkout summary (sticky on desktop, full-width on mobile) ---------- */
  .zt-summary__row {
    padding-block: 0.6rem;
    gap: 0.75rem;
  }

  .zt-summary__row dt {
    min-width: 0;
  }

  .zt-summary__row dd {
    white-space: nowrap;
    min-width: 100px;
    text-align: right;
  }

  .zt-summary__actions {
    margin-top: var(--s-4);
  }

  /* ---------- Checkout form: full-width inputs ---------- */
  .zt-checkout input[type="text"],
  .zt-checkout input[type="email"],
  .zt-checkout input[type="tel"],
  .zt-checkout input[type="number"],
  .zt-checkout select,
  .zt-checkout textarea {
    width: 100%;
    max-width: 100%;
  }

  .zt-form__field {
    margin-bottom: var(--s-3);
  }

  /* ---------- Product grid: two compact columns ---------- */
  .zt-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }

  .zt-product-grid .zt-card__body {
    padding: var(--s-3);
  }

  .zt-product-grid .zt-card__title {
    font-size: 1.05rem;
    line-height: 1.15;
  }

  .zt-product-grid .zt-card__text {
    display: none;
  }

  .zt-product-grid .zt-card__price {
    font-size: 1rem;
    padding-top: var(--s-2);
  }

  /* Very narrow phones: single column again */
  @media (max-width: 339.98px) {
    .zt-product-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ---------- Filter above the grid: compact two-column rows ---------- */
  .zt-shop__aside .zt-filter__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zt-shop__aside .zt-filter__group--grow,
  .zt-shop__aside .zt-filter__actions {
    grid-column: 1 / -1;
  }

  .zt-shop__aside .zt-filter__actions .zt-btn {
    flex: 1 1 0;
  }

  /* The frame link card in the filter column duplicates the frame block on phones. */
  .zt-shop-aside-card {
    display: none;
  }

  /* Review fix: sort select gets the full row so its label is not cut off. */
  .zt-shop__aside .zt-filter__group:nth-child(4) { grid-column: 1 / -1; }
}

/* referenzen.css */
/* referenzen.css — Referenzen-Karten mit Studiobild und Originalfoto (am 27.10.2026 direkt auf dem Server ergänzt, hier ins Repo übernommen). */
/* ---------- Referenzen: Studiobild und Originalfoto zum Wischen ----------
   Gehört zu assets/js/referenzen.js und zt_referenzen_karten() in
   inc/views/page.php. Die Karte selbst ist eine normale .zt-card, nur die
   Bildfläche bekommt eine Wischspur mit zwei Seiten. */
.zt-ref-swipe { position: relative; }
.zt-ref-swipe__track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.zt-ref-swipe__track::-webkit-scrollbar { display: none; }
.zt-ref-swipe__track:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: -2px; }
.zt-ref-swipe__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.zt-ref-swipe__slide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Originalfoto: hochkant, also ganz zeigen und den Rand mit einer
   weichgezeichneten Kopie füllen statt mit schwarzen Balken. */
.zt-ref-swipe__slide--original > .zt-ref-swipe__photo {
  position: relative;
  z-index: 1;
  object-fit: contain;
}
.zt-ref-swipe__slide--original > .zt-ref-swipe__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
  filter: blur(26px) brightness(.45) saturate(.6);
  transform: scale(1.2);
}
.zt-ref-swipe__label {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  z-index: 2;
  padding: .35rem .65rem;
  border-radius: var(--r-s);
  background: var(--glass-strong);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  pointer-events: none;
}
.zt-ref-swipe__label--original { background: var(--accent); color: #fff; }
.zt-ref-swipe__btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--glass-strong);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.zt-ref-swipe__btn:hover { background: var(--surface-1); border-color: var(--text-3); }
.zt-ref-swipe__btn:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.zt-ref-swipe__btn svg { width: 20px; height: 20px; }
.zt-ref-swipe__btn[hidden] { display: none; }
.zt-ref-swipe__btn--prev { left: .6rem; }
.zt-ref-swipe__btn--next { right: .6rem; }
.zt-ref-swipe__dots {
  position: absolute;
  right: .75rem;
  bottom: .95rem;
  z-index: 2;
  display: flex;
  gap: .3rem;
  pointer-events: none;
}
.zt-ref-swipe__dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  transition: width var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.zt-ref-swipe__dots span.is-active { width: 16px; background: var(--accent); }
/* Auf der Referenzseite soll die Bildfläche beim Wischen nicht mitzoomen. */
.zt-ref-card .zt-card__media img { transition: none; }
.zt-ref-card:hover .zt-card__media img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .zt-ref-swipe__btn,
  .zt-ref-swipe__dots span { transition: none; }
}
/* Die Karten stehen im Seiteninhalt (.zt-prose). Dessen Abstände für Bilder
   und Zwischenüberschriften sollen hier nicht greifen, damit die Karte aussieht
   wie jede andere .zt-card. */
.zt-prose .zt-ref-card img { max-width: none; margin: 0; border-radius: 0; }
.zt-prose .zt-ref-card .zt-card__title { margin: 0; font-weight: 600; font-size: 1.3rem; line-height: 1.1; }
.zt-prose .zt-ref-card .zt-card__text { margin: 0; max-width: none; }