/* =============================================================
   MARIANN EHRHARDT — Goldschmiedin
   Dark, earthy, artisan. Single dark theme, no light mode.

   HOW TO USE:
   - SIZES YOU WANT TO CHANGE: section "EINSTELLUNGEN" right below
     the fonts. Change the number there — nothing else.
   - Every color, font size and spacing lives in :root below.
   - Never type a hex code further down — use the variables.
   - Sections are numbered. Use Ctrl+F on "── 5." etc. to jump.

   CONTENTS
   0. Fonts (hosted locally)   10. Aus Alt wird Neu (before/after)
   1. Design tokens            11. Kontakt (homepage section)
   2. Reset                    12. Footer
   3. Base typography          13. Atelier page
   4. Buttons + links          14. Kontakt page + form
   5. Header + navigation      15. Events page
   6. Hero (Ken Burns)         16. Legal pages (Impressum, Datenschutz)
   7. Über mich (scroll)       17. Responsive (phones)
   8. Leistungen (cards)       18. Reduced motion
   9. Galerie + lightbox
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   0. FONTS — hosted on our own server (folder fonts/), NOT
   loaded from Google. That way no visitor data goes to Google
   (German courts have ruled Google-hosted fonts need consent).
   Licence: SIL Open Font License, see fonts/OFL-*.txt
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/playfair-display-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-500-normal.woff2') format('woff2');
}


/* ─────────────────────────────────────────────────────────────
   EINSTELLUNGEN — the sizes you are most likely to change.
   Change a number here, save, reload. Nothing else to touch.
   ───────────────────────────────────────────────────────────── */
:root {
  /* Whole site: how wide the content is (menu, text, gallery) */
  --wide: 1100px;

  /* "Über mich": width of one photo in the sliding row */
  --story-photo-w: clamp(15rem, 24vw, 34rem);

  /* "Aus Alt wird Neu" (desktop): text column : picture column.
     Bigger 2nd number = wider picture. The picture is always
     exactly as tall as the text next to it. */
  --renew-text-col:  1.15fr;
  --renew-photo-col: 1fr;
  --renew-gap:       4rem;     /* space between text and picture */

  /* Galerie: space between the photos (0 = no gap) */
  --gallery-gap: 1rem;
}


/* ─────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
  /* ── Colors (committed palette) ── */
  --bg:      #1a2420;   /* near-black teal — page background          */
  --surface: #1f2e2b;   /* dark teal — cards, secondary sections      */
  --teal:    #3a5063;   /* deep blue-teal — mid accent, big blocks     */
  --sage:    #667c73;   /* sage — borders, dividers (NOT small text)   */
  --accent:  #86b5a3;   /* light sage — hover states, small muted text */
  --sand:    #c4a882;   /* warm sand — body text                       */
  --bright:  #f0ebe0;   /* off-white — headings                        */
  --gold:    #d4a843;   /* gold — buttons, CTAs, her name              */

  /* Derived shades — built from the palette, no new hex codes */
  --line:      color-mix(in srgb, var(--sage) 40%, transparent);  /* thin borders */
  --gold-soft: color-mix(in srgb, var(--gold) 15%, transparent);  /* hover glow   */
  --photo-bg:  var(--surface);   /* placeholder until her photos arrive */

  /* ── Fonts ── */
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;

  /* ── Font sizes: fluid, grow smoothly from phone to desktop ── */
  --fs-small: 0.85rem;                                /* captions, nav, footer */
  --fs-body:  1rem;                                   /* normal text           */
  --fs-lead:  clamp(1.1rem, 1rem + 0.5vw, 1.3rem);    /* intro paragraphs      */
  --fs-h3:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h2:    clamp(1.8rem, 1.4rem + 1.8vw, 2.75rem);
  --fs-h1:    clamp(2.6rem, 1.8rem + 4vw, 5rem);      /* hero: her name        */

  /* ── Spacing (use these instead of random rem values) ── */
  --space-xs: 0.5rem;
  --space-s:  1rem;
  --space-m:  2rem;
  --space-l:  4rem;
  --space-xl: 6rem;     /* between big homepage sections */

  /* ── Layout ── */
  /* --wide (max content width) → see EINSTELLUNGEN above */
  --narrow:   65ch;     /* max width for text blocks                */
  --radius:   2px;      /* barely-there corners                     */
  --header-h: 4.5rem;   /* header height — other pages need it too  */

  /* ── Motion ── */
  --transition:      0.25s ease;   /* quick: colors, borders   */
  --transition-slow: 0.6s ease;    /* calm: lines, reveals     */

  color-scheme: dark;   /* dark scrollbars + dark form fields */
}


