/* ============ VARIABLES ============ */
:root{
  --bg: #0a0a0b;
  --bg-alt: #131313;
  --bg-raise: #1a1a1a;
  --cream: #f3ede1;
  --cream-dim: #cfc8ba;
  --grey: #8a8782;
  --orange: #ff6a1a;
  --orange-deep: #c94e0e;
  --line: rgba(243,237,225,0.14);

  --serif: 'Playfair Display', serif;
  --sans: 'Poppins', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ background:var(--bg); }

body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
  line-height:1.6;
}

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

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

h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.15; color:var(--cream); }

/* ============ BRAND ============ */
.brand-title{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--cream);
  font-size:clamp(1.6rem,4.5vw,2.8rem);
  margin-top:.35em;
}
.hero-brand{ font-size:clamp(2.49rem,7.35vw,4.52rem); }

.brand-sub-word{
  display:block;
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:.55em;
  text-transform:uppercase;
  color:var(--orange);
  font-size:.8rem;
  padding-left:.55em;
  margin-top:.5em;
}

.brand-tagline{
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  color:var(--cream-dim);
  font-size:1rem;
  margin-top:1.1rem;
}

.nav-logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
}

.nav-brand{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:1.35rem;
  color:var(--cream);
  line-height:1;
}
.nav-brand .d{ color:var(--orange); }

.nav-brand-sub{
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:.45rem;
  color:var(--orange);
  margin-top:.25rem;
}

.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:.35em;
  text-transform:uppercase;
  font-size:.7rem;
  color:var(--orange);
}
.eyebrow.center{ text-align:center; }
.eyebrow.sub{ color:var(--cream-dim); letter-spacing:.3em; }

.center{ text-align:center; margin-left:auto; margin-right:auto; }

.section-inner{
  max-width:1200px;
  margin:0 auto;
  padding: 8rem 2rem;
}

/* ============ NAV ============ */
#site-nav{
  position:fixed;
  top:0; left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.3rem 3rem;
  z-index:100;
  opacity:0;
  transform:translateY(-100%);
  transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
#site-nav.is-visible{ opacity:1; transform:translateY(0); }
#site-nav.is-scrolled{
  background:rgba(10,10,11,0.75);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.nav-links{
  display:flex;
  gap:2.4rem;
  list-style:none;
}
.nav-links a{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--cream-dim);
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0%; height:1px;
  background:var(--orange);
  transition:width .3s ease;
}
.nav-links a:hover{ color:var(--cream); }
.nav-links a:hover::after{ width:100%; }

.nav-cta{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--bg);
  background:var(--orange);
  border:none;
  padding:.85rem 1.6rem;
  border-radius:2px;
  cursor:pointer;
  transition:filter .3s ease, transform .3s ease;
}
.nav-cta:hover{ filter:brightness(1.15); transform:translateY(-1px); }

/* Shimmer: ein dauerhaft umlaufendes, dezentes weißes Licht am Rand des
   Nav-Buttons (Form/Farbe/Hover bleiben unverändert) — bei Hover füllt sich
   der Rand zusätzlich zu einer durchgehenden Linie auf.
   Läuft als SVG-Stroke mit stroke-dashoffset statt als rotierendem
   conic-gradient: dashoffset bewegt sich entlang der tatsächlichen
   Pfadlänge, dadurch ist die Geschwindigkeit rund um den kompletten
   Umfang (inkl. Ecken) konstant gleich schnell. */
#site-nav .nav-cta{
  position:relative;
  isolation:isolate;
}

#site-nav .nav-cta::after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  padding:1.5px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  background:#fff;
  opacity:0;
  transition:opacity .2s ease;
}
#site-nav .nav-cta:hover::after{ opacity:.85; }

.shimmer-svg{
  position:absolute;
  inset:-2px;
  width:calc(100% + 4px);
  height:calc(100% + 4px);
  pointer-events:none;
  overflow:visible;
}
.shimmer-rect{
  fill:none;
  stroke:#fff;
  stroke-width:1.5px;
  stroke-linecap:round;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.9));
  animation:shimmer-dash 5.2s linear infinite;
}
@keyframes shimmer-dash{
  to{ stroke-dashoffset:var(--shimmer-perimeter, -600px); }
}

