/* ============================================================
   HNG Pro Select – Komponenten
   Alle Maße/Farben aus Figma; abgeleitete Werte kommentiert.
   ============================================================ */

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 30px;
  border-radius: var(--radius-m);
  border: 1px solid transparent;
  font-family: var(--font-text);
  font-size: var(--fs-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--weiss);
  transition: background-color var(--dur-normal) var(--ease),
              color var(--dur-normal) var(--ease),
              border-color var(--dur-normal) var(--ease),
              transform var(--dur-schnell) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primaer {
  background: var(--orange);
  border-color: var(--orange);
}
.btn--primaer:hover {
  background: var(--weiss);
  color: var(--orange);
}

.btn--outline-hell {
  background: transparent;
  border-color: var(--weiss);
}
.btn--outline-hell:hover {
  background: var(--weiss);
  color: var(--hng-blau);
}

.btn--outline-orange {
  background: transparent;
  border-color: var(--orange);
  color: var(--orange);
}
.btn--outline-orange:hover {
  background: var(--orange);
  color: var(--weiss);
}

/* Marken-Buttons in der jeweiligen Markenfarbe (Figma BUTTON-70 272:411, User-Vorgabe 14.07.) */
.btn--marke-konzeptimmo { background: var(--konzeptimmo); border-color: var(--konzeptimmo); }
.btn--marke-konzeptimmo:hover { background: var(--weiss); color: var(--konzeptimmo); }
.btn--marke-careimmo { background: var(--careimmo); border-color: var(--careimmo); }
.btn--marke-careimmo:hover { background: var(--weiss); color: var(--careimmo); }
.btn--marke-greenimmo { background: var(--greenimmo); border-color: var(--greenimmo); }
.btn--marke-greenimmo:hover { background: var(--weiss); color: var(--greenimmo); }
.btn--marke-basisimmo { background: var(--basisimmo); border-color: var(--basisimmo); }
.btn--marke-basisimmo:hover { background: var(--weiss); color: var(--basisimmo); }

/* ============ Header ============ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--weiss);
  transition: box-shadow var(--dur-normal) var(--ease),
              height var(--dur-normal) var(--ease);
}
.header__inner {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* Pill exakt mittig */
  align-items: center;
  gap: 28px;
  padding-inline: 59px; /* Figma: Menü-Komponente x=59 */
  transition: height var(--dur-normal) var(--ease);
}
.header__rechts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
/* Scroll-Zustand (nicht in Figma angelegt – abgestimmter Vorschlag) */
.header.is-scrolled { box-shadow: 0 2px 16px rgb(0 0 0 / 0.10); }
.header.is-scrolled .header__inner { height: 72px; }

.header__logo {
  display: inline-flex;
  align-items: center;
  color: var(--hng-blau);
  text-decoration: none;
  justify-self: start;
}

/* Primär-Navigation: dunkle Pill mit drei Zielgruppen */
/* Figma Group 36 (27px-Raster), proportional auf 14px-Schrift skaliert.
   ul.nav-pill nötig: schlägt den Listen-Reset ul[class]{padding:0} */
ul.nav-pill {
  display: flex;
  align-items: center;
  background: var(--hng-blau);
  border-radius: 11px;
  padding: 6px;
}
.nav-pill a {
  display: inline-flex;
  align-items: center;
  padding: 4px 21px;
  border-radius: 11px;
  /* 12px statt 14px (User-Vorgabe 16.07.). Das padding:6px der ul.nav-pill
     bleibt unveraendert -> das sichtbare Blau bleibt bei 6px (Handover-Regel),
     die Pille schrumpft proportional von 42px auf 38px. */
  font-size: var(--fs-klein);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* Figma: 1px bei 10px Schrift */
  color: var(--beige);
  text-decoration: none;
  transition: background-color var(--dur-schnell) var(--ease),
              color var(--dur-schnell) var(--ease);
}
.nav-pill a:hover { color: var(--weiss); }
.nav-pill a[aria-current="page"] {
  background: var(--pill-aktiv);
  color: var(--hng-blau);
}

/* Sekundär-Navigation */
.nav-sekundaer {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-sekundaer > li { position: relative; }
.nav-sekundaer a,
.nav-sekundaer button {
  position: relative;           /* Bezugsrahmen fuer die Hover-Linie (17.07.) */
  font-size: var(--fs-klein);   /* 12px statt 14px (User-Vorgabe 16.07.) */
  white-space: nowrap;          /* "unsere marken" bleibt einzeilig (User-Vorgabe 16.07.) */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dunkel);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--dur-schnell) var(--ease);
}
.nav-sekundaer a:hover,
.nav-sekundaer button:hover { color: var(--hng-blau); }
/* 17.07.: Der reine Farbwechsel (#2E2825 -> #00334C) war praktisch unsichtbar.
   Zusaetzlich waechst beim Hover eine orange Linie von links; die aktive
   Seite (aria-current) und der geoeffnete Marken-Toggle tragen sie dauerhaft. */
.nav-sekundaer a::after,
.nav-sekundaer button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--sand); /* dunkelbeige statt orange (User-Vorgabe 19.07.) */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-normal) var(--ease);
}
.nav-sekundaer a:hover::after,
.nav-sekundaer button:hover::after,
.nav-sekundaer a[aria-current="page"]::after,
.nav-sekundaer button[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-sekundaer a[aria-current="page"] { color: var(--hng-blau); }
.nav-sekundaer button[aria-expanded="true"] { color: var(--hng-blau); }

/* Dropdown "Unsere Marken" (Zustand: Frame MENÜ AUFGEKLAPPT) */

/* Figma: Rectangle 48 – 164px breit, #FFFBF4, r5, Logos 16px im 32px-Raster */
.dropdown__menu {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  translate: -50% -8px;
  width: 164px;
  background: var(--pill-aktiv);
  border-radius: 5px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.14);
  padding: 24px 29px;
  /* 17.07.: weiches Oeffnen (Fade + Absenken) statt display:none.
     visibility verzoegert das Ausblenden, haelt das Menue aber aus dem
     Tab-Fokus, solange es geschlossen ist. */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-normal) var(--ease),
              translate var(--dur-normal) var(--ease),
              visibility 0s linear var(--dur-normal);
}
.dropdown__menu.is-open {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
  transition: opacity var(--dur-normal) var(--ease),
              translate var(--dur-normal) var(--ease);
}
.dropdown__menu a {
  display: block;
  line-height: 0; /* keine Zeilenhoehen-Varianz -> Logo-Unterkante bei allen Marken gleich */
  text-transform: none;
  transition: opacity var(--dur-schnell) var(--ease);
  /* 8px Abstand Logo->Unterstrich, einheitlich bei allen vier Marken
     (User-Vorgabe 19.07.). padding-bottom 16px + Strich bottom 8px = 8px.
     Die Linie ist NUR bei der aktiven Seite bzw. beim Hover sichtbar
     (scaleX via .nav-sekundaer-Regeln), nicht permanent. */
  padding: 13px 0 16px;
}
.dropdown__menu a:first-child { padding-top: 4px; }
.dropdown__menu a::after { bottom: 8px; }
/* Eintraege blenden beim Oeffnen leicht gestaffelt ein. Einmalige Animation
   (kein transition-delay), damit der Hover danach sofort reagiert. */
.dropdown__menu.is-open a {
  animation: dropdown-eintrag var(--dur-normal) var(--ease) both;
}
.dropdown__menu.is-open a:nth-child(2) { animation-delay: 40ms; }
.dropdown__menu.is-open a:nth-child(3) { animation-delay: 80ms; }
.dropdown__menu.is-open a:nth-child(4) { animation-delay: 120ms; }
@keyframes dropdown-eintrag {
  from { opacity: 0; translate: 0 -4px; }
}
.dropdown__menu a:hover { opacity: 0.7; }
.dropdown__menu img { display: block; height: 16px; width: auto; }

.header__aktionen {
  display: flex;
  align-items: center;
  gap: 14px;
}
.btn--kontakt {
  background: var(--hng-blau);
  border-radius: var(--radius-m);
  /* 12px (User-Vorgabe 16.07.). Feste Hoehe 36px, damit Kontakt und Login
     exakt gleich hoch sind und optisch zur 39px-Pill-Nav passen — ohne
     feste Hoehe ergeben unterschiedliche Schriftschnitte 35 vs. 33px. */
  height: 36px;
  padding: 0 18px;
  font-size: var(--fs-klein);
  font-weight: 700;
}
.btn--kontakt:hover { background: var(--orange); }
.btn--login {
  /* Fehler gefunden 16.07. per Messung: ohne display:flex sass der Text 8px zu
     hoch im Kasten (die feste Hoehe wirkt, der Text bleibt aber oben stehen).
     Zentrierung analog .btn--kontakt, das die .btn-Basis mit flex nutzt. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--grau-border);
  border-radius: var(--radius-m);
  /* wie .btn--kontakt: 12px, gleiche feste Hoehe (User-Vorgabe 16.07.) */
  height: 36px;
  padding: 0 18px;
  font-size: var(--fs-klein);
  font-weight: 600;
  color: var(--text-dunkel);
  background: transparent;
  text-decoration: none;
}
.btn--login:hover { border-color: var(--hng-blau); color: var(--hng-blau); }

/* ============ Social Sidebar (mitlaufend, alle Seiten) ============ */
/* Sidebar: Figma zeigt 38px Breite mit 15px-Icons (Node 2034:3035/3226 ff.).
   Auf User-Vorgabe 16.07. vergroessert: 48px breit, Social-Icons 20px,
   Kontakt-Icon 26px. Bewusste Abweichung von Figma. */
.social-sidebar {
  position: fixed;
  right: 0;
  top: var(--header-h);
  z-index: 90;
  width: 48px;
  background: var(--sidebar-bg);
  border-radius: var(--radius-m) 0 0 var(--radius-m);
  padding: 10px 0 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
/* 17.07.: Leiste gleitet beim Seitenaufbau von rechts ein, Icons folgen
   minimal gestaffelt. Einmalige Animation, danach voellig ruhig. */
.social-sidebar {
  animation: sidebar-einfahren 500ms var(--ease) 250ms both;
}
@keyframes sidebar-einfahren {
  from { transform: translateX(100%); opacity: 0; }
}
.social-sidebar a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--weiss);
  transition: transform var(--dur-schnell) var(--ease),
              background-color var(--dur-schnell) var(--ease),
              color var(--dur-schnell) var(--ease),
              opacity var(--dur-schnell) var(--ease);
  animation: sidebar-icon 350ms var(--ease) both;
}
.social-sidebar a:nth-child(1) { animation-delay: 400ms; }
.social-sidebar a:nth-child(2) { animation-delay: 460ms; }
.social-sidebar a:nth-child(3) { animation-delay: 520ms; }
.social-sidebar a:nth-child(4) { animation-delay: 580ms; }
.social-sidebar a:nth-child(5) { animation-delay: 640ms; }
@keyframes sidebar-icon {
  from { opacity: 0; transform: translateX(10px); }
}
/* Hover: weicher weisser Kreis, Icon kippt in die Sidebar-Farbe */
.social-sidebar a:hover {
  transform: scale(1.1);
  background: var(--weiss);
  color: var(--sidebar-bg);
}
.social-sidebar a svg { width: 20px; height: 20px; }
/* Kontakt-Icon: Original aus Figma (Node 2034:3057, "Dialog"), dort 24x24
   und damit groesser als die Social-Icons. Verhaeltnis beibehalten. */
.social-sidebar a.social-sidebar__dialog svg { width: 26px; height: 26px; }

/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: 927px; /* Figma */
  display: flex;
  align-items: center;
  color: var(--weiss);
  isolation: isolate;
}
.hero__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--hng-blau); /* Fallback bis Bild-Export vorliegt */
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Exakte Figma-Stops (Rectangle 2): Schwarz unten -> transparent oben */
  background: linear-gradient(0deg,
      #000000 0%,
      #2E2825 36.5%,
      rgb(0 0 0 / 0) 100%);
}
.hero__inner {
  width: 100%;
  /* 15.07.: auf Container-Metrik gebracht, damit der Hero-Text auf der
     Content-Linie des Body sitzt (Kundenwunsch, alle Seiten) */
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 24px;
  padding-block: 140px 60px;
}
.hero__eyebrow {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.hero__copy {
  max-width: 930px;
  margin-block: 28px 32px;
  font-weight: 500;
}
.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
/* Scrollhinweis: zentriert unten im Hero, animiert, NUR Icon ohne Wort
   (User-Vorgabe 16.07.; Figma zeigt ihn rechts, mit Wort, ohne Animation).
   Bewegung nutzt die Projekt-Tokens, kein neuer Wert. */
.hero__scrollhinweis {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;            /* Klickflaeche, da der Text als Ziel entfaellt */
  color: rgb(255 255 255 / 0.6);
  text-decoration: none;
  transition: color var(--dur-schnell) var(--ease);
  animation: scroll-schweben 2.4s var(--ease) infinite;
}
.hero__scrollhinweis:hover { color: var(--weiss); }
/* Maus-Icon: sanftes Auf und Ab, der Punkt darin wandert nach unten. */
.hero__scrollhinweis svg { overflow: visible; }
.hero__scrollhinweis svg line { animation: scroll-punkt 2.4s var(--ease) infinite; }

@keyframes scroll-schweben {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}
@keyframes scroll-punkt {
  0%      { opacity: 0; transform: translateY(0); }
  35%     { opacity: 1; }
  70%     { opacity: 0; transform: translateY(6px); }
  100%    { opacity: 0; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scrollhinweis,
  .hero__scrollhinweis svg line { animation: none; }
}

/* Zahlen & Fakten */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 60px;
  margin-top: 80px;
}
.stats__zahl {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-zahl);
  line-height: 1;
  display: block;
  /* 17.07.: gleichbreite Ziffern – ohne sie wackelt die Zahl beim Hochzaehlen
     horizontal, weil z. B. die 1 schmaler ist als die 8 */
  font-variant-numeric: tabular-nums;
}
.stats__label {
  display: block;
  font-size: var(--fs-klein);
  margin-top: 8px;
}

/* ============ Accordion / Info-Container ============ */
.accordion { display: grid; gap: 36px; margin-top: 56px; }

.accordion__item {
  border-radius: var(--radius-m);
  background: var(--beige-60);
}
.accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 60px;
  padding: 0 30px;
  background: var(--hng-blau);
  color: var(--weiss);
  border-radius: var(--radius-m);
  font-family: var(--font-text);
  font-size: var(--fs-accordion);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: left;
  transition: border-radius var(--dur-schnell) var(--ease);
}
.accordion__item.is-open .accordion__header {
  border-radius: var(--radius-s) var(--radius-s) 0 0;
}
.accordion__nr { margin-right: 18px; }
.accordion__icon {
  flex: none;
  transition: transform var(--dur-normal) var(--ease);
}
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); }

.accordion__body {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height var(--dur-slide) var(--ease),
              opacity var(--dur-slide) var(--ease);
}
.accordion__item.is-open .accordion__body { opacity: 1; }
.accordion__content { padding: 26px 30px 34px; }

.accordion__content p + .checkliste,
.accordion__content .checkliste + p { margin-top: 16px; }

.checkliste { display: grid; gap: 8px; }
.checkliste li {
  position: relative;
  padding-left: 26px;
  font-weight: 600;
}
.checkliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background: var(--orange);
  clip-path: polygon(14% 44%, 0 61%, 40% 100%, 100% 16%, 84% 3%, 39% 71%);
}

/* Marken-Grid im Container 01 */
.marken-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px 55px;
  margin-top: 26px;
}
.marken-grid__marke {
  display: grid;
  gap: 12px;
  align-content: start;
}
.marken-grid__logo { height: 22px; width: auto; }
.marken-grid__marke a {
  justify-self: start;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
}
.marken-grid__marke a:hover { text-decoration: underline; }

/* Container 05: Sektion mit Bildhintergrund */
.campus {
  position: relative;
  isolation: isolate;
  padding-block: 70px;
}
.campus__bild {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right 15%; /* Ausschnitt nach unten: Kopf bleibt sichtbar */
  background: var(--basisimmo); /* Fallback bis Bild-Export vorliegt */
}
.campus .accordion__item { max-width: 900px; }
.campus .btn { margin-top: 34px; }

/* ============ Schritte-Slider ("Ihr Einstieg") ============ */
.slider {
  color: var(--weiss);
}
/* padding-top schafft Headroom im Clipping-Bereich, damit die Icons beim
   Hover-Scale (1.05) oben nicht abgeschnitten werden; margin gleicht aus. */
.slider__viewport { overflow: hidden; padding-top: 4px; margin-top: 60px; }
/* 17.07.: Crossfade statt Seitwaerts-Schieben (User-Feedback: Kasten samt
   Steps rauschte beim Klick durchs Bild). Die Slides liegen per Grid
   uebereinander; die Timeline ist in jedem Slide identisch positioniert und
   wirkt dadurch statisch – nur ihre Zustandsfarben blenden weich um.
   Die Hoehe bleibt konstant (hoechster Slide), nichts springt. */
