/* ---------- Design Tokens ---------- */
:root {
  --bg: #FFFFFF;
  --bg-subtle: #F5F5F5;
  --ink: #0D1B29;
  --ink-soft: #2A3A4A;
  --ink-muted: #6B7785;
  --ink-inverse: #FFFFFF;
  --accent: #B0B4BC;
  --accent-soft: #D6D9DF;
  --hairline: rgba(13, 27, 41, 0.14);
  --hairline-strong: rgba(13, 27, 41, 0.28);
  --hairline-light: rgba(242, 237, 226, 0.22);
  --signal: #F0EFEB;
--signal-hover: #A32D21;

--ff-serif: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
--ff-sans: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;

  --nav-h: 80px;
  --ease: cubic-bezier(0.6, 0.05, 0.25, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }

::selection { background: var(--ink); color: var(--bg); }

/* ---------- Type Scale ---------- */
.eyebrow {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.eyebrow--accent { color: var(--accent); }
.eyebrow--light { color: var(--ink-inverse); opacity: 0.8; }

h1, h2, h3, h4 {
  font-family: var(--ff-serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.h-display {
  font-size: clamp(3.2rem, 8vw, 5rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;
}

.h-section {
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.h-card {
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  line-height: 1.05;
}

.lede {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
}

.italic { font-style: italic; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

.container--narrow {
  max-width: 1120px;
}

section { position: relative; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
  background: #000;

}

.nav.is-scrolled {
  background: #000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--hairline);
}

.nav__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}

.nav__logo {
  font-family: var(--ff-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-inverse);
  transition: color 0.4s var(--ease);
  white-space: nowrap;
}

.nav__logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav__logo img {
  display: block;
  height: 60px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
}
.nav__logo small {
  font-family: var(--ff-sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.7;
  display: block;
  margin-top: 2px;
}

.nav.is-scrolled .nav__logo { color: var(--ink-inverse); }

.nav__menu {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 2.5vw, 2.75rem);
  list-style: none;
}

.nav__menu a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-inverse);
  opacity: 0.85;
  padding: 0.25rem 0;
  position: relative;
  transition: opacity 0.3s, color 0.4s var(--ease);
}

.nav__menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right 0.4s var(--ease);
}

.nav__menu a:hover { opacity: 1; }
.nav__menu a:hover::after { right: 0; }

.nav.is-scrolled .nav__menu a { color: var(--ink-inverse); }

/* Aktiver Menüpunkt */
.nav__menu a[aria-current="page"] { opacity: 1; }
.nav__menu a[aria-current="page"]::after { right: 0; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* ---------- Language Switcher ---------- */
.nav__lang {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.nav__lang-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.3s var(--ease);
  padding: 0.25rem 0;
}

.nav__lang-item:hover,
.nav__lang-item:focus-visible {
  opacity: 1;
}

.nav__lang-item.is-active {
  opacity: 1;
}

/* Round flag circle */
.nav__lang-flag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(13, 27, 41, 0.12);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.nav__lang-item:hover .nav__lang-flag {
  transform: scale(1.08);
  box-shadow: 0 0 0 1px rgba(13, 27, 41, 0.25);
}

.nav__lang-item.is-active .nav__lang-flag {
  box-shadow: 0 0 0 1.5px var(--accent);
}

/* Language code label */
.nav__lang-code {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}

/* When nav is on brass bg: inverse colors */
.nav .nav__lang-code { color: var(--ink); }

/* On very small screens: hide text, keep only flags */
@media (max-width: 1024px) {
  .nav__lang { display: none; }
}

.nav.is-scrolled .nav__lang { color: var(--ink); }

.nav__cta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--signal);
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--ink);
  transition: all 0.35s var(--ease);
  white-space: nowrap;
}

.nav__cta:hover {
  background: var(--ink);
  color: var(--bg);
}

.nav.is-scrolled .nav__cta {
  background: var(--signal);
  color: var(--ink);
}
.nav.is-scrolled .nav__cta:hover {
  background: transparent;
  color: var(--ink);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--ink-inverse);
  overflow: hidden;
  background: var(--navy-deep);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  animation: heroZoom 14s var(--ease-out) forwards;
  z-index: 0;
}

.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 16:9 cover hack — iframe always fills hero regardless of viewport aspect */
  width: 100vw;
  height: 56.25vw;          /* 16:9 → 9/16 = 0.5625 */
  min-width: 177.78vh;      /* 16:9 ratio of 100vh → 16/9 */
  min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;     /* never steal clicks or scroll */
  opacity: 0;
  transition: opacity 1.2s ease-in;
  z-index: 1;
}

.hero__video.is-ready { opacity: 1; }

/* On mobile: skip iframe, use image only (autoplay reliability + data) */
@keyframes heroZoom {
  from { transform: scale(1.12); }
  to { transform: scale(1); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,21,32,0.55) 0%, rgba(10,21,32,0.15) 30%, rgba(10,21,32,0.15) 55%, rgba(10,21,32,0.85) 100%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(3rem, 12vh, 6rem);
}

.hero__eyebrow {
  color: rgba(242, 237, 226, 0.85);
  margin-bottom: 1.75rem;
  opacity: 0;
  animation: riseIn 1s var(--ease-out) 0.4s forwards;
}

.hero__title {
  color: var(--ink-inverse);
  font-weight: 300;
  margin-bottom: 1.5rem;
  max-width: 18ch;
}

.hero__title .line {
  display: block;
  overflow: hidden;
}

.hero__title .line span {
  display: inline-block;
  transform: translateY(100%);
  animation: riseUp 1.1s var(--ease-out) forwards;
}

.hero__title .line:nth-child(1) span { animation-delay: 0.55s; }
.hero__title .line:nth-child(2) span { animation-delay: 0.75s; font-style: italic; color: var(--accent-soft); }

.hero__sub {
  font-family: var(--ff-sans);
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(242, 237, 226, 0.82);
  max-width: 46ch;
  margin: 1.5rem 0;
  opacity: 0;
  animation: riseIn 1s var(--ease-out) 1.1s forwards;
}

.hero__meta {
  position: absolute;
  bottom: clamp(3rem, 8vh, 6rem);
  right: clamp(1.5rem, 4vw, 4rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  color: rgba(242, 237, 226, 0.75);
  opacity: 0;
  animation: riseIn 1s var(--ease-out) 1.3s forwards;
}

.hero__meta-label { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; }
.hero__meta-value { font-family: var(--ff-serif); font-size: 1.1rem; font-style: italic; }

.scroll-ind {
  position: absolute;
  left: 41%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  animation: riseIn 1s var(--ease-out) 1.5s forwards;
}
.scroll-ind::after {
  content: '';
  width: 1px;
  height: 32px;
  background: currentColor;
  animation: scrollLine 2.2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scrollLine {
  0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes riseIn { to { opacity: 1; transform: translateY(0); } }
@keyframes riseUp { to { transform: translateY(0); } }

/* ---------- Brand Strip ---------- */
.strip {
  padding: clamp(3.5rem, 6vh, 5rem) 0;
  border-bottom: 1px solid var(--hairline);
}

.strip__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.strip__label {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.8;
}

.strip__brands {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4.5vw, 4.5rem);
}

.strip__brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  opacity: 0.82;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.strip__brand-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.strip__brand-link img {
  width: auto;
  max-width: 200px;
  object-fit: contain;
  /* Monochrome render so three wildly different logos visually harmonize */
  filter: brightness(0);
  transition: filter 0.35s var(--ease);
}

/* Optical size balancing per brand — logos have different glyph heights */
.strip__brand-link--cranchi img { max-height: 42px; }
.strip__brand-link--ab img      { max-height: 42px; }
.strip__brand-link--maiora img  { max-height: 42px; }

.strip__sep {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.strip__right {
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

.strip__right em {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  display: block;
  margin-top: 0.25rem;
}

@media (max-width: 768px) {
.strip__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.75rem;
  }

  .strip__label, .strip__right { text-align: center; }

  /* Mobile: stacked with hairline dividers (editorial) */
  .strip__brands {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0.5rem 0;
  }

  /* Transform dots into full-width hairline dividers with centered accent */
  .strip__sep {
    width: 100%;
    height: 1px;
    background: var(--hairline);
    border-radius: 0;
    position: relative;
    margin: 1.5rem 0;
  }

  /* Add a centered accent dot on each divider */
  .strip__sep::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
  }

  /* Generous logo sizing — mobile has the space now */
  .strip__brand-link { height: 40px; padding: 0.5rem 0; }
  .strip__brand-link--cranchi img { max-height: 42px; }
  .strip__brand-link--ab img      { max-height: 42px; }
  .strip__brand-link--maiora img  { max-height: 42px; }
}

/* ---------- Section Intro ---------- */
.intro {
  padding: clamp(6rem, 14vh, 11rem) 0;
}

.intro__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: flex-start;
}

.intro__num {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 300;
  color: var(--accent);
  font-style: italic;
  position: relative;
  padding-top: 0.5rem;
}

.intro__num::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 1px;
  background: var(--accent);
}

.intro__body .eyebrow { margin-bottom: 1.5rem; }

.intro__title {
  margin-bottom: 2rem;
  max-width: 20ch;
}

.intro__text p + p { margin-top: 1rem; }

/* ---------- Werften Section (3 Houses) ---------- */
.houses { padding: 0 0 clamp(4rem, 8vh, 7rem); }

.houses__header {
  padding: clamp(2rem, 5vh, 4rem) 0 clamp(3rem, 6vh, 5rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  border-top: 1px solid var(--hairline);
}

.houses__header h2 { max-width: 14ch; }
.houses__header .eyebrow { margin-bottom: 1.25rem; }

.houses__count {
  font-family: var(--ff-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.house {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 6vh, 5rem) 0;
  border-top: 1px solid var(--hairline);
}

.house:nth-child(even) {
  grid-template-columns: 4fr 5fr;
}

.house:nth-child(even) .house__media {
  order: 2;
}

.house__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-subtle);
}

.house__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

.house:hover .house__media img { transform: scale(1.04); }

.house__media::after {
  content: attr(data-founded);
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-family: var(--ff-serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-inverse);
  background: rgba(10, 21, 32, 0.6);
  backdrop-filter: blur(8px);
  padding: 0.45rem 0.9rem;
  letter-spacing: 0.02em;
}

.house__body {
  padding: 1rem 0;
}

.house__num {
  font-family: var(--ff-serif);
  font-size: 14px;
  color: var(--accent);
  font-style: italic;
  margin-bottom: 1.5rem;
  letter-spacing: 0.1em;
}

.house__name {
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 300;
  margin-bottom: 0.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.house__origin {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  color: var(--ink-muted);
  margin-bottom: 2rem;
}

.house__text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 2.5rem;
  max-width: 46ch;
}

.house__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.house__spec {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.house__spec-label {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.house__spec-val {
  font-family: var(--ff-serif);
  font-size: 1.25rem;
  color: var(--ink);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--ink);
  transition: gap 0.35s var(--ease), color 0.3s, border-color 0.3s;
}

.link svg {
  transition: transform 0.35s var(--ease);
}

.link:hover {
  gap: 1.25rem;
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.link:hover svg { transform: translateX(4px); }

/* ---------- Fleet (Featured Yachts) ---------- */
.fleet {
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: var(--bg-subtle);
  border-top: 1px solid var(--hairline);
}

.fleet__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: flex-end;
  margin-bottom: clamp(3rem, 6vh, 5rem);
}

.fleet__header h2 { max-width: 12ch; }

.fleet__intro {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 42ch;
  line-height: 1.55;
}

.fleet__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
}

.yacht {
  background: var(--bg);
  border: 1px solid var(--hairline);
  transition: border-color 0.3s, transform 0.5s var(--ease-out);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.yacht:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-4px);
}

.yacht__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-subtle);
}

.yacht__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.yacht:hover .yacht__media img { transform: scale(1.05); }

.yacht__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-inverse);
  background: var(--ink);
  padding: 0.35rem 0.7rem;
}

.yacht__badge--new { background: var(--accent); }

.yacht__body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.yacht__brand {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}

.yacht__name {
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.yacht__type {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: 1.5rem;
}

.yacht__specs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  margin-top: auto;
}

.yacht__spec {
  text-align: left;
}

.yacht__spec-val {
  font-family: var(--ff-serif);
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.yacht__spec-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fleet__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 5vh, 4rem);
}

/* ---------- Persönlich (Contact Feature) ---------- */
.personal {
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: var(--ink);
  color: var(--ink-inverse);
}

.personal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.personal__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--ink-soft);
}

.personal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
}

.personal__media-caption {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline-light);
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, 0.7);
}

.personal__body { padding: 1rem 0; }

.personal__body .eyebrow { color: var(--accent-soft); margin-bottom: 2rem; }

.personal__quote {
  font-family: var(--ff-serif);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 2.5rem;
  color: var(--ink-inverse);
}

.personal__quote em {
  font-style: italic;
  color: var(--accent-soft);
}

.personal__signature {
  margin-bottom: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline-light);
}

.personal__name {
  font-family: var(--ff-serif);
  font-size: 1.35rem;
  margin-bottom: 0.25rem;
}

.personal__role {
  font-size: 0.9rem;
  color: rgba(242, 237, 226, 0.65);
  letter-spacing: 0.02em;
}

.personal__contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-light);
}

.personal__contact-item small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, 0.55);
  margin-bottom: 0.5rem;
}

.personal__contact-item a {
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  color: var(--ink-inverse);
  transition: color 0.3s;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.personal__contact-item a:hover {
  color: var(--accent-soft);
  border-bottom-color: var(--accent-soft);
}

/* ---------- Zahlen (Authority Stats) ---------- */
.stats {
  padding: clamp(5rem, 10vh, 8rem) 0;
  border-top: 1px solid var(--hairline);
}

.stats__header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vh, 5rem);
}

.stats__header .eyebrow { margin-bottom: 1.25rem; }
.stats__header h2 { max-width: 20ch; margin: 0 auto; }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.stat {
  padding: clamp(2rem, 4vh, 3rem) clamp(1.25rem, 2.5vw, 2.25rem);
  border-right: 1px solid var(--hairline);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.1rem;
  min-height: 220px;
}

.stat:last-child { border-right: none; }

.stat__rule {
width: 28px;
  height: 2px;
  background: var(--accent);
  opacity: 0.55;
}


.stat__num {
  font-family: var(--ff-serif);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.stat__num sup {
  font-size: 0.4em;
  font-style: italic;
  color: var(--accent);
  vertical-align: top;
  top: 0.3em;
  position: relative;
  margin-left: 0.1em;
}

.stat__label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.7;
max-width: 38ch;
margin: 0 auto;
text-wrap: balance;
}