/* ─────────────────────────────────────────────────────────────
   2. RESET
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

img { max-width: 100%; display: block; }
ul  { list-style: none; }

/* A photo that doesn't exist yet stays invisible (no broken-image icon).
   js/app.js adds the class "is-missing" when a photo fails to load. */
img.is-missing { visibility: hidden; }


/* ─────────────────────────────────────────────────────────────
   3. BASE TYPOGRAPHY
   Hierarchy: headings = bright, text = sand, CTA = gold,
              muted/small = accent, lines = sage
   ───────────────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--sand);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Headings — Playfair, off-white */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--bright);
  line-height: 1.2;
  letter-spacing: 0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); margin-bottom: var(--space-s); }
h3 { font-size: var(--fs-h3); margin-bottom: var(--space-xs); }

/* Paragraphs */
p { max-width: var(--narrow); }
p + p { margin-top: var(--space-s); }

.lead {                    /* bigger intro paragraph under a heading */
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.muted {                   /* small secondary text: captions, dates */
  font-size: var(--fs-small);
  color: var(--accent);
}

/* Small uppercase label above headings, e.g. "GOLDSCHMIEDIN" */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-xs);
}

/* Her name: "Mariann" off-white, "Ehrhardt" italic gold
   HTML:  Mariann <span class="name-accent">Ehrhardt</span> */
.name-accent {
  font-style: italic;
  color: var(--gold);
}

/* Links inside text */
a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--accent); }

/* Keyboard focus — visible gold ring (accessibility) */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Text highlighted with the mouse */
::selection {
  background: var(--gold);
  color: var(--bg);
}

/* Centered content box — same width as header + hero.
   Use inside any section:  <section><div class="container">…</div></section> */
.container {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--space-m);
}

/* Section heading block: eyebrow + h2 + lead paragraph */
.section-head {
  margin-bottom: var(--space-l);
}

/* Heading at the top of subpages (Galerie, Atelier, Kontakt…).
   Extra top space because the header is fixed over the page. */
.page-head {
  padding: calc(var(--header-h) + var(--space-xl)) 0 var(--space-l);
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  margin-bottom: var(--space-s);
}
/* Gallery directly under the page heading needs less top space */
.gallery--page {
  padding-top: var(--space-l);
}

/* Thin decorative divider line */
hr {
  border: none;
  height: 1px;
  background: var(--line);
  margin: var(--space-l) auto;
  max-width: var(--wide);
}


/* ─────────────────────────────────────────────────────────────
   4. BUTTONS — use on any link:
      <a class="btn btn-primary">  gold, filled   (main action)
      <a class="btn btn-outline">  light outline  (second action)
   ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  transition: background var(--transition),
              color var(--transition),
              border-color var(--transition);
}

/* Gold filled → turns into an outline on hover */
.btn-primary {
  background: var(--gold);
  color: var(--bg);
}
.btn-primary:hover {
  background: transparent;
  color: var(--gold);
}

/* Light outline → turns gold on hover */
.btn-outline {
  background: transparent;
  color: var(--bright);
  border-color: var(--bright);
}
.btn-outline:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* Quiet gold text link with a thin line under it, e.g. "Mehr über das Atelier →" */
.text-link {
  display: inline-block;
  margin-top: var(--space-m);
  padding-bottom: 0.2rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  transition: color var(--transition), border-color var(--transition);
}
.text-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}


/* ─────────────────────────────────────────────────────────────
   5. HEADER + NAVIGATION
   Fixed on top, slightly see-through over the hero photos.
   ───────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(8px);          /* frosted-glass look over the photos */
  border-bottom: 1px solid var(--line);
}

.header-inner {
  max-width: var(--wide);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--space-m);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Her name as a text logo (top left) */
.wordmark {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--bright);
  letter-spacing: 0.02em;
}
.wordmark:hover { color: var(--bright); }

/* Menu links (top right) */
.nav-links {
  display: flex;
  gap: var(--space-m);
}
.nav-links a {
  display: block;
  padding: var(--space-xs) 0;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sand);
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav-links a:hover {
  color: var(--gold);
}
/* The page you are on (set with aria-current="page" in the HTML) */
.nav-links a[aria-current="page"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Hamburger button — hidden on desktop, shown in section 7 */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-xs);
  background: none;
  border: none;
  color: var(--bright);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
}


