/*
  Da&Da Beautyroom
  Direction: an intimate, editorial "beauty room", paced like a walk through
  the actual studio (entrance, atelier, menu of treatments, proof, booking desk).
  Palette sampled directly from the brand's own logo mark (DA&DALogo.jpeg):
  warm bronze-gold on ivory, deep espresso for contrast, sand for rhythm.
  Type: Cormorant Garamond (display + italic accent) paired with Jost (body/UI).
*/

/* ---------- Tokens ---------- */
:root {
  --ink: #2b2318;
  --ink-soft: #5c4e3f;
  --ink-faint: #8a7a67;

  --cream: #faf3e9;
  --sand: #f0e4d3;
  --sand-line: #ddc9a8;

  --gold: #a5825a;
  --gold-deep: #7c5f3d;
  --gold-pale: #c9a878;

  --espresso: #211a12;
  --espresso-line: #4a3c2b;
  --cream-on-dark: #f3e8d8;
  --footer-muted: #978773;

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Jost', 'Century Gothic', Futura, sans-serif;

  --measure: 62ch;
  --container: 1180px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --nav-h: 76px;
}

@media (min-width: 1024px) {
  :root { --nav-h: 84px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; }

/* Selection, caret, focus, scrollbar, the parts nobody draws on purpose */
::selection { background: var(--gold); color: var(--cream); }
:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
html { scrollbar-color: var(--gold-pale) var(--sand); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sand); }
::-webkit-scrollbar-thumb { background: var(--gold-pale); border-radius: 999px; border: 2px solid var(--sand); }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; }
em, .italic { font-style: italic; }

h1 { font-size: clamp(2.4rem, 3.2vw + 1.6rem, 4.4rem); }
h2 { font-size: clamp(1.9rem, 2vw + 1.3rem, 2.9rem); }
h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em; }

p { max-width: var(--measure); }
p.lede { font-size: 1.15rem; color: var(--ink-soft); line-height: 1.65; }

.eyebrow-free { /* marker: this project deliberately ships no eyebrow labels */ }

/* Italic emphasis inside display headings: same-family, descender-safe */
h1 i, h2 i, .headline i {
  font-style: italic;
  font-weight: 500;
  line-height: 1.15;
  padding-bottom: 0.06em;
  display: inline-block;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 768px) { .container { padding-inline: 2.5rem; } }
@media (min-width: 1280px) { .container { padding-inline: 3.5rem; } }

section { position: relative; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.95em 1.7em;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--gold-deep);
  color: var(--cream);
  box-shadow: 0 1px 2px rgba(33, 26, 18, 0.08);
}
.btn-primary:hover { background: #6c5334; box-shadow: 0 6px 20px -6px rgba(124, 95, 61, 0.55); }

.btn-ghost-dark {
  background: transparent;
  color: var(--cream-on-dark);
  border: 1px solid var(--espresso-line);
}
.btn-ghost-dark:hover { background: rgba(243, 232, 216, 0.06); border-color: var(--gold-pale); }

.link-underline {
  position: relative;
  font-weight: 500;
  padding-bottom: 0.15em;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size 220ms var(--ease-out), color 220ms var(--ease-out);
}
.link-underline:hover { background-size: 0% 1px; color: var(--gold-deep); }

.link-arrow { display: inline-flex; align-items: center; gap: 0.4em; }
.link-arrow svg { width: 1em; height: 1em; transition: transform 200ms var(--ease-out); }
.link-arrow:hover svg { transform: translate(2px, -2px); }

/* ---------- Nav ---------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(250, 243, 233, 0.82);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease-out), background-color 240ms var(--ease-out);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--sand-line);
  background: rgba(250, 243, 233, 0.94);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.back-link-short { display: none; }
@media (max-width: 640px) {
  .back-link-full { display: none; }
  .back-link-short { display: inline; }
}

.nav-links {
  display: none;
  align-items: center;
  gap: 2.1rem;
}
.nav-links a {
  font-size: 0.92rem;
  color: var(--ink-soft);
  transition: color 180ms var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }

.nav-right { display: flex; align-items: center; gap: 1.6rem; }
.nav-cta { display: none; }

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; padding: 0.7em 1.4em; font-size: 0.88rem; }
}

.visually-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.visually-hidden:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  z-index: 100;
  background: var(--cream);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.nav-toggle {
  display: inline-flex;
  padding: 0.4rem;
  color: var(--ink);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 49;
  background: var(--cream);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out), visibility 220ms;
}
.mobile-menu[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 1.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--sand-line);
  color: var(--ink);
  transition: color 120ms ease, opacity 120ms ease;
}
/* This menu is touch-only (hidden from 1024px up), so the feedback that
   matters is :active, not :hover. */
.mobile-menu a:active { color: var(--gold-deep); opacity: 0.75; }
.mobile-menu .btn-primary {
  margin-top: 1.5rem;
  padding-inline: 1.5rem;
  align-self: flex-start;
}
@media (min-width: 1024px) { .mobile-menu { display: none; } }

/* ---------- Brandmark ---------- */
.brandmark { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.brandmark:active { transform: scale(0.98); }
.brandmark { transition: transform 120ms var(--ease-out); }
.brandmark-word {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--gold-deep);
  font-size: 1.6rem;
  letter-spacing: 0.01em;
}
.brandmark-word .amp { font-style: normal; font-weight: 400; padding-inline: 0.08em; }
.brandmark-sub-row { display: flex; align-items: center; gap: 0.5em; margin-top: 0.25em; }
.brandmark-sub-row .rule { width: 1.1em; height: 1px; background: var(--gold); opacity: 0.55; }
.brandmark-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
  padding-bottom: 0.1em;
}