/* ============================================
       TEAM SECTION — Engel & Völkers inspired
    ============================================ */
    .team {
      background: var(--bg);
      padding: clamp(5rem, 10vh, 8rem) 0 clamp(4rem, 8vh, 7rem);
      border-top: 1px solid var(--hairline);
    }

    .team__container {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(1.5rem, 4vw, 4rem);
    }

    /* ---- Header ---- */
    .team__header {
      text-align: center;
      max-width: 640px;
      margin: 0 auto clamp(3.5rem, 7vh, 6rem);
    }

    .team__eyebrow {
      font-family: var(--ff-sans);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--ink-muted);
      display: block;
      margin-bottom: 1.25rem;
    }

    .team__headline {
      font-family: var(--ff-serif);
      font-weight: 400;
      font-size: clamp(2.2rem, 4vw, 3.6rem);
      line-height: 1.05;
      letter-spacing: -0.015em;
      color: var(--ink);
      margin-bottom: 1.25rem;
    }

    .team__headline em {
      font-style: italic;
      color: var(--accent);
    }

    .team__intro {
      font-family: var(--ff-sans);
      font-size: clamp(0.95rem, 1.1vw, 1.05rem);
      font-weight: 300;
      color: var(--ink-muted);
      line-height: 1.7;
    }

    /* ---- Divider ---- */
    .team__divider {
      width: 40px;
      height: 1px;
      background: var(--accent);
      margin: 1.5rem auto 0;
    }

    /* ---- Grid ---- */
    .team__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
    }

    /* ---- Member card ---- */
    .team__member {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0;
    }

    /* Circular portrait */
    .team__portrait-wrap {
      position: relative;
      width: clamp(140px, 18vw, 200px);
      aspect-ratio: 1;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 1.75rem;
      background: var(--bg-subtle);
      transition: box-shadow 0.4s var(--ease);
    }

    .team__portrait-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid transparent;
      transition: border-color 0.4s var(--ease);
      pointer-events: none;
    }

    .team__member:hover .team__portrait-wrap::after {
      border-color: var(--accent);
    }

    .team__portrait-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      transition: transform 0.7s var(--ease-out);
    }

    .team__member:hover .team__portrait-wrap img {
      transform: scale(1.06);
    }

    /* Name */
    .team__name {
      font-family: var(--ff-serif);
      font-size: clamp(1.5rem, 2.2vw, 2rem);
      font-weight: 400;
      letter-spacing: -0.01em;
      line-height: 1.1;
      color: var(--ink);
      margin-bottom: 0.5rem;
    }

    /* Role — two-line allowed */
    .team__role {
      font-family: var(--ff-sans);
      font-size: clamp(0.78rem, 0.9vw, 0.875rem);
      font-weight: 300;
      color: var(--ink-muted);
      line-height: 1.55;
      max-width: 26ch;
      margin-bottom: 1.5rem;
    }

    /* Hairline separator */
    .team__sep {
      width: 100%;
      max-width: 200px;
      height: 1px;
      background: var(--hairline);
      margin-bottom: 1.25rem;
    }

    /* Contact links */
    .team__contacts {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      align-items: center;
    }

    .team__contact-link {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-family: var(--ff-sans);
      font-size: 0.875rem;
      font-weight: 400;
      color: var(--ink-soft);
      transition: color 0.3s var(--ease);
      letter-spacing: 0.01em;
    }

    .team__contact-link:hover {
      color: var(--accent);
    }

    .team__contact-link svg {
      flex-shrink: 0;
      opacity: 0.65;
      transition: opacity 0.3s;
    }

    .team__contact-link:hover svg {
      opacity: 1;
    }

    /* ---- Network card (spans 3 cols — feature row) ---- */
    .team__network {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      align-items: center;
      gap: clamp(2rem, 5vw, 4rem);
      padding: clamp(2rem, 4vh, 3rem) clamp(2rem, 4vw, 3rem);
      background: var(--bg-subtle);
      border: 1px solid var(--hairline);
      margin-top: clamp(1.5rem, 3vh, 2.5rem);
    }

    .team__network-portrait {
      width: clamp(100px, 14vw, 160px);
      aspect-ratio: 16/9;
      overflow: hidden;
      margin: 0 auto;
    }

    .team__network-portrait img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .team__network-body {
      text-align: center;
    }

    .team__network-body .team__name {
      font-size: clamp(1.3rem, 2vw, 1.75rem);
    }

    .team__network-badge {
      display: inline-block;
      font-family: var(--ff-sans);
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--accent);
      border: 1px solid var(--accent-soft);
      padding: 0.3rem 0.75rem;
      margin-bottom: 0.85rem;
    }

    .team__network-contacts {
      display: flex;
      justify-content: center;
      gap: 2rem;
      flex-wrap: wrap;
    }

    /* ---- Reveal animations ---- */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    .reveal-d1 { transition-delay: 0.07s; }
    .reveal-d2 { transition-delay: 0.14s; }
    .reveal-d3 { transition-delay: 0.21s; }
    .reveal-d4 { transition-delay: 0.28s; }
    .reveal-d5 { transition-delay: 0.35s; }

    /* ---- CTA row ---- */
    .team__cta-row {
      text-align: center;
      margin-top: clamp(3rem, 6vh, 5rem);
    }

    .team__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.85rem;
      font-family: var(--ff-sans);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--ink);
      border: 1px solid var(--ink);
      padding: 0.95rem 2rem;
      transition: background 0.35s var(--ease), color 0.35s var(--ease), gap 0.35s var(--ease);
    }

    .team__cta:hover {
      background: var(--ink);
      color: var(--ink-inverse);
      gap: 1.25rem;
    }

    .team__cta svg { transition: transform 0.35s var(--ease); }
    .team__cta:hover svg { transform: translateX(4px); }

    /* ---- Responsive ---- */
    @media (max-width: 960px) {
      .team__grid { grid-template-columns: repeat(2, 1fr); }
      .team__network {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .team__network-portrait { aspect-ratio: 1; width: 120px; border-radius: 50%; }
    }

    @media (max-width: 600px) {
      .team__grid { grid-template-columns: 1fr; }
      .team__network-contacts { flex-direction: column; gap: 0.75rem; align-items: center; }
    }

/* ---------- Kalender (Events) ---------- */
.events {
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: var(--bg-subtle);
  border-top: 1px solid var(--hairline);
}

.events__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: clamp(3rem, 6vh, 5rem);
  gap: 2rem;
  flex-wrap: wrap;
}

.events__header h2 { max-width: 16ch; }
.events__header .eyebrow { margin-bottom: 1.25rem; }

.events__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.event {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  border: 1px solid var(--hairline);
  min-height: 340px;
  overflow: hidden;
  transition: border-color 0.3s;
}

.event:hover { border-color: var(--hairline-strong); }

.event__media {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}

.event__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 1.2s var(--ease-out), opacity 0.4s;
}

.event:hover .event__media img { transform: scale(1.05); opacity: 1; }

.event__body {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

.event__date {
  font-family: var(--ff-serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.event__name {
  font-family: var(--ff-serif);
  font-size: clamp(1.6rem, 2vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0.75rem 0;
}

.event__loc {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1rem;
}

.event__text {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: var(--ink-inverse);
  padding: clamp(4rem, 8vh, 6rem) 0 2rem;
}

.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
  border-bottom: 1px solid var(--hairline-light);
}

.footer__brand-mark {
  font-family: var(--ff-serif);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
}
.footer__brand-mark small {
  display: block;
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 4px;
}

.footer__tag {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(242, 237, 226, 0.75);
  max-width: 28ch;
  line-height: 1.5;
  margin-bottom: 2rem;
}

.footer__address {
  font-size: 0.9rem;
  color: rgba(242, 237, 226, 0.7);
  line-height: 1.8;
}

.footer__col h5 {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 1.5rem;
}

.footer__col ul { list-style: none; }
.footer__col li {
  font-family: var(--ff-serif);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.footer__col a {
  color: rgba(242, 237, 226, 0.8);
  transition: color 0.3s;
}
.footer__col a:hover { color: var(--accent-soft); }

.footer__bottom {
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(242, 237, 226, 0.5);
}

.footer__legal { display: flex; gap: 2rem; }
.footer__legal a { color: inherit; transition: color 0.3s; }
.footer__legal a:hover { color: var(--accent-soft); }

/* ---------- Split / Hover Expand Section ---------- */
.split {
  border-top: 1px solid var(--hairline);
}

.split__header {
  padding: clamp(5rem, 10vh, 8rem) 0 clamp(3rem, 5vh, 4rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}

.split__header h2 { max-width: 18ch; }
.split__header .eyebrow { margin-bottom: 1.25rem; }

.split__lead {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 38ch;
  line-height: 1.55;
}

.split__panels {
  display: flex;
  width: 100%;
  height: 70vh;
  min-height: 540px;
  max-height: 820px;
  overflow: hidden;
  background: var(--ink);
}

.split__panel {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  transition: flex-grow 1s var(--ease-out);
  border-right: 1px solid rgba(242, 237, 226, 0.1);
  color: var(--ink-inverse);
  text-decoration: none;
}
.split__panel:last-child { border-right: none; }

.split__panels:hover .split__panel { flex-grow: 0.72; }
.split__panels .split__panel:hover { flex-grow: 2.4; }

.split__img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.split__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out), filter 0.7s ease;
  filter: saturate(0.8) brightness(0.85);
}

.split__panel:hover .split__img img {
  transform: scale(1.04);
  filter: saturate(1) brightness(1);
}

.split__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,21,32,0.35) 0%, rgba(10,21,32,0.45) 50%, rgba(10,21,32,0.85) 100%);
  transition: background 0.7s var(--ease);
}

.split__panel:hover .split__shade {
  background: linear-gradient(180deg, rgba(10,21,32,0.15) 0%, rgba(10,21,32,0.35) 50%, rgba(10,21,32,0.85) 100%);
}

.split__num {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  left: clamp(1.5rem, 3vw, 2.5rem);
  z-index: 2;
  font-family: var(--ff-serif);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--accent-soft);
  letter-spacing: 0.1em;
}

.split__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.split__title {
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 2.8vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink-inverse);
  transition: margin-bottom 0.7s var(--ease-out);
}

.split__title em { font-style: italic; color: var(--accent-soft); }

.split__text {
  font-family: var(--ff-sans);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(242, 237, 226, 0.88);
  max-width: 36ch;
  margin-top: 1.25rem;
  margin-bottom: 1.75rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease) 0.05s, transform 0.7s var(--ease-out) 0.05s;
}

.split__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-inverse);
  padding: 0.95rem 1.5rem;
  border: 1px solid rgba(242, 237, 226, 0.55);
  background: rgba(10, 21, 32, 0.15);
  backdrop-filter: blur(4px);
  width: fit-content;
  opacity: 0;
  transform: translateY(14px);
  transition:
    background 0.35s var(--ease),
    color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    opacity 0.6s var(--ease) 0.15s,
    transform 0.7s var(--ease-out) 0.15s,
    gap 0.35s var(--ease);
}

.split__cta:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
  gap: 1.25rem;
}

.split__panel:hover .split__text,
.split__panel:hover .split__cta {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile slider */
@media (max-width: 1023px) {
  .split__panels {
    display: flex;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 clamp(1.5rem, 4vw, 4rem) 1rem;
    gap: 1rem;
    background: transparent;
  }
  .split__panels::-webkit-scrollbar { display: none; }

  .split__panel {
    flex: 0 0 85%;
    height: 540px;
    scroll-snap-align: center;
    border-right: none;
  }

  /* Reset hover expand behavior on touch */
  .split__panels:hover .split__panel,
  .split__panels .split__panel:hover { flex-grow: 0; }

  .split__text,
  .split__cta {
    opacity: 1;
    transform: none;
  }

  .split__img img {
    filter: saturate(1) brightness(0.92);
  }
  .split__shade {
    background: linear-gradient(180deg, rgba(10,21,32,0.15) 0%, rgba(10,21,32,0.35) 45%, rgba(10,21,32,0.85) 100%);
  }
}

.split__dots {
  display: none;
}
@media (max-width: 1023px) {
  .split__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 0 2rem;
  }
  .split__dot {
    width: 28px;
    height: 2px;
    background: var(--hairline);
    transition: background 0.3s var(--ease);
  }
  .split__dot.is-active { background: var(--ink); }
}


/* ---------- Mobile Nav: Hamburger + Drawer ---------- */
.nav__toggle {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 102;
}

.nav__toggle span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--ink-inverse);  /* ← NAVY, sauberer Kontrast auf Brass */
  transition: background 0.4s var(--ease), transform 0.45s var(--ease), top 0.3s var(--ease);
}
.nav__toggle span:nth-child(1) { top: 17px; }
.nav__toggle span:nth-child(2) { top: 25px; }

.nav.is-scrolled .nav__toggle span { background: var(--ink-inverse); }

.nav__toggle.is-open span { background: var(--ink-inverse) !important; }
.nav__toggle.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.nav-drawer {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--ink-inverse);
  z-index: 101;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.is-open { opacity: 1; visibility: visible; }

.nav-drawer__inner {
  min-height: 100%;
  min-height: 100svh;
  padding: 110px clamp(1.5rem, 6vw, 3rem) 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
}
.nav-drawer__close {
  position: absolute;
  top: 1.5rem;
  right: clamp(1.5rem, 6vw, 3rem);
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
}

.nav-drawer__close span {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 20px;
  height: 1px;
  background: var(--ink-inverse);
  transition: background 0.3s;
}

.nav-drawer__close span:nth-child(1) { transform: rotate(45deg); }
.nav-drawer__close span:nth-child(2) { transform: rotate(-45deg); }

.nav-drawer__close:hover span,
.nav-drawer__close:focus-visible span { background: var(--accent-soft); }
.nav-drawer__list { list-style: none; padding: 0; margin: 0; }

.nav-drawer__list li {
  border-top: 1px solid rgba(242, 237, 226, 0.15);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out);
}
.nav-drawer__list li:last-child { border-bottom: 1px solid rgba(242, 237, 226, 0.15); }

.nav-drawer.is-open .nav-drawer__list li { opacity: 1; transform: translateY(0); }
.nav-drawer.is-open .nav-drawer__list li:nth-child(1) { transition-delay: 0.12s; }
.nav-drawer.is-open .nav-drawer__list li:nth-child(2) { transition-delay: 0.18s; }
.nav-drawer.is-open .nav-drawer__list li:nth-child(3) { transition-delay: 0.24s; }
.nav-drawer.is-open .nav-drawer__list li:nth-child(4) { transition-delay: 0.30s; }
.nav-drawer.is-open .nav-drawer__list li:nth-child(5) { transition-delay: 0.36s; }

.nav-drawer__list a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--ff-serif);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  font-weight: 300;
  color: var(--ink-inverse);
  padding: 1.1rem 0;
  letter-spacing: -0.015em;
  line-height: 1.1;
  transition: color 0.3s, padding-left 0.4s var(--ease);
}
.nav-drawer__list a:hover,
.nav-drawer__list a:focus-visible { color: var(--accent-soft); padding-left: 0.5rem; }

.nav-drawer__list a small {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, 0.45);
}

.nav-drawer__footer {
  padding-top: 2rem;
  border-top: 1px solid rgba(242, 237, 226, 0.15);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease) 0.4s, transform 0.7s var(--ease-out) 0.4s;
}
.nav-drawer.is-open .nav-drawer__footer { opacity: 1; transform: translateY(0); }

.nav-drawer__contact small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, 0.45);
  margin-bottom: 0.3rem;
}
.nav-drawer__contact a {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-inverse);
  transition: color 0.3s;
}
.nav-drawer__contact a:hover { color: var(--accent-soft); }

.nav-drawer__lang {
  margin-top: 0.5rem;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 237, 226, 0.5);
}