/* ─────────────────────────────────────────────────────────────
   6. HERO — Ken Burns slideshow
   4 photos, each slowly zooms in while fading into the next.

   TO CHANGE THE SPEED:    edit --slide-time below. Nothing else.
   TO CHANGE THE DARKNESS: edit the % values in .hero::after.
   The number of slides is fixed at 4 (timings are built for 4).
   ───────────────────────────────────────────────────────────── */
.hero {
  --slide-time: 8s;          /* how long each photo is visible */

  position: relative;
  height: 100svh;            /* full screen height, also correct on phones */
  min-height: 34rem;
  overflow: hidden;          /* hides the edges of the zoomed-in photos */
  display: flex;
  align-items: center;
}

/* ── The photo layer ── */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-color: var(--photo-bg);   /* shows until the photo exists */
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: ken-burns calc(var(--slide-time) * 4) linear infinite;
  will-change: opacity, transform;
}

/* Each slide starts one --slide-time after the previous one.
   The background colors are only placeholders (hidden by photos). */
.hero-slide:nth-child(1) {
  animation-delay: 0s;
}
.hero-slide:nth-child(2) {
  animation-delay: calc(var(--slide-time) * 1);
  background-color: var(--teal);
}
.hero-slide:nth-child(3) {
  animation-delay: calc(var(--slide-time) * 2);
  background-color: color-mix(in srgb, var(--sage) 45%, var(--bg));
}
.hero-slide:nth-child(4) {
  animation-delay: calc(var(--slide-time) * 3);
  background-color: color-mix(in srgb, var(--teal) 50%, var(--surface));
}

/* One full cycle = 4 slides. What each slide does:
   fade in (0–6%) → stay (6–25%) → fade out while the next fades in (25–31%)
   The slow zoom runs the whole time the slide is visible. */
@keyframes ken-burns {
  0%   { opacity: 0; transform: scale(1); }
  6%   { opacity: 1; }
  25%  { opacity: 1; }
  31%  { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* ── The dark frame over the photos (keeps the text readable) ──
   Layer 1: dark on the left (behind the text), clear on the right
   Layer 2: dark at the bottom, blends into the next section       */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--bg) 85%, transparent) 0%,
      color-mix(in srgb, var(--bg) 40%, transparent) 55%,
      transparent 100%),
    linear-gradient(to top,
      var(--bg) 0%,
      transparent 35%);
}

/* ── The text on top ── */
.hero-content {
  position: relative;
  z-index: 2;                          /* above photos + dark frame */
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--header-h) var(--space-m) 0;
}

.hero-content h1 {
  margin-bottom: var(--space-s);
}

.hero-text {
  max-width: 38ch;
  margin-bottom: var(--space-m);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}


/* ─────────────────────────────────────────────────────────────
   7. ÜBER MICH — scroll gallery
   Two modes:
   · NORMAL (phones, reduced motion, no JS): text + a row of
     photos you can swipe sideways.
   · PINNED (desktop): js/app.js adds the class "is-pinned".
     The text stays put, the photos glide right → left and
     slide behind the text.

   TO CHANGE THE SPEED: js/app.js → STORY_SPEED
   TO CHANGE PHOTO SIZE: --story-photo-w in EINSTELLUNGEN (top)
   ───────────────────────────────────────────────────────────── */
.story {
  position: relative;
  padding: var(--space-m) 0;
  border-top: 1px solid var(--line);
}

/* The two columns: text left, photos right */
.story-sticky {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--space-m);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-l);
  align-items: center;
}

/* ── Left: text ── */
.story-text h2 {
  margin-bottom: var(--space-m);
}