.slider__spur {
  display: grid;
}
.slider__slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slide) var(--ease),
              visibility 0s linear var(--dur-slide);
}
.slider__slide.is-aktiv {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-slide) var(--ease);
}
/* Fallback: solange kein Slide aktiv geschaltet wurde (JS nicht geladen),
   bleibt der erste Schritt sichtbar. */
.slider__spur:not(:has(.is-aktiv)) .slider__slide:first-child {
  opacity: 1;
  visibility: visible;
}
/* Nur die Textkarte bekommt eine dezente Aufwaertsbewegung – die Timeline
   darueber bleibt bewusst voellig ruhig. */
.slider__slide .slide-karte {
  transform: translateY(14px);
  transition: transform var(--dur-slide) var(--ease);
}
.slider__slide.is-aktiv .slide-karte { transform: none; }

/* Timeline mit 4 Stationen */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  margin-bottom: 44px;
}
.timeline__station {
  display: grid;
  justify-items: center; /* Icon + Label im Mittelsatz */
  text-align: center;
  gap: 16px;
  position: relative;
}
.timeline__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--sidebar-bg);
  cursor: pointer;
  transition: background-color var(--dur-normal) var(--ease),
              border-color var(--dur-normal) var(--ease),
              transform var(--dur-schnell) var(--ease);
}
.timeline__icon:hover { transform: scale(1.05); }
/* Erreichte Schritte sind gefüllt (Figma-Vorlage) */
.timeline__station.is-erreicht .timeline__icon {
  background: var(--sidebar-bg);
  border-color: var(--sidebar-bg);
}
.timeline__station::after {
  /* Verbindungslinie (Figma: gestrichelte Lines) */
  content: "";
  position: absolute;
  top: 40px;
  left: calc(50% + 56px);
  right: calc(-50% + 56px);
  border-top: 1px dashed rgb(255 255 255 / 0.5);
}
.timeline__station:last-child::after { display: none; }
.timeline__label {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.3;
}

/* Detail-Karte pro Slide */
.slide-karte {
  background: var(--weiss); /* Figma: DIV-134 weiß */
  border-radius: var(--radius-m);
  padding: 25px 36px 30px;
  color: var(--schwarz);
}
.slide-karte .h3 { color: var(--hng-blau); }
.slide-karte > p { margin-top: 14px; max-width: 863px; color: rgb(0 0 0 / 0.95); }
.slide-karte__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}
.slide-karte__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* USP-Kästen: beige, r8 (Figma-Vorlage) */
.slide-karte__tags li {
  background: var(--beige);
  border-radius: var(--radius-m);
  padding: 4px 17px;
}

/* Dots */
.slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}
.slider__dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sand); /* Figma: Ellipse inaktiv #C8BBA8 */
  transition: background-color var(--dur-schnell) var(--ease),
              transform var(--dur-schnell) var(--ease);
}
.slider__dots button:hover { transform: scale(1.3); }
.slider__dots button[aria-current="true"] { background: var(--sidebar-bg); } /* aktiv #9B8E7E */

/* ============ Banner (Events / CTA) ============ */
.banner {
  position: relative;
  isolation: isolate;
  color: var(--weiss);
  min-height: 474px; /* Figma: Group 81 */
  display: flex;
  align-items: center;
  padding-block: 60px;
}
.banner > .container { width: 100%; }
.banner__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--dunkelgrau); /* Fallback bis Bild-Export vorliegt */
}
.banner__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 0.6); /* Figma: schwarze Fläche 60% */
}
.banner__copy { max-width: 562px; margin-block: 24px 32px; font-weight: 500; }

.cta { padding-block: 80px; }
.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.cta .btn { margin-top: 28px; }

/* ============ "Passt das zu Ihnen?" (Figma: Group 96) ============ */
.fit { background: var(--beige-60); } /* Rectangle 35: #F5F0E8/60, volle Breite */
.fit__grid {
  display: grid;
  grid-template-columns: 500px 500px; /* Figma: DIV-134 je 500px */
  justify-content: space-between;
  gap: 40px;
  margin-top: 30px;
}
.fit__karte {
  background: var(--weiss);
  border-radius: var(--radius-m);
  padding: 30px;
  align-self: start;
}
.fit__karte h3 {
  font-family: var(--font-headline);
  font-size: var(--fs-h4);
  font-weight: 700;
  margin-bottom: 18px;
}
.fit__karte--ja { border: 1px solid var(--orange); }
.fit__karte--ja h3 { color: var(--orange); }
.fit__karte--nein { border: 1px solid var(--text-dunkel); }
.fit__karte--nein h3 { color: #1E1E1E; }
.fit__liste { display: grid; gap: 14px; }
.fit__liste li {
  position: relative;
  padding-left: 32px;
  color: var(--schwarz);
}
.fit__karte--ja .fit__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 13px;
  background: var(--orange);
  clip-path: polygon(14% 44%, 0 61%, 40% 100%, 100% 16%, 84% 3%, 39% 71%);
}
.fit__karte--nein .fit__liste li::before {
  content: "\00d7"; /* × wie X-Icon der Vorlage */
  position: absolute;
  left: 2px;
  top: -3px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dunkel);
}
.fit__hinweis { margin-top: 22px; font-weight: 600; color: var(--schwarz); }

/* ============ FAQ ============ */
.faq { margin-top: 56px; }
.faq__item { border-bottom: 1px solid var(--sand); }
.faq__frage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  /* Abweichung von Figma (Medium 500): auf User-Wunsch 14.07. Regular,
     damit die Fragen optisch nicht größer als der Fließtext wirken */
  font-weight: 400;
  text-align: left;
  color: var(--text-dunkel);
  transition: color var(--dur-schnell) var(--ease);
}
.faq__frage:hover { color: var(--hng-blau); }
.faq__frage svg { flex: none; transition: transform var(--dur-normal) var(--ease); }
.faq__item.is-open .faq__frage svg { transform: rotate(180deg); }
.faq__antwort {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height var(--dur-slide) var(--ease),
              opacity var(--dur-slide) var(--ease);
}
.faq__item.is-open .faq__antwort { opacity: 1; }
.faq__antwort-inhalt { padding: 0 0 22px; max-width: 820px; }

/* ============ Newsletter ============ */
.newsletter {
  position: relative;
  background: var(--hng-blau);
  color: var(--weiss);
  min-height: 356px;
  overflow: hidden;
}
/* Bild außerhalb des Layoutflusses: bestimmt die Sektionshöhe NICHT mit,
   sondern füllt immer exakt die linke Hälfte (Figma: 720px = 50%) */
.newsletter__bild {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
}
.newsletter__inhalt {
  margin-left: 50%;
  max-width: 553px;   /* Figma: Textbreite */
  padding: 50px 40px 50px 57px; /* Inhalt startet bei x=777 (777-720) */
  box-sizing: content-box;
}
.newsletter__inhalt .eyebrow { font-weight: 500; } /* Figma: Montserrat Medium 14 */
.newsletter__copy { margin-block: 12px 16px; }

.newsletter__form { display: grid; gap: 14px; }
.newsletter__felder {
  display: grid;
  grid-template-columns: 150px 150px 210px; /* Figma: Frame 45/46/47 */
  gap: 14px;
}
.feld input[type="text"],
.feld input[type="email"] {
  width: 100%;
  height: 34px;
  padding: 4px 15px;
  background: rgb(255 255 255 / 0.10);
  border: 1px solid transparent; /* Figma: kein Rahmen */
  border-radius: var(--radius-m); /* Figma: r8 */
  color: var(--weiss);
  transition: border-color var(--dur-schnell) var(--ease),
              background-color var(--dur-schnell) var(--ease);
}
.feld input::placeholder { color: var(--weiss); opacity: 1; font-size: var(--fs-nav); }
.feld input:focus {
  outline: none;
  border-color: var(--weiss);
  background: rgb(255 255 255 / 0.16);
}
.feld input[aria-invalid="true"] { border-color: var(--orange); }

.feld__fehler {
  display: none;
  font-size: var(--fs-nav);
  color: var(--orange);
  font-weight: 600;
  margin-top: 4px;
}
.feld.hat-fehler .feld__fehler { display: block; }

.newsletter__zeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  font-size: var(--fs-nav);
}
.checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.checkbox input {
  appearance: none;
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 2px;
  border: 1px solid #D9D9D9;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-schnell) var(--ease);
}
.checkbox input:checked { background: var(--orange); border-color: var(--orange); }
.checkbox a { text-decoration: underline; }
.newsletter__pflicht { flex: none; }

.form-status {
  font-weight: 600;
  margin-top: 4px;
}
.form-status--erfolg { color: var(--beige); }
.form-status--fehler { color: var(--orange); }

/* ============ Alert-Box NUR fuer die Seiten-Flashmeldung (start.php, .flash-meldung-Wrapper) ============
   Bewusst NICHT global auf .alert/.alert-success, weil dieselben Klassen als reiner
   Text-Inhalt in .form-status (Formular-Erfolg/-Fehler ueberall im Redesign) landen –
   ein globales .alert-Styling wuerde dort eine zweite, verschachtelte Box erzeugen. */
.flash-meldung .alert {
  border-radius: 12px;
  padding: 20px 24px;
  font-size: var(--fs-text);
  line-height: var(--lh-text);
}
.flash-meldung .alert-success {
  background: rgb(0 51 76 / 0.06);
  border: 1px solid var(--hng-blau);
  color: var(--hng-blau);
}
.flash-meldung .alert-danger {
  background: rgb(255 92 0 / 0.06);
  border: 1px solid var(--orange);
  color: var(--orange);
}

/* ============ Footer-Platzhalter (Legacy – bleibt für evtl. Alt-Referenzen) ============ */
.footer-platzhalter {
  min-height: 517px;
  background: var(--beige-60);
}

/* ============================================================
   Footer (User-Vorgabe 19.07., ueberarbeitet 19.07.)
   Orientiert am Entwurf der alten Live-Site (FireShot Figma 161:9),
   angepasst ans neue Design.
   Anpassungen 19.07. (2. Runde):
   - dunklerer Blauton (#061926, aus Screenshot gemessen)
   - Logo +130% (40 -> 92px), keine Trennlinie darunter
   - gesamter Footer 12px
   - Newsletter: Feld einzeilig, Button nur als Icon
   - Datenschutz-Hinweis deutlich kleiner
   - Zusammenarbeit: CTAs mit Kategorie-Ueberschrift, direkt zu den Pop-ups
   ============================================================ */
.footer {
  background: var(--hng-blau);
  color: var(--beige);
  padding-block: 102px 0; /* +30px Abstand ueber dem Logo (User-Vorgabe 19.07.) */
  font-size: 12px; /* gesamter Footer 12px (User-Vorgabe 19.07.) */
}
.footer__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 24px;
}
.footer__marke {
  display: flex;
  justify-content: center;
  padding-bottom: 78px; /* +30px Abstand unter dem Logo (User-Vorgabe 19.07.) */
  /* keine Trennlinie unter dem Logo (User-Vorgabe 19.07.) */
}
.footer__marke img { height: 92px; width: auto; } /* 40px +130% = 92px (User-Vorgabe 19.07.) */

.footer__grid {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr 0.9fr;
  gap: 56px;
  padding-block: 40px 86px; /* +30px Abstand ueber dem Strich der unteren Leiste (User-Vorgabe 19.07.) */
}
.footer__spalte-titel {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sand);
  margin-bottom: 13px; /* -40% (war 22px, User-Vorgabe 19.07.) */
}
.footer__spalte p,
.footer__spalte address {
  font-style: normal;
  font-size: 12px;
  line-height: 1.7;
  color: var(--beige);
}
.footer__spalte a { color: var(--beige); text-decoration: none; }
.footer__spalte a:hover { color: var(--weiss); text-decoration: underline; }

/* Kontakt-Spalte */
.footer__kontakt-zeile { margin-bottom: 14px; }
.footer__kontakt-zeile:last-child { margin-bottom: 0; }

/* Newsletter-Spalte (nutzt die freigegebene .feld-Input-Sprache) */
.footer__newsletter-copy {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 18px;
  color: var(--beige);
}
/* Feld + Icon-Button in EINER Zeile (User-Vorgabe 19.07.) */
.footer__newsletter-form {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 340px;
}
.footer__newsletter-form .feld { flex: 1; }
.footer__newsletter-form .feld__fehler { margin-top: 6px; }
/* Button nur als Icon (quadratisch, orange, wie Vorlage) */
.footer__newsletter-btn {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-m);
  background: var(--orange);
  border: 1px solid var(--orange);
  color: var(--weiss);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-schnell) var(--ease),
              color var(--dur-schnell) var(--ease),
              transform var(--dur-schnell) var(--ease);
}
.footer__newsletter-btn:hover { background: var(--weiss); color: var(--orange); transform: translateY(-1px); }
.footer__newsletter-btn svg { width: 16px; height: 16px; }
/* Datenschutz-Hinweis viel kleiner (User-Vorgabe 19.07.) */
.footer__newsletter-hinweis {
  margin-top: 10px;
  font-size: 8px;
  line-height: 1.4;
  color: rgb(245 240 232 / 0.55);
}
.footer__newsletter-hinweis a { color: rgb(245 240 232 / 0.55); }

/* Zusammenarbeit-Spalte: CTA-Gruppen mit Kategorie-Ueberschrift */
.footer__cta-liste { display: grid; gap: 20px; }
.footer__cta-gruppe { display: grid; gap: 5px; }
.footer__cta-kat {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sand);
}
.footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--beige);
  text-decoration: none;
  transition: gap var(--dur-schnell) var(--ease), color var(--dur-schnell) var(--ease);
}
.footer__cta svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--orange);
  transition: transform var(--dur-schnell) var(--ease);
}
.footer__cta:hover { color: var(--weiss); text-decoration: none; }
.footer__cta:hover svg { transform: translateX(3px); }

/* Social-Spalte */
.footer__social { display: flex; gap: 12px; }
/* Untere Ausrichtung: Alle Grid-Spalten sind gleich hoch (grid stretch).
   In der Zusammenarbeit-Spalte wird die CTA-Liste ans Spaltenende geschoben,
   in der Social-Spalte der "Folgen Sie uns"-Block. Dadurch liegt die
   Icons-Unterkante exakt auf der Unterkante von "Jetzt Beratung vereinbaren"
   (User-Vorgabe 19.07.). */
.footer__spalte { display: flex; flex-direction: column; }
/* Spalte 3 (Zusammenarbeit): CTA-Liste, aber KEINE Social-Icons */
.footer__spalte:has(.footer__cta-liste):not(:has(.footer__social)) .footer__cta-liste { margin-top: auto; }
/* Spalte 4 (mit Social): Social-Titel + Icons als Einheit nach unten */
.footer__social-titel { margin-top: auto; }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-m);
  background: rgb(255 255 255 / 0.08);
  color: var(--beige);
  transition: background-color var(--dur-schnell) var(--ease), color var(--dur-schnell) var(--ease);
}
.footer__social a:hover { background: var(--orange); color: var(--weiss); }
.footer__social svg { width: 18px; height: 18px; }

/* Untere Leiste: Copyright + Rechtslinks */
.footer__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-block: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 12px;
  color: rgb(245 240 232 / 0.7);
}
.footer__rechtslinks { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__rechtslinks a { color: rgb(245 240 232 / 0.7); text-decoration: none; }
.footer__rechtslinks a:hover { color: var(--weiss); text-decoration: underline; }

/* ============ Cookie-Consent-Banner (PrivacyPolicies.com, via consent.js) ============
   Uebernommen aus assets/css/styles.css – dort schon fertig, aber im Redesign-head.php
   nicht mehr verlinkt (nur .footer-legal-links-Farben gehoeren dort noch dazu, das
   entspricht hier .footer__rechtslinks, bereits vorhanden). */
.privacypolicies-com---nb {
  position: fixed !important;
  width: min(560px, calc(100vw - 2rem)) !important;
  right: 1rem !important;
  left: auto !important;
  bottom: 1rem !important;
  border-radius: 16px !important;
  border: 1px solid #dbe4f2 !important;
  background: var(--weiss) !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18) !important;
  z-index: 60 !important;
}
.privacypolicies-com---nb-interstitial-overlay {
  background: transparent !important;
  backdrop-filter: none !important;
}
.privacypolicies-com---nb .cc-nb-main-container { padding: 1rem 1rem 0.9rem !important; }
.privacypolicies-com---nb .cc-nb-title {
  margin: 0 0 0.4rem !important;
  color: #0f172a !important;
  font-size: 1.05rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}
