/* NOREON Microsite — Brunner Hauptstraße
   Brand Book V2: Akzent Vesperblau #3E4F6B, Navy #1B2738
   Typo: Montserrat (Google Fonts, OFL) für Headlines + Body */

/* Montserrat — lokal gehostet (kein Google-CDN, DSGVO: kein IP-Abfluss) */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/montserrat-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/montserrat-700.woff2') format('woff2'); }

:root {
  /* Akzent: Vesperblau (gedämpftes Abendblau) */
  --orange: #3E4F6B;          /* Hauptakzent — Buttons, Hervorhebungen auf hellem Grund */
  --orange-light: #9AA6C2;    /* Hellerer Akzent — für Text/Akzente auf Navy */
  --orange-dark: #313F56;     /* Hover/aktiv */
  --navy: #1B2738;
  --white: #FFFFFF;
  --grey-100: #E9EDF4;        /* zarter Vesper-Tint statt Neutralgrau — Sektionsflächen wirken farbig */
  --tint: #D7DEEC;            /* kräftigerer Vesper-Tint — Hero & Akzentsektionen */
  --grey-300: #C5CCDA;        /* Border, leicht bläulich */
  --grey-600: #5C6573;

  --font-headline: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --max-width: 1120px;
  --gutter: 24px;
  --radius: 4px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.15; margin-bottom: 0.75em; }
h3 { font-size: 1.4rem; line-height: 1.3; }

p { margin: 0 0 1em; }

a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--orange); }

/* Sichtbarer Tastatur-Fokus (Barrierefreiheit) */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 2px; }
.section--dark :focus-visible,
.hero--image :focus-visible,
.ctaband :focus-visible,
.site-nav__cta:focus-visible { outline-color: #ffffff; }

/* Sprunglink — sichtbar nur bei Tastatur-Fokus */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

/* Bewegung reduzieren, wenn vom System gewünscht */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────────────
   Header / Nav
   ────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid var(--grey-300);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  color: var(--navy);
  text-decoration: none;
  height: 38px;
}

.site-header__logo img,
.site-header__logo svg { height: 38px; width: auto; display: block; }
@media (max-width: 720px) {
  .site-header__logo, .site-header__logo img, .site-header__logo svg { height: 32px; }
}

.site-header__brands { display: flex; align-items: center; gap: 44px; min-width: 0; }
.site-header__logo--partner { padding-left: 44px; border-left: 1px solid var(--grey-300); }
@media (max-width: 720px) {
  .site-header__brands { gap: 20px; }
  .site-header__logo--partner { padding-left: 20px; }
  .site-header__logo--partner, .site-header__logo--partner img { height: 26px; }
}

.site-nav { display: flex; flex-wrap: nowrap; gap: 22px; align-items: center; }
.site-nav a {
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--grey-600);
  white-space: nowrap;
}
.site-nav a:hover { color: var(--navy); }
.site-nav__cta {
  background: var(--navy);
  color: var(--white) !important;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-weight: 500;
  white-space: nowrap;
}
.site-nav__cta:hover { background: var(--orange); }

/* Burger-Button (nur Mobil sichtbar) */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
}
.site-nav__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mittlere Breiten: enger setzen, damit die Nav einzeilig bleibt */
@media (max-width: 1180px) {
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 13px; }
}
@media (max-width: 940px) {
  .site-nav__toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #FFFFFF;
    border-bottom: 1px solid var(--grey-300);
    box-shadow: 0 18px 36px rgba(27, 39, 56, 0.12);
    padding: 6px 0 14px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { font-size: 16px; padding: 14px var(--gutter); }
  .site-nav__cta { margin: 10px var(--gutter) 0; padding: 14px 18px; text-align: center; }
}

/* ──────────────────────────────────────────────────────
   Hero
   ────────────────────────────────────────────────────── */

.hero {
  padding: 80px var(--gutter) 60px;
  background: var(--tint);
  overflow: hidden;
}

