/* ===== Schriften: lokal ausgeliefert, keine Verbindung zu Google =====
   Gleiche Dateien wie auf roggan-immo.de (dort ausdrücklich aus
   Datenschutzgründen lokal gehostet, siehe Datenschutzerklärung §7). */
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/HostGrotesk-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/HostGrotesk-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/HostGrotesk-500-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/HostGrotesk-500-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/HostGrotesk-600-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/HostGrotesk-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/HostGrotesk-700-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/HostGrotesk-700-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(fonts/InstrumentSans-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(fonts/InstrumentSans-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(fonts/InstrumentSans-500-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(fonts/InstrumentSans-500-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(fonts/InstrumentSans-600-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(fonts/InstrumentSans-600-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/LibreCaslonText-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Libre Caslon Text';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/LibreCaslonText-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ===== Tokens ===== */
:root{
  --bg:#FBFAF8;
  --sand1:#EDE5D9;
  --sand2:#DFD3C1;
  --sandgrey:#E7E3DB;
  --ink:#131211;
  --ink2:#1C1A18;
  --text:#57514A;
  --mute:#9C958B;
  --line:#DDD8CF;
  --rule:rgba(19,18,17,.13);
  --rule2:rgba(19,18,17,.08);
  --dline:rgba(251,250,248,.16);
  --dline2:rgba(251,250,248,.10);
  --hf:'Host Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --bf:'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --sf:'Libre Caslon Text', Georgia, serif;
  --maxw:1180px;
  --e:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--bf);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--hf);
  color:var(--ink);
  font-weight:700;
  letter-spacing:-0.038em;
  margin:0 0 .5em;
  text-wrap:balance;
  line-height:1.05;
}
h2{font-size:clamp(1.8rem,3.2vw,2.5rem);}
h3{font-size:1.05rem;font-weight:600;letter-spacing:-0.03em;}
p{margin:0 0 1em;}
em{font-family:var(--sf);font-style:italic;color:var(--mute);font-weight:400;}

.kicker{
  font-family:var(--bf);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 .6em;
}
.kicker-light{color:rgba(255,255,255,.82);}
.accent-line{
  font-family:var(--sf);
  font-style:italic;
  color:var(--mute);
  font-size:1.25rem;
  margin:0 0 1em;
}
.lead-text{max-width:56ch;font-size:1.02rem;}
.muted-note{color:var(--mute);font-size:.88rem;max-width:60ch;}
.fine-print{color:var(--mute);font-size:.75rem;max-width:75ch;line-height:1.5;}

.hair{border:none;border-top:1px solid var(--line);margin:1.6rem 0;}

/* ===== Buttons & Links (wie auf roggan-immo.de: Beige läuft von unten hoch) ===== */
.btn-primary,.nav-cta{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--ink);color:var(--bg);
  font-family:var(--hf);font-weight:600;font-size:.92rem;
  padding:.9rem 1.6rem;border-radius:999px;border:none;cursor:pointer;
  text-decoration:none;text-align:center;white-space:nowrap;
  transition:color .35s ease;
}
.btn-primary > *,.nav-cta > *{position:relative;z-index:2;}
.btn-primary::after,.nav-cta::after{
  content:"";position:absolute;inset:-1px;z-index:1;border-radius:999px;
  background:var(--sand2);transform:translateY(101%);
  transition:transform .55s var(--e);
}
.btn-primary:hover,.nav-cta:hover{color:var(--ink);opacity:1;}
.btn-primary:hover::after,.nav-cta:hover::after{transform:translateY(0);}
.btn-primary:focus-visible,.nav-cta:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px;}

/* Kreis-Pfeil-Link ("tl"): Text + kleiner umrandeter Kreis, dreht sich beim Hover */
.arrow-link{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--bf);font-weight:500;font-size:.9rem;color:var(--ink);
  text-decoration:none;white-space:nowrap;
}
.arrow-link .circ{
  width:30px;height:30px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:.85rem;line-height:1;
  box-shadow:inset 0 0 0 1px var(--rule);color:inherit;
  transition:background .4s ease,color .4s ease,box-shadow .4s ease,transform .55s var(--e);
}
.arrow-link:hover .circ{background:var(--ink);color:var(--bg);box-shadow:none;transform:rotate(-45deg);}
.arrow-link.small{font-size:.82rem;gap:.55rem;}
.arrow-link.small .circ{width:25px;height:25px;font-size:.75rem;}
.arrow-link.on-dark{color:var(--bg);}
.arrow-link.on-dark .circ{box-shadow:inset 0 0 0 1px var(--dline);}
.arrow-link.on-dark:hover .circ{background:var(--bg);color:var(--ink);}
.arrow-link[hidden]{display:none!important;}

/* ===== Layout ===== */
.section-inner{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;}
.section-inner.narrow{max-width:640px;text-align:center;}
.section{padding:5.5rem 0;}
.section.alt{background:var(--sand1);}
.section-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.5rem;}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.site-header.stuck{
  background:rgba(251,250,248,.86);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--rule2);
}
.header-inner{
  position:relative;
  max-width:var(--maxw);margin:0 auto;padding:1.1rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  transition:padding .5s var(--e);
}
.site-header.stuck .header-inner{padding-block:.75rem;}
/* backdrop-filter erzeugt einen eigenen containing block für
   position:fixed-Kinder (hier: das Vollbild-Mobilmenü) — beim geöffneten
   Menü daher deaktivieren, siehe script.js. */