.privacypolicies-com---nb .cc-nb-text {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
}
.privacypolicies-com---nb .cc-nb-buttons-container {
  margin-top: 0.85rem !important;
  display: flex !important;
  gap: 0.45rem !important;
  flex-wrap: wrap !important;
}
.privacypolicies-com---nb button {
  border-radius: 9999px !important;
  font-size: 0.8rem !important;
  padding: 0.45rem 0.85rem !important;
  font-weight: 600 !important;
  border: 1px solid #cdd8ea !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.privacypolicies-com---nb .cc-nb-okagree,
.privacypolicies-com---nb .cc-nb-reject {
  background: var(--hng-blau) !important;
  border-color: var(--hng-blau) !important;
  color: var(--weiss) !important;
}
.privacypolicies-com---nb .cc-nb-changep {
  background: var(--weiss) !important;
  border-color: var(--hng-blau) !important;
  color: var(--hng-blau) !important;
}
.privacypolicies-com---nb .cc-nb-okagree:hover,
.privacypolicies-com---nb .cc-nb-reject:hover {
  background: rgba(0, 51, 76, 0.9) !important;
  border-color: rgba(0, 51, 76, 0.9) !important;
}
.privacypolicies-com---nb .cc-nb-changep:hover {
  background: #f4f8fb !important;
  border-color: var(--hng-blau) !important;
  color: var(--hng-blau) !important;
}
@media (max-width: 640px) {
  .privacypolicies-com---nb {
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    bottom: 0.75rem !important;
  }
}

@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__newsletter-form { max-width: none; }
  .footer__leiste { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   ImmoAbend-Bereich (kunden.html) – Figma 71:2 / Group 137 (2147:875)
   Neuerung: der ImmoAbend kam auf der Kunden-Seite dazu.
   Aufbau wie Figma: vollflaechiges Hintergrundbild links, cremefarbene
   Karte (#FFFBF4, 8px) rechts mit Logo/Wordmark, Overline, Intro,
   Bullet-Liste (beige Kaestchen) und orangem CTA.
   ============================================================ */
.immoabend {
  position: relative;
  isolation: isolate;
  padding-block: 80px;
  min-height: 586px;
}
.immoabend__bild {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  background: var(--hng-blau); /* Fallback bis finaler Bild-Export vorliegt */
}
.immoabend > .container {
  display: flex;
  justify-content: flex-end;
}
.immoabend__karte {
  background: #FFFBF4;
  border-radius: var(--radius-m);
  padding: 34px 38px 36px;
  width: 560px; /* breiter: erste Bullet + Overline einzeilig (User-Vorgabe 19.07.) */
  max-width: 100%;
  /* rechtsbuendig auf einer Linie mit dem Erstgespraech-Kasten (User-Vorgabe 19.07.) */
}
.immoabend__logo {
  height: 36px;
  width: auto;
  margin-bottom: 14px;
}
.immoabend__overline {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 700; /* bold (User-Vorgabe 19.07.) */
  color: var(--orange); /* orange (User-Vorgabe 19.07.) */
  margin-bottom: 8px;
  white-space: nowrap; /* Overline in einer Zeile (User-Vorgabe 19.07.) */
}
.immoabend__intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dunkel);
  margin-bottom: 20px;
}
.immoabend__liste {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 10px;
}
.immoabend__liste li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  font-weight: 600; /* semibold (User-Vorgabe 19.07.) */
  line-height: 1.45;
  color: var(--text-dunkel);
}
/* Kaestchen + Haken exakt aus .erstgespraech__checks uebernommen,
   nur die Farbe geaendert: beiges Kaestchen (#C8BBA8) statt orange,
   Haken in Creme (#FFFBF4) (User-Vorgabe 19.07.). */
.immoabend__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: var(--sand);
}
.immoabend__liste li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 11px;
  height: 6px;
  border: 2px solid #FFFBF4;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}
.immoabend__karte .btn { width: 100%; }

@media (max-width: 900px) {
  .immoabend { padding-block: 56px; }
  .immoabend > .container { justify-content: center; }
  .immoabend__karte { width: 560px; }
  .immoabend__overline { white-space: normal; }
  .immoabend__bild { object-position: center; }
}

.events-intro { padding-block: 80px 40px; }
.events-intro__text {
  max-width: 1040px;
  font-size: var(--fs-text);
  line-height: var(--lh-text); /* wie restliche Seiten (User-Vorgabe 19.07.) */
}
.events-intro__text p { margin-bottom: 0; color: var(--text-dunkel); }
.events-intro__text .events-intro__frage { color: rgb(0 0 0 / 0.95); }
.events-intro__text strong { font-weight: 600; }
.events-intro__h2 { margin-top: 40px; }

.events-liste {
  padding-bottom: 56px;
  display: grid;
  gap: 28px;
}
.event-karte {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Bild : blauer Bereich = 50:50 (User-Vorgabe 19.07.) */
  background: var(--hng-blau);
  border-radius: var(--radius-l);
  overflow: hidden;
  color: var(--beige);
}
.event-karte__medien { position: relative; min-height: 260px; }
.event-karte__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}
.event-karte__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  background: var(--orange);
  color: var(--weiss);
  font-size: var(--fs-klein);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px 16px;
  border-radius: var(--radius-m);
}
.event-karte__inhalt { padding: 34px 40px; }
.event-karte__kategorie {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--weiss);
  margin-bottom: 10px;
}
.event-karte__eckdaten {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--orange);
  line-height: 1.3; /* einheitlich fuer Datum/Uhrzeit/Titel (User-Vorgabe 19.07.) */
  margin-bottom: 12px;
}
/* Datum, Uhrzeit und Titel in gleicher Schriftgroesse + Zeilenabstand (User-Vorgabe 19.07.) */
.event-karte__eckdaten .event-karte__datum,
.event-karte__eckdaten .event-karte__zeit,
.event-karte__eckdaten .event-karte__titel { font-size: 22px; line-height: 1.3; display: block; }
.event-karte__eckdaten .event-karte__titel { margin-top: 0; }
.event-karte__dauer {
  font-size: var(--fs-text);
  font-weight: 600;
  color: var(--beige);
  margin-bottom: 12px;
}
.event-karte__text {
  font-size: var(--fs-text);
  line-height: 1.6;
  color: rgb(245 240 232 / 0.85);
  margin-bottom: 24px;
  max-width: 480px;
}
.event-karte__objektdaten {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1;
  background: rgb(0 51 76 / 0.85);
  border-radius: var(--radius-m);
  padding: 10px 14px;
  font-size: var(--fs-klein);
  line-height: 1.5;
  color: var(--weiss);
  list-style: none;
  margin: 0;
}
.event-karte__objektdaten li { padding-left: 12px; position: relative; }
.event-karte__objektdaten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--orange);
}

.events-hinweis {
  text-align: center;
  font-size: var(--fs-klein);
  color: rgb(0 0 0 / 0.5);
  padding-bottom: 80px;
}

/* "Das erwartet Sie bei unseren Events" */
.events-erwartung { background: var(--beige-60); }
.events-erwartung__grid {
  display: grid;
  grid-template-columns: 459px minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.events-erwartung__bild {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: var(--radius-l);
}
.events-erwartung__liste {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  list-style: none;
  padding: 0;
}
.events-erwartung__liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-text);
  font-weight: 500;
  color: var(--text-dunkel);
}
.events-erwartung__liste svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--hng-blau);
}

@media (max-width: 1100px) {
  .event-karte { grid-template-columns: 1fr 1fr; } /* 50:50 auch hier (User-Vorgabe 19.07.) */
  .events-erwartung__grid { grid-template-columns: 1fr; gap: 40px; }
  .events-erwartung__bild { height: 280px; }
}
@media (max-width: 720px) {
  .event-karte { grid-template-columns: 1fr; }
  .event-karte__medien { min-height: 200px; }
  .event-karte__inhalt { padding: 26px 24px; }
  .events-intro { padding-block: 56px 32px; }
}

/* ============ Responsive (abgeleitet) ============ */
@media (max-width: 1100px) {
  .header__inner { padding-inline: 24px; gap: 16px; }
  .nav-sekundaer { display: none; } /* TODO: Mobile-Menü folgt (kein Figma-Frame) */
  .hero { min-height: 720px; }
  .newsletter__bild { position: static; width: 100%; height: 240px; }
  .newsletter__inhalt { margin-left: 0; padding: 40px 24px; }
}

@media (max-width: 720px) {
  .nav-pill a { padding: 0 10px; }
  .stats { gap: 28px 36px; margin-top: 52px; }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .timeline__station::after { display: none; }
  .slide-karte { grid-template-columns: 1fr; align-items: start; }
  .marken-grid,
  .fit__grid,
  .cta__grid { grid-template-columns: 1fr; }
  .newsletter__felder { grid-template-columns: 1fr; }
  .newsletter__zeile { flex-direction: column; }
  .social-sidebar { display: none; } /* TODO: Mobile-Verhalten abstimmen */
}

/* ============================================================
   KUNDEN-Seite: zusätzliche Komponenten
   ============================================================ */

/* ---- Marken-Tabs (Figma: Rectangle 34/35 + Slides) ---- */
.marken-tabs__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--hng-blau);
  border-radius: var(--radius-l);
  padding: 12px;
  margin-top: 48px;
}
.marken-tabs__tab {
  flex: 1;
  display: grid;
  place-items: center;
  height: 46px;
  border-radius: var(--radius-l); /* Figma: Rectangle 35, r10 */
  transition: background-color var(--dur-normal) var(--ease);
}
.marken-tabs__tab:hover { background: rgb(255 255 255 / 0.08); }
.marken-tabs__tab[aria-selected="true"] { background: var(--pill-aktiv); }
.marken-tabs__tab img { height: 24px; width: auto; }
/* Negativ-Logo sichtbar, Positiv versteckt – im aktiven Tab umgekehrt */
.marken-tabs__tab .logo-positiv { display: none; }
.marken-tabs__tab[aria-selected="true"] .logo-negativ { display: none; }
.marken-tabs__tab[aria-selected="true"] .logo-positiv { display: block; }

.marken-tabs__panel { display: none; margin-top: 61px; }
.marken-tabs__panel.is-aktiv {
  display: grid;
  grid-template-columns: 558px minmax(0, 1fr);
  gap: 37px;
  align-items: start;
  animation: panelEin var(--dur-slide) var(--ease);
}
@keyframes panelEin {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.marken-tabs__bild {
  position: relative;
  isolation: isolate;
  min-height: 442px; /* Figma */
  border-radius: var(--radius-m);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 40px 36px;
  color: var(--weiss);
}
.marken-tabs__bild img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--dunkelgrau);
}
/* Kein CSS-Overlay: Die gelieferten Marken-Bilder bringen die Abdunklung bereits mit */
.marken-tabs__caption { font-weight: 500; margin-bottom: 20px; }
.marken-tabs__bild .btn { align-self: flex-start; }

.marken-tabs__liste { display: grid; gap: 23px; }
.produkt-item {
  background: var(--beige-60);
  border-radius: var(--radius-m);
  padding: 20px 25px 24px;
}
.produkt-item h3 {
  font-family: var(--font-text);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hng-blau);
  margin-bottom: 5px;
}
.produkt-item p { color: rgb(0 0 0 / 0.95); white-space: pre-line; }

/* ---- Vorteils-Karten (Figma: Frame 39ff) ---- */
.vorteile { background: var(--beige-60); }
.vorteile__intro { max-width: 1041px; margin-top: 26px; }
.vorteile__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px; /* User-Vorgabe 14.07.: weniger Abstand (vorher 42px), Karten dadurch breiter */
  margin-top: 58px;
}
.vorteil-karte {
  background: var(--weiss);
  border-radius: 13px; /* Figma: Frame 39 */
  padding: 25px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.05); /* User-Vorgabe 14.07.: ganz leichter Schlagschatten */
}
.vorteil-karte__nr {
  display: grid;
  place-items: center;
  width: 52px;
  height: 50px;
  background: var(--orange);
  border-radius: var(--radius-s);
  color: var(--weiss);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px; /* User-Vorgabe 14.07.: gleicher Abstand wie Headline → Fließtext */
}
.vorteil-karte h3 {
  font-family: var(--font-text);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase; /* Figma 147:237: Montserrat Bold, Versalien */
  line-height: 1.2; /* User-Vorgabe 14.07.: engerer Zeilenabstand (Figma: 24px bei 20px) */
  color: var(--hng-blau);
  min-height: 48px;
  margin-bottom: 15px;
}
.vorteil-karte p { color: rgb(0 0 0 / 0.95); }
.vorteil-karte p strong { font-weight: 600; } /* Figma: SemiBold-Segmente im Fließtext */
.punkte {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.punkte li {
  position: relative;
  padding-left: 18px;
  color: rgb(0 0 0 / 0.95);
}
.vorteil-karte .punkte li { font-weight: 600; } /* Figma 147:235: Aufzählungen Montserrat SemiBold */
.punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
/* CTA über gesamte Grid-Breite (Figma 2003:1318: w=1043) */
.vorteile__cta { margin-top: 31px; }
.vorteile__cta .btn { display: flex; width: 100%; }

/* ---- Timeline mit 5 Stationen ---- */
.timeline--5 { grid-template-columns: repeat(5, 1fr); }

/* ---- Benefits-Grid ("Warum Immobilien", Figma Frame 10-15) ---- */
.benefits__intro { max-width: 700px; margin-top: 26px; }
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 25px; /* Figma: Zeilen 22px, Spalten 25px */
  margin-top: 28px;
}
.benefit {
  background: var(--beige-60); /* Figma: #F5F0E8 / 60% */
  border-radius: var(--radius-m);
  padding: 20px 25px 25px;
}
.benefit__icon {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}
.benefit h3 {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase; /* User-Vorgabe 14.07.: Versalien */
  line-height: 1.2; /* Figma: 24px bei 20px, immer zweizeilig */
  color: var(--hng-blau);
  min-height: 48px;
  margin-bottom: 10px;
}
.benefit p { color: rgb(0 0 0 / 0.95); }

/* ---- Bildband ---- */
.bildband {
  width: 100%;
  height: 615px; /* Figma */
  object-fit: cover;
  background: var(--basisimmo);
}

/* ---- Zahlen-Sektion mit Zitat ---- */
.zahlen__grid {
  display: grid;
  grid-template-columns: minmax(0, 446fr) minmax(0, 569fr);
  gap: 26px;
  align-items: start;
}
.zahlen__zitat {
  background: var(--beige-60);
  border-radius: var(--radius-m);
  padding: 20px;
  margin-top: 26px;
  color: var(--schwarz);
}
.zahlen__zitat footer { font-weight: 700; margin-top: 8px; }
.zahlen__panel {
  background: var(--beige-60);
  border-radius: var(--radius-m);
  padding: 38px;
  display: grid;
  gap: 0;
}
.zahlen__zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding-block: 20px;
}
.zahlen__zeile + .zahlen__zeile { border-top: 1px solid var(--sand); }
/* Innenabstand oben/unten = 38px, identisch zu links/rechts (User-Vorgabe 14.07.) */
.zahlen__zeile:first-child { padding-top: 0; }
.zahlen__zeile:last-child { padding-bottom: 0; }
.zahlen__wert { text-align: left; }
.zahlen__zeile:nth-child(odd) .zahlen__wert { order: 2; }
.zahlen__zeile:nth-child(odd) .zahlen__text { order: 1; }
.zahlen__wert strong {
  display: block;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: var(--hng-blau);
}
.zahlen__wert span {
  display: block;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--hng-blau);
  margin-top: 8px;
}
.zahlen__text { color: var(--schwarz); }

/* ---- Erstgespräch-Sektion mit Formular-Karte ---- */
.erstgespraech { background: var(--beige-60); }
.erstgespraech__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 459px;
  gap: 120px;
  align-items: start;
}
.erstgespraech__checks {
  display: grid;
  gap: 6px;
  margin-top: 30px;
}
.erstgespraech__checks li {
  position: relative;
  padding-left: 28px;
  font-weight: 600;
  color: var(--schwarz);
}
.erstgespraech__checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: var(--orange);
}
.erstgespraech__checks li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 11px;
  height: 6px;
  border: 2px solid var(--weiss);
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

.form-karte {
  background: var(--weiss);
  border-radius: var(--radius-l);
  padding: 25px 39px 37px;
}
.form-karte h3 {
  font-family: var(--font-text);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase; /* User-Vorgabe 14.07.: Versalien */
  color: var(--hng-blau);
}
.form-karte__hinweis { margin: 4px 0 18px; color: rgb(0 0 0 / 0.95); }
.form-karte form { display: grid; gap: 12px; }
.form-karte__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-karte .feld input[type="text"],
.form-karte .feld input[type="email"],
.form-karte .feld input[type="tel"],
.form-karte .feld select {
  width: 100%;
  height: 34px;
  padding: 4px 15px;
  background: rgb(200 187 168 / 0.20); /* Figma: #C8BBA8/20 */
  border: 1px solid #D9D9D9;
  border-radius: var(--radius-l);
  color: var(--text-dunkel);
  font-size: var(--fs-nav);
  font-weight: 600;
  transition: border-color var(--dur-schnell) var(--ease);
}
.form-karte .feld input::placeholder { color: rgb(85 82 82 / 0.75); opacity: 1; }
.form-karte .feld select { appearance: none; color: rgb(85 82 82 / 0.75); }
.form-karte .feld select:valid { color: var(--text-dunkel); }
.form-karte .feld { position: relative; }
.form-karte .feld--select::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 14px;
  width: 8px;
  height: 8px;
  border: 1.5px solid #555252;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  pointer-events: none;
}
.form-karte .feld input:focus,
.form-karte .feld select:focus {
  outline: none;
  border-color: var(--hng-blau);
}
.form-karte .checkbox { color: rgb(0 0 0 / 0.95); font-size: var(--fs-nav); }
/* Datenschutz / News / *Pflichtfelder rücken enger zusammen (User-Vorgabe 14.07.);
   Grid-Gap 12px wird per negativem Margin auf 4px reduziert */