/* Emotionaler Bild-Hero (Full-Width) */
.hero--image {
  position: relative;
  padding: 0;
  min-height: min(86vh, 740px);
  display: flex;
  align-items: flex-end;
  background: var(--navy);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(27,39,56,0.94) 0%, rgba(27,39,56,0.62) 40%, rgba(27,39,56,0.40) 70%, rgba(27,39,56,0.34) 100%),
    linear-gradient(to right, rgba(27,39,56,0.70) 0%, rgba(27,39,56,0.30) 50%, rgba(27,39,56,0.05) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 56px;
  color: #fff;
}
.hero--image .hero__eyebrow {
  color: #fff;
  font-weight: 700;
  margin-bottom: 14px;
  text-shadow: 0 1px 12px rgba(27,39,56,0.6);
}
.hero--image h1 {
  color: #fff;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 1.04;
  max-width: 18ch;
  text-shadow: 0 2px 26px rgba(27,39,56,0.55);
}
.hero--image .hero__sub {
  color: #fff;
  max-width: 50ch;
  margin: 14px 0 22px;
  text-shadow: 0 1px 14px rgba(27,39,56,0.6);
}
.hero__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0 0 28px;
}
.hero__chips li {
  background: rgba(27,39,56,0.45);
  border: 1px solid rgba(255,255,255,0.40);
  border-radius: 100px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hero--image .hero__actions { gap: 14px; }
/* Adresse im Startbereich (statt der Buttons, 19.10.2026) */
.hero__chips:has(+ .hero__adresse) { margin-bottom: 20px; }
.hero__adresse {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(20,30,45,.45), 0 2px 18px rgba(20,30,45,.55);
}
.hero__adresse svg { flex: none; }
.hero__adresse-ort::before { content: " · "; }
/* Drei Kästchen im Startbereich gleich breit (19.10.2026) */
.hero--image .hero__chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: max-content;
  max-width: 100%;
}
.hero--image .hero__chips li { text-align: center; }
@media (max-width: 720px) {
  .hero--image .hero__chips { grid-template-columns: 1fr; }
}
/* Störer im Startbereich: Kaufpreis, dunkelblauer Kreis oben im Himmel über den Häusern (19.10.2026) */
.hero__stoerer {
  --stoerer-winkel: 8deg;
  position: absolute;
  right: var(--gutter);
  top: clamp(16px, 2vw, 40px);
  width: 168px;
  height: 168px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 0 0 4px var(--navy), 0 0 0 6px var(--orange-light), 0 12px 30px rgba(20,30,45,.4);
  transform: rotate(var(--stoerer-winkel));
  transition: transform .25s ease;
}
.hero__stoerer:hover { transform: rotate(var(--stoerer-winkel)) scale(1.05); }
@media (prefers-reduced-motion: no-preference) {
  .hero__stoerer { animation: stoerer-rein .6s cubic-bezier(.34,1.56,.64,1) .9s both; }
}
@keyframes stoerer-rein {
  from { opacity: 0; transform: rotate(calc(var(--stoerer-winkel) + 20deg)) scale(.4); }
  to   { opacity: 1; transform: rotate(var(--stoerer-winkel)) scale(1); }
}
.hero__stoerer-klein {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-light);
}
.hero__stoerer-preis { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; }

/* Handy: statt des runden Störers ein hervorgehobenes viertes Kästchen mit dem Kaufpreis */
.hero__chips .hero__chip-preis { display: none; }
@media (max-width: 720px) {
  .hero__stoerer { display: none; }
  .hero__chips .hero__chip-preis {
    display: block;
    background: #fff;
    border-color: #fff;
    color: var(--navy);
    font-weight: 700;
  }
}
@media (max-width: 720px) {
  .hero__adresse { align-items: flex-start; }
  .hero__adresse svg { margin-top: 2px; }
  .hero__adresse-ort { display: block; }
  .hero__adresse-ort::before { content: none; }
}
.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}
.btn--ghost-light:hover { background: #fff; color: var(--navy); }
.hero__urgency {
  margin: 18px 0 0;
  font-size: 14px;
  color: rgba(255,255,255,0.82);
}

/* Produkt-Reveal direkt unter dem Hero */
.reveal {
  background: var(--tint);
  padding: 48px var(--gutter) 56px;
}
.reveal__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.reveal__inner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: 0 14px 36px rgba(27,39,56,0.16);
}
.reveal__cap {
  text-align: center;
  color: var(--grey-600);
  font-size: 14px;
  margin: 16px 0 0;
}

