/* ===========================================================
   Aparthotel Neckartal · "Neckar Riverside Calm"
   Custom CSS — kein Tailwind, kein Framework
   =========================================================== */

:root{
  --ink: #1f2a36;
  --ink-soft: #4a5663;
  --paper: #f5f1ea;
  --paper-2: #efe9de;
  --stone: #c9b89a;
  --stone-soft: #d9cdb5;
  --brass: #4a7c59;        /* Forest Green Akzent (vormals Brass-Orange) */
  --brass-deep: #2e5a3a;   /* Tieferes Grün für Hover/Active */
  --brass-bright: #8fbf9d; /* Helleres Grün — nur für Akzent-Text auf dunklem BG (Hero, Equipment, Region, Booking-CTA, Footer) */
  --river: #7fb0a3;

  --serif: "Space Grotesk", "Cabinet Grotesk", system-ui, sans-serif;
  --sans:  "Cabinet Grotesk", "Space Grotesk", system-ui, sans-serif;

  --shadow-soft: 0 1px 2px rgba(31,42,54,.06), 0 8px 24px rgba(31,42,54,.08);
  --shadow-lift: 0 2px 4px rgba(31,42,54,.08), 0 24px 60px rgba(31,42,54,.14);

  --section-pad: clamp(4rem, 9vw, 8rem);
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  --reveal-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Kein global scroll-behavior: smooth — sorgt sonst für ruckeliges Pfeiltasten-Scrolling.
   Anchor-Link-Klicks scrollen weiterhin smooth via scrollIntoView() im main.js. */
body{
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
/* Bild-Konsistenz: leichter Filter über alle Property-Fotos */
.hero-img,
.apt-sticky-layer img,
.apt-block-thumb img,
.brand-story-image img,
.gallery-tile img{
  filter: saturate(1.04) contrast(1.03);
}
a { color: inherit; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }

.container{
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.kicker{
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 1.2rem;
}
.kicker::before{
  content:"";
  display:inline-block;
  width: 24px; height: 1px;
  background: var(--brass-deep);
  margin-right: 12px;
  vertical-align: middle;
}

.display{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0 0 1.2rem;
  color: var(--ink);
  white-space: pre-line;
}
.display em{ font-style: normal; color: var(--brass-deep); font-weight: 500; }

.lede{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 2rem;
}

/* ---------- buttons ---------- */
.btn{
  --bg: var(--ink);
  --fg: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .95em 1.6em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bg);
  transition: transform .25s var(--reveal-ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after{
  content:"→";
  font-family: var(--serif);
  transition: transform .35s var(--reveal-ease);
}
.btn:hover::after{ transform: translateX(4px); }
/* External link buttons: nordost-Pfeil signalisiert "öffnet woanders" */
a.btn[target="_blank"]::after{ content: "↗"; }
a.btn[target="_blank"]:hover::after{ transform: translate(3px, -3px); }
.btn-primary{ --bg: var(--brass); --fg: #fff; border-color: var(--brass); }
.btn-primary:hover{ --bg: var(--brass-deep); border-color: var(--brass-deep); }
.btn-ghost{ --bg: transparent; --fg: var(--ink); border-color: rgba(31,42,54,.25); }
.btn-ghost:hover{ --bg: var(--ink); --fg: var(--paper); border-color: var(--ink); }
.btn-lg{ padding: 1.15em 2em; font-size: 1.05rem; }
.btn-link{
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 44px;
  text-decoration: none; color: var(--brass-deep);
  border-bottom: 1px solid var(--brass);
  padding: .35rem 0; font-weight: 500;
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background: var(--ink); color: var(--paper); padding: .75rem 1.25rem;
  z-index: 9999;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

/* ============ HEADER / NAV ============ */
.site-header{
  position: fixed; inset: 0 0 auto 0;
  background: rgba(245,241,234,0);
  backdrop-filter: blur(0);
  z-index: 100;
  transition: background .35s var(--reveal-ease), backdrop-filter .35s, box-shadow .35s, padding .35s;
  padding-block: 1.25rem;
}
.site-header.scrolled{
  background: rgba(245,241,234,.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(31,42,54,.06);
  padding-block: .75rem;
}
.nav-row{
  display: flex; align-items: center; gap: 1.25rem; justify-content: space-between;
}
.brand{
  display: flex; align-items: center;
  text-decoration: none; color: var(--ink);
}
.brand img{
  flex-shrink: 0;
  width: clamp(120px, 18vw, 170px);
  height: auto;
  transition: transform .3s var(--reveal-ease), width .35s var(--reveal-ease);
}
.brand:hover img{ transform: translateY(-1px); }
.site-header.scrolled .brand img{ width: clamp(100px, 15vw, 140px); }

.primary-nav{ display: flex; gap: 2rem; }
.primary-nav a{
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  padding-block: .25rem;
}
.primary-nav a::after{
  content:"";
  position: absolute; left:0; right:100%; bottom:-2px;
  height: 1px; background: var(--brass);
  transition: right .3s var(--reveal-ease);
}
.primary-nav a:hover::after{ right: 0; }

.nav-cta{ padding: .6em 1.1em; font-size: .85rem; }

/* Sprach-Schalter (Flag-Toggle DE/EN) */
.lang-switch{
  display: inline-flex; align-items: center;
  gap: .35rem;
  margin: 0 .8rem 0 .25rem;
  padding: .15rem .35rem;
  border-radius: 999px;
  background: rgba(31,42,54,.04);
}
.lang-flag{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 22px;
  padding: 0; border: 0; cursor: pointer;
  background: transparent;
  border-radius: 4px;
  opacity: .45;
  transition: opacity .2s, transform .2s;
}
.lang-flag:hover{ opacity: .85; transform: translateY(-1px); }
.lang-flag.is-active{ opacity: 1; }
.lang-flag svg{ display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(31,42,54,.08); }

.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 0;
  flex-direction: column; justify-content: center; gap: 5px;
  padding: 10px;
}
.nav-toggle span{
  display: block; height: 1.5px; width: 100%;
  background: var(--ink);
  transition: transform .3s var(--reveal-ease), opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* dynamic viewport — kompensiert iOS Safari URL-Leiste */
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: 5rem var(--container-pad) 2rem;
  gap: 0;
  z-index: 110; /* über dem Header (z=100), damit Close-Button immer klickbar */
  transform: translate3d(0, -100%, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform .55s cubic-bezier(.22, 1, .36, 1),
    opacity .35s ease,
    visibility 0s linear .55s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-nav[data-open="true"]{
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform .55s cubic-bezier(.22, 1, .36, 1),
    opacity .35s ease,
    visibility 0s linear 0s;
}
.mobile-nav-close{
  position: absolute;
  top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--ink);
  cursor: pointer;
  border-radius: 50%;
  transition: background .2s, color .2s;
}
.mobile-nav-close:hover{ background: rgba(31,42,54,.06); }
.mobile-nav-links{ display: flex; flex-direction: column; gap: .25rem; }
.mobile-nav a{
  font-family: var(--serif);
  font-size: 2rem;
  text-decoration: none;
  color: var(--ink);
  padding: .6rem 0;
  border-bottom: 1px solid rgba(31,42,54,.08);
}

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-bottom: clamp(3rem, 8vh, 6rem);
  padding-top: clamp(7rem, 15vh, 10rem);
  color: var(--paper);
  overflow: hidden;
}
.hero-image{
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center 60%;
}
.kenburns{
  animation: kenburns 28s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%   { transform: scale(1.04) translate3d(0,0,0); }
  100% { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}
.hero-vignette{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(31,42,54,.05) 0%, rgba(31,42,54,.55) 60%, rgba(31,42,54,.85) 100%),
    linear-gradient(105deg, rgba(31,42,54,.55) 0%, rgba(31,42,54,0) 55%);
}
.hero-content{
  position: relative; z-index: 1;
  max-width: 920px;
}
.hero .kicker{ color: var(--brass); }
.hero .kicker::before{ background: var(--brass); }
.hero .display{ color: var(--paper); }
.hero .display em{ color: var(--brass); }
.hero .lede{ color: rgba(245,241,234,.85); max-width: 50ch; }
.hero-ctas{ display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.hero .btn-ghost{ --fg: var(--paper); border-color: rgba(245,241,234,.4); }
.hero .btn-ghost:hover{ --bg: var(--paper); --fg: var(--ink); border-color: var(--paper); }

.hero-scroll-hint{
  position: absolute; left: 50%; bottom: 1.8rem;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  color: var(--brass);
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
}
.hsh-line{
  width: 1px; height: 48px;
  background: linear-gradient(180deg, transparent, var(--brass));
  animation: scrollHint 2.2s var(--reveal-ease) infinite;
  transform-origin: top;
}
@keyframes scrollHint {
  0%   { transform: scaleY(.2); }
  60%  { transform: scaleY(1); }
  100% { transform: scaleY(.2); transform-origin: bottom; }
}

/* ============ INDUSTRY TRUST STRIP ============ */
.industry-trust{
  background: var(--paper);
  padding-block: clamp(2rem, 3.5vw, 3rem);
  border-bottom: 1px solid rgba(31,42,54,.06);
}
.industry-trust .kicker{ display:block; margin-bottom: .8rem; }
.industry-list{
  display: flex; flex-wrap: wrap;
  gap: .8rem 2rem;
  margin: 0 0 .8rem;
  align-items: baseline;
}
.industry-list li{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  color: var(--ink);
  letter-spacing: -.01em;
  position: relative;
  opacity: .85;
  transition: opacity .25s;
}
.industry-list li:hover{ opacity: 1; }
.industry-list li + li::before{
  content: "·";
  color: var(--brass);
  margin-right: 2rem;
  margin-left: -2rem;
  opacity: .55;
}
.industry-note{
  font-size: .9rem;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}

/* ============ EQUIPMENT & SERVICE ============ */
.equipment{
  padding-block: var(--section-pad);
  background: var(--ink);
  color: var(--paper);
}
.equipment .kicker{ color: var(--brass); }
.equipment .kicker::before{ background: var(--brass); }
.equipment .display{ color: var(--paper); }
.equipment .lede{ color: rgba(245,241,234,.7); }
.equipment-head{ max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }

.equipment-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.equipment-col{
  display: flex; flex-direction: column;
  gap: 1.5rem;
}
.equipment-col > header{
  border-top: 1px solid rgba(245,241,234,.18);
  padding-top: 1.5rem;
}
.equipment-col h3{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .35rem;
  color: var(--paper);
}
.equipment-col > header p{
  margin: 0;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--brass);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.equipment-col ul{
  display: flex; flex-direction: column;
  gap: .85rem;
}
.equipment-col li{
  position: relative;
  padding-left: 1.6rem;
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(245,241,234,.88);
}
.equipment-col li::before{
  content: "+";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--serif);
  font-weight: 500;
  color: var(--brass);
  font-size: 1.15rem;
  line-height: 1.2;
}

/* ============ APARTMENT — Sticky Stack ============ */
.apartment{
  padding-block: var(--section-pad);
  background: var(--paper);
}
.apartment-head{ max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.5rem); }

.apartment-stack{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.apt-sticky{
  position: sticky; top: 6rem;
  height: min(78vh, 700px);
  border-radius: 4px;
  overflow: hidden;
  background: var(--stone-soft);
  box-shadow: var(--shadow-lift);
}
.apt-sticky-layer{
  position: absolute; inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity .65s ease-out;
  will-change: opacity;
}
/* Vorheriger Layer bleibt sichtbar unter dem neuen, bis der neue voll deckt */
.apt-sticky-layer.was-active{
  opacity: 1;
  z-index: 1;
  transition: opacity .25s ease-in .55s; /* nach Crossfade abblenden, im Hintergrund */
}
.apt-sticky-layer.is-active{
  opacity: 1;
  z-index: 2;
  transition: opacity .55s ease-in;
}
.apt-sticky-layer img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 7s ease-out;
  backface-visibility: hidden;     /* GPU-Hint, kein Subpixel-Flicker */
  -webkit-backface-visibility: hidden;
}
.apt-sticky-layer.is-active img{ transform: scale(1.06); }

.apt-blocks{
  display: flex; flex-direction: column;
  gap: clamp(2.5rem, 6vh, 5rem);
  padding-block: 1.5rem;
}
.apt-block{
  display: flex; flex-direction: column;
  gap: .75rem;
  min-height: 35vh;
  justify-content: center;
}
.apt-block-num{
  font-family: var(--serif);
  font-weight: 500;
  font-size: .8rem;
  color: var(--brass-deep);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.apt-block h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.1;
  margin: 0;
}
.apt-block p{ color: var(--ink-soft); font-size: 1.05rem; max-width: 44ch; }
.apt-block-thumb{ display: none; }

/* ============ BRAND STORY ============ */
.brand-story{
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--paper);
}
.brand-story-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.brand-story-image{
  aspect-ratio: 3 / 2;
  border-radius: 2px;
  overflow: hidden;
  background: var(--stone-soft);
  box-shadow: var(--shadow-lift);
}
.brand-story-image img{
  width: 100%; height: 100%; object-fit: cover;
}
.brand-story-copy{ max-width: 48ch; }
.brand-story-intro{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--brass-deep);
  margin: 0 0 1.5rem;
}
.brand-story-intro::before{
  content:"";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--brass);
  margin-right: 12px;
  vertical-align: middle;
}
.brand-story-body{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.brand-story-sig{
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--ink-soft);
  letter-spacing: .02em;
  margin: 0;
}

/* ============ PRICING ============ */
.pricing{
  padding-block: var(--section-pad);
  background: var(--ink);
  color: var(--paper);
}
.pricing .kicker{ color: var(--brass); }
.pricing .kicker::before{ background: var(--brass); }
.pricing .display{ color: var(--paper); }
.pricing-head{ max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid rgba(245,241,234,.12);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.pricing-grid li{
  padding: 1.6rem 1.4rem;
  border-right: 1px solid rgba(245,241,234,.1);
  display: flex; flex-direction: column;
  gap: .5rem;
  background: rgba(245,241,234,.02);
  transition: background .3s;
}
.pricing-grid li:hover{ background: rgba(245,241,234,.05); }
.pricing-grid li:last-child{ border-right: 0; }
.pricing-label{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--brass);
}
.pricing-value{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  line-height: 1;
  color: var(--paper);
  letter-spacing: -.02em;
}
.pricing-hint{
  font-size: .85rem;
  color: rgba(245,241,234,.6);
  line-height: 1.35;
}
.pricing-note{
  font-size: .95rem;
  color: rgba(245,241,234,.7);
  max-width: 60ch;
  font-family: var(--serif);
  font-style: normal;
}

/* ============ USE CASES ============ */
.use-cases{
  padding-block: var(--section-pad);
  background: var(--paper-2);
}
.use-cases .display{ max-width: 16ch; }
.use-case-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.use-case{
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  background: var(--paper);
  border: 1px solid rgba(31,42,54,.06);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: .9rem;
  position: relative;
  transition: transform .4s var(--reveal-ease), box-shadow .4s;
}
.use-case:hover{ transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.use-case-num{
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-family: var(--serif); font-weight: 500;
  font-size: 1.6rem; color: var(--brass-deep);
}
.use-case h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.55rem;
  margin: 0;
  line-height: 1.15;
}
.use-case p{ color: var(--ink-soft); margin: 0; font-size: 1rem; }

/* ============ LOCATION ============ */
.location{
  padding-block: var(--section-pad);
  background: var(--paper);
}
.location-head{ max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }

.location-map-bleed{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--paper-2);
  border-block: 1px solid rgba(31,42,54,.08);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
}

/* === Google Maps Iframe === */
.gmap-frame{
  display: block;
  width: 100%;
  height: clamp(440px, 60vh, 680px);
  border: 0;
  background: var(--paper-2);
}
.gmap-controls{
  position: absolute;
  top: clamp(.8rem, 2vw, 1.4rem);
  right: clamp(.8rem, 2vw, 1.4rem);
  z-index: 600;
}
.gmap-toggle{
  display: inline-flex;
  background: rgba(245,241,234,.95);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 2px 10px rgba(31,42,54,.18);
  border: 1px solid rgba(31,42,54,.08);
}
.gmap-mode{
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  padding: .45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.gmap-mode:hover{ color: var(--ink); }
.gmap-mode.is-active{
  background: var(--ink);
  color: var(--paper);
}
.gmap-open{
  margin-top: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--brass-deep);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
  align-self: flex-start;
}
.gmap-open:hover{ color: var(--ink); border-color: var(--ink); }

/* Editorial-Tint auf den Tiles, ohne Pointer-Events zu blockieren */
.leaflet-tile-pane{
  filter: saturate(.78) contrast(.97) brightness(1.02);
}

/* Leaflet UI in Brand-Style */
.leaflet-control-zoom a,
.leaflet-control-zoom a:hover{
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(31,42,54,.12);
  font-family: var(--sans);
  font-weight: 500;
  transition: background .2s, color .2s;
}
.leaflet-control-zoom a:hover{
  background: var(--ink);
  color: var(--paper);
}
.leaflet-control-zoom{
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(31,42,54,.12);
  margin: 14px !important;
}
.leaflet-control-attribution{
  background: rgba(245,241,234,.85) !important;
  color: var(--ink-soft) !important;
  font-family: var(--sans);
  font-size: .65rem !important;
  padding: 2px 8px !important;
}
.leaflet-control-attribution a{ color: var(--brass-deep) !important; }

/* Marker-Container — Leaflet positioniert das aussen, wir füllen es */
.lf-apt, .lf-city{ background: none !important; border: 0 !important; }

/* Apartment-Marker als divIcon */
.lf-apt{ overflow: visible !important; }
.lf-apt .apt-pulse{
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  background: var(--brass);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: .4;
  animation: aptPulse 2.6s ease-out infinite;
  pointer-events: none;
}
.lf-apt .apt-pulse:nth-child(2){ animation-delay: 1.3s; }
@keyframes aptPulse {
  0%   { width: 14px; height: 14px; opacity: .55; }
  80%  { width: 64px; height: 64px; opacity: 0; }
  100% { opacity: 0; }
}
.lf-apt .apt-dot{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  background: var(--brass);
  border: 3px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(184,115,51,.45);
  z-index: 2;
}
.lf-apt .apt-flag{
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: -.01em;
  padding: .5rem .75rem;
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(31,42,54,.3);
  white-space: nowrap;
  display: flex; flex-direction: column;
  z-index: 3;
  pointer-events: none;
}
.lf-apt .apt-flag::before{
  content: "";
  position: absolute;
  left: -5px; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--ink);
  z-index: -1;
}
.lf-apt .apt-flag small{
  font-family: var(--sans);
  font-weight: 400;
  font-size: .65rem;
  color: rgba(245,241,234,.65);
  letter-spacing: .02em;
  margin-top: .1rem;
}

