/* Hallmark · pre-emit critique: P5 H4 E4 S4 R5 V4
 * genre: editorial · macrostructure: Photographic · theme: custom (cream/ink/brass, green variant)
 * enrichment: none (labelled photo placeholders) · nav: N6 masthead · footer: Ft1 mast-headed
 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.04; letter-spacing: 0.01em; margin: 0; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.section { padding-block: var(--space-3xl); }
.rule { height: var(--rule-hair); background: var(--color-rule); border: 0; margin: 0; }

/* skip link */
.skip { position: absolute; left: -999px; top: 0; background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md); z-index: 100; }
.skip:focus { left: var(--space-md); top: var(--space-md); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ───────── eyebrow / small caps ───────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent-deep);
}

/* ───────── NAV · N6 masthead ───────── */
.masthead { border-bottom: var(--rule-hair) solid var(--color-ink); }
.masthead__issue {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  padding-block: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-mute);
}
.masthead__title { text-align: center; padding-block: var(--space-xl) var(--space-md); }
.masthead__title a { text-decoration: none; }
.masthead__title h1 { font-size: clamp(2rem, 1.2rem + 4vw, 3.4rem); letter-spacing: 0.04em; }
.masthead__title .sub { display: block; font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0.30em; text-transform: uppercase; color: var(--color-ink-mute); margin-top: var(--space-md); }
.masthead__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(0.9rem, 3vw, 2.2rem); padding-block: var(--space-sm) var(--space-md); }
.masthead__nav a {
  font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: var(--color-ink); padding-block: 4px; position: relative; white-space: nowrap;
}
.masthead__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-mid) var(--ease-out); }
.masthead__nav a:hover::after, .masthead__nav a:focus-visible::after { transform: scaleX(1); }

/* toggles in issue row */
.toggles { display: flex; align-items: center; gap: var(--space-md); }
.toggle-group { display: inline-flex; border: var(--rule-hair) solid var(--color-rule); border-radius: 999px; overflow: hidden; }
.toggle-group button {
  font: inherit; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; color: var(--color-ink-mute); border: 0; cursor: pointer;
  padding: 6px 11px; min-height: 32px; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.toggle-group button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.toggle-swatch { width: 14px; height: 14px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; min-height: 0; }
.swatch-gold  { background: oklch(58% 0.085 78); outline-offset: 3px; }
.swatch-green { background: oklch(48% 0.072 158); }
.swatch-wrap { display: inline-flex; align-items: center; gap: 7px; }
.swatch-wrap [aria-pressed="true"] { box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 3px var(--color-ink); }

/* ───────── HERO · H6 photographic fold ───────── */
.hero { position: relative; padding-block: var(--space-2xl) var(--space-3xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero__copy { padding-bottom: 0; }
.hero__copy .eyebrow { margin-bottom: var(--space-md); display: inline-block; }
.hero h2 { font-size: var(--text-display); font-weight: 500; }
.hero h2 em { font-style: italic; color: var(--color-accent-deep); }
.hero__lede { font-size: var(--text-lg); color: var(--color-ink-soft); max-width: 40ch; margin-top: var(--space-lg); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-mute); }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta span::before { content: ""; width: 5px; height: 5px; background: var(--color-accent); border-radius: 50%; }

/* photo placeholder ── elegant gallery mat, swap-ready */
.ph {
  position: relative; width: 100%;
  background:
    radial-gradient(120% 90% at 70% 10%, oklch(98% 0.01 85 / 0.7), transparent 60%),
    linear-gradient(135deg, var(--color-paper-2), var(--color-paper-3));
  border: var(--rule-hair) solid var(--color-rule);
  display: grid; place-content: center; text-align: center; color: var(--color-ink-mute); overflow: hidden;
}
.ph::before { /* inner mat line */
  content: ""; position: absolute; inset: 10px; border: var(--rule-hair) solid var(--color-rule); pointer-events: none;
}
.ph[data-cap]::after {
  content: attr(data-cap); font-family: var(--font-display); font-style: italic; font-size: var(--text-lg);
  color: var(--color-ink-mute); position: relative; z-index: 1;
}
.ph .ph-note { position: absolute; bottom: 14px; left: 0; right: 0; font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-mute); opacity: 0.7; }
.hero .ph { aspect-ratio: 4 / 5; }

/* ───────── STORY ───────── */
.story__grid { display: grid; grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.story h3 { font-size: var(--text-3xl); }
.story__body { max-width: var(--measure); }
.story__body p + p { margin-top: var(--space-md); }
.story__body .lead { font-size: var(--text-xl); color: var(--color-ink); font-family: var(--font-display); line-height: 1.3; margin-bottom: var(--space-lg); }
.story__body p { color: var(--color-ink-soft); }

/* ───────── SORTIMENT · catalogue grid ───────── */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-xl); }
.sec-head h3 { font-size: var(--text-3xl); }
.sec-head .eyebrow { margin-bottom: var(--space-xs); }
.cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.4rem); }
.cat {
  text-decoration: none; color: inherit; display: block; position: relative;
}
.cat .ph { aspect-ratio: 3 / 4; transition: transform var(--dur-slow) var(--ease-out); }
.cat__frame { overflow: hidden; }
.cat:hover .ph, .cat:focus-visible .ph { transform: scale(1.04); }
.cat__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-ink); }
.cat__label .de { font-family: var(--font-display); font-size: var(--text-xl); }
.cat__label .it { font-size: var(--text-sm); color: var(--color-ink-mute); font-style: italic; }
.cat__arrow { font-size: var(--text-base); color: var(--color-accent-deep); transition: transform var(--dur-mid) var(--ease-out); }
.cat:hover .cat__arrow, .cat:focus-visible .cat__arrow { transform: translateX(5px); }

