/* ==========================================================================
   IMMOPOINT Verwaltungs- & Immobilien GmbH — Website Stylesheet
   ========================================================================== */

:root {
  --color-primary: #123456;
  --color-primary-dark: #0b2439;
  --color-primary-light: #1e4a6e;
  --color-accent: #7A72AC;
  --color-accent-dark: #5D5589;
  --color-accent-light: #B4ADD6;
  --color-dot: #d33a3a;
  --color-bg: #ffffff;
  --color-bg-soft: #f6f4ef;
  --color-bg-alt: #f0ede4;
  --color-text: #1f2933;
  --color-text-muted: #5b6772;
  --color-border: #e4e0d6;
  --color-white: #ffffff;

  --font-heading: Arial, "Segoe UI", sans-serif;
  --font-body: Arial, "Segoe UI", sans-serif;

  --container-width: 1180px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-soft: 0 12px 32px -12px rgba(18, 52, 86, 0.18);
  --shadow-card: 0 8px 24px -10px rgba(18, 52, 86, 0.16);
  --transition: 0.25s ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Not overflow-x: hidden — Safari/iOS Safari disables position: sticky on
     any descendant (here, .site-header) when an ancestor's overflow-x
     computes to hidden/scroll/auto. `clip` still contains horizontal
     overflow but is exempt from that rule, so the sticky header keeps
     working in Safari. Needs Safari 16+ (iOS 16, 2022), long since
     ubiquitous. */
  overflow-x: clip;
}

/* Safety net: content pulled in from onOffice (property descriptions,
   agent-entered notes) is free text we don't control — an unbroken run of
   characters in there (long URL, a "----" divider, etc.) shouldn't be able
   to force the page wider than the viewport. Only kicks in for tokens that
   genuinely can't fit; normal word-wrapping is unaffected. */
* { overflow-wrap: break-word; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; color: var(--color-text-muted); }

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

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

ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--color-accent);
  display: inline-block;
}

.section {
  padding: 96px 0;
}

.section-bg {
  background: var(--color-bg-soft);
}

.section-head {
  max-width: 640px;
  margin: 0 0 56px;
}

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

/* Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 10px 24px -8px rgba(122, 114, 172, 0.55);
}
.btn-primary:hover { background: var(--color-accent-dark); }

.btn-sm { padding: 10px 22px; font-size: 0.85rem; }

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

.btn-ghost {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-ghost:hover { background: var(--color-primary); color: var(--color-white); }

.btn-alert {
  background: transparent;
  border-color: var(--color-dot);
  color: var(--color-dot);
}
.btn-alert:hover { background: var(--color-dot); color: var(--color-white); }

/* Header ---------------------------------------------------------------- */

.top-bar {
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}

.top-bar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.top-bar-spacer { flex: 1; }

.top-bar a.immoscout-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 1.05em;
  color: rgba(255, 255, 255, 0.9);
}
.top-bar a.immoscout-badge:hover { color: var(--color-white); }
.immoscout-badge img { display: block; width: 26px; height: 34px; }

.top-bar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  transition: color var(--transition);
}
.top-bar a:hover { color: var(--color-accent); }

/* Skip link: invisible until keyboard-focused, then jumps straight to
   <main id="main-content"> so keyboard/screen-reader visitors don't have to
   tab through the whole header and mega-menus on every single page. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 2000;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus {
  top: 12px;
}

.site-header {
  position: sticky;
  top: 0;
  /* Above Leaflet's own internal z-index range (tile/marker/popup panes up
     to 700, zoom controls at 1000), so the mega-menu dropdown always
     renders above the interactive map instead of being covered by it. */
  z-index: 1100;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  /* Wider than the site's normal 1180px content column: the desktop nav
     (logo + 8 links, 3 of them mega-menu triggers + download icon +
     Merkliste icon + 2 pill buttons) needs a little over 1300px even after
     the spacing/sizing was tightened below, so the standard column would
     force it to either overflow or squash the logo. Only the header row
     gets the extra room; every other section keeps the regular narrower
     .container width. This max-width (1500px) is only a cap for very wide
     monitors — it's well above the "@media (max-width: 1400px)" breakpoint
     below and isMobile() in main.js, so it never actually binds at the
     point where the row would overflow; keep the breakpoint value in sync
     with main.js instead. */
  max-width: 1500px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 14px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  /* .site-header .container is itself a flex row (logo / nav / actions).
     Flex items shrink by default when their row runs out of space, and an
     <img> has no text content to resist that the way nav links and buttons
     do (white-space: nowrap keeps *them* from shrinking below their natural
     width) — so without this, the logo silently absorbs the overflow and
     gets squashed to a sliver instead of the row wrapping or the image
     staying full width. */
  flex-shrink: 0;
}

.logo-img {
  height: 60px;
  width: auto;
  display: block;
}

.footer-logo {
  display: inline-flex;
}

.footer-logo-img {
  height: 52px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 11px;
}

.main-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  white-space: nowrap;
  transition: color var(--transition);
  position: relative;
}

.main-nav > a,
.main-nav .has-mega { flex-shrink: 0; }

.nav-alert-mobile { display: none; }

.main-nav a:hover { color: var(--color-primary); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--color-primary);
  background: var(--color-bg-soft);
  transition: background var(--transition), color var(--transition);
}
.btn-icon:hover { background: var(--color-accent); color: var(--color-white); }