/* Projekt — 5er-Feature-Raster */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.feature {
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.feature h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.feature p { color: var(--grey-600); font-size: 14px; margin: 0; }
@media (max-width: 1080px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .feature-grid { grid-template-columns: 1fr; gap: 12px; } }

/* Häuser — Luftbild + Sub-Überschriften */
.haeuser-bild { margin: 0 0 36px; }
.haeuser-bild img { width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: var(--radius); display: block; }
.haeuser-bild--plan { max-width: 780px; margin-left: auto; margin-right: auto; }
.haeuser-bild--plan img { max-height: none; object-fit: contain; }
.haeuser-bild figcaption { color: rgba(255,255,255,0.6); font-size: 13px; text-align: center; margin-top: 10px; }
.haeuser-sub { color: var(--white); font-size: 1.5rem; font-weight: 400; margin: 52px 0 8px; }
.haeuser-sub--onlight { color: var(--navy); }
.haeuser-subtext { color: rgba(255,255,255,0.75); max-width: 60ch; margin-bottom: 28px; }
.haeuser-hinweis { margin-top: 22px; max-width: 70ch; color: rgba(255,255,255,0.6); font-size: 13px; font-style: italic; line-height: 1.5; }

/* Grundriss-Platzhalter */
.floorplan__ph {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tint);
  border: 1px dashed var(--grey-300);
  border-radius: var(--radius);
  color: var(--grey-600);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

/* Bildwelt-Platzhalter (Stock-Fotos folgen) */
.ph-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.ph-tile {
  aspect-ratio: 16 / 10;
  background: var(--white);
  border: 1px dashed var(--grey-300);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--navy);
  font-weight: 600;
}
.ph-tile__icon { width: 30px; height: 30px; color: var(--orange); }
.ph-tile__icon svg { width: 100%; height: 100%; }
.ph-tile small { color: var(--grey-600); font-weight: 500; font-size: 12px; }
@media (max-width: 680px) { .ph-row { grid-template-columns: 1fr; } }

/* Ablauf — Schritte einzeilig */
.steps--row { grid-template-columns: repeat(5, 1fr); }
.steps--row li { padding: 24px 16px 18px; }
@media (max-width: 860px) { .steps--row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps--row { grid-template-columns: 1fr; } }

/* Kapitalanlage — 4er-Raster */
.invest-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .invest-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .invest-grid--4 { grid-template-columns: 1fr; } }

/* Emotionaler CTA-Trenner (letztes Viertel) */
.ctaband {
  position: relative;
  min-height: min(64vh, 560px);
  display: flex;
  align-items: flex-end;
  background: var(--navy);
  overflow: hidden;
}
.ctaband__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.ctaband__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(27,39,56,0.92) 0%, rgba(27,39,56,0.45) 38%, rgba(27,39,56,0.10) 70%, rgba(27,39,56,0.20) 100%),
    linear-gradient(to right, rgba(27,39,56,0.50) 0%, rgba(27,39,56,0) 55%);
}
.ctaband__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) 52px;
  color: #fff;
}
.ctaband__content h2 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  margin-bottom: 12px;
  text-shadow: 0 2px 24px rgba(27,39,56,0.55);
}
.ctaband__content p {
  color: #fff;
  max-width: 46ch;
  margin: 0 0 26px;
  font-size: 1.1rem;
  text-shadow: 0 1px 14px rgba(27,39,56,0.6);
}
@media (max-width: 760px) {
  /* Mobil: gestapelt — Bild-Banner oben (auf Kind zentriert), Text drunter auf Navy */
  .ctaband { display: block; min-height: auto; background: var(--navy); }
  .ctaband__bg {
    position: relative;
    width: 100%;
    height: 280px;
    object-position: center 28%;
  }
  .ctaband__overlay { display: none; }
  .ctaband__content { padding: 30px var(--gutter) 38px; }
  .ctaband__content p { color: rgba(255,255,255,0.85); }
}

