/* ============================================================
   KONFORM Immoverwaltung e.K. — Stylesheet (Redesign 2026)
   Designsprache: hell, luftig, weiche Karten, Pill-Buttons.
   Primärfarbe aus dem Logo: #45709d
   ============================================================ */

/* DM Sans – self-hosted, no Google data transfer */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* ── Markenfarbe (Logo) + Abstufungen ── */
  --primary:       #45709d;
  --primary-050:   #f2f6fa;
  --primary-100:   #e4edf5;
  --primary-150:   #d3e0ec;
  --primary-200:   #c0d3e4;
  --primary-300:   #97b4cf;
  --primary-400:   #6b91b5;
  --primary-500:   #45709d;
  --primary-600:   #3a608a;
  --primary-700:   #325071;
  --primary-800:   #2a415c;
  --primary-900:   #223549;
  --primary-950:   #16222f;

  /* ── Neutrale Töne ── */
  --white:    #ffffff;
  --ink:      #223549;               /* Überschriften: entspricht --primary-900, klare Hierarchie gegenüber Fließtext #46545f */
  --text:     #46545f;               /* Fließtext */
  --muted:    #6d7c89;               /* Sekundärtext */
  --surface:  #f4f7fa;               /* helle Wechselfläche */
  --line:     #e3eaf1;               /* Rahmen/Linien */

  /* ── Akzent (sparsam, z. B. Badges/Sterne) ── */
  --gold: #d9a13b;

  /* ── Legacy-Aliase (alte Var-Namen → neue Werte) ── */
  --kobalt:        var(--primary);
  --kobalt-mid:    var(--primary-600);
  --kobalt-deep:   var(--primary-800);
  --color-gelb:    var(--gold);
  --color-blau:            var(--primary);
  --color-blau-hover:      var(--primary-600);
  --color-blau-active:     var(--primary-700);
  --color-blau-tief:       var(--primary-800);
  --color-blau-mittel:     var(--primary);
  --color-blau-hell:       var(--primary-100);
  --color-blau-bg:         var(--primary-050);
  --color-weiss:           var(--white);
  --color-text-creme:      rgba(255,255,255,0.92);
  --color-text-dunkel:     var(--ink);
  --color-text-body:       var(--text);
  --color-text-eyebrow:    var(--primary-600);
  --color-placeholder:     rgba(70,84,95,0.45);
  --color-rahmen:          var(--line);
  --color-rahmen-focus:    var(--primary);

  /* Typografie */
  --font-main: 'DM Sans', 'Inter', Arial, sans-serif;
  --font-serif: 'DM Sans', Georgia, serif;

  /* Größen */
  --h3: 20px;
  --body: 16px;
  --eyebrow: 12px;

  /* Abstände */
  --spacing-xs:  8px;
  --spacing-sm:  16px;
  --spacing-md:  32px;
  --spacing-lg:  64px;
  --spacing-xl:  104px;

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-med:  0.30s ease;
  --transition-slow: 0.50s ease;

  /* Schatten – weich, blaubasiert */
  --shadow-soft:       0 1px 2px rgba(34,53,73,0.05), 0 4px 16px rgba(34,53,73,0.06);
  --shadow-card:       0 2px 6px rgba(34,53,73,0.05), 0 10px 30px rgba(34,53,73,0.08);
  --shadow-card-hover: 0 4px 10px rgba(34,53,73,0.07), 0 18px 44px rgba(34,53,73,0.13);
  --shadow-nav:        0 2px 18px rgba(34,53,73,0.09);

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-img:  14px;
  --radius-pill: 999px;

  /* Nav-Höhe */
  --nav-height: 76px;
}

/* ============================================================
   RESET & BASIS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--body);
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; }
img { display: inline-block; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-main);
  color: var(--ink);
  line-height: 1.22;
  margin: 0 0 0.6em;
  font-weight: 700;
  letter-spacing: -0.015em;
  /* Lange deutsche Komposita sauber umbrechen statt Overflow */
  overflow-wrap: break-word;
}
/* Silbentrennung nur auf schmalen Viewports, wo Komposita sonst überlaufen.
   Überschriften nutzen zusätzlich weiche Trennstellen (­) an den Wortfugen. */
@media (max-width: 860px) {
  h1, h2, h3, h4, .faq-question,
  p, li, .faq-answer-inner {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 4 3;
  }
}
/* Freigegebene Komposita brechen ausschließlich an der gesetzten Wortfuge (­),
   nicht am automatischen Silbenpunkt. Wirkt nur, wenn das Wort nicht in die Zeile passt. */
.brk { hyphens: manual; -webkit-hyphens: manual; }

h1 { font-size: clamp(34px, 4.4vw, 52px); }
h2 { font-size: clamp(27px, 3.2vw, 38px); }
h3 { font-size: var(--h3); letter-spacing: -0.01em; }
h4 { font-size: 17px; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary-600); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--primary-700); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

::selection { background: var(--primary-150); color: var(--primary-900); }

:focus-visible {
  outline: 3px solid var(--primary-300);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -48px; left: 16px;
  z-index: 2000;
  background: var(--primary-800);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; color: #fff; }

/* ============================================================
   LAYOUT-HELFER
   ============================================================ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.container--narrow { max-width: 860px; }

.section { padding: var(--spacing-xl) 0; }
.section--weiss  { background: var(--white); }
.section--creme  { background: var(--surface); }
.section--dunkel { background: var(--primary-800); }
.section--dunkel h2, .section--dunkel h3 { color: #fff; }
.section--dunkel p { color: rgba(255,255,255,0.85); }

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

.text-center { text-align: center; }

/* Eyebrow */
.eyebrow {
  display: inline-block;
  font-size: var(--eyebrow);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary-600);
  margin-bottom: 14px;
}
.eyebrow--light, .eyebrow--hero { color: rgba(255,255,255,0.85); }