/* Tightened vs. the shared .btn-icon/.btn-sm sizing (used at their normal
   size elsewhere on the site) to help the desktop nav row fit on common
   MacBook window widths without dropping to the hamburger panel — see the
   "@media (max-width: 1400px)" breakpoint comment further down. */
.header-actions .btn-icon { width: 34px; height: 34px; }
.header-actions .btn-sm { padding: 10px 16px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  display: block;
}

/* Hero -------------------------------------------------------------------*/

.hero {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary) 60%, var(--color-primary-light));
  color: var(--color-white);
  overflow: hidden;
  padding: 90px 0 110px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 82% 20%, rgba(122, 114, 172, 0.28), transparent 45%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero-copy .eyebrow { color: var(--color-accent-light); }
.hero-copy .eyebrow::before { background: var(--color-accent); }

.hero h1 { color: var(--color-white); }

.hero-copy p.lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.1rem;
  max-width: 520px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 32px 0 44px;
}

.hero-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}

.hero-stats div strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-white);
}

.hero-stats div span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}

.hero-visual {
  position: relative;
}

/* Placeholder image blocks ------------------------------------------------ */

.img-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: repeating-linear-gradient(
    135deg,
    rgba(18, 52, 86, 0.06),
    rgba(18, 52, 86, 0.06) 10px,
    rgba(18, 52, 86, 0.03) 10px,
    rgba(18, 52, 86, 0.03) 20px
  );
  border: 1.5px dashed rgba(18, 52, 86, 0.28);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  text-align: center;
  min-height: 220px;
  overflow: hidden;
}

.img-placeholder svg { width: 40px; height: 40px; opacity: 0.55; }

.img-placeholder .ph-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  padding: 0 16px;
}

.hero-visual .img-placeholder {
  min-height: 420px;
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: var(--shadow-soft);
}

.hero-visual .img-placeholder svg { color: rgba(255,255,255,0.85); opacity: 0.8; }
.hero-visual .img-placeholder .ph-label { color: rgba(255, 255, 255, 0.75); }

.hero-visual .floating-card {
  position: absolute;
  left: -28px;
  bottom: -28px;
  background: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 280px;
}

.floating-card .icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(122, 114, 172, 0.14);
  color: var(--color-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.floating-card strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
}
.floating-card span {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Trust strip -------------------------------------------------------- */

.trust-strip {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.trust-strip .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trust-item .icon-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-primary);
}
.trust-item span { font-size: 0.82rem; color: var(--color-text-muted); }

/* Services grid ------------------------------------------------------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Opt-in modifier for a 2x2 layout instead of the default 3-then-1 row
   (e.g. a services-grid with exactly 4 cards that should read as two even
   rows). Mobile still collapses to a single column via the existing
   .services-grid breakpoint rule below. */
.services-grid-2col { grid-template-columns: repeat(2, 1fr); }

.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: transparent;
}

.service-card .icon-badge {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.service-card h3 { margin-bottom: 10px; }

.service-card a.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-accent-dark);
  margin-top: 8px;
}

/* About split -------------------------------------------------------- */

.about-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.about-split .img-placeholder { min-height: 420px; }

.photo-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 420px;
  box-shadow: var(--shadow-card);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The team photo is a wide panorama; centered cover-cropping was cutting off
   the person at the right edge of the group. Shift the crop window toward
   the right side of the source so they're fully in frame (crops a little
   more off the left instead, where there's just parking lot/car). */
.img-team-photo { object-position: 78% center; }

.about-list {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.about-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.about-list .check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(122, 114, 172, 0.16);
  color: var(--color-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.about-list strong { color: var(--color-text); font-family: var(--font-heading); font-size: 0.98rem; }
.about-list span { display: block; font-size: 0.88rem; color: var(--color-text-muted); }

.founder-quote {
  margin: 28px 0;
  padding: 22px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
}
.founder-quote p {
  margin: 0 0 16px;
  color: var(--color-text);
  font-style: italic;
  line-height: 1.6;
}
.founder-quote footer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.founder-quote img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.founder-quote strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--color-primary);
}
.founder-quote footer span { font-size: 0.8rem; color: var(--color-text-muted); }

/* Listings ------------------------------------------------------------ */

.listing-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 32px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
}
.listing-filter-bar .form-group {
  margin-bottom: 0;
  min-width: 140px;
  flex: 1 1 140px;
}
.listing-filter-bar .form-group input,
.listing-filter-bar .form-group select {
  padding: 10px 12px;
}
/* Needs to out-specificity ".listing-filter-bar .form-group" above (both
   selectors match this element, since the actions box is also a
   .form-group) — otherwise that rule's "flex: 1 1 140px" wins over this
   "flex: 0 0 auto" despite coming first, the buttons get forced to shrink
   below their own min-content width, and they render past the filter bar's
   right edge instead of wrapping onto their own line. */
.listing-filter-bar .listing-filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}
.listing-filter-count {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.search-alert-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 28px;
  background: var(--color-primary-dark);
  color: var(--color-white);
  border-radius: var(--radius-lg);
}
.search-alert-box strong { display: block; font-family: var(--font-heading); margin-bottom: 4px; }
.search-alert-box span { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); }
.search-alert-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}
.search-alert-form input[type="email"] {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: none;
  min-width: 240px;
}

