/* ==========================================================================
   Uncle & Nephew Agency — gemeinsames Stylesheet
   Farbwelt „Schiefer“: #2B3138 / #232930, Off-White #EEF0F2, Messing #C2A36B
   ========================================================================== */

/* ---- Schriften (lokal, variable Fonts) ---- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
}

/* ---- Basis ---- */
:root {
  --slate: #2B3138;
  --slate-deep: #232930;
  --offwhite: #EEF0F2;
  --offwhite-70: #EEF0F2B3;
  --offwhite-50: #EEF0F280;
  --offwhite-15: #EEF0F226;
  --offwhite-cc: #EEF0F2CC;
  --brass: #C2A36B;
  --brass-25: #C2A36B40;
  --panel-bg: #EEF0F208;
  --brick: #3A424C;
  --dash-border: #2F363E;
  /* Fließtext: eine Basisgröße, alle Stufen proportional daran — die ganze
     Textgröße der Website stellt man nur über --text-l (Überschriften,
     Navigation, Labels, Buttons und Chips hängen bewusst nicht daran).
     1.125rem = 18px, vorher 16.5px (≈ +9 %); die Faktoren entsprechen den
     früheren px-Abstufungen (15.5/15/14.5/13.5/13/12 zu 16.5). */
  --text-l: 1.125rem;
  --text-m: calc(var(--text-l) * 0.94);
  --text-s: calc(var(--text-l) * 0.91);
  --text-xs: calc(var(--text-l) * 0.88);
  --text-2xs: calc(var(--text-l) * 0.82);
  --text-caption: calc(var(--text-l) * 0.79);
  --text-note: calc(var(--text-l) * 0.73);
}

html, body { margin: 0; padding: 0; background: var(--slate); }
body {
  font-family: 'Archivo', ui-sans-serif, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--offwhite);
}
* { box-sizing: border-box; }
a { color: var(--offwhite); text-decoration: none; }
a:hover { color: var(--brass); }
img { max-width: 100%; }

.serif-accent {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
}

/* ---- Keyframes (aus dem Entwurf) ---- */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drawloop {
  0% { stroke-dashoffset: 1; opacity: 1; }
  55% { stroke-dashoffset: 0; opacity: 1; }
  86% { stroke-dashoffset: 0; opacity: 1; }
  94% { opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes dashmove { to { stroke-dashoffset: -56; } }
@keyframes blink { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes roam {
  0%, 100% { transform: translate(10px, 12px); }
  35% { transform: translate(36px, 8px); }
  70% { transform: translate(22px, 26px); }
}
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0% 0); } }
@keyframes wipeup { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- Header / Navigation ---- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding: 24px 6vw;
}
.brand {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--offwhite);
}
/* Unterseiten: Zusatzzeile „Startseite" unter der Wortmarke. Die Wortmarke
   ist dafür minimal kleiner (16 statt 17 px); die symmetrischen negativen
   Außenabstände gleichen die Höhe der Zusatzzeile aus, sodass die Layout-
   Höhe der alten einzeiligen Wortmarke entspricht und der Header auf keiner
   Breite wächst — auch nicht, wenn er unter 1050 px umbricht (die Zeile ragt
   dann in den leeren Zeilenzwischenraum). align-items: center im Header
   zentriert beide Zeilen zusammen vertikal. */
.brand-sub { font-size: 16px; margin: -8.06px 0; }
.brand-sub .brand-main { display: block; line-height: 1.15; }
.brand-home {
  display: block;
  margin-top: 2px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.95em;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--offwhite-70);
}
.brand:hover .brand-home { color: var(--brass); }
.brand .amp,
.footer-brand .amp {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
}
.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}
/* Textlinks der Navigation — der Button „Objekt anfragen" ist ausgenommen,
   damit .btn-primary seine eigene Schriftfarbe behält (sonst überschreibt
   .site-nav a die Buttonfarbe: helle Schrift auf hellem Grund) */