/* Section-Header */
.section-header { max-width: 780px; margin-bottom: 56px; }
.section-header--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-title { margin-bottom: 18px; }
.section-title--light { color: #fff; }
.section-subtitle {
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}
.section-subtitle--light { color: rgba(255,255,255,0.85); }

.inline-link {
  color: var(--primary-600);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--primary-200);
  text-underline-offset: 3px;
}
.inline-link:hover { text-decoration-color: var(--primary-500); }

/* ============================================================
   BUTTONS — Pill-Form
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.btn:active { transform: translateY(1px); }

.btn--lg   { padding: 16px 34px; font-size: 16px; }
.btn--full { width: 100%; }

.btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(69,112,157,0.30);
}
.btn--primary:hover { background: var(--primary-600); color: #fff; box-shadow: 0 8px 24px rgba(69,112,157,0.38); }

/* Weißer Button (für farbige Flächen) */
.btn--light,
.cta-band .btn--primary,
.section--dunkel .btn--primary {
  background: #fff;
  color: var(--primary-700);
  box-shadow: 0 6px 18px rgba(22,34,47,0.22);
}
.btn--light:hover,
.cta-band .btn--primary:hover,
.section--dunkel .btn--primary:hover { background: var(--primary-050); color: var(--primary-800); }

.btn--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.65);
}
.btn--secondary:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: #fff; }

.btn--outline,
.btn--ghost {
  background: transparent;
  color: var(--primary-600);
  border-color: var(--primary-300);
}
.btn--outline:hover,
.btn--ghost:hover { background: var(--primary-050); color: var(--primary-700); border-color: var(--primary-400); }

.btn--outline-white,
.btn--outline-light {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border-color: rgba(255,255,255,0.65);
}
.btn--outline-white:hover,
.btn--outline-light:hover { background: rgba(255,255,255,0.20); color: #fff; border-color: #fff; }

/* Ladezustand (Formulare) */
.btn-loading { display: none; }
.btn.is-loading .btn-text { display: none; }
.btn.is-loading .btn-loading { display: inline-flex; align-items: center; gap: 8px; }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   HEADER — weiß, sticky
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1101; /* ueber dem Mobile-Menue (1100), damit der Hamburger als X sichtbar/klickbar bleibt */
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition-med), border-color var(--transition-med);
}
.site-header.scrolled-mid { border-bottom-color: var(--line); }
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-nav); }

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img,
.logo-combined { height: 60px; width: auto; display: block; } /* 46 -> 55 -> 60px; Mobilwert (<=1024px) bleibt 56px, sonst sprengt es die 66px-Leiste */

/* Desktop-Navigation */
.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
}
.nav-link:hover { color: var(--primary-700); background: var(--primary-050); }
.nav-link.active { color: var(--primary-700); font-weight: 600; }

.dropdown-arrow {
  width: 11px; height: 8px;
  transition: transform var(--transition-fast);
  opacity: 0.55;
}
.nav-item.open .dropdown-arrow { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 250px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.nav-item.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.dropdown-item {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.dropdown-item:hover { background: var(--primary-050); color: var(--primary-700); }
.dropdown-item.active { color: var(--primary-700); font-weight: 600; }

/* Nav-Aktionen rechts */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.nav-actions .btn { padding: 11px 22px; font-size: 14.5px; }

.lang-switcher {
  display: none; /* EN noch nicht aktiv, Sprachumschalter site-weit ausgeblendet (Struktur bleibt erhalten) */
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
}
.lang-btn { color: var(--muted); padding: 4px 2px; }
.lang-btn:hover { color: var(--primary-600); }
.lang-btn.active { color: var(--primary-700); }
.lang-sep { color: var(--line); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--transition-med), opacity var(--transition-med);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MOBILE MENÜ
   ============================================================ */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(31,45,61,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-med), visibility var(--transition-med);
}
.mobile-menu-overlay.open { opacity: 1; visibility: visible; }

.mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 1100;
  width: min(400px, 92vw);
  background: var(--white);
  display: flex;
  flex-direction: column;
  padding-top: var(--nav-height);
  transform: translateX(105%);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -12px 0 40px rgba(34,53,73,0.18);
}
.mobile-menu.open { transform: translateX(0); }