.listings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.listing-card {
  display: block;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.listing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }

.listing-card .img-placeholder { min-height: 190px; border-radius: 0; border-width: 0 0 1px; }

.listing-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

.listing-body { padding: 22px 24px 26px; }

.listing-body h3 {
  margin-bottom: 4px;
  min-height: 3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.listing-objektnr {
  font-size: 0.74rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  margin: 2px 0 6px;
}

.listing-location {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.listing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  margin-top: 4px;
}

.listing-available {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 8px;
}

.listing-meta strong { color: var(--color-text); font-weight: 600; }

.listing-price {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1.05rem;
}

/* Repeats the same Miet-/Kaufobjekt label already shown as the pill badge
   over the photo (both come from $p['tag'], sourced from onOffice's
   vermarktungsart) — the badge can sit on a busy photo, so it's echoed
   here in plain text next to the price where it's harder to miss. */
.listing-price-tag {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Property detail page ---------------------------------------------------- */

.property-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.property-gallery {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.property-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 20, 35, 0.55);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition);
}
.gallery-nav:hover { background: rgba(20, 20, 35, 0.8); }
.gallery-nav.prev { left: 14px; }
.gallery-nav.next { right: 14px; }
.gallery-nav svg { width: 20px; height: 20px; }

.gallery-counter {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: rgba(20, 20, 35, 0.65);
  color: var(--color-white);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}

.detail-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  margin-top: 36px;
  border-top: 1px solid var(--color-border);
}

.detail-row {
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--color-border);
}
.detail-row:nth-child(2n) { padding-left: 20px; padding-right: 0; }

.detail-label {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.detail-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1rem;
  overflow-wrap: break-word;
}

.detail-sidebar {
  display: grid;
  gap: 20px;
  position: sticky;
  top: 100px;
}

.detail-sidebar .person-card { text-align: left; }
.detail-sidebar .person-card .avatar { margin: 0 0 14px; }
.detail-sidebar h4 { font-size: 0.95rem; margin-bottom: 16px; }

/* Property map -------------------------------------------------------- */

.map-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

.map-container {
  position: relative;
  width: 100%;
  height: 640px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.map-list {
  height: 640px;
  overflow-y: auto;
  display: grid;
  gap: 12px;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) var(--color-bg-soft);
}

.map-list::-webkit-scrollbar { width: 8px; }
.map-list::-webkit-scrollbar-track {
  background: var(--color-bg-soft);
  border-radius: 999px;
}
.map-list::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 999px;
  border: 2px solid var(--color-bg-soft);
}
.map-list::-webkit-scrollbar-thumb:hover { background: var(--color-accent-dark); }

.map-list-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.map-list-item:hover,
.map-list-item.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 6px 18px -10px rgba(93, 85, 137, 0.4);
}

.map-list-item .thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-bg-soft);
}
.map-list-item .thumb-placeholder {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.map-list-item .thumb-placeholder svg { width: 24px; height: 24px; }

.map-list-item .info {
  min-width: 0;
}
.map-list-item .info strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--color-primary);
  line-height: 1.3;
}
.map-list-item .info span {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.map-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 80px 24px;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
}

.map-empty-state svg { width: 46px; height: 46px; color: var(--color-primary-light); }

.listings-note {
  text-align: center;
  margin-top: 40px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* Process / steps ------------------------------------------------------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}

.step-card {
  position: relative;
  padding: 30px 24px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.step-card::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.6rem;
  color: rgba(18, 52, 86, 0.14);
  display: block;
  margin-bottom: 14px;
}

/* CTA banner ------------------------------------------------------------ */