/* ============ HERO FLYTHROUGH ============ */
#hero-flythrough{
  position:relative;
  height:400vh;
  background:var(--bg);
}

.flythrough-pin{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}

.scene{
  position:absolute;
  inset:0;
  opacity:0;
  will-change:opacity,transform;
}
.scene.is-active{ opacity:1; }

.scene video,
.scene img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.08);
  will-change:transform;
}

.scene-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.75) 100%);
}

.hero-caption{
  position:absolute;
  left:0; right:0;
  bottom:14vh;
  z-index:5;
  text-align:center;
  color:var(--cream);
  opacity:0;
  transform:translateY(28px);
  will-change:transform,opacity;
}
.hero-caption .eyebrow{ margin-bottom:.4rem; font-size:.79rem; }
.hero-caption .eyebrow.sub{ margin-top:.6rem; }
.hero-caption .brand-sub-word{ font-size:.9rem; }
.hero-caption .brand-tagline{ font-size:1.13rem; }

.expose-sheet{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  transform:translateY(100%) scale(.92);
  will-change:transform;
}
.expose-inner{
  background:var(--cream);
  color:#1c1a16;
  width:min(760px,86vw);
  max-height:82vh;
  overflow:hidden;
  padding:4.5rem 4rem;
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
.expose-kicker{
  font-family:var(--sans);
  letter-spacing:.4em;
  text-transform:uppercase;
  font-size:.7rem;
  color:var(--orange-deep);
  margin-bottom:1.2rem;
}
.expose-inner h2{
  color:#161410;
  font-size:clamp(1.8rem,4vw,2.6rem);
  margin-bottom:.6rem;
}
.expose-tagline{
  font-family:var(--serif);
  font-style:italic;
  color:var(--orange-deep);
  font-size:1.1rem;
  margin-bottom:1.6rem;
}
.expose-rule{
  width:60px; height:2px;
  background:var(--orange);
  margin-bottom:1.8rem;
}
.expose-text{
  font-family:var(--serif);
  font-style:italic;
  color:#3a352c;
  font-size:1.05rem;
  margin-bottom:1.2rem;
}


/* ============ STATS ============ */
#kennzahlen{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-grid{
  margin-top:3.5rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  text-align:center;
}
.stat{
  padding:2rem 1rem;
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.stat:first-child{ border-left:none; }
.stat-number{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.9rem,3.4vw,3.2rem);
  color:var(--orange);
  font-weight:600;
  white-space:nowrap;
  line-height:1.1;
}
.stat-label{
  display:block;
  margin-top:.6rem;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cream-dim);
}

/* ============ PAKETE ============ */
#pakete{ background:var(--bg); }
#pakete h2{ margin-top:1rem; margin-bottom:0; }
.pakete-intro{
  max-width:56ch;
  margin:1.2rem auto 0;
  text-align:center;
  color:var(--cream-dim);
}

/* Pakete laufen jetzt – wie die Objekte – als Endlos-Karussell.
   Die Karten bekommen im Flex-Track eine feste Breite und gleiche Höhe. */
.pakete-carousel .paket-card{
  flex:0 0 auto;
  width:400px;               /* breit genug, dass 4 Karten den Bildschirm füllen */
  max-width:82vw;
  display:flex;              /* damit .paket-card-inner die volle Höhe füllt */
}
.pakete-carousel .paket-card-inner{ width:100%; }

.paket-card{
  --mx:50%;
  --my:50%;
  position:relative;
  background:var(--bg-alt);
  border:1px solid rgba(243,237,225,.28);
  border-radius:8px;
  cursor:pointer;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease, border-color .3s ease;
}
.paket-card.is-visible{ opacity:1; transform:translateY(0); }
.paket-card:hover{ transform:translateY(-6px); border-color:rgba(243,237,225,.4); }
.paket-card.is-highlighted{ background:var(--bg-raise); border-color:rgba(255,106,26,.5); }

/* Spotlight-Effekt: ein weicher, oranger Lichtschein am Rahmen, der genau der
   Cursor-Position folgt (siehe Referenzvideo) — kein Umlauf, kein Dauerlicht. */
