/* ==========================================================================
   Hochzeit Bayern — shared stylesheet
   Mobile-first. Loaded by every page (partials/header.html + partials/footer.html
   share these classes, so this file is the single source of visual truth).
   ========================================================================== */

:root {
  --ink: #211e1a;
  --cream: #faf9f6;
  --cream-alt: #f1ede4;
  /* Darkened from the original #8a6f4d — that read 4.47:1 on cream and
     4.03:1 on cream-alt, both under the 4.5:1 AA floor for normal text.
     This is the only brand-color value changed anywhere in this file. */
  --brass: #7e6444;
  --gold: #c8ab84;
  --gold-light: #e3c79c;
  --star: #d9a441;
  --brown: #4b4236;
  --text-muted: #5d564b;
  --text-muted-2: #6b6459;
  --text-faint: #8c8477;
  --text-faint-2: #8a8274;
  --text-on-dark: #b8b0a2;
  --border-light: #e6e0d5;
  --border-dark: #3a352d;
  --border-warm: #d9d2c2;
  --border-tan: #cfc7b6;
  --error: #a8412f;
  --font: 'Montserrat', sans-serif;
  --container: 1180px;
  --container-wide: 1280px;

  /* ---- Section background rhythm: exactly three tones, reused sitewide ---- */
  --section-base: var(--cream);
  --section-tint: var(--cream-alt);
  --section-dark: var(--ink);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* CSS alone can't stop the portfolio carousel's rAF autoplay loop or a
   JS-specified {behavior:'smooth'} — main.js checks this same query
   itself for those. This half covers scroll-behavior and CSS transitions. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--cream);
  font-family: var(--font);
  color: var(--ink);
  min-width: 320px;
}
img { max-width: 100%; display: block; }
/* Responsive images are <picture><source>…<img></picture> (see build.js's
   applyResponsiveImages). Every existing sizing rule in this file targets
   the img itself (e.g. .portfolio__track img { flex: 0 0 260px }), written
   back when img was always the direct child of its layout container.
   display:contents makes the picture wrapper invisible to layout — flex/
   grid containers see straight through to the img as if picture weren't
   there — so none of those rules needed to be duplicated for picture.
   picture has no semantics of its own for this to affect (the img inside
   keeps its own alt text regardless). */
picture { display: contents; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--brass); }
/* Native focus outlines are never suppressed anywhere in this file except
   the contact form inputs (which get their own gold ring below) — this
   just makes the default consistent and clearly visible on every
   interactive element, light or dark section alike. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
::selection { background: #e8dfd2; }
h1, h2, h3, p { margin: 0; }
button { font-family: var(--font); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--brass);
}
/* Pre-existing bug found during the Task B contrast audit: gold on the
   Quote section's light background computed to 2.07:1. Only used once
   (the homepage Quote section's "· Hochzeit Bayern ·" mark); darkened to
   the same --brass fix used for the default .eyebrow. */