.cta-banner {
  background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-banner h2 { color: var(--color-white); margin-bottom: 8px; }
.cta-banner p { color: rgba(255,255,255,0.78); margin: 0; max-width: 460px; }

.is24-embed {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.is24-embed iframe { display: block; width: 100%; height: 900px; border: 0; }
@media (max-width: 640px) {
  .is24-embed iframe { height: 600px; }
}

.partner-banner {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 40px;
  margin: 8px 0 48px;
}
.partner-banner img { width: 76px; height: auto; flex-shrink: 0; }
.partner-banner strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.partner-banner p { margin: 0; color: var(--color-text-muted); font-size: 0.94rem; max-width: 540px; }

/* Contact section ------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
}

.contact-info-card {
  background: var(--color-primary-dark);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
}

.contact-info-card h3 { color: var(--color-white); }
.contact-info-card p { color: rgba(255,255,255,0.72); }

.contact-detail {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 22px;
}

.contact-detail .icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-detail strong { display: block; font-family: var(--font-heading); font-size: 0.92rem; }
.contact-detail span, .contact-detail a { font-size: 0.88rem; color: rgba(255,255,255,0.75); }

.contact-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-card);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 7px;
  color: var(--color-text);
}

.form-optional { font-weight: 400; color: var(--color-text-muted); }

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  /* iOS Safari auto-zooms the page on focus for any input under 16px —
     keep this at 16px minimum so tapping into the contact form doesn't
     jolt the viewport. */
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg-soft);
  transition: border-color var(--transition), background var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(18, 52, 86, 0.18);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.form-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.alert {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  margin-bottom: 22px;
  font-family: var(--font-body);
}
.alert-success { background: #e5f4ea; color: #1e7a3d; border: 1px solid #bfe6cb; }
.alert-error { background: #fbeaea; color: #b53232; border: 1px solid #f3c9c9; }

/* Field tooltip ------------------------------------------------------------ */

.field-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: help;
  margin-left: 4px;
  vertical-align: middle;
}

/* Dropzone (file upload) --------------------------------------------------- */

.dropzone {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  position: relative;
}
.dropzone:hover,
.dropzone.is-dragover { border-color: var(--color-accent); background: rgba(122, 114, 172, 0.06); }
.dropzone svg { width: 24px; height: 24px; color: var(--color-accent); margin-bottom: 8px; }
.dropzone p { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }
.dropzone input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone-files {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--color-text);
  text-align: left;
  display: grid;
  gap: 4px;
}

/* Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.7);
  padding-top: 72px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 3fr 0.9fr 0.9fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand { display: flex; flex-direction: column; }

.footer-brand p { margin-top: 16px; max-width: 420px; font-size: 0.9rem; }

.footer-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 22px;
}

.footer-social { display: flex; flex-direction: column; gap: 8px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: background var(--transition);
}
.footer-social a:hover { background: var(--color-accent); }
.footer-social svg { width: 15px; height: 15px; flex-shrink: 0; }

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
}
.footer-badge img { width: 50px; height: 64px; }
.footer-badge span { font-size: 1.02rem; line-height: 1.4; color: rgba(255, 255, 255, 0.75); }
.footer-badge:hover span { color: #fff; }

.footer-col h4 {
  color: var(--color-white);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-col ul li { margin-bottom: 11px; font-size: 0.9rem; }
.footer-col a { transition: color var(--transition); }
.footer-col a:hover { color: var(--color-accent); }

.footer-newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-newsletter strong { display: block; color: var(--color-white); font-family: var(--font-heading); font-size: 1rem; margin-bottom: 4px; }
.footer-newsletter span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }

.footer-newsletter-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-newsletter-form input[type=email] {
  min-width: 240px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1rem;
}
.footer-newsletter-form input[type=email]::placeholder { color: rgba(255, 255, 255, 0.5); }
.footer-newsletter-form input[type=email]:focus { outline: none; border-color: var(--color-accent-light); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 3px rgba(180, 173, 214, 0.35); }

.footer-newsletter-msg {
  padding: 12px 0;
  font-size: 0.85rem;
  color: var(--color-accent-light);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  font-size: 0.82rem;
  flex-wrap: wrap;
}

.footer-bottom a:hover { color: var(--color-accent); }

/* Signature dot -------------------------------------------------------- */

.dot {
  color: var(--color-dot);
  display: inline;
  white-space: nowrap;
}

/* Breadcrumb ------------------------------------------------------------ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 18px;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.breadcrumb a:hover { color: var(--color-white); }

/* Page hero (subpages) -------------------------------------------------- */

.page-hero {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary) 65%, var(--color-primary-light));
  color: var(--color-white);
  padding: 56px 0 64px;
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 85% 10%, rgba(211, 58, 58, 0.22), transparent 45%);
  pointer-events: none;
}

.page-hero .container { position: relative; }

.page-hero h1 { color: var(--color-white); max-width: 760px; margin-bottom: 14px; }

.page-hero p.lead {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.05rem;
  max-width: 620px;
  margin-bottom: 0;
}

/* Mega menu (Immobilien dropdown) --------------------------------------- */

.has-mega { position: relative; }

.nav-caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  position: relative;
  top: -2px;
  transition: transform var(--transition);
}

.has-mega:hover .nav-caret,
.has-mega:focus-within .nav-caret,
.has-mega.is-open .nav-caret { transform: rotate(225deg); top: 2px; }

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(880px, 90vw);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  padding: 44px 30px 30px;
  margin-top: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  z-index: 200;
}

/*
 * top: 100% leaves an empty vertical gap between the trigger and the
 * dropdown's own top edge where the pointer is over neither element, so
 * :hover lapses mid-travel and the menu snaps shut before a visitor can
 * reach the links below. This invisible strip bridges that gap so the
 * hover chain stays unbroken while moving the mouse down.
 */
.mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  height: 40px;
  pointer-events: none;
}

.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu,
.has-mega.is-open .mega-menu { display: grid; }

.mega-menu.mega-menu-single {
  width: min(280px, 90vw);
  grid-template-columns: 1fr;
  left: 0;
  transform: none;
  padding: 16px;
}
.mega-menu-single .mega-col ul li { margin-bottom: 2px; }

.mega-col h4 {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--color-accent-dark);
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  min-height: 66px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--color-border);
}

.mega-col ul li { margin-bottom: 4px; }

/* Only relevant on mobile — see the "mega-menu-overview" rule in the
   @media (max-width: 1400px) block below for why this exists. */
.mega-menu-overview { display: none; }

.mega-col a {
  display: block;
  padding: 9px 12px;
  margin: 0 -12px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: normal;
  transition: color var(--transition), background var(--transition);
}

.mega-col a:hover,
.mega-col a:focus-visible,
.mega-col a:active {
  color: var(--color-primary);
  background: var(--color-bg-soft);
}