body.is-locked { overflow: hidden; }
/* ---------- Scroll Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav__inner { grid-template-columns: 1fr auto; }
.nav__inner > nav { display: none; }
  .nav__lang { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .fleet__grid { grid-template-columns: repeat(2, 1fr); }
  .news__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}


@media (max-width: 768px) {
  .nav__inner { grid-template-columns: 1fr auto; }
.nav__inner > nav { display: none; }
  .nav__lang { display: none; }
  .hero{min-height: 90svh;}
  .hero__title { font-size: clamp(2.8rem, 12vw, 4rem); }
  .hero__meta { display: none; }

  .intro__grid { grid-template-columns: 1fr; }
  .intro__num::before { display: none; }

  .houses__header { flex-direction: column; align-items: flex-start; }
  .house, .house:nth-child(even) { grid-template-columns: 1fr; }
  .house:nth-child(even) .house__media { order: 0; }

  .fleet__header { grid-template-columns: 1fr; }
  .fleet__grid { grid-template-columns: 1fr; }

  .personal__grid { grid-template-columns: 1fr; }
  .personal__contact { grid-template-columns: 1fr; gap: 1.25rem; }

  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--hairline); min-height: 180px; }
  .stat:last-child { border-bottom: none; }

  .events__grid { grid-template-columns: 1fr; }
  .event { grid-template-columns: 1fr; min-height: 0; }
  .event__media { min-height: 200px; }
.news__grid { grid-template-columns: 1fr !important; }
  .footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* ---------- Sticky CTA Pill ---------- */
.sticky-cta {
  position: fixed;
  bottom: clamp(1.25rem, 2.5vw, 2rem);
  right: clamp(1.25rem, 2.5vw, 2rem);
  z-index: 90;
  display: flex;
  align-items: stretch;
  background: var(--ink);
  color: var(--ink-inverse);
  border-radius: 999px;
  padding: 0.5rem;
  box-shadow: 0 12px 32px -8px rgba(13, 27, 41, 0.35), 0 4px 12px -4px rgba(13, 27, 41, 0.2);
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 0.5s var(--ease),
    transform 0.6s var(--ease-out),
    background 0.4s var(--ease);
}

.sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.sticky-cta:hover {
  background: var(--ink-soft);
}

.sticky-cta__link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.15rem;
  color: var(--ink-inverse);
  text-decoration: none;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 999px;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}

.sticky-cta__link:hover {
  color: var(--accent-soft);
}

.sticky-cta__icon {
  flex-shrink: 0;
  stroke-width: 1.5;
}

.sticky-cta__divider {
  width: 1px;
  background: rgba(242, 237, 226, 0.2);
  margin: 0.5rem 0;
}

/* Phone label: hidden by default, expands on hover of the pill */
.sticky-cta__label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width 0.6s var(--ease),
    opacity 0.4s var(--ease) 0.05s,
    margin 0.6s var(--ease);
  margin-left: 0;
}

.sticky-cta:hover .sticky-cta__label {
  max-width: 200px;
  opacity: 1;
  margin-left: 0.1rem;
}

/* Hide phone icon-gap when collapsed (visual tightening) */
.sticky-cta__link--phone {
  padding-right: 0.75rem;
}
.sticky-cta:hover .sticky-cta__link--phone {
  padding-right: 1.15rem;
}

/* Hide in print */
@media print {
  .sticky-cta { display: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sticky-cta,
  .sticky-cta__label {
    transition: opacity 0.2s ease;
  }
}

/* Mobile: two equal touch targets, no hover-expand */
@media (max-width: 640px) {
  .sticky-cta {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    padding: 0.4rem;
    justify-content: space-between;
  }

  .sticky-cta__link {
    flex: 1;
    justify-content: center;
    padding: 0.85rem 1rem;
    font-size: 11px;
    letter-spacing: 0.15em;
  }

  /* On mobile: always show phone number, no expand animation */
  .sticky-cta__label {
    max-width: none;
    opacity: 1;
    margin-left: 0.1rem;
  }

  .sticky-cta__link--phone,
  .sticky-cta:hover .sticky-cta__link--phone {
    padding-right: 1rem;
  }
}
/* =====================================================================
   CRANCHI-FOKUS — Ergänzungen (Header-Co-Branding, Hero-Logo, Flaggschiff)
   ===================================================================== */

/* ---- Header: Ocean Yachting + Cranchi Co-Branding ---- */
.nav__brand {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav__cobrand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(13, 27, 41, 0.28);
}

.nav__cobrand img {
  height: 19px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  filter: brightness(6);          /* Navy auf Brass-Header */
  opacity: 0.82;
}

.nav__cobrand span {
  font-family: var(--ff-sans);
  font-size: 6px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-inverse);
  opacity: 0.7;
  line-height: 1.3;
  max-width: 11ch;
}

@media (max-width: 1100px) { .nav__cobrand { display: none; } }

/* ---- Hero: prominente Cranchi-Wortmarke ---- */
.hero__brand {
  margin: 0 0 1.6rem;
  opacity: 0;
  animation: riseIn 1s var(--ease-out) 0.5s forwards;
}

.hero__brand-logo {
  height: clamp(32px, 4.5vw, 50px);
  width: auto;
  filter: brightness(0) invert(1);   /* Cream/Weiß auf dunklem Hero */
  opacity: 0.96;
}

/* ---- Flaggschiff: Settantotto 78 Showcase ---- */
.flagship {
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}

.flagship__head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.flagship__name {
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 1rem 0;
}

.flagship__tag {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink-muted);
  max-width: 24ch;
}

.flagship__intro {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 46ch;
  padding-bottom: 0.4rem;
}

.flagship__media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-subtle);
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

.flagship__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}

.flagship:hover .flagship__media img { transform: scale(1.03); }

.flagship__media-cap {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 1rem;
  border-top: 1px solid rgba(242, 237, 226, 0.45);
  color: var(--ink-inverse);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.flagship__media-cap .italic {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.flagship__specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}

.flagship__spec {
  padding: clamp(1.25rem, 2.5vh, 1.75rem) clamp(1rem, 2vw, 1.5rem);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.flagship__spec-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.flagship__spec-val {
  font-family: var(--ff-serif);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  color: var(--ink);
  line-height: 1.1;
}

.flagship__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vh, 3rem);
}

.flagship__note {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .flagship__head { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .flagship__specs { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   YACHT-DETAILSEITE — Template (.ydp), wiederverwendbar je Modell
   ===================================================================== */

/* Breadcrumb-Leiste */
.ydp-bar {
  padding-top: calc(var(--nav-h) + 1.4rem);
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--hairline);
}
.ydp-crumb {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ydp-crumb a { color: var(--ink-muted); transition: color 0.3s var(--ease); }
.ydp-crumb a:hover { color: var(--accent); }
.ydp-crumb i { font-style: normal; opacity: 0.45; }
.ydp-crumb strong { font-weight: 400; color: var(--ink); }

/* Hero */
.ydp-hero {
  position: relative;
  min-height: 76vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--ink-inverse);
  overflow: hidden;
  background: var(--ink);
}
.ydp-hero__media { position: absolute; inset: 0; z-index: 0; }
.ydp-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
  animation: heroZoom 16s var(--ease-out) forwards;
}
.ydp-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,21,32,0.42) 0%, rgba(10,21,32,0.12) 38%, rgba(10,21,32,0.88) 100%);
}
.ydp-hero__content { position: relative; z-index: 2; padding-block: clamp(2.5rem, 6vh, 4.5rem); }
.ydp-hero__brand {
  font-family: var(--ff-sans);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: 1.25rem;
}
.ydp-hero__title {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(3rem, 7vw, 6.5rem); line-height: 0.95; letter-spacing: -0.025em;
  color: var(--ink-inverse); margin-bottom: 1rem;
}
.ydp-hero__sub {
  font-family: var(--ff-serif); font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem); color: rgba(242,237,226,0.82);
}

/* Key-Specs (Hero-Fuß) */
.ydp-key {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(242,237,226,0.2);
}
.ydp-key__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ydp-key__item {
  padding: clamp(1.25rem, 2.5vh, 1.75rem) clamp(1rem, 2vw, 1.5rem);
  border-right: 1px solid rgba(242,237,226,0.15);
}
.ydp-key__item:last-child { border-right: none; }
.ydp-key__val {
  font-family: var(--ff-serif);
  font-size: clamp(1.3rem, 2vw, 1.9rem); color: var(--ink-inverse); line-height: 1;
}
.ydp-key__label {
  font-family: var(--ff-sans);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(242,237,226,0.6); margin-top: 0.55rem;
}

/* Intro */
.ydp-intro { padding: clamp(5rem, 10vh, 8rem) 0; }
.ydp-intro__grid {
  display: grid; grid-template-columns: 1fr 1.35fr;
  gap: clamp(2rem, 6vw, 6rem); align-items: start;
}
.ydp-intro__lead {
  font-family: var(--ff-serif); font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem); line-height: 1.3; color: var(--ink);
}
.ydp-intro__lead em { color: var(--accent); }
.ydp-intro__text p { color: var(--ink-soft); margin-bottom: 1.1rem; line-height: 1.75; max-width: 56ch; }
.ydp-intro__text p:last-child { margin-bottom: 0; }

/* Galerie */
.ydp-gallery { padding-bottom: clamp(4rem, 8vh, 7rem); }
.ydp-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.ydp-gallery__item { overflow: hidden; background: var(--bg-subtle); aspect-ratio: 4/3; }
.ydp-gallery__item--wide { grid-column: 1 / -1; aspect-ratio: 21/9; }
.ydp-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease-out); }
.ydp-gallery__item:hover img { transform: scale(1.04); }

/* Technische Daten */
.ydp-specs {
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: var(--bg-subtle);
  border-top: 1px solid var(--hairline);
}
.ydp-specs__head { margin-bottom: clamp(2.5rem, 5vh, 4rem); max-width: 64ch; }
.ydp-specs__head .eyebrow { margin-bottom: 1.25rem; }
.ydp-specs__groups {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 5vh, 3.5rem) clamp(3rem, 6vw, 6rem);
}
.ydp-specs__group h3 {
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.5rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--hairline-strong);
}
.ydp-spec-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--hairline);
}
.ydp-spec-row dt { font-size: 0.88rem; color: var(--ink-muted); letter-spacing: 0.01em; }
.ydp-spec-row dd { font-family: var(--ff-serif); font-size: 1.15rem; color: var(--ink); text-align: right; white-space: nowrap; }

/* An Bord / Layout */
.ydp-aboard {
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: var(--ink);
  color: var(--ink-inverse);
}
.ydp-aboard__head { max-width: 45ch; margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.ydp-aboard__head .eyebrow { color: var(--accent-soft); margin-bottom: 1.25rem; }
.ydp-aboard__head h2 { color: var(--ink-inverse); }
.ydp-aboard__head h2 em { font-style: italic; color: var(--accent-soft); }
.ydp-aboard__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem);
}
.ydp-aboard__item { padding-top: 1.5rem; border-top: 1px solid var(--hairline-light); }
.ydp-aboard__item h4 {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(1.4rem, 2vw, 1.9rem); color: var(--ink-inverse); margin-bottom: 0.85rem; line-height: 1.1;
}
.ydp-aboard__item h4 small {
  display: block; font-family: var(--ff-sans); font-size: 10px; font-weight: 400;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 0.7rem;
}
.ydp-aboard__item p { color: rgba(242,237,226,0.68); line-height: 1.7; font-size: 0.95rem; }

/* Verwandte Modelle */
.ydp-related { padding: clamp(5rem, 10vh, 8rem) 0; border-top: 1px solid var(--hairline); }
.ydp-related__head {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}
.ydp-related__head .eyebrow { margin-bottom: 1.25rem; }
.ydp-related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }

/* Kontakt-Band */
.ydp-contact {
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: var(--bg-subtle);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.ydp-contact .eyebrow { margin-bottom: 1.5rem; }
.ydp-contact h2 { max-width: 22ch; margin: 0 auto 2.5rem; }
.ydp-contact h2 em { font-style: italic; color: var(--accent); }
.ydp-contact__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.ydp-contact__btn {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-family: var(--ff-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 1.05rem 2.25rem; transition: all 0.35s var(--ease);
}
.ydp-contact__btn--solid { background: var(--ink); color: var(--ink-inverse); border: 1px solid var(--ink); }
.ydp-contact__btn--solid:hover { background: transparent; color: var(--ink); gap: 1.35rem; }
.ydp-contact__btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.ydp-contact__btn--ghost:hover { background: var(--ink); color: var(--ink-inverse); gap: 1.35rem; }

@media (max-width: 900px) {
  .ydp-key__grid { grid-template-columns: repeat(2, 1fr); }
  .ydp-key__item:nth-child(2) { border-right: none; }
  .ydp-key__item:nth-child(-n+2) { border-bottom: 1px solid rgba(242,237,226,0.15); }
  .ydp-intro__grid { grid-template-columns: 1fr; gap: 2rem; }
  .ydp-specs__groups { grid-template-columns: 1fr; }
  .ydp-aboard__grid { grid-template-columns: 1fr; }
  .ydp-related__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   FLOTTEN-ÜBERSICHTSSEITE — .fleetpage
   ===================================================================== */
.fleetpage-head {
  padding: clamp(3rem, 6vh, 5rem) 0 clamp(2.5rem, 5vh, 4rem);
  text-align: center;
}
.fleetpage-head .eyebrow { margin-bottom: 1.25rem; }
.fleetpage-head h1 {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.0; letter-spacing: -0.02em;
  max-width: 18ch; margin: 0 auto 1.5rem;
}
.fleetpage-head h1 em { font-style: italic; color: var(--accent); }
.fleetpage-head p {
  font-family: var(--ff-serif); font-style: italic;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem); line-height: 1.5; color: var(--ink-muted);
  max-width: 52ch; margin: 0 auto;
}

/* Filter-Leiste */
.fleet-filter {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem;
  padding-bottom: clamp(2.5rem, 5vh, 4rem);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}
.fleet-filter__btn {
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.7rem 1.4rem; border: 1px solid var(--hairline-strong);
  color: var(--ink-soft); background: transparent; cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.fleet-filter__btn:hover { border-color: var(--ink); color: var(--ink); }
.fleet-filter__btn.is-active { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }

/* Grid */
.fleet-cat { padding-bottom: clamp(4rem, 8vh, 7rem); }
.fleet-cat__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

.fleet-card {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--hairline);
  transition: border-color 0.3s, transform 0.5s var(--ease-out);
}
.fleet-card.is-hidden { display: none; }
.fleet-card:hover { border-color: var(--hairline-strong); transform: translateY(-4px); }

.fleet-card__media {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: linear-gradient(155deg, var(--bg-subtle) 0%, #E2DAC8 100%);
  display: flex; align-items: center; justify-content: center;
}
.fleet-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.fleet-card:hover .fleet-card__media img { transform: scale(1.04); }
.fleet-card__ph {
  font-family: var(--ff-serif); font-style: italic;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem); color: var(--ink-muted); opacity: 0.5;
  text-align: center; padding: 1.5rem; line-height: 1.2;
}
.fleet-card__badge {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-inverse); background: var(--ink); padding: 0.35rem 0.7rem;
}
.fleet-card__badge--accent { background: var(--accent); }

.fleet-card__body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.fleet-card__brand { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.5rem; }
.fleet-card__name { font-family: var(--ff-serif); font-size: 1.7rem; font-weight: 400; line-height: 1.1; margin-bottom: 0.35rem; }
.fleet-card__line { font-family: var(--ff-serif); font-style: italic; font-size: 0.95rem; color: var(--ink-muted); margin-bottom: 1.5rem; }

.fleet-card__specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
  padding: 1.25rem 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  margin-top: auto;
}
.fleet-card__spec-val { font-family: var(--ff-serif); font-size: 1.1rem; color: var(--ink); line-height: 1; margin-bottom: 0.3rem; }
.fleet-card__spec-label { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }

.fleet-card__actions { display: flex; gap: 1.5rem; margin-top: 1.4rem; }
.fleet-card__action {
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 0.3rem;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.fleet-card__action:hover { color: var(--accent); border-bottom-color: var(--accent); }
.fleet-card__action--ghost { color: var(--ink-muted); border-bottom-color: var(--hairline); }
.fleet-card__action--ghost:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 1024px) { .fleet-cat__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .fleet-cat__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   YACHT-DETAILSEITE — Erweiterungen (Video, Konfigurator, Layouts, Ressourcen)
   ===================================================================== */

/* ---- Hero-Chips (Virtual Tour / Broschüre) ---- */
.ydp-hero__chips { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.85rem; }
.ydp-hero__chip {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-inverse); padding: 0.75rem 1.25rem;
  border: 1px solid rgba(242,237,226,0.45); background: rgba(10,21,32,0.25);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), gap 0.35s var(--ease);
}
.ydp-hero__chip:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); gap: 0.95rem; }
.ydp-hero__chip svg { flex-shrink: 0; }

/* ---- YouTube-Video ---- */
.ydp-video { background: var(--ink); padding: clamp(4rem, 8vh, 7rem) 0; }
.ydp-video__cap {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem;
  margin-bottom: 1.85rem;
}
.ydp-video__cap .eyebrow { color: var(--accent-soft); }
.ydp-video__cap h2 {
  font-family: var(--ff-serif); font-weight: 300; color: var(--ink-inverse);
  font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.05; letter-spacing: -0.015em;
}
.ydp-video__cap h2 em { font-style: italic; color: var(--accent-soft); }
.ydp-video__frame {
  position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden;
  background: #000; border: 1px solid var(--hairline-light);
}
.ydp-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Konfigurator: Rumpffarben & Décor ---- */
.ydp-config { padding: clamp(5rem, 10vh, 8rem) 0; border-top: 1px solid var(--hairline); }
.ydp-config__head { max-width: 48ch; margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.ydp-config__head .eyebrow { margin-bottom: 1.25rem; }
.ydp-config__head h2 em { font-style: italic; color: var(--accent); }

.ydp-config__row {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding: clamp(2rem, 4vh, 3.25rem) 0;
}
.ydp-config__row + .ydp-config__row { border-top: 1px solid var(--hairline); }
.ydp-config__row--rev .ydp-config__visual { order: 2; }

.ydp-config__visual {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  background: linear-gradient(155deg, var(--bg-subtle) 0%, #E2DAC8 100%);
  display: flex; align-items: center; justify-content: center;
}
.ydp-config__visual img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.45s var(--ease); }
.ydp-config__ph {
  font-family: var(--ff-serif); font-style: italic; text-align: center; padding: 1.5rem; line-height: 1.3;
  font-size: clamp(1.2rem, 1.8vw, 1.7rem); color: var(--ink-muted); opacity: 0.55; transition: opacity 0.45s var(--ease);
}

.ydp-config__label { font-family: var(--ff-sans); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.85rem; }
.ydp-config__name { font-family: var(--ff-serif); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; color: var(--ink); margin-bottom: 1.6rem; }
.ydp-config__opts { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.ydp-swatch {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  padding: 0.65rem 1rem 0.65rem 0.65rem; border: 1px solid var(--hairline-strong);
  color: var(--ink-soft); background: transparent; cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.ydp-swatch:hover { border-color: var(--ink); color: var(--ink); }
.ydp-swatch.is-active { border-color: var(--ink); color: var(--ink); }
.ydp-swatch__dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(13,27,41,0.18); flex-shrink: 0; }

.ydp-opt {
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.75rem 1.4rem; border: 1px solid var(--hairline-strong); color: var(--ink-soft);
  background: transparent; cursor: pointer; transition: all 0.3s var(--ease);
}
.ydp-opt:hover { border-color: var(--ink); color: var(--ink); }
.ydp-opt.is-active { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }

/* ---- Grundrisse / Layouts (Deck-Umschalter) ---- */
.ydp-layouts { padding: clamp(5rem, 10vh, 8rem) 0; background: var(--bg-subtle); border-top: 1px solid var(--hairline); }
.ydp-layouts__head { text-align: center; max-width: 64ch; margin: 0 auto clamp(2.5rem, 5vh, 3.5rem); }
.ydp-layouts__head .eyebrow { margin-bottom: 1.25rem; }
.ydp-layouts__head h2 em { font-style: italic; color: var(--accent); }

.ydp-layouts__tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 4vh, 2.75rem); }
.ydp-layouts__tab {
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.7rem 1.3rem; border: 1px solid var(--hairline-strong); color: var(--ink-soft);
  background: transparent; cursor: pointer; transition: all 0.3s var(--ease);
}
.ydp-layouts__tab:hover { border-color: var(--ink); color: var(--ink); }
.ydp-layouts__tab.is-active { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }

.ydp-layouts__stage {
  background: #FFF; border: 1px solid var(--hairline);
  padding: clamp(1.5rem, 3vw, 3.25rem); display: flex; align-items: center; justify-content: center;
  min-height: 320px;
}
.ydp-layouts__img { max-width: 100%; max-height: 56vh; width: auto; height: auto; transition: opacity 0.4s var(--ease); }
.ydp-layouts__ph { font-family: var(--ff-serif); font-style: italic; font-size: clamp(1.3rem,2vw,1.8rem); color: var(--ink-muted); opacity: 0.55; }
.ydp-layouts__caption { text-align: center; margin-top: 1.5rem; font-family: var(--ff-serif); font-style: italic; font-size: clamp(1rem,1.3vw,1.2rem); color: var(--ink-muted); }

/* ---- Ressourcen-Band (Broschüre / Virtual Tour / Probefahrt) ---- */
.ydp-resources { padding: clamp(4.5rem, 9vh, 7rem) 0; border-top: 1px solid var(--hairline); }
.ydp-resources__head { text-align: center; margin-bottom: clamp(2.5rem, 5vh, 3.5rem); }
.ydp-resources__head .eyebrow { margin-bottom: 1.25rem; }
.ydp-resources__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2vw, 2rem); }
.ydp-resource {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--hairline);
  transition: border-color 0.3s var(--ease), transform 0.5s var(--ease-out);
  text-decoration: none; color: var(--ink);
}
.ydp-resource:hover { border-color: var(--ink); transform: translateY(-4px); }
.ydp-resource__icon { width: 40px; height: 40px; color: var(--accent); }
.ydp-resource h4 { font-family: var(--ff-serif); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.1; }
.ydp-resource p { font-size: 0.92rem; color: var(--ink-muted); line-height: 1.6; flex: 1; }
.ydp-resource__cta {
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 0.3rem;
  display: inline-flex; align-items: center; gap: 0.6rem; transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.ydp-resource:hover .ydp-resource__cta { gap: 1rem; color: var(--accent); }

@media (max-width: 900px) {
  .ydp-config__row { grid-template-columns: 1fr; gap: 1.5rem; }
  .ydp-config__row--rev .ydp-config__visual { order: 0; }
  .ydp-resources__grid { grid-template-columns: 1fr; }
}

.footer__brand-mark {
  margin-bottom: 1.5rem;
}
.footer__logo {
  display: block;
  height: 45px;
  width: auto;
  margin-bottom: 0.85rem;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
  background: var(--signal);
  border: 1px solid var(--signal);
  padding: 1rem 1.85rem;
  margin-top: 0.5rem;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
  opacity: 0;
  animation: riseIn 1s var(--ease-out) 1.3s forwards;
}

.hero__cta svg {
  flex-shrink: 0;
  transition: transform 0.35s var(--ease);
}

.hero__cta:hover {
  background: var(--signal-hover);
  border-color: var(--signal-hover);
}

.hero__cta:hover svg { transform: translateX(3px); }

.footer__social {
  display: flex;
  gap: 0.85rem;
  margin-top: 1.75rem;
}
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hairline-light);
  color: rgba(242, 237, 226, 0.8);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.footer__social a:hover {
  color: var(--accent-soft);
  border-color: var(--accent-soft);
}

/* ---------- News / Neuigkeiten ---------- */
.news {
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}
 
.news__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: clamp(3rem, 6vh, 5rem);
  gap: 2rem;
  flex-wrap: wrap;
}
 
.news__header h2 { max-width: 16ch; }
.news__header .eyebrow { margin-bottom: 1.25rem; }
 
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
 
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--hairline);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.5s var(--ease-out);
}
 
.news-card:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-4px);
}
 
.news-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--ink);
}
 
.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
 
.news-card:hover .news-card__media img { transform: scale(1.05); }
 
.news-card__media--ph {
  background: linear-gradient(155deg, var(--bg-subtle) 0%, #E8E8E8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}
 
.news-card__ph-text {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-muted);
  opacity: 0.55;
}
 
.news-card__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 2;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-inverse);
  background: var(--ink);
  padding: 0.35rem 0.7rem;
}
 
.news-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  flex: 1;
}
 
.news-card__date {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
 
.news-card__title {
  font-family: var(--ff-serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
 
.news-card__title a { transition: color 0.3s; }
.news-card__title a:hover { color: var(--accent); }
 
.news-card__excerpt {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* =====================================================================
   KONTAKTSEITE — .kontakt-*
   ===================================================================== */

/* ---- Header-Bild (wiederverwendet .hero-Bildsprache, kompakter) ---- */
.kontakt-hero {
  position: relative;
  min-height: clamp(420px, 56vh, 620px);
  display: flex;
  align-items: center;
  color: var(--ink-inverse);
  overflow: hidden;
  background: var(--ink);
}
.kontakt-hero__media { position: absolute; inset: 0; z-index: 0; }
.kontakt-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
  animation: heroZoom 16s var(--ease-out) forwards;
}
.kontakt-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,27,41,0.72) 0%, rgba(13,27,41,0.4) 45%, rgba(13,27,41,0.88) 100%);
}
.kontakt-hero__content {
  position: relative; z-index: 2;
  width: 100%; text-align: center;
  padding-block: clamp(2rem, 5vh, 3.5rem);
}
.kontakt-hero__content .eyebrow {
  display: flex; justify-content: center;
  margin-bottom: 1.5rem;
}
.kontakt-hero__title {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: 1.03; letter-spacing: -0.02em;
  color: var(--ink-inverse);
  max-width: 18ch; margin: 0 auto 1.5rem;
}
.kontakt-hero__title em { font-style: italic; color: var(--accent-soft); }
.kontakt-hero__sub {
  font-family: var(--ff-serif); font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.55;
  color: rgba(242, 237, 226, 0.82);
  max-width: 52ch; margin: 0 auto;
}

/* ---- Split-Layout: Formular + Sidebar ---- */
.kontakt-main {
  padding: clamp(4rem, 9vh, 7rem) 0 clamp(5rem, 10vh, 8rem);
}
.kontakt-split {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

/* ---- Formular ---- */
.kontakt-form-wrap .eyebrow { margin-bottom: 1.25rem; }
.kontakt-form-wrap h2 { margin-bottom: 2.5rem; max-width: 20ch; }
.kontakt-form-wrap h2 em { font-style: italic; color: var(--accent); }

.kontakt-form { display: flex; flex-direction: column; gap: 1.75rem; }

.kontakt-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.kontakt-field { position: relative; }

.kontakt-field label {
  display: block;
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.65rem;
}

.kontakt-field label .req { color: var(--signal); margin-left: 0.2em; }

.kontakt-field input,
.kontakt-field select,
.kontakt-field textarea {
  width: 100%;
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 0.55rem 0;
  transition: border-color 0.3s var(--ease);
  appearance: none;
  border-radius: 0;
}

.kontakt-field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }

.kontakt-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1 1l6 7 6-7' stroke='%236B7785' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 1.5rem;
}

.kontakt-field input::placeholder,
.kontakt-field textarea::placeholder { color: var(--ink-muted); opacity: 0.5; }

.kontakt-field input:focus,
.kontakt-field select:focus,
.kontakt-field textarea:focus { outline: none; border-bottom-color: var(--ink); }

.kontakt-field--invalid input,
.kontakt-field--invalid select,
.kontakt-field--invalid textarea { border-bottom-color: var(--signal); }

.kontakt-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-top: 0.25rem;
}
.kontakt-form__consent input[type="checkbox"] {
  appearance: none;
  width: 17px; height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1px solid var(--hairline-strong);
  cursor: pointer;
  position: relative;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.kontakt-form__consent input[type="checkbox"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.kontakt-form__consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 4px; height: 9px;
  border: solid var(--ink-inverse);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.kontakt-form__consent label {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.kontakt-form__consent a { color: var(--ink); border-bottom: 1px solid var(--hairline-strong); }
.kontakt-form__consent a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.kontakt-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  align-self: flex-start;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--signal);
  border: 1px solid var(--signal);
  padding: 1.05rem 2.5rem;
  margin-top: 0.5rem;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), gap 0.35s var(--ease);
}
.kontakt-form__submit:hover { background: var(--signal-hover); border-color: var(--signal-hover); gap: 1.1rem; }
.kontakt-form__submit svg { transition: transform 0.35s var(--ease); }
.kontakt-form__submit:hover svg { transform: translateX(3px); }

.kontakt-form__status {
  font-size: 0.85rem;
  color: var(--ink-muted);
  min-height: 1.2em;
}
.kontakt-form__status.is-success { color: var(--ink); }

/* ---- Sidebar ---- */
.kontakt-info {
  background: var(--bg-subtle);
  border: 1px solid var(--hairline);
  padding: clamp(2rem, 3vw, 2.75rem);
}

.kontakt-info__block { padding: 1.5rem 0; border-bottom: 1px solid var(--hairline); }
.kontakt-info__block:first-child { padding-top: 0; }
.kontakt-info__block:last-child { border-bottom: none; padding-bottom: 0; }

.kontakt-info__label {
  display: block;
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}

.kontakt-info__value {
  display: inline-block;
  font-family: var(--ff-serif);
  font-size: 1.2rem;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.kontakt-info__value:hover { color: var(--accent); border-bottom-color: var(--accent); }

.kontakt-info__address { font-family: var(--ff-serif); font-size: 1.05rem; color: var(--ink-soft); line-height: 1.6; font-style: normal; }

.kontakt-info__link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.85rem;
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s, gap 0.3s var(--ease);
}
.kontakt-info__link:hover { color: var(--accent); border-bottom-color: var(--accent); gap: 0.85rem; }

.kontakt-info__social { display: flex; gap: 0.9rem; }
.kontakt-info__social a {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline-strong);
  color: var(--ink-soft);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.kontakt-info__social a:hover { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }

/* ---- Standort / Karte (dunkles Band) ---- */
.kontakt-map {
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: var(--ink);
  color: var(--ink-inverse);
}
.kontakt-map__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: stretch;
}
.kontakt-map__frame {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.kontakt-map__frame iframe {
  width: 90%; height: 100%; border: 0;
  filter: grayscale(0.55) contrast(1.08) brightness(0.95);
}

.kontakt-map__details .eyebrow { color: var(--accent-soft); margin-bottom: 1.25rem; }
.kontakt-map__details h2 { color: var(--ink-inverse); max-width: 16ch; margin-bottom: 2rem; }
.kontakt-map__details h2 em { font-style: italic; color: var(--accent-soft); }

.kontakt-map__address {
  font-family: var(--ff-serif);
  font-size: 1.15rem;
  line-height: 1.65;
  color: rgba(242, 237, 226, 0.85);
  margin-bottom: 2rem;
}

.kontakt-hours { margin-bottom: 2.25rem; }
.kontakt-hours__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--hairline-light);
  font-size: 0.92rem;
}
.kontakt-hours__row:last-child { border-bottom: 1px solid var(--hairline-light); }
.kontakt-hours__row dt { color: rgba(242, 237, 226, 0.6); letter-spacing: 0.03em; }
.kontakt-hours__row dd { font-family: var(--ff-serif); color: var(--ink-inverse); }