.eyebrow--gold { color: var(--brass); }
.section--dark .eyebrow--gold { color: var(--gold); }
.section-heading {
  margin: 0; font-weight: 300; line-height: 1.15;
  font-size: clamp(30px, 3.6vw, 50px);
}
.section-heading em { font-weight: 500; font-style: normal; }
.section-lede {
  margin: 0; font-size: 15px; line-height: 1.8; color: var(--text-muted);
}
.section {
  padding: clamp(88px, 9vw, 132px) 20px;
}
@media (min-width: 640px) {
  .section { padding-left: 32px; padding-right: 32px; }
  .container { padding-left: 32px; padding-right: 32px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--lg { padding: 16px 36px; }
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { background: var(--brass); color: var(--cream); }
.btn--outline-gold { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn--outline-gold:hover { background: var(--gold); color: var(--ink); }
.btn--outline-dark { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline-dark:hover { background: var(--ink); color: var(--cream); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--cream); color: var(--ink); }
.text-link {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass); border-bottom: 1px solid var(--brass); padding-bottom: 4px;
}
.text-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light);
}
.site-header__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (min-width: 640px) { .site-header__inner { padding: 14px clamp(20px, 2.5vw, 32px); } }
.site-header__logo { display: flex; align-items: center; flex: none; }
.site-header__logo img { height: 40px; width: auto; }
@media (min-width: 640px) { .site-header__logo img { height: 52px; } }

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0; margin: 0;
  border: 0; background: transparent; cursor: pointer;
}
.nav-toggle__bar {
  display: block; width: 24px; height: 2px; background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--border-light);
  flex-direction: column;
  padding: 8px 20px 20px;
  gap: 4px;
}
.site-nav.is-open { display: flex; }
.site-nav__link {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); padding: 12px 0; border-bottom: 1px solid var(--border-light);
}
.site-nav__link:hover { color: var(--brass); }
.site-nav__link--cta {
  margin-top: 10px; border-bottom: 0; text-align: center;
  background: var(--ink); color: var(--cream); padding: 12px; border-radius: 2px;
}
.site-nav__link--cta:hover { background: var(--brass); color: var(--cream); }

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: flex; position: static; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: flex-end; background: transparent; border: 0;
    padding: 0; row-gap: 8px; column-gap: clamp(13px, 1.7vw, 28px);
    font-size: clamp(11.5px, 1.05vw, 13px); white-space: nowrap;
  }
  .site-nav__link { padding: 0; border-bottom: 0; }
  .site-nav__link--cta {
    margin-top: 0; padding: 11px clamp(16px, 1.7vw, 22px); flex: none;
  }
}

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero__row { display: flex; flex-direction: column; }
@media (min-width: 760px) {
  .hero__row {
    flex-direction: row;
    height: calc(88svh - 81px);
    min-height: 540px;
    max-height: 820px;
  }
}
.hero__half {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  flex: 1; min-height: 55vh;
}
@media (min-width: 760px) {
  .hero__half { min-height: 0; transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
  .hero__row:has(.hero__half--foto:hover) .hero__half--foto { flex: 1.35; }
  .hero__row:has(.hero__half--foto:hover) .hero__half--video { flex: 0.65; }
  .hero__row:has(.hero__half--video:hover) .hero__half--video { flex: 1.35; }
  .hero__row:has(.hero__half--video:hover) .hero__half--foto { flex: 0.65; }
}
.hero__half--video { justify-content: flex-end; border-top: 3px solid var(--cream); }
@media (min-width: 760px) { .hero__half--video { border-top: 0; border-left: 3px solid var(--cream); } }
.hero__half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__half--foto img { object-position: 50% 30%; }
.hero__half--video img { object-position: 50% 55%; }
.hero__half::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,17,13,0.72) 0%, rgba(20,17,13,0.12) 45%, rgba(20,17,13,0) 70%);
}
.hero__half-content {
  position: relative; padding: 32px 24px; color: var(--cream); width: 100%;
}
@media (min-width: 640px) { .hero__half-content { padding: 48px 44px; } }
.hero__half--video .hero__half-content { text-align: right; }
.hero__half-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  opacity: 0.85; margin-bottom: 10px;
}
.hero__half-title {
  font-size: clamp(30px, 3.4vw, 48px); font-weight: 300; letter-spacing: 0.02em; line-height: 1.1;
}
.hero__half-cta {
  display: flex; align-items: center; gap: 10px; margin-top: 18px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.hero__half--video .hero__half-cta { justify-content: flex-end; }
.hero__half-line { display: inline-block; width: 36px; height: 1px; background: var(--cream); }

.hero__center {
  position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center;
  pointer-events: none; z-index: 2; padding: clamp(24px, 9vh, 110px) 24px 0;
}
.hero__center-inner {
  text-align: center; color: var(--cream); text-shadow: 0 2px 24px rgba(20,17,13,0.55);
}
.hero__center-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; margin-bottom: 14px; }
.hero__center h1 {
  font-size: clamp(28px, 4.4vw, 60px); font-weight: 400; line-height: 1.15;
  letter-spacing: 0.01em; max-width: 17ch; margin: 0 auto; font-family: var(--font);
}

/* ---------- Quote / intro ---------- */
.quote { position: relative; text-align: center; overflow: hidden; }
.quote__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 45%; filter: blur(3px) grayscale(1); opacity: 0.3; transform: scale(1.06);
}
.quote__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(241,237,228,0.78), rgba(241,237,228,0.62)); }
.quote__inner { position: relative; max-width: 760px; margin: 0 auto; display: grid; gap: 28px; justify-items: center; }
.quote__rule { width: 44px; height: 1px; background: var(--brass); }
.quote__text {
  font-size: clamp(22px, 3vw, 38px); font-weight: 300; font-style: italic; line-height: 1.4;
  color: var(--ink); max-width: 840px;
}
.quote__body { max-width: 620px; font-size: 16px; line-height: 1.8; color: var(--text-muted); }
.quote__price { font-size: 13.5px; color: var(--text-faint); }
.quote__price a { color: var(--brass); font-weight: 600; }
.quote__price a:hover { color: var(--ink); }

/* ==========================================================================
   Section background rhythm — three tones (see --section-* in :root),
   applied via one of these classes directly on a page's <section>.
   `color` is inherited by every descendant that doesn't set its own, so
   plain headings/paragraphs flip automatically; components below that
   hardcode a color of their own (eyebrow, package-card, faq-item, etc.)
   get an explicit override here for whichever tone they don't already
   assume by default.
   ========================================================================== */
.section--base { background: var(--section-base); color: var(--ink); }
.section--tint { background: var(--section-tint); color: var(--ink); }
.section--dark { background: var(--section-dark); color: var(--cream); }

.section-hairline { border-top: 1px solid var(--border-tan); }
.section--dark.section-hairline { border-top-color: var(--border-dark); }

/* -- Components that default to a light-section look, overridden when
      they land inside a dark section (Preise, Sicherheit, and the video
      page's Leistungen block) -- */