.mega-menu a.mega-cta {
  grid-column: 1 / -1;
  display: block;
  margin-top: 4px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  text-align: center;
  line-height: 1.3;
  transition: background var(--transition);
}
.mega-menu a.mega-cta:hover {
  background: var(--color-accent-dark);
  color: var(--color-white);
  padding-left: 20px;
}

/* Feature list (Leistungskataloge) --------------------------------------- */

.catalog-group {
  margin-bottom: 40px;
}

.catalog-group h3 { margin-bottom: 6px; }
.catalog-group > p { margin-bottom: 18px; }

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}

.feature-list li {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--color-text);
}

.feature-list .dot-bullet {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-dot);
  flex-shrink: 0;
  margin-top: 8px;
}

.feature-list-text {
  flex: 1 1 auto;
  min-width: 0;
}

.feature-list li .feature-list-action {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}

.image-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 8px 0 40px;
}
.image-trio figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.image-trio img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.image-trio figcaption { padding: 10px 14px; font-size: 0.82rem; color: var(--color-text-muted); background: var(--color-bg-soft); }
@media (max-width: 780px) { .image-trio { grid-template-columns: 1fr; } }

.service-with-image {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 40px;
}
.service-with-image .catalog-group { margin-bottom: 0; }
.service-with-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
@media (max-width: 640px) {
  .service-with-image { grid-template-columns: 1fr; }
}

/* Contact person cards ---------------------------------------------------- */

.people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.person-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}

.person-card .avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.8rem;
  overflow: hidden;
}

.person-card .avatar.avatar-photo { background: var(--color-bg-soft); }
.person-card .avatar-photo img { width: 100%; height: 100%; object-fit: cover; }

.person-card strong { display: block; font-family: var(--font-heading); font-size: 1rem; color: var(--color-primary); }
.person-card .role { display: block; font-size: 0.82rem; color: var(--color-text-muted); margin: 4px 0 14px; }

.person-card .person-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.86rem;
}
.person-card .person-links a { color: var(--color-text); }
.person-card .person-links a:hover { color: var(--color-primary); }

/* Large rectangular portraits for the "Über uns" team grid — distinct from
   the small circular avatars used for the "Ansprechpartner" mini-cards on
   every other page, which stay as-is. */
.team-portrait .person-card {
  padding: 0 0 24px;
  overflow: hidden;
}
.team-portrait .person-card .avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 0;
  margin: 0 0 18px;
  font-size: 2.5rem;
}
.team-portrait .person-card strong,
.team-portrait .person-card .role,
.team-portrait .person-card .person-links,
.team-portrait .person-card .person-more {
  margin-left: 20px;
  margin-right: 20px;
}
.team-portrait .person-card .person-more { margin-bottom: 4px; }

.person-more {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.person-more:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

/* Person bio modal ---------------------------------------------------- */

.person-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11, 36, 57, 0.55);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.person-modal-overlay.is-open { display: flex; }

.person-modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  max-width: 440px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.person-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-soft);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.person-modal-close:hover { background: var(--color-border); }

.person-modal .avatar { width: 96px; height: 96px; margin: 0 auto 16px; }
.person-modal strong { display: block; font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-primary); }
.person-modal .role { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin: 4px 0 18px; }
.person-modal .person-modal-bio { text-align: left; font-size: 0.92rem; color: var(--color-text); }
.person-modal .person-modal-bio p { text-align: left; color: var(--color-text); margin: 0 0 0.8em; }
.person-modal .person-modal-bio p:last-child { margin-bottom: 0; }
.person-modal .person-modal-stichpunkte { margin-top: 16px; text-align: left; }
.person-modal .person-modal-stichpunkte:empty { display: none; margin-top: 0; }

/* Newsletter confirmation popup ------------------------------------------ */

.newsletter-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11, 36, 57, 0.55);
  z-index: 2500;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.newsletter-modal-overlay.is-open { display: flex; }

.newsletter-modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  max-width: 420px;
  width: 100%;
  padding: 40px 32px 32px;
  position: relative;
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.newsletter-modal h3 { margin-bottom: 12px; }
.newsletter-modal p { text-align: center; }

.newsletter-modal-icon { width: 72px; height: 72px; margin: 0 auto 20px; }
.newsletter-modal-icon svg { width: 100%; height: 100%; }

.newsletter-modal-icon.is-success .nl-circle {
  stroke: #2e8b57;
  stroke-width: 3;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: nlCircleDraw 0.5s ease-in-out forwards;
}
.newsletter-modal-icon.is-success .nl-check {
  stroke: #2e8b57;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: nlCheckDraw 0.3s 0.45s ease-in-out forwards;
}
@keyframes nlCircleDraw { to { stroke-dashoffset: 0; } }
@keyframes nlCheckDraw { to { stroke-dashoffset: 0; } }

.newsletter-modal-icon.is-info { color: var(--color-accent); }
.newsletter-modal-icon.is-error { color: var(--color-dot); }

/* Job cards (Karriere) ------------------------------------------------------ */

.job-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
}

.job-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.job-card-head h3 { margin-bottom: 4px; }
.job-meta { font-size: 0.85rem; color: var(--color-text-muted); }

.job-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.job-details-grid h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-accent-dark);
  margin-bottom: 10px;
}