.site-nav a:not(.btn-primary) { color: var(--offwhite-cc); }
.site-nav a:not(.btn-primary):hover { color: var(--brass); }
.site-nav a[aria-current="page"] { color: var(--brass); }

/* ---- Ausklappmenü „Leistungen“ ----
   Desktop: Überfahren oder Tastaturfokus klappt das Untermenü aus (Schiefer-
   Fläche mit feiner Messing-Linie oben, sanftes Einblenden); „Leistungen“
   selbst bleibt klickbar zur Übersicht. Mobil (< 721 px): Chevron-Button
   klappt die Liste im Menü auf. ARIA und Escape übernimmt js/main.js. */
.nav-item { position: relative; display: flex; align-items: center; gap: 6px; }
.subnav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 4px;
  color: var(--offwhite-cc);
  cursor: pointer;
}
.subnav-toggle svg { display: block; transition: transform .3s ease; }
.subnav-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.nav-item.is-open .subnav-toggle svg { transform: rotate(180deg); }
.subnav {
  position: absolute;
  top: calc(100% + 14px);
  left: -22px;
  min-width: 250px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 12px 0 14px;
  background: var(--slate-deep);
  border-top: 1px solid var(--brass);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
/* unsichtbare Brücke zwischen Link und Fläche, damit der Hover beim
   Herunterfahren mit der Maus nicht abreißt */
.subnav::before { content: ''; position: absolute; left: 0; right: 0; top: -15px; height: 15px; }
.nav-item.is-open .subnav {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .35s ease, transform .35s ease;
}
@media (hover: hover) {
  .nav-item:hover .subnav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .35s ease, transform .35s ease;
  }
}
.subnav a { padding: 9px 22px; font-size: 13.5px; }
@media (max-width: 720px) {
  /* Der absolut positionierte Header wächst mit geöffnetem Untermenü über
     den Hero-Text — eine eigene Fläche hält die Navigation lesbar */
  .site-header:has(.nav-item.is-open) {
    background: var(--slate);
    border-bottom: 1px solid var(--offwhite-15);
  }
  .nav-item { flex-wrap: wrap; }
  .nav-item.is-open { flex-basis: 100%; }
  .subnav-toggle { display: inline-flex; }
  .subnav {
    position: static;
    display: none;
    min-width: 0;
    width: 100%;
    margin-top: 8px;
    padding: 10px 16px 12px;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    transition: none;
  }
  .subnav::before { display: none; }
  .nav-item.is-open .subnav { display: flex; }
  .subnav a { padding: 8px 0; }
}

/* ---- Buttons ---- */
.btn-primary {
  display: inline-block;
  background: var(--offwhite);
  color: var(--slate);
  padding: 14px 26px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: background .4s ease;
}
/* Hover bewusst mit Schiefer- statt Off-White-Schrift: Off-White auf Messing
   erreicht nur ≈2,1:1 Kontrast, Schiefer auf Messing ≈5,5:1 (WCAG ≥4,5:1) */
.btn-primary:hover { background: var(--brass); color: var(--slate); }
.btn-primary:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}
.btn-nav { padding: 10px 18px; font-size: 13.5px; }
.btn-cta { padding: 15px 32px; }
.btn-secondary {
  display: inline-block;
  border: 1px solid #EEF0F266;
  color: var(--offwhite);
  padding: 13px 26px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: border-color .4s ease, color .4s ease;
}
.btn-secondary:hover { border-color: var(--brass); color: var(--brass); }