.paket-card::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1.5px;
  background:radial-gradient(180px circle at var(--mx) var(--my), var(--orange), transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.paket-card:hover::before{ opacity:1; }

.paket-card-inner{
  position:relative;
  border-radius:inherit;
  padding:2.4rem 2rem;
  height:100%;
  display:flex;
  flex-direction:column;
}

.paket-badge{
  position:absolute;
  top:-.75rem;
  left:50%;
  transform:translateX(-50%);
  background:var(--orange);
  color:var(--bg);
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.4rem .9rem;
  border-radius:99px;
  white-space:nowrap;
  z-index:3;
}

.paket-name{
  font-size:1.4rem;
  text-align:center;
}
.paket-price{
  font-family:var(--serif);
  font-size:2.2rem;
  color:var(--orange);
  text-align:center;
  margin-top:.8rem;
}
.paket-price-note{
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--cream-dim);
  text-align:center;
  margin-bottom:1.6rem;
}

.paket-preview{
  list-style:none;
  border-top:1px solid var(--line);
  padding-top:1.4rem;
  flex-grow:1;
}
.paket-preview li{
  position:relative;
  padding-left:1.2rem;
  color:var(--cream-dim);
  font-size:.86rem;
  margin-bottom:.7rem;
  line-height:1.5;
}
.paket-preview li::before{
  content:'';
  position:absolute;
  left:0; top:.5em;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--orange);
}

.paket-link{
  display:block;
  margin-top:1.4rem;
  text-align:center;
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--orange);
}

.service-cta{
  display:inline-block;
  margin-left:.6rem;
  color:var(--orange);
  white-space:nowrap;
}

/* ============ PAKET-MODAL-INHALTE ============ */
.paket-modal-price{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  margin:.5rem 0 2.2rem;
  padding-bottom:1.6rem;
  border-bottom:1px solid var(--line);
}
.paket-modal-price strong{
  font-family:var(--serif);
  font-size:2.4rem;
  color:var(--orange);
}
.paket-modal-price span{
  color:var(--cream-dim);
  font-size:.85rem;
}

.paket-line.is-clickable{ cursor:pointer; }
.paket-line.is-clickable:hover{ color:var(--cream); }

.paket-example{
  margin-top:.9rem;
  max-width:360px;
}
.paket-example-img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  cursor:zoom-in;
  transition:opacity .3s ease;
}
.paket-example-img:hover{ opacity:.85; }
.paket-example-caption{
  display:block;
  margin-top:.5rem;
  font-size:.78rem;
  font-style:italic;
  color:var(--cream-dim);
}

.paket-modal-note{
  margin-top:1.6rem;
  padding:1rem 1.3rem;
  background:rgba(255,106,26,.08);
  border:1px solid rgba(255,106,26,.3);
  color:var(--cream);
  font-size:.88rem;
  border-radius:4px;
}

/* ============ INDIVIDUALPAKET-RECHNER ============ */
.calc-total-bar{
  position:sticky;
  top:-2.6rem;
  margin:.5rem -2.6rem 2rem;
  padding:1.4rem 2.6rem;
  background:rgba(19,19,19,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.5rem .8rem;
}
.calc-total-label{
  display:block;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:.3rem;
}
.calc-total-value{
  font-family:var(--serif);
  font-size:2rem;
  color:var(--cream);
}
.calc-total-hint{
  font-size:.75rem;
  color:var(--cream-dim);
}

.calc-group{ margin-top:2.2rem; }
.calc-group-title{
  font-size:1.05rem;
  margin-bottom:1rem;
  display:flex;
  align-items:baseline;
  gap:.7rem;
  flex-wrap:wrap;
}
.calc-group-note{
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:400;
}

.calc-list{ list-style:none; }
.calc-item{
  padding:.7rem 0;
  border-bottom:1px solid var(--line);
  color:var(--cream-dim);
  font-size:.92rem;
}
.calc-item:last-child{ border-bottom:none; }
.calc-item.is-included{
  display:flex;
  align-items:center;
  gap:.8rem;
  color:var(--cream-dim);
  opacity:.75;
}
.calc-mark{
  color:var(--orange);
  font-size:.85rem;
  flex:0 0 auto;
}

.calc-item label{
  display:flex;
  align-items:center;
  gap:.9rem;
  cursor:pointer;
  color:var(--cream-dim);
  transition:color .2s ease;
}
.calc-item label:hover{ color:var(--cream); }

.calc-checkbox{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
}
.calc-box{
  flex:0 0 auto;
  width:19px; height:19px;
  border:1px solid rgba(243,237,225,.35);
  border-radius:3px;
  position:relative;
  transition:background .2s ease, border-color .2s ease;
}
.calc-box::after{
  content:'';
  position:absolute;
  left:6px; top:2px;
  width:5px; height:9px;
  border:solid var(--bg);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  opacity:0;
  transition:opacity .15s ease;
}
.calc-checkbox:checked + .calc-box{
  background:var(--orange);
  border-color:var(--orange);
}
.calc-checkbox:checked + .calc-box::after{ opacity:1; }
.calc-checkbox:focus-visible + .calc-box{ outline:2px solid var(--orange); outline-offset:2px; }
.calc-item:has(.calc-checkbox:checked) label{ color:var(--cream); }

/* ============ HOME STAGING (im Modal) ============ */
.staging-intro{
  max-width:60ch;
  margin:0 auto 2.4rem;
  text-align:center;
  color:var(--cream-dim);
}

.compare-slider{
  position:relative;
  width:100%;
  max-width:980px;
  margin:0 auto;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:4px;
  border:1px solid var(--line);
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
}

.compare-image{ position:absolute; inset:0; }
.compare-image img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }

.compare-after{ z-index:1; }
.compare-before{ z-index:2; clip-path:inset(0 50% 0 0); }

.compare-label{
  position:absolute;
  bottom:1.1rem;
  padding:.4rem 1rem;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cream);
  background:rgba(10,10,11,.6);
  backdrop-filter:blur(6px);
  z-index:2;
}
.compare-before .compare-label{ left:1.1rem; }
.compare-after .compare-label{ right:1.1rem; }

.compare-handle{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  pointer-events:none;
}
.compare-handle-line{
  position:absolute;
  top:0; bottom:0; left:50%;
  width:2px;
  transform:translateX(-50%);
  background:var(--orange);
}
.compare-handle-grip{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:46px; height:46px;
  border-radius:50%;
  background:var(--orange);
  color:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}

.compare-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  z-index:4;
  -webkit-appearance:none;
  appearance:none;
}

/* ============ OBJEKTE ============ */
#objekte{ background:var(--bg-alt); overflow:hidden; }
#objekte h2{ margin-top:1rem; margin-bottom:0; }
.objekte-header{ padding-bottom:0; }
.carousel-hint{
  margin-top:1rem;
  font-size:.8rem;
  font-style:italic;
  color:var(--cream-dim);
}

.listing-carousel{
  overflow:hidden;
  padding:3.5rem 0 6rem;
  cursor:grab;
  touch-action:pan-y;
}
.listing-carousel.is-dragging{ cursor:grabbing; }

.listing-track{
  display:flex;
  gap:2rem;
  width:max-content;
  padding-left:2rem;
  will-change:transform;
  user-select:none;
  -webkit-user-select:none;
}

.listing-card{
  flex:0 0 auto;
  width:340px;
  background:var(--bg-raise);
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .4s ease, border-color .4s ease;
}
.listing-card:hover{ transform:translateY(-6px); border-color:var(--orange); }
.listing-card.is-clickable{ cursor:pointer; }
.listing-media{ aspect-ratio:4/3; overflow:hidden; }
.listing-media video,
.listing-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
  -webkit-user-drag:none;
  pointer-events:none;
}
.listing-card.is-clickable:hover .listing-media img{ transform:scale(1.06); }
.listing-info{ padding:1.6rem 1.6rem 2rem; }
.listing-location{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:.5rem;
}
.listing-price{ font-size:1.6rem; margin-bottom:.5rem; }
.listing-meta{ font-size:.85rem; color:var(--cream-dim); }
.listing-link{
  display:inline-block;
  margin-top:1rem;
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--orange);
}

/* ============ MIETOBJEKTE ============ */
.section-divider{
  max-width:1200px;
  margin:0 auto;
  border-top:1px solid var(--line);
}

#mietobjekte{ background:var(--bg); }
#mietobjekte h2{ margin-top:1rem; margin-bottom:3.5rem; }

.listing-grid-static{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
}

/* ============ EXPOSÉ-MODAL ============ */
.expose-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vh 1.5rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.expose-modal.is-open{ opacity:1; pointer-events:auto; }