.form-karte .feld--checkbox + .checkbox { margin-top: -8px; }
.form-karte .checkbox + .form-karte__pflicht { margin-top: -8px; }
.form-karte__pflicht {
  display: block;
  text-align: right;
  font-size: var(--fs-nav);
  color: rgb(0 0 0 / 0.95);
}
.form-karte .form-status--erfolg { color: var(--hng-blau); }

@media (max-width: 1100px) {
  .marken-tabs__panel.is-aktiv { grid-template-columns: 1fr; }
  .vorteile__grid, .benefits__grid { grid-template-columns: 1fr 1fr; }
  .zahlen__grid, .erstgespraech__grid { grid-template-columns: 1fr; gap: 40px; }
  .timeline--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .marken-tabs__leiste { flex-wrap: wrap; gap: 6px; }
  .marken-tabs__tab { flex: 1 1 45%; }
  .marken-tabs__bild { min-height: 320px; }
  .vorteile__grid, .benefits__grid { grid-template-columns: 1fr; }
  .form-karte__zeile { grid-template-columns: 1fr; }
  .timeline--5 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   PROJEKTENTWICKLER-Seite (Figma 158:102) – ergänzt 14.07.2026
   ============================================================ */

/* Hero: KEIN CSS-Overlay – Abdunklung ist im gelieferten Bild eingebrannt
   (wie Hero KUNDEN; Figma-Overlay Rectangle 2 / 283:1314 entfällt, 14.07.2026) */

/* ---- Sektion "Wir kennen Ihren Alltag" ---- */
.alltag__text { max-width: 1040px; margin-top: 28px; }
.alltag__text + .alltag__text { margin-top: 22px; } /* Figma: Leerzeile im Textblock */
.alltag__text strong { font-weight: 600; } /* Figma 177:242: SemiBold-Segmente */
/* Orange Schlusszeile (283:1334): Lora Bold Italic 18/22 */
.schluss-akzent {
  margin-top: 28px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-style: italic;
  font-size: 18px;
  line-height: 22px;
  color: var(--orange);
}

/* ---- Unsere Produktwelt (Tabs) ---- */
.produktwelt { background: var(--beige-60); } /* Rectangle 58: #F5F0E8/60 */
.produktwelt__intro { margin-top: 28px; }

/* Tab-Leiste (Group 36): Bar #00334C r10, aktiver Tab #FFFBF4 r8,
   Labels Montserrat Bold 20 Versalien (283:1400) */
.produkt-tabs__leiste {
  display: flex;
  margin-top: 34px;
  background: var(--hng-blau);
  border-radius: var(--radius-l);
  padding: 9px 8px;
}
.produkt-tabs__tab {
  flex: 1;
  padding: 9px 10px;
  border-radius: var(--radius-m);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.05em; /* Figma: 1px bei 20px */
  text-transform: uppercase;
  color: var(--weiss);
  transition: background-color var(--dur-schnell) var(--ease),
              color var(--dur-schnell) var(--ease);
}
.produkt-tabs__tab:hover { background: rgb(255 255 255 / 0.08); }
.produkt-tabs__tab[aria-selected="true"] {
  background: var(--pill-aktiv);
  color: var(--hng-blau);
}

/* Panel: Bild links (r8 links, 283:1390) + weiße Karte (r8 rechts, 283:1389)
   bilden optisch einen zusammenhängenden Block */
.produkt-tabs__panel { display: none; margin-top: 18px; }
.produkt-tabs__panel.is-aktiv { display: flex; }
.produkt-tabs__bild {
  flex: 0 0 523px;
  width: 523px;
  height: 330px;
  object-fit: cover;
  border-radius: var(--radius-m) 0 0 var(--radius-m);
  background: var(--sand); /* Fallback bis Bild-Export vorliegt */
}
.produkt-tabs__karte {
  flex: 1;
  min-height: 330px;
  background: var(--weiss);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: 72px 42px 40px 84px; /* Figma: Text ab x=803 (Bildkante 719 + 84) */
}
/* Karten-Headline (283:1392): Montserrat Bold 40/44, ls 0.5px, Versalien */
.produkt-tabs__karte h3 {
  font-family: var(--font-text);
  font-weight: 700;
  /* Figma zeigt 40px – auf User-Wunsch 16.07. auf 34px verkleinert,
     analog zur freigegebenen Careimmo-Seite (.care-reihe__titel: 34/38). */
  font-size: 34px;
  line-height: 38px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--hng-blau);
}
.produkt-tabs__karte p {
  margin-top: 35px;
  max-width: 391px;
  font-weight: 500;
  line-height: 20px;
  color: rgb(0 0 0 / 0.95);
}

/* ---- 360° Vertrieb: Vier Säulen ---- */
.saeulen__intro { margin-top: 21px; max-width: 1040px; }
.saeulen__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 38px; /* Figma: Karten 501px, Abstände 30/38 */
  margin-top: 28px;
}
.saeule-karte {
  background: var(--beige-60); /* Rectangle 6/16/17/59: #F5F0E8/60 */
  border-radius: 13px;
  padding: 26px 31px 30px;
}
.saeule-karte__kopf {
  display: flex;
  align-items: center;
  gap: 18px;
}
.saeule-karte__kopf img { flex-shrink: 0; }
/* Säulen-Headline (177:477): Montserrat SemiBold 20/24 Versalien */
.saeule-karte h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--hng-blau);
}
.saeule-karte__punkte {
  display: grid;
  gap: 9px;
  margin-top: 23px;
}
.saeule-karte__punkte li {
  position: relative;
  padding-left: 25px;
  font-weight: 500; /* Figma 177:467: Montserrat Medium */
  line-height: 22px;
  color: var(--text-dunkel);
}
/* Häkchen dunkelblau (Check-Instanzen, Stroke #00334C) */
.saeule-karte__punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background: var(--hng-blau);
  clip-path: polygon(14% 44%, 0 61%, 40% 100%, 100% 16%, 84% 3%, 39% 71%);
}

/* Ergebnis-Band (Rectangle 60 + Group 84) */
.ergebnis-band {
  display: flex;
  align-items: center;
  gap: 21px;
  margin-top: 30px;
  min-height: 78px;
  background: var(--beige-60);
  border-radius: 13px;
  padding: 15px 31px;
}
.ergebnis-band img { flex-shrink: 0; }
/* Überschrift (502:1016): Montserrat SemiBold 20 Versalien Orange */
.ergebnis-band h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--orange);
  flex-shrink: 0;
}
.ergebnis-band p {
  margin-left: 35px; /* Figma: Text ab x=400 im Band */
  font-weight: 500;
  line-height: 22px;
  color: var(--text-dunkel);
}

/* ---- Responsive Projektentwickler ---- */
@media (max-width: 1100px) {
  .produkt-tabs__panel.is-aktiv { flex-direction: column; }
  .produkt-tabs__bild {
    flex-basis: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 523 / 330;
    border-radius: var(--radius-m) var(--radius-m) 0 0;
  }
  .produkt-tabs__karte {
    border-radius: 0 0 var(--radius-m) var(--radius-m);
    min-height: 0;
    padding: 40px;
  }
  .produkt-tabs__tab { font-size: 16px; }
  .ergebnis-band { flex-wrap: wrap; }
  .ergebnis-band p { margin-left: 0; }
}
@media (max-width: 720px) {
  .saeulen__grid { grid-template-columns: 1fr; }
  .produkt-tabs__leiste { flex-wrap: wrap; gap: 4px; }
  .produkt-tabs__tab { flex: 1 1 45%; padding-block: 12px; }
  .produkt-tabs__karte { padding: 28px 24px; }
  .produkt-tabs__karte h3 { font-size: 28px; line-height: 32px; }
  .produkt-tabs__karte p { margin-top: 20px; }
}

/* CTA Projektentwickler: breitere Headline-Spalte, damit die H2 zweizeilig bleibt
   (Figma: Headline 526px links, Text 376px rechts; User-Korrektur 15.07.) */
.cta--projekt .cta__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 720px) {
  .cta--projekt .cta__grid { grid-template-columns: 1fr; }
}

/* ==================================================================
   KONZEPTIMMO (15.07.) – Marken-Seite
   ================================================================== */

/* 15.07.: Hero-Overlay (Figma Rectangle 2) auf Kundenwunsch entfernt -
   geliefertes Hero-Bild ist bereits abgedunkelt */
/* Markenlogo über der Headline (Figma 158:504, 294x44, Abstand 36px) */
.hero__marke {
  display: block;
  width: 294px;
  height: 44px;
  margin-bottom: 36px;
}

/* Beige Sektion (Rectangle 15/39: #F5F0E8 zu 60 %) */
.section--beige { background: var(--beige-60); }

/* Intro-Absätze Produktwelt/Netzwerk (Figma: max 1040, Abstand zur H2 ~32px) */
.produktwelt-intro,
.netzwerk-intro { margin-top: 32px; }
.netzwerk-intro strong { font-weight: 600; } /* 15.07.: semibold statt bold (Kundenwunsch) */

/* ---------- Objekttyp-Reihen (Bestand / Neubau / Denkmal) ----------
   Beige Panels mit gestaffeltem linken Versatz (Figma: 84 / 0 / 142 px),
   Bild liegt immer an der Container-Linken und überlappt das Panel. */
.objekttyp {
  position: relative;
  min-height: 409px;
  background: var(--beige-60);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  margin-top: 48px; /* Abstand Intro -> erste Reihe (Figma: Text endet 1330, Reihe 1379) */
}
.objekttyp + .objekttyp { margin-top: 25px; } /* Figma: 25/26px */
.objekttyp--bestand  { margin-left: 84px; }
.objekttyp--neubau   { margin-left: 0; border-radius: var(--radius-m); }
.objekttyp--denkmal  { margin-left: 142px; }
.objekttyp__bild {
  position: absolute;
  top: 0;
  height: 100%;
  width: 561px;
  object-fit: cover;
  border-radius: var(--radius-m) 0 0 var(--radius-m);
}
.objekttyp--bestand  .objekttyp__bild { left: -84px; }
.objekttyp--neubau   .objekttyp__bild { left: 0; }
.objekttyp--denkmal  .objekttyp__bild { left: -142px; }
/* Inhalt-Spalte: beginnt einheitlich 618px hinter der Container-Linken */
.objekttyp__inhalt {
  max-width: 358px;
  padding: 54px 0 40px;
}
/* 15.07.: Der Passt-Kasten ist breiter als die Textspalte und richtet sich
   an der Panelkante aus -> Spaltenbegrenzung fuer ihn aufheben */
.objekttyp__inhalt { max-width: none; }
.objekttyp__logo,
.objekttyp__titel,
.objekttyp__inhalt > p { max-width: 358px; }
.objekttyp--bestand  .objekttyp__inhalt { margin-left: 534px; }
.objekttyp--neubau   .objekttyp__inhalt { margin-left: 618px; }
.objekttyp--denkmal  .objekttyp__inhalt { margin-left: 476px; }
.objekttyp__logo { display: block; height: 25px; width: auto; }
/* Titel: Montserrat Bold, Versalien, Schwarz (Figma 179:906: 40px; 15.07. auf Kundenwunsch 34px) */
.objekttyp__titel {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--schwarz);
  margin-top: 12px;
}
.objekttyp__inhalt > p { margin-top: 14px; }
/* „Passt zu Ihnen"-Kasten (15.07., Figma 426:1077/1072 + 425:987):
   2px-Rahmen #FF5C00, r3, 400px, Text-Innenabstand 10/17,
   oranger Haken als Badge auf der linken oberen Ecke (-8/-8) */
.objekttyp__passt {
  position: relative;
  /* 15.07. (Kundenwunsch): Kasten endet rechts mit demselben Innenabstand zur
     Panelkante (41px), wie er links zum Bild hat. Ersetzt die Figma-Breite 400px. */
  width: auto;
  margin-right: 41px;
  margin-left: -16px; /* Figma: Kasten beginnt 16px links der Textspalte */
  margin-top: 34px;   /* Figma: Textende 1628, Kasten 1662 */
  padding: 10px 17px;
  border: 2px solid var(--orange);
  border-radius: 3px;
}
.objekttyp__passt::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: var(--orange);
}
.objekttyp__passt::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -4px;
  width: 11px;
  height: 6px;
  border: 2px solid var(--weiss);
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}
/* 15.07.: Einleitungssatz in Versalien, eigene Zeile (Kundenwunsch) */
.objekttyp__passt strong {
  font-weight: 700;
  text-transform: uppercase;
}

/* ---------- Bausteine-Slider (helle Variante auf beige) ---------- */
.slider--bausteine { color: var(--text-dunkel); }
.bausteine-titel { margin-top: 76px; } /* Figma: Intro endet 3181, Titel 3257 */
.slider--bausteine .slider__viewport { margin-top: 32px; }
/* Nummern-Kreise statt Icons: aktiv #00334C voll, inaktiv 50 % (Figma DIV-295/311) */
.timeline__nummer {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(0 51 76 / 0.5);
  border: none;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--weiss);
  cursor: pointer;
  transition: background-color var(--dur-normal) var(--ease),
              transform var(--dur-schnell) var(--ease);
}
.timeline__nummer:hover { transform: scale(1.05); }
.timeline__station.is-erreicht .timeline__nummer { background: var(--hng-blau); }
/* Verbindungslinien: durchgezogen #C8BBA8, 3px (Figma Line 7-10) */
.slider--bausteine .timeline__station::after {
  border-top: 3px solid var(--sand);
  top: 39px;
}
.slider--bausteine .timeline__label { color: var(--hng-blau); }
/* Karte: weiß, r8, Rahmen #C8BBA8 (Figma DIV-134), Innenabstand 32/36 */
.slide-karte--baustein {
  border: 1px solid var(--sand);
  padding: 32px 36px 30px;
}
.slide-karte--baustein .h3 { margin-left: 4px; } /* Figma: Titel x332, Text x328 */
.slide-karte--baustein > p { max-width: 983px; }

/* ---------- Was Sie wissen sollten ---------- */
.wissen__grid {
  display: grid;
  grid-template-columns: 364px minmax(0, 1fr);
  gap: 50px; /* Figma: Bild endet 660, Text ab 710 */
  align-items: start;
}
.wissen__bild {
  width: 364px;
  /* 15.07. (Kundenwunsch): Hoehe von Figma-348px auf 358px angepasst,
     damit Bild und Textspalte buendig auf gleicher Hoehe enden */
  height: 358px;
  object-fit: cover;
  border-radius: var(--radius-m);
}
.wissen__grid .h2 { max-width: 682px; }
.wissen__copy { margin-top: 20px; max-width: 626px; }
.wissen__copy strong { font-weight: 600; }
/* 15.07.: Aufzählungspunkte ergänzt (Kundenwunsch); ul.-Selektor nötig wegen ul[class]-Reset */
ul.wissen__liste {
  list-style: disc;
  padding-left: 22px;
  margin-top: 8px;
}
ul.wissen__liste li + li { margin-top: 2px; }

/* ---------- Responsive KONZEPTIMMO ---------- */
@media (max-width: 1100px) {
  .objekttyp,
  .objekttyp--bestand,
  .objekttyp--denkmal { margin-left: 0; border-radius: var(--radius-m); }
  .objekttyp__bild,
  .objekttyp--bestand .objekttyp__bild,
  .objekttyp--denkmal .objekttyp__bild { position: static; width: 100%; height: 300px; border-radius: var(--radius-m) var(--radius-m) 0 0; }
  .objekttyp__inhalt,
  .objekttyp--bestand .objekttyp__inhalt,
  .objekttyp--neubau .objekttyp__inhalt,
  .objekttyp--denkmal .objekttyp__inhalt { margin-left: 0; max-width: none; padding: 28px 25px 32px; }
  .wissen__grid { grid-template-columns: 1fr; }
  .wissen__bild { width: 100%; height: auto; aspect-ratio: 364 / 348; }
}
@media (max-width: 720px) {
  .hero__marke { width: 220px; height: 33px; }
  .objekttyp__titel { font-size: 30px; }
  .objekttyp__passt { margin-left: 0; margin-right: 24px; } /* 15.07.: Kasten im schmalen Layout in der Spalte */
}

/* =====================================================================
   CAREIMMO-SEITE (Figma 158:646) – 15.07.2026
   Aufbau: Hero → Warum (Chart) → Produktwelt (2 Reihen) → Sind/Nicht-Karte
           → Kennenlern-Slider → Vorteile (Masonry) → Bild-Band → Formular
   ===================================================================== */

/* ---------- Hero ---------- */
/* 15.07.: Kein CSS-Overlay – geliefertes Bild ist bereits abgedunkelt (wie Konzeptimmo) */
.hero--careimmo .hero__marke { width: 210px; height: 44px; }
/* Greenimmo-Logo ist schmaler als das Konzeptimmo-Default (Figma 426:1082: 244x44).
   Ohne Override erbt es width:294px -> das SVG skaliert per preserveAspectRatio auf
   die Höhe und zentriert sich, wodurch links ~25px Leerraum entstehen und die
   Wortmarke nicht auf der Textlinie sitzt (Kundenkorrektur 16.07.).
   width:auto statt fester 244px, weil das SVG-Seitenverhältnis (139:25.3 = 5.494)
   nicht exakt dem Figma-Rahmen 244x44 (5.545) entspricht: bei fester Breite blieben
   2px Leerraum links. Mit auto bestimmt das SVG selbst die Breite (241.7px) und
   die Wortmarke schlägt exakt an der Content-Linie an. */