/* ---- Hero (Startseite) ---- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--slate);
  padding: 170px 6vw 110px;
}
.brick-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  animation: wipeup 9s steps(20) both;
}
.hero-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 64px 72px;
  max-width: 1340px;
  margin: 0 auto;
}
.hero-copy { flex: 1 1 480px; min-width: 300px; }
.kicker {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--brass);
}
.hero h1 {
  margin: 18px 0 0;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.015em;
}
.typewriter {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 28px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--offwhite-15);
  max-width: 480px;
  min-height: 24px;
}
.typewriter .typed {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  color: var(--brass);
  white-space: nowrap;
  overflow: hidden;
}
.typewriter .caret {
  flex: 0 0 1px;
  width: 1px;
  height: 20px;
  background: var(--brass);
  animation: blink 1.1s step-end infinite;
}
.hero-lead {
  margin: 26px 0 0;
  max-width: 560px;
  font-size: var(--text-l);
  line-height: 1.65;
  color: var(--offwhite-70);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 34px 0 0;
}

/* ---- Leistungs-Panels (animiert) ---- */
.panel-grid {
  flex: 1 1 460px;
  min-width: 290px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 16px;
}
.panel {
  position: relative;
  display: block;
  padding: 22px 22px 24px;
  border: 1px solid var(--brass-25);
  background: var(--panel-bg);
  color: var(--offwhite);
  cursor: pointer;
  transition: transform .5s ease, border-color .5s ease;
}
.panel:hover { transform: translateY(-3px); border-color: var(--brass); color: var(--offwhite); }
.panel:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}
.panel-more {
  display: block;
  margin-top: 14px;
  text-align: right;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 15.5px;
  color: var(--brass);
  transition: transform .4s ease;
}
.panel:hover .panel-more,
.panel:focus-visible .panel-more { transform: translateX(5px); }
.panel-dash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.panel-dash rect {
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  animation: dashmove 16s linear infinite;
}
.panel-title { font-weight: 600; font-size: 16px; margin-top: 14px; }
.panel-text {
  font-size: var(--text-2xs);
  line-height: 1.55;
  color: var(--offwhite-70);
  margin-top: 6px;
}
.anim-draw { animation: draw 2.4s ease .4s forwards; }
.anim-roam { animation: roam 14s ease-in-out infinite; }

/* Leistungsübersicht: dieselben Panels als große Kacheln, 2×2 auf dem
   Desktop, untereinander auf schmalen Viewports */
.panel-grid-large {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 18px;
}
.panel-large { padding: 30px 30px 32px; }
.panel-large .panel-title { font-size: 18px; margin-top: 18px; }
.panel-large .panel-text { font-size: var(--text-xs); }
.panel-large .panel-more { font-size: 17px; margin-top: 18px; }

/* Leistungsübersicht: Block „Ergänzend“ — drei Zeilen im Listenstil */
.addon-list { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.addon-list li {
  position: relative;
  padding: 16px 0 16px 26px;
  border-bottom: 1px solid var(--offwhite-15);
  font-size: var(--text-m);
  line-height: 1.6;
  color: var(--offwhite-70);
}
.addon-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 26px;
  width: 12px;
  height: 2px;
  background: var(--brass);
}
.addon-list a { color: var(--offwhite); }
.addon-list a:hover { color: var(--brass); }
.addon-list .addon-more {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--brass);
}

/* ---- Unterseiten-Kopf ---- */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--slate);
  padding: 170px 6vw 90px;
}
.page-hero-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}
.page-hero h1 {
  margin: 18px 0 0;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 900px;
}
.page-hero .hero-lead { max-width: 720px; }

/* ---- Abschnitte ---- */
.section { padding: 110px 6vw; background: var(--slate); }
.section.alt { background: var(--slate-deep); }
/* Sektion direkt unter dem Rundgang: Überschrift liegt im Band darüber,
   deshalb kein oberes Padding — die Trennlinie folgt im normalen
   Überschrift-zu-Linie-Abstand (36px aus .scrollline).
   flow-root hält den Top-Margin der Trennlinie IN der Sektion: ohne
   Padding würde er nach außen kollabieren und eine Lücke aufreißen,
   in der der hellere body-Hintergrund als Streifen durchscheint. */
