/* ==========================================================================
   HOFAG AG — Premium Design System
   ========================================================================== */

:root {
  --white: #ffffff;
  --blue-50: #f0f6fa;
  --blue-100: #e3eef6;
  --grey-50: #f5f7f9;
  --beige: #ede8df;
  --beige-soft: #f6f2ec;
  --navy: #203a53;
  --navy-700: #1a3048;
  --navy-900: #12212f;
  --ink: #1a2b3c;
  --muted: #56697a;
  --muted-light: #7b8b99;
  --gold: #b5a17a;
  --gold-soft: #d9cdb4;
  --line: rgba(32, 58, 83, 0.12);
  --line-soft: rgba(32, 58, 83, 0.07);
  --shadow-xs: 0 1px 2px rgba(18, 33, 47, 0.04);
  --shadow-sm: 0 4px 14px rgba(18, 33, 47, 0.05);
  --shadow-md: 0 10px 34px rgba(18, 33, 47, 0.07);
  --shadow-lg: 0 24px 60px rgba(18, 33, 47, 0.1);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --nav-h: 76px;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip statt hidden: beschneidet genauso horizontal, erzeugt aber KEINEN
     Scroll-Container. Mit overflow-x: hidden wird der Body zum eigenen
     Scroll-Container, und der sticky Header klebt dann am Body statt am
     Viewport — er scrollt sichtbar mit weg. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold); }

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.35rem, 5vw, 4.15rem); }
h2 { font-size: clamp(1.95rem, 3.4vw, 3rem); }
h3 { font-size: clamp(1.28rem, 1.9vw, 1.62rem); }
h4 { font-size: 1.12rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--navy); }

::selection { background: var(--beige); color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--navy);
  color: #fff;
  padding: 12px 22px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}
.container-narrow { max-width: 880px; }

.section { padding: clamp(64px, 8.5vw, 128px) 0; }
.section-sm { padding: clamp(48px, 6vw, 88px) 0; }
.section-tint { background: var(--grey-50); }
.section-blue { background: var(--blue-50); }
.section-beige { background: var(--beige-soft); }
.section-navy { background: var(--navy); color: rgba(255, 255, 255, 0.86); }
.section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; }
.section-navy strong { color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--gold);
  display: block;
}
.section-navy .eyebrow { color: var(--gold-soft); }
.section-navy .eyebrow::before { background: var(--gold-soft); }

.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 62px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  color: var(--muted);
  line-height: 1.8;
}
.section-navy .lead { color: rgba(255, 255, 255, 0.72); }

.grid { display: grid; gap: clamp(20px, 2.4vw, 30px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-side { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
/* Grid-Kinder dürfen schrumpfen, damit breite Tabellen im .table-wrap scrollen statt die Seite zu sprengen */
.grid-side > * { min-width: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.93rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background-color 0.3s var(--ease),
    color 0.3s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s var(--ease);
  text-align: center;
  line-height: 1.2;
  min-height: 50px;
}
.btn i, .btn svg { font-size: 0.82em; transition: transform 0.35s var(--ease); }
.btn:hover i.fa-arrow-right { transform: translateX(4px); }

.btn-primary {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 8px 24px rgba(32, 58, 83, 0.18);
}
.btn-primary:hover {
  background: var(--navy-700);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(32, 58, 83, 0.24);
}

.btn-gold {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 8px 24px rgba(181, 161, 122, 0.3);
}
.btn-gold:hover { background: #a48f68; color: #fff; transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: rgba(32, 58, 83, 0.28);
}
.btn-outline:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: translateY(-2px);
}

.btn-light {
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.btn-light:hover { background: #fff; color: var(--navy); transform: translateY(-2px); }

.btn-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

.btn-sm { padding: 11px 22px; font-size: 0.85rem; min-height: 44px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--navy);
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 3px;
  transition: gap 0.3s var(--ease), border-color 0.3s var(--ease);
}
.text-link:hover { gap: 13px; border-color: var(--gold); color: var(--navy); }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  flex-wrap: wrap;
}
.topbar-contact { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar a { color: rgba(255, 255, 255, 0.86); display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--gold-soft); }
.topbar i { color: var(--gold-soft); font-size: 0.78rem; }
.topbar-note { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.55); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 0.4s var(--ease), background-color 0.4s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 28px rgba(18, 33, 47, 0.07); background: rgba(255, 255, 255, 0.98); }
/* Der Header darf etwas breiter laufen als der Inhaltsbereich,
   damit Logo, alle Navigationspunkte und der CTA in eine Zeile passen. */
.site-header .container { max-width: 1440px; }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--nav-h);
}
.nav-inner > * { min-width: 0; }

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Firmenlogo: horizontales Lockup (Emblem + Wortmarke + Zusatz) */
.brand-logo {
  display: block;
  width: auto;
  height: clamp(34px, 3.1vw, 44px);
  /* die WebP-Datei ist 666 × 140 px */
  aspect-ratio: 666 / 140;
  object-fit: contain;
  transition: opacity 0.25s var(--ease);
}
.brand:hover .brand-logo { opacity: 0.82; }
/* im Footer etwas ruhiger und grösser */
.brand--footer .brand-logo {
  height: clamp(38px, 3.4vw, 48px);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.nav-links > li { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 11px;
  font-size: 0.845rem;
  font-weight: 450;
  letter-spacing: -0.005em;
  color: var(--ink);
  border-radius: 8px;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
  white-space: nowrap;
}
.nav-link:hover { color: var(--navy); background: var(--blue-50); }
.nav-link.is-active { color: var(--navy); font-weight: 600; }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 1.5px;
  background: var(--gold);
}
.nav-link .caret { font-size: 0.6rem; opacity: 0.55; transition: transform 0.3s var(--ease); }
.has-dropdown:hover .caret, .has-dropdown:focus-within .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 288px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.dropdown a {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.875rem;
  color: var(--ink);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.dropdown a:hover { background: var(--blue-50); color: var(--navy); }
.dropdown i { color: var(--gold); font-size: 0.9rem; margin-top: 4px; flex: 0 0 auto; }
.dropdown .dd-title { display: block; font-weight: 600; color: var(--navy); font-size: 0.885rem; }
.dropdown .dd-desc { display: block; font-size: 0.775rem; color: var(--muted-light); line-height: 1.5; }

.nav-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.nav-actions .btn { padding: 12px 18px; font-size: 0.82rem; min-height: 44px; white-space: nowrap; }
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--navy);
  font-weight: 500;
}
.nav-phone i { color: var(--gold); }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--blue-50);
  border: 1px solid var(--line-soft);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--navy);
  font-size: 1.05rem;
}