.kontakt-map__btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--ff-sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-inverse);
  border: 1px solid rgba(242, 237, 226, 0.35);
  padding: 1rem 1.85rem;
  transition: all 0.35s var(--ease);
}
.kontakt-map__btn:hover { background: var(--ink-inverse); color: var(--ink); border-color: var(--ink-inverse); gap: 1.1rem; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .kontakt-split { grid-template-columns: 1fr; gap: 3.5rem; }
  .kontakt-map__grid { grid-template-columns: 1fr; }
  .kontakt-map__frame { aspect-ratio: 16/9; }
}

@media (max-width: 640px) {
  .kontakt-form__row { grid-template-columns: 1fr; gap: 1.5rem; }
  .kontakt-info { padding: 1.75rem; }
}

/* ============================================================
   MESSEN-SEITE — Ergänzungen (ans Ende von main.css anhängen)
   ============================================================ */

/* ---- Hero (Muster: kontakt-hero) ---- */
.messen-hero {
  position: relative;
  min-height: clamp(420px, 56vh, 620px);
  display: flex;
  align-items: center;
  color: var(--ink-inverse);
  overflow: hidden;
  background: var(--ink);
}
.messen-hero__media { position: absolute; inset: 0; z-index: 0; }
.messen-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
  animation: heroZoom 16s var(--ease-out) forwards;
}
.messen-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,27,41,0.72) 0%, rgba(13,27,41,0.4) 45%, rgba(13,27,41,0.88) 100%);
}
.messen-hero__content {
  position: relative; z-index: 2;
  width: 100%; text-align: center;
  padding-block: clamp(2rem, 5vh, 3.5rem);
}
.messen-hero__content .eyebrow { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.messen-hero__title {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: 1.03; letter-spacing: -0.02em;
  color: var(--ink-inverse);
  max-width: 18ch; margin: 0 auto 1.5rem;
}
.messen-hero__title em { font-style: italic; color: var(--accent-soft); }
.messen-hero__sub {
  font-family: var(--ff-serif); font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.55;
  color: rgba(242, 237, 226, 0.82);
  max-width: 52ch; margin: 0 auto;
}

/* ---- Saison-Timeline ---- */
.messen-season { padding: clamp(4rem, 9vh, 7rem) 0 clamp(2rem, 5vh, 4rem); }
.messen-season__head { margin-bottom: clamp(3.5rem, 7vh, 5.5rem); }
.messen-season__head .eyebrow { margin-bottom: 1.25rem; }

.messen-timeline {
  position: relative;
  height: 170px;
  margin: 0 clamp(0.5rem, 3vw, 2.5rem);
}
.messen-timeline::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--hairline-strong);
}
.messen-timeline__track { position: absolute; inset: 0; }
.messen-timeline__month {
  position: absolute; top: calc(50% + 14px);
  transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted);
}
.messen-timeline__stop {
  position: absolute; left: var(--pos); top: 50%;
  transform: translate(-50%, -50%);
  display: block; text-decoration: none; color: var(--ink);
}
.messen-timeline__dot {
  display: block; width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.messen-timeline__stop:hover .messen-timeline__dot {
  transform: scale(1.35);
  background: var(--ink);
}
.messen-timeline__stop--home .messen-timeline__dot {
  background: var(--signal);
  border-color: var(--signal);
}
.messen-timeline__stop--home:hover .messen-timeline__dot { background: var(--signal-hover); }
.messen-timeline__label {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%);
  text-align: center; white-space: nowrap;
}
.messen-timeline__stop--below .messen-timeline__label {
  bottom: auto; top: calc(100% + 30px);
}
.messen-timeline__label strong {
  display: block;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
}
.messen-timeline__label small {
  display: block;
  font-size: 11px; color: var(--ink-muted); letter-spacing: 0.04em;
}
.messen-timeline__stop--home .messen-timeline__label strong { color: var(--signal); }

/* Timeline mobil: vertikale Liste mit linker Reling */
@media (max-width: 760px) {
  .messen-timeline { height: auto; margin: 0; padding-left: 1.5rem; }
  .messen-timeline::before { left: 5px; right: auto; top: 4px; bottom: 4px; width: 1px; height: auto; }
  .messen-timeline__track { display: none; }
  .messen-timeline__stop {
    position: static; transform: none;
    display: flex; align-items: baseline; gap: 1rem;
    padding: 0.85rem 0;
  }
  .messen-timeline__dot { position: absolute; left: 0; margin-top: 5px; }
  .messen-timeline__label { position: static; transform: none; text-align: left; white-space: normal; }
  .messen-timeline__label strong { display: inline; margin-right: 0.6rem; }
  .messen-timeline__label small { display: inline; }
}

/* ---- Messe-Detailzeilen ---- */
.messen-list { padding: clamp(2rem, 5vh, 4rem) 0 clamp(4rem, 9vh, 7rem); }
.messen-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vh, 4rem) 0;
  border-top: 1px solid var(--hairline);
}
.messen-row:last-child { border-bottom: 1px solid var(--hairline); }
.messen-row--flip .messen-row__media { order: 2; }
.messen-row--flip .messen-row__body { order: 1; }

.messen-row__media { overflow: hidden; aspect-ratio: 4 / 3; }
.messen-row__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.messen-row:hover .messen-row__media img { transform: scale(1.04); }

.messen-row__badge {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-inverse); background: var(--signal);
  padding: 0.35rem 0.7rem;
  margin-bottom: 1.1rem;
}
.messen-row__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.9rem;
}
.messen-row__date { color: var(--ink); font-weight: 500; }
.messen-row__name {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  letter-spacing: -0.015em; line-height: 1.1;
  margin-bottom: 1.1rem;
}
.messen-row__text { max-width: 52ch; color: var(--ink-soft); margin-bottom: 1.75rem; }
.messen-row__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem 2rem; }

/* ---- CTA-Button (Signal Red, Muster: nav__cta) ---- */
.messen-btn {
  display: inline-block;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink);
  background: var(--signal);
  padding: 0.95rem 1.7rem;
  border: 1px solid var(--ink);
  text-decoration: none;
  transition: all 0.35s var(--ease);
  white-space: nowrap;
}
.messen-btn:hover { background: var(--ink); color: var(--ink-inverse); }

/* ---- Service-Band (dunkel) ---- */
.messen-service {
  background: var(--ink);
  color: var(--ink-inverse);
  padding: clamp(4.5rem, 10vh, 8rem) 0;
}
.messen-service__head { text-align: center; margin-bottom: clamp(3rem, 6vh, 5rem); }
.messen-service__head .eyebrow { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.messen-service__title {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.12; letter-spacing: -0.015em;
}
.messen-service__title em { font-style: italic; color: var(--accent-soft); }
.messen-service__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  margin-bottom: clamp(3rem, 6vh, 4.5rem);
}
.messen-service__item h4 {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline-light);
}
.messen-service__item p { color: rgba(242, 237, 226, 0.75); font-size: 0.95rem; }
.messen-service__cta { text-align: center; }
.messen-service__cta .messen-btn { border-color: var(--signal); }
.messen-service__cta .messen-btn:hover { background: transparent; color: var(--ink-inverse); border-color: var(--ink-inverse); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .messen-row { grid-template-columns: 1fr; gap: 1.75rem; }
  .messen-row--flip .messen-row__media { order: 0; }
  .messen-row--flip .messen-row__body { order: 1; }
  .messen-service__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICE-SEITE — Ergänzungen (ans Ende von main.css anhängen)
   ============================================================ */

/* ---- Hero (Muster: kontakt-/messen-hero) ---- */
.service-hero {
  position: relative;
  min-height: clamp(420px, 56vh, 620px);
  display: flex;
  align-items: center;
  color: var(--ink-inverse);
  overflow: hidden;
  background: var(--ink);
}
.service-hero__media { position: absolute; inset: 0; z-index: 0; }
.service-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
  animation: heroZoom 16s var(--ease-out) forwards;
}
.service-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,27,41,0.72) 0%, rgba(13,27,41,0.4) 45%, rgba(13,27,41,0.88) 100%);
}
.service-hero__content {
  position: relative; z-index: 2;
  width: 100%; text-align: center;
  padding-block: clamp(2rem, 5vh, 3.5rem);
}
.service-hero__content .eyebrow { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.service-hero__title {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: 1.03; letter-spacing: -0.02em;
  color: var(--ink-inverse);
  max-width: 18ch; margin: 0 auto 1.5rem;
}
.service-hero__title em { font-style: italic; color: var(--accent-soft); }
.service-hero__sub {
  font-family: var(--ff-serif); font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.55;
  color: rgba(242, 237, 226, 0.82);
  max-width: 52ch; margin: 0 auto;
}

/* ---- Intro ---- */
.service-intro { padding: clamp(4rem, 9vh, 7rem) 0 clamp(2rem, 5vh, 3.5rem); }
.service-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.service-intro__grid .eyebrow { margin-bottom: 1.25rem; }
.service-intro__text p { max-width: 58ch; color: var(--ink-soft); }
.service-intro__text p + p { margin-top: 1.25rem; }

/* ---- Leistungsliste ---- */
.service-list { padding: clamp(2rem, 5vh, 4rem) 0 clamp(4.5rem, 10vh, 8rem); }
.service-item {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.75rem, 4vh, 2.75rem) 0;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.service-item:last-child { border-bottom: 1px solid var(--hairline); }
.service-item__head { display: flex; flex-direction: column; gap: 0.5rem; }
.service-item__name {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  letter-spacing: -0.015em; line-height: 1.15;
}
.service-item__season {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted);
}
.service-item__text { max-width: 58ch; color: var(--ink-soft); align-self: center; }

/* ---- USP-Band (dunkel) ---- */
.service-promise {
  background: var(--ink);
  color: var(--ink-inverse);
  padding: clamp(4.5rem, 10vh, 8rem) 0;
}
.service-promise__head { text-align: center; margin-bottom: clamp(3rem, 6vh, 5rem); }
.service-promise__head .eyebrow { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.service-promise__title {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.12; letter-spacing: -0.015em;
  color: var(--accent-soft);
}
.service-promise__title em { font-style: italic; color: var(--accent-soft); }
.service-promise__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  margin-bottom: clamp(3.5rem, 7vh, 5.5rem);
}
.service-promise__item h4 {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.85rem;
  padding-top: 1.25rem;
  color:var(--accent-soft);
  border-top: 1px solid var(--hairline-light);
}
.service-promise__item p { color: rgba(242, 237, 226, 0.75); font-size: 0.95rem; }

/* ---- Kontaktzeile im USP-Band ---- */
.service-promise__contact {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.75rem 2.5rem;
  padding-top: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid var(--hairline-light);
}
.service-promise__contact-info small {
  display: block;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.35rem;
}
.service-promise__contact-info strong {
  display: block;
  font-family: var(--ff-serif); font-weight: 400;
  font-size: 1.35rem; letter-spacing: -0.01em;
}
.service-promise__contact-info span {
  font-size: 0.85rem; color: rgba(242, 237, 226, 0.65);
}
.service-promise__contact-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem 2rem;
}

/* ---- CTA-Button (Signal Red, Muster: messen-btn) ---- */
.service-btn {
  display: inline-block;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink);
  background: var(--signal);
  padding: 0.95rem 1.7rem;
  border: 1px solid var(--signal);
  text-decoration: none;
  transition: all 0.35s var(--ease);
  white-space: nowrap;
}
.service-btn:hover { background: transparent; color: var(--ink-inverse); border-color: var(--ink-inverse); }

.link--light { color: var(--ink-inverse); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .service-intro__grid { grid-template-columns: 1fr; gap: 2rem; }
  .service-item { grid-template-columns: 1fr; gap: 1rem; }
  .service-item__head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .service-promise__grid { grid-template-columns: 1fr; }
  .service-promise__contact { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   SERVICE-SEITE — Anfrageformular (ans Ende von main.css anhängen)
   ============================================================ */
.service-anfrage {
  padding: clamp(4.5rem, 10vh, 8rem) 0;
  scroll-margin-top: var(--nav-h);
}
.service-anfrage__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.service-anfrage__form-wrap .eyebrow { margin-bottom: 1.25rem; }
.service-anfrage__form-wrap h2 { margin-bottom: 2.5rem; max-width: 20ch; }

.kontakt-info__note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 32ch;
}

@media (max-width: 900px) {
  .service-anfrage__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============================================================
   NAV: SPRACH-DROPDOWN (ans Ende von main.css anhängen)
   ============================================================ */
.nav__lang--dropdown {
  position: relative;
  gap: 0;
}
.nav__lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: none;
  padding: 0.4rem 0.2rem;
  cursor: pointer;
  color: var(--ink-inverse);
}
.nav__lang-toggle .nav__lang-code { color: var(--ink-inverse); }
.nav__lang-chevron {
  color: var(--ink-inverse);
  opacity: 0.6;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav__lang-toggle:hover .nav__lang-chevron,
.nav__lang-toggle[aria-expanded="true"] .nav__lang-chevron { opacity: 1; }
.nav__lang-toggle[aria-expanded="true"] .nav__lang-chevron { transform: rotate(180deg); }
.nav__lang-toggle:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.nav__lang-menu {
  position: absolute;
  top: calc(100% + 18px);
  right: 0;
  min-width: 165px;
  background: var(--ink);
  border: 1px solid var(--hairline-light);
  padding: 0.5rem 0;
  z-index: 110;
}
.nav__lang-menu::before {
  /* unsichtbare Brücke, damit der Mauszeiger die Lücke überqueren kann */
  content: '';
  position: absolute;
  top: -18px; left: 0; right: 0; height: 18px;
}
.nav__lang-menu .nav__lang-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1.1rem;
  opacity: 0.65;
}
.nav__lang-menu .nav__lang-item:hover,
.nav__lang-menu .nav__lang-item:focus-visible,
.nav__lang-menu .nav__lang-item.is-active { opacity: 1; }
.nav__lang-menu .nav__lang-item.is-active { background: rgba(255, 255, 255, 0.05); }
.nav__lang-menu .nav__lang-code { color: var(--ink-inverse); }
.nav__lang-name {
  font-size: 12px;
  color: var(--accent-soft);
  letter-spacing: 0.02em;
}

/* ============================================================
   LEGAL-SEITEN (Impressum, Datenschutz, AGB)
   Gemeinsame Basis — ans Ende von main.css anhängen
   ============================================================ */
.legal {
  padding: clamp(3rem, 7vh, 5.5rem) 0 clamp(4.5rem, 10vh, 8rem);
}
.legal__container { max-width: 760px; }
.legal__head { margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.legal__head .eyebrow { margin-bottom: 1.25rem; }

.legal__section { margin-bottom: clamp(2.25rem, 4.5vh, 3.25rem); }
.legal__section:last-child { margin-bottom: 0; }
.legal__section h2 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}
.legal__section h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 1.5rem 0 0.6rem;
}
.legal__section p {
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}
.legal__section p:last-child { margin-bottom: 0; }
.legal__section a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.legal__section a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.legal__list {
  list-style: none;
  color: var(--ink-soft);
}
.legal__list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
}
.legal__list li:last-child { border-bottom: none; }

