/* ==========================================================================
   VITA UMZÜGE – Reset, Grundtypografie, Layout-Hilfsklassen
   ========================================================================== */

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

/* [hidden] muss auch Komponenten mit eigenem display-Wert ausblenden */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; letter-spacing: .01em; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

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

/* Ladeplatzhalter: die dunkle Fläche liegt hinter den FOTORAHMEN, nicht
   hinter jedem Bild. So bleiben transparente PNG – vor allem das Logo –
   wirklich transparent und übernehmen den Hintergrund ihrer Sektion.
   (Ein pauschales "img { background-color: … }" würde ein Rechteck
   hinter das Logo malen.) */
.gallery__item,
.hero__slide,
.page-hero__bg,
.cta__bg,
.area__bg { background-color: var(--charcoal); }
/* .media trägt seine Fläche bereits selbst (siehe 02-components.css). */

/* Sicherheitsnetz: Marken-Grafiken tragen nie eine eigene Fläche. */
.brand img,
.footer__brand img,
img[src*="/logo/"] { background: none !important; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

strong, b { font-weight: 600; }

::selection { background: var(--gold); color: var(--black); }

/* --- Fokus: immer sichtbar, in Markengold ------------------------------ */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.theme-light :focus-visible { outline-color: var(--gold-ink); }

/* --- Skip-Link --------------------------------------------------------- */
.skip-link {
  position: fixed; top: .6rem; left: .6rem; z-index: 500;
  padding: .7rem 1.1rem;
  background: var(--gold); color: var(--black);
  font-size: var(--fs-small); font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.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;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.section {
  position: relative;
  padding-block: var(--sec-y);
  background: var(--bg);
  color: var(--ink);
  overflow: clip;
}
.section--tight { padding-block: var(--sec-y-sm); }
.section--flush-top { padding-top: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--wrap-wide); }
.wrap--text { max-width: calc(var(--wrap-text) + var(--gutter) * 2); }

.grid { display: grid; gap: var(--gap); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.stack > * + * { margin-top: var(--flow, 1rem); }

/* ==========================================================================
   Typografie-Bausteine
   ========================================================================== */

.gold  { color: var(--accent-text); }
.muted { color: var(--ink-muted); }
.lead  { font-size: var(--fs-lead); color: var(--ink-muted); line-height: 1.66; }

/* Kicker: kleines Label mit goldener Linie */
.kicker {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 1.1rem;
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--accent-text);
}
.kicker__rule {
  display: block; width: clamp(28px, 5vw, 52px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  flex: none;
}
.sec-head--center .kicker { justify-content: center; }
.sec-head--center .kicker::after {
  content: ''; width: clamp(28px, 5vw, 52px); height: 1px;
  background: linear-gradient(270deg, transparent, var(--accent));
}

.sec-head { max-width: 62ch; margin-bottom: clamp(2.25rem, 1.2rem + 3vw, 4.25rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head__title { font-size: var(--fs-h2); }
.sec-head__sub { margin-top: 1rem; font-size: var(--fs-lead); color: var(--ink-muted); line-height: 1.64; }
.sec-head--left { margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem); }

/* Serifen-Signatur ("Entrümpelung mit Herz und Verstand!") */
.signature {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .9rem + .8vw, 1.6rem);
  font-weight: 600;
  font-style: italic;
  color: var(--accent-text);
  line-height: 1.4;
}

/* ==========================================================================
   Goldene Dekorelemente (dezent eingesetzt)
   ========================================================================== */

/* Feine diagonale Goldlinie, inspiriert vom Pinselstrich des Flyers */
.deco-stroke {
  position: absolute; inset: auto 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  pointer-events: none;
}
.deco-stroke--top { top: 0; }
.deco-stroke--bottom { bottom: 0; }

/* Weicher goldener Lichtschein als Hintergrundakzent */
.deco-glow {
  position: absolute; z-index: 0;
  width: clamp(320px, 55vw, 900px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(220, 187, 112, .13), transparent 68%);
  pointer-events: none;
  filter: blur(6px);
}
.deco-glow--tl { top: -22%; left: -14%; }
.deco-glow--br { right: -16%; bottom: -24%; }
.theme-light .deco-glow { background: radial-gradient(circle, rgba(184, 146, 63, .16), transparent 68%); }

/* Angeschnittene goldene Diagonale */
.deco-slash {
  position: absolute; z-index: 0; pointer-events: none;
  width: 150%; height: clamp(2px, .3vw, 4px);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .3;
  transform: rotate(-18deg);
}

.section > .wrap { position: relative; z-index: 1; }