.section.flush-top { padding-top: 0; display: flow-root; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-kicker {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--brass);
}
.section h2 {
  margin: 12px 0 0;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.section h3 { margin: 0; font-weight: 600; font-size: 17px; }
.section p { font-size: var(--text-l); line-height: 1.7; color: var(--offwhite-70); }
.accent-line {
  margin: 22px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--brass);
}

/* Trennlinie, die sich beim Scrollen füllt */
.scrollline {
  position: relative;
  height: 2px;
  background: var(--offwhite-15);
  margin: 36px 0 42px;
}
.scrollline.mt-lg { margin: 48px 0 44px; }
.scrollline-fill {
  position: absolute;
  inset: 0;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s linear;
}

/* Zweispaltiger Fließtext */
.two-col { display: flex; flex-wrap: wrap; gap: 36px 64px; }
.two-col > * { flex: 1 1 380px; margin: 0; }

/* ---- Karten & Listen ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
}
.card {
  border: 1px solid var(--offwhite-15);
  padding: 30px 28px;
  transition: border-color .5s ease;
  display: block;
  color: var(--offwhite);
}
.card:hover { border-color: var(--brass); color: var(--offwhite); }
.card p { margin: 12px 0 0; font-size: var(--text-s); line-height: 1.65; color: var(--offwhite-70); }
.card .card-more {
  display: inline-block;
  margin-top: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--brass);
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
}
.step-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 34px;
  color: var(--brass);
}
.step-grid h3 { margin-top: 10px; }
.step-grid p { margin: 8px 0 0; font-size: var(--text-s); line-height: 1.65; }

/* Ablauf (Startseite): Linienmotive über den Schrittnummern. Sie zeichnen sich
   einmal, sobald die sich füllende Trennlinie den Schritt erreicht (js/main.js
   setzt .is-done — die Klasse wird nie entfernt, beim Zurückscrollen bleibt
   alles stehen). Bis dahin ist die Nummer gedämpft, danach Messing. */
.step-motif { display: block; width: 120px; height: 64px; margin-bottom: 16px; }
.step-motif path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.step.is-done .step-motif path { animation: draw .9s ease var(--d, 0s) forwards; }
.step-motif .motif-dot { opacity: 0; transition: opacity .8s ease .8s; }
.step.is-done .motif-dot { opacity: .8; }
#ablauf .step-num { color: var(--offwhite-50); transition: color 1.1s ease; }
#ablauf .step.is-done .step-num { color: var(--brass); }

/* Aufzählungen im Entwurfsstil */
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px 32px;
}
.feature-list li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--offwhite-15);
  font-size: var(--text-m);
  line-height: 1.55;
  color: var(--offwhite-70);
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  width: 12px;
  height: 2px;
  background: var(--brass);
}

/* ---- Bildplatzhalter (Optik wie <image-slot> im Entwurf) ---- */
.image-slot {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 180px;
  background: rgba(127, 127, 127, .08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 18px;
  user-select: none;
}
.image-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1.5px dashed currentColor;
  opacity: .35;
}
.image-slot svg { opacity: .45; flex: 0 0 auto; }
.image-slot .slot-caption {
  max-width: 90%;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: .01em;
  opacity: .75;
}
.image-slot .slot-meta { font-size: 11px; opacity: .55; }

.media-band { background: var(--slate); line-height: 0; }
.media-band .media-frame { position: relative; width: 100%; aspect-ratio: 21/9; min-height: 220px; }

/* Startseite: der Rundgang trägt den Sektionstitel — etwas höher, damit der
   Titel im unteren Viertel über dem Drahtmodell steht */
@media (min-width: 640px) {
  .media-band .media-frame[data-media="3d"],
  .media-band .media-frame[data-media="video"] { min-height: 80vh; }
}