/* ── Right: the moving photo row ── */
.story-gallery {
  min-width: 0;                     /* lets the row be wider than the column */
  overflow-x: auto;                 /* NORMAL mode: swipe sideways */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.story-gallery::-webkit-scrollbar { display: none; }

.story-track {
  display: flex;
  gap: var(--space-m);
  width: max-content;
  padding-right: var(--space-m);
}

.story-item {
  flex: 0 0 auto;
  width: var(--story-photo-w);
  scroll-snap-align: start;
}

/* Photo frame: keeps the shape + shows a placeholder color */
.story-photo {
  aspect-ratio: 4 / 5;              /* portrait, good for jewelry */
  background: var(--photo-bg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Small caption under each photo */
.story-item figcaption {
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  color: var(--accent);
}


/* ── PINNED mode (desktop, switched on by js/app.js) ── */
.story.is-pinned {
  padding: 0;                       /* height is set by js/app.js */
}

.story.is-pinned .story-sticky {
  position: sticky;                 /* THIS makes the text stay in place */
  top: 0;
  height: 100svh;
  max-width: none;
  padding: var(--header-h) 0 0;
  gap: 0;
  overflow: hidden;                 /* hides photos outside the screen */
}

/* Text panel: solid background on top, so photos vanish behind it.
   The left padding lines the text up with the header + hero text. */
.story.is-pinned .story-text {
  position: relative;
  z-index: 2;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 var(--space-l) 0 max(var(--space-m), calc(100% - var(--wide) / 2 + var(--space-m)));
  background: var(--bg);
}

/* Soft fade on the right edge of the text panel:
   photos dissolve instead of being cut off by a hard line */
.story.is-pinned .story-text::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: var(--space-l);
  background: linear-gradient(to right, var(--bg), transparent);
  pointer-events: none;
}

.story.is-pinned .story-gallery {
  position: relative;
  z-index: 1;                       /* below the text panel */
  overflow: visible;
}

/* js/app.js sets --story-shift while you scroll → the row moves left */
.story.is-pinned .story-track {
  padding-left: var(--space-l);
  transform: translateX(calc(var(--story-shift, 0px) * -1));
  will-change: transform;
}


/* ─────────────────────────────────────────────────────────────
   8. LEISTUNGEN — service cards
   Slightly lighter band (--surface) so it stands apart from the
   sections around it. Cards: 4 in a row → 2 on tablets → 1 on phones.
   ───────────────────────────────────────────────────────────── */
.services {
  background: var(--surface);
  padding: var(--space-xl) 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-s);
}

/* One card */
.service-card {
  position: relative;
  padding: var(--space-m);
  background: var(--bg);
  border: 1px solid var(--line);
  transition: border-color var(--transition);
}

/* Thin gold line at the top: short, grows to full width on hover */
.service-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: var(--space-m);
  height: 2px;
  background: var(--gold);
  transition: width var(--transition-slow);
}
.service-card:hover { border-color: var(--sage); }
.service-card:hover::before { width: calc(100% + 2px); }

/* Big italic number "01", "02"… */
.service-number {
  display: block;
  margin-bottom: var(--space-m);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--gold);
}

.service-card h3 {
  margin-bottom: var(--space-xs);
}

.service-card p {
  font-size: 0.95rem;
  line-height: 1.7;
}

/* "Ihre Idee ist nicht dabei?" + button under the cards */
.services-cta {
  margin-top: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}
.services-cta p {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--bright);
}

/* Tablets and small laptops: 2 cards per row */
@media (max-width: 1000px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ─────────────────────────────────────────────────────────────
   9. GALERIE — mosaic (homepage + galerie.html)
   Pieces come in groups of 6 and the pattern repeats:
     group 1: BIG left,  2 small right, 3 small below
     group 2: BIG right, 2 small left,  3 small below
     group 3: like group 1 … and so on.
   If the last group is incomplete, its last tile stretches so
   there are never holes. Works for any number of pieces.
   Photos come from data/gallery.json (filled in by js/app.js).
   ───────────────────────────────────────────────────────────── */
.gallery {
  padding: var(--space-xl) 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;            /* small tiles fill the gaps next to big ones */
  gap: var(--gallery-gap);          /* set in EINSTELLUNGEN (top) */
}

/* One piece */
.gallery-item {
  position: relative;
  aspect-ratio: 1;                  /* small pieces are square */
  background: var(--photo-bg);      /* placeholder until the photo exists */
  overflow: hidden;
}

/* BIG tile = 1st of every group of 6: 2 columns wide, 2 rows high */
.gallery-item:nth-child(6n+1) {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;               /* height comes from the 2 rows */
}
/* Every 2nd group: big tile on the RIGHT side */
.gallery-item:nth-child(12n+7) {
  grid-column: 2 / span 2;
}

/* Incomplete last group → stretch the last tile to close the gap */
.gallery-item:last-child:nth-child(6n+1) {   /* big tile all alone: full width */
  grid-column: 1 / -1;
  grid-row: span 1;
  aspect-ratio: 2 / 1;
}
.gallery-item:last-child:nth-child(6n+2) {   /* only 1 small next to the big one */
  grid-row: span 2;
  aspect-ratio: auto;
}
.gallery-item:last-child:nth-child(6n+4) {   /* alone in the bottom row */
  grid-column: span 3;
  aspect-ratio: 3 / 1;
}
.gallery-item:last-child:nth-child(6n+5) {   /* 2 of 3 in the bottom row */
  grid-column: span 2;
  aspect-ratio: auto;
}

/* The whole photo is a button (works with mouse, finger and keyboard).
   It lies ON the tile (absolute), so the photo's own size can never
   stretch the grid rows → big tile = exactly 2 small tiles high. */
.gallery-open {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.gallery-open img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.gallery-item:hover .gallery-open img { transform: scale(1.04); }

/* Caption on the photo: dark fade at the bottom + title + material */
.gallery-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-l) var(--space-s) var(--space-s);
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 90%, transparent), transparent);
  pointer-events: none;             /* clicks go through to the photo */
  transition: opacity var(--transition);
}
.gallery-title {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--bright);
}
.gallery-material {
  display: block;
  font-size: var(--fs-small);
  color: var(--accent);
}