/* Bild-Hero auf Mobil: gleichmäßiger, kräftiger Overlay für volle Lesbarkeit */
@media (max-width: 760px) {
  .hero--image { min-height: auto; }
  .hero__overlay {
    background:
      linear-gradient(to top, rgba(27,39,56,0.96) 0%, rgba(27,39,56,0.80) 50%, rgba(27,39,56,0.62) 100%);
  }
  .hero__content { padding-top: 40px; padding-bottom: 44px; }
  .hero--image h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
}

.hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: 16px;
}

.hero__sub {
  font-size: 1.25rem;
  color: var(--grey-600);
  margin: 16px 0 32px;
  max-width: 480px;
}

.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__illustration {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding: 48px var(--gutter); }
}

/* ──────────────────────────────────────────────────────
   Buttons
   ────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--orange); color: var(--white); }
.btn--primary:hover { background: var(--orange-dark); color: var(--white); }

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

/* ──────────────────────────────────────────────────────
   Sections (generic)
   ────────────────────────────────────────────────────── */

.section {
  padding: 80px var(--gutter);
}
.section--alt { background: var(--grey-100); }
.section--alt2 { background: var(--tint); }
.section--dark { background: var(--navy); color: var(--white); }
.section--dark h2, .section--dark h3 { color: var(--white); }

.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section__lead {
  font-size: 1.15rem;
  color: var(--grey-600);
  max-width: 640px;
  margin-bottom: 40px;
}
.section--dark .section__lead { color: rgba(255,255,255,0.75); }

/* ──────────────────────────────────────────────────────
   Highlights
   ────────────────────────────────────────────────────── */

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

.highlight {
  padding: 32px 28px;
  background: var(--orange);
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  color: var(--white);
}
.highlight__num {
  font-family: var(--font-headline);
  font-size: 2.25rem;
  color: var(--white);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
.highlight__label {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.highlight p { margin: 0; color: rgba(255,255,255,0.92); }

@media (max-width: 720px) {
  .highlights { grid-template-columns: 1fr; gap: 16px; }
}

/* ──────────────────────────────────────────────────────
   Lage
   ────────────────────────────────────────────────────── */

.lage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.lage-map {
  background: var(--grey-100);
  border: 1px solid var(--grey-300);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-600);
  font-size: 14px;
  border-radius: var(--radius);
}

.lage-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lage-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--grey-300);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.lage-list li:last-child { border-bottom: none; }
.lage-list strong { font-weight: 500; }
.lage-list span { color: var(--grey-600); white-space: nowrap; }

