:root {
  --black: #0d0d0d;
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --line: #e7e7e7;
  --white: #ffffff;
  --bg: #ededed;
  --cream: #f0ebe2; /* warm panel for visual separation from the white hero */
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.28);
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html, body { height: 100%; }

body {
  font-family: "Inter", system-ui, sans-serif;
  /* white page surface: the hero and the growing image sit on one continuous
     white surface, so the reveal section flows seamlessly out of the hero with
     no visible card edge or colour break until the portfolio darkens */
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--black); color: var(--white); }

/* visible focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
  border-radius: 6px;
}

.page {
  min-height: 100dvh;
}

/* ---------- Hero shell — full-bleed white, no card outline ---------- */
.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 18px;
  /* ONE continuous white surface with the body + reveal band: the growing image
     and the hero share the same white backdrop, so as the reveal scrolls up into
     place during the grow there is no colour break to slide through */
  background: var(--white);
  padding: 18px; /* keeps the right image inset, so it still shows rounded corners */
}

/* ---------- Left panel ---------- */
.hero__left {
  display: flex;
  flex-direction: column;
  padding: 30px 38px 32px;
}

/* 3-column grid: button left, nav truly CENTERED (empty right column balances) */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.topbar .menu-btn { justify-self: start; }

/* ---------- Top nav text links ---------- */
.topnav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.topnav__link {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.18s var(--ease);
}
.topnav__link:hover { border-bottom-color: var(--black); }

/* ---------- Menu button (top-left, opens the sidebar) ----------
   Bare icon in the site's minimal language — no box, no shadow; a soft
   rounded hover fill like the search field / old menu control. */
.menu-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--black);
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.menu-btn:hover { background: #f2f2f2; }
.menu-btn:active { transform: scale(0.94); }

/* ---------- Sidebar (hidden off-canvas left; slides in when opened) ---------- */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(13, 13, 13, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.sidebar-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--ease);
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
  width: min(380px, 88vw);
  background: var(--white);
  display: flex;
  flex-direction: column;
  padding: 24px 32px 36px;
  transform: translateX(-102%); /* 102% so its shadow can't peek in when closed */
  box-shadow: 30px 0 80px -40px rgba(0, 0, 0, 0.35);
  transition: transform 0.5s var(--ease), visibility 0s linear 0.5s;
  visibility: hidden;
}
.sidebar.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.5s var(--ease);
}

.sidebar__head {
  display: flex;
  align-items: center;
}
.sidebar__close {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--black);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.sidebar__close:hover { background: var(--black); color: var(--white); }
.sidebar__close:active { transform: scale(0.94); }

.sidebar__nav {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
}
.sidebar__nav a {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 27px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  padding: 19px 2px;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.25s var(--ease), color 0.2s var(--ease);
}
.sidebar__nav a:first-child { border-top: 1px solid var(--line); }
.sidebar__nav a:hover {
  padding-left: 12px;
  color: var(--black);
}

/* while the sidebar is open, the page behind it must not scroll */
html.no-scroll,
html.no-scroll body {
  overflow: hidden;
}

/* ---------- Search page (suche.html) ---------- */
.sp-body {
  --sp-h: 148px; /* fixed header height (topbar + compact toolbar) */
  background: var(--white);
}

/* fixed header: topbar + search toolbar share ONE white surface — no divider
   between the rows, the toolbar is simply offset below the topbar */
.sp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--sp-h);
  background: var(--white);
  padding: 14px 3.5vw 0;
}
.sp-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.sp-topnav { grid-column: 2; }
.sp-topbar__left {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 14px;
}
.topnav__link.is-active { border-bottom-color: var(--black); font-weight: 500; }

.sp-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

/* left: map toggle */
.sp-mapbtn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px; /* one shared control height across the whole toolbar row */
  padding: 0 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.18s var(--ease);
}
.sp-mapbtn:hover { background: #f2f2f2; }
.sp-mapbtn:active { transform: scale(0.97); }
.sp-mapbtn.is-active {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* center: compact version of the hero search bar — exactly as tall as the
   map/sort buttons so the whole toolbar reads as ONE aligned row.
   NB: .sp-toolbar prefix beats the base .search rules that appear later in
   this file (same-specificity would let the hero's margin/padding win). */
.sp-toolbar .sp-search {
  margin-top: 0;
  width: min(660px, 100%);
  height: 48px;
  padding: 4px;
  border-radius: 14px;
  box-shadow: 0 14px 30px -24px rgba(0, 0, 0, 0.4);
}
.sp-search .search__field { padding: 0 12px; align-items: center; }
.sp-search .search__col { gap: 0; }
.sp-search .search__col label { font-size: 10px; }
.sp-search .search__col input,
.sp-search .search__col select { font-size: 14px; }
.sp-search .search__divider { margin: 6px 0; }
.sp-search .search__btn { padding: 0 18px; border-radius: 10px; }
.sp-search input[type="date"] {
  font-family: "Inter", sans-serif;
  color: var(--ink);
}
.sp-search input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
}

/* right: sort dropdown */
.sp-sort { position: relative; justify-self: end; }
.sp-sortbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.sp-sortbtn:hover { background: #f2f2f2; }
.sp-sortbtn__chev { transition: transform 0.3s var(--ease); }
.sp-sortbtn.is-open .sp-sortbtn__chev { transform: rotate(180deg); }
.sp-sortmenu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  min-width: 250px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease),
    visibility 0s linear 0.28s;
}
.sp-sortmenu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.sp-sortmenu li {
  padding: 11px 14px;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.sp-sortmenu li:hover { background: #f2f2f2; }
.sp-sortmenu li[aria-selected="true"] {
  background: var(--black);
  color: var(--white);
}

/* ---------- results ---------- */
.sp-main { padding: calc(var(--sp-h) + 10px) 3.5vw 90px; }
.sp-count {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--muted);
  margin: 4px 0 16px;
}
.sp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3.5vh, 40px) clamp(14px, 1.4vw, 22px);
}
.card__facts {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.94);
  margin-top: 3px;
}
.sp-card.is-hot .card__inner {
  outline: 3px solid var(--black);
  outline-offset: 3px;
}

/* ---------- map view ---------- */
.sp-map {
  position: fixed;
  top: var(--sp-h);
  left: 3.5vw;
  bottom: 20px;
  width: calc(50vw - 3.5vw - 14px);
  z-index: 20;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: #f2efe9;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-18px);
  /* smooth ease-out (easeOutQuint) for the reveal — no snap */
  transition: opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.sp-map.is-open { opacity: 1; transform: translateX(0); }
/* on close the map exits a touch quicker, in sync with the results fade-out */
body.map-closing .sp-map {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.6, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.6, 1);
}
.sp-map__viewport {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
}
.sp-map__viewport.is-dragging { cursor: grabbing; }
.sp-map__world {
  position: absolute;
  left: -30%;
  top: -30%;
  width: 160%;
  height: 160%;
  will-change: transform;
}
.sp-map__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-map__pins { position: absolute; inset: 0; }
.sp-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.sp-pin__label {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 11px;
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
    transform 0.18s var(--ease);
}
.sp-pin__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--black);
  box-shadow: 0 0 0 3px rgba(13, 13, 13, 0.14);
}
.sp-pin:hover .sp-pin__label,
.sp-pin.is-active .sp-pin__label {
  background: var(--black);
  color: var(--white);
  transform: translateY(-2px);
}
.sp-map__zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sp-map__zoom button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--black);
  cursor: pointer;
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.4);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.sp-map__zoom button:hover { background: var(--black); color: var(--white); }
.sp-map__hint {
  position: absolute;
  left: 14px;
  bottom: 14px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  padding: 6px 12px;
  pointer-events: none;
}

/* split layout while the map is open: map fixed left, ONLY the results pane
   scrolls (the document itself is locked via html.no-scroll) */
body.map-open .sp-main,
body.map-closing .sp-main {
  position: fixed;
  top: var(--sp-h);
  right: 0;
  bottom: 0;
  left: 50vw;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 3.5vw 60px 14px;
}
body.map-open .sp-grid,
body.map-closing .sp-grid { grid-template-columns: repeat(2, 1fr); }

/* The toggle is a smooth cross-dissolve between the full-width list and the
   split (map + narrow list). The column reflow always happens while the
   results are at opacity 0, so it's never visible.
   NB: animate .sp-results, NOT .sp-main — a transform on .sp-main would make
   it the containing block for the fixed .sp-map and mis-position the map. */

/* OPEN: the results glide into the split as the map glides in from the left,
   same easing, same duration — they settle together. */