.brandmark.brandmark-dark .brandmark-word,
.brandmark.brandmark-dark .brandmark-sub { color: var(--gold-pale); }

/* ---------- Hero (photo carousel with text overlay) ----------
   Inset from the viewport edges so the fixed page-backdrop shows through
   around it, the way the studio's reference site frames its own hero. */
.hero {
  padding: calc(var(--nav-h) + 14px) 14px 14px;
}
@media (min-width: 700px) {
  .hero { padding: calc(var(--nav-h) + 24px) 24px 24px; }
}
@media (min-width: 1280px) {
  .hero { padding: calc(var(--nav-h) + 32px) 40px 40px; }
}

.hero-carousel {
  position: relative;
  height: 78vh;
  height: 78dvh;
  min-height: 420px;
  max-height: 780px;
  overflow: hidden;
}

.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease-in-out);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide picture { display: block; height: 100%; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
@media (max-width: 699px) {
  .gallery-item img, .gallery-placeholder { aspect-ratio: 4 / 5; object-fit: cover; height: auto; }
}
@media (max-width: 699px) {
  .hero-slide img {
    /* Per-image focus point (--focus-m) so the eye stays in frame. */
    object-position: var(--focus-m, 28% 38%);
  }
}
.hero-slide-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(33, 26, 18, 0.72) 0%, rgba(33, 26, 18, 0.42) 42%, rgba(33, 26, 18, 0.08) 72%);
}

.hero-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding-block: 2rem;
}
.hero-overlay h1 { max-width: 14ch; color: var(--cream); }
.hero-overlay .lede { max-width: 34ch; color: var(--cream-on-dark); }
.hero-cta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* The prev arrow is fixed at left:1.25rem regardless of breakpoint, so the
   container's own responsive padding isn't reliably wider than the arrow's
   footprint (44px). Reserve real clearance explicitly once the arrows are
   visible, instead of letting them sit flush against the headline. */
@media (min-width: 700px) {
  .hero-overlay { padding-left: 5.5rem; }
}

.btn-ghost-light {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(250, 243, 233, 0.55);
}
.btn-ghost-light:hover { background: rgba(250, 243, 233, 0.12); border-color: var(--cream); }

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--cream);
  background: rgba(33, 26, 18, 0.28);
  border: 1px solid rgba(250, 243, 233, 0.3);
  transition: background-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.hero-arrow svg { width: 20px; height: 20px; }
.hero-arrow:hover { background: rgba(33, 26, 18, 0.5); }
.hero-arrow:active { transform: translateY(-50%) scale(0.93); }
.hero-arrow-prev { left: 1.25rem; }
.hero-arrow-next { right: 1.25rem; }
@media (min-width: 700px) { .hero-arrow { display: inline-flex; } }