.section--dark .eyebrow { color: var(--gold); }
.section--dark .step__title { color: var(--cream); }
.section--dark .step p { color: var(--text-on-dark); }
.section--dark .feature { border-top-color: var(--border-dark); }
.section--dark .feature p { color: var(--text-on-dark); }
.section--dark .videography__intro p { color: var(--text-on-dark); }
.section--dark .packages__aside { color: var(--text-on-dark); }
.section--dark .packages__aside a { color: var(--gold); }
.section--dark .package-card__kicker { color: var(--gold); }
.section--dark .package-card__name { color: var(--cream); }
.section--dark .package-card__sub { color: var(--text-on-dark); }
.section--dark .package-card__tier-name { color: var(--gold); }
.section--dark .package-card__price { color: var(--cream); }
.section--dark .package-card__note { color: var(--text-on-dark); }
.section--dark .package-card__head { border-bottom-color: var(--border-dark); }
.section--dark .package-card__tier { border-top-color: var(--border-dark); }
/* Plain .package-card keeps a solid --cream fill by default (fine on a
   light section) — on a dark section that would put the now-cream text
   on a cream card, so it needs the same transparent+bordered treatment
   as the outline variant, just with a plainer border to keep the two
   tiers visually distinct. */
.section--dark .package-card:not(.package-card--outline) { background: rgba(255,255,255,0.04); border: 1px solid var(--border-dark); }
.section--dark .package-card--outline { border-color: var(--border-warm); background: rgba(255,255,255,0.03); }
.section--dark .packages__cta p { color: var(--text-on-dark); }
.section--dark .packages__fineprint { color: var(--text-faint); }
/* .btn--dark is ink-on-transparent-ink-bg — invisible on a dark section,
   so it borrows the gold treatment instead when nested in one. */
.section--dark .btn--dark { background: var(--gold); color: var(--ink); }
.section--dark .btn--dark:hover { background: var(--cream); color: var(--ink); }
/* .btn--outline-dark is ink-on-transparent — also invisible on a dark
   section (video page's Leistungen block, which starts out light and
   flips dark like the photo page's already-dark equivalent). */
.section--dark .btn--outline-dark { border-color: var(--gold); color: var(--gold); }
.section--dark .btn--outline-dark:hover { background: var(--gold); color: var(--ink); }

/* -- Components that default to a dark-section look, overridden when they
      land inside a base/tint section (both service pages' FAQ and Stimmen,
      and the video page's split-out Portfolio block) -- */
.section--base .portfolio__heading,
.section--tint .portfolio__heading { color: var(--ink); }
.section--base .faq-item,
.section--tint .faq-item { border-top-color: var(--border-tan); }
.section--base .faq-item:last-child,
.section--tint .faq-item:last-child { border-bottom-color: var(--border-tan); }
.section--base .faq-item summary,
.section--tint .faq-item summary { color: var(--ink); }
.section--base .faq-item summary:hover,
.section--tint .faq-item summary:hover,
.section--base .faq-item summary:hover .faq-item__sign,
.section--tint .faq-item summary:hover .faq-item__sign { color: var(--brass); }
.section--base .faq-item__sign,
.section--tint .faq-item__sign { color: var(--brass); }
.section--base .faq-item__body p,
.section--tint .faq-item__body p { color: var(--text-muted-2); }
.section--base .faq-item__body p.is-muted,
.section--tint .faq-item__body p.is-muted { color: var(--text-faint-2); }
.section--base .faq-item__block,
.section--tint .faq-item__block { border-left-color: var(--border-tan); }
.section--base .faq-item__block-label,
.section--tint .faq-item__block-label { color: var(--brass); }
.section--base .faq__intro p,
.section--tint .faq__intro p { color: var(--text-muted); }
.section--tint .testimonials__rating { color: var(--text-muted); }
.section--tint .testimonials__more { color: var(--text-muted); }
.section--tint .testimonials__more a { color: var(--brass); }

/* ---------- Fotografie ---------- */
.photography__grid {
  display: grid; gap: clamp(32px, 6vw, 90px); align-items: center;
}
@media (min-width: 880px) { .photography__grid { grid-template-columns: 1.1fr 1fr; } }
.photography__copy { display: grid; gap: 24px; }
.photography__copy p { color: var(--text-on-dark); max-width: 52ch; font-size: 15px; line-height: 1.8; }
.photography__services { display: grid; margin-top: 8px; }
.photography__service {
  padding: 22px 0; border-top: 1px solid var(--border-dark); display: grid; gap: 8px;
}
.photography__service:last-child { border-bottom: 1px solid var(--border-dark); }
.photography__service-title { font-size: 16px; font-weight: 600; letter-spacing: 0.04em; }
.photography__service p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-on-dark); max-width: none; }
.photography__images {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.photography__images img {
  width: 100%; height: auto; aspect-ratio: 3 / 4.2; object-fit: cover;
}
.photography__images img:first-child { margin-top: 36px; }
@media (max-width: 879px) { .photography__images img:first-child { margin-top: 0; } }

.portfolio { display: grid; gap: 24px; margin-top: clamp(56px, 7vw, 90px); }
.portfolio__heading { margin: 0; font-size: 22px; font-weight: 500; color: var(--cream); }
.portfolio__track { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.portfolio__track::-webkit-scrollbar { display: none; }
.portfolio__track img {
  flex: 0 0 260px; width: 260px; height: 300px; object-fit: cover;
}
@media (min-width: 640px) { .portfolio__track img { flex-basis: 300px; width: 300px; height: 420px; } }
.portfolio__track img.is-wide { flex-basis: 380px; width: 380px; }
@media (min-width: 640px) { .portfolio__track img.is-wide { flex-basis: 460px; width: 460px; } }
.scroll-controls { display: flex; justify-content: center; gap: 12px; }
.scroll-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold);
  background: transparent; color: var(--gold); font-size: 16px; cursor: pointer; font-family: var(--font);
}
.scroll-btn:hover { background: var(--gold); color: var(--ink); }
.scroll-btn--light { border-color: var(--gold-light); color: var(--gold-light); }
.scroll-btn--light:hover { background: var(--gold-light); color: var(--ink); }