@media (max-width: 720px) {
  .lage-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Standortvorteile (Icon-Raster, Makro-Lage) */
.standort {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.standort__item {
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.standort__icon {
  width: 34px;
  height: 34px;
  color: var(--orange);
}
.standort__icon svg { width: 100%; height: 100%; display: block; }
.standort__dist {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.1;
}
.standort__cat {
  font-size: 12px;
  color: var(--grey-600);
  letter-spacing: 0.04em;
  line-height: 1.3;
}
@media (max-width: 900px) { .standort { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .standort { grid-template-columns: repeat(2, 1fr); } }

/* Karten: Luftbild + schematischer Lageplan nebeneinander */
.lage-maps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 760px) { .lage-maps { grid-template-columns: 1fr; } }

.lageplan {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.lageplan img { flex: 1; object-fit: cover; }
.lageplan img { width: 100%; height: auto; display: block; }
.lageplan figcaption {
  font-size: 12px;
  color: var(--grey-600);
  margin-top: 10px;
  text-align: center;
}

/* ──────────────────────────────────────────────────────
   Häuser-Tabelle
   ────────────────────────────────────────────────────── */

.units {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.unit {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 24px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.unit__name {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--white);
  margin: 0 0 8px;
}
.unit__row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}
.unit__row strong { color: var(--white); font-weight: 500; }

.unit__price {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex;
  flex-direction: column;
}
.unit__price-total {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}
.unit__price-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}

.unit__status {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--orange);
  color: var(--white);
  align-self: flex-start;
}

@media (max-width: 880px) {
  .units { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .units { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────
   Grundrisse
   ────────────────────────────────────────────────────── */

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

.floorplan {
  background: var(--white);
  border: 1px solid var(--grey-300);
  padding: 24px;
  border-radius: var(--radius);
}
.floorplan h3 {
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}
.floorplan ul { padding-left: 18px; margin: 0; color: var(--grey-600); font-size: 14px; }
.floorplan ul li { margin-bottom: 4px; }
.floorplan__img { display: flex; align-items: center; justify-content: center; height: 380px; margin-bottom: 16px; cursor: zoom-in; }
.floorplan__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.floorplan ul li.floorplan__sum { list-style: none; margin: 10px 0 4px -18px; padding-top: 8px; border-top: 1px solid var(--grey-300); color: var(--navy); font-weight: 600; }
.floorplan ul li.floorplan__extra { list-style: none; margin-left: -18px; }
.floorplan__note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--grey-600); font-style: italic; }

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

/* ──────────────────────────────────────────────────────
   Ablauf (Stepper)
   ────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.steps li {
  position: relative;
  padding: 24px 20px 20px;
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  overflow-wrap: break-word;
  hyphens: auto;
}
.steps li small { display: block; margin-top: 4px; line-height: 1.4; }
.steps li::before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  top: -14px;
  left: 16px;
  width: 28px;
  height: 28px;
  background: var(--orange);
  color: var(--white);
  border-radius: 100%;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.steps { counter-reset: step; }

.disclaimer-box {
  background: var(--white);
  border-left: 4px solid var(--orange);
  padding: 24px 28px;
  border-radius: var(--radius);
  margin-top: 24px;
}
.disclaimer-box strong { color: var(--orange); }

/* ──────────────────────────────────────────────────────
   Kontaktformular
   ────────────────────────────────────────────────────── */

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}

.form { display: grid; gap: 16px; }
.form label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-600);
  margin-bottom: 6px;
}
.form input, .form select, .form textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 16px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(62, 79, 107, 0.18);
}
.form textarea { min-height: 120px; resize: vertical; font-family: var(--font-body); }

.form__checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--grey-600);
}
.form__checkbox input { width: auto; margin-top: 4px; }
.form__checkbox a { color: var(--navy); }

.form__status {
  display: none;
  padding: 14px 16px;
  background: rgba(62, 79, 107, 0.1);
  border: 1px solid var(--orange);
  color: var(--navy);
  border-radius: var(--radius);
  font-size: 14px;
}
.form__status.is-visible { display: block; }

/* Kontaktformular auf dunkler Sektion lesbar halten */
.section--dark .form label { color: rgba(255,255,255,0.75); }
.section--dark .form__checkbox { color: rgba(255,255,255,0.75); }
.section--dark .form__checkbox a { color: var(--white); }
.section--dark .form__status { color: var(--white); background: rgba(255,255,255,0.08); }
.section--dark .btn--primary { background: var(--white); color: var(--navy); }
.section--dark .btn--primary:hover { background: var(--orange-light); color: var(--navy); }
/* helle Kontakt-Box behält dunkle Schrift, auch auf Navy-Sektion */
.section--dark .contact-direct h3 { color: var(--navy); }