/* Der weiche Verlauf unter dem Titel steckt in der mask-image der
   .rundgang-media (siehe oben): Linien dunkeln zur Sektionsfarbe ab und
   laufen kantenlos aus — ein eigenes Overlay-Element würde die Fläche
   durch Gradient-Dithering minimal aufrauen. */

/* Sektionstitel bewusst über dem Rundgang: sitzt an der Canvas-Unterkante und
   im selben Container-Raster wie Trennlinie und Fließtext der Folgesektion,
   sodass er wie deren Überschrift wirkt — nur mit dem Rundgang als Hintergrund */
.media-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 0 6vw;
  line-height: 1.2;
  text-shadow: 0 2px 18px var(--slate-deep), 0 1px 3px var(--slate-deep);
}
.media-title-inner { max-width: 1100px; margin: 0 auto; }
.media-title .section-kicker { line-height: 1.3; }
.media-title h2 {
  margin: 12px 0 0;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* 3D-Rundgang bzw. Video im 21:9-Band (js/rundgang.js) */
/* Kantenloser Übergang: das Rundgang-Band trägt exakt die Sektionsfarbe der
   Folgesektion (--slate-deep) — keine eigene Tönung, kein Border, kein Shadow */
.media-band-rundgang { background: var(--slate-deep); }
.media-frame .rundgang-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Drahtmodell-Linien lösen sich im unteren Drittel weich in den
     Sektionshintergrund auf und dunkeln unter dem Titel ab (ersetzt den
     früheren ::after-Verlauf: dessen Alpha-Rampe wurde vom Rasterizer
     gedithert und hinterließ ±1/255-Rauschen auf der Fläche — die Maske
     auf dem Canvas hat exakt denselben visuellen Effekt, lässt die
     Fläche aber unangetastet) */
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, rgba(0, 0, 0, .55) 80%, rgba(0, 0, 0, .15) 90%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 64%, rgba(0, 0, 0, .55) 80%, rgba(0, 0, 0, .15) 90%, transparent 98%);
}
.media-frame.is-live .image-slot { display: none; }

.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 32px;
}
.figure-grid figure { margin: 0; }
.figure-frame {
  aspect-ratio: 4/5;
  border: 1px dashed var(--dash-border);
  padding: 6px;
}
.figure-grid figcaption {
  margin-top: 12px;
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--offwhite-70);
}

/* ---- Vorher/Nachher-Schieber (Startseite, Sektion „Ergebnis“) ----
   Zwei deckungsgleiche Ebenen; die Nachher-Ebene liegt oben und wird links
   der Trennlinie per clip-path freigeschnitten. --p (0–100 %) steuert
   Trennlinie, Griff und Beschnitt gemeinsam (js/main.js). */
.ba-slider {
  --p: 50%;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--slate-deep);
  cursor: ew-resize;
  touch-action: pan-y; /* horizontal wischen steuert den Griff, vertikal scrollt die Seite */
  user-select: none;
  -webkit-user-select: none;
}
.ba-slider:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.ba-layer { position: absolute; inset: 0; }
.ba-layer .ba-art,
.ba-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ba-layer img { object-fit: cover; }
.ba-layer.has-img .ba-art { display: none; }
.ba-after { clip-path: inset(0 0 0 var(--p)); }
.ba-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  background: rgba(35, 41, 48, 0.78);
  border: 1px solid var(--brass-25);
}
.ba-after .ba-label { left: auto; right: 12px; }
.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--p);
  width: 2px;
  margin-left: -1px;
  background: var(--brass);
  z-index: 3;
  pointer-events: none;
}
.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brass);
  background: rgba(35, 41, 48, 0.85);
  border: 1px solid var(--brass);
}

/* ---- Exposé-Blätterer (Startseite, Sektion „Ergebnis“) ----
   Drei Seiten übereinander; die aktive schiebt sich nach links hinaus, die
   nächste kommt von rechts. Übergänge liegen nur auf .is-active/.is-out,
   damit wartende Seiten ohne sichtbare Fahrt zurückspringen. */