.job-details-grid ul { display: grid; gap: 8px; }
.job-details-grid ul li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--color-text);
}
.job-details-grid ul li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-dot);
  flex-shrink: 0;
  margin-top: 7px;
}

/* Document list (Formulare) ------------------------------------------------ */

.doc-list { display: grid; gap: 14px; }

.doc-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.doc-item .icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.doc-item strong { display: block; font-family: var(--font-heading); font-size: 0.95rem; }
.doc-item span { font-size: 0.82rem; color: var(--color-text-muted); }

.doc-item .btn { margin-left: auto; flex-shrink: 0; }

/* Simple content prose --------------------------------------------------- */

.prose { max-width: 760px; overflow-wrap: break-word; }
.prose h3 { margin-top: 40px; }
.prose h3:first-child { margin-top: 0; }
.prose h4 { font-size: 1.02rem; margin-top: 26px; color: var(--color-text); }
.prose p { line-height: 1.7; text-align: justify; }
.prose ul { display: grid; gap: 10px; margin: 18px 0; }
.prose ul li { display: flex; gap: 10px; align-items: flex-start; }
.prose ul li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-dot);
  flex-shrink: 0;
  margin-top: 8px;
}

/* Scroll reveal ---------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Social icons (top bar) -------------------------------------------------- */

.social-icons { display: flex; align-items: center; gap: 12px; }
.social-icons a {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.social-icons a:hover { background: var(--color-accent); color: var(--color-white); }
.social-icons svg { width: 13px; height: 13px; }

/* Instagram feed ----------------------------------------------------------- */

.social-follow-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.instagram-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.instagram-handle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary);
}

.instagram-handle .ig-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.instagram-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: repeating-linear-gradient(
    135deg,
    rgba(122, 114, 172, 0.12),
    rgba(122, 114, 172, 0.12) 10px,
    rgba(122, 114, 172, 0.05) 10px,
    rgba(122, 114, 172, 0.05) 20px
  );
  border: 1.5px dashed rgba(122, 114, 172, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.instagram-tile img { width: 100%; height: 100%; object-fit: cover; }

.instagram-tile .ig-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 52, 86, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity var(--transition);
}
.instagram-tile:hover .ig-overlay { opacity: 1; }

/* Google reviews ----------------------------------------------------------- */

.reviews-carousel-wrap {
  position: relative;
}

.reviews-carousel {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 2px 18px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.reviews-carousel::-webkit-scrollbar { display: none; }

.review-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(240px, 27%, 300px);
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
}

.review-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-bottom: 14px;
}

.review-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 6px;
}

.review-avatar .g-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}
.review-avatar .g-badge svg { width: 13px; height: 13px; }

.review-name { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--color-text); }
.review-time { font-size: 0.78rem; color: var(--color-text-muted); }

.review-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 2px 0;
}
.review-stars svg { width: 15px; height: 15px; color: #f5b400; }
.review-stars svg.empty { color: #e0e0e0; }
.review-verified { width: 15px; height: 15px; color: #4285f4; }

.review-text {
  font-size: 0.9rem;
  color: var(--color-text);
  text-align: center;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-more {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.reviews-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}
.reviews-nav.prev { left: -20px; }
.reviews-nav.next { right: -20px; }

/* Reference-projects carousel (homepage) ---------------------------------- */

.ref-carousel-wrap { position: relative; }

.ref-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 2px 10px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ref-carousel::-webkit-scrollbar { display: none; }

.ref-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(220px, 30%, 320px);
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.ref-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-card-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 16px 12px;
  background: linear-gradient(0deg, rgba(11, 36, 57, 0.85), transparent);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
}

@media (max-width: 640px) {
  .ref-card { flex-basis: 76%; }
}

.reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.reviews-summary strong { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-primary); }

/* Cookie consent banner ------------------------------------------------- */

.cookie-consent-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11, 36, 57, 0.45);
  z-index: 3000;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
}
.cookie-consent-overlay.is-open { display: flex; }

.cookie-consent {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px 32px;
}

.cookie-consent h3 { font-size: 1.15rem; margin-bottom: 12px; }
.cookie-consent p { font-size: 0.88rem; margin-bottom: 18px; }
.cookie-consent a { text-decoration: underline; }

.cookie-consent-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.cookie-consent-category {
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
}
.cookie-consent-category:last-of-type { border-bottom: 1px solid var(--color-border); margin-bottom: 20px; }

.cookie-consent-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.cookie-consent-category-head strong { font-family: var(--font-heading); font-size: 0.95rem; }