.contact-direct {
  padding: 28px;
  background: var(--grey-100);
  border-radius: var(--radius);
  color: var(--navy);
}
.contact-direct dd { color: var(--navy); }
.contact-direct dd a { color: var(--navy); }
.contact-direct h3 { margin-bottom: 16px; }
.contact-direct dl { margin: 0; }
.contact-direct dt {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-600);
  margin-top: 16px;
}
.contact-direct dd { margin: 4px 0 0; font-size: 1rem; }
.contact-direct dt:first-child { margin-top: 0; }

@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ──────────────────────────────────────────────────────
   Partner & Standards
   ────────────────────────────────────────────────────── */

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

.partner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 24px;
  align-items: start;
  padding: 32px;
  background: var(--grey-100);
  border-radius: var(--radius);
  border: 1px solid var(--grey-300);
}

.partner__logo {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.partner__logo img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
.partner__body .partner__role {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.partner__body .partner__tbd { font-style: italic; }

.partner__body h3 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}
.partner__body p { margin: 0 0 12px; color: var(--grey-600); font-size: 15px; }
.partner__body p:last-child { margin-bottom: 0; }
.partner__body a { color: var(--navy); font-weight: 500; }
.partner__body a:hover { color: var(--orange); }

@media (max-width: 880px) {
  .partner-grid { grid-template-columns: 1fr; gap: 16px; }
  .partner { gap: 16px; padding: 24px; }
}

/* ──────────────────────────────────────────────────────
   Footer
   ────────────────────────────────────────────────────── */

.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  padding: 48px var(--gutter) 32px;
  font-size: 14px;
}
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.site-footer a { color: rgba(255,255,255,0.85); text-decoration: none; margin-right: 24px; }
.site-footer a:hover { color: var(--orange); }
.site-footer__logo { display: inline-flex; }
.site-footer__disclaimer { max-width: var(--max-width); margin: 28px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.5); }
.site-footer__logo img,
.site-footer__logo svg { height: 22px; width: auto; display: block; filter: brightness(0) invert(1); }

/* ──────────────────────────────────────────────────────
   Utility
   ────────────────────────────────────────────────────── */

.ueber-kurz {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.ueber-kurz p {
  font-size: 1.15rem;
  color: var(--grey-600);
}

.brand-note {
  background: rgba(62, 79, 107, 0.08);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--grey-600);
  text-align: center;
  border-bottom: 1px solid var(--grey-300);
}

/* ──────────────────────────────────────────────────────
   Einzelner Lageplan / Luftbild (volle Breite)
   ────────────────────────────────────────────────────── */
.lageplan--single { margin-top: 24px; }
.lageplan--single img { max-height: 460px; object-fit: cover; width: 100%; }

/* Adresszeile (statt Karte, 27.5.2026) */
.lage-adresse {
  margin: 28px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--grey-600);
}