.hero-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.55rem;
}
.hero-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(250, 243, 233, 0.45);
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
/* Invisible hit-slop: the visible dot stays small and precise, the tappable
   area doesn't have to be exactly 7px too. */
.hero-dot::before {
  content: "";
  position: absolute;
  inset: -9px;
}
@media (hover: hover) and (pointer: fine) {
  .hero-dot:not(.is-active):hover { background: rgba(250, 243, 233, 0.75); transform: scale(1.15); }
}
.hero-dot.is-active { background: var(--cream); transform: scale(1.3); }

.hero-pause {
  position: absolute;
  z-index: 3;
  right: 1.25rem;
  bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: var(--cream);
  background: rgba(33, 26, 18, 0.32);
  border: 1px solid rgba(250, 243, 233, 0.3);
  transition: background-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.hero-pause:hover { background: rgba(33, 26, 18, 0.52); }
.hero-pause:active { transform: scale(0.93); }
.hero-pause svg {
  position: absolute;
  width: 15px;
  height: 15px;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.hero-pause .icon-play { opacity: 0; transform: scale(0.8); }
.hero-pause[aria-pressed="true"] .icon-pause { opacity: 0; transform: scale(0.8); }
.hero-pause[aria-pressed="true"] .icon-play { opacity: 1; transform: scale(1); }
.hero-pause .icon-pause { transform: scale(1); }
@media (min-width: 700px) { .hero-pause { right: 1.6rem; } }

@media (min-width: 900px) {
  .hero-overlay h1 { max-width: 12ch; }
}

/* ---------- Page backdrop (fixed, animated leaf shadow on paper) ----------
   Recreates the reference site's background video in CSS: a pale paper
   ground with soft branch shadows swaying as if in a breeze by a window,
   plus a slow drifting sunlight wash. Open sections are transparent, so the
   backdrop reads through around cards; bands and photo sections cover it. */
.page-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: #f7f1e8;
  pointer-events: none;
}
.backdrop-paper {
  position: absolute;
  inset: 0;
  opacity: 0.7;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.47 0 0 0 0 0.38 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.backdrop-light {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 35% at 30% 30%, rgba(255, 252, 245, 0.6), transparent 70%),
    radial-gradient(35% 30% at 75% 70%, rgba(255, 250, 240, 0.5), transparent 70%);
  animation: lightDrift 26s ease-in-out infinite alternate;
}
@keyframes lightDrift {
  from { transform: translate(-4%, -2%); opacity: 0.85; }
  to   { transform: translate(5%, 3%); opacity: 1; }
}
/* Leaf shadows are drawn by js/backdrop.js; the CSS blur softens them into
   a shadow cast from a window, the wall texture on top gives them grain. */
.backdrop-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(2.5px);
  opacity: 0.26;
  mix-blend-mode: multiply;
}
.backdrop-wall {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='5' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' lighting-color='%23fff' surfaceScale='2.2'%3E%3CfeDistantLight azimuth='45' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .backdrop-light { animation: none; }
}

/* ---------- Section rhythm ----------
   Like the reference: open sections float on the animated backdrop with
   centred content and card panels; full-width bands and full-bleed photo
   sections break the rhythm between them. */
.section { padding-block: clamp(4rem, 7vw, 6.5rem); }
.section-open { background: transparent; }
.section-band { background-color: var(--sand); }
.section-cream { background-color: var(--cream); }
.section-sand { background-color: var(--sand); }

.section-head { margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem); text-align: center; }
.section-head h2 { font-size: clamp(2.3rem, 3vw + 1.2rem, 3.6rem); }
.section-head p { margin: 0.9rem auto 0; }

.panel {
  background: rgba(250, 243, 233, 0.9);
  border: 1px solid rgba(221, 201, 168, 0.7);
  box-shadow: 0 18px 40px -28px rgba(43, 35, 24, 0.35);
}

/* Intro band directly under the hero */
.intro-band { padding-block: clamp(2.8rem, 5vw, 4rem); text-align: center; }
.intro-title {
  max-width: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw + 0.8rem, 3.8rem);
  line-height: 1.1;
  color: var(--ink);
}
.intro-title span { color: var(--gold); padding-inline: 0.2em; font-weight: 400; }
.intro-text { margin: 1.3rem auto 0; max-width: 46ch; color: var(--ink-soft); font-size: 1.05rem; }