.hero--greenimmo .hero__marke { width: auto; height: 44px; }
/* User-Vorgabe 15.07.: alle vier Stats in EINER Zeile (Labels zweizeilig per <br> im HTML).
   Figma-Spalten: 201 / 408 / 630 / 842 -> Abstaende kleiner als der Default-Flex-Gap. */
.hero--careimmo .stats { flex-wrap: nowrap; gap: 0; }
.hero--careimmo .stats li { flex: 1 1 0; min-width: 0; padding-right: 24px; }

/* ---------- Warum Pflegeimmobilien (Figma 158:746 ff.) ---------- */
.warum__grid {
  display: grid;
  grid-template-columns: 572px 442px;
  justify-content: space-between;
  gap: 26px;
  align-items: start;
}
.warum__copy { margin-top: 25px; max-width: 572px; }
.warum__copy strong { font-weight: 600; } /* SemiBold-Segmente laut Figma */

/* Balkendiagramm (Figma 213:1293) */
.chart {
  background: var(--weiss);
  border: 1px solid var(--sand);
  border-radius: var(--radius-m);
  padding: 34px 27px 24px;
  margin: 0;
}
.chart__titel {
  font-size: var(--fs-text);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}
.chart__reihen { display: grid; gap: 15px; margin-top: 24px; }
.chart__reihe { display: flex; align-items: center; gap: 16px; }
.chart__spur {
  position: relative;
  flex: 1;
  height: 34px;
  border: 1px solid var(--sand);
  border-radius: 15px;
}
.chart__balken {
  position: absolute;
  inset: -1px auto -1px -1px;
  width: var(--breite);
  display: flex;
  align-items: center;
  padding-left: 16px;
  border-radius: 15px;
}
.chart__balken--basis    { background: var(--hng-blau); }
.chart__balken--prognose { background: var(--orange); }
.chart__jahr {
  font-size: var(--fs-text);
  font-weight: 600;
  color: var(--weiss);
  white-space: nowrap;
}
.chart__wert {
  flex: none;
  min-width: 61px;
  font-size: var(--fs-text);
  font-weight: 700;
  color: var(--orange);
}
.chart__wert--basis { color: var(--hng-blau); } /* 2023 = Ist-Wert, laut Figma blau */
.chart__quelle {
  margin-top: 20px;
  font-size: 10px;
  color: var(--text-dunkel);
}

/* Zitat-Band (Figma 441:1384) */
.warum__zitat {
  margin-top: 38px;
  padding: 17px 38px;
  background: var(--beige-60);
  border-radius: var(--radius-m);
  font-style: italic;
  font-weight: 600;
  color: var(--hng-blau);
  line-height: 22px;
}

/* ---------- Produktwelt: zwei Reihen (Figma 426:1092/1095) ---------- */
.produktwelt-care { background: var(--beige-60); }
.care-reihen { margin-top: 46px; }
.care-reihe {
  position: relative;
  display: flex;
  align-items: stretch; /* Bild + Panel bilden EINEN Block auf gleicher Höhe */
}
.care-reihe + .care-reihe { margin-top: 32px; }
.care-reihe__bild {
  flex: none;
  width: 561px;
  height: auto;
  min-height: 409px;
  object-fit: cover;
  border-radius: var(--radius-m) 0 0 var(--radius-m);
}
.care-reihe__inhalt {
  flex: 1;
  min-height: 409px;
  background: var(--weiss);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  padding: 36px 40px 36px 36px;
}
.care-reihe__titel {
  font-family: var(--font-text);
  font-size: 34px; /* Figma zeigt 40px - auf User-Wunsch 15.07. verkleinert (analog Konzeptimmo) */
  line-height: 38px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hng-blau);
}
.care-reihe__lead {
  margin-top: 16px;
  font-weight: 600;
  color: var(--schwarz);
  max-width: 442px;
}
.care-punkte { display: grid; gap: 10px; margin-top: 22px; }
.care-punkte li {
  position: relative;
  padding-left: 18px;
  line-height: 22px;
}
/* User-Vorgabe 15.07.: Bullet Points statt der Figma-Haken (274:1155) */
.care-punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sidebar-bg);
}

/* ---------- Was Sie sind / nicht sind (Figma 274:1237) ---------- */
.sind-karte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  margin-top: 36px;
  padding: 28px 33px 32px;
  background: var(--weiss);
  border-radius: var(--radius-m);
}
.sind-karte__titel {
  font-family: var(--font-text);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--orange);
}
.sind-karte__titel em { font-style: normal; } /* "nicht" laut Figma ebenfalls Versalien */
.sind-liste { display: grid; gap: 8px; margin-top: 22px; }
.sind-liste li {
  position: relative;
  padding-left: 26px;
  font-weight: 600;
  color: var(--schwarz);
  line-height: 24px;
}
/* User-Vorgabe 15.07.: "Was Sie sind" = Haken, "Was Sie nicht sind" = Kreuz (in Figma ohne Symbole) */
.sind-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  border-radius: 5px;
}
.sind-liste--ja li::before   { background: var(--sidebar-bg); }
.sind-liste--nein li::before { background: var(--orange); }
/* Haken */
.sind-liste--ja li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 11px;
  height: 6px;
  border: 2px solid var(--weiss);
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}
/* Kreuz */
.sind-liste--nein li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;  /* deckungsgleich mit dem Badge -> Kreuz sitzt zwangslaeufig mittig */
  height: 17px;
  background:
    linear-gradient(var(--weiss), var(--weiss)) center/9px 1.8px no-repeat,
    linear-gradient(var(--weiss), var(--weiss)) center/1.8px 9px no-repeat;
  transform: rotate(45deg);
}

/* CTA "Jetzt starten" ueber volle Breite (User-Vorgabe 15.07.) */
.care-cta { display: flex; width: 100%; margin-top: 31px; }

/* ---------- Vorteile Masonry (Figma 283:1295-1312) ---------- */
.vorteile-care__intro { margin-top: 22px; max-width: 727px; font-weight: 500; }
.vorteile-care {
  display: grid;
  grid-template-columns: repeat(3, 322px);
  justify-content: space-between;
  gap: 37px;
  margin-top: 26px;
  align-items: start;
}
.vorteile-care__spalte { display: grid; gap: 28px; align-content: start; }
.care-vorteil {
  background: var(--beige-60);
  border-radius: var(--radius-m);
  padding: 20px 25px 24px;
}
.care-vorteil__titel {
  font-family: var(--font-headline);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.5px; /* User-Vorgabe 15.07. */
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hng-blau);
}
.care-vorteil p { margin-top: 12px; line-height: 22px; }

/* ---------- Bild-Band (Figma 177:609) ---------- */
.care-band { width: 100%; line-height: 0; }
.care-band img { width: 100%; height: 614px; object-fit: cover; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .warum__grid { grid-template-columns: 1fr; gap: 34px; }
  .chart { max-width: 442px; }
  .care-reihe { flex-direction: column; min-height: 0; }
  .care-reihe__bild { width: 100%; height: 300px; border-radius: var(--radius-m) var(--radius-m) 0 0; }
  .care-reihe__inhalt { border-radius: 0 0 var(--radius-m) var(--radius-m); }
  .vorteile-care { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 720px) {
  .hero--careimmo .hero__marke { width: 170px; height: 36px; }
  .care-reihe__titel { font-size: 32px; line-height: 36px; }
  .sind-karte { grid-template-columns: 1fr; gap: 26px; }
  .vorteile-care { grid-template-columns: 1fr; }
  .care-band img { height: 320px; }
  .warum__zitat { padding: 17px 22px; }
}

/* ============================================================
   GREENIMMO (Figma 397:626) – gebaut 16.07.2026
   Fast vollständig aus freigegebenen Komponenten zusammengesetzt:
   Hero, Bausteine-Slider + Netzwerk-Intro (Konzeptimmo), Kennenlern-Slider
   (Master 425:750), Erstgespräch, Newsletter, FAQ, .care-band, .care-cta
   und .vorteil-karte/.vorteile__grid (KUNDEN-Komponente) werden 1:1
   wiederverwendet. Neu sind nur die beiden Blöcke unten.
   ============================================================ */

/* ---------- Warum Greenimmo: einspaltiger Fließtext ----------
   Anders als CAREIMMO ohne Balkendiagramm -> kein zweispaltiges .warum__grid.
   Figma 2001:1167: x=200 w=1040 = volle Containerbreite. */
.green-intro { margin-top: 46px; } /* Figma: H2 endet 1265, Text startet 1286 (+21 auf Headline-Grundlinie) */
.green-intro strong { font-weight: 600; } /* Figma: SemiBold-Segmente (analog .netzwerk-intro) */

/* ---------- Ihre Vorteile: Karten auf Bild-Hintergrund (Figma 2002:1256) ----------
   Bild 1440x1119 liegt hinter der Sektion; die Abdunklung ist laut Auftraggeber
   (16.07.) im gelieferten Export eingebrannt -> KEIN CSS-Overlay (analog Hero). */
.vorteile-green {
  position: relative;
  isolation: isolate;
  padding-block: 100px 156px; /* Figma: Bild 1493-2612, Overline 1592, CTA-Ende 2512 */
}
.vorteile-green__bild {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Overline auf dunklem Grund: Orange bleibt (Figma 2001:1171), H2 = --beige (2001:1192) */
.vorteile-green .vorteile__grid { margin-top: 39px; } /* Figma: H2 endet 1731, Karten 1770 */

/* GREENIMMO: Logo-Breite auch im Mobile-Breakpoint proportional halten.
   Der generische Wert (220x33) folgt dem Konzeptimmo-Verhältnis und würde
   das schmalere Greenimmo-SVG erneut zentrieren statt links anschlagen. */
@media (max-width: 720px) {
  .hero--greenimmo .hero__marke { width: auto; height: 33px; }
}

/* ============================================================
   BASISIMMO (Figma 397:927) — gebaut 16.07.2026
   Vorlage: Konzeptimmo/Greenimmo. Neu sind nur die Bloecke
   .basis-ausmacht, .basis-fuerwen und .bausteine-schluss.
   ============================================================ */

/* Hero-Logo: viewBox-Ratio 5.046 vs. Figma-Rahmen 226x44 (5.136) -> width:auto,
   sonst zwingt die generische .hero__marke-Regel (294px, Z.1372) das SVG in eine
   zu breite Box und zentriert es horizontal (vgl. Greenimmo-Fehler 16.07.). */
.hero--basisimmo .hero__marke { width: auto; height: 44px; }

/* ---------- Was Basisimmo ausmacht (Figma Rectangle 37, 2001:933) ---------- */
.basis-ausmacht { background: var(--beige-60); } /* Figma 2001:933: #F5F0E8/60, 1440x811 */
.basis-karten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 19px; /* Figma: Karten x=202/466/731/995, w=245 -> Luecke 19px */
  margin-top: 39px;
  /* kein align-items:start -> Karten stretchen auf gleiche Hoehe (Figma: alle 376px),
     analog der freigegebenen .vorteile__grid */
}
.basis-karte {
  background: var(--weiss);
  border-radius: 13px; /* Figma zeigt r10 -> auf die freigegebenen 13px vereinheitlicht (analog Greenimmo) */
  padding: 25px;
  /* User-Vorgabe 16.07.: leichter Schatten auf den weissen Kaesten */
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
}
.basis-karte__nr {
  display: grid;
  place-items: center;
  width: 52px;
  height: 50px;
  background: var(--orange);
  border-radius: var(--radius-s); /* Figma 2001:936: r6 */
  color: var(--weiss);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px;
}
.basis-karte h3 {
  font-family: var(--font-text);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase; /* Figma 2001:938: Montserrat Bold, Versalien */
  line-height: 1.2;
  color: var(--hng-blau);
  min-height: 48px; /* zweizeilig wie bei .vorteil-karte */
  margin-bottom: 15px;
}
.basis-karte p { color: rgb(0 0 0 / 0.95); }

/* ---------- Für wen (Figma 2034:1029 "Group 115") ---------- */
.basis-fuerwen { background: var(--weiss); }
.basis-passt {
  display: flex;
  align-items: stretch; /* Bild + Inhalt bilden EINEN Block (analog .care-reihe) */
  margin-top: 36px;
  /* User-Vorgabe 16.07.: beiger Hintergrund, KEINE Outline */
  background: var(--beige-60);
  border-radius: var(--radius-m); /* Figma 2001:968: r8 */
  overflow: hidden;
  min-height: 424px; /* Figma: 1040x424 */
}
.basis-passt__inhalt {
  flex: 1;
  /* User-Vorgabe 16.07.: Abstaende verringert, damit der Inhalt nicht hoeher
     wird als das Bild (sonst waechst der Kasten ueber die Bildhoehe hinaus). */
  padding: 30px 38px 32px;
}
.basis-passt__titel {
  font-family: var(--font-text);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase; /* Figma 2001:1163: Montserrat SemiBold 22, Versalien */
  color: var(--schwarz);
}
.basis-passt__titel--nein { margin-top: 26px; } /* Figma: 2578 -> 2803 mit 4 Punkten dazwischen */
/* Listen nutzen die freigegebene .sind-liste aus Careimmo (User-Vorgabe 16.07.):
   Haken-/Kreuz-Badges identisch mit "Was Sie sind / nicht sind". */
.basis-passt .sind-liste { margin-top: 14px; gap: 7px; }
.basis-passt .sind-liste li {
  font-weight: 500; /* Figma: Montserrat Medium 14 */
  line-height: 21px; /* User-Vorgabe 16.07.: etwas enger (vorher 24px) */
}

.basis-passt__bild {
  width: 365px; /* Figma 2001:983: 365x424, r 0 8 8 0 */
  object-fit: cover;
  flex-shrink: 0;
  /* User-Vorgabe 16.07.: Bild auf volle Kastenhoehe.
     height:100% + align-self:stretch schlaegt das height-Attribut im HTML;
     mit height:auto blieb das Bild bei den 424px des Attributs stehen und
     liess unten einen 2px-Beigestreifen stehen. */
  align-self: stretch;
  height: 100%;
  display: block;
}

/* ---------- Slider "So einfach geht's": flachere Karte ---------- */
/* Figma 2001:1062: Karte 1025x195 ohne Intro-Text rechts (anders als Master 425:750) */
.slide-karte--basis > p { max-width: 969px; }

/* ---------- Bausteine-Slider (Figma 426:1023) ----------
   Nutzt die freigegebenen Klassen .section--beige + .slider--bausteine aus
   Konzeptimmo (User-Vorgabe 16.07.: Layout/Struktur analog den anderen Seiten).
   Dadurch Fliesstext + Labels in #00334C / #2E2825 statt weiss. */
.bausteine-schluss {
  margin-top: 28px; /* Figma 426:1057: y=4651, Karte endet 4587 */
  /* User-Vorgabe 16.07.: orange umrandet (Figma 426:1031 "DIV-134" 1042x49, transparent) */
  border: 2px solid var(--orange);
  border-radius: var(--radius-s);
  padding: 12px 20px;
  font-weight: 600; /* Figma: Montserrat SemiBold 14 */
  color: rgb(0 0 0 / 0.95);
  text-align: center; /* User-Vorgabe 16.07. */
}

@media (max-width: 1100px) {
  .basis-karten { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .basis-passt { flex-direction: column; min-height: 0; }
  .basis-passt__bild { width: 100%; height: 280px; flex: 0 0 280px; }
}

@media (max-width: 720px) {
  .hero--basisimmo .hero__marke { width: auto; height: 33px; }
  .basis-karten { grid-template-columns: 1fr; }
  .basis-karte h3 { min-height: 0; }
  .basis-passt__inhalt { padding: 28px 24px 32px; }
}

/* ============================================================
   KONTAKT (Figma 213:1772) – 16.07.2026
   ============================================================ */

/* --- Hero: kompakt 440px statt Vollbild (Figma-Rect 213:2007) --- */
.hero--kontakt { min-height: 0; height: 440px; }
.hero--kontakt .hero__bild { height: 440px; object-fit: cover; }
/* KEIN Overlay: Abdunklung ist im gelieferten Bild eingebrannt (User-Vorgabe 16.07.).
   Figma zeigte in 302:1801 einen echten Verlauf; der Export bildet ihn bereits ab.
   Gemessen: Kontrast 17,5:1 (Eyebrow) / 16,4:1 (H1) / 15,1:1 zu Weiss. */
/* Figma-Metrik relativ zum Hero-Start (y=97): Eyebrow 99, H1 156, Copy 302.
   .hero ist display:flex + align-items:center -> Inhalt saesse sonst mittig.
   Hier oben ausrichten, damit die Figma-Abstaende greifen.
   Hinweis: Figma misst die Glyphenbox, der Browser die Zeilenbox (lh 21.7 bei 16px
   Glyphenhoehe) -> padding/margins sind um die Halbzeilen korrigiert, damit die
   GERENDERTEN Positionen den Figma-Werten entsprechen. */
.hero--kontakt { align-items: flex-start; }
.hero--kontakt .hero__inner {
  display: block;
  padding-block: 99px 0;   /* gemessen: Eyebrow auf Figma-99 */
}
.hero--kontakt .hero__eyebrow { margin-bottom: 35px; }   /* gemessen: setzt H1 auf Figma-156 */
.hero--kontakt .display { margin: 0; }
.hero--kontakt .hero__copy { max-width: 749px; margin-block: 14px 0; } /* gemessen: setzt Copy auf Figma-302 */

/* --- Kontakt-Sektion: Daten links, Formular rechts --- */
/* Figma: Hero-Ende 537 -> Eyebrow 638 (101px). Zeilenbox-Korrektur wie im Hero. */
.kontakt { padding-block: 98px 96px; }  /* gemessen: Eyebrow/H2 auf Figma-Werte */
/* Figma zeigt links 544px-Frames, deren Inhalt aber nur bis x=536 reicht (Rest ist
   leere Auto-Layout-Huelle; die 544er wuerden die Form-Karte um 48px ueberlappen).
   Der Container ist 48px schmaler als der Figma-Frame -> rechte Spalte fix 544,
   linke nimmt den Rest. Content-Linie und Karten-Rechtskante bleiben Figma-treu. */
.kontakt__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 544px;
  justify-content: space-between;
  align-items: start;
  gap: 40px;
}
.kontakt__daten .eyebrow { margin-bottom: 24px; } /* Figma: Eyebrow-Ende 654 -> H2 681 */
.kontakt__daten .h2 { margin-top: 0; }
/* Figma: Karte y=643, Sektionsinhalt startet 638 -> Karte sitzt 5px hoeher */
.kontakt__form-karte { margin-top: 8px; }

.kontakt__liste { display: grid; gap: 20px; margin-top: 64px; } /* gemessen: setzt Liste auf Figma-849 */
.kontakt__eintrag { display: flex; align-items: center; gap: 16px; } /* Figma: Icon 40 + 16 Abstand */
.kontakt__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--beige);
  border-radius: var(--radius-s); /* Figma: r6 */
  color: var(--hng-blau);
}
.kontakt__icon svg { width: 18.75px; height: 18px; }
.kontakt__text { display: block; }
.kontakt__label {
  display: block;
  font-size: var(--fs-klein);
  font-weight: 600;
  color: var(--sidebar-bg); /* Figma: #9B8E7E */
  line-height: 16px;
}
.kontakt__wert {
  display: block;
  font-size: var(--fs-text);
  color: var(--text-dunkel);
  line-height: 20px;
}
a.kontakt__wert:hover { color: var(--orange); }