.legal__stand {
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* ============================================================
   PAGE-HERO (generisch) + TEAM-SEITE
   Ans Ende von main.css anhängen
   ============================================================ */

/* ---- Generischer Seiten-Hero ----
   Ersetzt künftig kontakt-hero / messen-hero / service-hero
   (Migration optional, Muster identisch) */
.page-hero {
  position: relative;
  min-height: clamp(420px, 56vh, 620px);
  display: flex;
  align-items: center;
  color: var(--ink-inverse);
  overflow: hidden;
  background: var(--ink);
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
  animation: heroZoom 16s var(--ease-out) forwards;
}
.page-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,27,41,0.72) 0%, rgba(13,27,41,0.4) 45%, rgba(13,27,41,0.88) 100%);
}
.page-hero__content {
  position: relative; z-index: 2;
  width: 100%; text-align: center;
  padding-block: clamp(2rem, 5vh, 3.5rem);
}
.page-hero__content .eyebrow { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.page-hero__title {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: 1.03; letter-spacing: -0.02em;
  color: var(--ink-inverse);
  max-width: 18ch; margin: 0 auto 1.5rem;
}
.page-hero__title em { font-style: italic; color: var(--accent-soft); }
.page-hero__sub {
  font-family: var(--ff-serif); font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.55;
  color: rgba(242, 237, 226, 0.82);
  max-width: 52ch; margin: 0 auto;
}

/* ---- Team: Intro + Bereiche ---- */
.team-intro { padding: clamp(4rem, 9vh, 7rem) 0 clamp(3rem, 6vh, 5rem); }
.team-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  margin-bottom: clamp(3rem, 6vh, 5rem);
}
.team-intro__grid .eyebrow { margin-bottom: 1.25rem; }
.team-intro__text p { max-width: 58ch; color: var(--ink-soft); }

.team-areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}
.team-areas__item h4 {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}
.team-areas__item p { color: var(--ink-soft); font-size: 0.95rem; }

/* ---- Team: CTA-Band (dunkel) ---- */
.team-cta {
  background: var(--ink);
  color: var(--ink-inverse);
  padding: clamp(4rem, 9vh, 7rem) 0;
}
.team-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}
.team-cta__inner .eyebrow { margin-bottom: 1.1rem; }
.team-cta__title {
      color: var(--accent-soft);
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.12; letter-spacing: -0.015em;
}
.team-cta__title em { font-style: italic; color: var(--accent-soft); }
.team-cta__actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem 2rem;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .team-intro__grid { grid-template-columns: 1fr; gap: 2rem; }
  .team-areas { grid-template-columns: 1fr; }
  .team-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   ERSATZTEILE-SEITE (ans Ende von main.css anhängen)
   ============================================================ */
.et-anfrage {
  padding: clamp(2rem, 5vh, 4rem) 0 clamp(4.5rem, 10vh, 8rem);
  scroll-margin-top: var(--nav-h);
}
.et-anfrage__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.et-anfrage__form-wrap .eyebrow { margin-bottom: 1.25rem; }
.et-anfrage__form-wrap h2 { margin-bottom: 2.5rem; max-width: 20ch; }

/* Drei-Schritte-Gliederung */
.et-step {
  border: none;
  padding: 0;
  margin: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.et-step__legend {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.1rem 0 0.35rem;
  border-top: 1px solid var(--hairline);
  margin-bottom: 0.25rem;
}
.et-step__num {
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0;
  color: var(--accent);
  line-height: 1;
}
.et-hint {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-top: 0.5rem;
  line-height: 1.55;
}
.et-hint strong { color: var(--ink); font-weight: 500; }

@media (max-width: 900px) {
  .et-anfrage__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============================================================
   ÜBER-UNS-SEITE: Intro, Kennzahlen & Chronik
   (ans Ende von main.css anhängen)
   ============================================================ */
.ueberuns-intro { padding: clamp(4rem, 9vh, 7rem) 0 clamp(3rem, 6vh, 5rem); }
.ueberuns-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  margin-bottom: clamp(3.5rem, 7vh, 5.5rem);
}
.ueberuns-intro__grid .eyebrow { margin-bottom: 1.25rem; }
.ueberuns-intro__text p { max-width: 58ch; color: var(--ink-soft); }
.ueberuns-intro__text p + p { margin-top: 1.25rem; }

/* Kennzahlen-Strip */
.ueberuns-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-top: clamp(1.75rem, 3.5vh, 2.5rem);
  border-top: 1px solid var(--hairline);
}
.ueberuns-stats__val {
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.ueberuns-stats__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
line-height: 1.6;
max-width: 38ch;
text-wrap: balance;
}

/* Chronik */
.chronik { padding: clamp(3rem, 6vh, 5rem) 0 clamp(4.5rem, 10vh, 8rem); }
.chronik__head { margin-bottom: clamp(3rem, 6vh, 5rem); }
.chronik__head .eyebrow { margin-bottom: 1.25rem; }

.chronik__rail {
  position: relative;
  max-width: 780px;
  padding-left: clamp(1.75rem, 4vw, 2.5rem);
}
.chronik__rail::before {
  content: '';
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--hairline-strong);
}
.chronik__year {
  position: relative;
  margin: clamp(2.25rem, 4.5vh, 3.25rem) 0 1.25rem;
}
.chronik__year:first-child { margin-top: 0; }
.chronik__year span {
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: -0.02em;
}
.chronik__year::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(1.75rem, 4vw, 2.5rem) + 1px);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ink);
}
.chronik__item {
  position: relative;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline);
}
.chronik__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(1.75rem, 4vw, 2.5rem) + 1px);
  top: 1.7rem;
  transform: translate(-50%, -50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--ink-muted);
}
.chronik__item--key::before { background: var(--signal); border-color: var(--signal); }
.chronik__when {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}
.chronik__item p { color: var(--ink-soft); max-width: 62ch; }
.chronik__item strong { color: var(--ink); font-weight: 500; }
.chronik__item a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.chronik__item a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.chronik__item--next { border-bottom: none; }
.chronik__item--next::before { background: var(--ink); border-color: var(--ink); }

/* Responsive */
@media (max-width: 900px) {
  .ueberuns-intro__grid { grid-template-columns: 1fr; gap: 2rem; }
  .ueberuns-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ÜBER-UNS: Film-Fassade & Chronik-Bilder
   (ans Ende von main.css anhängen)
   ============================================================ */
.ueberuns-film { padding: clamp(1.5rem, 3vh, 2.5rem) 0 clamp(3rem, 6vh, 5rem); }
.ueberuns-film__head { margin-bottom: clamp(2rem, 4vh, 3rem); }
.ueberuns-film__head .eyebrow { margin-bottom: 1.25rem; }

/* Klick-Fassade: Vimeo lädt erst nach Interaktion */
.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
}
.video-facade iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-facade__btn {
  position: absolute; inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background:
    radial-gradient(ellipse at center, rgba(13,27,41,0.35) 0%, rgba(13,27,41,0.85) 100%),
    var(--ink);
  border: none;
  cursor: pointer;
  color: var(--ink-inverse);
}
.video-facade__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(242, 237, 226, 0.5);
  color: var(--ink-inverse);
  transition: all 0.35s var(--ease);
}
.video-facade__play svg { margin-left: 4px; }
.video-facade__btn:hover .video-facade__play {
  background: var(--signal);
  border-color: var(--signal);
  transform: scale(1.06);
}
.video-facade__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.video-facade__note {
  font-size: 11px;
  color: rgba(242, 237, 226, 0.55);
  letter-spacing: 0.04em;
}

/* Chronik-Einträge mit Bild */
.chronik__item--media {
  display: grid;
  grid-template-columns: 1fr clamp(180px, 22vw, 260px);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
.chronik__figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.chronik__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.chronik__item--media:hover .chronik__figure img { transform: scale(1.04); }

@media (max-width: 700px) {
  .chronik__item--media { grid-template-columns: 1fr; }
  .chronik__figure { max-width: 340px; }
}

/* ============================================================
   CHRONIK: Zentrierte Scroll-Timeline (FINAL)
   Linie mittig · Einträge im Wechsel links/rechts · Fülllinie
   ERSETZT alle früheren Chronik-Layout-Blöcke
   ("Grid-Darstellung" und "Scroll-Timeline" vorher löschen!)
   ============================================================ */
.chronik__rail {
  --line-off: clamp(2.5rem, 5vw, 4.5rem);  /* Abstand Inhalt ↔ Mittellinie */
  position: relative;
  max-width: 1020px;
  margin-inline: auto;
  padding-left: 0;
}

/* Statische (helle) Mittellinie */
.chronik__rail::before {
  left: 50%;
  transform: translateX(-0.5px);
  top: 4px; bottom: 4px;
  background: var(--hairline-strong);
}

/* Fülllinie — Höhe steuert das Scroll-Script */
.chronik__progress {
  position: absolute;
  left: 50%;
  transform: translateX(-0.5px);
  top: 4px;
  width: 1px;
  height: 0;
  background: var(--ink);
  z-index: 1;
}

/* ---- Einträge: Zickzack links/rechts der Linie ---- */
.chronik__item {
  position: relative;
  padding: clamp(1.25rem, 2.5vh, 2rem) 0;
  border-bottom: none;
  display: block;
}
.chronik__item:nth-of-type(odd) {
  padding-right: calc(50% + var(--line-off));
  text-align: right;
}
.chronik__item:nth-of-type(even) {
  padding-left: calc(50% + var(--line-off));
  text-align: left;
}
.chronik__item p {
  max-width: 46ch;
  color: var(--ink-soft);
}
.chronik__item:nth-of-type(odd) p,
.chronik__item:nth-of-type(odd) .chronik__body,
.chronik__item:nth-of-type(odd) .chronik__figure { margin-left: auto; }
.chronik__item:nth-of-type(even) p,
.chronik__item:nth-of-type(even) .chronik__body,
.chronik__item:nth-of-type(even) .chronik__figure { margin-right: auto; }

/* Punkte: mittig auf der Linie */
.chronik__item::before {
  left: 50%;
  top: calc(clamp(1.25rem, 2.5vh, 2rem) + 14px);
  transform: translate(-50%, -50%);
  width: 9px; height: 9px;
  background: var(--bg);
  border: 1.5px solid var(--ink-muted);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
  z-index: 2;
}
.chronik__item.is-active::before {
  background: var(--ink);
  border-color: var(--ink);
  transform: translate(-50%, -50%) scale(1.25);
}
.chronik__item--key::before { border-color: var(--signal); }
.chronik__item--key.is-active::before { background: var(--signal); border-color: var(--signal); }

/* Datum am Eintrag */
.chronik__when {
  position: static;
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink-muted);
  line-height: 1.2;
  margin-bottom: 0.6rem;
  transition: color 0.4s var(--ease);
}
.chronik__item.is-active .chronik__when { color: var(--ink); }
.chronik__item--key.is-active .chronik__when { color: var(--signal); }

/* Bild-Einträge: Foto unter dem Text, zur Linie hin ausgerichtet */
.chronik__item--media { display: block; }
.chronik__figure {
  margin-top: 1.1rem;
  max-width: 400px;
}

/* ---- Jahresmarker: zentriert auf der Linie ---- */
.chronik__year {
  position: relative;
  margin: clamp(2.25rem, 4.5vh, 3.5rem) 0 0.75rem;
  padding-left: 0;
  text-align: center;
}
.chronik__year span {
  display: inline-block;
  background: var(--bg);
  padding: 0 1.5rem;
  position: relative;
  z-index: 2;
  color: var(--ink-muted);
  transition: color 0.4s var(--ease);
}
.chronik__year.is-active span { color: var(--ink); }
.chronik__year::before {
  content: none; /* Jahreszahl selbst sitzt auf der Linie — kein Punkt nötig */
}

/* ---- Mobil: einspaltig, Linie links ---- */
@media (max-width: 760px) {
  .chronik__rail::before,
  .chronik__progress { left: 5px; transform: none; }
  .chronik__item:nth-of-type(odd),
  .chronik__item:nth-of-type(even) {
    padding-left: 1.75rem;
    padding-right: 0;
    text-align: left;
  }
  .chronik__item:nth-of-type(odd) p,
  .chronik__item:nth-of-type(odd) .chronik__body,
  .chronik__item:nth-of-type(odd) .chronik__figure { margin-left: 0; }
  .chronik__item::before { left: 5px; transform: translate(-50%, -50%); }
  .chronik__item.is-active::before { transform: translate(-50%, -50%) scale(1.25); }
  .chronik__when { font-size: 1.05rem; }
  .chronik__year { text-align: left; padding-left: 1.75rem; }
  .chronik__year span { padding: 0; }
  .chronik__figure { max-width: 340px; }
}

@media (min-width: 1025px) {
  :root { --nav-h: 132px; }
 
  .nav__inner {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "cobrand logo    actions"
      "menubar menubar menubar";
    row-gap: 0;
    column-gap: 2rem;
    padding: 1.1rem 0;
  }
 
  .nav__cobrand { grid-area: cobrand; justify-self: start; }
  .nav__logo    { grid-area: logo;    justify-self: center; }
  .nav__actions { grid-area: actions; justify-self: end; }
 
  .nav__menubar {
    grid-area: menubar;
    justify-self: stretch;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--hairline-light);
  }
  .nav__menu { justify-content: center; }
}

/* ============================================================
   SERVICE: STANDORT-KARTE (SVG, ohne Drittanbieter)
   (ans Ende von main.css anhängen)
   ============================================================ */
.service-map { padding: clamp(4rem, 9vh, 7rem) 0 clamp(2rem, 4vh, 3rem); }
.service-map__head { margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.service-map__head .eyebrow { margin-bottom: 1.25rem; }

.smap {
  max-width: 920px;
  margin-inline: auto;
}
.smap__svg { display: block; width: 100%; height: auto; }

.smap__land {
  fill: var(--hairline);
  stroke: var(--hairline-strong);
  stroke-width: 1;
}

/* Reguläre Service-Marker */
.smap__dot { fill: var(--ink); }
.smap__ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0.35;
}
.smap__pin:hover .smap__ring { opacity: 0.8; }

/* Cranchi-Marker („C") */
.smap__cdot { fill: var(--signal); }
.smap__c {
  fill: var(--ink-inverse);
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

/* Beschriftungen */
.smap__label {
  fill: var(--ink);
  font-family: var(--ff-sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.smap__sublabel {
  fill: var(--ink-muted);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Legende */
.service-map__legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: clamp(1.25rem, 2.5vh, 2rem);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.service-map__legend-item { display: inline-flex; align-items: center; gap: 0.6rem; }
.smap__dot--legend {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
}
.smap__cdot--legend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--ink-inverse);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
}

/* Mobil: Labels proportional größer lesbar halten */
@media (max-width: 700px) {
  .smap__label { font-size: 17px; }
  .smap__sublabel { font-size: 13px; }
  .smap__c { font-size: 12px; }
}

/* ============================================================
   SERVICE: LEISTUNGSÜBERSICHT (Eignerschafts-Services)
   (ans Ende von main.css anhängen)
   ============================================================ */
.service-extras {
  padding: clamp(2rem, 4vh, 3.5rem) 0 clamp(4.5rem, 10vh, 8rem);
  scroll-margin-top: var(--nav-h);
}
.service-extras__head { margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.service-extras__head .eyebrow { margin-bottom: 1.25rem; }
.service-extras__intro {
  max-width: 58ch;
  color: var(--ink-soft);
  margin-top: 1.5rem;
}

.service-extras__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 4rem);
}
.service-extras__item h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}
.service-extras__item p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .service-extras__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .service-extras__grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   NAV: Flotten-Dropdown (Desktop) — CSS-only, kein JS nötig
   Ans ENDE von main.css anhängen.
   ========================================================== */

.nav__item--fleet { position: relative; }

.nav__item--fleet > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav__caret {
  transition: transform 0.35s var(--ease);
  opacity: 0.7;
}