/* City-Marker */
.lf-city{ overflow: visible !important; }
.lf-city .pin-dot{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  background: var(--ink);
  border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(31,42,54,.4);
}
.lf-city .pin-label{
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  background: rgba(245,241,234,.96);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding: .25rem .55rem;
  border-radius: 2px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(31,42,54,.15);
  border: 1px solid rgba(31,42,54,.06);
  pointer-events: none;
  opacity: 1;
  transition: opacity .2s;
}
/* Bei dichten Zooms Labels nur on-hover, sonst Überlappung */
@media (max-width: 720px){
  .lf-city .pin-label{ display: none; }
  .lf-city:hover .pin-label{ display: block; }
}

.lf-tooltip{
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 0 !important;
  font-family: var(--sans);
  font-size: .75rem;
  padding: .35rem .65rem !important;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(31,42,54,.25) !important;
}
.lf-tooltip::before{ border-top-color: var(--ink) !important; }

/* Scroll-Wheel-Zoom-Hinweis */
.map-hint{
  position: absolute;
  left: 50%; bottom: clamp(1.4rem, 3vw, 2.2rem);
  transform: translateX(-50%);
  background: rgba(31,42,54,.85);
  color: var(--paper);
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .45rem .9rem;
  border-radius: 999px;
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  transition: opacity .35s var(--reveal-ease);
  white-space: nowrap;
}
.location-map-bleed:not(.is-map-active):hover .map-hint{ opacity: 1; }
.location-map-bleed.is-map-active .map-hint{ opacity: 0; }
.map-overlay-card{
  position: absolute;
  left: clamp(1rem, 5vw, 4rem);
  bottom: clamp(1rem, 4vw, 2.5rem);
  background: var(--paper);
  padding: 1.5rem 1.75rem;
  border-radius: 4px;
  box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; gap: .35rem;
  max-width: 320px;
  z-index: 600;
  pointer-events: auto;
}
.map-overlay-card strong{
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
}
.map-overlay-card span{ color: var(--ink-soft); font-size: .95rem; }
.map-overlay-card .btn-link{ margin-top: .6rem; }