/* --- Formular-Karte (Figma 213:1982) --- */
.kontakt__form-karte {
  background: var(--beige);
  border-radius: 12px; /* Figma: r12 */
  padding: 33px;
}
.kontakt-form { display: grid; gap: 20px; }
.kontakt-form .feld { display: grid; gap: 6px; }
.kontakt-form .feld > label {
  font-size: var(--fs-klein);
  font-weight: 600;
  color: var(--text-dunkel);
  line-height: 16px;
}
.kontakt-form .feld input[type="text"],
.kontakt-form .feld input[type="email"],
.kontakt-form .feld textarea {
  width: 100%;
  padding: 12px 15px;
  font-family: var(--font-text);
  font-size: var(--fs-text);
  color: var(--text-dunkel);
  background: var(--weiss);
  border: 1px solid transparent; /* Figma: kein Rahmen */
  border-radius: var(--radius-s); /* Figma: r6 */
  transition: border-color var(--dur-schnell) var(--ease);
}
.kontakt-form .feld input[type="text"],
.kontakt-form .feld input[type="email"] { height: 46px; } /* Figma: 46 */
.kontakt-form .feld textarea { height: 126px; resize: vertical; } /* Figma: 126 */
.kontakt-form .feld input:focus,
.kontakt-form .feld textarea:focus { outline: none; border-color: var(--hng-blau); }
.kontakt-form .feld input[aria-invalid="true"],
.kontakt-form .feld textarea[aria-invalid="true"] { border-color: var(--orange); }
.kontakt-form__btn { width: 100%; justify-content: center; } /* Figma: 478 = volle Innenbreite */
/* Datenschutz-Checkbox: User-Vorgabe 16.07. – in Figma NICHT vorhanden.
   Struktur/Klassen 1:1 aus dem freigegebenen Erstgespraech-Formular.
   FOLGE: Die Form-Karte waechst von den Figma-469px auf 531px; Maps und
   Newsletter ruecken entsprechend nach unten. Bewusst so – ein Pflichtfeld
   laesst sich nicht hoehenneutral einfuegen. Seitenhoehe dadurch 2576. */
.kontakt-form .checkbox { color: var(--text-dunkel); font-size: var(--fs-nav); }
.kontakt-form .feld--checkbox { gap: 0; }
.kontakt-form__pflicht {
  display: block;
  text-align: right;
  font-size: var(--fs-nav);
  color: var(--text-dunkel);
  margin-top: -12px;
}
.kontakt-form .form-status { color: var(--text-dunkel); }
.kontakt-form .form-status--erfolg { color: var(--hng-blau); }
.kontakt-form .form-status--fehler { color: var(--orange); }

/* --- Google Maps: Zwei-Klick-Loesung (User-Vorgabe 16.07.) ---
   Figma-Flaeche 213:2004 (1440x320, rgb(244,244,244)) bleibt als Buehne erhalten. */
.maps {
  height: 320px; /* Figma: 320 */
  background: #F4F4F4; /* Figma: rgb(244,244,244) */
  position: relative;
  overflow: hidden;
}
.maps__consent {
  height: 100%;
  display: grid;
  place-items: center;
  padding-inline: 24px;
}
/* Nach dem Laden faellt das Padding weg, damit die Karte volle 1440 nutzt (Figma).
   Langform noetig: padding-inline (Shorthand) setzt sich gegen die Basisregel nicht durch. */
.maps__consent.ist-geladen {
  display: block;
  padding-left: 0;
  padding-right: 0;
}
.maps__hinweis { max-width: 520px; text-align: center; }
.maps__text {
  font-size: var(--fs-klein);
  color: var(--text-dunkel);
  line-height: var(--lh-text);
  margin-bottom: 18px;
}
.maps__btn { display: inline-flex; }
.maps__link { margin-top: 14px; font-size: var(--fs-nav); }
.maps__link a { text-decoration: underline; color: var(--text-dunkel); }
.maps__link a:hover { color: var(--orange); }
/* Nach dem Laden fuellt das iframe die gesamte Flaeche */
.maps__frame { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 1100px) {
  .kontakt__grid { grid-template-columns: 1fr; gap: 48px; }
  .kontakt__liste { margin-top: 32px; }
}
@media (max-width: 720px) {
  .hero--kontakt { height: auto; min-height: 360px; }
  .hero--kontakt .hero__bild { height: 100%; }
  .hero--kontakt .hero__inner { padding-block: 72px 40px; }
  .kontakt__form-karte { padding: 20px; }
  .maps { height: 280px; }
  .maps__text { margin-bottom: 14px; }
}

/* =====================================================================
   EVENTS ANMELDUNG (Figma 225:2372 / Zustand 2: 2028:1842) – 16.07.2026
   ===================================================================== */

/* --- Hero: 440 px, Aufbau wie Kontakt --- */
.hero--events-anmeldung { min-height: 0; height: 440px; align-items: flex-start; }
.hero--events-anmeldung .hero__bild { height: 440px; object-fit: cover; object-position: 62% center; } /* Ausschnitt zeigt Gesicht der Frau (rechts, User-Vorgabe 19.07.) */
/* KEIN Overlay – User-Entscheidung 16.07.: der gelieferte Export bleibt unveraendert.
   Figma 302:1609 zeigt einen Verlauf (schwarz 100%->32%, Deckkraft 80%, OBEN dunkel);
   der Upload dunkelt dagegen UNTEN ab. Gemessen im Headline-Bereich:
   Hintergrund rgb(116,118,118) -> Kontrast 4,58:1 (weiss) / 2,43:1 (#C8BBA8).
   Bewusst so belassen, siehe Uebergabebericht. */
/* Figma-Metrik relativ zum Hero-Start (y=101): H1 258 -> 157 lokal.
   Zeilenbox-Korrektur wie bei .hero--kontakt (Figma misst die Glyphenbox). */
.hero--events-anmeldung .hero__inner { display: block; padding-block: 157px 0; }  /* gemessen: H1 auf Figma-lokal 157 */
.hero--events-anmeldung .display { margin: 0; }

/* ============================================================
   EVENTS-Uebersicht Hero (events.html) – User-Vorgabe 19.07.
   Anders als die Anmelde-Seite HAT die Uebersicht ein Overlay:
   Figma 2142:871 zeigt einen Verlauf (schwarz 80% unten -> 26% oben).
   Die freigegebene .hero__overlay-Sprache passt (Schwarz unten,
   transparent oben) und wird wiederverwendet. Text vertikal zentriert.
   ============================================================ */
.hero--events-uebersicht { align-items: center; }
.hero--events-uebersicht .hero__inner { padding-block: 0; }
.hero--events-uebersicht .display { margin: 0; }
.hero__sub {
  margin-top: 18px;
  font-size: var(--fs-text);
  font-weight: 500;
  color: var(--weiss);
}

/* --- Anmelde-Sektion --- */
/* Figma: Hero-Ende 541 -> Eyebrow 658 (117 px). Zeilenbox-Korrektur eingerechnet. */
.anmeldung { padding-block: 117px 117px; }
/* padding-top 117: gemessen, setzt den Eyebrow auf Figma-658 (lokal 117 ab Hero-Ende).
   padding-bottom 117: User-Vorgabe 16.07. – Abstand Button->Footer soll dem Abstand
   Hero->Text entsprechen. Figma zeigt hier 130px (Button-Unterkante 1223 -> Footer 1323);
   auf Wunsch symmetrisch zu oben gesetzt. Am Sektions-Padding statt am Button, damit die
   Erfolgsmeldung (.form-status) den Abstand nicht auffrisst. */
/* Figma-Frame: Inhalt x=462..977 (515 breit), also links eingerueckt statt Container-Linie.
   Der Container ist 48 px schmaler als der Figma-Frame -> Einzug relativ zur Content-Linie
   (Figma 462 - Content-Linie 224 = 238). */
.anmeldung__inner { max-width: var(--content-max); }
.anmeldung .eyebrow,
.anmeldung .h2,
.anmeldung__copy,
.anmeldung__form { margin-left: 238px; max-width: 515px; }
/* Abstand Eyebrow->H2: .eyebrow bringt margin-bottom:14px mit; per Margin-Collapse
   gewinnt der groessere Wert. Deshalb hier den Eyebrow-Abstand direkt setzen,
   statt am H2 zu drehen (sonst zwei Stellschrauben fuer ein Ziel). */
.anmeldung .eyebrow { margin-bottom: 10px; }  /* gemessen: H2 auf Figma-690 */
.anmeldung .h2 { margin-top: 0; }
.anmeldung__copy {
  margin-top: 16px;                            /* gemessen: Copy auf Figma-810 */
  font-size: var(--fs-text);
  line-height: 22px;
  color: rgb(0 0 0 / 0.95);
}
.anmeldung__copy strong { font-weight: 600; }

/* --- Formular: modernisiertes Layout (User-Vorgabe 16.07., Vorschlag freigegeben) ---
   BEWUSSTE ABWEICHUNG VON FIGMA (225:2372 / 2028:1842). Figma zeigt 30px-Felder ohne
   Label, einen blauen Balken als Umschalter und 12px-Kaestchen. Der Kunde wollte ein
   moderneres Formular; uebernommen wurde die Sprache der bereits freigegebenen
   .form-karte (Erstgespraech): beige Felder rgb(200 187 168/.20), Rahmen #D9D9D9,
   weisse Karte r10, Schatten wie .vorteil-karte. Farben, Schriften, Radien und saemtliche
   Texte bleiben unveraendert. Das Erstgespraech-Formular selbst bleibt wie freigegeben
   (User-Entscheidung 16.07.: nur diese Seite anpassen).
   Folge: Die Seite ist hoeher als der Figma-Frame (1840/1958). */

.anmeldung__form { margin-top: 34px; }

.anmelde-karte {
  padding: 32px 34px 34px;
  background: var(--weiss);
  border: 1px solid rgb(200 187 168 / 0.35);
  border-radius: var(--radius-l);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.05);   /* wie .vorteil-karte, User-Vorgabe 14.07. */
}
/* Event-Titel/Datum innerhalb der Karte (Offline-Anmeldung) - gleiche Textoptik wie
   .anmeldung__copy, aber ohne dessen Seiten-Einrueckung (margin-left:238px), die hier
   in der schmaleren Karte den Text nach rechts verschiebt. */
.anmelde-karte__event-info {
  font-size: var(--fs-text);
  line-height: 22px;
  color: rgb(0 0 0 / 0.95);
}
.anmelde-karte__trenner {
  height: 1px;
  background: rgb(200 187 168 / 0.45);
  margin: 22px 0 20px;
}

/* --- Schritt-Kopfzeilen (Nummernlogik wie in den freigegebenen Slidern) --- */
.schritt { display: flex; align-items: baseline; gap: 9px; margin-bottom: 15px; }
.schritt__nr {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--hng-blau);
  color: var(--weiss);
  font-size: 11px;
  font-weight: 700;
  transform: translateY(3px);
}
.schritt__titel {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hng-blau);
}