.mobile-nav {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
}
.mobile-nav-section { padding: 10px 0; }
.mobile-nav-title,
.mobile-nav-title--link {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.mobile-nav-title--link.active { color: var(--primary-600); }
.mobile-nav-sub { display: flex; flex-direction: column; padding: 2px 0 4px 14px; }
.mobile-nav-link {
  padding: 7px 0;
  font-size: 15.5px;
  color: var(--text);
}
.mobile-nav-link.active { color: var(--primary-600); font-weight: 600; }
.mobile-divider { height: 1px; background: var(--line); margin: 4px 0; }

.mobile-nav-cta {
  padding: 20px 28px 28px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
}
.mobile-nav-cta-portal {
  font-weight: 600;
  color: var(--primary-700);
  text-align: center;
  padding: 8px;
}
.mobile-lang-switcher {
  display: none; /* EN noch nicht aktiv, Sprachumschalter site-weit ausgeblendet (Struktur bleibt erhalten) */
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}
.mobile-lang-btn { color: var(--muted); }
.mobile-lang-btn.active { color: var(--primary-700); }
.mobile-lang-sep { color: var(--line); }

/* ============================================================
   HERO — Startseite: Foto + weiße Karte
   ============================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(78vh, 760px);
  padding: 96px 0;
  overflow: hidden;
  background: var(--primary-900);
}
.hero-bg,
.hero-parallax-bg {
  position: absolute;
  /* Parallax-Puffer NUR oben: initParallax() schiebt das Bild per translateY nach
     unten, unbedeckt bleibt daher immer nur der obere Rand. Ein Puffer unten waere
     wirkungslos und wuerde das Element hoeher machen; weil background-size:cover die
     Hoehe fuellt, zoomt jede zusaetzliche Hoehe ins Bild und beschneidet die Breite.
     Frueher -80px 0 (= 160px Extrahoehe) -> 21,5% seitlich beschnitten. Jetzt 40px
     nur oben -> 9,7% beschnitten, sichtbar groesserer Bildausschnitt, keine Luecken. */
  inset: -40px 0 0 0;
  background-image: url('../images/hero-bg-1600.jpg?v=3');
  background-size: cover;
  background-position: center 40%;
  will-change: transform;
}
.hero-overlay {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(22,34,47,0.34) 0%, rgba(22,34,47,0.09) 50%, rgba(22,34,47,0) 100%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.hero-text {
  position: relative;
  max-width: 620px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4.5vw, 56px);
  box-shadow: 0 24px 70px rgba(22,34,47,0.28);
}
.hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary-600);
  margin-bottom: 16px;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 26px; height: 2px;
  background: var(--primary-400);
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 2px;
}
.hero h1,
.hero-title {
  color: var(--ink);
  font-size: clamp(30px, 3.6vw, 46px);
  margin-bottom: 18px;
}
.hero-h1-sub {
  display: block;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--primary-600);
  margin-top: 0.55em;
  line-height: 1.4;
}
.hero-title-accent { color: var(--primary-600); }
/* Verhindert Umbruch innerhalb von Wortgruppen mit Bindestrich.
   "Rhein-Main-Gebiet" wuerde sonst an den Bindestrichen getrennt. */
.nobr { white-space: nowrap; }
.hero-subtitle {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 28px;
}
.hero-cta-group,
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
/* Startseiten-Hero: beide CTAs auf einer Zeile (Mobilumbruch bleibt, siehe unten) */
.hero-text .hero-cta-group { flex-wrap: nowrap; }
/* Im weißen Hero-Panel: Outline-Buttons in Primärfarbe statt Weiß */
.hero-text .btn--outline-white,
.hero-text .btn--secondary {
  background: transparent;
  color: var(--primary-600);
  border-color: var(--primary-300);
}
.hero-text .btn--outline-white:hover,
.hero-text .btn--secondary:hover { background: var(--primary-050); color: var(--primary-700); border-color: var(--primary-400); }

.hero-trust-logos {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

/* ============================================================
   PAGE-HERO — Unterseiten
   ============================================================ */
.page-hero {
  position: relative;
  background:
    radial-gradient(1100px 420px at 82% -80px, var(--primary-100) 0%, rgba(228,237,245,0) 60%),
    var(--surface);
  border-bottom: 1px solid var(--line);
  padding: clamp(64px, 8vw, 104px) 0 clamp(56px, 7vw, 88px);
  overflow: hidden;
}
.page-hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.page-hero h1 { margin-bottom: 16px; }
.page-hero-subtitle {
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 auto;
  max-width: 680px;
}
.page-hero .hero-actions,
.page-hero .hero-cta-group { justify-content: center; }

/* Split-Variante mit Bild (Leistungsseiten) */
.page-hero--split .page-hero-content {
  max-width: 1200px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  text-align: left;
}
.page-hero--split .page-hero-content > * { min-width: 0; }
.page-hero--split h1 { font-size: clamp(30px, 3.6vw, 44px); }
.page-hero--split .page-hero-subtitle { margin: 0; }
.page-hero--split .hero-actions,
.page-hero--split .hero-cta-group { justify-content: flex-start; }

.leistung-hero-img,
.weg-hero-img,
.sonder-hero-img,
.hybride-hero-img,
.page-hero-img {
  width: 100%;
  height: clamp(280px, 30vw, 420px);
  object-fit: cover;
  border-radius: var(--radius-img);
  box-shadow: var(--shadow-card-hover);
  display: block;
}
.hybride-hero-wrapper { position: relative; }

.img-placeholder {
  background: var(--primary-100);
  border-radius: var(--radius-img);
  min-height: 260px;
}
.img-placeholder--hero { min-height: 340px; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.trust-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 48px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
}
.trust-item-icon {
  width: 20px; height: 20px;
  color: var(--primary);
  flex-shrink: 0;
}
.trust-item-text { white-space: nowrap; }
.trust-sep { color: var(--line); }
.trust-logo-img {
  height: 24px;
  width: auto;
  object-fit: contain;
}
.trust-logo-ihk { height: 20px; }

/* ============================================================
   SERVICE-KARTEN
   ============================================================ */
.services-grid,
.service-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  box-shadow: var(--shadow-soft);
  color: var(--text);
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
}
a.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--primary-200);
  color: var(--text);
}
.service-card-icon {
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-050);
  border-radius: var(--radius-md);
  margin-bottom: 22px;
}
.service-card-icon svg { width: 26px; height: 26px; stroke: var(--primary) !important; }
.service-card-icon svg [fill]:not([fill="none"]) { fill: var(--primary); }
.service-card h3,
.service-card-title { margin-bottom: 6px; }
.service-subtitle,
.service-card-subtitle {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--primary-600);
  margin-bottom: 12px;
}
.service-card-text, .service-card-body { flex: 1; }
.service-card p:not(.service-subtitle):not(.service-card-subtitle) {
  font-size: 15.5px;
  color: var(--muted);
}
.service-card-link,
.service-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-600);
}
a.service-card:hover .service-card-link { color: var(--primary-700); gap: 10px; }
.service-card-link span { transition: transform var(--transition-fast); }
a.service-card:hover .service-card-link span { transform: translateX(3px); }