.expo-pager {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--slate-deep);
}
.expo-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 7%, 30px);
  background: #2A313A;
  transform: translateX(103%);
}
.expo-page.is-active { transform: none; transition: transform 1.1s cubic-bezier(.33, 0, .18, 1); }
.expo-page.is-out { transform: translateX(-103%); transition: transform 1.1s cubic-bezier(.33, 0, .18, 1); }
.expo-img {
  position: relative;
  background: rgba(238, 240, 242, 0.05);
  border: 1px dashed var(--dash-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--offwhite-70);
}
.expo-img svg { opacity: .4; }
.expo-hero { flex: 1 1 52%; min-height: 0; margin-bottom: 16px; }
.expo-kicker {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--brass);
}
.expo-title { margin-top: 3px; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.expo-facts { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12.5px; }
.expo-facts li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--offwhite-15);
  color: var(--offwhite-70);
}
.expo-facts li:last-child { border-bottom: 0; }
.expo-facts li span:last-child { color: var(--offwhite); }
.expo-plan { width: 100%; flex: 1 1 auto; min-height: 0; margin-top: 14px; }
.expo-note { margin-top: auto; padding-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--offwhite-50); }
.expo-photo-grid {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.expo-count {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 2;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--brass);
}
.expo-page-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Inhaber-Block (ueber-uns.html) ---- */
.owners-block { margin-top: 44px; }
.owners-grid { display: grid; gap: 32px 24px; margin-top: 24px; }
.owner-col { margin: 0; }
.owner-caption { display: block; margin-top: 14px; }
.owner-name {
  display: block;
  font-weight: 600;
  font-size: 17px;
  color: var(--offwhite);
}
.owner-role { display: block; margin-top: 4px; font-size: 14px; color: var(--offwhite-70); }
.owner-bio {
  display: block;
  margin-top: 10px;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--offwhite-70);
}
/* Logo-Platzhalter quer 3:1; Icon entfällt, damit die Beschriftung in das
   flache Format passt */
.owners-logo-frame { aspect-ratio: 3/1; padding: 4px; }
.owners-logo-frame .image-slot { min-height: 0; padding: 6px 10px; gap: 3px; }
.owners-logo-frame .image-slot svg { display: none; }
.owners-logo-frame .slot-caption { font-size: 9px; line-height: 1.3; }
.owners-logo-frame .slot-meta { font-size: 8.5px; }
/* Desktop: Porträt | Logo quer | Porträt. Die Figuren lösen sich per
   display:contents ins Raster auf — Rahmen in Zeile 1 (Logo exakt vertikal
   mittig zwischen den Porträts), Namenszeilen in Zeile 2 unter ihrem Foto.
   Spaltenverhältnis 2.25fr/1fr/2.25fr: Porträts bleiben so breit wie im
   früheren 3fr/1fr/3fr-Raster (Gap 48→24 px), die Mitte wächst entsprechend. */
@media (min-width: 1000px) {
  .owners-grid {
    grid-template-columns: 2.25fr 1fr 2.25fr;
    align-items: center;
    row-gap: 0;
  }
  .owner-col { display: contents; }
  .owner-col:first-of-type .figure-frame { grid-area: 1 / 1; }
  .owners-logo-col { grid-area: 1 / 2; }
  .owner-col:last-of-type .figure-frame { grid-area: 1 / 3; }
  .owner-col:first-of-type .owner-caption { grid-area: 2 / 1; }
  .owner-col:last-of-type .owner-caption { grid-area: 2 / 3; }
}
/* Tablet: Logo quer zentriert über den beiden Porträts */
@media (max-width: 999px) and (min-width: 640px) {
  .owners-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .owners-logo-col {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: min(300px, 40vw);
  }
}
/* Mobil: Foto 1 + Name, Logo (kleiner, zentriert, 3:1), Foto 2 + Name */
@media (max-width: 639px) {
  .owners-grid { grid-template-columns: 1fr; }
  .owners-logo-col { justify-self: center; width: min(260px, 70vw); }
}
.owners-block + p { margin-top: 44px; }