.nav__item--fleet:hover .nav__caret,
.nav__item--fleet:focus-within .nav__caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* aktiver Menüpunkt (aria-current via $page) */
.nav__menu a.is-active { opacity: 1; }
.nav__menu a.is-active::after { right: 0; }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 560px;
  background: var(--ink);
  border: 1px solid var(--hairline);
  padding: 2rem 2.1rem 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.4s var(--ease), visibility 0.35s;
  z-index: 110;
}

/* unsichtbare Hover-Brücke zwischen Menüpunkt und Panel */
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}

.nav__item--fleet:hover .nav__dropdown,
.nav__item--fleet:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__dropdown-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.nav__dropdown-label {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-inverse);
  opacity: 0.45;
  margin: 0 0 0.85rem;
}

.nav__dropdown-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.nav__dropdown-col a {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-inverse);
  opacity: 0.8;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.nav__dropdown-col a:hover,
.nav__dropdown-col a:focus-visible { opacity: 1; }

/* Underline-Animation der Hauptnav im Panel neutralisieren */
.nav__dropdown a::after { content: none; }

.nav__dropdown-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  width: 100%;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-inverse);
  opacity: 0.85;
  transition: opacity 0.3s, gap 0.3s var(--ease);
}

.nav__dropdown-all:hover,
.nav__dropdown-all:focus-visible { opacity: 1; gap: 0.75rem; }

/* ==========================================================
   NAV-DRAWER: Flotten-Untermenü (Mobile)
   ========================================================== */

.nav-drawer__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 1.1rem 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-drawer__sub li {
  border: 0 !important;          /* überschreibt die Trennlinien der Hauptliste */
  opacity: 1 !important;         /* Untermenü nicht doppelt animieren */
  transform: none !important;
}

.nav-drawer__sub a {
  font-family: var(--ff-sans);
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: var(--ink-inverse);
  opacity: 0.65;
  padding: 0.3rem 0;
  transition: opacity 0.3s;
}

.nav-drawer__sub a:hover,
.nav-drawer__sub a:focus-visible { opacity: 1; }

/* Stagger-Delay für den 6. Hauptpunkt (bisher nur bis 5 definiert) */
.nav-drawer.is-open .nav-drawer__list > li:nth-child(6) { transition-delay: 0.42s; }

/* ---------- Events: horizontaler Scroller ---------- */
.events__header-right {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  Margin:24px 0;
}

.events__controls { display: flex; gap: 0.6rem; }

.events__btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s;
}

.events__btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.events__btn:disabled { opacity: 0.25; cursor: default; }
.events__btn svg { display: block; }
.events__btn--prev svg { transform: rotate(180deg); }

/* Scroller bricht aus dem Container bis an die Viewport-Kanten aus;
   Padding stellt die Ausrichtung an der Container-Innenkante wieder her */
.events__scroller {
  /* Abstand Viewport-Kante → Container-Innenkante, für Bleed + Snap-Ausrichtung */
  --events-pad: calc(max((100vw - 1440px) / 2, 0px) + clamp(1.5rem, 4vw, 4rem));
  margin-inline: calc(-1 * var(--events-pad));
  padding-inline: var(--events-pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--events-pad);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}

.events__scroller::-webkit-scrollbar { display: none; }

.events__track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: max-content;
}

.events__track .event {
  flex: 0 0 auto;
  width: min(640px, 86vw);
  scroll-snap-align: start;
}

.events__progress {
  margin-top: clamp(2rem, 4vh, 3rem);
  height: 1px;
  background: var(--hairline);
}

.events__progress-bar {
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.15s linear;
}

@media (max-width: 720px) {
  .events__controls { display: none; } /* mobil: natives Touch-Scrolling */
}

/* ---------- Yacht-Karte als Link (Startseite + Detailseiten) ---------- */
.yacht__link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.yacht__link:hover .yacht__name,
.yacht__link:focus-visible .yacht__name { opacity: 0.75; }

/* =====================================================================
   RECHTSSEITEN — .legal-* (Datenschutz, Impressum, AGB)
   ===================================================================== */

/* ---- Kopf ---- */
.legal-head {
  padding: clamp(3rem, 6vh, 5rem) 0 clamp(2.5rem, 5vh, 4rem);
  border-bottom: 1px solid var(--hairline);
}
.legal-head .eyebrow { margin-bottom: 1.25rem; }
.legal-head h1 {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.05; letter-spacing: -0.02em;
  max-width: 20ch; margin-bottom: 1.1rem;
}
.legal-head__meta {
  font-family: var(--ff-sans); font-size: 0.85rem; color: var(--ink-muted);
}

/* ---- Layout: Sticky-TOC + Inhalt ---- */
.legal { padding: clamp(4rem, 8vh, 6rem) 0 clamp(5rem, 10vh, 8rem); }
.legal__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.legal-toc { position: sticky; top: calc(var(--nav-h) + 2rem); }
.legal-toc__label {
  display: block; font-family: var(--ff-sans);
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 1.1rem;
}
.legal-toc__list {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--hairline);
}
.legal-toc__list a {
  display: block; padding: 0.6rem 0 0.6rem 1.1rem; margin-left: -1px;
  border-left: 1px solid transparent;
  font-family: var(--ff-sans); font-size: 0.87rem; line-height: 1.4;
  color: var(--ink-muted);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.legal-toc__list a:hover { color: var(--ink); }
.legal-toc__list a.is-active { color: var(--ink); border-left-color: var(--signal); font-weight: 500; }

/* ---- Fließtext ---- */
.legal-content { max-width: 720px; }

.legal-content section {
  padding-top: 3rem; margin-top: 3rem;
  border-top: 1px solid var(--hairline);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.legal-content section:first-child { padding-top: 0; margin-top: 0; border-top: none; }

.legal-content h2 {
  font-family: var(--ff-serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: -0.01em; margin-bottom: 1.5rem;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.legal-content h3 {
  font-family: var(--ff-sans); font-weight: 600;
  font-size: 1.02rem; letter-spacing: 0.005em; color: var(--ink);
  margin: 2.25rem 0 0.85rem;
}
.legal-content section > h3:first-of-type { margin-top: 0; }
.legal-content h4 {
  font-family: var(--ff-sans); font-weight: 600;
  font-size: 0.92rem; color: var(--ink-soft);
  margin: 1.4rem 0 0.6rem;
}
.legal-content p {
  color: var(--ink-soft); line-height: 1.8;
  margin-bottom: 1rem; font-size: 0.97rem;
}
.legal-content ul {
  margin: 0 0 1.1rem 1.2rem; color: var(--ink-soft);
  line-height: 1.8; font-size: 0.97rem;
}
.legal-content li { margin-bottom: 0.5rem; }
.legal-content address {
  font-style: normal; color: var(--ink-soft);
  line-height: 1.8; margin-bottom: 1.5rem;
}
.legal-content a {
  color: var(--ink); border-bottom: 1px solid var(--hairline-strong);
  word-break: break-word; transition: color 0.3s, border-color 0.3s;
}
.legal-content a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.legal-content strong { color: var(--ink); font-weight: 600; }

/* ---- Opt-Out Buttons (Google Analytics) ---- */
.legal-optout { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin: 1.25rem 0 1.5rem; }
.legal-optout button {
  font-family: var(--ff-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.75rem 1.35rem; border: 1px solid var(--hairline-strong);
  background: transparent; color: var(--ink);
  cursor: pointer; transition: all 0.3s var(--ease);
}
.legal-optout button:hover { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
.legal-optout__status { font-size: 0.85rem; color: var(--ink-muted); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .legal__grid { grid-template-columns: 1fr; }
  .legal-toc { position: static; margin-bottom: 2.5rem; }
  .legal-toc__list { flex-direction: row; flex-wrap: wrap; gap: 0.6rem; border-left: none; }
  .legal-toc__list a {
    padding: 0.55rem 1rem; margin-left: 0;
    border: 1px solid var(--hairline);
  }
  .legal-toc__list a.is-active { background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
}

/* =====================================================================
   SERVICE-FORMULAR — Foto-Upload (.upload-*) + Status/Anti-Spam
   ===================================================================== */

/* ---- Fehlerstatus fürs Formular (Erfolg existiert bereits) ---- */
.kontakt-form__status.is-error { color: var(--signal); }

/* ---- Honeypot: unsichtbar für Menschen, im DOM für Bots ---- */
.kontakt-field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Foto-Upload: Dropzone ---- */
.upload-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2rem 1rem;
  text-align: center;
  border: 1px dashed var(--hairline-strong);
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.upload-drop:hover,
.upload-drop:focus-visible {
  border-color: var(--ink);
  color: var(--ink-soft);
  outline: none;
}
.upload-drop.is-dragover {
  border-color: var(--signal);
  background: var(--bg-subtle);
  color: var(--ink);
}
.upload-drop__icon { color: var(--ink-muted); }
.upload-drop:hover .upload-drop__icon,
.upload-drop.is-dragover .upload-drop__icon { color: var(--signal); }

.upload-drop__text {
  font-family: var(--ff-sans);
  font-size: 0.9rem;
  color: var(--ink);
  margin: 0;
}
.upload-drop__hint {
  font-family: var(--ff-sans);
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin: 0;
}

/* ---- Vorschau-Thumbnails ---- */
.upload-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.upload-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.upload-thumb__remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 27, 41, 0.75);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.upload-thumb__remove:hover { background: var(--signal); }

.upload-error {
  font-family: var(--ff-sans);
  font-size: 0.82rem;
  color: var(--signal);
  min-height: 1.2em;
  margin-top: 0.6rem;
}

/* Eigener Standort (Düsseldorf) — dunkler Marker mit Monogramm */
.smap__hqdot { fill: var(--ink); }
.smap__hq {
  fill: var(--ink-inverse);
  font-family: var(--ff-sans);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.smap__hqdot--legend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-inverse);
  font-family: var(--ff-sans);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.service-map__note {
  max-width: 46ch;
  margin: 1.75rem auto 0;
  text-align: center;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

@media (max-width: 700px) {
  .smap__hq { font-size: 10px; }
}

.lager-stock {
  padding: clamp(2rem, 4vh, 3rem) 0 clamp(4rem, 8vh, 6.5rem);
}
.lager-stock__head { margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.lager-stock__head .eyebrow { margin-bottom: 1.25rem; }
 
/* Boatvertizer-Embed (loader.js setzt die Höhe dynamisch) */
.lager-stock__embed #boatvertizer iframe {
display: block;
  width: 100%;
  border: 0;
}
 
/* ---- Wizard ---- */
.lb-wizard {
  padding: clamp(3.5rem, 7vh, 6rem) 0 clamp(4.5rem, 10vh, 8rem);
  border-top: 1px solid var(--hairline);
  scroll-margin-top: var(--nav-h);
}
.lb-wizard__head { text-align: center; margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.lb-wizard__head .eyebrow { margin-bottom: 1.25rem; }
.lb-wizard__form { max-width: 720px; margin: 0 auto; }
 
/* Fortschritt */
.lb-wizard__progress {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: 720px; margin: 0 auto clamp(2.5rem, 5vh, 3.5rem);
  padding: 0; list-style: none;
}
.lb-wizard__prog {
  position: relative;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  transition: border-color 0.35s var(--ease);
}
.lb-wizard__prog.is-active,
.lb-wizard__prog.is-done { border-top-color: var(--ink); }
.lb-wizard__prog-num {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: 1.5rem; line-height: 1; color: var(--accent);
  display: block; margin-bottom: 0.5rem;
  transition: color 0.35s var(--ease);
}
.lb-wizard__prog.is-active .lb-wizard__prog-num,
.lb-wizard__prog.is-done .lb-wizard__prog-num { color: var(--ink); }
.lb-wizard__prog-q {
  display: block;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.lb-wizard__prog-label {
  display: block;
  font-size: 0.8rem; line-height: 1.45; color: var(--ink-muted);
}
 
/* Schritte */
.lb-step { border: none; padding: 0; margin: 0; }
.lb-step__title {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -0.01em;
  padding: 0; margin-bottom: 0.5rem;
}
.lb-step .et-hint { margin: 0 0 1.75rem; }
.lb-step__sub {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 1.75rem 0 1rem;
}
.lb-step__error {
  font-size: 0.85rem; color: var(--signal-hover);
  margin-top: 1rem;
}
 
/* Auswahl-Chips (Checkbox/Radio als Kacheln) */
.lb-chips {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.lb-chips--stack { grid-template-columns: 1fr; }
.lb-chip { display: block; cursor: pointer; }
.lb-chip input {
  position: absolute; opacity: 0; pointer-events: none;
}
.lb-chip span {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  border: 1px solid var(--hairline-strong);
  padding: 1rem 1.15rem;
  font-size: 0.92rem; line-height: 1.4;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.lb-chip small { font-size: 0.78rem; color: var(--ink-muted); white-space: nowrap; }
.lb-chip:hover span { border-color: var(--ink); }
.lb-chip input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ink-inverse);
}
.lb-chip input:checked + span small { color: var(--accent-soft); }
.lb-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
 
.lb-fair { margin-top: 0.5rem; }
 
/* Wizard-Navigation */
.lb-wizard__nav {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 2.25rem;
}
.lb-wizard__btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--ff-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 1.05rem 2.5rem;
  cursor: pointer;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
              color 0.35s var(--ease), gap 0.35s var(--ease);
}
.lb-wizard__btn--solid {
  color: var(--ink-inverse);
  background: var(--ink);
  border: 1px solid var(--ink);
}
.lb-wizard__btn--solid:hover { background: var(--ink-soft); border-color: var(--ink-soft); gap: 1.1rem; }
.lb-wizard__btn--ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline-strong);
}
.lb-wizard__btn--ghost:hover { border-color: var(--ink); }
.lb-wizard__nav .kontakt-form__submit { margin-top: 0; }
 
@media (max-width: 700px) {
  .lb-chips { grid-template-columns: 1fr 1fr; }
  .lb-wizard__prog-label { display: none; }
}
@media (max-width: 480px) {
  .lb-chips { grid-template-columns: 1fr; }
  .lb-wizard__nav { flex-wrap: wrap; }
}

/* ---- Landing-Page-Hero (Lagerboote + Gebrauchtboote, Muster: kontakt-hero) ---- */
.lp-hero {
  position: relative;
  min-height: clamp(420px, 56vh, 620px);
  display: flex;
  align-items: center;
  color: var(--ink-inverse);
  overflow: hidden;
  background: var(--ink);
}
.lp-hero__media { position: absolute; inset: 0; z-index: 0; }
.lp-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05);
  animation: heroZoom 16s var(--ease-out) forwards;
}
.lp-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,27,41,0.72) 0%, rgba(13,27,41,0.4) 45%, rgba(13,27,41,0.88) 100%);
}
.lp-hero__content {
  position: relative; z-index: 2;
  width: 100%; text-align: center;
  padding-block: clamp(2rem, 5vh, 3.5rem);
}
.lp-hero__content .eyebrow { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.lp-hero__title {
  font-family: var(--ff-serif); font-weight: 300;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: 1.03; letter-spacing: -0.02em;
  color: var(--ink-inverse);
  max-width: 18ch; margin: 0 auto 1.5rem;
}
.lp-hero__sub {
  font-family: var(--ff-serif); font-style: italic;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.55;
  color: rgba(242, 237, 226, 0.82);
  max-width: 52ch; margin: 0 auto;
}

/* ==========================================================
   NAV: Einfache Dropdowns (Service, Team) + 4-spaltiges
   Flotte-Panel mit Angebote-Spalte  [Feedback Chiara 1.1]
   ========================================================== */

.nav__item--dd { position: relative; }

.nav__item--dd > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav__item--dd:hover .nav__caret,
.nav__item--dd:focus-within .nav__caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav__item--dd:hover .nav__dropdown,
.nav__item--dd:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav__dropdown--simple {
  min-width: 190px;
  padding: 1.15rem 1.5rem 1.25rem;
}

.nav__dropdown--simple ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.nav__dropdown--simple a {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-inverse);
  opacity: 0.8;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.nav__dropdown--simple a:hover,
.nav__dropdown--simple a:focus-visible { opacity: 1; }

/* Flotte-Panel: vierte Spalte (Angebote) */
.nav__dropdown-inner { grid-template-columns: repeat(4, 1fr); }
.nav__item--fleet .nav__dropdown { min-width: 730px; }

/* ==========================================================
   FOOTER: Newsletter-Anmeldung 
   ========================================================== */

.footer__newsletter {max-width: 320px; }

.footer__newsletter h5 {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  opacity: 0.65;
}

.footer__newsletter-text {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.7;
  margin: 0 0 0.9rem;
}

.footer__newsletter-form {
  display: flex;
  border: 1px solid var(--hairline-light);
}

.footer__newsletter-form:focus-within {
  border-color: rgba(242, 237, 226, 0.45);
}

.footer__newsletter-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0.7rem 0.9rem;
  font-family: var(--ff-sans);
  font-size: 13px;
  color: inherit;
}

.footer__newsletter-form input::placeholder { color: inherit; opacity: 0.45; }
.footer__newsletter-form input:focus { outline: none; }

.footer__newsletter-form button {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--hairline-light);
  padding: 0.7rem 1.1rem;
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.footer__newsletter-form button:hover,
.footer__newsletter-form button:focus-visible {
  background: var(--accent, #b08d57);
  color: var(--ink, #0d1b2a);
}

.fleet-card { position: relative; }
 
.fleet-card__action:not(.fleet-card__action--ghost)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
 
.fleet-card__action--ghost {
  position: relative;
  z-index: 4;
}

/* ============================================================
   LIGHTBOX — Bildergalerie-Overlay (Modellseiten)
   ============================================================ */
.ydp-lb-lock { overflow: hidden; }

/* Klickbare Bilder signalisieren */
.ydp-gallery__item img,
.ydp-layouts__stage img,
.ydp-config__visual img { cursor: zoom-in; }

.ydp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.28s var(--ease-out);
}
.ydp-lightbox.is-open { opacity: 1; }
.ydp-lightbox[hidden] { display: none; }

.ydp-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 41, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}

.ydp-lightbox__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
}
.ydp-lightbox__counter {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}
.ydp-lightbox__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.ydp-lightbox__close svg { width: 18px; height: 18px; }
.ydp-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: rotate(90deg);
}