/* Small reusable grid utilities — mobile-first (stack by default, add
   columns at wider breakpoints), matching the pattern .videography__features
   already uses. Introduced for the hochzeitsfotograf-passau page's new
   sections (Ablauf timeline, "Was ihr bekommt"); safe to reuse anywhere
   else on the site that needs a plain 2- or 3-column layout. */
.hb-two-col { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 700px) { .hb-two-col { grid-template-columns: 1fr 1fr; } }
.hb-three-col { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 560px) { .hb-three-col { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .hb-three-col { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Videografie ---------- */
.videography__intro { max-width: 720px; display: grid; gap: 24px; }
.videography__intro p { font-size: 15px; line-height: 1.8; color: var(--text-muted); }
.videography__features {
  display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: clamp(40px, 5vw, 64px);
}
@media (min-width: 560px) { .videography__features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .videography__features { grid-template-columns: repeat(4, 1fr); } }
.feature { display: grid; gap: 10px; align-content: start; border-top: 2px solid var(--ink); padding-top: 20px; }
.feature--highlight { border-top-color: var(--brass); }
.feature__title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feature p { font-size: 13.5px; line-height: 1.7; color: var(--text-muted); }
.feature__badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--brass); color: var(--cream); padding: 4px 8px; border-radius: 2px;
}
.video-portfolio { display: grid; gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.video-portfolio__heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.video-portfolio__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .video-portfolio__grid { grid-template-columns: repeat(3, 1fr); } }
.video-slot { aspect-ratio: 16 / 9; background: var(--ink); position: relative; overflow: hidden; }
.video-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-slot__play {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  background: transparent; cursor: pointer; display: block;
}
.video-slot__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-slot__play-scrim {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(33,30,26,0.18); transition: background 0.25s ease;
}
.video-slot__play:hover .video-slot__play-scrim { background: rgba(33,30,26,0.34); }
.video-slot__play-icon {
  width: 62px; height: 62px; border-radius: 50%; background: rgba(250,249,246,0.92);
  display: grid; place-items: center; color: var(--ink); font-size: 19px; padding-left: 4px;
}
.video-slot.is-playing .video-slot__play,
.video-slot.is-playing .video-slot__placeholder { display: none; }
.video-slot:not(.is-playing) iframe { display: none; }

/* ---------- Team ---------- */
.team { background: var(--cream-alt); }
.team__intro { max-width: 720px; display: grid; gap: 20px; }
.team__intro p { font-size: 15px; line-height: 1.8; color: var(--text-muted); }
.team__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: clamp(40px, 5vw, 60px); }
@media (min-width: 700px) { .team__grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } }
.team__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); }
.team__promise { background: var(--ink); color: var(--cream); padding: clamp(28px, 3.5vw, 40px); display: grid; gap: 16px; }
.team__promise-label { font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.team__promise p:first-of-type { font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; line-height: 1.55; }
.team__promise p { color: var(--text-on-dark); font-size: 14px; line-height: 1.8; }
.team__bios { display: grid; gap: clamp(20px, 2.5vw, 28px); }
.team__bio { background: var(--cream); display: grid; grid-template-columns: minmax(140px, 220px) 1fr; }
.team__bio img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

/* Abel's and Christin's portraits are landscape source photos (1.5:1) inside
   a narrow portrait-shaped crop box (.team__bio's image column is a fixed
   minmax(140px,220px) at every breakpoint). On desktop the box is wide
   enough that only vertical framing needs a nudge — the values below just
   relocate what used to be an inline object-position, so desktop rendering
   is unchanged. Below 640px the same column becomes so narrow/tall next to
   the wrapped bio text that object-fit:cover crops almost entirely on the
   X axis instead; left at the default 50% that cut both faces off, so each
   photo needs its own horizontal position at the site's existing mobile
   breakpoint (matches the max-width:639px used for .kontakt-form__row). */
.team__bio-photo--crop-fix { object-position: 50% 20%; }
.team__bio-photo--crop-fix[src*="abel-portrait"] { object-position: 50% 25%; }
@media (max-width: 639px) {
  .team__bio-photo--crop-fix[src*="christin-portrait"] { object-position: 25% 20%; }
  .team__bio-photo--crop-fix[src*="abel-portrait"] { object-position: 45% 25%; }
}
.team__bio-content { padding: clamp(22px, 2.6vw, 36px) clamp(20px, 2.6vw, 34px); display: grid; gap: 12px; align-content: center; }
.team__bio-name { font-size: 22px; font-weight: 600; color: var(--ink); }
.team__bio-role { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }
.team__bio p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-muted); }
.team__facts { display: grid; }
.team__fact { border-top: 1px solid var(--border-warm); padding: 18px 0; display: flex; gap: 14px; align-items: baseline; }
.team__fact:last-child { border-bottom: 1px solid var(--border-warm); }
.team__fact-label { font-size: 13px; font-weight: 600; color: var(--brass); white-space: nowrap; }
.team__fact-value { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }

/* ---------- Ablauf / steps ---------- */
.steps__intro { display: grid; gap: 16px; justify-items: center; text-align: center; max-width: 700px; margin: 0 auto; }
.steps__intro p { font-size: 15px; line-height: 1.8; color: var(--text-muted-2); max-width: 54ch; }
.steps__list {
  position: relative; display: grid; grid-template-columns: 1fr;
  row-gap: clamp(28px, 5vw, 40px); align-items: center; margin-top: clamp(44px, 5vw, 68px);
}
@media (min-width: 760px) {
  .steps__list { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); row-gap: clamp(48px, 5vw, 76px); }
  .steps__list::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border-warm);
  }
}
.step { display: grid; gap: 16px; }
.step--text { border-top: 1px solid var(--gold); padding-top: 22px; }
.step__kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); }
.step__title { font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.3; color: var(--ink); }
.step p { font-size: 14.5px; line-height: 1.85; color: var(--text-muted-2); }
.step img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.steps__cta { display: grid; justify-content: center; margin-top: clamp(44px, 5vw, 68px); }

/* ---------- Testimonials ---------- */
/* Background/text color: .section--base/tint/dark utility on the <section>.
   Was a dedicated --brown fill; retired in favour of the shared 3-token
   rhythm (now always tint). .testimonials__rating/__more below still
   assume a dark section by default — light-context overrides live in the
   "Section background rhythm" block further down. */
.testimonials__intro { text-align: center; display: grid; gap: 16px; justify-items: center; }
.testimonials__rating { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--border-warm); }
.stars { color: var(--star); font-size: 17px; letter-spacing: 3px; }
.testimonials__wrap { position: relative; display: grid; gap: 20px; margin-top: clamp(36px, 4vw, 52px); }
.testimonials__track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonial {
  flex: 0 0 82%; scroll-snap-align: start; border: 1px solid var(--border-light);
  background: var(--cream); padding: 28px 26px; display: grid; gap: 18px; align-content: start;
}
@media (min-width: 620px) { .testimonial { flex-basis: calc((100% - 24px) / 2); } }
@media (min-width: 960px) { .testimonial { flex-basis: calc((100% - 48px) / 3); } }
.testimonial .stars { font-size: 15px; }
.testimonial p { font-size: 14px; line-height: 1.8; color: #3d3830; font-style: italic; }
.testimonial__name { font-size: 13px; font-weight: 600; color: var(--ink); }
.testimonial__source { font-size: 12px; color: #8a8274; }
.testimonials__more { text-align: center; font-size: 13px; color: var(--border-warm); }
.testimonials__more a { color: var(--gold-light); font-weight: 600; text-decoration: underline; }

/* ---------- Pakete ---------- */
/* Structural only now — background/text color come from the
   .section--base/tint/dark utility applied alongside this class. */
.packages { position: relative; overflow: hidden; }
.packages__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  filter: blur(3.5px) grayscale(1); opacity: 0.3; transform: scale(1.08);
}
.packages__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(241,237,228,0.78), rgba(241,237,228,0.62)); }
.packages__inner { position: relative; max-width: 1080px; margin: 0 auto; display: grid; gap: clamp(28px, 3.5vw, 40px); }
.packages__intro { max-width: 720px; display: grid; gap: 18px; }
.packages__intro p { font-size: 15px; line-height: 1.8; color: var(--text-muted); }
.packages__grid { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.5vw, 28px); align-items: stretch; }
.package-card {
  flex: 1 1 260px; min-width: 0; background: var(--cream); padding: clamp(28px, 3vw, 40px) clamp(22px, 2.8vw, 36px);
  display: grid; gap: 24px; align-content: start;
}
.package-card--outline { border: 1px solid var(--border-tan); background: transparent; }
.package-card--dark { background: var(--ink); color: var(--cream); position: relative; }
.package-card--dark::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); }
.package-card__head { display: grid; gap: 8px; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
.package-card--outline .package-card__head { border-bottom-color: var(--border-tan); }
.package-card--dark .package-card__head { border-bottom-color: var(--border-dark); }
.package-card__kicker { font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); }
.package-card--dark .package-card__kicker { color: var(--gold); }
.package-card__name { font-size: 21px; font-weight: 500; color: var(--ink); }
.package-card--dark .package-card__name { color: var(--cream); }
.package-card__sub { font-size: 13px; color: var(--text-faint); }
.package-card--dark .package-card__sub { color: var(--text-on-dark); }
.package-card__tier { display: grid; gap: 6px; border-top: 1px solid var(--border-light); padding-top: 20px; }
.package-card__tier:first-of-type { border-top: 0; padding-top: 0; }
.package-card--dark .package-card__tier { border-top-color: var(--border-dark); }
.package-card__tier-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.package-card--dark .package-card__tier-name { color: var(--gold); }
.package-card__tier-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.package-card__price { font-size: clamp(32px, 3vw, 42px); font-weight: 300; line-height: 1; color: var(--ink); }
.package-card--dark .package-card__price { color: var(--cream); }
.package-card__note { font-size: 12.5px; line-height: 1.6; color: var(--text-faint); }
.package-card--dark .package-card__note { color: var(--text-on-dark); }
.package-card__save { font-size: 12.5px; color: var(--gold); }
.package-card__flag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold); padding: 4px 8px;
}
.packages__aside { text-align: center; font-size: 13px; line-height: 1.7; color: var(--text-muted); }
.packages__aside a { color: var(--brass); font-weight: 600; }
.packages__aside a:hover { color: var(--ink); }
.packages__cta { display: grid; gap: 20px; justify-items: center; text-align: center; padding-top: 8px; }
.packages__cta p { font-size: 13px; color: var(--text-faint); max-width: 52ch; }
.packages__fineprint { font-size: 11.5px; color: #a39a89; }

/* ---------- FAQ ---------- */
/* Background/text color: .section--base/tint/dark utility on the <section>.
   .faq-item's own colors below still assume a dark section by default
   (that's still true on the homepage) — the "Section background rhythm"
   block further down adds the light-context overrides for pages where
   FAQ sits on base/tint instead. */
.faq__intro { display: grid; gap: 16px; max-width: 640px; }
.faq__intro p { font-size: 15px; line-height: 1.8; color: var(--text-on-dark); }
.faq__list { display: grid; margin-top: clamp(32px, 4vw, 48px); }
.faq-item { border-top: 1px solid var(--border-dark); }
.faq-item:last-child { border-bottom: 1px solid var(--border-dark); }
.faq-item summary {
  list-style: none; width: 100%; padding: 26px 0; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 24px; cursor: pointer; color: var(--cream);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold); }