.site-header.nav-freeze{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.header-progress{
  position:absolute;left:0;bottom:-1px;height:1.5px;width:100%;
  transform:scaleX(0);transform-origin:left;background:var(--ink);opacity:0;
  transition:opacity .4s ease;
}
.site-header.stuck .header-progress{opacity:1;}
.brand{display:flex;align-items:center;gap:.9rem;color:inherit;text-decoration:none;}
.brand:focus-visible{outline:2px solid currentColor;outline-offset:5px;}
.brand-mark{height:26px;width:auto;}
.brand-mark.small{height:24px;}
.brand-sep{width:1px;height:22px;background:#7A6B60;opacity:.5;}
.brand-tag{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);}
.main-nav{display:flex;align-items:center;gap:1.5rem;}
.main-nav a{
  font-size:.85rem;color:var(--text);text-decoration:none;
  padding:.3rem 0;border-bottom:1px solid transparent;
  transition:border-color .15s ease,color .15s ease;
  white-space:nowrap;
}
.main-nav a:hover{border-color:var(--mute);}
.nav-sep{width:1px;height:18px;background:var(--line);flex:0 0 auto;}
/* Selektor mit ".main-nav a" qualifiziert (statt nur ".nav-download"), damit
   das Padding nicht von der allgemeineren Regel ".main-nav a{padding:.3rem 0;}"
   überschrieben wird — beide Regeln setzen "padding" als Shorthand, und ohne
   diese Qualifizierung gewinnt ".main-nav a" (Klasse+Element schlägt reine
   Klasse), wodurch die Pille links/rechts komplett ohne Innenabstand war. */
.main-nav a.nav-download{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--hf);font-weight:600;font-size:.78rem!important;color:var(--ink)!important;
  background:var(--sand1);border:1px solid var(--rule2)!important;border-radius:999px;
  padding:.68rem 1.25rem .68rem 1.4rem;margin:0;cursor:pointer;white-space:nowrap;
  flex:none;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.nav-download .dl-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--bg);
  font-size:.62rem;line-height:1;transition:background .25s ease,color .25s ease;
}
.nav-download:hover{background:var(--ink);color:var(--bg)!important;border-color:var(--ink)!important;}
.nav-download:hover .dl-arrow{background:var(--bg);color:var(--ink);}
.nav-download[hidden]{display:none!important;}
.main-nav a.nav-unlock{white-space:nowrap;}
.nav-cta{padding:.6rem 1.15rem!important;font-family:var(--bf);font-size:.85rem;}
.nav-toggle{position:relative;z-index:61;display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:.4rem;}
.nav-toggle span{width:22px;height:2px;background:var(--ink);display:block;transition:transform .3s var(--e),opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ===== Hero ===== */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;}
.hero-media{position:absolute;inset:0;}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(19,18,17,.35) 0%, rgba(19,18,17,.12) 32%, rgba(19,18,17,.55) 100%);
}
.hero-content{position:relative;padding:9rem 1.5rem 2rem;max-width:var(--maxw);margin:0 auto;width:100%;}
.hero-title{
  color:#fff;font-size:clamp(1.9rem,4.4vw,3.1rem);
  line-height:1.12;margin:0;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
.hero-title .soft{color:rgba(255,255,255,.78);font-style:normal;}
.hero-footer{
  position:relative;background:rgba(19,18,17,.55);
  backdrop-filter:blur(6px);
  padding:1.8rem 1.5rem 2.2rem;
}
.hero-address{color:#fff;font-size:clamp(1.1rem,2vw,1.4rem);font-weight:600;max-width:var(--maxw);margin:0 auto .3em;}
.hero-stats{max-width:var(--maxw);margin:0 auto;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.25);}
.hero-stats .stat-label{color:rgba(255,255,255,.6);}
.hero-stats .stat-value{color:#fff;}

/* ===== Stats ===== */
.stat-row{display:grid;gap:1.2rem;}
.stat-row.four{grid-template-columns:repeat(4,1fr);}
.stat-row.five{grid-template-columns:repeat(5,1fr);}
.stat{display:flex;flex-direction:column;gap:.3rem;}
.stat-label{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);}
.stat-value{font-family:var(--hf);font-weight:700;font-size:1.35rem;color:var(--ink);letter-spacing:-.01em;}
.stat-panel{background:var(--sand1);border-radius:4px;padding:1.4rem 1.6rem;margin:1.8rem 0;}
.section.alt .stat-panel{background:var(--bg);}

/* ===== Tables ===== */
.facts-table{width:100%;border-collapse:collapse;margin-top:1rem;}
.facts-table tr{border-bottom:1px solid var(--line);}
.facts-table tr:last-child{border-bottom:none;}
.facts-table td{padding:.75rem .4rem;vertical-align:top;}
.facts-table .f-label{color:var(--mute);font-size:.85rem;width:38%;}
.facts-table .f-value{font-family:var(--hf);font-weight:600;color:var(--ink);font-size:.98rem;}
.facts-table.compact td{padding:.55rem .3rem;font-size:.9rem;}
.facts-table.compact .f-value{font-weight:500;font-size:.9rem;}

.rent-table-wrap{overflow-x:auto;margin-top:1.5rem;}
.rent-table{width:100%;border-collapse:collapse;min-width:540px;}
.rent-table th{
  text-align:right;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);font-weight:500;padding:.6rem .5rem;border-bottom:1.5px solid var(--ink);
}
.rent-table th:first-child,.rent-table td:first-child{text-align:left;}
.rent-table td{text-align:right;padding:.7rem .5rem;border-bottom:1px solid var(--line);font-size:.92rem;}
.rent-table tr.total td{font-family:var(--hf);font-weight:700;color:var(--ink);border-top:1px solid var(--ink);border-bottom:none;}