.service-card--featured { border-color: var(--primary-200); background: linear-gradient(180deg, var(--primary-050) 0%, var(--white) 45%); }
.service-card-badge {
  position: absolute;
  top: -13px; left: 28px;
  background: var(--primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(69,112,157,0.35);
}
.service-card-for {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 14px;
}

/* Leistungslisten (Detailseiten) */
.service-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.service-list--cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .service-list--cols2 { grid-template-columns: 1fr; } }
.service-list-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
}
.service-list-icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-050);
  color: var(--primary);
  border-radius: 10px;
}
.service-list-icon svg { width: 17px; height: 17px; stroke: var(--primary); }
.service-list-content h3,
.service-list-content h4 { font-size: 17px; margin-bottom: 3px; }
.service-list-content p { font-size: 15px; color: var(--muted); margin: 0; }

/* ============================================================
   LEISTUNGSGRUPPEN (leistung/weg-verwaltung.html)
   Gliedert die Leistungskacheln in drei thematische Bloecke, damit der
   Abschnitt nicht als gleichfoermige Kachelwand wirkt. Bewusst auf
   .leistungsgruppe gekapselt: .service-list wird auch von mietverwaltung
   und sondereigentumsverwaltung genutzt, die unveraendert bleiben.
   ============================================================ */
.leistungsgruppe + .leistungsgruppe { margin-top: 56px; }

.leistungsgruppe-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 6px;
}
.leistungsgruppe-kopf h3 { margin: 0; font-size: 20px; }
.leistungsgruppe-linie {
  flex: 1;
  min-width: 24px;
  height: 1px;
  background: var(--line);
}
/* --muted (#6d7c89) erreicht nur 3,99:1 auf Creme und 4,29:1 auf Weiss und
   verfehlt damit WCAG AA (4,5:1 fuer Fliesstext). --muted-aa ist 7 Prozent
   dunkler und schafft 4,53:1 bzw. 4,87:1. Betrifft die gesamte Website,
   hier vorerst nur fuer diesen Abschnitt gesetzt. */
.leistungsgruppe { --muted-aa: #65737f; }

.leistungsgruppe-intro {
  font-size: 15px;
  color: var(--muted-aa);
  margin: 0 0 20px;
  max-width: 62ch;
}
.leistungsgruppe .service-list-content p { color: var(--muted-aa); }

/* Gleich hohe Kacheln je Reihe. Ohne stretch entstehen bei
   unterschiedlich langen Texten sichtbare Luecken. */
.leistungsgruppe .service-list { align-items: stretch; }
.leistungsgruppe .service-list-item { height: 100%; }

/* Eine Spalte bereits ab 900px, die Kacheln haben durch die
   Gruppenstruktur weniger Breite zur Verfuegung. */
@media (max-width: 900px) {
  .leistungsgruppe .service-list--cols2 { grid-template-columns: 1fr; }
  .leistungsgruppe + .leistungsgruppe { margin-top: 44px; }
}
@media (max-width: 520px) {
  .leistungsgruppe-kopf { gap: 12px; }
}

/* Bildkacheln: Szene und Argument als Einheit (unternehmen.html) */
.usp-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.usp-media-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.usp-media-card img {
  width: 100%;
  aspect-ratio: 700 / 394;
  object-fit: cover;
  display: block;
}
.usp-media-body { padding: 22px 24px 26px; }
.usp-media-head { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.usp-media-head h3 { font-size: 17px; margin: 0; }
.usp-media-body p { font-size: 15px; color: var(--muted); margin: 0; }
@media (max-width: 720px) {
  .usp-media-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   USP-GRID
   ============================================================ */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.usp-grid--2col { grid-template-columns: repeat(2, 1fr); }
.usp-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.usp-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.usp-icon {
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-050);
  color: var(--primary);
  border-radius: 50%;
  margin-bottom: 20px;
}
.usp-icon svg { width: 24px; height: 24px; }
.usp-item h3 { font-size: 18px; margin-bottom: 4px; }
.usp-subtitle {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary-600);
  margin-bottom: 10px;
}
.usp-item p:last-child { font-size: 15px; color: var(--muted); margin: 0; }

/* ============================================================
   ABOUT / ÜBER UNS
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.about-image img,
.headshot-img { display: block; }
.headshot-wrapper {
  border-radius: var(--radius-img) !important;
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
}
.about-text h2 { margin-bottom: 20px; }
.about-text .btn { margin-top: 12px; }

/* ============================================================
   WECHSEL-TIMELINE (4 Schritte)
   ============================================================ */
.wechsel-timeline { position: relative; margin: 24px 0 40px; }
.wechsel-timeline-track {
  position: absolute;
  top: 26px; left: 12%; right: 12%;
  height: 2px;
  background: var(--primary-150);
  border-radius: 2px;
}
.wechsel-timeline-track-fill {
  position: absolute;
  top: 26px; left: 12%;
  height: 2px;
  width: 0;
  background: var(--primary);
  border-radius: 2px;
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wechsel-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wechsel-step { text-align: center; }
.wechsel-step-circle {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 2px solid var(--primary-200);
  color: var(--primary-600);
  font-size: 19px;
  font-weight: 700;
  border-radius: 50%;
  transition: background var(--transition-med), color var(--transition-med), border-color var(--transition-med);
}
.wechsel-step:hover .wechsel-step-circle,
.wechsel-step.is-active .wechsel-step-circle,
.wechsel-step--lp.is-active .wechsel-step-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.wechsel-step-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  max-width: 220px;
  margin: 0 auto;
}
.wechsel-teaser {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  color: var(--muted);
}

/* Wechsel-Detailkarten (verwalterwechsel.html) */
.wechsel-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.wechsel-detail-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  box-shadow: var(--shadow-soft);
}
.wechsel-detail-card--anim { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.wechsel-detail-card--anim.is-visible { opacity: 1; transform: none; }
.wechsel-detail-card.is-highlight { box-shadow: 0 0 0 3px var(--primary-200), var(--shadow-card-hover); }
.wechsel-detail-badge {
  position: absolute;
  top: -13px; left: 26px;
  background: var(--primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
}
.wechsel-detail-icon-wrap {
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-050);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}
.wechsel-detail-icon { width: 24px; height: 24px; color: var(--primary); }
.wechsel-detail-title { margin-bottom: 10px; }
.wechsel-detail-lead { color: var(--muted); font-size: 15.5px; }
.wechsel-detail-list { padding-left: 0; list-style: none; display: grid; gap: 10px; }
.wechsel-detail-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
}
.wechsel-detail-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 4px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--primary-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23325071' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.wechsel-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wechsel-detail-tag {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary-700);
  background: var(--primary-050);
  border: 1px solid var(--primary-150);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