body.map-open .sp-results {
  animation: sp-pane-in 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sp-pane-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
/* CLOSE, part 1: the split view (map + results) fades out together — no clip,
   because both are going transparent at once. */
.sp-results.is-leaving {
  animation: sp-pane-out 0.3s cubic-bezier(0.4, 0, 0.6, 1) both;
}
@keyframes sp-pane-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(14px); }
}
/* CLOSE, part 2: once the layout has swapped back to full width (while
   invisible, so the reposition can't be seen), the list fades in. */
.sp-results.is-entering {
  animation: sp-pane-enter 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sp-pane-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-map,
  body.map-open .sp-results,
  .sp-results.is-leaving,
  .sp-results.is-entering { transition: none; animation: none; }
}

@media (max-width: 1200px) {
  .sp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .sp-body { --sp-h: 208px; }
  .sp-toolbar { grid-template-columns: 1fr 1fr; }
  .sp-search { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .sp-mapbtn { grid-row: 2; }
  .sp-sort { grid-row: 2; }
  .sp-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-map { display: none; } /* split view is desktop-only for now */
  body.map-open .sp-main { position: static; overflow: visible; padding: calc(var(--sp-h) + 10px) 3.5vw 90px; }
  body.map-open .sp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sp-grid { grid-template-columns: 1fr; }
  .sp-search .search__divider { display: none; }
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--black);
}
.logo__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--black);
  color: var(--white);
}
.logo__name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.02em;
}

/* ---------- Content ---------- */
.hero__content {
  margin: auto;
  max-width: 580px;
  text-align: center;
}

.eyebrow {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 22px;
}

/* Exaggerated-minimalism headline: oversized, tight tracking, high contrast */
.headline {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 4.8vw, 66px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--black);
}

.subhead {
  margin: 24px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 460px;
}

/* ---------- Search (the primary CTA) ---------- */
.search {
  margin-top: 36px;
  display: flex;
  align-items: stretch;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 20px 44px -30px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.search:focus-within {
  border-color: #d2d2d2;
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.5);
}

.search__field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 12px;
  transition: background 0.18s var(--ease);
}
.search__field:hover { background: #f6f6f6; }

.search__icon { color: var(--black); display: grid; place-items: center; }

.search__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.search__col label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: left;
}
.search__col input,
.search__col select {
  border: none;
  outline: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  width: 100%;
  appearance: none;
  cursor: pointer;
}
.search__col input::placeholder { color: #b3b3b3; font-weight: 400; }

.search__divider { width: 1px; background: var(--line); margin: 8px 0; }

.search__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: var(--black);
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 0 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.2s var(--ease);
}
.search__btn:hover { background: #000; transform: translateY(-1px); }
.search__btn:active { transform: translateY(0); }

/* ---------- List-your-apartment CTA ---------- */
.list-cta {
  margin-top: 18px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.list-cta a { font-size: 13px; }
.list-cta a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  color: var(--black);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid var(--black);
  padding-bottom: 1px;
  transition: opacity 0.18s var(--ease);
}
.list-cta a:hover { opacity: 0.6; }
.list-cta a svg { transition: transform 0.2s var(--ease); }
.list-cta a:hover svg { transform: translateX(3px); }

/* ---------- Popular-search chips ---------- */
.suggestions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.suggestions__label { font-size: 13px; color: var(--muted); margin-right: 2px; }
.chip {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.chip:hover { background: var(--black); border-color: var(--black); color: var(--white); }

/* ---------- Foot stats ---------- */
.hero__foot {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__foot strong { color: var(--black); font-weight: 600; }
.dot { width: 4px; height: 4px; border-radius: 50%; background: #cfcfcf; }
/* scroll-down cue: a shaft-less down chevron with a soft shadow */
.hero__scroll {
  display: inline-flex;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));
  animation: hero-scroll 2s var(--ease) infinite;
}
@keyframes hero-scroll {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
}

/* ---------- Right carousel ---------- */
.hero__right { min-height: 640px; }

.carousel {
  position: relative;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #ddd;
}

.carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.65s var(--ease);
}
.slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
}
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 68%, rgba(0,0,0,0.28) 100%);
}
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* overlay badges */
.badges {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  z-index: 3;
  display: flex;
  gap: 30px;
  color: #fff;
}
.badge {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.32;
  text-shadow: 0 1px 14px rgba(0,0,0,0.45);
}

/* edge hover-zones that reveal the arrows */
.nav-zone {
  position: absolute;
  top: 0;
  bottom: 64px; /* leave the dots row clear */
  width: 28%;
  z-index: 4;
}
.nav-zone--left { left: 0; }
.nav-zone--right { right: 0; }

/* nav arrows: bare chevrons, hidden until edge hover or keyboard focus */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 6px;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.25s var(--ease), transform 0.2s var(--ease);
}
.nav--prev { left: 14px; }
.nav--next { right: 14px; }

/* reveal on edge hover (pointer devices) or keyboard focus */
@media (hover: hover) {
  .nav-zone:hover .nav { opacity: 1; }
}
.nav:focus-visible { opacity: 1; }
.nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.nav--next:hover { transform: translateY(-50%) translateX(2px); }
.nav:active { transform: translateY(-50%) scale(0.9); }

/* dots */
.dots {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 9px;
}
.dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  padding: 0;
  transition: width 0.3s var(--ease), background 0.3s var(--ease);
}
.dots button.active { width: 28px; border-radius: 6px; background: #fff; }

/* card cta (small floating, bottom-right) */
.card-cta {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  color: var(--black);
  border-radius: 16px;
  padding: 14px 18px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 16px 34px -18px rgba(0,0,0,0.55);
  transition: transform 0.18s var(--ease);
}
.card-cta:hover { transform: translateY(-2px); }

/* ---------- Scroll reveal: Frankfurt skyline ---------- */
.reveal {
  position: relative;
  margin-top: 0;
  background: #141414; /* full-bleed dark base for the unpin / end state */
  --band-vh: 40; /* shrunk image band height (vh) — MUST match reveal.js BANNER_MIN */
}
/* STAGE: its height IS the scroll distance for grow -> text -> shrink (the pin).
   The portfolio is a sibling AFTER it, so it scrolls normally once the pin ends. */
.reveal__stage {
  position: relative;
  height: 500vh;
}
/* full-bleed pinned surface — no card outline. Starts CREAM (light, not white);
   JS fades it to near-black as the portfolio is revealed. */
.reveal__sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden; /* clips the tall portfolio; JS translate scrolls it inside */
  background: #141414; /* base behind the layers */
}

/* IMAGE overlay: full-bleed on top of the portfolio; height animates full -> band.
   Its background is the cream->dark surface (the band's margin at the end). */
.reveal__banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%; /* JS animates this down to the band */
  z-index: 2; /* ON TOP of the portfolio, so shrinking it uncovers the cards */
  overflow: hidden;
  background: var(--white); /* JS fades white -> near-black */
  will-change: transform; /* height animates too, but height isn't compositable */
}

/* the reveal: full-bleed image, unveiled by an expanding clip-path window */
.reveal__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(45% 45% 45% 45% round 20px);
  will-change: clip-path;
}
.reveal__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* scroll-revealed headline, centered in the middle of the image */
.reveal__text {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0 8%;
  pointer-events: none;
}
/* focal scrim: guarantees the white headline stays legible over the busy night
   image (the bright towers blow out contrast). Only shows while the text is in,
   so the clip-reveal grow stays crisp and bright. */
.reveal__text::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    62% 48% at 50% 50%,
    rgba(0, 0, 0, 0.52) 0%,
    rgba(0, 0, 0, 0.2) 52%,
    transparent 78%
  );
  opacity: var(--scrim, 0); /* JS drives this positionally, with the text */
  pointer-events: none;
}
.reveal__text p {
  margin: 0;
  max-width: 820px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.45);
}
/* line-split reveal — each line sits in an overflow-clipped wrapper; the inner
   span's transform + opacity are driven POSITIONALLY by reveal.js (no CSS
   transition), so every line's in/out is a pure function of scroll position and
   scrolling up is the exact reverse of scrolling down. */
.reveal__text .rl {
  display: block;
  overflow: clip;
}
.reveal__text .rl__in {
  display: block;
  transform: translateY(110%); /* base (JS overrides each frame): hidden below */
  opacity: 0;
  will-change: transform, opacity;
}

/* ---------- Portfolio (revealed as the banner shrinks) ---------- */
/* Sits BEHIND the image band, inside the pinned sticky. Its heading is padded to
   start just under the band, so the shrinking image simply UNCOVERS the static
   title + first row. JS then translateY's it up to bring in rows 3-4. */