/* ---------- Hero slider ---------- */
.hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  height: clamp(560px, 84vh, 800px);
  margin: 0;
}
.hero-viewport { position: absolute; inset: 0; overflow: hidden; }
.hero-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 1.05s cubic-bezier(0.65, 0.02, 0.24, 1);
}
.hero-slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  flex: 0 0 100%;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform 7s linear;
}
.hero-slide.is-active img { transform: scale(1.09); }
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(12, 26, 40, 0.82) 0%, rgba(12, 26, 40, 0.58) 42%, rgba(12, 26, 40, 0.22) 72%, rgba(12, 26, 40, 0.1) 100%),
    linear-gradient(180deg, rgba(12, 26, 40, 0.32) 0%, rgba(12, 26, 40, 0) 30%, rgba(12, 26, 40, 0.42) 100%);
}
.hero-slide-inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  color: #fff;
}
.hero-copy { max-width: 720px; padding: 40px 0; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.715rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 500;
  margin-bottom: 22px;
}
.hero-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold-soft); }
.hero-title {
  color: #fff;
  font-size: clamp(2.3rem, 4.9vw, 4.15rem);
  line-height: 1.08;
  margin-bottom: 22px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.18);
}
.hero-title--p {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}
.hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.86);
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* copy animates in with each slide change */
.hero-copy > * { opacity: 0; transform: translateY(22px); }
.hero-slide.is-active .hero-copy > * {
  animation: heroIn 0.85s var(--ease) forwards;
}
.hero-slide.is-active .hero-copy > *:nth-child(1) { animation-delay: 0.1s; }
.hero-slide.is-active .hero-copy > *:nth-child(2) { animation-delay: 0.2s; }
.hero-slide.is-active .hero-copy > *:nth-child(3) { animation-delay: 0.3s; }
.hero-slide.is-active .hero-copy > *:nth-child(4) { animation-delay: 0.4s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* non-active slides must not capture clicks */
.hero-slide:not(.is-active) { pointer-events: none; }

.hero-controls {
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: clamp(18px, 3vw, 34px);
}
.hero-controls-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.hero-dots { display: flex; align-items: center; gap: 9px; list-style: none; margin: 0; padding: 0; }
.hero-dot {
  width: 30px;
  height: 2px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.34);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.4s var(--ease), width 0.4s var(--ease);
}
.hero-dot.is-active { background: var(--gold-soft); width: 52px; }
.hero-dot:hover { background: rgba(255, 255, 255, 0.7); }
.hero-buttons { display: flex; align-items: center; gap: 10px; }
.hero-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
  font-size: 0.9rem;
}
.hero-arrow:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
  transform: translateY(-2px);
}
.hero-counter {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Trust strip ---------- */
.trust-strip {
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.trust-item {
  padding: 30px clamp(14px, 2vw, 30px);
  border-right: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
}
.trust-item:last-child { border-right: 0; }
.trust-item span { font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.trust-item strong { display: block; color: var(--navy); font-size: 0.9rem; font-weight: 600; }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line); }

.service-card { background: #fff; }
.service-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--blue-50);
}
.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.service-card:hover .service-media img { transform: scale(1.055); }
.service-icon {
  position: absolute;
  left: 22px;
  bottom: -24px;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #fff;
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 1.12rem;
  box-shadow: var(--shadow-md);
  z-index: 2;
}
.service-body { padding: 44px 26px 28px; display: flex; flex-direction: column; flex: 1; }
/* Karten ohne Icon (Startseite): die 44 px oben sind nur Platz fuer das
   Icon, das unten aus dem Bild herausragt. Ohne Icon waere das eine
   sichtbare Luecke — deshalb hier der normale Abstand. */
.service-card--no-icon .service-body { padding-top: 26px; }
.service-body h3 { margin-bottom: 10px; }
.service-body p { color: var(--muted); font-size: 0.94rem; line-height: 1.7; margin-bottom: 22px; }
.service-body .text-link { margin-top: auto; align-self: flex-start; }