/* Schlichter Hinweiskasten ohne Akzentbalken. .artikel-hinweis ist der
   sprechende Alias fuer den Rechtshinweis am Ende eines Ratgeberartikels. */
.wechsel-detail-hinweis,
.artikel-hinweis {
  background: var(--primary-050);
  border: 1px solid var(--primary-150);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  font-size: 15px;
  color: var(--primary-800);
}

/* ============================================================
   EINZUGSGEBIET
   ============================================================ */
.gebiet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.gebiet-map img,
.maps-iframe-wrap iframe {
  border-radius: var(--radius-img) !important;
  box-shadow: var(--shadow-card);
}
.gebiet-intro { color: var(--muted); margin-bottom: 24px; }
.stadtteile-full { margin-top: 48px; }
.stadtteile-group + .stadtteile-group { margin-top: 28px; }
.stadtteile-list--cols { columns: 4; column-gap: 32px; }
.stadtteile-list--cols li { -webkit-column-break-inside: avoid; break-inside: avoid; }
@media (max-width: 860px) { .stadtteile-list--cols { columns: 2; } }
@media (max-width: 640px) { .stadtteile-list--cols { columns: 1; } }
.stadtteile-heading {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-600);
  margin-bottom: 10px;
}
.stadtteile-list { list-style: none; padding: 0; margin: 0; }
.stadtteile-list li {
  position: relative;
  padding: 4px 0 4px 22px;
  font-size: 15px;
}
.stadtteile-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary-300);
}

/* ============================================================
   CTA-BAND
   ============================================================ */
.cta-band {
  position: relative;
  background: linear-gradient(120deg, var(--primary-700) 0%, var(--primary) 60%, var(--primary-400) 130%);
  color: #fff;
  padding: clamp(72px, 9vw, 112px) 0;
  text-align: center;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  right: -140px; top: -140px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.cta-band::after {
  content: '';
  position: absolute;
  left: -120px; bottom: -180px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}
.cta-band .container, .cta-band-inner { position: relative; z-index: 1; }
.cta-band .section-title { color: #fff; }
.cta-band .section-subtitle { color: rgba(255,255,255,0.88); max-width: 640px; margin: 0 auto; }
.cta-band-text { color: rgba(255,255,255,0.88); max-width: 640px; margin: 0 auto; }
.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}
.cta-band-hint { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,0.75); }