/* --- Segmented Control statt blauem Balken --- */
.modus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgb(200 187 168 / 0.22);
  border-radius: var(--radius-l);
}
.modus__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6B6257;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-schnell) var(--ease), color var(--dur-schnell) var(--ease),
              box-shadow var(--dur-schnell) var(--ease);
}
.modus__icon { width: 14px; height: 13px; flex: none; }
.modus__btn[aria-checked="true"] {
  background: var(--hng-blau);
  color: var(--weiss);
  box-shadow: 0 1px 5px rgb(0 51 76 / 0.28);
}
.modus__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* --- Termine als anklickbare Karten (Figma: 12px-Kaestchen) --- */
.termin-karten { border: 0; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
.termin-karten__legende {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.termin-karte {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  background: rgb(200 187 168 / 0.20);        /* = Feldfarbe .form-karte */
  border: 1px solid #D9D9D9;
  border-radius: var(--radius-l);
  cursor: pointer;
  transition: border-color var(--dur-schnell) var(--ease), background var(--dur-schnell) var(--ease);
}
.termin-karte:hover { border-color: var(--sand); background: rgb(200 187 168 / 0.30); }
.termin-karte input { position: absolute; opacity: 0; pointer-events: none; }
.termin-karte__box {
  flex: none;
  width: 19px; height: 19px;
  display: grid; place-items: center;
  border: 1.5px solid #C4BCB0;
  border-radius: 5px;
  background: var(--weiss);
  transition: background var(--dur-schnell) var(--ease), border-color var(--dur-schnell) var(--ease);
}
.termin-karte__box::after {
  content: "";
  width: 11px; height: 11px;
  background: var(--weiss);
  clip-path: polygon(19% 47%, 39% 66%, 81% 24%, 88% 33%, 39% 82%, 12% 55%);
  transform: scale(0);
  transition: transform var(--dur-schnell) var(--ease);
}
.termin-karte input:checked ~ .termin-karte__box { background: var(--orange); border-color: var(--orange); }
.termin-karte input:checked ~ .termin-karte__box::after { transform: scale(1); }
.termin-karte input:checked ~ .termin-karte__inhalt .termin-karte__datum { color: var(--hng-blau); }
/* :has wird von allen Zielbrowsern unterstuetzt; ohne :has bleibt nur die Rahmenfarbe aus,
   die Auswahl ist ueber das Kaestchen weiterhin sichtbar (Progressive Enhancement). */
.termin-karte:has(input:checked) { border-color: var(--orange); background: rgb(255 92 0 / 0.05); }
.termin-karte input:focus-visible ~ .termin-karte__box { outline: 2px solid var(--hng-blau); outline-offset: 2px; }
.termin-karte__inhalt { display: flex; flex-direction: column; gap: 2px; }
.termin-karte__datum { font-size: var(--fs-text); font-weight: 600; line-height: 1.3; color: var(--text-dunkel); }
.termin-karte__meta { font-size: 11px; line-height: 1.3; color: #7A6E5F; }
/* Radiomodus: runde Kaestchen, damit die Einfachauswahl erkennbar ist */
.termin-karte input[type="radio"] ~ .termin-karte__box { border-radius: 50%; }
.termin-karte input[type="radio"] ~ .termin-karte__box::after { clip-path: circle(50%); width: 9px; height: 9px; }

/* --- Felder: 42px mit Label darueber (Figma: 30px, Placeholder-only) --- */
.anmeldung__felder { display: grid; gap: 14px; }
.anmeldung__zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.anmeldung__form .feld--gross { display: flex; flex-direction: column; gap: 6px; }
.anmeldung__form .feld--gross label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7A6E5F;
}
.anmeldung__form .feld--gross input {
  width: 100%;
  height: 42px;
  padding: 0 15px;
  background: rgb(200 187 168 / 0.20);
  border: 1px solid #D9D9D9;
  border-radius: var(--radius-l);
  font-family: var(--font-text);
  font-size: var(--fs-text);
  font-weight: 500;
  color: var(--text-dunkel);
  transition: border-color var(--dur-schnell) var(--ease), background var(--dur-schnell) var(--ease);
}
.anmeldung__form .feld--gross input::placeholder { color: rgb(85 82 82 / 0.55); opacity: 1; }
.anmeldung__form .feld--gross input:focus {
  outline: none;
  border-color: var(--hng-blau);
  background: var(--weiss);
}
.anmeldung__form .feld--gross input[aria-invalid="true"] { border-color: var(--orange); }

/* --- Begleitung (Events-Anmeldung offline) --- */
.anmeldung__begleitung-frage { display: flex; align-items: center; gap: 24px; border: none; padding: 0; margin: 0; }
.anmeldung__begleitung-frage legend { margin-bottom: 0; }
.anmeldung__begleitung-felder { display: none; padding-top: 1rem; }
.anmeldung__form:has(input[name="companion"][value="yes"]:checked) .anmeldung__begleitung-felder { display: grid; }

/* --- Zustimmung --- */
.anmeldung__haken { display: grid; gap: 11px; }
.anmeldung__haken .feld--checkbox { margin-bottom: 0; }
.checkbox--gross {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-klein);
  line-height: 1.5;
  color: rgb(0 0 0 / 0.8);
  cursor: pointer;
}
.checkbox--gross input {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 1px;
  display: grid; place-items: center;
  appearance: none;
  border: 1.5px solid #C4BCB0;
  border-radius: 4px;
  background: var(--weiss);
  cursor: pointer;
}
.checkbox--gross input::after {
  content: "";
  width: 9px; height: 9px;
  background: var(--weiss);
  clip-path: polygon(19% 47%, 39% 66%, 81% 24%, 88% 33%, 39% 82%, 12% 55%);
  transform: scale(0);
  transition: transform var(--dur-schnell) var(--ease);
}
.checkbox--gross input:checked { background: var(--orange); border-color: var(--orange); }
.checkbox--gross input:checked::after { transform: scale(1); }
.checkbox--gross input:focus-visible { outline: 2px solid var(--hng-blau); outline-offset: 2px; }
.checkbox--gross a { color: var(--hng-blau); text-decoration: underline; }

/* --- Absenden --- */
.anmeldung__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin-top: 22px;
  padding: 0;
  border-radius: var(--radius-m);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.anmeldung__pflicht {
  margin-top: 12px;
  font-size: 11px;
  color: #7A6E5F;
  text-align: center;
}
/* Die Basisregel .form-status bringt margin-top:4px mit (gilt fuer alle Seiten, bleibt).
   Im Leerzustand zaehlt der Margin sonst zum Button->Footer-Abstand und verfaelscht die
   vom User gewuenschte Symmetrie (16.07.) -> hier nur fuer diese Sektion neutralisieren. */
.anmeldung .form-status:empty { margin-top: 0; }
.anmeldung .form-status:not(:empty) { margin-top: 12px; text-align: center; }
.anmeldung .form-status--erfolg { color: var(--hng-blau); }  /* heller Grund statt dunkler Sektion */

/* --- Responsive --- */
@media (max-width: 1100px) {
  .anmeldung .eyebrow,
  .anmeldung .h2,
  .anmeldung__copy,
  .anmeldung__form { margin-left: 0; max-width: 560px; }
}
@media (max-width: 720px) {
  .hero--events-anmeldung { height: 360px; }
  .hero--events-anmeldung .hero__bild { height: 360px; }
  .hero--events-anmeldung .hero__inner { padding-block: 110px 0; }
  .anmeldung { padding-block: 64px 64px; }
  .anmelde-karte { padding: 24px 20px 26px; }
  .anmeldung__zwei { grid-template-columns: 1fr; gap: 14px; }
  .modus { grid-template-columns: 1fr; }
  .modus__btn { height: 40px; }
}

/* ================================================================
   IMMOBILIENWISSEN (162:91) — 16.07.2026
   Hero uebernimmt die Kontakt-Metrik (440px). Neu sind nur Intro,
   Filter-Pills und Artikel-Raster.
   ================================================================ */

/* --- Hero: 440px, Metrik identisch zu hero--kontakt (Figma y=97..537) --- */
.hero--immobilienwissen { min-height: 0; height: 440px; }
.hero--immobilienwissen .hero__bild { height: 440px; object-fit: cover; }
/* KEIN Overlay: Abdunklung ist im Bild eingebrannt (User-Vorgabe 16.07.).
   Figma-Rechteck 302:1615 (schwarz 100%->32%, Deckkraft 0.9) dunkelt von OBEN ab,
   der gelieferte Upload von UNTEN. Gemessen im Headline-Bereich: Eyebrow 7,51:1 /
   H1 Zeile 1 11,54:1 / H1 Zeile 2 8,40:1 / Copy 19,14:1 — alle ueber WCAG AA.
   Deshalb bleibt der Upload unveraendert. */
.hero--immobilienwissen { align-items: flex-start; }
.hero--immobilienwissen .hero__inner {
  display: block;
  padding-block: 99px 0;   /* Figma-lokal: Eyebrow 99 */
}
.hero--immobilienwissen .hero__eyebrow { margin-bottom: 35px; }  /* setzt H1 auf Figma-156 */
.hero--immobilienwissen .display { margin: 0; }
.hero--immobilienwissen .hero__copy { max-width: 749px; margin-block: 14px 0; } /* Copy auf Figma-302 */

/* --- Wissen-Sektion: Intro + Filter + Raster --- */
/* Figma: Hero-Ende 537 -> Intro 637 (100px), Zeilenbox-Korrektur wie im Hero. */
.wissen { padding-block: 97px 100px; }
.wissen__intro {
  max-width: 1105px;                 /* Figma 213:1467 */
  /* Figma zeigt Montserrat SemiBold 600 -> auf User-Vorgabe 16.07. auf Regular 400
     gesetzt (bewusste Abweichung; analog zur FAQ-Regel, die projektweit Regular nutzt). */
  font-weight: 400;
  line-height: 22px;
  color: rgb(0 0 0 / 0.95);
}

/* --- Filter-Pills ---
   Figma: r30, 1px #9B8E7E, padding 2/8, Leiste zentriert ab x=409.
   MODERNISIERUNG (User-Vorgabe 16.07., bewusste Abweichung von Figma):
   Anzahl-Badge je Kategorie + Aktiv-Zustand in HNG-Blau statt Beige.
   Grund: Der Leerzustand ("Markt & Trends") ist so vorab sichtbar, statt
   erst nach dem Klick zu erscheinen. Kein neues Token, keine neue Farbe. */
.wissen-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 35px;   /* Figma: Intro-Ende 703 -> Pills 738 */
}
.wissen-filter__pill {
  display: inline-flex;
  align-items: center;
  /* Abstand Wort <-> Zahl: 12px statt 7px, Innenabstand 18px statt 14px
     (User-Vorgabe 16.07.). Grund: Bei drei-/vierstelligen Artikelzahlen klebte
     die Zahl sonst am Wort. Geprueft mit dreistelligen Werten: die Leiste
     bleibt einzeilig (785px von 992px verfuegbar). */
  gap: 12px;
  border: 1px solid var(--sidebar-bg);
  background: var(--weiss);
  color: var(--sidebar-bg);
  border-radius: 30px;
  padding: 6px 18px;
  font-family: var(--font-text);
  font-size: var(--fs-klein);
  line-height: 18px;
  cursor: pointer;
  transition: background var(--dur-schnell) var(--ease),
              color var(--dur-schnell) var(--ease),
              border-color var(--dur-schnell) var(--ease);
}
.wissen-filter__pill:hover { border-color: var(--hng-blau); color: var(--hng-blau); }
.wissen-filter__anzahl { font-size: 10px; opacity: 0.75; }
.wissen-filter__pill.is-aktiv {
  background: var(--hng-blau);
  border-color: var(--hng-blau);
  color: var(--weiss);
}

/* --- Artikel-Raster ---
   Figma-Raster liegt bei x=200..1240 (Karten 330/331/330, Gaps 24/25).
   Der Container ist 48px schmaler -> auf User-Vorgabe 16.07. auf die
   Content-Linie (224) gesetzt, damit das Raster zum Hero-Text buendig ist. */
.wissen__grid-artikel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 25px;      /* Figma-Zeilenabstand 28, Spaltenabstand 24/25 */
  margin-top: 34px;    /* Figma: Pills-Ende 764 -> Karten 798 */
}

/* MODERNISIERUNG (User-Vorgabe 16.07., bewusste Abweichung von Figma):
   Figma zeigt beige Karten (#F5F0E8 @ 50%) ohne Rahmen/Schatten, Titel in
   Montserrat, graue Tags. Uebernommen wurde stattdessen die Sprache der
   bereits freigegebenen .vorteil-karte (weiss, r13, Schatten 0 2px 12px,
   Kunden-Seite) und die Hover-Logik der .termin-karte (Events-Anmeldung).
   Kein neues Gestaltungselement, keine neue Farbe, keine neue Schrift. */
.wissen-karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--weiss);
  border: 1px solid rgb(200 187 168 / 0.35);   /* wie .anmelde-karte */
  border-radius: 13px;                          /* wie .vorteil-karte */
  padding: 26px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.05);     /* wie .vorteil-karte */
  transition: transform var(--dur-schnell) var(--ease),
              box-shadow var(--dur-normal) var(--ease),
              border-color var(--dur-schnell) var(--ease);
}
/* Ganze Karte klickbar: der Link spannt sich per ::after ueber die Karte
   (Titel bleibt der zugaengliche Linktext, kein doppelter Tab-Stopp). */
.wissen-karte { position: relative; }
.wissen-karte__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.wissen-karte:hover {
  transform: translateY(-1px);                  /* Projekt-Hover, wie .btn */
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.10);
  border-color: var(--orange);
}
.wissen-karte:focus-within {
  border-color: var(--orange);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.10);
}
/* Hervorgehobene Doppelbreite-Karte am 16.07. auf User-Vorgabe verworfen:
   9 Karten + eine Doppelbreite = 10 Zellen gehen bei 3 Spalten nicht auf
   (die 9. Karte stuende allein in Zeile 4). Alle Karten sind gleich gross,
   das Raster laeuft in 3 vollen Zeilen. */

.wissen-karte__tag {
  border-radius: 30px;
  padding: 3px 10px;
  font-size: var(--fs-klein);
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Kategorie-Tags: alle einheitlich HNG-Blau auf hellblauem Grund
   (User-Vorgabe 16.07.: keine farbliche Unterscheidung je Kategorie).
   Flaeche = HNG-Blau mit 8 % auf Weiss -> rgb(235,239,241), Kontrast 11,50:1.
   Kein neues Token, keine neue Farbe. */
.wissen-karte__tag {
  background: rgb(0 51 76 / 0.08);
  color: var(--hng-blau);
}
/* Titel in Lora (Projekt-Headline-Schrift) statt Montserrat -> klare Hierarchie
   zum Montserrat-Fliesstext. */
.wissen-karte__titel {
  margin-top: 16px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 19px;
  line-height: 25px;
  color: var(--hng-blau);
}
.wissen-karte__link {
  color: inherit;
  text-decoration: none;
}
.wissen-karte__text {
  margin-top: 8px;
  font-size: var(--fs-text);
  line-height: 22px;
  color: rgb(0 0 0 / 0.8);
}
.wissen-karte__lesen {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-klein);
  font-weight: 600;
  color: var(--orange);
}
.wissen-karte__lesen svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-schnell) var(--ease);
}
.wissen-karte:hover .wissen-karte__lesen svg { transform: translateX(3px); }

.wissen__leer {
  margin-top: 34px;
  text-align: center;
  color: var(--sidebar-bg);
}

/* WICHTIG (Fehler gefunden 16.07. per Nutzer-Hinweis):
   Das hidden-Attribut allein reicht hier NICHT. Der Browser-Default
   [hidden]{display:none} ist eine UA-Regel und wird von JEDER Klassenregel
   mit display geschlagen -- .wissen-karte{display:flex} und
   .wissen__leer{margin-top} haben hoehere Spezifitaet. Folge: main.js setzte
   hidden korrekt (Screenreader ok), die Karten blieben aber sichtbar.
   Die Filter sahen in der Messung richtig aus ("2 sichtbar"), weil dort das
   hidden-Attribut gezaehlt wurde statt der tatsaechlichen Darstellung.
   Deshalb explizit ueberschreiben: */
.wissen-karte[hidden],
.wissen__leer[hidden] { display: none; }

@media (max-width: 1100px) {
  .wissen__grid-artikel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hero--immobilienwissen { height: auto; min-height: 380px; }
  .hero--immobilienwissen .hero__bild { height: 100%; }
  .hero--immobilienwissen .hero__inner { padding-block: 70px 60px; }
  .wissen__grid-artikel { grid-template-columns: 1fr; }
  .wissen { padding-block: 60px 64px; }
}

/* ================================================================
   IMMOBILIENWISSEN ARTIKEL (2003:1338) — 16.07.2026
   Hero 1:1 von der Uebersichtsseite (hero--immobilienwissen, gleiches Bild,
   gleicher Ausschnitt). Neu ist nur die Prosa-Strecke.
   Figma-Reihenfolge beachten: Erstgespraech (y=2172) VOR Newsletter (y=2782)
   — umgekehrt zur Uebersichtsseite.
   ================================================================ */

/* Figma: Hero-Ende 537 -> Headline 626 (89px), Zeilenbox-Korrektur wie im Hero. */
.artikel { padding-block: 86px 93px; }

.artikel__zurueck {
  font-size: var(--fs-klein);
  margin-bottom: 18px;
}
.artikel__zurueck a {
  color: var(--sidebar-bg);
  text-decoration: none;
  transition: color var(--dur-schnell) var(--ease);
}
.artikel__zurueck a:hover { color: var(--orange); }

/* MODERNISIERUNG (User-Vorgabe 16.07., bewusste Abweichung von Figma).
   Uebernommen: Lesebreite, Lora-Zwischenueberschriften, Tipp-Kasten, Lead.
   VERWORFEN auf User-Wunsch: Nummern-Kreise und Sprungmarken-Pills.
   Kein neues Gestaltungselement: Der Tipp-Kasten ist die Sprache des
   freigegebenen .warum__zitat (Careimmo: beige-60 + r8) mit der orangen
   Kante des .ergebnis-band (Projektentwickler). */

.artikel__body { margin-top: 29px; }   /* Figma: Headline-Ende 730 -> Body 759 */

/* LESEBREITE (Kernpunkt): Figma-Node 2012:1552 laeuft ueber die volle
   Content-Breite -> gemessen 116 Zeichen pro Zeile (Empfehlung 45-90).
   Auf 704px begrenzt = gemessen 93 Zeichen/Zeile. Bewusst nicht schmaler,
   sonst wird die Strecke unnoetig lang. */
.artikel__body > * { max-width: 704px; }

.artikel__intro,
.artikel__text {
  font-size: var(--fs-text);
  line-height: 24px;
  color: var(--text-dunkel);
}

/* Lead: erster Absatz groesser, in HNG-Blau (Figma: nur SemiBold). */
.artikel__intro {
  font-size: 17px;
  line-height: 27px;
  font-weight: 600;
  color: var(--hng-blau);
}
.artikel__intro + .artikel__intro {
  margin-top: 10px;
  font-size: var(--fs-text);
  line-height: 22px;
  font-weight: 400;
  color: var(--text-dunkel);
}

.artikel__text { font-weight: 400; }
.artikel__text + .artikel__text { margin-top: 12px; }

/* Zwischenueberschriften in Lora (Projekt-Headline-Schrift) statt Montserrat.
   Figma zeigt Montserrat SemiBold 20; Lora schafft die Hierarchie zum
   Montserrat-Fliesstext. Der Text "Fehler N: ..." bleibt 1:1 aus Figma. */
.artikel__h2 {
  max-width: 704px;
  margin-top: 52px;
  margin-bottom: 14px;
  font-family: var(--font-headline);
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
  color: var(--hng-blau);
  scroll-margin-top: calc(var(--header-h) + 20px);
}

/* Tipp-Kasten = .warum__zitat-Sprache + orange Kante wie .ergebnis-band */
.artikel__tipp {
  max-width: 704px;
  margin-top: 18px;
  padding: 17px 24px;
  background: var(--beige-60);
  border-radius: var(--radius-m);
  border-left: 3px solid var(--orange);
}
.artikel__tipp-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}
.artikel__tipp p {
  font-size: var(--fs-text);
  line-height: 22px;
  font-weight: 600;
  color: var(--hng-blau);
}

@media (max-width: 720px) {
  .artikel { padding-block: 56px 60px; }
  .artikel__h2 { margin-top: 40px; font-size: 22px; line-height: 28px; }
  .artikel__intro { font-size: 16px; line-height: 25px; }
  .artikel__tipp { padding: 15px 18px; }
}

/* Article content from the database (article_model) is plain HTML
   (p/h2/blockquote, per the renderHtml() whitelist) rather than the
   hand-set .artikel__text/.artikel__h2/.artikel__tipp classes above.
   These rules map the same look onto the bare tags inside .artikel__body. */