.expose-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(6,6,7,.82);
  backdrop-filter:blur(6px);
}

.expose-modal-panel{
  position:relative;
  width:min(880px,100%);
  max-height:92vh;
  background:var(--bg-alt);
  border:1px solid var(--line);
  overflow:hidden;
  transform:translateY(24px) scale(.98);
  transition:transform .4s ease;
}
.expose-modal.is-open .expose-modal-panel{ transform:translateY(0) scale(1); }

.expose-modal-close{
  position:absolute;
  top:1rem; right:1rem;
  z-index:2;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid rgba(243,237,225,.3);
  background:rgba(10,10,11,.5);
  color:var(--cream);
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background .3s ease, border-color .3s ease;
}
.expose-modal-close:hover{ background:var(--orange); border-color:var(--orange); color:var(--bg); }

.expose-modal-scroll{
  max-height:92vh;
  overflow-y:auto;
}

.expose-modal-hero{
  position:relative;
  height:46vh;
  min-height:280px;
}
.expose-modal-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.expose-modal-hero-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.75) 100%);
}
.expose-modal-hero-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:2.4rem;
}
.expose-modal-hero-caption h2{
  font-size:clamp(2rem,4.5vw,3rem);
  margin-top:.3rem;
}
.expose-modal-location{
  color:var(--cream-dim);
  font-size:.9rem;
  margin-top:.4rem;
}

.expose-modal-body{ padding:2.6rem; }

.expose-modal-facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
  padding-bottom:2.2rem;
  margin-bottom:2.2rem;
  border-bottom:1px solid var(--line);
}
.expose-modal-facts div{ display:flex; flex-direction:column; gap:.3rem; }
.expose-modal-facts span{
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
}
.expose-modal-facts strong{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.15rem;
  color:var(--cream);
}

.expose-modal-text h3,
.expose-modal-highlights h3{
  font-size:1.3rem;
  margin-bottom:1rem;
}
.expose-modal-text p{
  color:var(--cream-dim);
  margin-bottom:1.1rem;
  max-width:65ch;
}
.expose-modal-text p:last-child{ margin-bottom:0; }

.expose-modal-highlights{ margin-top:2.2rem; }
.expose-modal-highlights ul{ list-style:none; }
.expose-modal-highlights li{
  position:relative;
  padding-left:1.4rem;
  color:var(--cream-dim);
  margin-bottom:.7rem;
  font-size:.95rem;
}
.expose-modal-highlights li::before{
  content:'';
  position:absolute;
  left:0; top:.55em;
  width:6px; height:6px;
  background:var(--orange);
  border-radius:50%;
}

.expose-modal-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem;
  margin-top:2.2rem;
}
.expose-modal-gallery img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  cursor:zoom-in;
  transition:opacity .3s ease, transform .3s ease;
}
.expose-modal-gallery img:hover{ opacity:.82; transform:scale(1.02); }

.expose-modal-cta{ margin-top:2.4rem; }

body.modal-open{ overflow:hidden; }

/* ============ LIGHTBOX (Galerie-Vergrößerung) ============ */
.lightbox{
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5vh 5vw;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,4,5,.94);
}
.lightbox-img{
  position:relative;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.lightbox-close{
  position:absolute;
  top:1.5rem; right:1.5rem;
  z-index:2;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(243,237,225,.3);
  background:rgba(10,10,11,.5);
  color:var(--cream);
  font-size:1.2rem;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background .3s ease, border-color .3s ease;
}
.lightbox-close:hover{ background:var(--orange); border-color:var(--orange); color:var(--bg); }

.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid rgba(243,237,225,.3);
  background:rgba(10,10,11,.5);
  color:var(--cream);
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background .3s ease, border-color .3s ease;
}
.lightbox-nav:hover{ background:var(--orange); border-color:var(--orange); color:var(--bg); }
.lightbox-prev{ left:1.5rem; }
.lightbox-next{ right:1.5rem; }
.lightbox.is-single .lightbox-nav{ display:none; }

@media (max-width:700px){
  .lightbox-nav{ width:42px; height:42px; font-size:1.4rem; }
  .lightbox-prev{ left:.6rem; }
  .lightbox-next{ right:.6rem; }
}