/* ============================================================
   FAQ-AKKORDEON
   ============================================================ */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow var(--transition-med), border-color var(--transition-med);
}
.faq-item.open { border-color: var(--primary-200); box-shadow: var(--shadow-card); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  min-width: 0;
  overflow-wrap: break-word;
}
.faq-item.open .faq-question { color: var(--primary-700); }
.faq-toggle {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-050);
  color: var(--primary-600);
  border-radius: 50%;
  transition: transform var(--transition-med), background var(--transition-med), color var(--transition-med);
}
.faq-toggle svg { width: 14px; height: 14px; }
.faq-item.open .faq-toggle { transform: rotate(180deg); background: var(--primary); color: #fff; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.open .faq-answer { max-height: 620px; }
.faq-answer-inner {
  padding: 0 24px 22px;
  font-size: 15.5px;
  color: var(--muted);
}

/* ============================================================
   FOOTER — Markenfarbe
   ============================================================ */
.site-footer {
  background: var(--primary);
  color: rgba(255,255,255,0.88);
}
.footer-main { padding: 72px 0 56px; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 40px;
}
.footer-brand { max-width: 340px; }
.footer-logo { display: inline-block; margin-bottom: 18px; }
.footer-logo img { height: 44px !important; width: auto; }
.footer-tagline {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.80);
  margin-bottom: 22px;
}
.footer-contact-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.footer-contact-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: rgba(255,255,255,0.85);
}
.footer-contact-item svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 4px; opacity: 0.75; }
.footer-contact-item a { color: #fff; font-weight: 500; }
.footer-contact-item a:hover { text-decoration: underline; color: #fff; }
.footer-trust {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-ihk-badge {
  height: 26px !important;
  width: auto;
  background: #fff;
  padding: 4px 7px;
  border-radius: 6px;
  box-sizing: content-box;
}
.footer-col h4 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer-link {
  font-size: 14.5px;
  color: rgba(255,255,255,0.80);
}
.footer-link:hover { color: #fff; }
.footer-link--title { color: #fff; font-size: inherit; }
.footer-divider { height: 1px; background: rgba(255,255,255,0.16); }
.footer-bottom { background: var(--primary-800); }
.footer-bottom-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.footer-copyright { font-size: 13.5px; color: rgba(255,255,255,0.70); margin: 0; }
.footer-legal-links {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  gap: 22px;
}
.footer-legal-link { font-size: 13.5px; color: rgba(255,255,255,0.75); }
.footer-legal-link:hover { color: #fff; }

/* ============================================================
   COOKIE-BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 1500;
  max-width: 520px;
  background: var(--primary-900);
  color: rgba(255,255,255,0.88);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(22,34,47,0.45);
  padding: 24px 26px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--transition-med), transform var(--transition-med), visibility var(--transition-med);
}
.cookie-banner.visible { opacity: 1; visibility: visible; transform: none; }
.cookie-banner-title { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.cookie-banner-text { font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.cookie-banner-text a { color: #fff; text-decoration: underline; }
.cookie-banner-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-banner-actions .btn { padding: 10px 22px; font-size: 14px; }
.cookie-banner-actions [data-cookie="accept"] {
  background: #fff;
  color: var(--primary-800);
  border-color: #fff;
}
.cookie-banner-actions [data-cookie="accept"]:hover { background: var(--primary-050); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(31,45,61,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-med), visibility var(--transition-med);
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  position: relative;
  width: min(480px, 100%);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(22,34,47,0.35);
  padding: 44px 38px 38px;
  text-align: center;
  transform: translateY(14px);
  transition: transform var(--transition-med);
}
.modal-overlay.open .modal { transform: none; }
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.modal-close:hover { background: var(--primary-050); color: var(--primary-700); }
.modal-icon {
  width: 60px; height: 60px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-050);
  color: var(--primary);
  border-radius: 50%;
}
.modal-icon svg { width: 26px; height: 26px; }
.modal h2 { font-size: 24px; }
.modal p { color: var(--muted); font-size: 15.5px; margin-bottom: 24px; }

/* ============================================================
   FORMULARE
   ============================================================ */
.kontakt-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(28px, 4vw, 44px);
}
.form-section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: start;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.required { color: var(--primary-600); }
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  font-family: var(--font-main);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-textarea { min-height: 130px; resize: vertical; }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-placeholder); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 4px var(--primary-100);
}
/* Solange nichts gewaehlt ist, soll "Bitte waehlen" wie ein Platzhalter
   wirken, also hellgrau wie in den anderen Feldern. Die Optionen selbst
   bleiben normal dunkel. :has deckt auch Auswahlfelder ohne required ab. */
.form-select:invalid,
.form-select:has(option[value=""]:checked) { color: var(--color-placeholder); }
.form-select option { color: var(--ink); }

/* Fehlerdarstellung durchgehend rot: Rahmen, Text und Checkbox. */
.form-input.error,
.form-select.error,
.form-textarea.error { border-color: #c4534f; }
.form-error-msg {
  display: block;
  font-size: 13px;
  color: #b0413d;
  margin-top: 5px;
}
.form-check-group { display: grid; gap: 10px; }
.form-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 18px; height: 18px;
  margin-top: 3px;
  accent-color: var(--primary);
  flex-shrink: 0;
}
.form-check input.error { outline: 2px solid #c4534f; outline-offset: 1px; border-radius: 3px; }
.form-check-label { font-size: 14px; color: var(--text); }
.form-feedback,
.form-message { display: none; }

/* ============================================================
   RUECKMELDUNG NACH DEM ABSENDEN
   Die Klasse hatte bisher ausser display:none keine Gestaltung, und das
   Skript setzte im Erfolgsfall display:flex. Dadurch wurden Ueberschrift,
   Text und Signatur zu nebeneinanderliegenden Flex-Elementen und der
   Kasten zerfiel. Beides ist hier korrigiert.
   ============================================================ */
.form-feedback--success {
  display: block;
  text-align: center;
  background: var(--primary-050);
  border: 1px solid var(--primary-150);
  border-radius: var(--radius-lg);
  padding: 44px 32px;
}
.feedback-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-pill);
}
.feedback-icon svg { width: 26px; height: 26px; stroke: currentColor; }
.feedback-titel {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.feedback-text {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
}
.feedback-signatur {
  margin: 22px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-600);
}

.form-feedback--error {
  display: block;
  background: #fdf4f3;
  border: 1px solid #e9c8c6;
  border-left: 4px solid #c4534f;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #b0413d;
}

@media (max-width: 640px) {
  .form-feedback--success { padding: 32px 20px; }
  .feedback-icon { width: 48px; height: 48px; margin-bottom: 16px; }
  .feedback-titel { font-size: 18px; }
}

/* Fehlertext unter einem Formularfeld. Ersetzt das fruehere blosse
   Ausrufezeichen, das nicht sagte, was zu tun ist. Gold statt Rot,
   passend zur Fehlerdarstellung der Formulare. */
.form-error-text {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: #b0413d;
}

/* Die Datenschutz-Checkbox bekam per JavaScript eine error-Klasse, hatte
   dafuer aber keine Regel. Der Fehler war dort schlicht unsichtbar. */
.form-check-group.error .form-check-label > span { color: #b0413d; }
.form-check-group.error input[type="checkbox"] {
  outline: 2px solid #c4534f;
  outline-offset: 2px;
  border-radius: 3px;
}
.form-message.success,
.form-message.error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
}
.form-message.success { background: #eaf5ee; color: #256b45; }
.form-message.error { background: #fbeeed; color: #a13c38; }
.form-message svg { flex-shrink: 0; margin-top: 2px; }
/* Honeypot */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ============================================================
   TEAM / WERTE / ARTIKEL / SONSTIGE KARTEN
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.team-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.team-card-img {
  width: 100%;
  aspect-ratio: 4 / 5; /* Hochformat, passt exakt zu den auf 4/5 normalisierten Team-Bildern */
  object-fit: cover;
  object-position: center; /* Bilder sind bereits auf einheitliche Kopffreiheit zugeschnitten, daher mittig */
  display: block;
}
.team-card-body { padding: 24px 26px 28px; }
.team-card-name { font-size: 18px; margin-bottom: 2px; }
.team-card-role {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary-600);
  margin-bottom: 12px;
}
.team-card-bio { font-size: 15px; color: var(--muted); margin: 0; }

.werte-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.wert-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
}
.wert-icon {
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-050);
  color: var(--primary);
  border-radius: 50%;
  margin-bottom: 18px;
}
.wert-icon svg { width: 24px; height: 24px; }
.wert-card h3 { font-size: 18px; }
.wert-card p:last-child { font-size: 15px; color: var(--muted); margin: 0; }

.artikel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.artikel-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  color: var(--text);
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
}
a.artikel-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--primary-200); color: var(--text); }
/* Bildkopf der Artikelkarte.
   Eigene Klasse mit hoeherer Spezifitaet als ".artikel-card > div" weiter
   unten (0,2,0 gegen 0,1,1). Ohne das erbt der Container von dort padding
   und flex:1. flex:1 bedeutet flex-basis:0, wodurch die Bildhoehe aus dem
   Restplatz der Karte berechnet wird: Karten mit laengerer Ueberschrift
   bekommen ein flacheres Bild als ihre Nachbarn. */