.artikel__body p {
  max-width: 704px;
  font-size: var(--fs-text);
  line-height: 24px;
  font-weight: 400;
  color: var(--text-dunkel);
}
.artikel__body p + p { margin-top: 12px; }
.artikel__body p:first-of-type {
  font-size: 17px;
  line-height: 27px;
  font-weight: 600;
  color: var(--hng-blau);
}
.artikel__body h2 {
  max-width: 704px;
  margin-top: 52px;
  margin-bottom: 14px;
  font-family: var(--font-headline);
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
  color: var(--hng-blau);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.artikel__body blockquote {
  max-width: 704px;
  margin-top: 18px;
  padding: 17px 24px;
  background: var(--beige-60);
  border-radius: var(--radius-m);
  border-left: 3px solid var(--orange);
  font-size: var(--fs-text);
  line-height: 22px;
  font-weight: 600;
  color: var(--hng-blau);
}
@media (max-width: 720px) {
  .artikel__body h2 { margin-top: 40px; font-size: 22px; line-height: 28px; }
  .artikel__body p:first-of-type { font-size: 16px; line-height: 25px; }
  .artikel__body blockquote { padding: 15px 18px; }
}

/* ================================================================
   SCHLICHTE SEITEN-HEROS (Impressum, Datenschutz, Newsletter an-/abmelden)
   — 21.07.2026
   Kein Figma-Node vorhanden, diese Seiten waren nicht Teil des Redesigns.
   Hero bewusst ohne Foto (User-Vorgabe 21.07.): flache Navy-Fläche statt
   eines für 927px/440px exportierten Bilds, das hier falsch beschnitten
   würde. Ein Modifier fuer alle reinen Funktionsseiten ohne Marketing-Bild.
   ================================================================ */

.hero--schlicht { min-height: 0; height: 320px; background: var(--hng-blau); }
.hero--schlicht .hero__inner { padding-block: 0; }
.hero--schlicht .hero__eyebrow { margin-bottom: 16px; }
.hero--schlicht .display { margin: 0; }

@media (max-width: 720px) {
  .hero--schlicht { height: auto; min-height: 220px; }
  .hero--schlicht .hero__inner { padding-block: 56px; }
}

/* ================================================================
   RECHTLICHE SEITEN (Impressum, Datenschutzerklärung) — 21.07.2026
   Prosa-Typografie an .artikel__body angelehnt, aber ohne den
   Lead-Absatz-Sonderfall (reiner Rechtstext kennt kein "erste Zeile
   wichtiger") und mit zusätzlicher h3-Ebene für Unterabschnitte.
   ================================================================ */

.recht__body > * { max-width: 704px; }

.recht__body h2 {
  margin-top: 52px;
  margin-bottom: 14px;
  font-family: var(--font-headline);
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
  color: var(--hng-blau);
}
.recht__body h2:first-child { margin-top: 0; }

.recht__body h3 {
  margin-top: 32px;
  margin-bottom: 8px;
  font-family: var(--font-text);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--hng-blau);
}

.recht__body p {
  font-size: var(--fs-text);
  line-height: 1.7;
  color: var(--text-dunkel);
}
.recht__body p + p { margin-top: 12px; }

.recht__body ul {
  margin: 0 0 16px 20px;
  list-style: disc;
  color: var(--text-dunkel);
}
.recht__body li { margin: 4px 0; line-height: 1.65; }

.recht__body a { color: var(--hng-blau); text-decoration: underline; }

.recht__body hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid rgb(0 0 0 / 0.1);
}

@media (max-width: 720px) {
  .recht__body h2 { margin-top: 40px; font-size: 22px; line-height: 28px; }
}

/* ================================================================
   NEWSLETTER-SEITEN (Anmelden, Abmelden) — 21.07.2026
   Voller Anmelde-/Abmelde-Flow: verlinkt aus dem Footer der Bestandsseiten
   (engine/htdocs/includes/project/footer.php, noch nicht redesignt) und aus
   dem Mailing-Footer (Abmelden, _template_bottom.php). Karte in der Optik
   von .kontakt__form-karte (Beige, r12), aber ohne Kontakt-Bezug generisch
   benannt, da beide Seiten sie teilen. Felder als Placeholder wie die
   uebrigen Newsletter-Formulare der Seite (.newsletter__form), nur fuer
   einen hellen statt dunklen Hintergrund neu eingefaerbt.
   ================================================================ */

.newsletter-seite {
  max-width: 480px;
  margin-inline: auto;
  text-align: center;
}
.newsletter-seite .h3 { margin-bottom: 12px; }
.newsletter-seite__copy { margin-bottom: 32px; color: var(--text-dunkel); }

.formular-karte {
  text-align: left;
  background: var(--beige);
  border-radius: 12px;
  padding: 33px;
}
.formular-karte form { display: grid; gap: 16px; }
.formular-karte__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formular-karte .feld input[type="text"],
.formular-karte .feld input[type="email"] {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  font-family: var(--font-text);
  font-size: var(--fs-text);
  color: var(--text-dunkel);
  background: var(--weiss);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  transition: border-color var(--dur-schnell) var(--ease);
}
.formular-karte .feld input::placeholder { color: rgb(46 40 37 / 0.45); }
.formular-karte .feld input:focus { outline: none; border-color: var(--hng-blau); }
.formular-karte .feld input[aria-invalid="true"] { border-color: var(--orange); }
.formular-karte .checkbox { color: var(--text-dunkel); font-size: var(--fs-nav); }
.formular-karte .form-status { color: var(--text-dunkel); }
.formular-karte .form-status--erfolg { color: var(--hng-blau); }
.formular-karte .form-status--fehler { color: var(--orange); }
.formular-karte__btn { width: 100%; }
.formular-karte__pflicht {
  display: block;
  text-align: right;
  font-size: var(--fs-nav);
  color: var(--text-dunkel);
}

@media (max-width: 480px) {
  .formular-karte__zeile { grid-template-columns: 1fr; }
}

/* ================================================================
   PERSOENLICHER KONTAKT (engine/layouts/sections/personal-contact.php)
   — 21.07.2026
   Die Datei selbst bleibt unveraendert (wird weiterhin von der alten
   Projektseite project/start-dynamic.php eingebunden, die ihre eigenen
   Tailwind-/.site-button-Styles laedt). Diese Regeln greifen nur auf
   Seiten, die redesign/components.css laden (Website-Familie) und
   stylen dieselbe Struktur/Klassen ohne die Quelldatei anzufassen -
   Projektseite bleibt unberuehrt (User-Vorgabe 21.07.).
   ================================================================ */

#personal-contact {
  padding-block: 80px;
  background: var(--beige-60);
}
#personal-contact > div {
  max-width: 730px;
  margin-inline: auto;
  padding-inline: 24px;
}
#personal-contact h2 {
  margin-bottom: 32px;
  font-family: var(--font-headline);
  font-size: 32px;
  font-weight: 700;
  color: var(--hng-blau);
}
#personal-contact .flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
#personal-contact .flex-shrink-0 { flex: none; }
#personal-contact .rounded-full { border-radius: 999px; overflow: hidden; }
#personal-contact .text-center { text-align: center; }
#personal-contact .text-left { text-align: left; }
#personal-contact p { color: var(--text-dunkel); }
#personal-contact p:first-of-type {
  font-size: 18px;
  font-weight: 700;
  color: var(--hng-blau);
}
#personal-contact p + p { margin-top: 4px; }
#personal-contact .site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 7px 30px;
  border-radius: var(--radius-m);
  background: var(--orange);
  color: var(--weiss);
  font-family: var(--font-text);
  font-size: var(--fs-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color var(--dur-normal) var(--ease),
              color var(--dur-normal) var(--ease);
}
#personal-contact .site-button:hover { background: var(--weiss); color: var(--orange); }

@media (min-width: 640px) {
  #personal-contact .flex { flex-direction: row; }
}

/* ================================================================
   KONTAKTFORMULAR-MODALS (Figma 177:591 Berater / 177:559 Projektentwickler)
   — 16.07.2026
   Figma zeigt den Formularbereich NUR als Bitmap-Screenshot (kein Node).
   Felder/Labels stammen aus den vom User gelieferten Screenshots, das
   Styling ist aus der freigegebenen .kontakt-form-Sprache abgeleitet
   (Handover: "Styling ableiten ist freigegeben").

   LAYOUT C (User-Vorgabe 16.07., bewusste Abweichung von Figma):
   Zweispaltig — blaue Info-Spalte links (.section--dunkel-Sprache) + Formular
   rechts, Felder paarweise. Grund: Der Figma-Entwurf (1164px, einspaltig) ist
   gemessen 1006px hoch und scrollt auf einem normalen Laptop intern; der
   Absende-Button war erst nach dem Scrollen sichtbar. Layout C misst 555px.
   Die drei Argumente in der Info-Spalte sind die freigegebenen
   .erstgespraech__checks — kein neues Gestaltungselement, keine neue Farbe.

   Natives <dialog>: Fokus-Falle, ESC-Schliessen und Backdrop kommen vom
   Browser — kein Fremdcode, kein eigener Overlay-Nachbau.
   ================================================================ */
.modal {
  width: min(980px, calc(100vw - 40px));     /* Layout C: 980 statt Figma-1164 */
  max-height: calc(100vh - 40px);
  /* Zentrierung: <dialog> braucht margin:auto, sonst klebt der Dialog oben
     links (Fehler gefunden 16.07. per Messung: x=0/y=0 statt mittig). */
  margin: auto;
  padding: 0;
  border: none;
  border-radius: var(--radius-l);            /* Layout C: r10 wie .anmelde-karte */
  background: var(--weiss);
  color: var(--text-dunkel);
  overflow: auto;
}
.modal::backdrop { background: rgb(0 0 0 / 0.6); }  /* wie die Banner-Overlays */

/* Sanftes Einblenden — Dauer/Kurve aus den Projekt-Tokens, kein neuer Wert. */
.modal[open] { animation: modal-auf var(--dur-normal) var(--ease); }
@keyframes modal-auf {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal[open]::backdrop { animation: modal-backdrop var(--dur-normal) var(--ease); }
@keyframes modal-backdrop {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .modal[open],
  .modal[open]::backdrop { animation: none; }
}

/* Layout C: Info-Spalte 300px + Formular */
.modal__karte {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: stretch;
}

.modal__schliessen {
  position: absolute;
  top: 11px;                                 /* Figma: y=11 */
  right: 15px;
  z-index: 1;
  border: none;
  background: none;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 20px;                           /* Figma: Montserrat Medium 20 */
  line-height: 22px;
  color: var(--sidebar-bg);                  /* Figma: #9B8E7E */
  cursor: pointer;
  transition: color var(--dur-schnell) var(--ease);
}
.modal__schliessen:hover { color: var(--orange); }

/* --- Info-Spalte (dunkelblau) --- */
.modal__info {
  padding: 40px 32px;
  background: var(--hng-blau);
  color: var(--beige);
}
/* Headline: Lora Bold + Italic wie Figma, aber 26px statt 44px —
   44px ist eine Seiten-H2 und sprengt die 300px-Spalte. */
.modal__titel {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 26px;
  line-height: 32px;
  color: var(--beige);                       /* dunkle Sektion: komplett #F5F0E8 */
}
.modal__titel em { font-style: italic; }
.modal__copy {
  margin-top: 16px;
  font-size: var(--fs-text);
  line-height: 22px;
  color: rgb(245 240 232 / 0.9);
}
/* Punkte = .erstgespraech__checks 1:1 (oranges Badge r5 + weisser Haken) */
.modal__punkte { display: grid; gap: 10px; margin-top: 26px; }
.modal__punkte li {
  position: relative;
  padding-left: 28px;
  font-size: var(--fs-text);
  line-height: 20px;
  font-weight: 600;
  color: var(--beige);
}
.modal__punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: var(--orange);
}
.modal__punkte li::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 11px;
  height: 6px;
  border: 2px solid var(--weiss);
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

/* --- Formular-Spalte --- */
.modal__form { padding: 40px 40px 44px; }
.modal__zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.modal__zwei + .feld,
.modal__form .modal-form > .feld { margin-top: 16px; }

/* Felder: Sprache der freigegebenen .kontakt-form, Rahmen wie im Screenshot */
.modal-form .feld { display: grid; gap: 6px; }
.modal-form .feld > label {
  font-size: var(--fs-klein);
  font-weight: 600;
  color: var(--text-dunkel);
  line-height: 16px;
}
.modal-form .feld input[type="text"],
.modal-form .feld input[type="email"],
.modal-form .feld input[type="tel"],
.modal-form .feld select,
.modal-form .feld textarea {
  width: 100%;
  padding: 12px 15px;
  font-family: var(--font-text);
  font-size: var(--fs-text);
  color: var(--text-dunkel);
  background: var(--weiss);
  border: 1px solid var(--sand);             /* Screenshot: heller Rahmen */
  border-radius: var(--radius-m);
  transition: border-color var(--dur-schnell) var(--ease);
}
.modal-form .feld input[type="text"],
.modal-form .feld input[type="email"],
.modal-form .feld input[type="tel"],
.modal-form .feld select { height: 46px; }
.modal-form .feld textarea { height: 88px; resize: vertical; }
.modal-form .feld input:focus,
.modal-form .feld select:focus,
.modal-form .feld textarea:focus { outline: none; border-color: var(--hng-blau); }
.modal-form .feld input[aria-invalid="true"],
.modal-form .feld select[aria-invalid="true"],
.modal-form .feld textarea[aria-invalid="true"] { border-color: var(--orange); }

/* Datei-Upload (nur Projektentwickler; Screenshot zeigt "Durchsuchen…") */
.modal-form .feld--datei > label { color: var(--sidebar-bg); }
.modal-form .feld input[type="file"] {
  width: 100%;
  padding: 11px 15px;
  font-family: var(--font-text);
  font-size: var(--fs-text);
  color: var(--text-dunkel);
  background: var(--weiss);
  border: 1px solid var(--sand);
  border-radius: var(--radius-m);
}
.modal-form .feld input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 6px 14px;
  font-family: var(--font-text);
  font-size: var(--fs-text);
  color: var(--text-dunkel);
  background: var(--weiss);
  border: 1px solid var(--sand);
  border-radius: var(--radius-s);
  cursor: pointer;
}

.modal-form .feld--checkbox { gap: 0; margin-top: 20px; }
.modal-form .checkbox { color: var(--text-dunkel); font-size: var(--fs-text); }

/* Button: freigegebene .btn--outline-orange (transparent + oranger Rahmen wie Figma).
   HOEHE: Die Projekt-.btn ist 38px hoch — auf allen freigegebenen Seiten identisch.
   Figma zeigt 40px; bewusst bei der freigegebenen Komponente geblieben.
   BREITE: Layout C -> volle Spaltenbreite statt der Figma-516px. */
.modal-form__btn {
  display: flex;
  width: 100%;
  margin-top: 26px;
  justify-content: center;
}
.modal-form .form-status:empty { margin-top: 0; }

@media (max-width: 900px) {
  /* Spalten stapeln: Info-Block steht dann ueber dem Formular. */
  .modal__karte { grid-template-columns: 1fr; }
  .modal__info { padding: 32px 26px; }
  .modal__schliessen { color: var(--beige); }
}
@media (max-width: 720px) {
  .modal__form { padding: 28px 22px 32px; }
  .modal__zwei { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   Motion-Feinschliff (17.07.) – rein additiv.
   Karten-Hover, Tab-Fades und Hero-Auftakt; keine Layout- oder
   Inhaltsaenderungen. Reduced-Motion wird global in base.css
   abgefangen (transition/animation-duration -> 0.01ms).
   ============================================================ */

/* Karten ohne Hover-Zustand: dezenter Lift, analog .wissen-karte */
.benefit,
.saeule-karte {
  transition: transform var(--dur-schnell) var(--ease),
              box-shadow var(--dur-normal) var(--ease);
}
.benefit:hover,
.saeule-karte:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgb(0 0 0 / 0.08);
}

/* Objekttyp-Panels: nur weicher Schatten, bewusst ohne Bewegung
   (die grossen Flaechen sollen ruhig bleiben) */
.objekttyp {
  transition: box-shadow var(--dur-normal) var(--ease);
}
.objekttyp:hover { box-shadow: 0 14px 34px rgb(0 0 0 / 0.09); }

/* Produkt-Tabs blenden wie die Marken-Tabs weich ein (nutzt panelEin) */
.produkt-tabs__panel.is-aktiv {
  animation: panelEin var(--dur-slide) var(--ease);
}

/* Hero-Auftakt: Eyebrow, Headline, Copy und Buttons gestaffelt */
.hero__inner > * {
  animation: hero-auftakt 650ms var(--ease) both;
}
.hero__inner > *:nth-child(2) { animation-delay: 100ms; }
.hero__inner > *:nth-child(3) { animation-delay: 200ms; }
.hero__inner > *:nth-child(4) { animation-delay: 300ms; }
.hero__inner > *:nth-child(5) { animation-delay: 400ms; }
.hero__inner > *:nth-child(6) { animation-delay: 500ms; }
@keyframes hero-auftakt {
  from { opacity: 0; transform: translateY(18px); }
}