/* Little gold "Neu" label on the newest piece (only the very first) */
.gallery-item:first-child::before {
  content: 'Neu';
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  z-index: 1;
  padding: 0.2rem 0.7rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--gold);
  pointer-events: none;
}

/* With a mouse: small captions only appear on hover (calmer look).
   On phones/tablets (no hover) they are always visible. */
@media (hover: hover) {
  .gallery-item:not(:nth-child(6n+1)) figcaption { opacity: 0; }   /* big tiles keep their caption */
  .gallery-item:hover figcaption,
  .gallery-item:focus-within figcaption { opacity: 1; }
}

/* Buttons under the grid */
.gallery-actions {
  margin-top: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
}
.gallery-actions .text-link { margin-top: 0; }


/* ── LIGHTBOX — the big photo view ── */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-m);
  border: none;
  background: transparent;
  color: var(--sand);
}
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
}
.lightbox::backdrop {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(6px);
}

.lightbox-figure {
  max-width: min(100%, 60rem);
  text-align: center;
}
.lightbox-img {
  max-width: 100%;
  max-height: 78svh;
  margin: 0 auto;
  object-fit: contain;
  background: var(--photo-bg);
  min-width: min(60vw, 30rem);      /* keeps a visible frame while no photo exists */
  min-height: 40svh;
}
.lightbox-caption {
  margin-top: var(--space-s);
  font-family: var(--serif);
  font-size: var(--fs-h3);
  color: var(--bright);
}
.lightbox-caption span {            /* material, under the title */
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-small);
  color: var(--accent);
}

/* Round buttons: close (top right), previous, next */
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--bright);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  color: var(--gold);
  border-color: var(--gold);
}
.lightbox-close {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
}


/* ─────────────────────────────────────────────────────────────
   10. AUS ALT WIRD NEU — text left, before/after slider right
   The slider: two photos on top of each other. The "before" photo
   is cut off at --pos (set by js/app.js when you drag).
   ───────────────────────────────────────────────────────────── */
.renew {
  padding: var(--space-xl) 0;
}
.renew + .gallery { border-top: 1px solid var(--line); }   /* separates the two dark sections */

.renew .container {
  display: grid;
  /* column widths + gap: set in EINSTELLUNGEN (top) */
  grid-template-columns: minmax(0, var(--renew-text-col)) minmax(0, var(--renew-photo-col));
  gap: var(--renew-gap);
  align-items: stretch;    /* picture is exactly as tall as the text column */
}

/* Short list with small gold diamonds instead of bullets */
.renew-list {
  margin-top: var(--space-m);
  display: grid;
  gap: var(--space-xs);
}
.renew-list li {
  position: relative;
  padding-left: var(--space-m);
}
.renew-list li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.65em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ── The slider ── */
.ba-slider {
  --pos: 30%;                        /* where the line is — changed by js/app.js */
  position: relative;
  /* Desktop: no fixed shape — it takes the height of the text next to it.
     Phones: 4:3, see section 17 (RESPONSIVE). */
  background: var(--photo-bg);
  border: 1px solid var(--line);
  overflow: hidden;
  user-select: none;
}
.ba-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* "Before" photo only visible LEFT of the line */
.ba-before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
/* Placeholder mode (same photo twice): make "before" look old and dull.
   Remove class ba-demo from the <figure> once real before/after photos exist. */
.ba-demo .ba-before {
  filter: grayscale(1) brightness(0.6) contrast(0.9);
}

/* The vertical gold line with a round knob in the middle */
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  pointer-events: none;
}
.ba-handle::after {
  content: '‹ ›';
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  transform: translate(-50%, -50%);
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--bg);
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.1em;
}
/* Keyboard users: gold ring around the knob when the slider has focus */
.ba-slider:has(.ba-range:focus-visible) .ba-handle::after {
  outline: 2px solid var(--bright);
  outline-offset: 3px;
}

