/* ÜBERGANG (Auftrag AZ, 22.09.2026): alter Stil der Templates vor dem Design v46. Wird Stück für Stück überflüssig und im Aufräum-Auftrag am Ende gelöscht. NIEMAND ändert diese Datei. Neue Stile gehören in main.css bzw. die Bausteindateien. */
/* =====================================================================
   ROS REAL – Basis-Styles. Design-Tokens aus 02_Brand/03_Farben & Styleguide (v2).
   Das Screendesign aus claude.ai/design wird auf diese Klassenstruktur gelegt.
   ===================================================================== */

:root {
  /* Farben */
  --c-black: #0A0A0A;
  --c-white: #FFFFFF;
  --c-paper: #F7F6F3;
  --c-line: #E4E2DC;
  --c-muted: #6B6B6B;
  --c-blue: #1C3F94;          /* Ros Blau – nur Akzent */
  --c-blue-deep: #0F2358;     /* Kartengrund */
  --c-gold: #B8862B;          /* nur Kauf */

  /* Typografie */
  --f-display: 'EB Garamond', Garamond, Georgia, serif;
  --f-text: 'Instrument Sans', 'RR Hochzahl', system-ui, -apple-system, sans-serif;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.25rem;
  --fs-h3: clamp(1.5rem, 2vw, 1.875rem);
  --fs-h2: clamp(2rem, 3.2vw, 2.75rem);
  --fs-h1: clamp(2.5rem, 5vw, 4.5rem);
  --lh-tight: 1.05; --lh-text: 1.6;

  /* Raster */
  --w-max: 1280px; --w-narrow: 760px;
  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: 7rem;
  --r: 2px;
  --header-h: 72px;
}

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 var(--fs-md)/var(--lh-text) var(--f-text); color: var(--c-black); background: var(--c-white); }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .15em; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; line-height: var(--lh-tight); margin: 0 0 var(--s-2); letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); }
.eyebrow { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 var(--s-2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--c-black); color: #fff; padding: .5rem 1rem; z-index: 999; }
.skip-link:focus { left: 0; }
.container { width: min(100% - 2 * var(--s-3), var(--w-max)); margin-inline: auto; }
.container--narrow { max-width: var(--w-narrow); }
.section { padding-block: var(--s-5); }
.section--center { text-align: center; }
.prose > * + * { margin-top: 1em; }
.prose h3 { font-size: var(--fs-lg); font-family: var(--f-text); font-weight: 600; text-transform: none; }
.prose ul { padding-left: 1.2em; }
.button { display: inline-flex; align-items: center; gap: .5em; padding: .8em 1.4em; border: 1px solid var(--c-black); border-radius: var(--r); background: transparent; color: var(--c-black); font-weight: 500; font-size: var(--fs-sm); letter-spacing: .02em; }
.button--primary { background: var(--c-black); color: #fff; }
.button--primary:hover { background: var(--c-blue); border-color: var(--c-blue); text-decoration: none; }
.button--ghost { border-color: var(--c-line); }
.link-button { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; }

/* ---------- Header / Footer ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line); }
.rr-dark .site-header { background: rgba(10,10,10,.6); color: #fff; border-color: rgba(255,255,255,.12); }
.site-header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; width: min(100% - 2 * var(--s-3), var(--w-max)); margin-inline: auto; }
.site-logo__wordmark { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; letter-spacing: .12em; display: inline-flex; align-items: center; gap: .3em; }
.site-logo__mark { width: .45em; height: .45em; border: 1.5px solid var(--c-blue); display: inline-block; }
.site-nav__list { list-style: none; display: flex; gap: var(--s-4); margin: 0; padding: 0; font-size: var(--fs-sm); letter-spacing: .04em; }
.nav-toggle { display: none; }
.site-footer { background: var(--c-black); color: #fff; padding: var(--s-5) 0 var(--s-3); margin-top: var(--s-6); font-size: var(--fs-sm); }
.site-footer__inner { width: min(100% - 2 * var(--s-3), var(--w-max)); margin-inline: auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-4); }
.site-footer address { font-style: normal; margin-top: var(--s-2); color: #bbb; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4em; }
.site-footer__copy { text-align: center; color: #777; margin-top: var(--s-4); font-size: var(--fs-xs); }

/* ---------- Startseite: Kartenflug ---------- */
.rr-front { background: var(--c-blue-deep); color: #fff; }
.flight { position: relative; }
.flight__map { position: sticky; top: 0; height: 100vh; height: 100dvh; width: 100%; background: var(--c-blue-deep); }
/* maplibre-gl.css setzt .maplibregl-map { position: relative } und würde sticky überschreiben → Karte scrollte mit weg */
.flight__map.maplibregl-map { position: sticky; }
.flight__scroll { position: relative; margin-top: -100vh; margin-top: -100dvh; pointer-events: none; }
.flight__step { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--s-4); }
.flight__step--objects { min-height: 140vh; }
.flight__copy { max-width: 720px; text-align: center; opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.flight__step.is-active .flight__copy { opacity: 1; transform: none; }
.flight__title { font-size: var(--fs-h1); color: #fff; }
.flight__statement { font-family: var(--f-display); font-size: var(--fs-h2); }
.flight__hint { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.flight__filter { position: fixed; left: 50%; bottom: var(--s-3); transform: translateX(-50%); z-index: 20; width: min(100% - 2 * var(--s-3), 1100px); }
.two-ways { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.two-ways__item { border: 1px solid rgba(255,255,255,.2); padding: var(--s-4); display: grid; gap: var(--s-1); }
.two-ways__title { font-family: var(--f-display); font-size: var(--fs-h2); }

/* Karte generisch */
.maplibregl-map { font: inherit; }
.rr-marker { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; background: var(--c-blue); box-shadow: 0 0 0 4px rgba(28,63,148,.25); cursor: pointer; }
.rr-marker--gewerbe { background: var(--c-black); box-shadow: 0 0 0 4px rgba(0,0,0,.25); }
.rr-marker--kauf { background: var(--c-gold); box-shadow: 0 0 0 4px rgba(184,134,43,.3); }
.rr-marker.is-hidden { display: none; }
.map-popup { width: 260px; background: #fff; color: var(--c-black); border-radius: var(--r); overflow: hidden; }
.map-popup__img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.map-popup__body { padding: var(--s-2); }
.map-popup__meta { font-size: var(--fs-xs); color: var(--c-muted); margin: 0 0 .2em; }
.map-popup__title { font-size: var(--fs-md); font-family: var(--f-text); font-weight: 500; margin: 0 0 .3em; }
.map-popup__price { margin: 0; font-weight: 600; }
.maplibregl-popup-content { padding: 0; border-radius: var(--r); }

/* ---------- Filterleiste ---------- */
.filterbar { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--s-2); color: var(--c-black); }
.filterbar--map { box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.filterbar__row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: end; }
.filterbar__row--more { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--c-line); }
.filterbar__group { display: grid; gap: .3em; font-size: var(--fs-sm); border: 0; padding: 0; margin: 0; min-width: 0; }
.filterbar__group > span, .filterbar__group legend { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.filterbar input[type=number], .filterbar input[type=search], .filterbar select { font: inherit; padding: .55em .7em; border: 1px solid var(--c-line); border-radius: var(--r); background: #fff; min-width: 120px; }
.filterbar__group--segment { display: flex; gap: 0; }
.filterbar__group--segment label { padding: .55em .9em; border: 1px solid var(--c-line); cursor: pointer; }
.filterbar__group--segment label:has(:checked) { background: var(--c-black); color: #fff; }
.filterbar__group--segment input { position: absolute; opacity: 0; }
.filterbar__group--range { grid-template-columns: auto auto; }
.filterbar__group--range > span { grid-column: 1 / -1; }
.filterbar__group--chips { display: flex; flex-wrap: wrap; gap: .4em; width: 100%; }
.chip { border: 1px solid var(--c-line); padding: .35em .7em; border-radius: 999px; font-size: var(--fs-xs); cursor: pointer; }
.chip:has(:checked) { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.chip input { position: absolute; opacity: 0; }
.filterbar__more, .filterbar__reset { background: none; border: 0; text-decoration: underline; font-size: var(--fs-sm); }
.view-toggle { display: inline-flex; margin-top: var(--s-2); border: 1px solid var(--c-line); }
.view-toggle__btn { padding: .5em 1em; font-size: var(--fs-sm); }
.view-toggle__btn.is-active { background: var(--c-black); color: #fff; }

/* ---------- Portfolio ---------- */
.portfolio__head { padding-top: var(--s-5); }
.portfolio__count { color: var(--c-muted); }
.portfolio__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-4) var(--s-3); margin-top: var(--s-4); }
.portfolio__map { height: calc(100vh - var(--header-h)); margin-top: var(--s-3); background: var(--c-blue-deep); }
.portfolio__pagination { margin-top: var(--s-5); display: flex; justify-content: center; gap: var(--s-1); }
.card { position: relative; display: grid; gap: var(--s-2); }
.card__media { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--c-paper); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.card:hover .card__media img { transform: scale(1.03); }
.card__tags { position: absolute; left: var(--s-2); bottom: var(--s-2); display: flex; gap: .4em; list-style: none; margin: 0; padding: 0; }
.card__tags li { background: rgba(255,255,255,.92); font-size: var(--fs-xs); padding: .3em .6em; letter-spacing: .04em; }
.card__save { position: absolute; top: var(--s-2); right: var(--s-2); background: rgba(255,255,255,.9); border: 0; width: 36px; height: 36px; border-radius: 50%; }
.card__save[aria-pressed=true] { color: var(--c-blue); }
.card__meta { display: flex; gap: .8em; font-size: var(--fs-xs); color: var(--c-muted); margin: 0; letter-spacing: .04em; text-transform: uppercase; }
.card__nr { margin-left: auto; text-transform: none; }
.card__title { font-size: var(--fs-lg); font-family: var(--f-display); font-weight: 500; margin: 0; }
.card__facts { display: flex; gap: 1em; font-size: var(--fs-sm); margin: 0; }
.card__price { margin: 0; font-weight: 600; }
.card--kauf .card__price { color: var(--c-gold); }

/* ---------- Objekt-Detail ---------- */
.gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 2px; background: var(--c-black); scrollbar-width: none; }
.gallery__item { flex: 0 0 min(100%, 1200px); margin: 0; scroll-snap-align: start; }
.gallery__item img { width: 100%; height: min(70vh, 720px); object-fit: cover; }
.gallery__count { text-align: right; font-size: var(--fs-xs); color: var(--c-muted); width: min(100% - 2 * var(--s-3), var(--w-max)); margin: var(--s-1) auto 0; }
.objekt__head { padding-block: var(--s-4) var(--s-3); }
.objekt__nr { margin-left: 1em; color: var(--c-muted); }
.keyfacts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin: var(--s-3) 0; padding: var(--s-3) 0; border-block: 1px solid var(--c-line); }
.keyfacts dt { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.keyfacts dd { margin: 0; font-family: var(--f-display); font-size: var(--fs-h3); }
.keyfacts__price { color: var(--c-blue); }
.objekt__cta { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.objekt__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-5); align-items: start; }
.objekt__section { margin-bottom: var(--s-5); }
.objekt__map { height: 420px; background: var(--c-paper); margin-bottom: var(--s-3); }
.objekt__aside { position: sticky; top: calc(var(--header-h) + var(--s-2)); display: grid; gap: var(--s-3); }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5em 1em; }
.feature-list__item::before { content: '—'; color: var(--c-blue); margin-right: .5em; }
.floorplans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-2); }
.floorplans__item { margin: 0; border: 1px solid var(--c-line); }
.pois { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.pois h3 { font-family: var(--f-text); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.pois ul { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.pois li { display: flex; justify-content: space-between; padding: .3em 0; border-bottom: 1px solid var(--c-line); }
.costbox, .energy, .contactcard { border: 1px solid var(--c-line); padding: var(--s-3); }
.costbox h2, .energy h2 { font-size: var(--fs-lg); font-family: var(--f-text); font-weight: 600; }
.costbox__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.costbox__table th { text-align: left; font-weight: 400; padding: .4em 0; }
.costbox__table td { text-align: right; padding: .4em 0; white-space: nowrap; }
.costbox__table small { color: var(--c-muted); }
.costbox__total { border-top: 1px solid var(--c-black); font-weight: 600; }
.costbox__optional { color: var(--c-muted); }
.costbox__line { display: flex; justify-content: space-between; font-size: var(--fs-sm); margin: .6em 0 0; gap: 1em; }
.costbox__provision.is-free span:last-child { color: var(--c-blue); font-weight: 500; }
.costbox__note, .costbox__legal { font-size: var(--fs-xs); color: var(--c-muted); margin: .6em 0 0; }
.energy__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin: 0; }
.energy__list dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); }
.energy__list dd { margin: 0; }
.energy__class { display: inline-block; min-width: 1.6em; text-align: center; padding: .1em .3em; font-size: var(--fs-xs); font-weight: 600; color: #fff; background: #888; margin-left: .3em; }
.energy__class--a, .energy__class--a\+, .energy__class--a\+\+ { background: #2e7d32; } .energy__class--b { background: #558b2f; } .energy__class--c { background: #9e9d24; } .energy__class--d { background: #f9a825; } .energy__class--e { background: #ef6c00; } .energy__class--f { background: #d84315; } .energy__class--g { background: #b71c1c; }
.contactcard { display: grid; gap: .3em; }
.contactcard__img { width: 96px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-bottom: var(--s-2); }
.contactcard__name { font-family: var(--f-display); font-size: var(--fs-h3); margin: 0; }
.contactcard__pos { color: var(--c-muted); font-size: var(--fs-sm); margin: 0 0 .5em; }

/* ---------- Anfrage ---------- */
.inquiry { display: grid; gap: var(--s-3); }
.inquiry__case { border: 0; padding: 0; margin: 0; display: flex; gap: 0; }
.inquiry__case legend { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .5em; }
.segment { padding: .6em 1.2em; border: 1px solid var(--c-line); cursor: pointer; }
.segment:has(:checked) { background: var(--c-black); color: #fff; }
.segment input { position: absolute; opacity: 0; }
.inquiry__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.inquiry__grid label { display: grid; gap: .3em; font-size: var(--fs-sm); }
.inquiry__grid input, .inquiry__grid select, .inquiry__grid textarea { font: inherit; padding: .7em .8em; border: 1px solid var(--c-line); border-radius: var(--r); }
.inquiry__full { grid-column: 1 / -1; }
.inquiry[data-case=privat] [data-only=gewerblich] { display: none; }
.inquiry__docs { background: var(--c-paper); padding: var(--s-3); font-size: var(--fs-sm); }
.inquiry__docs ul { margin: .5em 0 1em; padding-left: 1.2em; }
.inquiry__consent { display: flex; gap: .6em; align-items: flex-start; }
.inquiry__status:empty { display: none; }
.inquiry__status.is-error { color: #b32d2e; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .objekt__layout { grid-template-columns: 1fr; }
  .objekt__aside { position: static; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .two-ways { grid-template-columns: 1fr; }
  .inquiry__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .site-nav { display: none; }
  .site-nav.is-open { display: block; position: fixed; inset: var(--header-h) 0 0; background: #fff; color: var(--c-black); padding: var(--s-4); }
  .site-nav.is-open .site-nav__list { flex-direction: column; font-size: var(--fs-h3); font-family: var(--f-display); }
  .nav-toggle { display: block; background: none; border: 0; width: 44px; height: 44px; }
  .nav-toggle__bar { display: block; width: 24px; height: 2px; background: currentColor; margin: auto; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; }
  .flight__filter { bottom: 0; width: 100%; }
  .filterbar--map .filterbar__row--more { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flight__copy, .card__media img { transition: none; }
}