/* ===== Highlights / two-col ===== */
.highlight-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:1.2rem;}
.highlight-grid[hidden]{display:none!important;}
.highlight{border-top:1px solid var(--line);padding-top:.8rem;}
.highlight h3{margin-bottom:.3rem;}
.highlight p{font-size:.88rem;margin:0;}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:1.5rem;}
.two-col p{font-size:.95rem;}
.two-col[hidden]{display:none!important;}

.pull-quote{
  font-family:var(--sf);font-style:italic;color:var(--ink);
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.4;
  max-width:52ch;margin:3rem 0 0;border:none;padding:0;
}
.pull-quote cite{display:block;font-family:var(--bf);font-style:normal;font-size:.85rem;color:var(--mute);margin-top:1rem;}

/* ===== Impressionen (horizontale Foto-Galerie) ===== */
.photo-section{padding-bottom:2.4rem;}
.photo-scroll{
  display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 1.5rem 1.2rem;scroll-padding-left:1.5rem;
  -webkit-overflow-scrolling:touch;
}
.photo-scroll[hidden]{display:none!important;}
.photo-scroll::-webkit-scrollbar{height:6px;}
.photo-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
.photo-scroll figure{flex:0 0 auto;width:min(78vw,420px);margin:0;scroll-snap-align:start;}
.photo-frame{position:relative;border-radius:10px;overflow:hidden;background:var(--sand1);}
.photo-frame img{display:block;width:100%;height:300px;object-fit:cover;cursor:zoom-in;}
/* Round 4: kein Pill/Blur-Badge mehr (die Unschärfe des Foto-Hintergrunds
   hinter dem transluzenten, geblurrten Pill erzeugte je nach Motiv
   störende, diagonale "Strich"-Artefakte quer durchs Logo). Stattdessen,
   wie vom Kunden gewünscht: reiner, halbtransparenter Schriftzug direkt
   auf dem Foto. Round 5: mittig (nicht mittig-links) positioniert, wie
   vom Kunden präzisiert. */