/* "Vorher" / "Nachher" labels in the top corners */
.ba-label {
  position: absolute;
  top: var(--space-s);
  padding: 0.2rem 0.7rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--bright);
  pointer-events: none;
}
.ba-label--before { left: var(--space-s); }
.ba-label--after  { right: var(--space-s); color: var(--gold); }

/* The real (invisible) slider covering the whole picture */
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

/* Hint text under the picture */
.ba-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-m) var(--space-s) var(--space-xs);
  font-size: var(--fs-small);
  text-align: center;
  color: var(--accent);
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 85%, transparent), transparent);
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────
   11. KONTAKT — big invitation + 3 info columns
   ───────────────────────────────────────────────────────────── */
.contact {
  padding: var(--space-xl) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* Big centered invitation at the top */
.contact-intro {
  max-width: 40rem;
  margin: 0 auto var(--space-l);
  text-align: center;
}
.contact-intro p { margin: 0 auto var(--space-m); }
.contact-intro .btn + .btn { margin-left: var(--space-xs); }

/* 3 columns: Atelier · Kontakt · Öffnungszeiten */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
}
.contact-block h3 {
  font-size: var(--fs-small);
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-s);
}
.contact-block p,
.contact-block address {
  font-style: normal;
  line-height: 1.8;
}
.contact-block a {
  color: var(--sand);
  border-bottom: 1px solid var(--line);
  transition: color var(--transition), border-color var(--transition);
}
.contact-block a:hover {
  color: var(--gold);
  border-color: var(--gold);
}


/* ─────────────────────────────────────────────────────────────
   12. FOOTER — same on every page
   ───────────────────────────────────────────────────────────── */
.site-footer {
  padding: var(--space-l) 0 var(--space-m);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--line);
}
.footer-brand .wordmark { font-size: 1.5rem; }
.footer-brand p {
  margin-top: var(--space-xs);
  color: var(--accent);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
}
.footer-nav a {
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sand);
}
.footer-nav a:hover { color: var(--gold); }

/* Bottom line: © · Impressum · Datenschutz · credit */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
  padding-top: var(--space-m);
  color: var(--accent);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}
.footer-bottom a { color: var(--accent); }
.footer-bottom a:hover { color: var(--gold); }


/* ─────────────────────────────────────────────────────────────
   13. ATELIER PAGE — story, 4 steps, quote, closing invitation
   ───────────────────────────────────────────────────────────── */

/* Story: photo left, text right */
.atelier-story {
  padding: var(--space-xl) 0;
}
.atelier-story .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-l);
  align-items: center;
}
.atelier-photo {
  aspect-ratio: 4 / 5;
  background: var(--photo-bg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.atelier-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Her name as a handwritten-style "signature" under the text */
.signature {
  margin-top: var(--space-m);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--gold);
}

/* "Der Weg zu Ihrem Schmuckstück" — 4 numbered steps on a line */
.steps {
  padding: var(--space-xl) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.steps-list {
  --dot: 3.5rem;                       /* size of the number circles */
  list-style: none;                    /* our own circles replace "1. 2. 3." */
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-m);
  counter-reset: step;
}
/* The thin connecting line behind the circles */
.steps-list::before {
  content: '';
  position: absolute;
  top: calc(var(--dot) / 2);
  left: calc(var(--dot) / 2);
  right: calc(var(--dot) / 2);
  height: 1px;
  background: var(--line);
}
.step {
  position: relative;
  counter-increment: step;
}
/* Number circle: 01, 02 … counted automatically */
.step::before {
  content: '0' counter(step);
  display: grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  margin-bottom: var(--space-s);
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--surface);          /* hides the line behind the circle */
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--gold);
}
.step h3 { margin-bottom: var(--space-xs); }
.step p  { font-size: 0.95rem; line-height: 1.7; }

/* Quote from Mariann */
.quote {
  padding: var(--space-xl) 0;
  text-align: center;
}
.quote blockquote {
  max-width: 44rem;
  margin: 0 auto;
}
.quote blockquote::before {            /* big gold quotation mark */
  content: '\201E';
  display: block;
  font-family: var(--serif);
  font-size: 5rem;
  line-height: 0.6;
  color: var(--gold);
  margin-bottom: var(--space-m);
}
.quote blockquote p {
  max-width: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: 1.35;
  color: var(--bright);
}
.quote cite {
  display: block;
  margin-top: var(--space-m);
  font-style: normal;
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Closing invitation at the end of a page */
.cta-band {
  padding: var(--space-xl) 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  text-align: center;
}
.cta-band p { margin: 0 auto var(--space-m); }


/* ─────────────────────────────────────────────────────────────
   14. KONTAKT PAGE — form left, contact details right
   ───────────────────────────────────────────────────────────── */
.contact-page {
  padding: var(--space-l) 0 var(--space-xl);
}
.contact-page .container {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
}

/* ── The form ── */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s) var(--space-m);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.form-field--full { grid-column: 1 / -1; }   /* field over both columns */