.ydp-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(13, 27, 41, 0.35);
  color: #fff;
  cursor: pointer;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.ydp-lightbox__arrow svg { width: 22px; height: 22px; }
.ydp-lightbox__arrow:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}
.ydp-lightbox__arrow--prev { left: clamp(0.75rem, 2.5vw, 2rem); }
.ydp-lightbox__arrow--next { right: clamp(0.75rem, 2.5vw, 2rem); }

.ydp-lightbox__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: min(88vw, 1400px);
  margin: 0;
  pointer-events: none;
}
.ydp-lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.ydp-lightbox:not(.is-open) .ydp-lightbox__img { transform: scale(0.96); opacity: 0; }
.ydp-lightbox__img.is-out-left  { opacity: 0; transform: translateX(-24px); }
.ydp-lightbox__img.is-out-right { opacity: 0; transform: translateX(24px); }

.ydp-lightbox__caption {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-align: center;
  max-width: 60ch;
  min-height: 1.2em;
}

@media (max-width: 720px) {
  .ydp-lightbox__arrow {
    top: auto;
    bottom: clamp(1rem, 4vh, 2rem);
    transform: none;
    width: 46px;
    height: 46px;
    background: rgba(13, 27, 41, 0.55);
  }
  .ydp-lightbox__img { max-height: 66vh; max-width: 94vw; }
  .ydp-lightbox__caption { padding: 0 1.25rem; font-size: 0.8rem; }
}

/* ============================================================
   STORY-SEITE: 67-Shooting (Film, Fakten, Pull-Quote)
   Ans Ende von main.css anhängen
   ============================================================ */

/* Poster hinter der Video-Fassade */
.ydp-video__frame .story-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Fakten-Strip zum Shooting */
.story-facts {
  padding: clamp(3rem, 6vh, 4.5rem) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.story-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  text-align: center;
}
.story-facts__val {
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.story-facts__label {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 700px) {
  .story-facts__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; }
}

/* Pull-Quote (Kampagnen-Claim) */
.story-quote {
  padding: clamp(4.5rem, 9vh, 7rem) 0;
}
.story-quote__text {
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--ink);
  max-width: 26ch;
  margin: 0 auto;
}
.story-quote__text em {
  font-style: italic;
  color: var(--accent);
}

/* ---------- Modellseiten: Galerie als horizontaler Scroller ---------- */
.ydp-gallery__controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-bottom: clamp(1.25rem, 2.5vh, 2rem);
}

.ydp-gallery__btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s;
}

.ydp-gallery__btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.ydp-gallery__btn:disabled { opacity: 0.25; cursor: default; }
.ydp-gallery__btn svg { display: block; }
.ydp-gallery__btn--prev svg { transform: rotate(180deg); }

/* Scroller bricht wie das Events-Karussell aus dem Container aus */
.ydp-gallery__scroller {
  --ydpg-pad: calc(max((100vw - 1440px) / 2, 0px) + clamp(1.5rem, 4vw, 4rem));
  margin-inline: calc(-1 * var(--ydpg-pad));
  padding-inline: var(--ydpg-pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ydpg-pad);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}

.ydp-gallery__scroller::-webkit-scrollbar { display: none; }

/* Grid-Klasse bleibt erhalten (Lightbox-Delegation!), wird hier zum Flex-Track */
.ydp-gallery--scroller .ydp-gallery__grid {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: max-content;
}

/* Einheitliche Höhe, Breite ergibt sich aus dem Seitenverhältnis */
.ydp-gallery--scroller .ydp-gallery__item {
  flex: 0 0 auto;
  height: clamp(300px, 55vh, 540px);
  width: auto;
  max-width: 88vw;
  aspect-ratio: 3 / 2;
  scroll-snap-align: start;
}

.ydp-gallery--scroller .ydp-gallery__item--wide {
  grid-column: auto;          /* neutralisiert die Grid-Regel der Standard-Galerie */
  aspect-ratio: 16 / 9;
}

.ydp-gallery__progress {
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
  height: 1px;
  background: var(--hairline);
}

.ydp-gallery__progress-bar {
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.15s linear;
}

@media (max-width: 720px) {
  .ydp-gallery__controls { display: none; } /* mobil: natives Touch-Scrolling */

  /* mobil breitengetrieben, sonst kippen die Karten ins Hochformat */
  .ydp-gallery--scroller .ydp-gallery__item,
  .ydp-gallery--scroller .ydp-gallery__item--wide {
    height: auto;
    width: 86vw;
    max-width: none;
    aspect-ratio: 3 / 2;
  }
}

/* ---------- Galerie-Scroller: Kopfzeile mit Label, Buttons links ---------- */
.ydp-gallery__head {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: clamp(1.25rem, 2.5vh, 2rem);
}

.ydp-gallery__head .eyebrow { margin: 0; }

.ydp-gallery__head .ydp-gallery__controls {
  justify-content: flex-start;
  margin-bottom: 0;
}

/* ===== Append: Footer Newsletter (im Grid, unter Service/Home) ===== */
.footer__newsletter {
  grid-column: 3 / 5;
  grid-row: 2;
  align-self: start;
}

/* Brand- und Flotten-Spalte spannen ueber beide Zeilen,
   damit die zweite Zeile direkt unter Service/Home beginnt */
.footer__top > :nth-child(1),
.footer__top > :nth-child(2) { grid-row: 1 / 3; }

.footer__newsletter h5 {
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 1rem;
}

.footer__newsletter-text {
  font-size: 0.9rem;
  color: rgba(242, 237, 226, 0.7);
  line-height: 1.6;
  max-width: 40ch;
  margin-bottom: 1.25rem;
}

.footer__newsletter-form {
  display: flex;
  max-width: 420px;
  border: 1px solid var(--hairline-light);
  transition: border-color 0.3s var(--ease);
}
.footer__newsletter-form:focus-within { border-color: var(--accent-soft); }

.footer__newsletter-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0.85rem 1.1rem;
  color: var(--ink-inverse);
  font-family: var(--ff-sans);
  font-size: 0.88rem;
}
.footer__newsletter-form input::placeholder { color: rgba(242, 237, 226, 0.45); }
.footer__newsletter-form input:focus { outline: none; }

.footer__newsletter-form button {
  flex-shrink: 0;
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
  background: var(--signal);
  border: 0;
  padding: 0 1.5rem;
  cursor: pointer;
  transition: background 0.35s var(--ease);
}
.footer__newsletter-form button:hover { background: var(--signal-hover); }

@media (max-width: 900px) {
  .footer__top > :nth-child(1),
  .footer__top > :nth-child(2) { grid-row: auto; }
  .footer__newsletter { grid-column: auto; grid-row: auto; }
  .footer__newsletter-form { max-width: none; }
}

/* ============================================================
   NAV: SPRACHAUSWAHL AUF MOBILE (neben dem Burger-Toggle)
   (ans Ende von main.css anhängen)
   ============================================================ */
@media (max-width: 1024px) {
  /* Dropdown-Variante wieder einblenden — überschreibt .nav__lang { display: none } */
  .nav__actions .nav__lang--dropdown { display: flex; }

  /* Etwas kompakter neben dem Burger */
  .nav__actions { gap: 0.9rem; }
  .nav__lang-toggle { padding: 0.4rem 0.35rem; }

  /* Menü rechtsbündig unter dem Toggle, nie breiter als der Viewport */
  .nav__lang-menu {
    top: calc(100% + 12px);
    max-width: calc(100vw - 2rem);
  }
  .nav__lang-menu::before { top: -12px; height: 12px; }

  /* Logo darf neben Sprachauswahl + Burger schrumpfen (kein Overflow) */
  .nav__inner { gap: 1rem; }
  .nav__logo { min-width: 0; }
  .nav__logo img { max-width: 100%; height: auto; max-height: 60px; }
}

@media (max-width: 380px) {
  /* Sehr schmale Geräte: Chevron weglassen, Flagge + Code reichen */
  .nav__lang-chevron { display: none; }
  .nav__actions { gap: 0.7rem; }
}

/* ============================================================
   SERVICE MAP: Subdealer-Marker („R")
   (ans Ende von main.css anhängen)
   ============================================================ */
.smap__rdot {
  fill: var(--bg);
  stroke: var(--ink);
  stroke-width: 1.5;
}
.smap__r {
  fill: var(--ink);
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}
.smap__pin--sub:hover .smap__rdot { fill: var(--bg-subtle); }

.smap__rdot--legend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
}

@media (max-width: 700px) {
  .smap__r { font-size: 12px; }
}


/* ==========================================================
   NAV: Cranchi-Dropdown — Panel-Titel "Die Flotte"
   (Ans ENDE von main.css anhängen)
   ========================================================== */
.nav__dropdown-title {
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink-inverse);
  margin: 0 0 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hairline-light);
}

/* ==========================================================
   BROKERAGE-SEITE (brokerage.php)
   ========================================================== */

/* ---- Partnerwerften ---- */
.brok-brands {
  padding: clamp(4rem, 9vh, 7rem) 0 clamp(3rem, 6vh, 5rem);
  border-top: 1px solid var(--hairline);
}
.brok-brands__head { margin-bottom: clamp(2rem, 4vh, 3rem); }
.brok-brands__head .eyebrow { margin-bottom: 1.25rem; }

.brok-brands__index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  padding: 1.1rem 0;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.brok-brands__index a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.3s;
}
.brok-brands__index a:hover,
.brok-brands__index a:focus-visible { opacity: 1; }

.brok-brand {
  position: relative;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vh, 4rem) 0;
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.brok-brand:last-of-type { border-bottom: 0; }
/* jede zweite Werft: Bild rechts */
.brok-brand:nth-of-type(even) .brok-brand__media { order: 2; }

.brok-brand__no {
  position: absolute;
  top: clamp(1.5rem, 3vh, 2.4rem);
  right: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
}

.brok-brand__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-subtle);
}
.brok-brand__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out);
}
.brok-brand:hover .brok-brand__media img { transform: scale(1.06); }

.brok-brand__logo {
  height: 34px;
  margin-bottom: 1.4rem;
}
.brok-brand__logo img {
  height: 100%;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  object-position: left center;
}

.brok-brand__name {
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.brok-brand__seo {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.4rem;
}
.brok-brand__seo span { margin: 0 0.4rem; opacity: 0.5; }
.brok-brand__text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 1.8rem;
}
.brok-brand__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem 1.8rem;
}

/* ---- Ablauf ---- */
.brok-how {
  background: var(--bg-subtle);
  padding: clamp(4rem, 9vh, 7rem) 0;
}
.brok-how__head { margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.brok-how__head .eyebrow { margin-bottom: 1.25rem; }
.brok-how__steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.brok-how__step {
  padding: 1.8rem 1.6rem 0 0;
  border-top: 1px solid var(--ink);
  margin-top: -1px;
}
.brok-how__step + .brok-how__step { padding-left: 1.6rem; border-left: 1px solid var(--hairline); }
.brok-how__num {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  margin-bottom: 1.2rem;
}
.brok-how__step h3 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.brok-how__step p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .brok-how__steps { grid-template-columns: repeat(2, 1fr); }
  .brok-how__step { padding-bottom: 2rem; }
  .brok-how__step:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .brok-brand { grid-template-columns: 1fr; gap: 1.6rem; }
  .brok-brand:nth-of-type(even) .brok-brand__media { order: 0; }
  .brok-brand__no { top: 0.9rem; }
  .brok-brand__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .brok-how__steps { grid-template-columns: 1fr; }
  .brok-how__step + .brok-how__step { padding-left: 0; border-left: 0; }
  .brok-brands__index { gap: 0.6rem 1.4rem; }
}

/* YouTube-iframe in der Portrait-Bühne */
.story-stage__iframe {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   360°-TOUR (Modellseiten) — ans Ende von main.css anhängen
   ============================================================ */
.ydp-tour {
  padding: clamp(5rem, 10vh, 8rem) 0;
  border-top: 1px solid var(--hairline);
}
.ydp-tour__head { max-width: 640px; margin-bottom: 2.25rem; }
.ydp-tour__head .eyebrow { margin-bottom: 1.1rem; }
.ydp-tour__text { margin-top: 1rem; color: var(--ink-soft); max-width: 52ch; }
.ydp-tour__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.ydp-tour__poster,
.ydp-tour__iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  object-fit: cover;
}
@media (max-width: 700px) {
  .ydp-tour__frame { aspect-ratio: 4 / 5; }
}

/* ============================================================
   NEWSLETTER: Zoho Campaigns (Consent-Zeile + Danke-Seite)
   ============================================================ */
.footer__newsletter-consent {
  margin-top: 0.75rem;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-inverse);
  opacity: 0.6;
}
.footer__newsletter-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.3s var(--ease);
}
.footer__newsletter-consent a:hover { opacity: 1; }

.nl-thanks .legal__head h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.nl-thanks__hint  { color: var(--ink-muted); }
.nl-thanks__actions { margin-top: 2.5rem; }

/* Lightbox: Bildunterschrift ausblenden */
.ydp-lightbox__caption { display: none; }