.photo-badge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.photo-badge img{
  /* Das normale, offizielle Logo des Kunden (Farbversion aus dem
     Logo-Paket) -- ohne Sonderbehandlung, nur als halbtransparenter
     Schriftzug direkt auf dem Foto, wie ursprünglich gewünscht. */
  height:26px;width:auto;opacity:.8;display:block;cursor:default;
  filter:drop-shadow(0 1px 2px rgba(19,18,17,.25));
}

.photo-scroll figcaption{margin-top:.65rem;font-size:.82rem;color:var(--mute);}
.photo-nav{display:flex;gap:.6rem;padding-top:.2rem;}
.photo-nav[hidden]{display:none!important;}
.circ-btn{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.95rem;line-height:1;box-shadow:inset 0 0 0 1px var(--rule);color:var(--ink);
  background:var(--bg);cursor:pointer;transition:background .35s ease,color .35s ease,box-shadow .35s ease,transform .5s var(--e);
}
.circ-btn:hover{background:var(--ink);color:var(--bg);box-shadow:none;}

/* ===== Photos ===== */
.banner-photo{margin:3.5rem 0 0;}
.banner-photo img{width:100%;height:auto;max-height:60vh;object-fit:cover;}
.banner-photo figcaption{
  max-width:var(--maxw);margin:0 auto;padding:.6rem 1.5rem 0;
  font-size:.8rem;color:var(--mute);
}
.banner-photo.full-bleed{margin-top:4rem;}
.banner-photo.full-bleed img{max-height:46vh;}

.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem;}
.gallery-grid figure{margin:0;}
.gallery-grid .g-wide{grid-column:1 / -1;}
.gallery-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.gallery-grid .g-wide img{aspect-ratio:16/8;}
.apt-gallery img{aspect-ratio:4/5;}
.apt-gallery .g-wide img{aspect-ratio:16/8;}
.gallery-grid figcaption{font-size:.78rem;color:var(--mute);margin-top:.5rem;}

.map-image{width:100%;border-radius:4px;margin:2rem 0 1.5rem;border:1px solid var(--line);}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;}

.rl-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:1.5rem;}

/* ===== Lead form / downloads ===== */
.lead-form{margin-top:2rem;text-align:left;}
.form-row{margin-bottom:1.1rem;}
.form-row label{display:block;font-size:.8rem;color:var(--mute);margin-bottom:.35rem;}
.form-row .optional{font-weight:400;}
.form-row input{
  width:100%;padding:.75rem .9rem;border:1px solid var(--line);border-radius:4px;
  background:var(--bg);color:var(--ink);font-family:var(--bf);font-size:.95rem;
}
.form-row input:focus{outline:2px solid var(--ink);outline-offset:1px;}
.btn-primary{width:auto;}
.form-note{font-size:.72rem;color:var(--mute);margin-top:1rem;text-align:center;}
.form-note a{color:var(--text);text-decoration:underline;}