.form-field label {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: var(--sans);
  font-size: var(--fs-body);
  color: var(--bright);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}
.form-field textarea {
  min-height: 9rem;
  resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
/* Red-free error state: gold dashed border on fields the browser marks invalid
   (only after the visitor typed something) */
.form-field input:user-invalid,
.form-field textarea:user-invalid {
  border-style: dashed;
  border-color: var(--gold);
}

/* Small grey hint text (privacy note, "optional") */
.form-hint {
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  color: var(--accent);
}
.form-hint a { color: var(--accent); text-decoration: underline; }

.contact-form .btn {
  justify-self: start;
  cursor: pointer;
}
.contact-form .btn:disabled { opacity: 0.6; cursor: wait; }

/* Spam trap: invisible for people, bots fill it in */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Message after sending (filled by js/app.js) */
.form-status {
  grid-column: 1 / -1;
  min-height: 1.5em;
  color: var(--accent);
}
.form-status.is-error { color: var(--gold); }

/* ── Contact details on the right ── */
.contact-aside {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
}
.contact-aside .contact-block h3 { margin-bottom: var(--space-xs); }


/* ─────────────────────────────────────────────────────────────
   15. EVENTS PAGE — list of dates, filled from data/events.json
   ───────────────────────────────────────────────────────────── */
.events {
  padding: var(--space-l) 0 var(--space-xl);
}
.events-heading {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-m);
}
.events-past { margin-top: var(--space-xl); }
.events-past[hidden] { display: none; }
.events-empty a { text-decoration: underline; }

.event-list {
  list-style: none;
  display: grid;
  gap: var(--space-s);
}

/* One event: date block left, details right */
.event {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-m);
  align-items: start;
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
}