.connections-wrap{
  padding-top: clamp(2rem, 4vw, 3rem);
}
.connections-title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  letter-spacing: -.01em;
  margin: 0 0 1.5rem;
  text-align: left;
  color: var(--ink);
}
.connections-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.connections-col h4{
  font-family: var(--sans);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(31,42,54,.12);
}
.connections-col ul{
  display: flex; flex-direction: column;
  gap: .55rem;
}
.connections-col li{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: .25rem;
  font-size: .95rem;
}
.conn-name{ color: var(--ink); font-weight: 400; }
.conn-time{
  font-family: var(--sans);
  color: var(--brass-deep);
  font-weight: 500;
  font-size: .85rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ============ REGION ============ */
.region{
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--ink);
  color: var(--paper);
}
.region .kicker{ color: var(--brass); }
.region .kicker::before{ background: var(--brass); }
.region .display{ color: var(--paper); }
.region .lede{ color: rgba(245,241,234,.7); }
.region-head{ max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }

.region-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.region-tile{
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  background: rgba(245,241,234,.04);
  border: 1px solid rgba(245,241,234,.1);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 1rem;
  transition: background .4s, border-color .4s, transform .4s var(--reveal-ease);
}
.region-tile:hover{
  background: rgba(245,241,234,.08);
  border-color: rgba(201,184,154,.4);
  transform: translateY(-4px);
}
.region-tile-num{
  font-family: var(--serif); font-weight: 500;
  color: var(--brass); font-size: 1.4rem;
}
.region-tile h3{
  font-family: var(--serif); font-weight: 400;
  font-size: 1.4rem; line-height: 1.2; margin: 0;
}
.region-tile p{ color: rgba(245,241,234,.7); font-size: 1rem; margin: 0; }

