/* Local, licensed Latin fonts: no render-blocking external stylesheet. */
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:100 1000; font-display:swap; src:url("assets/fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family:"DM Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("assets/fonts/dm-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"DM Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("assets/fonts/dm-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Marcellus"; font-style:normal; font-weight:400; font-display:swap; src:url("assets/fonts/marcellus-latin-400-normal.woff2") format("woff2"); }
/* Villa Aranka / Chapter V — a luminous architectural engraving.
   Dark ink on pale coastal blue, simple scroll zoom, no expensive paint filters. */
:root {
  --cream:#dbe9e9;
  --ivory:#edf6f5;
  --sea:#103b50;
  --deep:#071e30;
  --coral:#65bfca;
  --sage:#d4e7e8;
  --line:#b2d0d1;
  --muted:#58717d;
  --sea-glass:#93e0da;
  --shadow:#031b2b;
}
html { scroll-behavior:smooth; scroll-padding-top:20px; }
body { background:#071e30; color:var(--deep); }
::selection { background:#70d7d4; color:#082d3d; }
button:focus-visible,a:focus-visible { outline:2px solid #71d9da; outline-offset:4px; }
.top-anchor { position:absolute; top:0; left:0; width:1px; height:1px; pointer-events:none; }

/* The quiet, editorial navigation is a deliberate counterpoint to the hero. */
.site-header {
  height:91px; position:fixed; z-index:100; top:0; left:0; right:0;
  background:#edf5f3; border-bottom:1px solid #c8dedc;
  padding-inline:clamp(25px,5.5vw,98px);
  margin-bottom:0; transform:translate3d(0,0,0);
}
.brand-symbol svg { stroke:#1d92a3; transition:transform .5s cubic-bezier(.18,.8,.2,1); }
.brand:hover .brand-symbol svg { transform:translateY(-3px) rotate(-5deg); }
.brand-copy b { color:#133a4a; }
.brand-copy small { color:#267080; }
.nav a { color:#274955; transition:color .2s ease; }
.nav a:hover { color:#16879a; }
.nav .nav-cta {
  background:#10485a; color:#fff; border-radius:1px; position:relative; overflow:hidden;
  transition:background .3s ease,transform .3s ease;
}
.nav .nav-cta:hover { background:#14758a; transform:translateY(-2px); color:white; }
.nav .nav-cta:after,.primary-button:after,.contact-primary:after {
  content:""; position:absolute; height:2px; width:100%; left:0; bottom:0;
  background:#94ebe6; transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.1,1);
}
.nav .nav-cta:hover:after,.primary-button:hover:after,.contact-primary:hover:after { transform:scaleX(1); }

/* The chapter below rises underneath the hero while it cross-dissolves.
   No opaque interstitial or empty scroll viewport. */
.hero-sequence { position:relative; z-index:2; height:300svh; background:transparent; pointer-events:none; }
.hero {
  position:sticky; top:0; display:block; isolation:isolate;
  height:100svh; min-height:0; width:100%; padding:0; overflow:hidden;
  background:#0a2e42; pointer-events:auto;
}
.hero-visual {
  position:absolute; inset:0; z-index:0; min-height:0; width:100%;
  background:#0a2e42; overflow:hidden;
}
.hero-photo {
  position:absolute; inset:0 0 0 auto; width:70%; height:100%; display:block;
  object-fit:contain; object-position:50% 50%; padding:91px 0 45px; background:none;
  opacity:1; filter:none;
  transform:translate3d(0,0,0) scale(1); transform-origin:60% 50%; backface-visibility:hidden;
}
.hero-visual:after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(90deg,#0a2e42 0%,#0a2e42 32%,#0a2e42c4 39%,#0a2e4240 44%,transparent 59%);
}
.hero-copy {
  position:absolute; z-index:6; isolation:isolate;
  inset:auto auto 19% max(7.25vw,36px);
  width:min(570px,40%); padding:0; color:white;
  display:flex; flex-direction:column; align-items:start;
  background:none;
  opacity:1; transform:none;
}
.hero-copy:before { display:none; }
.hero-eyebrow { color:#b4e3e1; margin-bottom:18px; letter-spacing:.25em; text-shadow:0 2px 12px #03192866; }
.hero .eyebrow-line { background:#97e0de; width:43px; }
.hero h1 {
  color:#f4fbf9; font-size:clamp(88px,8.2vw,157px);
  line-height:.85; letter-spacing:-.085em; margin:0 0 30px;
  font-weight:400; text-shadow:0 6px 30px #041e2955;
}
.hero h1 em { display:block; color:#9fe6df; margin-left:0; transform:none; font-style:italic; letter-spacing:-.075em; }
.hero-period { color:#ecffff; }
.hero-intro { color:#eff9f7; font-size:clamp(14px,1.1vw,16px); line-height:1.8; max-width:460px; margin-bottom:25px; text-shadow:0 2px 12px #001b2b8a; }
.hero-actions { gap:25px; }
.hero-actions .primary-button {
  background:#96e1d8; color:#062d41;
  min-width:235px; padding:18px 23px;
  position:relative; border-radius:1px;
  transition:background .3s ease,transform .3s ease;
}
.hero-actions .primary-button:hover { background:#cbfff2; transform:translateY(-3px); }
.hero-actions .text-button { color:#edfafa; border-bottom:1px solid #c5e7df88; font-size:12px; }
.hero-actions .text-button:hover { color:#9debe2; }
.hero .photo-marker {
  top:9.4%; right:9.3%; background:#0e3e4cc9; border:1px solid #b2e8e085;
  font-size:8px; letter-spacing:.18em; padding:12px 14px; color:#e5faf6;
  display:flex; flex-direction:column; gap:7px; align-items:flex-start;

}
.hero .photo-marker small { font:400 8px var(--font-mono); letter-spacing:.13em; color:#d4ebe9; }

.hero-photo-caption { z-index:4; bottom:9.3%; right:9.3%; left:auto; color:#174554; background:#e6f3f0d8; padding:8px 12px; letter-spacing:.16em; font-family:var(--font-mono); font-size:8px; }
.hero-photo-caption i { width:42px; background:#28788c; }
.hero-side-label { position:absolute; top:49%; left:1.3%; z-index:5; writing-mode:vertical-rl; transform:rotate(180deg); font:500 9px var(--font-mono); color:#cbe9e8; letter-spacing:.25em; display:flex; gap:18px; align-items:center; }
.hero-side-label span { display:inline-block; width:1px; height:50px; background:#aadad88c; }
.hero-scroll-cue { position:absolute; right:8.3%; bottom:14%; z-index:6; display:flex; align-items:center; gap:13px; color:#194656; font:500 8px var(--font-mono); letter-spacing:.16em; text-shadow:0 1px 2px #ffffffcc; }
.scroll-track { display:inline-block; width:1px; height:45px; overflow:hidden; background:#245a6b77; }
.scroll-track span { display:block; width:100%; height:54%; background:#137788; animation:scrollHint 2.2s ease-in-out 3; }
@keyframes scrollHint { 0% { transform:translateY(-24px); } 85%,100% { transform:translateY(46px); } }
.hero-bottom {
  position:absolute; bottom:0; left:0; z-index:8; width:100%;
  height:45px; display:flex; gap:35px; justify-content:center; align-items:center;
  background:#082c3bec; color:#d5eceb; font:500 9px var(--font-mono); letter-spacing:.2em;
  border-top:1px solid #a0d7d326;
}
.hero-bottom i { display:block; width:25px; height:1px; background:#77c6c5; opacity:.8; }
/* Chapter I — intimate dark sea-green, not flat beige. */
.section-pad { padding:120px max(7.1vw,28px); }
.section-index { color:#208ea1; letter-spacing:.19em; }
.section-index span { color:#90c2c3; }
.intro {
  color:#eef9f7;
  background:
    linear-gradient(180deg,#0a2e42 0%,#0a2e42 60px,transparent 260px),
    radial-gradient(ellipse at 100% 5%,#237d8671,transparent 46%),
    linear-gradient(152deg,#0a2e42 5%,#0e4657 75%,#0b3549);
  position:relative; z-index:1; overflow:hidden;
  margin-top:-100svh;
}
.intro:before {
  content:"ARANKA"; position:absolute; top:7%; right:-3%;
  font:400 clamp(120px,19vw,330px) var(--font-display);
  letter-spacing:-.09em; color:transparent; -webkit-text-stroke:1px #b9f7eb16;
  pointer-events:none;
}
.intro .section-index { color:#8fe0dd; }
.intro-heading { position:relative; }
.intro-heading h2 em { color:#9adfd9; }
.intro-heading>p { color:#cde5e3; }
.tiny-flower { color:#8ecacb; }
.intro-grid { position:relative; }
.image-frame { border-radius:2px; }
.image-frame img { filter:none; transition:transform 1.3s cubic-bezier(.2,.75,.2,1); }
.image-frame:hover img { transform:scale(1.075); }
.image-frame small { background:#e2f2eced; color:#10465b; }
.intro-note {
  background:linear-gradient(142deg,#bce2dc,#d4eeeb);
  color:#0b3948;
  border-radius:1px;
}
.intro-note p { color:#174658; }
.sketch-flower { color:#177a8c; }
.intro-author { color:#416d76; }
.intro-facts,.intro-facts>div+div { border-color:#bfe8e63d; }
.intro-facts strong { color:#b6ede6; }
.intro-facts span { color:#c2dedd; }

/* Chapter II — sea-mist material and image-forward accommodation cards. */
.apartments {
  background:radial-gradient(ellipse at 95% 4%,#b2d7dc86,transparent 55%),#e0eeee;
  position:relative; color:#113b4b;
}
.apartments .section-top h2 em,.gallery .section-top h2 em { color:#138299; }
.apartments .section-top p,.gallery .section-top>p { color:#506a76; }
.apartment-grid { gap:30px; }
.apartment-card {
  background:#f5faf7; border:1px solid #c9e0df;
  box-shadow:0 30px 65px #174f6330;
  transition:translate .5s cubic-bezier(.2,.75,.2,1);
}
.apartment-card:hover { translate:0 -5px; }
.apartment-image { background:#8aaab5; overflow:hidden; }
.apartment-image img { filter:none; transition:transform 1.1s cubic-bezier(.12,.8,.2,1); }
.apartment-card:hover .apartment-image img { transform:scale(1.075); }
.apartment-card-shift .apartment-image img { transform:scale(1.4); transform-origin:50% 12%; }
.apartment-card-shift:hover .apartment-image img { transform:scale(1.49); }
.image-chip { background:#e9f8f5ef; color:#16647a; }
.apartment-meta { color:#25899a; }
.apartment-body h3 { color:#13495c; }
.apartment-body p { color:#58717a; }
.amenities { color:#517582; border-color:#d1e2e1; }
.amenities span::first-letter { color:#1c8ca0; }
.apartment-link { color:#12687b; }
.apartment-link:hover { color:#23a0b4; }
.apartment-disclaimer { color:#56737c; }

/* A true chapter transition: typography emerges from a deep blue horizon. */
.quote-band {
  min-height:550px; padding:125px 30px 99px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background:
    radial-gradient(ellipse at 50% 110%,#3daab0a8,transparent 57%),
    linear-gradient(145deg,#0a2b41,#07546a);
  isolation:isolate; overflow:hidden;
  color:#eefdf9;
}
.quote-band:before {
  content:""; position:absolute; bottom:-60vw; left:50%; transform:translateX(-50%);
  width:150vw; height:110vw; border-radius:50%; border:1px solid #b1e6e72d;
  box-shadow:0 0 0 90px #72d4d408,0 0 0 180px #72d4d406,0 0 0 270px #72d4d404;
  pointer-events:none;
}
.quote-decor { position:absolute; left:8%; top:-45px; color:#91e4e0; opacity:.16; font-size:360px;  }
.quote-prelude { color:#a5d7db; font:500 9px var(--font-mono); letter-spacing:.27em; text-transform:uppercase; margin-bottom:32px; }
.quote-copy { font-size:clamp(57px,6.4vw,104px); position:relative; }
.quote-copy em { color:#a9f1e6; }
.quote-line { width:1px; height:55px; margin-top:34px; background:linear-gradient(#8ddbd7,transparent); }
.quote-band>span { margin-top:17px; color:#c2e9e8; position:relative; }


/* Chapter III — photographic gallery in a cool blue-grey room. */
.gallery { background:#cee4e6; }
.gallery .section-top h2 { color:#123d52; }
.gallery .section-index { color:#177789; }
.gallery-item { box-shadow:0 15px 30px #12394729; border-radius:2px; }
.gallery-item img { filter:none; transition:transform 1.1s cubic-bezier(.18,.8,.2,1); }
.gallery-item:hover img { transform:scale(1.075); filter:none; }
.gallery-item:after { content:""; position:absolute; inset:8px; border:1px solid #ffffff52; pointer-events:none; }
.gallery-footnote { color:#365e6c; }
.g1 img { object-position:54% 44%; }.g2 img { object-position:45% 47%; }.g4 img { object-position:70% 52%; }

/* Chapter IV — the coastline, but through genuine local photography. */
.location {
  color:#ecf7f7; background:radial-gradient(circle at 2% 13%,#267d8a66,transparent 49%),#0b3043;
}
.location .section-index { color:#80cfce; }
.location .section-index span { color:#8ebcbd; }
.location h2 em { color:#a5e9e0; }
.location-copy>p { color:#c7dfde; }
.location-list,.location-list>div { border-color:#a7d7d64d; }
.location-list span { color:#8fdddc; }
.location-list small { color:#a8d0d0; }
.underlink { color:#f3ffff; border-color:#8bdad5; }
.location-visual { box-shadow:0 30px 65px #04152175; }
.location-visual:after { content:""; position:absolute; inset:12px; border:1px solid #f3ffff65; pointer-events:none; }
.location-image {
  background:linear-gradient(0deg,#0c304960,transparent 49%),
  url('assets/warnemuende-strand-leuchtturm.jpg') 62% 50% / cover no-repeat;
  filter:none;
}
.location-box { background:#e8f3f1; color:#0d4357; box-shadow:0 20px 35px #041b2b66; }
.location-box>span:not(.small-label) { color:#55737c; }
.small-label { color:#248b9b; }
.location-image-label { background:#edf9f3f0; color:#226577; }

/* Final chapter — luminous marine blue instead of rust. */
.contact {
  background:
    radial-gradient(circle at 79% 0%,#1691a2a1,transparent 38%),
    radial-gradient(circle at 8% 90%,#227f99a1,transparent 45%),
    #0b4c65;
  color:#f3fffd; isolation:isolate;
}
.contact:before,.contact:after { content:""; position:absolute; border-radius:50%; pointer-events:none; border:1px solid #a5e5e52f; }
.contact:before { width:800px;height:800px;left:-510px;top:-420px; }
.contact:after { width:1200px;height:1200px;right:-780px;bottom:-890px; }
.section-index.light { color:#b0e9e5; }
.contact-sun { color:#a4e8e0; font-size:56px; }
.contact h2 em { color:#aeefea; }
.contact p { color:#d0e9e9; }
.contact-primary { background:#c2f0e6; color:#0b4558; position:relative; overflow:hidden; }
.contact-primary:hover { background:#e2fff8; }
.contact-secondary { border-color:#a3d7d99d; }
.contact-secondary:hover { background:#c4edee21; }
.contact-inner>small { color:#b6e2e2; }
.contact-outline { color:#a0e5e50b; }

footer { background:#071f2e; color:#d3e7e6; }
.footer-upper>div { color:#afcfd0; }
.footer-bottom { color:#8fb4b8; max-width:100%; line-height:1.85; }
.footer-bottom span { max-width:49%; }
.footer-bottom a { text-decoration:underline; text-decoration-color:#57c0c666; text-underline-offset:3px; }
.footer-bottom a:hover { color:#d2fff8; }
.dialog-content { background:#edf6f5; }.detail-dialog { background:#edf6f5;color:#143f51; }
.detail-dialog .eyebrow { color:#177e91; }
.detail-dialog .primary-button { background:#0d5266; }
.lightbox { background:#071e30; }
.lightbox-prev,.lightbox-next { background:#0b3545cc; }

/* Lightweight section reveals: no large clip-path masks during scrolling. */
.js .reveal:not(.visible) { opacity:0; transform:translate3d(0,16px,0); }
.js .reveal { transition:opacity .65s ease-out,transform .72s cubic-bezier(.2,.72,.2,1); }
.js .reveal.visible { opacity:1; transform:none; }
.js .image-frame.reveal:not(.visible),.js .gallery-item.reveal:not(.visible) { clip-path:none; }
.js .image-frame.reveal.visible,.js .gallery-item.reveal.visible { clip-path:none; }
.js .gallery-item:nth-child(2) { transition-delay:.06s; }
.js .gallery-item:nth-child(3) { transition-delay:.1s; }
.js .gallery-item:nth-child(4) { transition-delay:.14s; }
.js .intro-grid .intro-note { transition-delay:.14s; }
.js .intro-grid .intro-photo-b { transition-delay:.12s; }
.js .apartment-card-shift.visible { transform:translateY(45px); }

@media (min-width:1600px) {
  .hero h1 { font-size:clamp(150px,8.2vw,177px); }
  .hero-copy { bottom:20%; }
}
@media (max-width:1190px) {
  .hero h1 { font-size:clamp(86px,8.2vw,120px); }
  .hero-copy { left:7vw; width:43%; }
  .hero-intro { font-size:14px; }
}
@media (max-width:930px) {
  .site-header { height:80px; margin-bottom:0; padding-inline:26px; }
  .menu-toggle { border-color:#bfd5d5; }
  .menu-toggle span { background:#13576b; }
  .nav { background:#edf6f5; }
  .nav a { border-color:#bfd5d5; }
  .hero h1 { font-size:clamp(85px,11vw,110px); }
  .hero-copy { width:48%; left:7%; bottom:18%; }
  .hero .photo-marker { right:7%; top:8%; }
  .hero-scroll-cue { bottom:11%; }
  .intro-heading { grid-template-columns:1fr 240px; }
}
@media (max-width:700px) {
  .site-header { height:75px; margin-bottom:0; padding-inline:20px; }
  .nav { top:75px; }
  .brand-copy b { font-size:27px; }
  .hero-sequence { height:300svh; }
  .intro { margin-top:-100svh; }
  .hero { height:100svh; min-height:0; display:block; padding:0; }
  .hero-visual { inset:0; height:100%; width:100%; min-height:0; max-height:none; margin:0; }
  .hero-photo {
    object-fit:contain; object-position:center top;
    width:100%; height:auto; aspect-ratio:3400 / 2288; top:75px; bottom:auto; padding:0;
    transform-origin:center 35%;
    transform:scale(1);
  }
  .hero-visual:after {
    inset:auto 0 auto; top:calc(75px + 100vw * .67294 - 25px); height:26px; background:linear-gradient(transparent,#0a2e42);
  }
  .hero-scroll-cue { color:#d2f2ef; text-shadow:none; }
  .scroll-track { background:#ffffff45; }
  .scroll-track span { background:#b8f6ec; }
  .hero .photo-marker { display:none; }
  .hero-copy { left:8%; right:8%; top:52%; bottom:auto; width:84%; padding:0; }
  .hero-eyebrow { font-size:7px; margin-bottom:10px; letter-spacing:.1em; }
  .hero .eyebrow-line { width:25px; }
  .hero h1 { font-size:clamp(68px,17vw,100px); line-height:.88; margin-bottom:15px; }
  .hero-intro { font-size:12.7px; line-height:1.65; max-width:360px; margin-bottom:15px; }
  .hero-actions { gap:10px; }
  .hero-actions .primary-button { min-width:0; padding:15px 16px; gap:12px; font-size:10px; }
  .hero-actions .text-button { font-size:9.5px; gap:8px; }
  .hero-side-label,.hero-photo-caption { display:none; }
  .hero-scroll-cue { right:8%; bottom:6%; font-size:7px; gap:9px; }
  .scroll-track { height:26px; }
  .hero-bottom { height:32px; gap:8px; font-size:6.4px; letter-spacing:.045em; }
  .hero-bottom i { width:12px; }
  .section-pad { padding:86px 23px; }
  .intro-heading { display:block; margin:18px 0 40px; }
  .intro-heading h2,.section-top h2 { font-size:clamp(45px,9.4vw,63px); }
  .intro-heading p { max-width:430px; margin:24px 0 0; }
  .intro-grid { grid-template-rows:320px 205px; }
  .intro-photo-a img { object-position:42% 44%; }
  .intro-note { padding:17px; }
  .intro-note p { font-size:17px; }
  .intro-note .sketch-flower { font-size:29px; }
  .intro-facts strong { font-size:40px; }
  .apartment-grid { display:block; }
  .apartment-card { margin-bottom:29px; }
  .apartment-card:hover { translate:0 -3px; }
  .apartment-card-shift { transform:none; }
  .js .apartment-card-shift.visible { transform:none; }
  .apartment-image { height:285px; }
  .apartments .section-top p { color:#506a76; }
  .quote-band { min-height:395px; padding:70px 20px 67px; }
  .quote-prelude { font-size:7px; letter-spacing:.15em; margin-bottom:27px; }
  .quote-copy { font-size:clamp(40px,8.7vw,67px); }
  .quote-decor { font-size:220px; top:-20px; }
  .quote-band:before { width:160vw; height:120vw; bottom:-71vw; }
  .gallery .section-top>p { color:#506a76; }
  .location { display:flex; flex-direction:column; gap:45px; }
  .location h2 { font-size:clamp(42px,9vw,60px); }
  .location-copy>p { color:#d0e6e4; }
  .location-visual { max-width:100%; box-shadow:0 20px 40px #0417247a; }
  .location-box { max-width:calc(100vw - 52px); }
  .contact { padding:90px 20px 112px; }
  .contact h2 { font-size:clamp(61px,10.8vw,84px); }
  .footer-bottom span { max-width:none; }
}
@media (max-width:380px) {
  .hero-copy { top:50%; }
  .hero h1 { font-size:68px; }
  .hero-actions .text-button { display:none; }
  .hero-scroll-cue { bottom:6%; }
}
/* Only the active full-screen sequence reserves compositor layers. */
.hero-sequence.is-active .hero-photo { will-change:transform; }
.hero-sequence.is-active .hero { will-change:opacity; }
.site-header:focus-within { transform:none!important; }
.hero-sequence:not(.is-active) .hero { will-change:auto; }
.quote-copy,.quote-prelude,.quote-line { position:relative; }
/* Static sea-mist edges connect chapters without another scroll loop or masks. */
.apartments { background:linear-gradient(#c8dfe1,#e0eeee 130px); }
.gallery { background:linear-gradient(#b6d5dc,#cee4e6 150px); }
.location { background:linear-gradient(#123d52,#0b3043 180px); }
.contact { background:linear-gradient(#0b3043,#0b4c65 180px); }
.image-chip,.photo-marker { backdrop-filter:none; }
dialog::backdrop { backdrop-filter:none; background:#071e30d9; }
@media (hover:none) {
  .apartment-card:hover { translate:none; }
  .image-frame:hover img,.gallery-item:hover img { transform:none; }
}
@media (max-width:700px) {
  .hero-visual { background:#0a2e42; }
}
@media (max-height:740px) and (min-width:701px) {
  .hero-copy { bottom:13%; }
  .hero h1 { font-size:clamp(75px,8vw,115px); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .site-header { position:relative; transform:none!important; }
  .hero-sequence { height:auto; }
  .hero { height:max(600px,100svh); opacity:1!important; }
  .intro { margin-top:0; }
  .hero-photo { transform:none!important; will-change:auto!important; }
  .hero,.hero-copy { will-change:auto!important; }
  .js .reveal { opacity:1!important; transform:none!important; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}

.arrow { display:inline-block; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; vertical-align:middle; flex-shrink:0; }
html:not(.js) .hero-sequence { height:auto; }
html:not(.js) .hero { position:relative; }
html:not(.js) .intro { margin-top:0; }
html:not(.js) .site-header { position:relative; }

.footer-brand .brand-copy small { color:#92c9cf; }

@media (min-width:701px) {
 .hero-visual::before { content:""; position:absolute; inset:0 0 0 28%; background:#fff; }
}

/* Ruhige, gut lesbare Beschriftungen über alle Kapitel hinweg. */
.hero .photo-marker { font:600 11px/1.45 var(--font-body); letter-spacing:.04em; }
.hero .photo-marker small { font:400 11px/1.45 var(--font-body); letter-spacing:.025em; }
.eyebrow,.section-index,.photo-marker,.hero-photo-caption,.hero-side-label,.hero-scroll-cue,
.hero-bottom,.image-frame small,.intro-author,.intro-facts span,.apartment-meta,.image-chip,
.apartment-disclaimer,.quote-prelude,.quote-band>span,.gallery-item span,.gallery-footnote,
.small-label,.location-box .location-coord,.location-image-label,.contact-inner>small,.footer-bottom,
.brand-copy small { letter-spacing:.05em; }
.hero-photo-caption,.image-frame small,.intro-author,.apartment-meta,.image-chip,
.gallery-item span,.gallery-footnote,.small-label,.location-image-label { font-size:10px; }