/* Big day + small month, like a calendar sheet */
.event-date {
  text-align: center;
  font-family: var(--serif);
  color: var(--gold);
  line-height: 1;
}
.event-day {
  display: block;
  font-size: 2.6rem;
}
.event-day small { font-size: 1.4rem; }       /* "28.–29." for multi-day */
.event-month {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.event-type {                                 /* small label like "Markt" */
  display: block;
  margin-bottom: 0.2rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}
.event h3 { margin-bottom: 0.3rem; }
.event-meta {                                 /* time · place · city */
  font-size: 0.95rem;
  color: var(--accent);
}
.event-text { margin-top: var(--space-xs); }
.event .text-link { margin-top: var(--space-s); }

/* Past events: smaller and quieter */
.event-list--past .event {
  padding: var(--space-s) var(--space-m);
  background: transparent;
  border-left-color: var(--sage);
  opacity: 0.7;
}
.event-list--past .event-date,
.event-list--past .event-type { color: var(--sage); }
.event-list--past .event-day { font-size: 1.8rem; }


/* ─────────────────────────────────────────────────────────────
   16. LEGAL PAGES — Impressum, Datenschutz (long plain text)
   ───────────────────────────────────────────────────────────── */
.legal {
  padding: var(--space-l) 0 var(--space-xl);
}
.legal .container > * { max-width: 48rem; }   /* readable line length, left-aligned with the heading */
.legal h2 {
  font-size: var(--fs-h3);
  margin: var(--space-l) 0 var(--space-xs);
}
.legal h2:first-child { margin-top: 0; }
.legal p,
.legal address,
.legal li {
  font-style: normal;
  margin-bottom: var(--space-s);
}
.legal ul {
  list-style: disc;
  padding-left: var(--space-m);
}

/* Yellow-ish marker for gaps that still need real data — remove when filled */
.todo {
  background: var(--gold-soft);
  border: 1px dashed var(--gold);
  padding: 0 0.3em;
  color: var(--gold);
}


/* ─────────────────────────────────────────────────────────────
   17. RESPONSIVE — phones and small tablets (≤ 768px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Header: tighter padding, show the hamburger */
  .header-inner { padding: 0 var(--space-s); }
  .nav-toggle   { display: flex; }

  /* Menu: hidden, drops down under the header when opened (js/app.js) */
  .nav-links {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0 var(--space-s) var(--space-s);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: var(--space-s) 0;
    border-bottom: 1px solid var(--line);
  }

  /* Hero: the text covers most of the photo on phones → darker overall */
  .hero::after {
    background:
      linear-gradient(to top, var(--bg) 0%, transparent 40%),
      color-mix(in srgb, var(--bg) 55%, transparent);
  }
  .hero-content { padding: var(--header-h) var(--space-s) 0; }

  /* Buttons: full width, stacked */
  .hero-buttons .btn { flex: 1 1 100%; }

  /* Über mich: text on top, swipeable photos below */
  .story          { padding: var(--space-l) 0; --story-photo-w: 70vw; }
  .story-sticky   { grid-template-columns: 1fr; gap: var(--space-m); padding: 0; }
  .story-text     { padding: 0 var(--space-s); }
  .story-track    { padding: 0 var(--space-s); gap: var(--space-s); }
  .story-item     { scroll-snap-align: center; }

  /* General: less side padding on phones */
  .container { padding: 0 var(--space-s); }
  .section-head { margin-bottom: var(--space-m); }
  .page-head    { padding: calc(var(--header-h) + var(--space-l)) 0 var(--space-m); }

  /* Leistungen: tighter band, cards stay 2 per row down to 560px */
  .services { padding: var(--space-l) 0; }
  .services-cta .btn { flex: 1 1 100%; }

  /* Galerie: newest piece full width, the rest 2 per row */
  .gallery { padding: var(--space-l) 0; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
  /* Phones: big tile = full width square, then pairs, 6th tile wide */
  .gallery-item:nth-child(6n+1),
  .gallery-item:nth-child(12n+7)  { grid-column: span 2; grid-row: span 1; aspect-ratio: 1; }
  .gallery-item:nth-child(6n)     { grid-column: span 2; aspect-ratio: 2 / 1; }
  /* a tile that would sit alone at the very end: make it wide */
  .gallery-item:last-child:nth-child(6n+2),
  .gallery-item:last-child:nth-child(6n+4) { grid-column: span 2; grid-row: span 1; aspect-ratio: 2 / 1; }
  .gallery-item:last-child:nth-child(6n+5) { grid-column: span 1; aspect-ratio: 1; }
  .gallery-item figcaption { padding: var(--space-m) var(--space-xs) var(--space-xs); }
  .gallery-title { font-size: 1rem; }
  .gallery-actions .btn { flex: 1 1 100%; }

  /* Lightbox: arrows move below the photo */
  .lightbox[open] { flex-wrap: wrap; align-content: center; padding: var(--space-s); }
  .lightbox-figure { order: -1; flex: 1 1 100%; }
  .lightbox-img { min-width: 100%; min-height: 30svh; max-height: 65svh; }

  /* Kontakt: columns below each other, buttons full width */
  .contact { padding: var(--space-l) 0; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-m); }
  .contact-intro .btn { display: block; }
  .contact-intro .btn + .btn { margin: var(--space-xs) 0 0; }

  /* Atelier: photo above text, steps below each other with a vertical line */
  .atelier-story { padding: var(--space-l) 0; }
  .atelier-story .container { grid-template-columns: 1fr; gap: var(--space-m); }
  .steps, .quote, .cta-band { padding: var(--space-l) 0; }
  .steps-list { grid-template-columns: 1fr; gap: var(--space-m); }
  .steps-list::before {
    top: calc(var(--dot) / 2);
    bottom: calc(var(--dot) / 2);
    left: calc(var(--dot) / 2);
    right: auto;
    width: 1px;
    height: auto;
  }
  .step { padding-left: calc(var(--dot) + var(--space-s)); min-height: var(--dot); }
  .step::before { position: absolute; left: 0; top: 0; margin: 0; }

  /* Kontakt page: form on top, details below; form fields 1 per row */
  .contact-page .container { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form .btn { justify-self: stretch; }

  /* Aus Alt wird Neu: slider above, text below */
  .renew { padding: var(--space-l) 0; }
  .renew .container { grid-template-columns: 1fr; gap: var(--space-m); }
  .ba-slider { order: -1; aspect-ratio: 4 / 3; }   /* picture on top, 4:3 */

  /* Events: smaller date block, less padding */
  .event { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-s); padding: var(--space-s); }
  .event-day { font-size: 2rem; }
  .event-day small { font-size: 1.1rem; }

  /* Footer: everything stacked */
  .footer-top,
  .footer-bottom { flex-direction: column; }
}

/* Small phones: 1 card per row */
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────
   18. REDUCED MOTION — if the visitor turned off animations in
   their system settings: no zoom, no fading, just the first photo.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0s; --transition-slow: 0s; }
  html  { scroll-behavior: auto; }

  .hero-slide            { animation: none; }
  .hero-slide:first-child { opacity: 1; }
}