.portfolio {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: #141414;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 22px);
  /* side inset == the band's clip inset (reveal.js SHRINK_INSET = 3.5%), so the
     outer cards sit FLUSH with the shrunk image's left/right edges. Keep in sync.
     Top: the title hugs the image band — it appears WITH the shrink, as part
     of the same beat, so it belongs visually to the image's final position. */
  padding: calc(var(--band-vh) * 1vh + clamp(18px, 3.2vh, 36px)) 3.5vw
    clamp(40px, 8vh, 96px);
  will-change: transform;
}
.portfolio__head {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4px 0 0; /* title flush with the left card / band edge */
  /* the title sits CLOSE to its cards (the flex gap alone separates them);
     the generous air lives ABOVE it, between the image band and the title */
}
.portfolio__title {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 44px);
  letter-spacing: -0.02em;
  color: #fff;
  overflow: clip; /* mask for the rising inner span (like the caption lines) */
}
/* JS drives transform/opacity; no hidden initial state in CSS, so the title
   stays visible in the reduced-motion / no-JS fallback */
.portfolio__title-in {
  display: inline-block;
  will-change: transform, opacity;
}
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* four per row (8 cards over 2 rows) */
  /* roomier vertical rhythm between the rows; column gap stays tight */
  gap: clamp(32px, 5vh, 60px) clamp(14px, 1.4vw, 22px);
  width: 100%; /* spans the full band width (portfolio provides the 3.5vw side inset) */
  padding: 0 0 2px; /* no extra side inset -> outer cards flush with the band */
}
/* The OUTER card is owned by reveal.js (inline opacity + translateY on scroll).
   All hover motion therefore lives on .card__inner so the scroll loop can't
   stomp it, and sibling dimming uses `filter` (JS never sets filter). */
.portfolio__card {
  position: relative;
  aspect-ratio: 10 / 11; /* tall, near-square listing cards (per the reference) */
  max-height: 64vh; /* ...but never so tall that two rows can't be scrolled through */
  cursor: pointer;
}
.card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #222;
  transform: translateZ(0);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.45s ease, filter 0.4s ease;
}
.portfolio__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* scrim: darkens the lower half so the text stays legible; deepens on hover */
.card__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0.72) 100%);
  transition: background 0.45s ease;
  pointer-events: none;
}