/* feature tiles (icon only) */
.feature {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 34px);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
  height: 100%;
}
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--line); }
.feature-icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: var(--blue-50);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  margin-bottom: 20px;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.feature:hover .feature-icon { background: var(--navy); color: #fff; }
.feature h3 { font-size: 1.2rem; margin-bottom: 9px; }
.feature p { color: var(--muted); font-size: 0.92rem; line-height: 1.7; }
.feature ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.9rem; }
.feature ul li { margin-bottom: 5px; }

/* ---------- Value cards ---------- */
.value-card {
  padding: clamp(28px, 3vw, 38px);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.value-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--gold-soft));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.value-card:hover::before { opacity: 1; }
.value-num {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.14em;
  margin-bottom: 14px;
  display: block;
}
.value-card h3 { font-size: 1.24rem; margin-bottom: 10px; }
.value-card p { color: var(--muted); font-size: 0.925rem; line-height: 1.72; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); }
/* Zahl und Beschriftung mittig ausrichten */
.stats > div { text-align: center; }
.stat-num {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.4vw, 3.7rem);
  line-height: 1;
  color: #fff;
  margin-bottom: 10px;
  display: block;
  /* Lining-Ziffern: sonst wirkt die 1 in Cormorant wie ein „I" (I6, I,4) */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.stat-num sup { font-size: 0.42em; top: -0.62em; color: var(--gold-soft); margin-left: 2px; }
.stat-label { font-size: 0.855rem; color: rgba(255, 255, 255, 0.66); letter-spacing: 0.02em; line-height: 1.5; }

/* ---------- Timeline ---------- */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-soft) 8%, var(--gold-soft) 92%, transparent);
  transform: translateX(-50%);
}
.tl-item { position: relative; width: 50%; padding: 0 46px 46px 0; }
.tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 46px 46px; }
.tl-item::after {
  content: "";
  position: absolute;
  top: 10px;
  right: -6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(181, 161, 122, 0.12);
  z-index: 2;
}
.tl-item:nth-child(even)::after { right: auto; left: -6px; }
.tl-year {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--navy);
  margin-bottom: 6px;
  display: block;
  line-height: 1;
}
.tl-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: var(--shadow-xs);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.tl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tl-card h4 { font-family: var(--serif); font-size: 1.16rem; font-weight: 500; color: var(--navy); margin: 0 0 7px; }
.tl-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.7; margin: 0; }

/* ---------- Team ---------- */
.team-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  display: flex;
  flex-direction: column;
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.team-photo {
  aspect-ratio: 4 / 4.2;
  background: linear-gradient(160deg, var(--blue-50) 0%, var(--beige-soft) 100%);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-body { padding: 24px 26px 26px; }
.team-role {
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 8px;
}
.team-body h3 { font-size: 1.36rem; margin-bottom: 12px; }
.team-meta { display: flex; flex-direction: column; gap: 7px; font-size: 0.83rem; color: var(--muted); }
.team-meta span { display: inline-flex; align-items: flex-start; gap: 8px; }
.team-meta i { color: var(--gold); font-size: 0.75rem; margin-top: 4px; flex: 0 0 auto; }
.team-body p { font-size: 0.9rem; color: var(--muted); line-height: 1.7; margin: 14px 0 0; }

/* ---------- Split / image blocks ---------- */
.media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.1; }
.badge-float {
  position: absolute;
  bottom: 26px;
  left: 26px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 14px;
  padding: 16px 22px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 14px;
}
.badge-float .bf-num { font-family: var(--serif); font-size: 1.85rem; color: var(--navy); line-height: 1; }
.badge-float .bf-text { font-size: 0.74rem; color: var(--muted); line-height: 1.45; max-width: 118px; }

.checklist { list-style: none; margin: 22px 0 0; padding: 0; }
.checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 0;
  font-size: 0.945rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}
.checklist li:last-child { border-bottom: 0; }
.checklist i { color: var(--gold); font-size: 0.85rem; margin-top: 6px; flex: 0 0 auto; }
.checklist strong { color: var(--navy); }

/* Einzelne Vorteils-/Chancen-Karte über die volle Breite, Liste zweispaltig */
.checklist-card { display: block; max-width: 1000px; margin: 0 auto; }
.checklist-card h3 { margin-bottom: 4px; }
.checklist-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3.4vw, 56px);
}
.checklist-2col li { border-bottom: 1px solid var(--line-soft); }
.checklist-2col li:nth-last-child(-n + 2) { border-bottom: 0; }
.checklist-2col li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line-soft); }
@media (max-width: 760px) {
  .checklist-2col { grid-template-columns: 1fr; }
  .checklist-2col li { border-bottom: 1px solid var(--line-soft); }
  .checklist-2col li:last-child { border-bottom: 0; }
}