/* Interaktive Karte (Leaflet) — DEAKTIVIERT 27.5.2026, Styles für Reaktivierung erhalten */
.lagemap {
  width: 100%;
  height: 440px;
  border-radius: var(--radius);
  z-index: 1;
}
/* Kacheln gedämpft (grau + leicht kühl), damit Vesperblau-Marker & CI führen */
.lagemap .leaflet-tile-pane {
  filter: grayscale(1) contrast(0.9) brightness(1.05) sepia(0.12) hue-rotate(175deg) saturate(0.7);
}
/* CI-Marker (Leaflet divIcon) */
.leaflet-div-icon.mk-wrap { background: transparent; border: none; }
.mk {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: 0 3px 10px rgba(27,39,56,0.35);
}
.mk svg { display: block; }
.mk--project { width: 44px; height: 44px; background: var(--orange); border: 3px solid #fff; color: #fff; }
.mk--project svg { width: 23px; height: 23px; }
.mk--poi { width: 32px; height: 32px; background: #fff; border: 2px solid var(--orange); color: var(--orange); }
.mk--poi svg { width: 17px; height: 17px; }
.leaflet-popup-content { font-family: var(--font-body); font-size: 14px; color: var(--navy); }

/* Karten-Tooltips im CI */
.leaflet-tooltip.map-tip {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(27,39,56,0.15);
  padding: 5px 9px;
}
.leaflet-tooltip.map-tip--project {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  font-weight: 700;
}
.leaflet-tooltip.map-tip--project.leaflet-tooltip-top::before { border-top-color: var(--orange); }

/* Adress-Info-Box auf der Karte (CI) */
.map-info {
  background: var(--white);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: 0 4px 16px rgba(27,39,56,0.18);
  font-family: var(--font-body);
  line-height: 1.4;
  max-width: 230px;
}
.map-info strong {
  display: block;
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--navy);
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.map-info span { display: block; font-size: 13px; color: var(--grey-600); }

/* ──────────────────────────────────────────────────────
   Leben in Brunn
   ────────────────────────────────────────────────────── */
.leben-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}
.leben-card {
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: 28px;
}
.leben-card__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
}
.leben-card h3 { font-size: 1.25rem; margin: 8px 0 10px; }
.leben-card p { margin: 0; color: var(--grey-600); font-size: 15px; }
.leben-quote {
  margin: 32px 0 0;
  font-family: var(--font-headline);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.4;
  color: var(--navy);
  max-width: 760px;
}
@media (max-width: 760px) { .leben-grid { grid-template-columns: 1fr; gap: 16px; } }

/* Accordion (Aufklapp-Elemente, 27.5.2026) */
.acc { display: grid; gap: 12px; margin-top: 16px; }
.acc__item {
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
}
.acc__item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
}
.acc__item summary::-webkit-details-marker { display: none; }
.acc__head { display: flex; flex-direction: column; gap: 4px; }
.acc__label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 600;
}
.acc__title {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
}
.acc__icon {
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
}
.acc__icon::before, .acc__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--orange);
  transform: translate(-50%, -50%);
}
.acc__icon::before { width: 12px; height: 1.5px; }
.acc__icon::after { width: 1.5px; height: 12px; transition: transform 0.2s ease; }
details[open] > summary .acc__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.acc__body { padding: 0 24px 20px; color: var(--grey-600); font-size: 15px; max-width: 760px; }
.acc__body p { margin: 0; }

/* ──────────────────────────────────────────────────────
   Kapitalanlage (dunkle Sektion)
   ────────────────────────────────────────────────────── */
.invest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.invest-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 24px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.invest-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--orange-light);
  color: var(--navy);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
}
.invest-card h3 { color: var(--white); font-size: 1.1rem; margin-bottom: 8px; }
.invest-card p { color: rgba(255,255,255,0.75); font-size: 14px; margin: 0; }
.invest-note {
  margin-top: 24px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  max-width: 760px;
  line-height: 1.5;
}
@media (max-width: 900px) { .invest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .invest-grid { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────────────
   Ausführungen (zwei Varianten) — auf Navy-Sektion
   ────────────────────────────────────────────────────── */
.variants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 32px;
}
.variant {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 24px;
}
.variant--plus { border-color: var(--orange-light); }
.variant__tag {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--navy);
  background: var(--orange-light);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.variant h3 { color: var(--white); font-size: 1.2rem; margin-bottom: 8px; }
.variant p { color: rgba(255,255,255,0.75); font-size: 14px; margin: 0; }
@media (max-width: 720px) { .variants { grid-template-columns: 1fr; } }

.units__note {
  margin-top: 28px;
  color: rgba(255,255,255,0.8);
  font-size: 15px;
}
.units__note strong { color: var(--white); }
.link-btn {
  background: none;
  border: none;
  color: var(--orange-light);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--white); }