.faq-item summary:hover .faq-item__sign { color: var(--gold); }
.faq-item__question { font-size: clamp(16px, 1.5vw, 19px); font-weight: 600; line-height: 1.4; }
.faq-item__sign { font-size: 22px; font-weight: 300; line-height: 1.2; color: var(--gold); flex: none; }
.faq-item__sign::after { content: "+"; }
.faq-item[open] .faq-item__sign::after { content: "–"; }
.faq-item__body { display: grid; gap: 18px; padding: 0 0 32px; max-width: 68ch; }
.faq-item__body p { font-size: 14.5px; line-height: 1.85; color: var(--text-on-dark); }
.faq-item__body p.is-muted { color: var(--text-faint); }
.faq-item__block { display: grid; gap: 16px; border-left: 1px solid var(--border-dark); padding-left: 22px; }
.faq-item__block-item { display: grid; gap: 6px; }
.faq-item__block-label { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.faq__cta { display: grid; gap: 20px; justify-items: center; text-align: center; padding-top: 8px; }
.faq__cta p { font-size: 15px; line-height: 1.8; color: var(--text-on-dark); max-width: 56ch; }

/* ---------- Kontakt ---------- */
.contact__grid { display: grid; gap: clamp(32px, 6vw, 90px); align-items: start; }
@media (min-width: 820px) {
  .contact__grid { grid-template-columns: 1fr 1fr; }
  /* The form makes the left column much taller than the photo. Sticky keeps
     the photo (and its Google badge) in view as you scroll through the form,
     instead of it scrolling away near the top while the submit button is
     still two screens down. 96px clears the sticky site header. */
  .contact__photo { position: sticky; top: 96px; }
}
.contact__copy { display: grid; gap: 24px; }
.contact__copy p { font-size: 15px; line-height: 1.8; color: var(--text-muted); max-width: 50ch; }
.contact__list { display: grid; margin-top: 4px; max-width: 460px; }
.contact__row {
  display: flex; justify-content: space-between; gap: 20px; padding: 18px 0;
  border-top: 1px solid var(--border-light); font-size: 14px;
}
.contact__row:last-child { border-bottom: 1px solid var(--border-light); }
.contact__label {
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px;
  color: var(--text-faint-2); align-self: center;
}
.contact__value { font-weight: 500; color: var(--ink); }
.contact__photo { display: grid; gap: 20px; }
.contact__photo-primary { position: relative; }
.contact__photo-primary img { width: 100%; height: auto; aspect-ratio: 3 / 3.8; object-fit: cover; }
.contact__badge {
  position: absolute; left: 12px; bottom: 20px; background: var(--cream); padding: 16px 22px;
  box-shadow: 0 8px 30px rgba(33,30,26,0.12); display: grid; gap: 4px;
}
@media (min-width: 640px) { .contact__badge { left: -18px; bottom: 28px; padding: 18px 24px; } }
.contact__badge .stars { color: var(--star); font-size: 14px; }
.contact__badge-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
/* Second contact photo: fills the empty space that opened up below the
   sticky photo once the enquiry form made .contact__copy much taller than
   a single portrait photo. Native 2:3, so no object-fit crop needed. */
.contact__photo-second { width: 100%; height: auto; display: block; }

/* ---------- Kontaktformular ---------- */
.kontakt-divider { border-top: 1px solid var(--border-light); margin: 8px 0 4px; }
.kontakt-availability {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); line-height: 1.6;
}
.kontakt-availability__dot { color: var(--gold); font-size: 16px; }
.kontakt-transition { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-muted); }