.download-area{margin-top:2rem;}
.download-success{font-family:var(--hf);font-weight:600;color:var(--ink);}
.download-links{display:flex;flex-direction:column;gap:.8rem;}
.btn-download{
  display:flex;align-items:center;gap:1rem;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);
  padding:1rem 1.2rem;text-decoration:none;color:var(--ink);text-align:left;
  transition:border-color .25s ease,background .25s ease,transform .5s var(--e),box-shadow .35s ease;
}
.btn-download:hover{border-color:var(--ink);box-shadow:0 10px 24px -16px rgba(19,18,17,.35);transform:translateY(-2px);}
.btn-download .dl-icon{
  flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--sand1);font-size:1.1rem;transition:background .35s ease,color .35s ease;
}
.btn-download:hover .dl-icon{background:var(--ink);color:var(--bg);}
.btn-download .dl-text{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.btn-download span{font-family:var(--hf);font-weight:700;font-size:.98rem;}
.btn-download small{color:var(--mute);font-size:.78rem;}

/* ===== Kontakt ===== */
.contact-grid{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:start;margin-top:2rem;}
.contact-card{background:var(--bg);border-radius:6px;padding:1.8rem 2rem;max-width:420px;}
.contact-brand{margin-bottom:1.2rem;}
.contact-name{font-family:var(--hf);font-weight:700;font-size:1.1rem;color:var(--ink);margin:0;}
.contact-company{font-size:.85rem;color:var(--mute);margin:0 0 1rem;}
.contact-table a{text-decoration:none;border-bottom:1px solid var(--line);}
.contact-table a:hover{border-color:var(--ink);}
.contact-downloads{margin-top:.8rem;max-width:340px;}
.contact-downloads .btn-download[hidden]{display:none!important;}

/* ===== Footer (dunkel, wie roggan-immo.de) ===== */
.site-footer{background:var(--ink);color:var(--bg);border-top:none;padding:4rem 0 2rem;}
.site-footer .brand-mark{filter:brightness(0) invert(1);}
.site-footer .brand-tag{color:#A8A199;}
.site-footer .brand-sep{background:#6B6459;}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:2.4rem;}
.footer-grid h4{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:#8A8279;margin-bottom:.7rem;font-weight:600;}
.footer-grid p{font-size:.85rem;color:#C6C0B7;line-height:1.65;}
.footer-grid a{color:#C6C0B7;text-decoration:underline;text-underline-offset:3px;}
.footer-grid a:hover{color:var(--bg);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.9rem;
  margin-top:2.8rem;padding-top:1.3rem;border-top:1px solid var(--dline2);
  font-size:.76rem;color:#8A8279;
}
.footer-bottom a{text-decoration:none;color:#C6C0B7;}
.footer-bottom a:hover{color:var(--bg);}
.footer-legal-links{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;}
.footer-legal-links a{text-decoration:underline;text-underline-offset:3px;}

/* ===== Zustimmung / Consent (in Modals) ===== */
.consent-checks{display:flex;flex-direction:column;gap:.9rem;margin:.3rem 0;}
.check-row{
  display:flex;gap:.65rem;align-items:flex-start;cursor:pointer;
  font-size:.8rem;line-height:1.45;color:var(--text);
}
.check-row input{margin-top:.2rem;flex:0 0 auto;width:16px;height:16px;accent-color:var(--ink);}
.check-row a{color:var(--ink);text-decoration:underline;}
.link-btn{
  background:none;border:none;padding:0;margin:0;
  font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer;
}
.form-hint{font-size:.75rem;color:var(--mute);line-height:1.5;margin:0;}
.widerruf-text{
  background:var(--sand1);border:1px solid var(--line);border-radius:6px;
  padding:1rem 1.1rem;max-height:220px;overflow-y:auto;
}
.widerruf-text p{color:var(--text);font-size:.78rem;line-height:1.6;margin:0 0 .8em;}
.widerruf-text p:last-child{margin-bottom:0;}
.widerruf-text .wid-title{
  font-family:var(--hf);font-weight:700;font-size:.82rem;color:var(--ink);
  letter-spacing:.02em;margin-bottom:.7em;
}
.widerruf-text .wid-note{color:var(--mute);font-style:italic;}

/* ===== Besichtigungs-Modal ===== */
.modal{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:2rem 1.5rem;overflow-y:auto;
}
.modal[hidden]{display:none!important;}
.modal-scrim{position:absolute;inset:0;background:rgba(19,18,17,.55);backdrop-filter:blur(3px);}
.modal-panel{
  position:relative;z-index:1;background:var(--bg);
  border-radius:14px;max-width:460px;width:100%;
  padding:2.4rem 2rem;margin:auto;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.35);
}
.modal-close{
  position:absolute;top:.9rem;right:.9rem;
  background:none;border:none;font-size:1.5rem;line-height:1;
  color:var(--mute);cursor:pointer;padding:.4rem;
}
.modal-close:hover{color:var(--ink);}

/* ===== Foto-Lightbox =====
   Panel darf sich NICHT auf eine feste Breite (100%/1100px) aufblasen:
   Hochformat-Fotos (Handyfotos) waren dann schmaler als die Box und die
   dunkle Box selbst blieb links/rechts als "schwarzer Balken" sichtbar.
   Stattdessen bestimmt allein das Bild (per max-width/max-height,
   Seitenverhältnis erhalten) die Größe; das Panel umschließt es nur. */
.lightbox-panel{
  position:relative;
  max-width:92vw;width:auto;padding:0;
  background:transparent;box-shadow:none;margin:auto;
  display:inline-flex;flex-direction:column;align-items:center;
}
.lightbox-panel #lightboxImg{
  display:block;width:auto;height:auto;
  max-width:92vw;max-height:82vh;
  object-fit:contain;border-radius:8px;background:var(--ink2);
}
/* Frame umschließt Bild + Logo-Badge passgenau (wie .photo-frame in der
   Galerie), damit das Logo in der Lightbox exakt wie auf den Kacheln
   mittig über dem Foto sitzt statt zu fehlen. */
.lightbox-frame{position:relative;line-height:0;}
.lightbox-frame .photo-badge img{height:30px;}
.lightbox-caption{color:var(--bg);text-align:center;margin:.9rem 0 0;font-size:.88rem;}
.lightbox-panel .modal-close{
  top:.7rem;right:.7rem;color:var(--bg);
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(19,18,17,.55);
  /* .lightbox-frame (position:relative, kommt im DOM danach) würde ohne
     das hier den Close-Button optisch/klickbar überdecken, da beide ohne
     z-index nur nach DOM-Reihenfolge gestapelt werden. */
  z-index:2;
}
.lightbox-panel .modal-close:hover{color:var(--bg);background:rgba(19,18,17,.8);}

/* Vor/Zurück in der Lightbox, ohne sie zu schließen */
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  color:var(--bg);background:rgba(19,18,17,.55);box-shadow:none;z-index:1;
}
.lightbox-nav:hover{background:rgba(19,18,17,.8);color:var(--bg);}
.lightbox-prev{left:.6rem;}
.lightbox-next{right:.6rem;}
.lightbox-nav[hidden]{display:none!important;}
@media (max-width:640px){
  .lightbox-prev{left:.2rem;}
  .lightbox-next{right:.2rem;}
}

.modal-title{font-family:var(--hf);font-weight:700;font-size:1.4rem;margin:.3em 0 .5em;color:var(--ink);text-wrap:balance;}
.modal-sub{color:var(--text);font-size:.9rem;margin:0 0 1.6rem;}
.modal-form{display:flex;flex-direction:column;gap:1.1rem;}
.modal-form[hidden]{display:none!important;}
.form-row-pair{display:flex;gap:1rem;}
.form-row-pair .form-row{flex:1;min-width:0;}
.form-row textarea{
  width:100%;padding:.75rem .9rem;border:1px solid var(--line);border-radius:4px;
  background:var(--bg);color:var(--ink);font-family:var(--bf);font-size:.95rem;
  resize:vertical;
}
.form-row textarea:focus{outline:2px solid var(--ink);outline-offset:1px;}
.modal-form > .btn-primary{width:100%;margin-top:.4rem;}
.modal-success{text-align:center;}
.modal-success-title{font-family:var(--hf);font-weight:700;font-size:1.3rem;margin:0 0 .5em;color:var(--ink);}
.modal-success p{color:var(--text);}
.modal-success .btn-primary{margin-top:1.4rem;width:100%;}

/* ===== Prüf-Status (kurze Verzögerung vor Freischaltung) ===== */
.unlock-checking{animation:fadeIn .4s var(--e);}
.check-spinner{
  display:block;width:34px;height:34px;margin:0 auto 1.1rem;
  border-radius:50%;border:2.5px solid var(--line);
  border-top-color:var(--ink);animation:spin .85s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .check-spinner{animation-duration:2.4s;}
}

/* ===== Sanftes Einblenden freigeschalteter Inhalte ===== */
[data-locked].reveal-pre{opacity:0;transform:translateY(14px);}
[data-locked].reveal-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--e),transform .7s var(--e);
}
@media (prefers-reduced-motion:reduce){
  [data-locked].reveal-pre,[data-locked].reveal-in{opacity:1;transform:none;transition:none;}
}

/* ===== Details anfragen (Unlock) ===== */
.unlock-sub{color:var(--text);font-size:.98rem;max-width:52ch;margin:0 auto 1rem;}
.unlock-card{margin:2.4rem auto 0;}
.unlock-success p:last-child{color:var(--text);}

/* ===== Wizard-Fortschritt (wie das Kontaktformular auf roggan-immo.de) ===== */
.wiz{margin:0 0 1.6rem;}
.wsteps{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;}
.wstep{display:flex;align-items:center;gap:.5rem;font-size:.84rem;color:var(--mute);transition:color .4s ease;}
.wstep i{
  font-style:normal;width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.74rem;font-weight:600;font-family:var(--hf);
  box-shadow:inset 0 0 0 1px var(--rule);color:var(--mute);
  transition:background .45s var(--e),color .45s ease,box-shadow .45s ease;
}
.wstep.on{color:var(--ink);}
.wstep.on i{background:var(--ink);color:var(--bg);box-shadow:none;}
.wstep.done i{background:var(--sand2);color:var(--ink);box-shadow:none;}
.wbar{height:2px;background:var(--rule2);margin-top:.85rem;overflow:hidden;border-radius:2px;}
.wbar span{display:block;height:100%;background:var(--ink);transition:width .6s var(--e);}
.wpane{display:none;}
.wpane.on{display:flex;flex-direction:column;gap:1.1rem;animation:paneIn .5s var(--e);}
@keyframes paneIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.wnav{display:flex;align-items:center;gap:1rem;margin-top:.2rem;flex-wrap:wrap;}
.wback{
  font-size:.85rem;color:var(--mute);background:none;border:none;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;transition:color .3s ease;font-family:var(--bf);
}
.wback:hover{color:var(--ink);}
.wnext{flex:none;}

/* ===== Sanftes Einblenden beim Scrollen ===== */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--e),transform .8s var(--e);}
.rv.on{opacity:1;transform:none;}