/* hover: lift + shadow on the hovered card... */
.portfolio__card:hover .card__inner {
  transform: translateY(-8px);
  box-shadow: 0 26px 54px -22px rgba(0, 0, 0, 0.7);
}
.portfolio__card:hover .card__inner::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.82) 100%);
}
/* heart / favourite button on the small cards */
.fav-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  transition: transform 0.16s var(--ease), background 0.16s var(--ease);
}
.fav-btn:hover { transform: scale(1.08); background: #fff; }
.fav-btn:active { transform: scale(0.94); }
.fav-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fav-btn.is-fav { color: var(--eg-green, #18a558); }
.fav-btn.is-fav svg { fill: var(--eg-green, #18a558); stroke: var(--eg-green, #18a558); }

.card__arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--black);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.portfolio__card:hover .card__arrow {
  transform: rotate(45deg);
}

.card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card__loc {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.card__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1.35vw, 20px);
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
/* meta chips: hidden until hover, then slide up + fade in */
.card__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(8px);
  overflow: hidden;
  transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.45s ease,
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card__meta li {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.portfolio__card:hover .card__meta {
  max-height: 90px;
  margin-top: 6px;
  opacity: 1;
  transform: translateY(0);
}

/* reduced-motion / no-JS fallback: show final composition, no scroll motion */
.reveal.is-static .reveal__stage {
  height: auto;
}
.reveal.is-static .reveal__sticky {
  position: static;
  height: auto;
  background: #141414; /* static fallback jumps straight to the dark portfolio */
}
.reveal.is-static .reveal__banner {
  position: static;
  height: 46vh;
}
.reveal.is-static .reveal__frame {
  clip-path: inset(0% 0% 0% 0% round 20px);
}
.reveal.is-static .reveal__text { display: none; }
.reveal.is-static .portfolio {
  position: static;
  padding-top: clamp(14px, 2vh, 28px);
  transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero__right { min-height: 380px; order: -1; }
  .hero__left { padding: 26px 28px; }
  .search { flex-wrap: wrap; }
  .search__btn { flex: 1; justify-content: center; padding: 13px; }
  .search__divider { display: none; }
  /* listing grid: 4-up doesn't fit — 2 per row, height freed up (the measured
     rows-shift in reveal.js brings the extra rows into view automatically) */
  .portfolio__grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio__card { max-height: none; }
}
@media (max-width: 640px) {
  .topnav { display: none; }
}
@media (max-width: 560px) {
  .page { padding: 8px; }
  .hero { padding: 10px; gap: 10px; }
  .hero__left { padding: 20px; }
  .hero__right { min-height: 320px; }
  .badges { gap: 16px; }
  .badge { font-size: 13px; }
  .nav { width: 42px; height: 42px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .carousel__track { transition: none !important; }
}

/* ---------- Site footer ---------- */
/* Sits AFTER the pinned reveal. Deliberately a LIGHT surface so it reads as a
   clearly separate footer against the dark #141414 listing grid (and bookends the
   light hero at the top of the page) rather than blending into the card section. */
.site-footer {
  position: relative;
  z-index: 1;
  background: #f1efe9; /* warm light — strong contrast with the dark listings above */
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--ink);
  font-family: "Inter", sans-serif;
}
.site-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(48px, 7vh, 88px) 5vw clamp(26px, 4vh, 40px);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.25fr 2fr;
  gap: clamp(36px, 5vw, 72px);
  padding-bottom: clamp(36px, 5vh, 56px);
}

/* Brand block */
.site-footer__brand { max-width: 360px; }
.site-footer__tagline {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
}
.site-footer__cta {
  margin-top: 26px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s var(--ease), background 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.footer-btn--primary { background: var(--black); color: #fff; }
.footer-btn--primary:hover { transform: translateY(-1px); background: #000; }
.footer-btn--ghost { border: 1px solid rgba(0, 0, 0, 0.2); color: var(--ink); }
.footer-btn--ghost:hover { border-color: var(--black); transform: translateY(-1px); }

/* Link columns */
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.footer-col__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--black);
  margin-bottom: 16px;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer-col a {
  font-size: 14.5px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.16s var(--ease);
}
.footer-col a:hover { color: var(--black); }

/* Bottom bar */
.site-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: clamp(24px, 3vh, 32px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.site-footer__copy { font-size: 13px; color: var(--muted); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__legal a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.16s var(--ease);
}
.site-footer__legal a:hover { color: var(--black); }
.site-footer__social { display: flex; gap: 8px; }
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.14);
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.site-footer__social a:hover { background: var(--black); color: #fff; border-color: var(--black); }

@media (max-width: 900px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__nav { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .site-footer__nav { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .site-footer__bar { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ================= Eigentümer:in page (eigentuemer.html) ================= */
.eg-body {
  --eg-h: 74px;          /* fixed header height */
  --eg-green: #18a558;   /* progress / return accent */
  --calc-hold: 15vh;     /* how long the white card stays fully in view (pinned,
                            covering the footer) before it scrolls up to reveal it */
  background: var(--white);
  padding-top: var(--eg-h);
}

/* End-of-page: the footer is pinned to the bottom of the viewport (behind the
   cards). The white calculator card sits over it and, after its hold, scrolls
   up to REVEAL the footer beneath — so no white background is ever exposed and
   the footer stays anchored at the bottom. --eg-footer-h (footer height) is set
   from rendite.js and reserves exactly enough scroll room to reveal it, so you
   can't scroll past into empty space. */
.eg-body {
  --eg-footer-h: 35vh; /* fallback until JS measures the real footer height;
                          deliberately under-estimated (too-small only under-
                          reveals the footer; too-large would expose white) */
}
/* in-flow scroll room AFTER the sticky cards, so the last card can scroll up
   and reveal the fixed footer beneath it (a margin here would collapse) */
.eg-body .eg-reveal-spacer { height: var(--eg-footer-h); }
.eg-body .site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

/* fixed header — reuses .sp-topbar / .sp-topnav / .logo / .menu-btn */
.eg-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--eg-h);
  display: flex;
  align-items: center;
  background: var(--white);
  padding: 0 3.5vw;
  transition: background-color 0.35s var(--ease);
}
.eg-header .sp-topbar { width: 100%; }

/* adaptive header — turns dark so it blends into the black model section
   (.is-dark toggled from rendite.js as that section pins under the header) */
.eg-header .logo__name,
.eg-header .topnav__link,
.eg-header .menu-btn {
  transition: color 0.35s var(--ease), border-color 0.18s var(--ease),
    background 0.2s var(--ease);
}
.eg-header.is-dark { background: var(--black); }
.eg-header.is-dark .logo__name,
.eg-header.is-dark .topnav__link,
.eg-header.is-dark .menu-btn { color: #fff; }
.eg-header.is-dark .topnav__link:hover,
.eg-header.is-dark .topnav__link.is-active { border-bottom-color: #fff; }
.eg-header.is-dark .menu-btn:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- Section 1: pitch (left) + example dashboard (right) ---------- */
.eg-hero {
  /* pinned while the black section scrolls up over it (card-stack effect) */
  position: sticky;
  top: var(--eg-h);
  z-index: 1;
  background: var(--white);
  min-height: calc(100dvh - var(--eg-h));
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(14px, 2.2vw, 28px) 4vw;
}
.eg-hero__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.eg-headline {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--black);
}
.eg-sub {
  margin: 22px auto 0;
  max-width: 36ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--muted);
}
/* CTA centered under the copy, hero-page button language */
.eg-cta-row {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.eg-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 56px;
  padding: 0 30px;
  background: var(--black);
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 18px 34px -20px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.eg-cta svg { transition: transform 0.2s var(--ease); }
.eg-cta:hover { background: #000; transform: translateY(-2px); }
.eg-cta:hover svg { transform: translateX(3px); }
.eg-cta:active { transform: translateY(0); }

/* ---------- Example dashboard ---------- */
.eg-hero__right { display: flex; }
.eg-dash {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 16px;
}
.eg-tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 22px 46px -30px rgba(0, 0, 0, 0.22);
}
.eg-tile__label {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* photo tile */
.eg-tile--photo { padding: 16px; display: flex; flex-direction: column; min-height: 0; }
.eg-photo {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: 1;
  min-height: 150px;
}
.eg-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.eg-photo__meta { padding: 16px 4px 2px; }
.eg-photo__facts {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--black);
}
.eg-photo__addr {
  margin-top: 7px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* rendite tile — the Livive rent centered as the focal figure, with the
   struck long-term rent and the return badge stacked below it */
.eg-tile--rendite { display: flex; flex-direction: column; }
.eg-rendite__body {
  flex: 1;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 9px;
}
.eg-rendite__k { font-size: 14px; font-weight: 500; color: var(--muted); }
.eg-rendite__amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}
.eg-rendite__amount strong {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(42px, 4.2vw, 58px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--black);
}
.eg-rendite__amount span { font-size: 15px; color: var(--muted); }
.eg-rendite__compare { font-size: 14px; color: var(--muted); }
.eg-rendite__compare s { color: #a2a2a2; }
.eg-rendite__badge {
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(24, 165, 88, 0.12);
  color: var(--eg-green);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* steps tile spans both columns */
.eg-tile--steps { grid-column: 1 / -1; padding: 18px 16px 14px; }
.eg-steps {
  margin-top: 20px;
  list-style: none;
  display: flex;
}
.eg-step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* connector line, drawn behind the circle, from previous circle to this one */
.eg-step::before {
  content: "";
  position: absolute;
  top: 21px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.eg-step:first-child::before { display: none; }
/* the connector leading INTO a reached step is green */
.eg-step.is-active::before,
.eg-step.is-done:not(:first-child)::before { background: var(--eg-green); }

.eg-step__mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--line);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--muted);
}
.eg-step.is-done .eg-step__mark {
  background: var(--eg-green);
  border-color: var(--eg-green);
  color: var(--white);
}
.eg-step.is-active .eg-step__mark {
  border-color: var(--eg-green);
  color: var(--black);
}
/* spinning loading ring around the active step */
.eg-step__ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2.5px solid rgba(24, 165, 88, 0.22);
  border-top-color: var(--eg-green);
  animation: eg-spin 0.85s linear infinite;
}
@keyframes eg-spin { to { transform: rotate(360deg); } }

.eg-step__txt {
  margin-top: 13px;
  max-width: 16ch;
  font-size: 13.5px;
  line-height: 1.32;
  color: var(--ink);
}
.eg-step:not(.is-done):not(.is-active) .eg-step__txt { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .eg-step__ring { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .eg-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 28px;
    text-align: center;
  }
  .eg-hero__left { align-items: center; }
  .eg-sub { max-width: 42ch; }
  .eg-dash { max-width: 520px; }
}
@media (max-width: 560px) {
  .eg-dash { grid-template-columns: 1fr; }
  .eg-step__txt { font-size: 11px; }
}

/* ===== Eigentümer:in — Section 2: our model (black) ===== */
.mdl {
  /* card stacks over the white hero, then stays pinned (fully black) while
     the calculator card scrolls up over it */
  --mdl-dwell: 30vh;   /* extra height so the black card stays fully in view
                          for this much scroll before the white card rises */
  position: sticky;
  top: var(--eg-h);
  z-index: 2;
  /* taller than the viewport by --mdl-dwell; the extra height is padded onto
     the bottom so the content stays centred in the first screenful */
  min-height: calc(100dvh - var(--eg-h) + var(--mdl-dwell));
  background: var(--black);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(64px, 9vh, 110px) 4vw;
  padding-bottom: calc(clamp(64px, 9vh, 110px) + var(--mdl-dwell));
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
  box-shadow: 0 -26px 60px -22px rgba(0, 0, 0, 0.5);
  transition: border-radius 0.4s var(--ease);
}
/* pinned at the header line → flatten to full-bleed (no corner gaps) */
.mdl.is-flat { border-radius: 0; }
.mdl__head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.mdl__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: #fff;
}
.mdl__sub {
  margin: 18px auto 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

/* timeline: numbered nodes on a thin connecting line, content below each */
.mdl-tl {
  list-style: none;
  max-width: 1120px;
  margin: clamp(48px, 7vw, 92px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.mdl-tl__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 10px;
}
/* thin line running through the node centres */
.mdl-tl__step::before {
  content: "";
  position: absolute;
  top: 23px;
  right: 50%;
  left: -50%;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.15);
}
.mdl-tl__step:first-child::before { display: none; }
.mdl-tl__node {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}
.mdl-tl__tag {
  margin-top: 24px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eg-green);
}
.mdl-tl__title {
  margin-top: 9px;
  min-height: 2.5em;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  color: #fff;
}
.mdl-tl__price {
  margin-top: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 2.8vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
}
.mdl-tl__note {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}
.mdl-tl__badge {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(24, 165, 88, 0.16);
  color: var(--eg-green);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 720px) {
  .mdl-tl {
    grid-template-columns: repeat(2, 1fr);
    max-width: 440px;
    row-gap: clamp(34px, 8vw, 52px);
  }
  .mdl-tl__step::before { display: none; }
  .mdl-tl__title { min-height: 0; }
}

/* "zum Rendite Rechner" cue below the timeline */
.mdl-cta {
  width: fit-content;
  margin: clamp(52px, 8vw, 104px) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #fff;
}
.mdl-cta__label {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.01em;
  color: #fff;
  transition: color 0.2s var(--ease);
}
.mdl-cta:hover .mdl-cta__label { color: var(--eg-green); }
.mdl-chevron {
  color: rgba(255, 255, 255, 0.85);
  animation: mdl-bounce 1.9s var(--ease) infinite;
}
.mdl-cta:hover .mdl-chevron { color: var(--eg-green); }
@keyframes mdl-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

@media (prefers-reduced-motion: reduce) {
  .mdl-chevron { animation: none; }
}

/* ===== Eigentümer:in — Section 3: Rendite-Rechner (black, white tile) ===== */
.calc-section {
  /* white card that scrolls up and stacks over the fixed black section;
     --calc-dwell (defined on .eg-body) is shared with the footer overlap */
  position: sticky;
  top: var(--eg-h);
  z-index: 3;
  /* taller than the viewport by --calc-hold; the extra height is padded onto
     the bottom so the content stays centred in the first screenful */
  min-height: calc(100dvh - var(--eg-h) + var(--calc-hold));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
  box-shadow: 0 -30px 70px -26px rgba(0, 0, 0, 0.45);
  transition: border-radius 0.4s var(--ease), border-color 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vh, 48px);
  padding: clamp(56px, 8vh, 100px) 4vw;
  padding-bottom: calc(clamp(56px, 8vh, 100px) + var(--calc-hold));
}
/* pinned at the header line → flatten to full-bleed, drop the outline */
.calc-section.is-flat { border-radius: 0; border-color: transparent; }
/* central CTA below the calculator (inverted brand button on black) */
.calc-inserieren {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 34px;
  background: var(--black);
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  border-radius: 15px;
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.calc-inserieren svg { transition: transform 0.2s var(--ease); }
.calc-inserieren:hover { transform: translateY(-2px); background: #000; }
.calc-inserieren:hover svg { transform: translateX(3px); }
.calc {
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  /* thin outline like the section-1 tiles + a soft lift shadow */
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 46px);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.22);
}

/* ---- left: results ---- */
.calc__results {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.calc__eyebrow {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eg-green);
}
.calc__title {
  margin-top: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--black);
}
.calc__classic {
  margin-top: 26px;
  font-size: 15px;
  color: var(--muted);
}
.calc__classic s { color: #a2a2a2; font-weight: 500; }
.calc__big {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calc__big-num {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(46px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--eg-green);
}
.calc__big-sub {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}
.calc__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 32px;
  height: 54px;
  padding: 0 26px;
  background: var(--black);
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.calc__cta svg { transition: transform 0.2s var(--ease); }
.calc__cta:hover { background: #000; transform: translateY(-2px); }
.calc__cta:hover svg { transform: translateX(3px); }

/* ---- right: inputs ---- */
.calc__inputs {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
}
.calc__field { display: flex; flex-direction: column; gap: 12px; }
.calc__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.calc__label {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.calc__value {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--black);
}

/* address input + autocomplete */
.calc__input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.calc__input:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(13, 13, 13, 0.08);
}
.calc-ac { position: relative; }
.calc-ac__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.35);
  max-height: 244px;
  overflow-y: auto;
}
.calc-ac__item {
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
}
.calc-ac__item:hover { background: #f4f2ee; }

/* range sliders */
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--black) 0%, var(--black) var(--fill, 50%),
    var(--line) var(--fill, 50%), var(--line) 100%
  );
  cursor: pointer;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--black);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.calc-range::-webkit-slider-thumb:active { transform: scale(1.12); }
.calc-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--black);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}
.calc-range:focus-visible { outline: 2px solid var(--black); outline-offset: 6px; }

/* Ja / Nein toggle */
.calc-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.calc-toggle__btn {
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.calc-toggle__btn:hover { border-color: var(--black); }
.calc-toggle__btn.is-active {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

@media (max-width: 860px) {
  .calc { grid-template-columns: 1fr; gap: 28px; }
  .calc__cta { margin-top: 8px; }
}

/* ================= Inserieren page (inserieren.html) ================= */
.ins-body {
  --ins-h: 74px;              /* fixed header height, matching the other pages */
  background: var(--white);
  padding-top: var(--ins-h);
  min-height: 100vh;
}

/* fixed header — identical language to .eg-header (menu + Livive left, nav centred) */
.ins-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--ins-h);
  display: flex;
  align-items: center;
  background: var(--white);
  padding: 0 3.5vw;
}
.ins-header .sp-topbar { width: 100%; }

/* back link — small, borderless, left edge aligned under the Livive wordmark
   (header padding 3.5vw + menu button 46px + 14px gap) */
.ins-back {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 3.5vw 0 calc(3.5vw + 60px);
}
/* optional right-aligned action in the back bar (e.g. 'Inserat erstellen') */
.ins-top-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 18px;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-md);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.ins-top-cta:hover { transform: translateY(-1px); background: #000; }
.ins-back__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 4px;
  background: none;
  border: none;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s var(--ease);
}
.ins-back__btn svg { transition: transform 0.18s var(--ease); }
.ins-back__btn:hover { color: var(--black); }
.ins-back__btn:hover svg { transform: translateX(-3px); }

.ins-main {
  position: relative;
  padding: 0 5vw clamp(80px, 14vh, 160px);
}

/* page title — centred, generous space below the header */
.ins-title {
  margin: clamp(20px, 4vh, 44px) auto clamp(40px, 6vh, 72px);
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: -0.03em;
  color: var(--black);
}

/* ---------- left category overview (fixed on the left, vertically centred) ---------- */
.ins-steps {
  position: fixed;
  left: clamp(20px, 4vw, 68px);
  top: calc(50% + var(--ins-h) / 2);
  transform: translateY(-50%);
  z-index: 5;
}
.ins-steps__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ins-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.ins-step:hover { background: #f4f2ee; }
/* connecting line between the step marks */
.ins-step::before {
  content: "";
  position: absolute;
  left: 23.5px;              /* centre of the 27px mark + 10px padding */
  top: -4px;
  width: 1.5px;
  height: 13px;
  background: var(--line);
}
.ins-step:first-child::before { display: none; }
.ins-step__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--white);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  /* no transition: the check/state should just be there when advancing */
}
.ins-step__label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 15px;
}
/* done: green check */
.ins-step.is-done { color: var(--ink); }
.ins-step.is-done .ins-step__mark {
  background-color: var(--eg-green, #18a558);
  border-color: var(--eg-green, #18a558);
  color: transparent;        /* hide the number */
  /* minimalist straight check, centred in the circle */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* current: solid black mark + ink label */
.ins-step.is-current { color: var(--black); }
.ins-step.is-current .ins-step__mark {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}
.ins-step.is-current .ins-step__label { font-weight: 600; }

/* ---------- centred form: one category at a time, no surrounding card ---------- */
.ins-form {
  max-width: 560px;
  margin: 0 auto;
}
.ins-cat {
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: ins-in 0.4s var(--ease) both;
}
/* `display:flex` above would otherwise override the [hidden] attribute */
.ins-cat[hidden],
.ins-actions[hidden],
.ins-done[hidden] { display: none; }
@keyframes ins-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.ins-cat__eyebrow {
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eg-green, #18a558);
}
.ins-cat__title {
  margin: -8px 0 8px;
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  color: var(--black);
}

/* fields (mirror the calculator inputs for a consistent, clean look) */
.ins-field { display: flex; flex-direction: column; gap: 10px; }
.ins-field--grow { flex: 1; }
.ins-row { display: flex; gap: 16px; }
.ins-row > .ins-field { flex: 1; }
.ins-label {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
/* required-field marker */
.ins-req { margin-left: 2px; color: var(--muted); font-weight: 400; }
.ins-input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.ins-input::placeholder { color: #b0b0b0; }
.ins-input:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(13, 13, 13, 0.08);
}
.ins-textarea {
  height: auto;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
  min-height: 120px;
}
.ins-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

/* small helper under a field */
.ins-hint {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
/* dynamic Livive-vs-classic return hint (Mietverhältnis step) */
.ins-rendite {
  margin: 0 auto;
  max-width: 44ch;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.ins-rendite.is-positive { color: var(--ink); }
.ins-rendite.is-positive strong { color: var(--eg-green, #18a558); font-weight: 700; }

/* selectable chips (multi-select, or single-select when [data-single]) */
.ins-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ins-chip {
  height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease), transform 0.15s var(--ease);
}
.ins-chip:hover { border-color: var(--black); }
.ins-chip:active { transform: scale(0.97); }
.ins-chip.is-active {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* image dropzone */
.ins-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(34px, 6vh, 60px) 24px;
  border: 1.5px dashed #cfcfcf;
  border-radius: var(--radius-lg);
  background: #fafafa;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.ins-drop:hover,
.ins-drop.is-drag {
  border-color: var(--black);
  background: #f4f2ee;
  color: var(--ink);
}
.ins-drop__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.ins-drop__hint { font-size: 13.5px; }

/* actions */
.ins-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
}
.ins-prev {
  background: none;
  border: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s var(--ease);
}
.ins-prev:hover { color: var(--black); }
.ins-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  background: var(--black);
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.ins-next svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.ins-next:hover { transform: translateY(-2px); background: #000; }
.ins-next:hover svg { transform: translateX(3px); }
/* gated until the current category's required fields are filled */
.ins-next:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
}
.ins-next:disabled:hover { transform: none; background: var(--black); }
.ins-next:disabled:hover svg { transform: none; }

/* contact-step tip (email/phone not shown publicly) */
.ins-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  background: #f4f2ee;
  border-radius: var(--radius-md);
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.ins-tip svg { flex: none; margin-top: 1px; color: var(--ink); }
.ins-tip strong { color: var(--ink); font-weight: 600; }

/* success state */
.ins-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: clamp(20px, 5vh, 48px) 0;
  animation: ins-in 0.4s var(--ease) both;
}
.ins-done__mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--eg-green, #18a558);
  color: #fff;
}
.ins-done__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  color: var(--black);
}
.ins-done__text { max-width: 40ch; color: var(--muted); font-size: 16px; line-height: 1.55; }
.ins-done__link {
  margin-top: 6px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  color: var(--black);
  text-decoration: none;
  border-bottom: 1.5px solid var(--black);
  padding-bottom: 2px;
}

/* hide the fixed step overview when it would crowd the centred form */
@media (max-width: 1040px) {
  .ins-steps { display: none; }
}
@media (max-width: 560px) {
  .ins-row { flex-direction: column; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ins-cat, .ins-done { animation: none; }
}


/* ============ Inserat gespeichert — confirmation screen ============ */
.save-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: calc(100vh - var(--ins-h) - 62px);
  padding: 0 6vw clamp(48px, 8vh, 90px);
}
/* animated green badge — compact, sitting at the vertical centre of the page,
   with the text and button flowing below it (min top-gap on short screens) */
.save-badge {
  margin-top: max(clamp(24px, 5vh, 48px), calc(50vh - var(--ins-h) - 98px));
  margin-bottom: clamp(22px, 3vh, 32px);
}
.save-badge__svg { width: clamp(60px, 7vw, 78px); height: clamp(60px, 7vw, 78px); }
.save-badge__circle {
  fill: var(--eg-green, #18a558);
  transform-box: fill-box;
  transform-origin: center;
  animation: save-pop 0.45s var(--ease) both;
}
.save-badge__check {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: save-draw 0.4s var(--ease) 0.34s forwards;
}
@keyframes save-pop {
  0% { transform: scale(0); }
  65% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes save-draw { to { stroke-dashoffset: 0; } }

.save-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.03em;
  color: var(--black);
}
.save-text {
  margin: 16px auto 0;
  max-width: 46ch;
  font-family: "Inter", sans-serif;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--muted);
}
.save-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  margin-top: clamp(30px, 6vh, 56px);
  padding: 0 36px;
  background: var(--black);
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border-radius: 15px;
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.save-cta svg { transition: transform 0.2s var(--ease); }
.save-cta:hover { transform: translateY(-2px); background: #000; }
.save-cta:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .save-badge__circle { animation: none; }
  .save-badge__check { animation: none; stroke-dashoffset: 0; }
}

/* ============ Auth screens (Account erstellen / Login) ============ */
.auth-main {
  min-height: calc(100vh - var(--ins-h) - 62px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vh, 64px) 6vw clamp(48px, 8vh, 90px);
}
.auth-step { width: 100%; display: flex; justify-content: center; }
.auth-step[hidden] { display: none; }
.auth-card { width: 100%; max-width: 440px; }
.auth-card.auth-done { text-align: center; }

.auth-title {
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.02em;
  color: var(--black);
}
.auth-lead {
  margin: 12px auto 0;
  max-width: 40ch;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: clamp(22px, 3.5vh, 34px);
}
.auth-submit {
  width: 100%;
  height: 54px;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), opacity 0.2s var(--ease);
}
.auth-submit:hover:not(:disabled) { transform: translateY(-2px); background: #000; }
.auth-submit:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }

.auth-alt {
  margin-top: 20px;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--muted);
}
.auth-link {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.auth-link:hover { color: var(--black); }

/* verification code input */
.auth-code { text-align: center; letter-spacing: 0.4em; font-size: 20px; font-weight: 600; }

/* success badge inside an auth step (reuses the .save-badge__* animation) */
.auth-done-badge { display: flex; justify-content: center; margin-bottom: 22px; }

/* success-screen CTA (auth): centred, not full-width */
.auth-done .auth-submit {
  width: auto;
  min-width: 240px;
  margin: clamp(26px, 4vh, 36px) auto 0;
}

/* ============ Dashboard ============ */
.dash-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(30px, 7vh, 80px) 5vw clamp(60px, 10vh, 120px);
}
.dash-head { text-align: center; margin-bottom: clamp(30px, 5vh, 54px); }
.dash-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: -0.03em;
  color: var(--black);
}
.dash-sub {
  margin: 12px auto 0;
  max-width: 52ch;
  font-family: "Inter", sans-serif;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--muted);
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.dash-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 216px;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s var(--ease);
}
.dash-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.25);
  border-color: #dcdcdc;
}
.dash-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #f4f2ee;
  color: var(--black);
}
.dash-card__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--black);
}
.dash-card__desc {
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}
.dash-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--black);
}
.dash-card__more svg { transition: transform 0.2s var(--ease); }
.dash-card:hover .dash-card__more svg { transform: translateX(3px); }