/* ---- Paket-Finder (Startseite) ----
   Drei Fragen als Auswahl-Chips, nacheinander eingeblendet; die Textregeln
   für den Ergebnis-Block stehen in js/main.js (PAKET_REGELN). */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.finder-q { margin-top: 36px; }
.finder-q:first-child { margin-top: 0; }
.finder-q.is-in, .finder-result.is-in { animation: riseIn .9s ease both; }
.finder-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.finder-step {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  color: var(--brass);
}
.finder-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  border: 1px solid #EEF0F266;
  background: none;
  color: var(--offwhite);
  font-family: 'Archivo', ui-sans-serif, sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  cursor: pointer;
  transition: border-color .4s ease, color .4s ease, background .4s ease;
}
.chip:hover { border-color: var(--brass); color: var(--brass); }
.chip:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.chip[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: var(--slate); }
.finder-result {
  margin-top: 44px;
  max-width: 780px;
  border: 1px solid var(--brass-25);
  background: var(--panel-bg);
  padding: 26px 28px;
}
.finder-result-kicker {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--brass);
}
.finder-result p { margin: 10px 0 0; font-size: var(--text-m); line-height: 1.7; }
.finder-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 26px;
}
.finder-reset {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: 'Archivo', ui-sans-serif, sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--offwhite-70);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .4s ease;
}
.finder-reset:hover { color: var(--brass); }
.finder-reset:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ---- CTA-Abschnitt ---- */
.cta-section {
  background: var(--slate-deep);
  padding: 120px 6vw 100px;
}
.cta-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.cta-inner .kicker { font-size: 20px; }
.cta-inner h2 {
  margin: 14px 0 0;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cta-inner p {
  margin: 18px 0 0;
  font-size: var(--text-l);
  line-height: 1.65;
  color: var(--offwhite-70);
}
.cta-inner .btn-primary { margin-top: 34px; }

/* ---- FAQ ---- */
.faq-list { max-width: 860px; }
.faq-item {
  border: 1px solid var(--offwhite-15);
  margin-top: 14px;
  transition: border-color .5s ease;
}
.faq-item:hover, .faq-item[open] { border-color: var(--brass); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 20px 24px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
}
.faq-item summary .faq-marker {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--brass);
  flex: 0 0 auto;
}
.faq-item[open] summary .faq-marker { display: inline-block; transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 24px 22px; }
.faq-item .faq-answer p { margin: 0; font-size: var(--text-m); line-height: 1.7; }

/* ---- Rechtstexte (Impressum, Datenschutz, AGB) ---- */
/* max-width in ch begrenzt die Zeilenbreite der langen Texte auf ca. 70
   Zeichen, unabhängig von der Viewport-Breite */
/* overflow-wrap: lange URLs (z. B. Google-Datenschutzlinks) dürfen notfalls
   im Wort umbrechen, statt auf schmalen Viewports horizontal überzulaufen */
.legal-text { max-width: 70ch; overflow-wrap: anywhere; }
.legal-text h3 { margin-top: 36px; }
.legal-text h3:first-child { margin-top: 0; }
.legal-text p { margin: 14px 0 0; }
.legal-text ul {
  margin: 14px 0 0;
  padding-left: 22px;
  font-size: var(--text-l);
  line-height: 1.7;
  color: var(--offwhite-70);
}
.legal-text ul li { margin-top: 6px; }
.legal-text a { color: var(--offwhite-70); text-decoration: underline; text-underline-offset: 3px; }
.legal-text a:hover { color: var(--brass); }