/* ============ GALLERY ============ */
.gallery{
  padding-block: var(--section-pad);
  background: var(--paper);
}
.gallery-head{ max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.gallery-tile{
  position: relative;
  border: 0; padding: 0;
  background: var(--stone-soft);
  border-radius: 2px;
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 3 / 2;
  transition: transform .5s var(--reveal-ease);
}
/* Magazine-Layout:
   Row 1: [living span 2 cols, 3:2]  [hallway 1 col, 3:4 portrait] — gleich hoch
   Row 2: [facade 3:2]  [espresso 3:2]  [bath 3:2] — drei gleich
   Row 3: [bed-detail span 3 cols, 3:1] — panoramisches Finale
*/
.gallery-tile.span-wide   { grid-column: span 2; aspect-ratio: 3 / 2; }
.gallery-tile.span-tall   { grid-column: span 1; aspect-ratio: 3 / 4; }
.gallery-tile.span-regular{ grid-column: span 1; aspect-ratio: 3 / 2; }
.gallery-tile.span-full   { grid-column: span 3; aspect-ratio: 3 / 1; }
.gallery-tile img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--reveal-ease), filter .4s;
}
.gallery-tile:hover{ transform: translateY(-2px); }
.gallery-tile:hover img{ transform: scale(1.04); filter: brightness(1.05); }
.gallery-tile::after{
  content: "↗";
  position: absolute;
  top: .8rem; right: .9rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(31,42,54,.6);
  color: var(--paper);
  display: grid; place-items: center;
  font-size: 1rem;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s, transform .3s var(--reveal-ease);
}
.gallery-tile:hover::after{ opacity: 1; transform: scale(1); }