/* ───────── FEATURED ── selected pieces ───────── */
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.feat figure { margin: 0; }
.feat .ph { aspect-ratio: 1 / 1; }
.feat figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-soft); }
.feat figcaption b { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); color: var(--color-ink); display: block; }

/* ───────── STANDORT teaser ───────── */
.standort { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.standort__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.standort h3 { font-size: var(--text-3xl); margin-bottom: var(--space-md); }
.standort dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xs) var(--space-lg); margin: var(--space-lg) 0 0; }
.standort dt { font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink-mute); padding-top: 4px; }
.standort dd { margin: 0; color: var(--color-ink); }
.standort dd .hint { color: var(--color-ink-mute); font-style: italic; font-size: var(--text-sm); }
.standort .ph { aspect-ratio: 16 / 11; }

/* ───────── KONTAKT CTA ───────── */
.contact { text-align: center; }
.contact h3 { font-size: var(--text-3xl); margin-bottom: var(--space-lg); }
.contact__lede { color: var(--color-ink-soft); max-width: 46ch; margin-inline: auto; margin-bottom: var(--space-xl); }
.contact__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 14px 26px; min-height: 48px; border-radius: var(--radius-md); white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--color-ink); color: var(--color-paper); border: var(--rule-hair) solid var(--color-ink); }
.btn--primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--color-ink); border: var(--rule-hair) solid var(--color-ink); }
.btn--ghost:hover { background: var(--color-paper-3); }
.btn--ghost:active { transform: translateY(1px); }

/* ───────── FOOTER · Ft1 mast-headed ───────── */
.foot { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-2xl); }
.foot a { color: var(--color-paper); }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.foot__brand h2 { font-size: var(--text-2xl); color: var(--color-paper); }
.foot__brand p { color: oklch(82% 0.012 80); margin-top: var(--space-sm); max-width: 34ch; font-size: var(--text-sm); }
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.foot__cols h4 { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: oklch(72% 0.04 80); margin: 0 0 var(--space-sm); }
.foot__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot__cols a { text-decoration: none; font-size: var(--text-sm); color: oklch(88% 0.01 80); }
.foot__cols a:hover { color: var(--color-paper); text-decoration: underline; text-underline-offset: 3px; }
.foot__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid oklch(40% 0.01 80); font-size: var(--text-xs); color: oklch(70% 0.01 80); letter-spacing: 0.04em; }

/* ───────── logo (alpha-masked wordmark · gold sheen on hover) ───────── */
.masthead__title a { display: block; }
.logo-mark {
  display: block; margin-inline: auto;
  height: clamp(68px, 10vw, 116px); aspect-ratio: 1755 / 671;
  background-color: var(--color-ink); background-repeat: no-repeat;
  -webkit-mask: url("../assets/img/logo-mask.png") center / contain no-repeat;
          mask: url("../assets/img/logo-mask.png") center / contain no-repeat;
  clip-path: inset(0 0 0 0);
  transition: clip-path 2.4s var(--ease-out);
}
.logo-mark.predraw { clip-path: inset(0 102% 0 0); }   /* C: wipes in left→right on load */
.masthead__title a:hover .logo-mark,
.masthead__title a:focus-visible .logo-mark,
.logo-mark.sheen {
  background-image: linear-gradient(100deg,
    var(--color-ink) 0%, var(--color-ink) 38%,
    var(--color-accent-deep) 46%, oklch(82% 0.13 86) 50%, var(--color-accent-deep) 54%,
    var(--color-ink) 62%, var(--color-ink) 100%);
  background-size: 250% 100%;
  animation: logoSheen 1.15s var(--ease-in-out);
}
@keyframes logoSheen { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) {
  .logo-mark { transition: none; }
  .logo-mark.predraw { clip-path: inset(0 0 0 0); }
  .masthead__title a:hover .logo-mark, .logo-mark.sheen { animation: none; background-image: none; background-color: var(--color-accent-deep); }
}