/* ──────────────────────────────────────────────────────
   Schwebender CTA-Button (FAB)
   ────────────────────────────────────────────────────── */
.fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 100px;
  padding: 14px 22px 14px 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(27,39,56,0.28);
  transition: transform 0.15s ease, background 0.15s ease;
}
.fab:hover { background: var(--orange-dark); transform: translateY(-2px); }
.fab svg { width: 22px; height: 22px; }
@media (max-width: 480px) {
  .fab { right: 16px; bottom: 16px; padding: 13px 20px 13px 16px; font-size: 14px; }
}

/* ──────────────────────────────────────────────────────
   Modal-Formular
   ────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(27,39,56,0.55); backdrop-filter: blur(2px); }
.modal__dialog {
  position: relative;
  background: var(--white);
  border-radius: 8px;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 36px 32px 32px;
  box-shadow: 0 20px 60px rgba(27,39,56,0.35);
}
.modal__close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; font-size: 28px; line-height: 1;
  color: var(--grey-600); cursor: pointer;
}
.modal__close:hover { color: var(--navy); }
.modal__dialog h2 { font-size: 1.6rem; margin-bottom: 6px; }
.modal__lead { color: var(--grey-600); font-size: 15px; margin-bottom: 22px; }
body.modal-open { overflow: hidden; }

/* ──────────────────────────────────────────────────────
   Scroll-Animationen
   Greifen nur, wenn JavaScript läuft (html.js) UND der Nutzer
   keine reduzierte Bewegung eingestellt hat. Ohne beides ist
   die Seite ganz normal sichtbar.
   ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* Diese Bausteine starten unsichtbar und gleiten beim Erscheinen ein */
  html.js .hero__eyebrow,
  html.js .hero--image h1,
  html.js .hero__sub,
  html.js .hero__chips,
  html.js .hero__actions,
  html.js .hero__adresse,
  html.js .section h2,
  html.js .section__lead,
  html.js .feature,
  html.js .haeuser-bild,
  html.js .unit,
  html.js .floorplan,
  html.js .units__note,
  html.js .haeuser-sub,
  html.js .standort__item,
  html.js .ph-tile,
  html.js .acc__item,
  html.js .partner,
  html.js .steps li,
  html.js .ctaband__content,
  html.js .section .form,
  html.js .contact-direct {
    opacity: 0;
    transform: translateY(24px);
  }

  /* … und sind dann da.
     Doppelte Klasse, damit diese Regel stärker ist als Selektoren wie
     ".hero--image h1" oder ".section h2" — sonst bleiben die unsichtbar. */
  html.js .is-in.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity .75s cubic-bezier(.22,.61,.36,1),
                transform .75s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--d, 0ms);
  }

  /* Tiefenwirkung: die beiden großen Fotos bewegen sich beim Scrollen
     minimal langsamer als der Rest. Etwas Überhöhe, damit keine Kante entsteht. */
  html.js .hero--image .hero__bg,
  html.js .ctaband .ctaband__bg {
    inset: auto;
    top: -8%;
    left: 0;
    width: 100%;
    height: 116%;
    will-change: transform;
  }
}

/* Weichere Formensprache: runde Ecken auf Karten und Bildern */
.feature,
.unit,
.partner,
.standort__item,
.ph-tile,
.floorplan__ph,
.acc__item,
.leben-karte { border-radius: 10px; }

.haeuser-bild img,
.haeuser-bild,
.floorplan img,
.ph-tile img { border-radius: 12px; }

.hero__chips li { border-radius: 100px; }
.btn { border-radius: 8px; }
.form input, .form textarea, .form select { border-radius: 8px; }
.modal__dialog { border-radius: 14px; }

/* Kennzeichnung KI-erzeugter Bilder (EU-KI-Verordnung, Art. 50) */
.bildhinweis {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  margin: 0;
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(27, 39, 56, 0.55);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
@media (max-width: 560px) { .bildhinweis { font-size: 10px; right: 10px; bottom: 10px; } }