.kontakt-form { display: grid; gap: 20px; margin-top: 4px; }

.kontakt-form__summary {
  border: 1px solid var(--error); background: rgba(168,65,47,0.06);
  padding: 16px 20px; display: grid; gap: 8px;
}
.kontakt-form__summary-heading { margin: 0; font-size: 13px; font-weight: 600; color: var(--error); }
.kontakt-form__summary ul { margin: 0; padding-left: 20px; }
.kontakt-form__summary li { font-size: 13.5px; line-height: 1.6; color: var(--error); }

.kontakt-form__row { display: grid; gap: 16px; }
.kontakt-form__row--pair { grid-template-columns: 1fr 1fr; }
.kontakt-form__row--names { grid-template-columns: 1fr auto 1fr; align-items: center; }
@media (max-width: 639px) {
  .kontakt-form__row--pair,
  .kontakt-form__row--names { grid-template-columns: 1fr; }
  .kontakt-form__ampersand { justify-self: center; }
}

.kontakt-form__field { display: grid; gap: 6px; min-width: 0; }
.kontakt-form__field--full { grid-column: 1 / -1; }
.kontakt-form__label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint-2);
}
.kontakt-form__ampersand {
  font-size: 40px; color: var(--gold); font-weight: 700; line-height: 1; padding: 0 4px;
}

.kontakt-form__input {
  width: 100%; box-sizing: border-box; font-family: var(--font); font-size: 16px;
  color: var(--ink); background: var(--cream); border: 1px solid var(--border-light);
  border-radius: 2px; padding: 14px 16px; min-height: 44px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kontakt-form__input::placeholder { color: var(--text-faint); }
.kontakt-form__input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,171,132,0.28);
}
.kontakt-form__input.has-error { border-color: var(--error); }
.kontakt-form__input.has-error:focus { box-shadow: 0 0 0 3px rgba(168,65,47,0.18); }
.kontakt-form__input:disabled { background: var(--border-light); color: var(--text-faint); cursor: not-allowed; }
.kontakt-form__textarea { min-height: 152px; resize: vertical; }
.kontakt-form__error { font-size: 12.5px; color: var(--error); }

.kontakt-form__checkbox-row {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 4px;
}
.kontakt-form__checkbox-row input[type="checkbox"] {
  accent-color: var(--gold); width: 18px; height: 18px; min-width: 18px; margin-top: 2px; cursor: pointer;
}
.kontakt-form__checkbox-row label {
  font-size: 13.5px; line-height: 1.6; color: var(--text-muted); cursor: pointer;
}
.kontakt-form__checkbox-row a { color: var(--brass); text-decoration: underline; }
.kontakt-form__checkbox-row a:hover { color: var(--ink); }

.kontakt-form__consent { display: grid; gap: 6px; }

.kontakt-form__submit { display: grid; gap: 10px; justify-items: start; margin-top: 4px; }
.kontakt-form__submit .btn { min-height: 44px; }
.kontakt-form__submit-note { margin: 0; font-size: 12.5px; color: var(--text-faint); }

/* Honeypot: off-screen, not display:none, so bots that check computed
   visibility (not just the DOM) still find and fill it. */
.kontakt-form__hp {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Blog preview ---------- */
.blog-preview { background: var(--cream-alt); }
.blog-preview__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.blog-preview__intro { display: grid; gap: 16px; max-width: 680px; }
.blog-preview__intro p { font-size: 15px; line-height: 1.8; color: var(--text-muted); }
.blog-preview__wrap { display: grid; gap: 20px; margin-top: clamp(36px, 4vw, 52px); }
.blog-preview__track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.blog-preview__track::-webkit-scrollbar { display: none; }
.blog-preview__track .blog-card { flex: 0 0 82%; scroll-snap-align: start; }
@media (min-width: 680px) { .blog-preview__track .blog-card { flex-basis: calc((100% - 24px) / 2); } }
@media (min-width: 980px) { .blog-preview__track .blog-card { flex-basis: calc((100% - 48px) / 3); } }
.blog-card { background: var(--cream); display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.blog-card__image { display: block; position: relative; overflow: hidden; }
.blog-card__image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.blog-card__body { padding: 26px 28px 30px; display: grid; gap: 12px; align-content: start; }
.blog-card__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }
.blog-card__title { font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.blog-card__title a:hover { color: var(--brass); }
.blog-card p { font-size: 13.5px; line-height: 1.7; color: var(--text-muted); }
.blog-card__meta { font-size: 12px; color: var(--text-faint-2); margin-top: 4px; }

/* ---------- Legal pages (Impressum, Datenschutz) ---------- */
.legal-hero { padding: clamp(56px, 7vw, 88px) 20px clamp(32px, 4vw, 48px); }
@media (min-width: 640px) { .legal-hero { padding-left: 32px; padding-right: 32px; } }
.legal-hero__inner { max-width: 760px; margin: 0 auto; display: grid; gap: 16px; }
.legal-hero h1 { font-weight: 300; line-height: 1.15; font-size: clamp(30px, 3.6vw, 48px); }
.legal-hero--photo { position: relative; overflow: hidden; }
.legal-hero--photo .legal-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.3; filter: blur(7.5px);
}
.legal-hero--photo .legal-hero__inner { position: relative; }
.legal { padding: 0 20px clamp(88px, 9vw, 132px); }
@media (min-width: 640px) { .legal { padding-left: 32px; padding-right: 32px; } }
.legal__inner {
  max-width: 760px; margin: 0 auto; font-size: 14.5px; line-height: 1.85; color: var(--text-muted);
}
.legal__inner h2 {
  font-size: 20px; font-weight: 600; color: var(--ink); margin-top: 44px; margin-bottom: 16px;
  padding-top: 24px; border-top: 1px solid var(--border-light);
}
.legal__inner h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__inner h4 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 16px; }
.legal__inner p { margin: 0 0 16px; }
.legal__inner ul { margin: 0 0 16px; padding-left: 22px; }
.legal__inner li { margin-bottom: 6px; }
.legal__inner a { color: var(--brass); text-decoration: underline; }
.legal__inner a:hover { color: var(--ink); }
.legal__inner strong { color: var(--ink); }