/* ───────── real images in frames ───────── */
.cat__frame { overflow: hidden; position: relative; display: block; }
.cat__frame img, .cat__frame video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
.cat:hover .cat__frame img, .cat:focus-visible .cat__frame img { transform: scale(1.05); }
.feat figure:hover .cat__frame img { transform: scale(1.04); }

/* ───────── hero media · Ken-Burns living photo ───────── */
.hero__media { position: relative; overflow: hidden; border: var(--rule-hair) solid var(--color-rule); max-height: 560px;
  box-shadow: 0 16px 38px -24px oklch(26% 0.02 70 / 0.45);
  transition: transform 0.18s var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
  transform-style: preserve-3d; will-change: transform; }
.hero__media:hover { box-shadow: 0 34px 64px -28px oklch(26% 0.02 70 / 0.55); }
.hero__media img, .hero__media video { width: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; object-position: 50% 28%; display: block; }
.hero__media img { animation: kenburns 20s var(--ease-in-out) infinite alternate; }
@keyframes kenburns { from { transform: scale(1.001); } to { transform: scale(1.09); } }
.hero__media figcaption {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  background: oklch(26% 0.012 70 / 0.78); color: var(--color-paper);
  font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 12px; border-radius: var(--radius-sm); backdrop-filter: blur(2px);
}

/* ───────── moving marquee band ───────── */
.marquee { background: var(--color-accent-band); color: var(--color-on-accent); overflow: hidden; border-block: var(--rule-hair) solid var(--color-rule); }
.marquee__track { display: inline-flex; align-items: center; gap: var(--space-lg); white-space: nowrap; padding-block: var(--space-sm); will-change: transform; animation: scrollx 34s linear infinite; }
.marquee__track span { font-family: var(--font-display); font-size: var(--text-xl); font-style: italic; letter-spacing: 0.02em; }
.marquee__track .dot { color: var(--color-pop); font-style: normal; font-size: var(--text-lg); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ───────── ornament divider ───────── */
.ornament { display: flex; align-items: center; justify-content: center; gap: var(--space-md); padding-block: var(--space-xl); color: var(--color-accent); }
.ornament::before, .ornament::after { content: ""; height: 1px; width: clamp(40px, 18vw, 180px); background: linear-gradient(90deg, transparent, var(--color-rule)); }
.ornament::after { background: linear-gradient(90deg, var(--color-rule), transparent); }
.ornament svg { width: 34px; height: auto; opacity: 0.9; animation: breathe 6s var(--ease-in-out) infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.08); opacity: 1; } }

/* ───────── google maps ───────── */
.map-embed { width: 100%; aspect-ratio: 16 / 11; border: var(--rule-hair) solid var(--color-rule); overflow: hidden; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.92); }

/* ───────── gästebuch ───────── */
.guestbook { background: var(--color-accent-band); color: var(--color-on-accent); }
.guestbook .eyebrow { color: var(--color-pop); }
.guestbook h3 { color: var(--color-on-accent); font-size: var(--text-3xl); margin-bottom: var(--space-xs); }
.gb__intro { color: oklch(90% 0.02 150); max-width: 42ch; margin-bottom: var(--space-xl); }
.gb__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.gb form { display: grid; gap: var(--space-sm); }
.gb label { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: oklch(85% 0.02 150); }
.gb input, .gb textarea {
  font: inherit; color: var(--color-ink); background: var(--color-paper);
  border: var(--rule-hair) solid transparent; border-radius: var(--radius-md);
  padding: 12px 14px; width: 100%; transition: box-shadow var(--dur-fast) var(--ease-out);
}
.gb textarea { min-height: 96px; resize: vertical; }
.gb input:focus-visible, .gb textarea:focus-visible { outline: 2px solid var(--color-pop); outline-offset: 2px; }
.gb .btn--primary { background: var(--color-on-accent); color: var(--color-accent-band); border-color: var(--color-on-accent); justify-self: start; }
.gb .btn--primary:hover { background: var(--color-pop); border-color: var(--color-pop); color: var(--color-paper); }
.gb__hint { font-size: var(--text-xs); color: oklch(80% 0.02 150); }
.gb__list { display: grid; gap: var(--space-md); max-height: 22rem; overflow-y: auto; padding-right: var(--space-sm); }
.gb__entry { border-left: 2px solid var(--color-pop); padding: 2px 0 2px var(--space-md); }
.gb__entry blockquote { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; line-height: 1.35; color: var(--color-on-accent); }
.gb__entry .meta { margin-top: 6px; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: oklch(80% 0.03 150); }
.gb__empty { color: oklch(80% 0.02 150); font-style: italic; }