/* ---------- Page hero (interior) ---------- */
.page-hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  padding: clamp(58px, 8vw, 108px) 0 clamp(52px, 7vw, 92px);
  overflow: hidden;
}
.page-hero-bg { position: absolute; inset: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(12, 26, 40, 0.9) 0%, rgba(12, 26, 40, 0.74) 48%, rgba(12, 26, 40, 0.52) 100%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: 18px; max-width: 860px; }
.page-hero .lead { color: rgba(255, 255, 255, 0.82); max-width: 660px; }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 0.755rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 24px;
  list-style: none;
  padding: 0;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.75); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb li::after { content: "/"; margin-left: 9px; opacity: 0.45; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb li:last-child { color: rgba(255, 255, 255, 0.5); }

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-xs);
  -webkit-overflow-scrolling: touch;
  /* Kein sichtbarer Zieh-Balken: Tabellen passen sich dem Inhalt an */
  scrollbar-width: none;
}
.table-wrap::-webkit-scrollbar { display: none; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.data thead th {
  background: var(--blue-50);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
table.data td { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: rgba(240, 246, 250, 0.55); }
table.data td strong { color: var(--navy); }
.rate { font-family: var(--serif); font-size: 1.16rem; color: var(--navy); }
.table-note { font-size: 0.775rem; color: var(--muted-light); margin-top: 14px; line-height: 1.65; }

/* Tabellen auf kleinen Displays verdichten, damit sie ohne Ziehen passen.
   Muss NACH den Basis-Tabellenregeln stehen, sonst gewinnt die spätere Regel. */
@media (max-width: 820px) {
  table.data { font-size: 0.8rem; }
  table.data thead th {
    padding: 11px 9px;
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    white-space: normal;
  }
  table.data td { padding: 12px 9px; }
  table.data td strong { font-size: 0.84rem; }
  .rate { font-size: 1rem; }
}
@media (max-width: 760px) {
  table.data { font-size: 0.76rem; }
  table.data thead th {
    padding: 10px 8px;
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    white-space: normal;
  }
  table.data td { padding: 11px 8px; }
  table.data td strong { font-size: 0.8rem; }
  .rate { font-size: 0.95rem; }
}
@media (max-width: 400px) {
  table.data { font-size: 0.7rem; }
  table.data thead th {
    padding: 9px 5px;
    font-size: 0.58rem;
    letter-spacing: 0;
  }
  table.data td { padding: 10px 5px; }
  table.data td strong { font-size: 0.74rem; }
  .rate { font-size: 0.88rem; }
}
@media (max-width: 340px) {
  table.data { font-size: 0.66rem; }
  table.data thead th { padding: 8px 4px; font-size: 0.55rem; }
  table.data td { padding: 9px 4px; }
  table.data td strong { font-size: 0.7rem; }
}

/* ---------- Zins im Titel (Startseite, Festgeld-Teaser) ---------- */
/* „bis zu" und „p. a." laufen im normalen Satzfluss mit, nur kleiner gesetzt */
.rate-inline-sm {
  font-size: 0.56em;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ---------- Sticker-Laufband (Startseite) ---------- */
.sticker-section { padding: clamp(54px, 7vw, 96px) 0; }

/* Kopf bündig zum .container-Raster (1240 px, gleiche Innenabstände) */
.sticker-head {
  max-width: 1240px;
  margin: 0 auto clamp(34px, 4.4vw, 58px);
  padding: 0 clamp(14px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  text-align: center;
}

/* Titel einzeilig auf jeder Breite.
   Gemessene Textbreite: rund das 24,6-fache der Schriftgröße
   (Cormorant Garamond 500) — bei sehr kleinen Graden bis 25,5-fach,
   weil Font-Hinting die Zeichen breiter setzt. Der Divisor 26,2 deckt
   diesen Worst-Case mit Reserve ab. Die Schriftgröße folgt der wirklich
   verfügbaren Breite: Viewport minus den beidseitigen Innenabstand des
   Kopfes, der selbst mitschwankt. Oben auf 2.7rem begrenzt, unten auf
   0.64rem, damit auch ein 320 px breites Display die Zeile ohne Umbruch
   zeigt. */
.sticker-head h2 {
  margin: 0;
  flex: 0 1 auto;
  font-size: clamp(0.64rem, calc((100vw - 2 * clamp(14px, 5vw, 48px)) / 26.2), 2.7rem);
  line-height: 1.24;
  max-width: none;
  text-wrap: balance;
}

/* Rotierendes Siegel — läuft dauerhaft, ohne Unterbrechung */
.seal {
  position: relative;
  flex: 0 0 auto;
  width: clamp(76px, 8.6vw, 102px);
  height: clamp(76px, 8.6vw, 102px);
  display: grid;
  place-items: center;
  color: var(--gold);
}
.seal-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin 26s linear infinite;
}
.seal-text {
  font-family: var(--sans);
  font-size: 8.4px;
  font-weight: 600;
  letter-spacing: 0.13em;
  fill: currentColor;
  text-transform: uppercase;
}
/* Das Signet aus dem Logo (H mit goldenem Schwung) statt eines
   nachgebauten Text-Buchstabens. Das Bild ist 264×160 (Verhaeltnis 1,65);
   das navyfarbene H spannt die volle Bildhoehe, der goldene Schwung geht
   links und rechts darueber hinaus. Deshalb wird nur die HOEHE gesetzt und
   die Breite laeuft aus dem Seitenverhaeltnis mit — so bleibt das H exakt
   so proportioniert wie im Logo.
   Hoehe ≈ 30 % des Siegeldurchmessers (Siegel: clamp(76px, 8.6vw, 102px)),
   damit das Signet sicher innerhalb des Textrings bleibt (Innenkreis
   entspricht 76 % des Aussendurchmessers). */
.seal-mark {
  position: relative;
  height: clamp(23px, 2.58vw, 31px);
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

/* Laufband: randlos, läuft von rechts nach links */
.sticker-marquee {
  position: relative;
  overflow: hidden;
  padding: clamp(6px, 1vw, 12px) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.sticker-track {
  --sticker-gap: clamp(10px, 1.15vw, 16px);
  display: flex;
  align-items: center;
  width: max-content;
  animation: stickerScroll 110s linear infinite;
  will-change: transform;
}

/* Abstand als margin (nicht gap), damit -50% exakt eine halbe Strecke entspricht.

   GLEICHE HÖHE FÜR ALLE. Jeder Sticker ist genau --sticker-h hoch, die Breite
   ergibt sich aus seinem Seitenverhältnis. Dadurch liegen alle Oberkanten auf
   einer Linie und alle Unterkanten auf einer Linie — unabhängig davon, ob der
   Sticker quadratisch (BILANZ), hochformatig (Capital, WELT) oder eine breite
   Wortmarke (citywire, SPEAR'S) ist.

   Deshalb bewusst KEINE feste Breite und kein object-fit: contain in einer
   quadratischen Box. Das würde die Sticker auf gleiche LÄNGE bringen und genau
   die unterschiedlichen Höhen erzeugen, die hier nicht gewollt sind.
   Die Höhe wird in einer definiten Länge gesetzt (nicht in Prozent), damit sie
   nicht gegen die vom Bild bestimmte Zeile auflöst. */
.sticker {
  --sticker-h: clamp(55px, 6.06vw, 87px);
  flex: 0 0 auto;
  width: auto;
  height: var(--sticker-h);
  margin: 0 var(--sticker-gap) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* Bildhöhe = Rahmenhöhe, Breite frei nach Seitenverhältnis. */
.sticker img {
  display: block;
  height: var(--sticker-h);
  width: auto;
  max-width: none;
  max-height: var(--sticker-h);
  object-fit: contain;
}

@keyframes stickerScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .seal-svg,
  .sticker-track { animation: none; }
  .sticker-marquee { overflow-x: auto; }
}

/* ---------- Accordion ---------- */
.acc { border-top: 1px solid var(--line-soft); }
.acc-item { border-bottom: 1px solid var(--line-soft); }
.acc-btn {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 22px 40px 22px 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  position: relative;
  transition: color 0.25s var(--ease);
}
.acc-btn:hover { color: var(--gold); }
.acc-btn::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: var(--gold);
  transition: transform 0.35s var(--ease);
}
.acc-item.is-open .acc-btn::after { transform: translateY(-50%) rotate(180deg); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); }
.acc-panel-inner { padding: 0 40px 24px 0; color: var(--muted); font-size: 0.94rem; line-height: 1.78; }
.acc-panel-inner ul { padding-left: 20px; }

/* ---------- Notice / callout ---------- */
.notice {
  border-left: 3px solid var(--gold);
  background: var(--beige-soft);
  padding: 22px 26px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.75;
}
.notice strong { color: var(--navy); }
.notice-blue { border-left-color: var(--navy); background: var(--blue-50); }
.notice p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--navy) 0%, #274863 55%, #2f5573 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 62px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.cta-band::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(181, 161, 122, 0.28), transparent 68%);
}
.cta-band h2 { color: #fff; margin-bottom: 14px; max-width: 620px; }
.cta-band p { color: rgba(255, 255, 255, 0.8); max-width: 580px; margin-bottom: 0; }
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.cta-inner .btn-row { flex: 0 0 auto; }

/* Award-Plakette rechts in der CTA-Box (Capital-Auszeichnung, 900x494, gerundet) */
.cta-award {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: clamp(190px, 24vw, 300px);
  filter: drop-shadow(0 18px 40px rgba(6, 18, 30, 0.45));
  transition: transform 0.5s var(--ease);
}
.cta-award:hover { transform: translateY(-4px); }
.cta-award img { display: block; width: 100%; height: auto; }

/* ---------- Forms ---------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 44px);
  box-shadow: var(--shadow-md);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.735rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
}
.field label .req { color: var(--gold); margin-left: 2px; }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.94rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(32, 58, 83, 0.18);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
  min-height: 48px;
}
.field textarea { resize: vertical; min-height: 118px; line-height: 1.65; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356697a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 42px;
  cursor: pointer;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(32, 58, 83, 0.32); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(32, 58, 83, 0.09);
}
.field input::placeholder, .field textarea::placeholder { color: #a9b5bf; }
.checkline { display: flex; gap: 11px; align-items: flex-start; font-size: 0.855rem; color: var(--muted); line-height: 1.6; }
.checkline input[type="checkbox"] {
  width: 19px;
  height: 19px;
  min-height: 19px;
  flex: 0 0 19px;
  margin-top: 2px;
  accent-color: var(--navy);
  cursor: pointer;
}
.checkline a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 2px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.form-note { font-size: 0.775rem; color: var(--muted-light); line-height: 1.65; margin-top: 4px; }
.form-status {
  display: none;
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.65;
}
.form-status.is-error { display: block; background: #fdf1f1; color: #97323a; border: 1px solid #f3d3d5; }
.form-status.is-success { display: block; background: #f0f8f3; color: #1f6142; border: 1px solid #cfe9d9; }
.form-success-panel {
  text-align: center;
  padding: clamp(34px, 5vw, 56px);
}
.form-success-panel .fs-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--navy);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin: 0 auto 22px;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Contact page ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.contact-item:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.contact-item .ci-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-50);
  color: var(--navy);
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  font-size: 0.95rem;
}
.contact-item .ci-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-light);
  display: block;
  margin-bottom: 3px;
}
.contact-item a, .contact-item span.ci-value { font-size: 0.955rem; color: var(--navy); font-weight: 500; }
.contact-item small { display: block; font-size: 0.78rem; color: var(--muted-light); margin-top: 3px; }

/* ---------- Property gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.prop-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  display: flex;
  flex-direction: column;
}
.prop-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.prop-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--blue-50); }
.prop-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.prop-card:hover .prop-media img { transform: scale(1.06); }
.prop-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.prop-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.prop-loc { font-size: 0.76rem; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.prop-body h3 { font-size: 1.15rem; margin-bottom: 10px; }
.prop-body p { font-size: 0.885rem; color: var(--muted); line-height: 1.68; margin-bottom: 16px; }
.prop-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  margin-top: auto;
  font-size: 0.79rem;
  color: var(--muted);
}
.prop-facts span { display: inline-flex; align-items: center; gap: 6px; }
.prop-facts i { color: var(--gold); font-size: 0.72rem; }
.prop-price { font-family: var(--serif); font-size: 1.05rem; color: var(--navy); }

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 140%);
  width: min(1000px, calc(100% - 32px));
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px clamp(20px, 3vw, 30px);
  z-index: 1200;
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
  opacity: 0;
}
.cookie-banner.is-visible { transform: translate(-50%, 0); opacity: 1; }
.cookie-inner { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: space-between; }
.cookie-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 620px;
  font-size: 0.855rem;
  color: var(--muted);
  line-height: 1.7;
}
.cookie-text strong { color: var(--navy); display: block; margin-bottom: 4px; font-size: 0.92rem; }
.cookie-text a { text-decoration: underline; text-decoration-color: var(--gold-soft); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Auszeichnungs-Popup beim Einstieg ---------- */
/*  Das Overlay liegt ueber allem (auch ueber dem Cookie-Hinweis, z-index 1200)
    und zentriert die Karte per Flexbox. `padding` haelt sie auf kleinen
    Displays von den Raendern weg; auf sehr niedrigen Viewports wird die Karte
    selbst scrollbar (overflow-y: auto), damit der Button immer erreichbar
    bleibt — auch im Querformat auf dem Handy. */
.award-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* `hidden` muss das Overlay wirklich ausblenden — sonst wuerde die
   display-Regel oben das HTML-Attribut ueberschreiben und das Popup waere
   auch ohne JavaScript sichtbar. */
.award-modal[hidden] { display: none; }

.award-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(18, 33, 47, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.award-modal.is-open .award-modal__backdrop { opacity: 1; }

.award-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  margin: auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 40px 90px rgba(18, 33, 47, 0.3);
  padding: clamp(22px, 3.2vw, 34px);
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.award-modal.is-open .award-modal__dialog { opacity: 1; transform: none; }

/*  Der Dialog bekommt beim Oeffnen programmatisch den Fokus
    (`tabindex="-1"`), damit Screenreader im Dialog landen. Er ist aber kein
    Bedienelement — ein Fokusring um die ganze Karte waere nur ein heller
    Rahmen. Deshalb hier kein Outline; die echten Bedienelemente (Button)
    behalten ihren Fokusring. */
.award-modal__dialog:focus,
.award-modal__dialog:focus-visible { outline: none; }

/*  Kein Schliessen-Kreuz mehr: das Popup wird ueber den Button „Zur Website“,
    den Klick auf den Hintergrund oder Escape geschlossen. Damit bleibt die
    Karte ruhig und die Auszeichnung wird nicht ueberdeckt. */

/*  Das Bild bekommt eine Hoehen-Obergrenze in vh, damit die Karte auch in
    einem flachen Fenster (z. B. 1440×620 oder Handy im Querformat) komplett
    sichtbar bleibt und der Button nicht herausragt. `width: auto` +
    `max-width` halten dabei das Seitenverhaeltnis — es wird nichts gestaucht,
    das Bild wird nur kleiner.
    `max-width: 90%` und die Hoehengrenze sind jeweils 90 % der vorherigen
    Werte (48vh/470px → 43.2vh/423px): zusammen ergibt das eine gleichmaessige
    Verkleinerung um 10 %, egal ob die Breite oder die Hoehe der begrenzende
    Faktor ist. */
.award-modal__media { margin: 0 0 22px; display: flex; justify-content: center; }
.award-modal__media img {
  width: auto;
  max-width: 90%;
  height: auto;
  max-height: min(43.2vh, 423px);
  border-radius: 8px;
}

.award-modal__body { text-align: center; }
.award-modal__caption {
  margin: 0 0 20px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}
.award-modal__body .btn { width: 100%; }

/* Solange das Popup offen ist, soll die Seite dahinter nicht mitscrollen. */
body.has-award-modal { overflow: hidden; }

@media (max-width: 420px) {
  .award-modal__dialog { padding: 18px 16px 20px; }
  .award-modal__media { margin-bottom: 16px; }
  .award-modal__caption { font-size: 0.84rem; margin-bottom: 16px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--grey-50); border-top: 1px solid var(--line-soft); }
.footer-main { padding: clamp(52px, 6vw, 78px) 0 42px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: clamp(28px, 4vw, 54px);
}
.footer-brand .brand { margin-bottom: 18px; }
.footer-about { font-size: 0.875rem; color: var(--muted); line-height: 1.78; max-width: 330px; }
.footer-h {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  margin: 0 0 18px;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a { font-size: 0.875rem; color: var(--muted); transition: color 0.25s var(--ease), padding-left 0.25s var(--ease); display: inline-block; }
.footer-links a:hover { color: var(--navy); padding-left: 4px; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.875rem; color: var(--muted); }
.footer-contact i { color: var(--gold); margin-top: 5px; font-size: 0.8rem; flex: 0 0 auto; }
.footer-contact a { color: var(--muted); }
.footer-contact a:hover { color: var(--navy); }
.footer-contact small { display: block; color: var(--muted-light); font-size: 0.74rem; }
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding: 22px 0;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.79rem;
  color: var(--muted-light);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }
.footer-legal a { color: var(--muted-light); }
.footer-legal a:hover { color: var(--navy); }

/* Aufsichts- und Branchenorganisationen (mittig in der Footer-Unterzeile) */
.footer-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-trust li { display: flex; align-items: center; }
/* Die Logos sind verlinkt: der Link umschliesst das Bild vollstaendig,
   damit die ganze Flaeche klickbar ist und ein sichtbarer Fokusring
   erscheint (Tastaturbedienung). */
.footer-trust a {
  display: flex;
  align-items: center;
  border-radius: 6px;
  outline-offset: 4px;
}
.footer-trust img {
  height: 28px;
  width: auto;
  display: block;
  transition: opacity 0.3s var(--ease);
}
.footer-trust a:hover img { opacity: 0.75; }
.footer-trust a:focus-visible { outline: 2px solid var(--gold); }

/* Mobil: ausgewogenes 2x2-Raster statt 3+1-Umbruch */
@media (max-width: 860px) {
  .footer-trust {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 14px 28px;
  }
}
@media (max-width: 400px) {
  .footer-trust img { height: 24px; }
  .footer-trust { gap: 12px 20px; }
}

/* ---------- Reveal on scroll ---------- */
/* Ohne JavaScript bleibt alles sichtbar — Animation nur mit .js-reveal auf <html> */
.reveal { transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.js-reveal .reveal { opacity: 0; transform: translateY(26px); }
.js-reveal .reveal.is-visible,
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.09s; }
.reveal-delay-2 { transition-delay: 0.18s; }
.reveal-delay-3 { transition-delay: 0.27s; }
.reveal-delay-4 { transition-delay: 0.36s; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
  z-index: 800;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--navy); color: #fff; }

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 800px; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.16rem; margin-top: 1.9em; font-family: var(--sans); font-weight: 600; }
.prose p, .prose li { color: var(--muted); font-size: 0.945rem; line-height: 1.82; }
.prose ul, .prose ol { padding-left: 22px; margin-bottom: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose a { text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 3px; }
.prose table { margin: 1.4em 0; }
.legal-block {
  background: var(--grey-50);
  border-radius: var(--radius);
  padding: 26px 30px;
  font-size: 0.925rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 22px;
}
.legal-block strong { color: var(--navy); }
.toc {
  background: var(--blue-50);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 40px;
}
.toc h4 { margin-bottom: 12px; color: var(--navy); }
.toc ol { margin: 0; padding-left: 20px; font-size: 0.885rem; color: var(--muted); }
.toc li { margin-bottom: 6px; }
.toc a { color: var(--navy); }

/* ---------- Admin ---------- */
.admin-shell { min-height: 100vh; background: var(--grey-50); padding: 34px 0 70px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.admin-head h1 { font-size: 1.9rem; margin: 0; }
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.admin-tab {
  padding: 11px 18px;
  border-radius: 10px 10px 0 0;
  font-size: 0.875rem;
  color: var(--muted);
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.admin-tab:hover { background: #fff; color: var(--navy); }
.admin-tab.is-active { color: var(--navy); border-bottom-color: var(--gold); background: #fff; font-weight: 600; }
.admin-panel { display: none; }
.admin-panel.is-active { display: block; animation: fadeIn 0.35s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.admin-card { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-xs); margin-bottom: 22px; }
.admin-card h2 { font-size: 1.25rem; margin-bottom: 16px; }
.admin-card h3 { font-size: 1.02rem; font-family: var(--sans); font-weight: 600; margin-bottom: 14px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.admin-list { display: grid; gap: 14px; }
.admin-row { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: #fff; }
.admin-row img { width: 96px; height: 62px; object-fit: cover; border-radius: 8px; flex: 0 0 96px; background: var(--blue-50); }
.admin-row .ar-body { flex: 1; min-width: 0; }
.admin-row .ar-body strong { display: block; font-size: 0.92rem; color: var(--navy); }
.admin-row .ar-body span { font-size: 0.79rem; color: var(--muted-light); display: block; overflow: hidden; text-overflow: ellipsis; }
.admin-row .ar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-xs { padding: 7px 14px; font-size: 0.775rem; min-height: 34px; border-radius: 8px; }
.btn-danger { background: #fff; color: #a03a44; border-color: #edcdd1; }
.btn-danger:hover { background: #a03a44; color: #fff; border-color: #a03a44; }
.admin-note { font-size: 0.8rem; color: var(--muted-light); margin-top: 10px; }
.login-card { max-width: 430px; margin: 6vh auto; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 40px; }
.login-card h1 { font-size: 1.65rem; margin-bottom: 8px; text-align: center; }
.login-card .sub { text-align: center; color: var(--muted); font-size: 0.885rem; margin-bottom: 26px; }
.lead-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; padding: 18px 20px; }
.lead-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.lead-top strong { color: var(--navy); font-size: 0.96rem; }
.lead-badge { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--blue-50); color: var(--navy); padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.lead-badge.is-new { background: #fdf6e7; color: #8a6f2c; }
.lead-meta { font-size: 0.78rem; color: var(--muted-light); display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.lead-msg { font-size: 0.875rem; color: var(--muted); line-height: 1.7; background: var(--grey-50); border-radius: 8px; padding: 12px 14px; white-space: pre-wrap; }

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 32px; }
.mt-4 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.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;
}
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

/* ---------- Responsive ---------- */
/* Kompakte Stufe für Laptops (1366 px & Co.): die vollständige Navigation
   bleibt sichtbar, rückt aber enger zusammen, damit sie nicht unter den
   CTA-Button läuft. */
@media (max-width: 1400px) and (min-width: 1280px) {
  .site-header .container { padding: 0 22px; }
  .nav-link { padding: 10px 8px; font-size: 0.79rem; }
  .nav-actions .btn { padding: 12px 14px; font-size: 0.77rem; }
  .brand-name { font-size: 1.18rem; }
}

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.3fr; }
  .footer-grid > div:nth-child(2) { display: none; }
  .nav-links { gap: 0; }
  .nav-link { padding: 10px 9px; font-size: 0.83rem; }
  .nav-phone { display: none; }
}

@media (max-width: 960px) {
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-side { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: 0; }
  .trust-item { border-bottom: 1px solid var(--line-soft); }
  .trust-item:nth-last-child(-n+2) { border-bottom: 0; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:nth-child(2) { display: block; }
}

/* Die vollständige Navigation braucht rund 1330 px. Darunter würde sie
   unter den CTA-Button laufen, deshalb übernimmt dort die Menü-Schublade. */
@media (max-width: 1279px) {
  /* backdrop-filter macht den Header zum Bezugsrahmen für position:fixed —
     die Schublade würde dadurch nur so hoch wie der Header. Auf Mobilgeräten
     daher solide Fläche statt Glas-Effekt. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
  }
  .nav-toggle { display: inline-flex; }
  /* Burger bleibt über der Schublade klickbar (Schließen) */
  .nav-actions { position: relative; z-index: 1001; }
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 86vw);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 88px 22px 30px;
    box-shadow: -20px 0 60px rgba(18, 33, 47, 0.14);
    transform: translateX(102%);
    transition: transform 0.45s var(--ease);
    overflow-y: auto;
    z-index: 1000;
    visibility: hidden;
  }
  .nav-links.is-open { transform: none; visibility: visible; }
  .nav-link {
    padding: 14px 12px;
    font-size: 0.97rem;
    border-bottom: 1px solid var(--line-soft);
    justify-content: space-between;
    border-radius: 0;
  }
  .nav-link.is-active::after { display: none; }
  .nav-link.is-active { color: var(--gold); }
  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 8px 12px;
    min-width: 0;
    display: none;
    background: var(--grey-50);
  }
  .has-dropdown.is-open .dropdown { display: block; }
  .has-dropdown:hover .dropdown { display: none; }
  .has-dropdown.is-open:hover .dropdown { display: block; }
  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18, 33, 47, 0.4);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0.4s;
    /* muss unter dem Header (900) liegen, sonst blockiert das Overlay
       die Klicks auf die geöffnete Menü-Schublade */
    z-index: 880;
  }
  .nav-overlay.is-open { opacity: 1; visibility: visible; }
  .nav-actions .btn { display: none; }
  .mobile-nav-actions { display: flex !important; flex-direction: column; gap: 10px; margin-top: 22px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { height: auto; min-height: 540px; padding: 0; }
  .hero-viewport { position: absolute; }
  .hero-content { padding: 70px 0 110px; min-height: 540px; }
  .hero-copy { max-width: 100%; }
  .hero-actions .btn { width: 100%; }
  .hero-controls-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero-dots { order: 2; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .stat-num { font-size: 2.3rem; }
  .tl-item, .tl-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding: 0 0 32px 34px;
  }
  .timeline::before { left: 6px; transform: none; }
  .tl-item::after, .tl-item:nth-child(even)::after { left: 0; right: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:nth-child(2) { display: block; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .cta-inner .btn-row { width: 100%; }
  .cta-inner .btn-row .btn { width: 100%; }
  /* Award-Badge mobil: unter dem Text, zentriert, volle Breite nutzbar */
  .cta-band { flex-direction: column; align-items: stretch; }
  .cta-award { align-self: center; width: min(100%, 260px); }
  .cookie-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .cookie-actions { flex-direction: column; }
  .cookie-actions .btn { width: 100%; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item { border-right: 0; }
  .badge-float { left: 14px; bottom: 14px; padding: 12px 16px; }
  .to-top { right: 14px; bottom: 14px; }
  .btn { padding: 14px 24px; }

  /* Kontaktleiste mobil: eine kompakte Zeile statt vier Zeilen */
  .topbar-inner { min-height: 0; padding: 7px 0; justify-content: center; flex-wrap: nowrap; }
  .topbar-contact { gap: 16px; font-size: 0.72rem; flex-wrap: nowrap; }
  /* deutsche Nummer und Adresse stehen im Footer */
  .topbar-contact a:nth-child(2),
  .topbar-note { display: none; }
  .topbar i { font-size: 0.7rem; }
  .site-header .container { padding: 0 16px; }
}

@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;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-slide img { transform: none !important; }
}

@media print {
  .site-header, .topbar, .site-footer, .cookie-banner, .to-top, .hero-controls { display: none; }
  body { color: #000; }
}