.cookie-consent-locked {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cookie-consent-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.cookie-consent-switch input { opacity: 0; width: 0; height: 0; }
.cookie-consent-switch span {
  position: absolute; inset: 0; background: var(--color-border);
  border-radius: 999px; transition: background var(--transition); cursor: pointer;
}
.cookie-consent-switch span::before {
  content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
  background: var(--color-white); border-radius: 50%; transition: transform var(--transition);
}
.cookie-consent-switch input:checked + span { background: var(--color-accent); }
.cookie-consent-switch input:checked + span::before { transform: translateX(18px); }

@media (max-width: 640px) {
  .cookie-consent { padding: 22px; }
  .cookie-consent-actions { flex-direction: column; align-items: stretch; }
}

/* Map consent gate (immobilien-karte.php) -------------------------------- */

.map-consent-gate {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 32px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
}
.map-consent-gate p { max-width: 360px; font-size: 0.88rem; margin: 0; }

/* Utility -------------------------------------------------------------- */

.icon-badge svg { width: 22px; height: 22px; }

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .about-split,
  .contact-grid,
  .property-detail-layout,
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-sidebar { position: static; }
  /* The inquiry form (#anfrage) lives inside .property-main, right after
     the description text, so in plain single-column source order it would
     land ABOVE .detail-sidebar (contact person, expose/QR, documents) —
     not last like the user wants on mobile. display: contents "unwraps"
     .property-main so its children become direct items of the
     .property-detail-layout grid, sitting alongside .detail-sidebar, which
     lets `order` place the form after the sidebar instead of only being
     able to reorder .property-main and .detail-sidebar as whole blocks.
     Desktop is untouched — this whole rule is inside this breakpoint. */
  .property-main { display: contents; }
  .property-main > .property-gallery,
  .property-main > .img-placeholder { order: 1; }
  .property-main > .detail-table { order: 2; }
  .property-main > .prose { order: 3; }
  .detail-sidebar { order: 4; }
  .property-main > #anfrage { order: 5; }
  .about-split .img-placeholder { order: -1; min-height: 320px; }
  .about-split .photo-frame { order: -1; height: 320px; }
  .services-grid,
  .listings-grid,
  .ratgeber-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip .container { grid-template-columns: repeat(2, 1fr); }
  .search-alert-box { flex-direction: column; align-items: stretch; text-align: center; }
  .search-alert-form { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
  .reviews-nav { display: none; }
}

/* Nav switches to the hamburger panel at this wider breakpoint rather than
   the narrower 1024px one above — with 8 nav links (3 of them mega-menu
   triggers) plus a download icon, the Merkliste icon and two pill buttons,
   the full desktop nav needs a bit over 1300px of clear width, which a
   1180px content column can't provide even on a nominally "desktop"
   1280/1366px laptop screen. This used to be raised all the way to 1500px,
   which meant real MacBook browser windows (1440-1512px logical width) sat
   below the breakpoint and always got the hamburger panel instead of the
   desktop nav — the row's gaps/font-size/icon-size were tightened above
   (.main-nav, .header-actions) specifically so the breakpoint could come
   back down to 1400px and those widths clear it. Keep this in sync with
   isMobile() in main.js and the "@media" max-width just above (.site-header
   .container) — a mismatch there means a tap on a mega-menu trigger
   navigates away instead of opening its submenu (this exact bug happened
   once already at the old 780px/1024px mismatch). */
@media (max-width: 1400px) {
  /* Below this width the top bar no longer fits on one line (it was
     previously just hidden here, which also dropped the ImmoScout badge,
     phone/email and social links on every tablet/phone visitor). Instead,
     let it wrap onto multiple centered lines and shrink a bit. */
  .top-bar .container {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 6px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .top-bar-spacer { display: none; }
  /* Wrapping alone keeps DOM order (badge, phone, mail, hours, social),
     which split "phone" onto the badge's line and "mail" onto the social
     icons' line. Reordering groups badge+social on the first wrapped line
     and phone+mail on the second, regardless of exactly where the wrap
     happens to fall at a given width. */
  .top-bar a.immoscout-badge { order: 1; }
  .social-icons { order: 2; }
  .top-bar-phone { order: 3; }
  .top-bar-mail { order: 4; }
  .top-bar-hours { order: 5; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 24px 20px;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 10px 0; width: 100%; }
  /* .main-nav's align-items: flex-start means its flex-item children
     (including .has-mega) shrink-wrap to their content width by default —
     so the "width: 100%" above was 100% of that shrunken box, not the full
     row, leaving no room for justify-content: space-between to push the
     caret away from the label text. Stretching .has-mega itself to the
     full row width is what actually gives the caret somewhere to go. */
  .main-nav .has-mega { width: 100%; }
  .nav-alert-mobile {
    display: block;
    order: -1;
    margin-bottom: 8px;
    padding: 12px 16px !important;
    border-radius: var(--radius-md);
    background: var(--color-dot);
    color: var(--color-white) !important;
    font-family: var(--font-heading);
    font-weight: 700;
    text-align: center;
  }
  .site-header .container { position: relative; }
  .nav-toggle { display: flex; }
  .header-actions .btn-ghost,
  .header-actions .btn-alert { display: none; }
  /* With .main-nav hidden behind the hamburger, only the logo and the
     icon/toggle cluster share the header row. The logo's flex-shrink: 0
     (needed on desktop so it isn't crushed by the nav) would otherwise
     push the toggle button off narrow phone screens entirely, so it gets
     a shrink allowance and a smaller intrinsic size here instead. Three
     icon buttons plus the toggle need to fit next to it, so they also
     shrink a bit and the row's own gap tightens. */
  .site-header .container { gap: 12px; }
  .logo { flex-shrink: 1; min-width: 0; }
  .logo-img { height: 40px; max-width: 100%; }
  .header-actions { gap: 6px; }
  .header-actions .btn-icon { width: 32px; height: 32px; }
  .header-actions .btn-icon svg { width: 16px; height: 16px; }
  .nav-toggle { padding: 6px; }

  .has-mega:hover .mega-menu,
  .has-mega:focus-within .mega-menu { display: none; }
  .mega-menu {
    display: none;
    position: static;
    transform: none;
    width: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 6px 0 10px 14px;
    margin-top: 0;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .has-mega.is-open .mega-menu { display: grid; }
  .nav-caret { margin-left: auto; }
  .main-nav .has-mega > a { display: flex; align-items: center; justify-content: space-between; }

  /* On mobile the top-level trigger ("Hausverwaltung"/"Suchen"/"Anbieten")
     only toggles the submenu open (see isMobile() in main.js) and never
     navigates, unlike on desktop where hovering opens the mega-menu but
     the link itself still works — so without this, the overview page
     behind each trigger would be unreachable from the mobile nav. Shown
     only here; on desktop the trigger link already covers this. */
  .mega-menu-overview {
    display: list-item;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
  }
  .mega-menu-overview a { font-weight: 700; }
}

/* On true phone widths the wrapped top bar (badge + phone + email + hours
   + social) still runs to 3-4 lines, so it gives up the least essential
   piece — the opening-hours text, already shown again on the Kontakt page
   and in the footer — and tightens up to fit the rest in two lines. */
@media (max-width: 640px) {
  .top-bar { font-size: 0.76rem; }
  .top-bar .container { gap: 10px; }
  .top-bar-hours { display: none; }
}

/* Merkliste (Favoriten) -----------------------------------------------*/

.fav-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.fav-toggle:hover { transform: scale(1.08); }
.fav-toggle svg { width: 17px; height: 17px; }
.fav-toggle.is-active { color: var(--color-dot); }
.fav-toggle.is-active svg { fill: var(--color-dot); }

.fav-toggle-detail { gap: 8px; }
.fav-toggle-detail svg { flex-shrink: 0; }
.fav-toggle-detail.is-active { color: var(--color-dot); border-color: var(--color-dot); }
.fav-toggle-detail.is-active svg { fill: var(--color-dot); }

.merkliste-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-dot);
  color: var(--color-white);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.merkliste-count[hidden] { display: none; }
.btn-icon { position: relative; }

.merkliste-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 60px 0;
}

.detail-qr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-top: 14px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.detail-qr img { border-radius: 6px; flex-shrink: 0; }

/* Ratgeber (Blog) --------------------------------------------------------*/

.ratgeber-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.ratgeber-card {
  display: block;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.ratgeber-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.ratgeber-card .img-placeholder { min-height: 190px; border-radius: 0; border-width: 0 0 1px; }
.ratgeber-card-img { aspect-ratio: 16/10; overflow: hidden; }
.ratgeber-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ratgeber-card-body { padding: 22px 24px 26px; }
.ratgeber-card-date { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 8px; }
.ratgeber-card-body h3 { margin-bottom: 10px; }
.ratgeber-card-body p { color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.6; }

@media (max-width: 780px) {
  .section { padding: 64px 0; }
  .services-grid,
  .listings-grid,
  .ratgeber-grid,
  .steps-grid,
  .people-grid,
  .job-details-grid { grid-template-columns: 1fr; }
  .detail-table { grid-template-columns: minmax(0, 1fr); }
  .doc-item { flex-wrap: wrap; }
  /* flex-basis: 100% forces this item onto its own line unconditionally —
     without it, only long titles that actually overflow next to the icon
     wrapped to a new line, while short titles stayed beside the icon,
     giving each card a different layout depending on title length. */
  .doc-item > div { min-width: 0; flex-basis: 100%; }
  .doc-item .btn { margin-left: 58px; }
  .map-layout { grid-template-columns: 1fr; }
  .map-container { height: 420px; }
  .map-list { height: 320px; }
  .detail-row:nth-child(2n) { padding-left: 0; }
  .person-card .avatar { width: 104px; height: 104px; font-size: 1.5rem; }
  .job-card-head { flex-direction: column; align-items: stretch; }
  .job-card-head .btn { width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  .cta-banner { padding: 36px 28px; text-align: center; justify-content: center; }
  .partner-banner { flex-direction: column; text-align: center; padding: 28px; }
  .cta-banner .btn { white-space: normal; max-width: 100%; }
  /* .btn's white-space: nowrap keeps pill buttons from wrapping mid-word,
     but on narrow phones a long label (e.g. "Kostenlose Wertermittlung
     anfragen") is wider than the screen and pushes it into horizontal
     overflow. Let long labels wrap here instead of forcing the button
     past the viewport edge. */
  .btn { white-space: normal; max-width: 100%; text-align: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-newsletter { flex-direction: column; align-items: flex-start; }
  .footer-newsletter-form { width: 100%; }
  .footer-newsletter-form input[type=email] { flex: 1; min-width: 0; }
  /* On desktop this card overlaps the photo's bottom-left corner (absolute
     positioning). On narrow screens there's no spare room beside the photo
     for it to float into, so it drops into normal flow below the image
     instead — the negative margin used to still pull it up over the photo
     edge, which cut the card's own icon badge in half against the photo. */
  .hero-visual .floating-card { position: static; margin-top: 16px; max-width: none; width: 100%; }
  .feature-list { grid-template-columns: 1fr; }
  .people-grid.people-grid-2 { grid-template-columns: 1fr; }
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }
  .review-card { flex-basis: 78%; }
}