/* ---- Kontaktseite: Formular + Kontaktblock nebeneinander ---- */
.contact-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px 64px;
}
.contact-form-col { flex: 1 1 460px; min-width: 300px; }
.contact-aside {
  flex: 1 1 280px;
  min-width: 260px;
  max-width: 420px;
  border: 1px solid var(--offwhite-15);
  padding: 30px 28px;
}
.contact-aside h3 { margin: 0; font-weight: 600; font-size: 17px; }
.contact-aside > p { margin: 12px 0 0; font-size: var(--text-s); line-height: 1.65; }
.contact-list { list-style: none; margin: 10px 0 0; padding: 0; }
.contact-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--offwhite-15);
  font-size: var(--text-s);
  line-height: 1.6;
  color: var(--offwhite-70);
}
.contact-list li:last-child { border-bottom: 0; padding-bottom: 4px; }
.contact-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--offwhite);
}
.contact-list a { display: block; color: var(--offwhite-70); }
.contact-list a:hover { color: var(--brass); }

/* ---- Formular ---- */
.contact-form { max-width: 720px; }
.form-field { margin-top: 26px; }
.form-field label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  width: 100%;
  background: var(--panel-bg);
  border: 1px solid var(--offwhite-15);
  color: var(--offwhite);
  font-family: 'Archivo', ui-sans-serif, sans-serif;
  font-size: 15.5px;
  padding: 13px 16px;
  border-radius: 0;
  transition: border-color .4s ease;
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C2A36B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.form-field select option { background: var(--slate-deep); color: var(--offwhite); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--brass);
}
.form-field textarea { min-height: 160px; resize: vertical; }
.contact-form button[type="submit"] {
  border: 0;
  cursor: pointer;
  font-family: 'Archivo', ui-sans-serif, sans-serif;
  margin-top: 34px;
}
.form-notice {
  display: none;
  margin-top: 26px;
  border: 1px solid var(--brass);
  background: var(--panel-bg);
  padding: 18px 22px;
  font-size: var(--text-s);
  line-height: 1.6;
  color: var(--offwhite);
}
.form-notice.visible { display: block; }

/* ---- Footer ---- */
.site-footer {
  background: var(--slate-deep);
  color: var(--offwhite);
  border-top: 1px solid var(--offwhite-15);
  padding: 64px 6vw 44px;
}
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 80px;
  justify-content: space-between;
}
.footer-brand-col { flex: 1 1 340px; min-width: 260px; }
.footer-brand {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-brand-col p {
  margin: 14px 0 0;
  font-size: var(--text-2xs);
  line-height: 1.65;
  color: var(--offwhite-70);
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
}
.footer-nav a { color: var(--offwhite-70); }
.footer-nav a:hover { color: var(--brass); }
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--offwhite-70);
}
.footer-col-title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--offwhite);
}
.footer-contact a { color: var(--offwhite-70); }
.footer-contact a:hover { color: var(--brass); }
.footer-note {
  margin: 44px 0 0;
  font-size: var(--text-note);
  line-height: 1.6;
  color: var(--offwhite-50);
  max-width: 820px;
}
.footer-note + .footer-note { margin-top: 12px; }
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--offwhite-50);
}
.footer-meta a { color: var(--offwhite-50); }
.footer-meta a:hover { color: var(--brass); }

/* ---- Responsive Feinheiten ---- */
@media (max-width: 720px) {
  .hero, .page-hero { padding-top: 150px; }
  .section, .cta-section { padding-top: 80px; padding-bottom: 80px; }
  .site-header { padding: 20px 6vw; }
}

/* ---- Reduzierte Bewegung ---- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .scrollline-fill { transform: scaleX(1); }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* Ablauf-Motive fertig gezeichnet, Nummern in Messing (kein Aufbau) */
  .step-motif path { stroke-dashoffset: 0 !important; }
  .step-motif .motif-dot { opacity: .8; }
  #ablauf .step-num { color: var(--brass); }
}