.artikel-card > .artikel-media {
  flex: 0 0 auto;
  height: 200px;
  padding: 0;
  overflow: hidden;
}
.artikel-card > .artikel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.artikel-card > div, .artikel-card-body { padding: 24px 26px 28px; flex: 1; }
.artikel-card h3 { font-size: 18px; }

.vergleich-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 30px;
  box-shadow: var(--shadow-soft);
}
/* Hervorgehobener Kasten mit Akzentbalken. .artikel-antwort ist der
   sprechende Alias fuer den "Kurz gesagt"-Block in Ratgeberartikeln. */
.notfall-hinweis,
.artikel-antwort {
  background: var(--primary-050);
  border: 1px solid var(--primary-150);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  font-size: 15px;
}
.portal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.highlight-list { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 12px; }
.highlight-item {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
}
.highlight-item::before {
  content: '';
  position: absolute;
  left: 0; top: 4px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--primary-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23325071' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

.transition-text { color: var(--muted); }
.transition-text-title { color: var(--ink); font-weight: 700; }

/* ============================================================
   RECHTSTEXTE
   ============================================================ */
/* Lesespalte fuer Langtext. Urspruenglich fuer Rechtstexte angelegt,
   .artikel-content ist der sprechende Alias fuer Ratgeberartikel. */
.legal-content,
.artikel-content {
  max-width: 820px;
  margin: 0 auto;
}
.legal-content h2, .artikel-content h2 { font-size: 24px; margin-top: 2em; }
.legal-content h3, .artikel-content h3 { font-size: 18px; margin-top: 1.6em; }
.legal-content p, .legal-content li,
.artikel-content p, .artikel-content li { font-size: 15.5px; }

/* ============================================================
   FADE-IN-ANIMATIONEN
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-in.visible { opacity: 1; transform: none; }
.fade-in-delay-1 { transition-delay: 0.10s; }
.fade-in-delay-2 { transition-delay: 0.20s; }
.fade-in-delay-3 { transition-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1120px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 1024px) {
  .main-nav, .nav-actions .lang-switcher { display: none; }
  /* Ohne die (ausgeblendete) .main-nav faellt deren margin-left:auto weg,
     daher .nav-actions selbst nach rechts schieben (Hamburger an den rechten Rand) */
  .nav-actions { margin-left: auto; }
  .hamburger { display: flex; }
  /* CTA bleibt sichtbar (bis 640px), nur kompakter */
  .nav-actions .btn { padding: 10px 16px; font-size: 14px; }
  :root { --nav-height: 66px; }
  .site-logo img, .logo-combined { height: 56px; }

  .services-grid, .service-cards-grid { grid-template-columns: 1fr 1fr; }
  .usp-grid { grid-template-columns: 1fr 1fr; }
  .team-grid, .werte-grid, .artikel-grid { grid-template-columns: 1fr 1fr; }
  .contact-cards-grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .section { padding: 72px 0; }
  .section-header { margin-bottom: 40px; }

  .hero { padding: 64px 0; min-height: 0; }
  .about-grid,
  .gebiet-grid,
  .page-hero--split .page-hero-content,
  .form-section-grid,
  .grid-2 { grid-template-columns: 1fr; }
  .about-grid { gap: 36px; }
  .headshot-wrapper { height: 340px !important; }
  .headshot-img { object-position: center 12% !important; }

  .wechsel-steps { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .wechsel-timeline-track, .wechsel-timeline-track-fill { display: none; }

  .services-grid, .service-cards-grid { grid-template-columns: 1fr; }
  .wechsel-detail-grid, .portal-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-main { padding: 56px 0 44px; }
}

@media (max-width: 640px) {
  /* Unter 640px wandert der CTA ins Mobilmenü */
  .nav-actions .btn { display: none; }

  .container { padding: 0 20px; }
  .hero-content { padding: 0 20px; }
  /* Seitliche Polsterung von 24 auf 20 px und die H1 um rund 5 Prozent kleiner.
     Beides zusammen schafft die 12 px, die auf einem 360er Display fehlten,
     damit "Immobilienverwaltung," komplett in Zeile 1 passt und die H1
     zweizeilig bleibt statt dreizeilig. Einzeln haette keine der beiden
     Aenderungen gereicht, ohne deutlich sichtbar zu werden. */
  .hero-text { padding: 28px 20px; }
  .hero h1, .hero-title { font-size: clamp(24px, 7vw, 32px); }

  /* Ortszeile unter der H1 fuellt die Zeile aus. Basis ist 0.5em relativ zur
     H1, damit blieb sie mit 81 bis 85 Prozent Fuellung sichtbar zu kurz.
     Die Formel haelt auf jeder Geraetebreite rund 95 Prozent: Textbreite ist
     das 18,8-fache der Schriftgroesse, verfuegbar sind Viewport minus 80 px
     (Aussenrand plus Kartenpolsterung, je Seite 20 px).
     Bewusst nicht 100 Prozent: schon kleine Abweichungen beim Rendering
     wuerden die Zeile umbrechen, ein zweizeiliger Untertitel saehe deutlich
     schlechter aus als eine leicht kuerzere Zeile. */
  /* Ortszeile bewusst zweizeilig ("in Frankfurt und im" / "Rhein-Main-Gebiet").
     Einzeilig war sie durch die Breite auf rund 15 px gedeckelt und wirkte zu
     klein. Zweizeilig sind die beiden Haelften mit Faktor 9,11 und 9,41 fast
     gleich lang, rechnerisch waeren bis 29,8 px moeglich. Begrenzend ist hier
     nicht der Platz, sondern die Hierarchie: die H1 liegt bei 25,2 px, die
     Ortszeile bleibt mit rund 80 Prozent davon klar untergeordnet. */
  .hero-h1-sub { font-size: clamp(17px, 5.5vw, 24px); line-height: 1.25; }
  /* Komma nach "Immobilienverwaltung" nur mobil (Desktop bleibt bewusst ohne) */
  .hero-h1-lead::after { content: ","; }
  .hero-cta-group .btn, .hero-actions .btn { width: 100%; }
  .hero-text .hero-cta-group { flex-wrap: wrap; }

  /* Standalone-CTA in About-Sektionen (z.B. "Mehr ueber KONFORM erfahren") mittig */
  .about-text .btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }

  /* "Unser Anspruch"-Bild: feste Hoehe aufheben, damit das Querformat komplett
     (beide Personen) zu sehen ist statt seitlich beschnitten */
  #werte .about-image img { height: auto !important; }

  /* Intro-Bild der WEG-Seite ist Hochformat (964x1280). Bei der fest gesetzten
     Hoehe von 420px beschneidet object-fit:cover oben und unten zusammen rund
     6 Prozent. Auf Mobil folgt der Container deshalb dem Seitenverhaeltnis des
     Bildes, damit es vollstaendig sichtbar ist. Das inline gesetzte height
     muss dafuer ueberschrieben werden. */
  .about-image--hochformat {
    height: auto !important;
    aspect-ratio: 964 / 1280;
  }

  .usp-grid { grid-template-columns: 1fr; }
  .team-grid, .werte-grid, .artikel-grid { grid-template-columns: 1fr; }
  .contact-cards-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .trust-bar-inner { gap: 12px 26px; padding: 16px 20px; }
  .trust-item { font-size: 13px; }

  .cta-band-actions .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }

  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 20px; }

  .wechsel-steps { grid-template-columns: 1fr; }
  .wechsel-step { display: grid; grid-template-columns: 52px 1fr; gap: 6px 16px; align-items: center; text-align: left; }
  .wechsel-step-circle { margin: 0; grid-row: 1 / span 2; align-self: start; }
  .wechsel-step > h3, .wechsel-step-label { grid-column: 2; }
  .wechsel-step > h3 { margin: 0; align-self: end; }
  .wechsel-step-label { margin: 0; max-width: none; }
}