/* ===== Responsive ===== */
@media (max-width:860px){
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .nav-sep{display:none;}
  .two-col{grid-template-columns:1fr;gap:0;}
  .highlight-grid{grid-template-columns:1fr;}
  .rl-grid{grid-template-columns:1fr;gap:2rem;}
  .loc-grid{grid-template-columns:1fr;gap:1rem;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .stat-row.four{grid-template-columns:repeat(2,1fr);}
  .stat-row.five{grid-template-columns:repeat(2,1fr);}
  .stat-row.five .stat:last-child{grid-column:1/-1;}
  .gallery-grid{grid-template-columns:1fr;}
  .gallery-grid .g-wide{grid-column:auto;}
  .section{padding:3.5rem 0;}
  .hero-content{padding-top:7rem;}
}
@media (max-width:480px){
  .download-links{flex-direction:column;}
  .facts-table td{display:block;width:100%!important;padding:.2rem .4rem;}
  .facts-table tr{display:block;padding:.6rem 0;}
  .facts-table .f-label{padding-bottom:.15rem;}
  .form-row-pair{flex-direction:column;gap:1.1rem;}
  .modal-panel{padding:2rem 1.3rem;}
}

/* ===== Mobile nav: Vollbild-Overlay (wie roggan-immo.de) ===== */
.main-nav.open{
  display:flex;position:fixed;inset:0;z-index:59;
  background:var(--bg);flex-direction:column;justify-content:center;gap:6px;
  padding:0 1.5rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .6s var(--e);
}
.main-nav.open.in{clip-path:inset(0 0 0 0);}
.main-nav.open a{
  font-family:var(--hf);font-weight:600;font-size:clamp(1.8rem,8vw,2.6rem);
  letter-spacing:-.04em;padding-block:.5rem;border-bottom:1px solid var(--rule2);
  text-align:left;width:100%;color:var(--ink);
}
.main-nav.open a.nav-unlock{display:flex;justify-content:space-between;align-items:center;font-size:clamp(1.3rem,6vw,1.8rem);}
.main-nav.open a.nav-unlock .circ{width:40px;height:40px;font-size:1.1rem;}
.main-nav.open .nav-sep{display:none;}
.main-nav.open .nav-download{
  font-family:var(--hf);font-weight:600;font-size:1.05rem!important;color:var(--ink)!important;
  background:none;border:none;border-bottom:1px solid var(--rule2);border-radius:0;
  padding:.9rem 0!important;width:100%;justify-content:space-between;
}
.main-nav.open .nav-download .dl-arrow{width:30px;height:30px;font-size:.85rem;}
.main-nav.open .nav-download:hover{background:none;color:var(--ink)!important;}
.main-nav.open .nav-cta{margin-top:1.4rem;justify-content:center;text-align:center;width:100%;padding:1rem!important;font-size:1rem;}