@media (max-width:700px){
  .expose-modal-facts{ grid-template-columns:repeat(2,1fr); }
  .expose-modal-gallery{ grid-template-columns:repeat(2,1fr); }
  .expose-modal-body{ padding:1.8rem; }
}

/* ============ FOOTER ============ */
#kontakt{ background:var(--bg); border-top:1px solid var(--line); }
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:3rem;
  padding-bottom:3rem;
}
.footer-brand{ text-align:center; }
.footer-sub{
  font-size:.7rem; letter-spacing:.4em; color:var(--orange); margin-top:.2rem;
}
.footer-claim{ margin-top:1.2rem; color:var(--cream-dim); max-width:30ch; margin-left:auto; margin-right:auto; }
.footer-heading{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--orange); margin-bottom:1rem;
}
.footer-col p{ color:var(--cream-dim); margin-bottom:.8rem; font-size:.92rem; }
.footer-col a:hover{ color:var(--orange); }

.footer-bottom{
  max-width:1200px;
  margin:0 auto;
  padding:1.6rem 2rem 2.4rem;
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  font-size:.75rem;
  color:var(--grey);
  letter-spacing:.04em;
}

.footer-link{
  background:none;
  border:none;
  padding:0;
  margin:0;
  font:inherit;
  font-size:.75rem;
  letter-spacing:.04em;
  color:var(--grey);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .3s ease;
}
.footer-link:hover{ color:var(--orange); }

.expose-modal-body-legal h2{
  font-size:1.8rem;
  margin:.5rem 0 2rem;
}
.expose-modal-body-legal h3{
  font-size:1rem;
  font-family:var(--serif);
  color:var(--cream);
  margin:1.7rem 0 .5rem;
}
.expose-modal-body-legal h3:first-of-type{ margin-top:0; }
.expose-modal-body-legal p{
  color:var(--cream-dim);
  font-size:.92rem;
  max-width:65ch;
  line-height:1.7;
}
.expose-modal-note{
  margin-top:2.2rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
  font-size:.8rem;
  font-style:italic;
  color:var(--grey);
}

/* ============ UNTERSEITEN (Wissen, News) ============ */
/* Diese Seiten haben keinen Hero – die fixierte Nav braucht dort eine
   dauerhaft lesbare Fläche und der Inhalt entsprechend Abstand nach oben. */
body.subpage #site-nav{
  background:rgba(10,10,11,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-links a.is-current{ color:var(--cream); }
.nav-links a.is-current::after{ width:100%; }

.page-head{
  background:var(--bg);
  padding:9.5rem 0 3.4rem;
  border-bottom:1px solid var(--line);
}
/* Sonst addiert sich die Grundpolsterung von .section-inner obendrauf */
.page-head .section-inner{ padding-top:0; padding-bottom:0; }
.page-head-title{
  font-size:clamp(2.2rem,5vw,3.4rem);
  margin-top:.5rem;
}
.page-head-intro{
  color:var(--cream-dim);
  max-width:62ch;
  margin-top:1.3rem;
}

/* ============ WISSEN A–Z (LEXIKON) ============ */
#wissen{ background:var(--bg-alt); position:relative; z-index:2; }
#wissen .section-inner,
#news .section-inner{ padding-top:4.5rem; }
.wissen-abc{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.4rem;
  margin-bottom:3.4rem;
  padding-bottom:2rem;
  border-bottom:1px solid var(--line);
}
.wissen-letter{
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--cream-dim);
  width:2.1rem;
  height:2.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:2px;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.wissen-letter:hover{
  color:var(--bg);
  background:var(--orange);
  border-color:var(--orange);
}
.wissen-letter.is-locked{ color:var(--grey); opacity:.55; }

.wissen-group{ margin-bottom:3.2rem; scroll-margin-top:6rem; }
.wissen-group-head{
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin-bottom:1.6rem;
}
.wissen-group-letter{
  font-family:var(--serif);
  font-size:2.6rem;
  line-height:1;
  color:var(--orange);
}
.wissen-group-head::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--line);
}

.wissen-term-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.6rem 2.4rem;
}
.wissen-term{
  border-left:2px solid var(--line);
  padding-left:1.2rem;
  transition:border-color .3s ease;
}
.wissen-term:hover{ border-left-color:var(--orange); }
.wissen-term-title{
  font-family:var(--serif);
  font-size:1.06rem;
  font-weight:500;
  color:var(--cream);
  margin-bottom:.45rem;
}
.wissen-term-text{
  color:var(--cream-dim);
  font-size:.9rem;
  line-height:1.7;
}