/* ───────── brand intro overlay ───────── */
.intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: oklch(97.6% 0.006 92); transition: opacity 0.6s var(--ease-out), visibility 0.6s; }
html.intro-seen .intro { display: none; }
.intro--out { opacity: 0; visibility: hidden; pointer-events: none; }
.intro__video { width: min(92vw, 1080px); height: auto; max-height: 86vh; object-fit: contain; }
.intro__skip { position: absolute; bottom: clamp(1.2rem, 5vh, 2.6rem); right: clamp(1.2rem, 5vw, 2.6rem);
  background: transparent; border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-soft);
  font: inherit; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.intro__skip:hover { background: var(--color-paper-3); }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ───────── sammlungs-galerie (lightbox) ───────── */
.cat { cursor: pointer; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto 1fr; background: oklch(20% 0.014 70); padding: clamp(1rem, 3vw, 2.2rem); }
.lightbox[hidden] { display: none; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid oklch(60% 0.01 70 / 0.35); }
.lightbox__title { color: var(--color-paper); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; }
.lightbox__title small { display: block; font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 4px; }
.lightbox__close { flex: none; background: transparent; border: var(--rule-hair) solid oklch(72% 0.01 70 / 0.45); color: var(--color-paper); width: 46px; height: 46px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.lightbox__close:hover { background: oklch(55% 0.01 70 / 0.35); }
.lightbox__close:active { transform: scale(0.94); }
.lightbox__grid { overflow-y: auto; padding: var(--space-lg) 0 var(--space-2xl); display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-md) var(--space-md); align-content: start; }
.lightbox__grid figure { margin: 0; }
.lightbox__grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border: var(--rule-hair) solid oklch(55% 0.01 70 / 0.3); cursor: zoom-in; transition: opacity var(--dur-fast) var(--ease-out); }
.lightbox__grid img:hover { opacity: 0.85; }
.lightbox__grid figcaption { color: oklch(86% 0.01 70); font-size: var(--text-sm); margin-top: 8px; }
.lightbox__empty { grid-column: 1 / -1; color: oklch(82% 0.01 70); font-style: italic; font-family: var(--font-display); font-size: var(--text-lg); padding-block: var(--space-xl); }

.zoom { position: fixed; inset: 0; z-index: 300; background: oklch(12% 0.014 70 / 0.96); display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); cursor: zoom-out; }
.zoom[hidden] { display: none; }
.zoom__img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 40px oklch(0% 0 0 / 0.5); }
.zoom__close { position: absolute; top: clamp(1rem, 3vw, 2.2rem); right: clamp(1rem, 3vw, 2.2rem); background: transparent; border: var(--rule-hair) solid oklch(72% 0.01 70 / 0.45); color: var(--color-paper); width: 46px; height: 46px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.zoom__close:hover { background: oklch(55% 0.01 70 / 0.35); }
.zoom__close:active { transform: scale(0.94); }

/* ───────── reveal motion ───────── */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .cat .ph, .cat__arrow { transition: none; }
  .hero__media img, .marquee__track, .ornament svg { animation: none; }
}

/* ───────── responsive ───────── */
@media (max-width: 60rem) {
  .hero__grid, .story__grid, .standort__grid, .foot__top, .gb__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__media img, .hero__media video { aspect-ratio: 16 / 11; }
  .hero__grid { gap: var(--space-xl); }
  .hero .ph { aspect-ratio: 16 / 11; order: -1; }
  .story__grid .story__head { margin-bottom: var(--space-sm); }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .section { padding-block: var(--space-2xl); }
  .masthead__issue { flex-direction: column; align-items: stretch; gap: var(--space-xs); }
  .masthead__issue .left { text-align: center; }
  .toggles { justify-content: center; }
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-head { flex-direction: column; gap: var(--space-xs); }
}