/* ---------- Blog post ---------- */
.post-hero { padding: clamp(56px, 7vw, 88px) 20px clamp(40px, 5vw, 64px); }
@media (min-width: 640px) { .post-hero { padding-left: 32px; padding-right: 32px; } }
.post-hero__inner { max-width: 760px; margin: 0 auto; display: grid; gap: 16px; text-align: center; justify-items: center; }
.post-hero__meta { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.post-hero__title { font-weight: 300; line-height: 1.15; font-size: clamp(28px, 4vw, 46px); max-width: 20ch; }
.post-hero__image-wrap { max-width: 620px; margin: clamp(28px, 4vw, 44px) auto 0; }
.post-hero__image-wrap img { width: 100%; height: auto; display: block; }

.post { padding: 0 20px clamp(72px, 8vw, 110px); }
@media (min-width: 640px) { .post { padding-left: 32px; padding-right: 32px; } }
.post__inner { max-width: 720px; margin: 0 auto; font-size: 16.5px; line-height: 1.9; color: var(--text-muted); }
.post__inner h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; color: var(--ink); margin: 44px 0 18px; }
.post__inner h3 { font-size: 19px; font-weight: 600; color: var(--ink); margin: 32px 0 14px; }
.post__inner p { margin: 0 0 22px; }
.post__inner ul { margin: 0 0 22px; padding-left: 22px; }
.post__inner li { margin-bottom: 8px; }
.post__inner blockquote {
  margin: 32px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--gold);
  font-size: 19px; font-style: italic; color: var(--ink);
}
.post__inner a { color: var(--brass); text-decoration: underline; }
.post__inner a:hover { color: var(--ink); }
.post__image { margin: 40px 0; }
.post__image img { width: 100%; height: auto; display: block; }

.post-cta {
  margin-top: 48px; background: var(--ink); color: var(--cream);
  padding: clamp(32px, 4vw, 48px); display: grid; gap: 16px; justify-items: start; text-align: left;
}
.post-cta__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.post-cta__title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; line-height: 1.3; margin: 0; }
.post-cta p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--text-on-dark); max-width: 52ch; }

.related-posts { background: var(--cream-alt); padding: clamp(64px, 7vw, 96px) 20px; }
@media (min-width: 640px) { .related-posts { padding-left: 32px; padding-right: 32px; } }
.related-posts__inner { max-width: var(--container); margin: 0 auto; display: grid; gap: clamp(28px, 3vw, 40px); }
.related-posts__heading { font-size: 22px; font-weight: 500; color: var(--ink); margin: 0; }
.related-posts__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 680px) { .related-posts__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .related-posts__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--ink); color: var(--cream);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  max-width: var(--container-wide); margin: 0 auto; padding: 20px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
@media (min-width: 760px) {
  .cookie-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 2.5vw, 32px); gap: 24px; }
}
.cookie-banner__text { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--text-on-dark); max-width: 68ch; }
.cookie-banner__text a { color: var(--gold); text-decoration: underline; }
.cookie-banner__text a:hover { color: var(--cream); }
.cookie-banner__actions { display: flex; gap: 12px; flex: none; flex-wrap: wrap; }
.cookie-settings-link {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: inherit; text-decoration: none;
}
.cookie-settings-link:hover { color: var(--gold); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--text-on-dark); padding: 56px 20px 40px; }
@media (min-width: 640px) { .site-footer { padding: 56px 32px 40px; } }
.site-footer__inner { max-width: var(--container); margin: 0 auto; display: grid; gap: 36px; }
.site-footer__top { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
@media (min-width: 640px) { .site-footer__top { flex-direction: row; justify-content: space-between; align-items: center; } }
.site-footer__logo { height: 44px; width: auto; filter: invert(1) brightness(1.6); }
.site-footer__links { display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.site-footer__links a { color: var(--text-on-dark); }
.site-footer__links a:hover { color: var(--gold); }
.site-footer__bottom {
  border-top: 1px solid var(--border-dark); padding-top: 24px; display: flex; flex-direction: column;
  gap: 8px; font-size: 12px; color: var(--text-faint-2);
}
@media (min-width: 640px) { .site-footer__bottom { flex-direction: row; justify-content: space-between; } }