/* --- Freischalt-Sperre: Rest unscharf, Karte darüber --- */
.wissen-gate-wrap{ position:relative; }
.wissen-locked{
  max-height:560px;
  overflow:hidden;
  filter:blur(6px);
  opacity:.5;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 25%, transparent 94%);
  mask-image:linear-gradient(180deg, #000 0%, #000 25%, transparent 94%);
}
.wissen-gate{
  position:absolute;
  left:50%;
  top:44%;
  transform:translate(-50%,-50%);
  width:min(580px,92%);
  background:var(--bg-raise);
  border:1px solid var(--line);
  border-radius:3px;
  padding:2.8rem 2.4rem 2.2rem;
  text-align:center;
  box-shadow:0 30px 90px rgba(0,0,0,.65);
}
.wissen-gate h3{
  font-size:1.5rem;
  margin:.6rem 0 .9rem;
}
.wissen-gate-text{
  color:var(--cream-dim);
  font-size:.92rem;
  margin-bottom:1.6rem;
}
.wissen-gate-form{
  display:flex;
  gap:.6rem;
  justify-content:center;
  flex-wrap:wrap;
}
.wissen-gate-input{
  flex:1 1 240px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--cream);
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:300;
  padding:.85rem 1rem;
  transition:border-color .3s ease;
}
.wissen-gate-input::placeholder{ color:var(--grey); }
.wissen-gate-input:focus{ outline:none; border-color:var(--orange); }
.wissen-gate-btn{ flex:0 0 auto; }
.wissen-gate-error{
  color:var(--orange);
  font-size:.8rem;
  min-height:1.1rem;
  margin-top:.6rem;
}
.wissen-gate-note{
  color:var(--grey);
  font-size:.72rem;
  line-height:1.6;
  margin-top:.4rem;
}