/* ---------- Atelier (about) ---------- */
.atelier-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .atelier-grid { grid-template-columns: 0.95fr 1.05fr; gap: 4.5rem; }
}
.atelier-media { overflow: hidden; box-shadow: 0 18px 40px -28px rgba(43, 35, 24, 0.4); }
.atelier-media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.atelier-copy h2 { font-size: clamp(2.3rem, 3vw + 1.2rem, 3.6rem); }
.atelier-kicker { margin: 0.5rem 0 1.4rem; font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--gold-deep); }
.atelier-copy p + p { margin-top: 1.1rem; }
.atelier-note {
  margin-top: 1.8rem !important;
  padding-top: 1.6rem;
  border-top: 1px solid var(--sand-line);
  color: var(--ink-soft);
  font-size: 0.98rem;
}

/* ---------- Leistungen (menu cards) ---------- */
.menu-groups {
  display: grid;
  gap: 1.4rem;
  max-width: 1060px;
  margin-inline: auto;
}
@media (min-width: 700px) {
  .menu-groups { display: flex; flex-wrap: wrap; justify-content: center; }
  .menu-card { flex: 0 1 calc(50% - 0.7rem); }
}
@media (min-width: 980px) { .menu-card { flex-basis: calc(33.333% - 0.94rem); } }
.menu-card {
  background: var(--sand);
  padding: 1.8rem 1.6rem 1.4rem;
  box-shadow: 0 18px 40px -28px rgba(43, 35, 24, 0.4);
}
.menu-group-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--gold-deep);
  margin-bottom: 1rem;
  text-align: center;
}
.menu-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--sand-line);
  cursor: pointer;
}
.menu-card li:last-child .menu-row { border-bottom: none; }
.menu-row .name { font-size: 0.96rem; transition: color 150ms ease; }
.menu-row .leader {
  flex: 1;
  border-bottom: 1px dotted var(--ink-faint);
  opacity: 0.5;
  min-width: 0.75rem;
  margin-bottom: 0.32em;
  transition: opacity 150ms ease;
}
.menu-row .price { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--gold-deep); white-space: nowrap; transition: transform 150ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .menu-row:hover .name { color: var(--gold-deep); }
  .menu-row:hover .leader { opacity: 0.9; }
  .menu-row:hover .price { transform: translateX(2px); }
}

.menu-footnote { margin-top: 2.5rem; color: var(--ink-faint); font-size: 0.88rem; }

/* ---------- Galerie ---------- */
/* Three columns stretched to equal height; items grow to fill, so all
   columns end flush at the bottom regardless of image proportions. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  max-width: 1060px;
  margin-inline: auto;
}
.gallery-col { display: contents; }
@media (min-width: 700px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .gallery-col { display: flex; flex-direction: column; gap: 1rem; }
  .gallery-col .gallery-item { flex: 1 1 auto; margin-bottom: 0; display: flex; }
  .gallery-col .gallery-item > * { flex: 1; }
  .gallery-col .gallery-item img { height: 100%; object-fit: cover; }
}
.gallery-item {
  overflow: hidden;
  position: relative;
  break-inside: avoid;
  box-shadow: 0 18px 40px -28px rgba(43, 35, 24, 0.4);
}
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover img { transform: scale(1.045); }
}
.gallery-placeholder {
  width: 100%;
  aspect-ratio: var(--ph-ratio, 4 / 5);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand);
  border: 1px dashed var(--sand-line);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
}
.gallery-footnote { margin: 2.5rem auto 0; text-align: center; }

/* ---------- Stimmen (testimonials, in a band) ---------- */
.quotes {
  display: grid;
  gap: 2.6rem;
  text-align: center;
  max-width: 1060px;
  margin-inline: auto;
}
@media (min-width: 860px) {
  .quotes { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .quotes li:not(:first-child) { border-left: 1px solid var(--sand-line); }
  .quotes li { padding-inline: 2.2rem; }
}
.quote-mark { font-family: var(--font-display); font-size: 3rem; color: var(--gold); line-height: 1; margin: 0 auto 0.4rem; font-style: italic; }
.quote-body { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.4; color: var(--ink); margin-inline: auto; }
.quote-name { margin: 1.1rem auto 0; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--ink-faint); }