.lightbox{
  position: fixed; inset: 0;
  background: rgba(31,42,54,.92);
  z-index: 1000;
  display: grid; place-items: center;
  padding: 4vh 2vw;
}
.lightbox[hidden]{ display: none; }
.lightbox-img{
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.lightbox-close,
.lightbox-nav{
  position: absolute;
  background: rgba(245,241,234,.08);
  color: var(--paper);
  border: 1px solid rgba(245,241,234,.15);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-size: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.lightbox-close{ top: 2vh; right: 2vw; font-size: 1.6rem; }
.lightbox-nav.prev{ left: 2vw; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next{ right: 2vw; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover,
.lightbox-nav:hover{ background: rgba(245,241,234,.16); }
.lightbox-nav.prev:hover{ transform: translateY(-50%) translateX(-2px); }
.lightbox-nav.next:hover{ transform: translateY(-50%) translateX(2px); }

/* ============ TESTIMONIALS ============ */
.testimonials{
  padding-block: var(--section-pad);
  background: var(--paper-2);
}
.testimonials-head{ max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.testimonial-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.testimonial{
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  background: var(--paper);
  border: 1px solid rgba(31,42,54,.08);
  border-radius: 4px;
  display: flex; flex-direction: column; gap: 1.5rem;
  position: relative;
}
.testimonial::before{
  content: "“";
  font-family: var(--serif);
  font-weight: 600;
  font-size: 4rem;
  line-height: .7;
  color: var(--brass);
  opacity: .35;
  position: absolute;
  top: 1.4rem; right: 1.4rem;
}
.testimonial blockquote{
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -.005em;
}
.testimonial footer{
  border-top: 1px solid rgba(31,42,54,.1);
  padding-top: 1rem;
  display: flex; flex-direction: column;
  gap: .15rem;
}
.testimonial cite{
  font-style: normal;
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink);
}
.testimonial footer span{
  font-size: .85rem;
  color: var(--ink-soft);
}
.testimonials-note{
  font-size: .8rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 1.5rem;
  opacity: .7;
}

/* ============ FAQ ============ */
.faq{
  padding-block: var(--section-pad);
  background: var(--paper);
}
.faq-head{ max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.faq-list{
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(31,42,54,.12);
  max-width: 880px;
  margin-inline: auto;
}
.faq-item{
  border-bottom: 1px solid rgba(31,42,54,.12);
}
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.2;
  color: var(--ink);
  transition: color .25s;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+";
  font-family: var(--serif); font-weight: 300;
  font-size: 1.6rem;
  color: var(--brass);
  transition: transform .3s var(--reveal-ease);
  line-height: 1;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item:hover summary{ color: var(--brass-deep); }
.faq-answer{
  padding: 0 0 1.6rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
  max-width: 65ch;
}

/* ============ BOOKING CTA ============ */
.booking-cta{
  padding-block: var(--section-pad);
  background:
    linear-gradient(180deg, rgba(31,42,54,.7), rgba(31,42,54,.7)),
    url("/assets/img/booking-cta-night.webp") center/cover;
  color: var(--paper);
  text-align: center;
}
.booking-cta-inner{ max-width: 760px; }
.booking-cta .kicker{ color: var(--brass); }
.booking-cta .kicker::before{ background: var(--brass); }
.booking-cta .display{ color: var(--paper); margin-inline: auto; }
.booking-cta .lede{ color: rgba(245,241,234,.85); margin-inline: auto; }

/* ============ CONTACT ============ */
.contact{
  padding-block: var(--section-pad);
  background: var(--paper-2);
}
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact-direct{ margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.contact-direct li{ display: flex; flex-direction: column; gap: .15rem; }
.cd-label{ font-size: .75rem; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-soft); }
.contact-direct a{
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--serif); font-size: 1.4rem;
  text-decoration: none;
  color: var(--brass-deep);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 3px;
  width: fit-content;
  transition: color .2s, border-color .2s;
}
.contact-direct a:hover{
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.contact-form{
  display: grid;
  gap: 1rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper);
  border: 1px solid rgba(31,42,54,.08);
  border-radius: 4px;
}
.contact-form label{
  display: flex; flex-direction: column; gap: .4rem;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .15em;
  color: var(--ink-soft);
}
.contact-form input,
.contact-form textarea{
  font: inherit;
  font-family: var(--sans);
  font-size: 1rem;
  text-transform: none; letter-spacing: 0;
  padding: .85rem 1rem;
  background: var(--paper-2);
  border: 1px solid rgba(31,42,54,.12);
  border-radius: 4px;
  color: var(--ink);
  transition: border-color .2s, background .2s;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: var(--brass);
  background: var(--paper);
}
.contact-form textarea{ resize: vertical; }
.form-status{ font-size: .9rem; min-height: 1.2em; margin: 0; color: var(--brass-deep); }

/* ============ LEGAL SECTIONS ============ */
.legal{
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--paper-2);
  border-top: 1px solid rgba(31,42,54,.08);
}
.legal-grid{
  display: grid;
  gap: 1rem;
  max-width: 900px;
}
.legal-block{
  background: var(--paper);
  border: 1px solid rgba(31,42,54,.08);
  border-radius: 4px;
  scroll-margin-top: 100px;
}
.legal-block summary{
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 1.5rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.legal-block summary::-webkit-details-marker{ display: none; }
.legal-block summary::after{
  content: "+";
  color: var(--brass);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform .3s var(--reveal-ease);
}
.legal-block[open] summary::after{ transform: rotate(45deg); }
.legal-block .legal-intro{
  padding: 0 1.5rem;
  margin: 0 0 1rem;
  font-size: .85rem;
  color: var(--ink-soft);
  font-style: italic;
}
.legal-body{
  padding: 0 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.legal-body section{ display: flex; flex-direction: column; gap: .35rem; }
.legal-body h4{
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.legal-body p{
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink);
}
.legal-body p a{
  color: var(--brass-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
  word-break: break-word;
}
.legal-body p a:hover{
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.todo-owner{
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .78rem;
  background: rgba(184,115,51,.12);
  color: var(--brass-deep);
  padding: .15rem .5rem;
  border-radius: 2px;
  border: 1px dashed var(--brass);
}

/* ============ FOOTER ============ */
.site-footer{
  background: var(--ink);
  color: rgba(245,241,234,.65);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(245,241,234,.1);
}
.footer-brand img{
  width: clamp(120px, 18vw, 170px);  /* gleiche Skala wie Top-Logo */
  height: auto;
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
}
.footer-brand p{ font-family: var(--serif); font-weight: 500; color: var(--brass); margin-top: .75rem; font-size: 1rem; letter-spacing: -.01em; }
.footer-imprint h4,
.footer-legal-head{
  font-family: var(--sans); font-weight: 500;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--brass); margin: 0 0 1rem;
}
.footer-imprint ul{ display: flex; flex-direction: column; gap: .25rem; font-size: .95rem; }
.footer-imprint li{ display: flex; align-items: baseline; gap: .15rem; }
.footer-imprint .li-label{
  flex: 0 0 2.8rem;
  color: rgba(245,241,234,.5);
}
.footer-imprint .li-value{ flex: 1 1 auto; }
.footer-imprint a{
  color: var(--brass-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(143,191,157,.35);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.footer-imprint a:hover{
  color: var(--paper);
  border-bottom-color: var(--paper);
}
.footer-legal{ display: flex; flex-direction: column; gap: .25rem; }
.footer-legal a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none; color: rgba(245,241,234,.7);
  border-bottom: 1px solid transparent;
  padding: .5rem 0;
  font-size: .95rem;
}
.footer-legal a:hover{ color: var(--paper); border-color: var(--brass); }

/* Footer-Industry: zurückhaltend, kein Lautsprecher */
.footer-industry{
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgba(245,241,234,.12);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  color: rgba(245,241,234,.45);
}
.footer-industry-label{
  font-family: var(--sans);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: rgba(245,241,234,.4);
  white-space: nowrap;
}
.footer-industry-list{
  display: flex; flex-wrap: wrap;
  gap: .25rem 1rem;
  font-family: var(--sans);
  font-size: .78rem;
}
.footer-industry-list li{
  color: rgba(245,241,234,.55);
  letter-spacing: .01em;
  transition: color .2s;
}
.footer-industry-list li:hover{ color: rgba(245,241,234,.85); }
.footer-industry-list li + li::before{
  content: "·";
  margin-right: 1rem;
  margin-left: -1rem;
  color: rgba(245,241,234,.25);
}

.footer-meta{
  padding-top: 1.5rem;
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.footer-meta small{ color: rgba(245,241,234,.4); font-size: .8rem; }

@media (max-width: 720px) {
  .footer-meta{ flex-direction: column; align-items: flex-start; }
}

/* ============ REVEAL SYSTEM ============ */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s var(--reveal-ease), transform 1.2s var(--reveal-ease);
  will-change: opacity, transform;
}
[data-reveal="zoom"]{ transform: scale(.985); }
[data-reveal].is-revealed{
  opacity: 1;
  transform: none;
}

/* Image wipe-reveal */
.img-reveal{
  position: relative;
  overflow: hidden;
}
.img-reveal img{
  clip-path: inset(0 100% 0 0);
  transform: scale(1.06);
  filter: saturate(.55);
  transition: clip-path 1.4s var(--reveal-ease),
              transform 1.6s var(--reveal-ease),
              filter 1.4s var(--reveal-ease);
}
.img-reveal.is-revealed img{
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  filter: saturate(1);
}

/* Stagger children */
.stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--reveal-ease), transform .9s var(--reveal-ease); }
.stagger.is-revealed > * { opacity: 1; transform: none; }
.stagger.is-revealed > *:nth-child(1){ transition-delay: .05s; }
.stagger.is-revealed > *:nth-child(2){ transition-delay: .15s; }
.stagger.is-revealed > *:nth-child(3){ transition-delay: .25s; }
.stagger.is-revealed > *:nth-child(4){ transition-delay: .35s; }
.stagger.is-revealed > *:nth-child(5){ transition-delay: .45s; }
.stagger.is-revealed > *:nth-child(6){ transition-delay: .55s; }
.stagger.is-revealed > *:nth-child(7){ transition-delay: .65s; }
.stagger.is-revealed > *:nth-child(8){ transition-delay: .75s; }

/* Map pins reveal: stagger after image fades in */
.map-pin,
.map-pointer{
  opacity: 0;
  transform: translate(-50%, -50%) translateY(6px);
  transition: opacity .9s var(--reveal-ease), transform .9s var(--reveal-ease);
}
.map-pointer{ transform: translate(-50%, -100%) translateY(6px); }
.location-map-bleed.is-revealed .map-pin,
.location-map-bleed.is-revealed .map-pointer{
  opacity: 1;
  transform: translate(-50%, -50%);
}
.location-map-bleed.is-revealed .map-pointer{ transform: translate(-50%, -100%); }
.location-map-bleed.is-revealed .map-pin:nth-of-type(1){ transition-delay: .35s; }
.location-map-bleed.is-revealed .map-pin:nth-of-type(2){ transition-delay: .5s; }
.location-map-bleed.is-revealed .map-pin:nth-of-type(3){ transition-delay: .65s; }
.location-map-bleed.is-revealed .map-pin:nth-of-type(4){ transition-delay: .8s; }
.location-map-bleed.is-revealed .map-pointer{ transition-delay: .95s; }
.location-map-bleed.is-revealed .map-pin.apartment{ transition-delay: .15s; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .use-case-grid,
  .region-grid,
  .testimonial-grid{ grid-template-columns: repeat(2, 1fr); }
  .equipment-grid{ gap: 2rem; }
  .pricing-grid{ grid-template-columns: repeat(2, 1fr); }
  .pricing-grid li:nth-child(2n){ border-right: 0; }
  .pricing-grid li:nth-child(-n+2){ border-bottom: 1px solid rgba(245,241,234,.1); }
  .contact-grid,
  .brand-story-grid{ grid-template-columns: 1fr; }
  .brand-story-image{ aspect-ratio: 16 / 10; order: -1; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  /* Gallery bleibt 3-col bis 720px */
}

@media (max-width: 720px) {
  .primary-nav, .nav-cta{ display: none; }
  .lang-switch{ margin: 0 .25rem 0 auto; padding: .1rem .25rem; gap: .15rem; }
  .lang-flag{ width: 26px; height: 20px; }
  .lang-flag svg{ width: 20px; height: 13px; }
  .nav-toggle{ display: flex; }
  .apartment-stack{ grid-template-columns: 1fr; gap: 0; }
  .apt-sticky{ display: none; }
  .apt-blocks{ gap: 4rem; }
  .apt-block{ min-height: auto; }
  .apt-block-thumb{
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.2rem;
    background: var(--stone-soft);
  }
  .apt-block-thumb img{ width: 100%; height: 100%; object-fit: cover; }
  .use-case-grid,
  .region-grid,
  .testimonial-grid,
  .equipment-grid,
  .connections-grid{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .pricing-grid li{ border-right: 0; border-bottom: 1px solid rgba(245,241,234,.1); }
  .pricing-grid li:last-child{ border-bottom: 0; }
  .industry-list{ gap: 1rem 1.6rem; }
  .industry-list li + li::before{ margin-right: 1.6rem; margin-left: -1.6rem; }
  .gallery-grid{ grid-template-columns: 1fr; gap: .6rem; }
  .gallery-tile,
  .gallery-tile.span-wide,
  .gallery-tile.span-tall,
  .gallery-tile.span-regular,
  .gallery-tile.span-full{ grid-column: span 1; aspect-ratio: 3 / 2; }
  .gallery-tile.span-tall{ aspect-ratio: 3 / 4; }
  .gallery-tile.span-full{ aspect-ratio: 16 / 9; }
  .brand-story-image{ aspect-ratio: 16 / 11; }
  .map-overlay-card{
    position: static;
    margin: 0 var(--container-pad);
    padding: 1.25rem 1.4rem;
    max-width: none;
    border-radius: 0;
    border-top: 1px solid rgba(31,42,54,.1);
    box-shadow: none;
  }
  .leaflet-host{ height: 380px; }
  .lf-apt .apt-flag{ font-size: .72rem; padding: .35rem .55rem; }
  .lf-apt .apt-flag small{ font-size: .6rem; }
  .footer-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .hero{ padding-top: 7rem; }
  .hero-scroll-hint{ display: none; }
  .hero-vignette{
    background:
      linear-gradient(180deg, rgba(31,42,54,.25) 0%, rgba(31,42,54,.65) 60%, rgba(31,42,54,.9) 100%);
  }
}

@media (max-width: 380px) {
  body{ font-size: 16px; }
  :root{ --section-pad: 3.5rem; }
  .display{ font-size: clamp(1.9rem, 8.5vw, 2.5rem); }
  .hero{ padding-top: 6rem; padding-bottom: 3rem; }
  .trust-list{ grid-template-columns: 1fr; }
  .contact-form{ padding: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .15s !important;
  }
  .kenburns{ animation: none; }
  [data-reveal]{ opacity: 1; transform: none; }
  .img-reveal img{ clip-path: none; transform: none; filter: none; }
  .hero-scroll-hint{ display: none; }
}

/* ---------- Akzent-Override für dunkle Sektionen ----------
   Auf den dunklen Hintergründen (Hero, Equipment, Region, Booking-CTA, Footer)
   wäre `--brass` (#4a7c59) zu wenig kontrastreich. Hier kommt der hellere
   Grünton `--brass-bright` zum Einsatz — ausschließlich für Akzent-Texte
   und Strichlinien, nicht für Buttons. */
.hero .kicker,
.hero .display em,
.hero-scroll-hint,
.equipment .kicker,
.equipment-col > header p,
.pricing .kicker,
.pricing-label,
.region .kicker,
.region-tile-num,
.booking-cta .kicker,
.footer-brand p,
.footer-imprint h4,
.footer-legal-head {
  color: var(--brass-bright);
}
.hero .kicker::before,
.equipment .kicker::before,
.pricing .kicker::before,
.region .kicker::before,
.booking-cta .kicker::before {
  background: var(--brass-bright);
}
.hsh-line {
  background: linear-gradient(180deg, transparent, var(--brass-bright));
}