/* ============ NEWS (BLOG) ============ */
#news{ background:var(--bg); position:relative; z-index:2; }
.blog-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.6rem;
}
.blog-card{
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:3px;
  cursor:pointer;
  transition:transform .3s ease, border-color .3s ease, background .3s ease;
}
.blog-card:hover,
.blog-card:focus-visible{
  transform:translateY(-4px);
  border-color:var(--orange);
  background:var(--bg-raise);
  outline:none;
}
.blog-card-inner{ padding:2rem 1.9rem; }
.blog-card-meta{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:1rem;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.blog-card-cat{ color:var(--orange); }
.blog-card-date{ color:var(--grey); }
.blog-card-date::before{ content:'· '; }
.blog-card-title{
  font-size:1.24rem;
  line-height:1.35;
  margin-bottom:.8rem;
}
.blog-card-teaser{
  color:var(--cream-dim);
  font-size:.9rem;
  line-height:1.7;
  margin-bottom:1.3rem;
}
.blog-card-link{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
}

/* --- Beitrag im Modal --- */
.blog-article-head{
  border-bottom:1px solid var(--line);
  padding-bottom:1.6rem;
  margin-bottom:1.8rem;
}
.blog-article-head h2{ font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.25; }
.blog-article-body h3{
  font-family:var(--serif);
  font-size:1.16rem;
  color:var(--cream);
  margin:1.9rem 0 .7rem;
}
.blog-article-body p{
  color:var(--cream-dim);
  font-size:.95rem;
  line-height:1.8;
  margin-bottom:1rem;
}
.blog-article-body strong{ color:var(--cream); font-weight:500; }
.blog-article-body em{ color:var(--grey); font-size:.88rem; }
.blog-article-note{
  margin-top:2.2rem;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
  color:var(--grey);
  font-size:.78rem;
  font-style:italic;
}

/* ============ RESPONSIVE ============ */

/* --- Navigation: Reiter bleiben in jeder Fenstergröße erreichbar ---
   Sie werden nie ausgeblendet, sondern zu einer horizontal wischbaren
   Leiste. Logo und Button behalten dabei ihre Form. */
.nav-links{
  flex:0 1 auto;
  min-width:0;              /* erlaubt Schrumpfen unter die Inhaltsbreite */
  flex-wrap:nowrap;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding-bottom:2px;
}
.nav-links::-webkit-scrollbar{ display:none; }
.nav-logo,
#site-nav .nav-cta{ flex:0 0 auto; }
.nav-links li{ flex:0 0 auto; scroll-snap-align:start; }
.nav-links a{ white-space:nowrap; }

/* Weiche Kante nur dort, wo tatsächlich noch Reiter außerhalb liegen –
   das Skript setzt --fade-l/--fade-r je nach Scrollposition. So wird der
   erste Reiter am Anfang nicht unnötig angeschnitten. */
.nav-links.is-overflowing{
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0, #000 var(--fade-l, 0px),
    #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
          mask-image:linear-gradient(90deg,
    transparent 0, #000 var(--fade-l, 0px),
    #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
}

@media (max-width:1100px){
  #site-nav{ padding:1.1rem 1.5rem; gap:1.2rem; }
  .nav-links{ gap:1.7rem; }
}

@media (max-width:900px){
  .section-inner{ padding:5.5rem 1.5rem; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:none; }
  .listing-card{ width:min(80vw,340px); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .expose-inner{ padding:2.8rem 1.8rem; }
  .wissen-term-list{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .wissen-gate{ padding:2.2rem 1.5rem 1.8rem; }
  .wissen-gate-form{ flex-direction:column; }
  /* In der Spalte wirkt flex-basis als Höhe – daher hier zurücksetzen */
  .wissen-gate-input{ flex:0 0 auto; width:100%; }
  .wissen-gate-btn{ width:100%; }
  .wissen-locked{ max-height:460px; }
  .page-head{ padding:8.5rem 0 3rem; }
}

/* --- Smartphone: Logo und Button oben, Reiter darunter über die
       volle Breite wischbar. So bleibt der Button unverändert. --- */
@media (max-width:640px){
  #site-nav{ flex-wrap:wrap; row-gap:.75rem; padding:.9rem 1rem; }
  .nav-logo{ order:1; }
  #site-nav .nav-cta{ order:2; }
  .nav-links{ order:3; flex:1 0 100%; gap:1.5rem; }

  .section-inner{ padding:4.5rem 1.15rem; }
  .pakete-carousel .paket-card{ width:min(80vw,300px); }
  .stats-grid{ grid-template-columns:1fr 1fr; gap:1.6rem; }
  .stat:nth-child(3){ border-left:none; }
  .footer-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .footer-bottom{
    flex-direction:column;
    align-items:center;
    gap:.6rem;
    text-align:center;
    padding:1.4rem 1.15rem 2rem;
  }
  .expose-modal{ padding:2vh .8rem; }
  .expose-modal-body{ padding:1.6rem 1.25rem; }
  .expose-modal-facts{ grid-template-columns:1fr 1fr; }
  .expose-modal-gallery{ grid-template-columns:1fr 1fr; }
  .expose-inner{ padding:2.2rem 1.4rem; }
  .blog-card-inner{ padding:1.7rem 1.35rem; }
  .wissen-group-letter{ font-size:2.1rem; }
  .page-head{ padding:7.5rem 0 2.6rem; }
}

/* Sehr schmale Geräte: Button darf etwas kompakter werden, damit er
   neben dem Logo nicht aus dem Bild läuft (Form bleibt gleich). */
@media (max-width:360px){
  #site-nav .nav-cta{ padding:.75rem 1rem; font-size:.66rem; }
  .nav-brand{ font-size:1.15rem; }
}

/* --- Querformat auf dem Smartphone: wenig Höhe, viel Breite --- */
@media (max-height:540px) and (orientation:landscape){
  .hero-caption{ bottom:7vh; }
  .hero-brand{ font-size:clamp(1.8rem,6vw,2.9rem); }
  .hero-caption .brand-tagline{ font-size:.95rem; margin-top:.7rem; }
  .hero-caption .brand-sub-word{ font-size:.75rem; }
  .expose-inner{ padding:1.7rem 2rem; max-height:86vh; overflow-y:auto; }
  .expose-modal{ padding:2vh 1rem; }
  .expose-modal-panel,
  .expose-modal-scroll{ max-height:96vh; }
  .page-head{ padding:6.5rem 0 2.2rem; }
  .section-inner{ padding-top:3.5rem; padding-bottom:3.5rem; }
}