/* ---------- Kontakt ---------- */
.contact-list { max-width: 760px; margin: 0 auto; padding: 1.4rem 1.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 2.6rem; }
.contact-list li { display: flex; align-items: flex-start; gap: 0.9rem; }
.contact-list svg { width: 1.15em; height: 1.15em; flex-shrink: 0; margin-top: 0.2em; color: var(--gold-deep); transition: transform 160ms var(--ease-out); }
.contact-list a, .contact-list span { display: inline-block; color: var(--ink-soft); transition: color 160ms ease, transform 120ms var(--ease-out); }
.contact-list a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .contact-list a:hover { color: var(--gold-deep); }
  .contact-list li:has(a:hover) svg { transform: translateX(2px); }
}

.team-grid { display: grid; gap: 1.4rem; margin: 1.4rem auto 0; max-width: 760px; }
@media (min-width: 700px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}
.team-card { display: flex; flex-direction: column; align-items: center; padding: 1.2rem 1.2rem 1.8rem; text-align: center; }
.team-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--sand-line);
  background: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
}
img.team-photo { height: auto; object-fit: cover; object-position: var(--focus, center); border: none; }
.team-name { margin-top: 1.4rem; margin-bottom: 0.3rem; font-size: 1.4rem; }
.team-role { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--gold-deep); }
.team-exp { list-style: none; margin: 0.9rem 0 1.4rem; padding: 0; width: 100%; max-width: 20rem; }
.team-exp li { padding-block: 0.5rem; border-top: 1px solid var(--sand-line); font-size: 0.95rem; color: var(--ink-soft); }
.team-exp li:first-child { border-top: none; }
.team-exp strong { font-weight: 500; color: var(--ink); }
.team-card .btn { margin-top: auto; }

.hours-card { margin: 1.4rem auto 0; padding: 1.8rem 2rem; max-width: 760px; }
.hours-card > * { max-width: 30rem; margin-inline: auto; }
.hours-card h3, .hours-note { text-align: center; }
.hours-card h3 { margin-bottom: 1.2rem; }
.hours-note { margin: -0.3rem auto 1rem; font-size: 0.85rem; color: var(--ink-soft); }
.hours-row { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.55rem; border-top: 1px solid var(--sand-line); font-size: 0.95rem; }
.hours-row:first-of-type { border-top: none; }
.hours-row span:last-child { white-space: nowrap; color: var(--gold-deep); font-variant-numeric: tabular-nums; }

/* ---------- Footer ---------- */
.site-footer { background: var(--espresso); color: var(--cream-on-dark); border-top: 1px solid var(--espresso-line); }
.footer-inner {
  padding-block: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
@media (min-width: 860px) {
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.footer-nav a {
  position: relative;
  font-size: 0.9rem;
  color: var(--cream-on-dark);
  opacity: 0.8;
  transition: opacity 160ms ease;
}
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transition: right 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer-nav a:hover { opacity: 1; }
  .footer-nav a:hover::after { right: 0; }
}
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 1.2rem;
  color: var(--gold-pale);
  font-size: 0.9rem;
}
.footer-social svg { width: 1.2em; height: 1.2em; transition: transform 200ms var(--ease-out); }
.footer-social a { transition: opacity 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .footer-social:hover a { opacity: 0.75; }
  .footer-social:hover svg { transform: scale(1.1) rotate(-6deg); }
}
.footer-bottom {
  border-top: 1px solid var(--espresso-line);
  padding-block: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--footer-muted);
}
@media (min-width: 860px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-bottom a { color: var(--footer-muted); }
.footer-bottom a:hover { color: var(--gold-pale); }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal="true"] { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Legal pages ---------- */
.legal-page { padding-top: calc(var(--nav-h) + 3.5rem); padding-bottom: 5rem; }
.legal-page h1 { max-width: none; margin-bottom: 2rem; hyphens: auto; overflow-wrap: break-word; }
.legal-page h2 { font-size: 1.3rem; margin-top: 2.4rem; margin-bottom: 0.8rem; }
.legal-page p, .legal-page li { color: var(--ink-soft); max-width: 68ch; }
.legal-page p + p { margin-top: 1rem; }
.legal-page li { margin-bottom: 0.4rem; }
.legal-page section + section { margin-top: 1rem; }