@media (max-width: 820px) {
  .dash-grid { grid-template-columns: 1fr; }
}

/* ============ Profil und Dokumente ============ */
.pf-main {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(20px, 4vh, 44px) 5vw clamp(60px, 10vh, 120px);
}
.pf-title {
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 46px);
  letter-spacing: -0.03em;
  color: var(--black);
  margin-bottom: clamp(30px, 5vh, 54px);
}
.pf-layout {
  display: grid;
  grid-template-columns: 216px 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
/* left sub-section nav */
.pf-nav {
  position: sticky;
  top: calc(var(--ins-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-nav__item {
  text-align: left;
  padding: 12px 14px;
  border: none;
  background: none;
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.pf-nav__item:hover { background: #f4f2ee; color: var(--ink); }
.pf-nav__item.is-active { background: var(--black); color: var(--white); }

/* content sections */
.pf-section { animation: ins-in 0.35s var(--ease) both; }
.pf-section[hidden] { display: none; }
.pf-sec-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  color: var(--black);
  margin-bottom: 6px;
}
.pf-sec-lead {
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: clamp(20px, 3vh, 28px);
  max-width: 52ch;
}
.pf-form { display: flex; flex-direction: column; gap: 18px; margin-top: clamp(18px, 3vh, 26px); }
.pf-actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.pf-save {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 28px;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.pf-save:hover { transform: translateY(-2px); background: #000; }
.pf-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--eg-green, #18a558);
}

/* document upload rows */
.pf-docs { display: flex; flex-direction: column; gap: 14px; }
.pf-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: border-color 0.2s var(--ease);
}
.pf-doc.is-done { border-color: var(--eg-green, #18a558); }
.pf-doc__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-doc__name { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 16px; color: var(--black); }
.pf-doc__hint { font-family: "Inter", sans-serif; font-size: 13px; color: var(--muted); }
.pf-doc__file {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; color: var(--eg-green, #18a558);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-doc__upload {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}
.pf-doc__upload:hover { border-color: var(--black); }
.pf-doc.is-done .pf-doc__upload { color: var(--muted); }

@media (max-width: 780px) {
  .pf-layout { grid-template-columns: 1fr; gap: 22px; }
  .pf-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .pf-doc { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pf-doc__upload { align-self: stretch; justify-content: center; }
}

/* ============ Meine Immos (reuses the .pf-* layout) ============ */
.pf-main--wide { max-width: 1060px; }

.im-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.im-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s var(--ease);
}
.im-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 46px -28px rgba(0, 0, 0, 0.28);
  border-color: #dcdcdc;
}
.im-card__media { aspect-ratio: 16 / 11; background: #ececec; overflow: hidden; }
.im-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.im-card__body { display: flex; flex-direction: column; gap: 4px; padding: 15px 17px 17px; }
.im-card__price { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 18px; color: var(--black); }
.im-card__title { font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); }
.im-card__meta { font-family: "Inter", sans-serif; font-size: 13.5px; color: var(--muted); }
.im-card__note {
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--muted);
}
.im-card__note.is-active { color: var(--eg-green, #18a558); }
.im-card__note.is-active::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--eg-green, #18a558);
}

/* empty state (e.g. no saved listings yet) */
.im-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: clamp(40px, 8vh, 90px) 20px;
  border: 1px dashed #d8d8d8;
  border-radius: var(--radius-lg);
  color: var(--muted);
}
.im-empty svg { color: #c8c8c8; }
.im-empty__title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); }
.im-empty__text { font-family: "Inter", sans-serif; font-size: 14px; line-height: 1.5; max-width: 40ch; }

/* ============ Inserat-Detailseite ============ */
.det-main {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(14px, 2vh, 28px) 3.5vw clamp(56px, 9vh, 110px);
}
.det-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--black);
}
.det-sub {
  margin-top: 10px;
  font-family: "Inter", sans-serif;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--muted);
}

/* gallery: one large + four smaller */
.det-gallery {
  position: relative;
  margin-top: clamp(18px, 3vh, 30px);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: clamp(300px, 46vh, 520px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.det-shot { padding: 0; border: none; cursor: pointer; overflow: hidden; background: #ececec; }
.det-shot:first-child { grid-row: 1 / span 2; }
.det-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.det-shot:hover img { transform: scale(1.04); }
.det-gallery__all {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-md);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s var(--ease);
}
.det-gallery__all:hover { transform: translateY(-1px); }

/* body: content left, sticky price/actions right */
.det-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(28px, 4vh, 46px);
}
.det-block { margin-bottom: clamp(28px, 4vh, 44px); }
.det-h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: -0.02em;
  color: var(--black);
  margin-bottom: 16px;
}
.det-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.det-fact {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.det-fact__label { font-family: "Inter", sans-serif; font-size: 12.5px; color: var(--muted); }
.det-fact__value { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 16px; color: var(--black); margin-top: 3px; }
.det-desc { font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.65; color: var(--ink); max-width: 62ch; }

/* sticky price / actions card */
.det-aside { position: sticky; top: calc(var(--ins-h) + 20px); }
.det-price-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2vw, 26px);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.22);
}
.det-price { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(26px, 3vw, 34px); color: var(--black); }
.det-price span { font-size: 15px; font-weight: 500; color: var(--muted); }
.det-price-note { margin-top: 4px; font-family: "Inter", sans-serif; font-size: 13px; color: var(--muted); }
.det-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 54px;
  margin-top: 18px;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.det-cta:hover { transform: translateY(-2px); background: #000; }
.det-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 50px;
  margin-top: 10px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}
.det-fav:hover { border-color: var(--black); }
.det-fav svg { transition: transform 0.15s var(--ease); }
.det-fav.is-fav { border-color: var(--eg-green, #18a558); color: var(--eg-green, #18a558); }
.det-fav.is-fav svg { fill: var(--eg-green, #18a558); stroke: var(--eg-green, #18a558); }

/* location + map placeholder */
.det-loc-text { font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.65; color: var(--ink); max-width: 62ch; margin-bottom: 18px; }
.det-map {
  position: relative;
  height: clamp(240px, 34vh, 360px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(rgba(0,0,0,0.02), rgba(0,0,0,0.02)),
    repeating-linear-gradient(0deg, #eeeae2 0 39px, #e6e1d8 39px 40px),
    repeating-linear-gradient(90deg, #eeeae2 0 39px, #e6e1d8 39px 40px);
  display: grid;
  place-items: center;
}
.det-map__pin {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--black);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.45);
}
.det-map__pin svg { transform: rotate(45deg); color: #fff; }
.det-map__hint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-family: "Inter", sans-serif; font-size: 12.5px; color: var(--muted);
  background: rgba(255,255,255,0.85); padding: 5px 12px; border-radius: 999px;
}

/* residents section */
.det-residents .det-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: clamp(30px, 5vh, 54px) 24px;
  border: 1px dashed #d8d8d8;
  border-radius: var(--radius-lg);
}
.det-empty svg { color: #c8c8c8; }
.det-empty__title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); }
.det-empty__text { font-family: "Inter", sans-serif; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 46ch; }
.det-empty__cta {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  height: 46px; padding: 0 22px;
  background: var(--black); color: var(--white);
  border-radius: var(--radius-md);
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 14.5px;
  text-decoration: none;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.det-empty__cta:hover { transform: translateY(-2px); background: #000; }

/* ---- lightbox ---- */
.lb { position: fixed; inset: 0; z-index: 120; display: none; background: rgba(10, 10, 10, 0.94); }
.lb.is-open { display: block; }
html.no-scroll .lb, .lb.is-open ~ * { }
.lb__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 62px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; color: #fff; z-index: 2;
}
.lb__count { font-family: "Inter", sans-serif; font-size: 14px; color: rgba(255,255,255,0.8); }
.lb__btn {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; border: none; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer;
  transition: background 0.18s var(--ease);
}
.lb__btn:hover { background: rgba(255,255,255,0.22); }
/* grid view */
.lb__grid {
  position: absolute; inset: 62px 0 0; overflow-y: auto;
  padding: 8px 20px 40px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
  align-content: start;
  max-width: 1100px; margin: 0 auto;
}
.lb__thumb { padding: 0; border: none; cursor: pointer; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: #222; }
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s var(--ease); }
.lb__thumb:hover img { transform: scale(1.05); }
.lb.is-photo .lb__grid { display: none; }
/* single photo view */
.lb__stage { position: absolute; inset: 62px 0 0; display: none; align-items: center; justify-content: center; padding: 0 76px 32px; }
.lb.is-photo .lb__stage { display: flex; }
.lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.14); color: #fff; cursor: pointer;
  transition: background 0.18s var(--ease);
}
.lb__nav:hover { background: rgba(255,255,255,0.26); }
.lb__nav--prev { left: 16px; }
.lb__nav--next { right: 16px; }

@media (max-width: 900px) {
  .det-body { grid-template-columns: 1fr; }
  .det-aside { position: static; }
  .det-gallery { grid-template-columns: 1fr 1fr; height: auto; }
  .det-shot:first-child { grid-column: 1 / span 2; aspect-ratio: 16/10; }
  .det-shot:not(:first-child) { aspect-ratio: 4/3; }
  .det-shot:nth-child(n+4) { display: none; }
}
@media (max-width: 560px) {
  .lb__stage { padding: 0 12px 24px; }
  .lb__nav { width: 44px; height: 44px; }
}

/* clickable listing cards */
.portfolio__card { cursor: pointer; }

/* ======================================================================
   Mein Inserat — owner listing management page (.mi-*, .ap-*)
   ====================================================================== */

/* --- head: title block + actions ------------------------------------ */
.mi-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px 28px;
  flex-wrap: wrap;
}
.mi-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--eg-green, #18a558);
  margin-bottom: 12px;
}
.mi-live__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--eg-green, #18a558);
  box-shadow: 0 0 0 4px rgba(24, 165, 88, 0.16);
}
.mi-live.is-idle { color: var(--muted); }
.mi-live.is-idle .mi-live__dot { background: var(--muted); box-shadow: 0 0 0 4px rgba(107,107,107,0.14); }
.mi-head__intro { min-width: 0; }
.mi-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mi-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.mi-btn:hover { transform: translateY(-1px); }
.mi-btn--ghost:hover { border-color: var(--black); }
.mi-btn--dark { background: var(--black); color: #fff; border-color: var(--black); box-shadow: 0 12px 24px -16px rgba(0,0,0,0.5); }
.mi-btn--dark:hover { background: #000; }

/* --- generic section block ------------------------------------------ */
.mi-block { margin-top: clamp(32px, 5vh, 56px); }
.mi-block__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.mi-block__head .det-h2 { margin-bottom: 0; }
.mi-count { font-family: "Inter", sans-serif; font-size: 14px; color: var(--muted); }

/* --- overview: eckdaten (left) + kennzahlen (right) ------------------ */
/* --- compact summary: Eckdaten specs + KPI row ---------------------- */
.mi-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 3vh, 34px);
  padding: 14px clamp(16px, 2.2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.mi-specs { display: flex; flex-wrap: wrap; align-items: center; }
.mi-spec {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px clamp(14px, 1.6vw, 22px);
  border-right: 1px solid var(--line);
}
.mi-spec:first-child { padding-left: 0; }
.mi-spec:last-child { border-right: none; padding-right: 0; }
.mi-spec__k { font-family: "Inter", sans-serif; font-size: 11.5px; color: var(--muted); }
.mi-spec__v { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 15px; color: var(--black); white-space: nowrap; }
.mi-kpis { display: flex; align-items: stretch; gap: 10px; }
.mi-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
}
.mi-kpi__num { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.1; color: var(--black); }
.mi-kpi__label { display: inline-flex; align-items: center; gap: 5px; font-family: "Inter", sans-serif; font-size: 12.5px; color: var(--muted); }
.mi-kpi--link {
  cursor: pointer;
  border-color: var(--line);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}
.mi-kpi--link:hover { border-color: var(--black); transform: translateY(-1px); }
.mi-kpi--link .mi-kpi__label { color: var(--ink); font-weight: 600; }
.mi-kpi__arrow { transition: transform 0.18s var(--ease); }
.mi-kpi--link:hover .mi-kpi__arrow { transform: translateX(3px); }

/* --- Status der Vermietung (focal, animated) ------------------------- */
.mi-status-block { margin-top: clamp(24px, 3.5vh, 42px); }
.mi-status {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(26px, 3.4vw, 44px) clamp(22px, 3.4vw, 46px);
  background: #fbfaf8;
  /* scroll reveal (matches the owner page's reveal feel) */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.mi-status.is-animated { opacity: 1; transform: none; }
.mi-status__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 28px;
  flex-wrap: wrap;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.mi-status__eyebrow { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; color: var(--eg-green, #18a558); }
.mi-status__headline {
  margin-top: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  color: var(--black);
}
.mi-status__lead { margin-top: 8px; font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 52ch; }
.mi-status__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--black);
  background: var(--black);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 14px 26px -18px rgba(0,0,0,0.6);
  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
}
.mi-status__cta:hover { transform: translateY(-1px); background: #000; }
.mi-status__cta svg { transition: transform 0.18s var(--ease); }
.mi-status__cta:hover svg { transform: translateX(3px); }

/* track: grey rail + animated green fill behind evenly-spaced dots */
.mi-status__track { position: relative; }
.mi-status__rail, .mi-status__fill {
  position: absolute;
  top: 16px;           /* dot centre: 34px dot → 17px, minus 1px for the 2px line */
  left: 12.5%;         /* first dot centre for 4 evenly-spaced steps */
  height: 2px;
  border-radius: 2px;
}
.mi-status__rail { right: 12.5%; background: var(--line); }
.mi-status__fill { width: 0; background: var(--eg-green, #18a558); transition: width 1.1s var(--ease); }
.mi-steps {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.mi-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
}
.mi-step__dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--white);
  display: grid;
  place-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.2s var(--ease), transform 0.4s var(--ease);
  transition-delay: calc(var(--step-i, 0) * 0.16s);
}
.mi-step__label {
  margin-top: 12px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  transition: color 0.3s var(--ease);
  transition-delay: calc(var(--step-i, 0) * 0.16s);
}
.mi-step__sub { margin-top: 3px; font-family: "Inter", sans-serif; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
/* lit states only apply once the section has been revealed */
.mi-status.is-animated .mi-step.is-done .mi-step__label,
.mi-status.is-animated .mi-step.is-current .mi-step__label { color: var(--black); }
.mi-status.is-animated .mi-step.is-done .mi-step__dot {
  background-color: var(--eg-green, #18a558);
  border-color: var(--eg-green, #18a558);
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* current step: white circle, green border, black number, spinning green ring */
.mi-status.is-animated .mi-step.is-current .mi-step__dot {
  position: relative;
  background: #fff;
  border-color: rgba(24, 165, 88, 0.28);
  color: var(--black);
}
.mi-status.is-animated .mi-step.is-current .mi-step__dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--eg-green, #18a558);
  animation: mi-spin 0.85s linear infinite;
}
@keyframes mi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mi-status.is-animated .mi-step.is-current .mi-step__dot::after { animation: none; }
}

/* --- Mehreinnahmen mit Livive (prominent dark band) ------------------ */
.mi-rendite {
  margin-top: clamp(32px, 5vh, 56px);
  background: var(--black);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(30px, 4.4vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
.mi-rendite__eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 14px;
}
.mi-rendite__big {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(42px, 6vw, 74px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--eg-green, #18a558);
}
.mi-rendite__per {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  margin-left: 10px;
  letter-spacing: 0;
}
.mi-rendite__note {
  margin-top: 18px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 46ch;
}
.mi-rendite__fine {
  margin-top: 12px;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.45);
  max-width: 46ch;
}
.mi-bars { display: flex; flex-direction: column; gap: 20px; }
.mi-bar__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 9px;
}
.mi-bar__row strong { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 17px; color: #fff; }
.mi-bar__track { height: 13px; border-radius: 99px; background: rgba(255,255,255,0.12); overflow: hidden; }
.mi-bar__fill { height: 100%; border-radius: 99px; width: 0; transition: width 1.05s var(--ease); }
.mi-bar__fill--muted { background: rgba(255,255,255,0.42); }
.mi-bar__fill--green { background: var(--eg-green, #18a558); }
.mi-bar__cap { margin-top: 2px; font-family: "Inter", sans-serif; font-size: 12.5px; color: rgba(255,255,255,0.5); }

/* --- Interessenten cards -------------------------------------------- */
.mi-appl { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ap-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
}
.ap-card:hover { box-shadow: 0 24px 44px -34px rgba(0,0,0,0.28); }
.ap-card__top { display: flex; align-items: center; gap: 13px; }
.ap-avatar {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #f0ece4;
  display: grid;
  place-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.ap-id { min-width: 0; margin-right: auto; display: flex; flex-direction: column; }
.ap-name { font-family: "Inter", sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); }
.ap-meta { font-family: "Inter", sans-serif; font-size: 13px; color: var(--muted); margin-top: 2px; }
.ap-match { flex: none; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 13px; color: var(--eg-green, #18a558); }
.ap-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ap-chip {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 10px;
}
.ap-chip--green { color: var(--eg-green, #18a558); border-color: rgba(24,165,88,0.32); }
.ap-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.ap-view {
  background: none; border: none; padding: 0;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ap-view:hover { color: var(--black); }
.ap-decide { display: flex; gap: 8px; }
.ap-reject, .ap-accept {
  height: 38px;
  border-radius: var(--radius-md);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.ap-reject { width: 38px; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.ap-reject:hover { border-color: #d23b3b; color: #d23b3b; }
.ap-accept { padding: 0 16px; border: 1px solid var(--black); background: var(--black); color: #fff; }
.ap-accept:hover { transform: translateY(-1px); background: #000; }
/* decided states */
.ap-card.is-accepted { border-color: var(--eg-green, #18a558); box-shadow: 0 0 0 1px var(--eg-green, #18a558) inset; }
.ap-card.is-rejected { opacity: 0.55; }
.ap-decided {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: auto;
}
.ap-decided__label { display: inline-flex; align-items: center; gap: 7px; font-family: "Inter", sans-serif; font-weight: 600; font-size: 14px; }
.ap-decided__label.is-acc { color: var(--eg-green, #18a558); }
.ap-decided__label.is-rej { color: var(--muted); }
.ap-undo {
  background: none; border: none; padding: 0;
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 13.5px;
  color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.ap-undo:hover { color: var(--ink); }

/* --- Interessenten empty / rented state ----------------------------- */
.mi-appl-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 5vw, 56px);
  text-align: center;
  color: var(--muted);
}
.mi-appl-empty svg { color: var(--muted); opacity: 0.7; }
.mi-appl-empty__title { margin-top: 12px; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); }
.mi-appl-empty__text { margin-top: 6px; font-family: "Inter", sans-serif; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 46ch; margin-left: auto; margin-right: auto; }

/* smaller gallery so the status section carries the focus */
.det-gallery--compact { height: clamp(240px, 34vh, 380px); }

/* --- responsive ----------------------------------------------------- */
@media (max-width: 900px) {
  .mi-summary { justify-content: flex-start; }
  .mi-kpis { width: 100%; }
  .mi-kpi { flex: 1 1 auto; }
  .mi-rendite { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .mi-head__actions { width: 100%; }
  .mi-btn { flex: 1 1 auto; justify-content: center; }
  .mi-status__cta { width: 100%; justify-content: center; }
  .mi-status__track { padding-top: 4px; }
  .mi-step__sub { display: none; }
  .mi-step__label { font-size: 12px; }
  .mi-status { padding: 24px 14px; }
  .mi-spec { padding: 4px 12px; }
  .mi-spec__v { font-size: 14px; }
}

/* ======================================================================
   Mieterprofil — wizard helpers + dashboard overview (.mp-*)
   ====================================================================== */

/* wizard: intro lead under a category title, half-width + conditional groups */
.ins-cat__lead { margin: -4px 0 20px; font-family: "Inter", sans-serif; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.ins-field--half { max-width: 320px; }
.mp-when { display: block; }
.mp-optional { font-family: "Inter", sans-serif; font-weight: 400; font-size: 13px; color: var(--muted); }
.ins-input.is-locked, .ins-input[readonly] { background: #f4f2ee; color: var(--muted); cursor: not-allowed; }

/* Instagram field with an @ prefix */
.mp-ig { position: relative; }
.mp-ig__at { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-family: "Inter", sans-serif; font-weight: 600; color: var(--muted); pointer-events: none; }
.mp-ig__input { padding-left: 30px; }

/* ---- dashboard: empty state ---------------------------------------- */
.mp-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 6vw, 64px) clamp(20px, 4vw, 48px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mp-empty__icon {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #f4f2ee;
  color: var(--muted);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.mp-empty__title { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 19px; color: var(--black); }
.mp-empty__text { margin-top: 8px; font-family: "Inter", sans-serif; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 44ch; }
.mp-empty__cta {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 26px;
  border-radius: var(--radius-md);
  background: var(--black);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 14px 28px -18px rgba(0,0,0,0.55);
  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
}
.mp-empty__cta:hover { transform: translateY(-1px); background: #000; }

/* ---- dashboard: profile overview ----------------------------------- */
.mp-view__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.mp-view__name { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 22px; color: var(--black); letter-spacing: -0.01em; }
.mp-view__sub { margin-top: 3px; font-family: "Inter", sans-serif; font-size: 14px; color: var(--muted); }
.mp-view__edit {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.mp-view__edit:hover { border-color: var(--black); transform: translateY(-1px); }
.mp-view__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.mp-group { min-width: 0; }
.mp-group--wide { margin-top: 26px; }
.mp-group__title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.mp-rows { display: flex; flex-direction: column; gap: 10px; }
.mp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.mp-row dt { flex: none; font-family: "Inter", sans-serif; font-size: 13.5px; color: var(--muted); }
.mp-row dd { font-family: "Inter", sans-serif; font-weight: 500; font-size: 14px; color: var(--ink); text-align: right; }
.mp-lock {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  background: #f4f2ee;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  vertical-align: middle;
}
.mp-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.mp-tag {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  color: var(--ink);
  background: #f4f2ee;
  border-radius: 99px;
  padding: 5px 12px;
}
.mp-bio {
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 68ch;
  margin-bottom: 14px;
}