/* ════════════════════════════════════════════════════════════════════════════
 * Werthandel · 01-variables.css
 * ----------------------------------------------------------------------------
 * Single Source of Truth für alle CSS-Variablen.
 * Diese Datei wird ZUERST geladen. Alle anderen CSS-Files referenzieren
 * diese Variablen.
 *
 * Inhalt:
 *   - Brand-Farben (Navy, Cream, Gold, etc.)
 *   - Typografie-Tokens (Schriftarten, Größen, Line-Heights)
 *   - Layout-Tokens (Spacing, Border-Radius, Max-Width)
 *   - Transition-Tokens
 *   - Gradients
 *   - Bridge-Aliase für werthandel-header.css/footer.css (Legacy)
 *
 * Ändere hier zentral, NICHT in einzelnen Komponenten oder Pages.
 * ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Brand-Farben (Werthandel Welle 4, Stand 2026-05) ─── */
  --main: #1E3A5F;              /* Marineblau · Primary */
  --main-soft: #2E4F7A;         /* Marineblau Hover/Variante */
  --text: #1A2433;              /* Anthrazit · Bodytext + dunkler BG */
  --text-soft: #4A5468;         /* Anthrazit gedämpft · Secondary Text */
  --bg-cream: #F8F4ED;          /* Cream · Body-Background */
  --bg-sand: #EBE4D6;           /* Sand · für .section--alt (kontrastierend) */
  --highlight: #B89968;         /* Champagner-Gold · Akzent + Highlights */
  --gold-text: #8A6E40;        /* Dark Champagne · Text-Variante (AA-konform) */
  --highlight-dark: #A38357;    /* Gold Hover-Variante */
  --hairline-gold: rgba(184, 153, 104, 0.4);
  --hairline: #DDD1B8;          /* Beige Hairlines */

  /* ─── Bridge-Aliase (Legacy-Namen für werthandel-header.css/footer.css) ─── */
  /* WARNUNG: Nicht für neuen Code verwenden. Werthandel-header.css und werthandel-footer.css
     greifen historisch auf diese Alias-Namen zu. Bei Refactor entfernen. */
  --mainColor: var(--main);
  --mainColorLight: var(--main-soft);
  --secondColor: var(--text);
  --secondColorLight: var(--text-soft);
  --backgroundColor: var(--bg-cream);
  --greyVeryLight: var(--bg-sand);
  --whHighlight: var(--highlight);
  --whHairlineGold: var(--hairline-gold);
  --contrastColorInverted: #fff;

  /* ─── Typografie ─── */
  --mainFont: 'Montserrat', sans-serif;
  --headline: 'Mosafin', 'Playfair Display', serif;
  --baseFontSize: 16px;
  --miniFontSize: 14px;
  --baseLineheight: 1.65;

  /* ─── Layout ─── */
  --borderRadius: 10px;
  --baseWidth: 95%;
  --maxWidthBig: 1400px;
  --pageLimit: 1600px;

  /* ─── Animation ─── */
  --baseTransition: all 0.25s ease;

  /* ─── Gradients ─── */
  --primaryGradient: linear-gradient(180deg, #2E4F7A 0%, #1E3A5F 100%);
  --secondaryGradient: linear-gradient(180deg, #4A5468 0%, #1A2433 100%);
}
/* ════════════════════════════════════════════════════════════════════════════
 * Werthandel · 02-base.css
 * ----------------------------------------------------------------------------
 * CSS-Reset + Base-Styles für body, html, generische Elemente.
 * Wird NACH variables.css und VOR allen anderen Modulen geladen.
 *
 * Inhalt:
 *   - Box-Sizing-Reset
 *   - Body / HTML Defaults
 *   - Typografie-Defaults (h1-h6, a, p)
 *   - Image-Defaults
 *
 * Naming-Convention: Element-Selektoren, keine Klassen.
 * ════════════════════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--mainFont);
  background: var(--bg-cream);
  color: var(--text);
  line-height: var(--baseLineheight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--main);
  text-decoration: none;
  transition: var(--baseTransition);
}

a:hover {
  color: var(--highlight);
}

h1, h2, h3, h4 {
  font-family: var(--headline);
  color: var(--text);
  line-height: 1.2;
  font-weight: 700;
}

/* ─── Lokale Fonts (Mosafin) ─── */
@font-face {
  font-family: 'Mosafin';
  src: url('../fonts/Mosafin-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Mosafin';
  src: url('../fonts/Mosafin-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
/* ════════════════════════════════════════════════════════════════════════════
 * Werthandel · 03-layout.css
 * ----------------------------------------------------------------------------
 * Generische Layout-Klassen für Sections, Container, Grids.
 * Wird auf allen Pages verwendet.
 *
 * Inhalt:
 *   - .section, .section--alt, .section--cream
 *   - .container (max-width-Wrapper)
 *   - .section__header, .section__label
 *
 * Naming-Convention: BEM-style (.block__element, .block--modifier)
 * ════════════════════════════════════════════════════════════════════════════ */

.section {
  padding: 80px 0;
  background: var(--bg-cream);
}

.section--alt {
  background: var(--bg-sand);
}

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

.section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.section__header {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.section__header h2 {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  color: var(--main);
  margin-bottom: 16px;
}

.section__header p {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}

.section__label {
  display: inline-block;
  color: var(--highlight);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--highlight);
  margin-bottom: 24px;
}
/* ════════════════════════════════════════════════════════════════════════════
 * Werthandel · 04-buttons.css
 * ----------------------------------------------------------------------------
 * Alle Button-Varianten zentralisiert.
 *
 * Inhalt:
 *   - .btn (Standard)
 *   - .btn--lg (Large)
 *   - .btn--outline (Inverted/Outline)
 *   - .btn-navy (Cream auf Navy-Hintergrund)
 *
 * Naming-Convention: BEM mit -- Modifiers
 * ════════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--main);
  color: #fff;
  border: 1px solid var(--main);
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--baseTransition);
  text-decoration: none;
  font-family: var(--mainFont);
  font-size: 0.95rem;
}

.btn:hover {
  background: var(--text);
  color: #fff;
  transform: translateY(-1px);
}

.btn--lg {
  padding: 16px 36px;
  font-size: 1rem;
}

.btn--outline {
  background: transparent;
  color: var(--main);
}

.btn--outline:hover {
  background: var(--main);
  color: #fff;
}
/* ════════════════════════════════════════════════════════════════════════════
 * Werthandel · 05-pages.css
 * ----------------------------------------------------------------------------
 * Page-spezifische Styles, extrahiert aus index.html.
 * Enthält Hero, Trust-Bar, USP-Cards, Steps, Cities, Marktpreise, B2B, FAQ etc.
 *
 * TODO: Diese Datei ist groß. Bei nächstem Refactor in mehrere Module splitten
 * (hero.css, trust.css, usps.css, steps.css, cities.css, faq.css).
 * Aktuell pragmatisch zusammengehalten für Wartungs-Schnellzugriff.
 * ════════════════════════════════════════════════════════════════════════════ */



/* ═══ Mosafin ═══ */
@font-face { font-family: 'Mosafin'; src: url('../../Brand/Assets/Fonts/Mosafin-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Mosafin'; src: url('../../Brand/Assets/Fonts/Mosafin-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Mosafin'; src: url('../../Brand/Assets/Fonts/Mosafin-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Mosafin'; src: url('../../Brand/Assets/Fonts/Mosafin-ExtraBold.otf') format('opentype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Mosafin'; src: url('../../Brand/Assets/Fonts/Mosafin-Black.otf') format('opentype'); font-weight: 900; font-display: swap; }

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

:root {
  /* Werthandel D-Navy Editorial (final, 2026-05-21) */
  --fallback: sans-serif;
  --mainFont: 'Montserrat', var(--fallback);
  --headline: 'Mosafin', 'Playfair Display', var(--fallback);
  --mainColor: #1E3A5F;          /* Marineblau wärmer (vorher #1E3A5F) */
  --mainColorLight: #2E4F7A;     /* Marineblau-Hover */
  --secondColor: #1A2433;        /* Anthrazit-Navy (vorher #1A2433 reines Anthrazit) */
  --secondColorLight: #4A5468;   /* Navy-soft */
  --fontColor: #1A2433;          /* Body-Text Anthrazit-Navy */
  --grey: #999;
  --greyLight: #BDBDBD;
  --greyVeryLight: #EBE4D6;      /* Sandbeige entsättigt - section--cream-Sektionen */
  --backgroundColor: #F8F4ED;    /* Bone-Cream - Body-Background neutral */
  --formBorderColor: #DDD1B8;    /* Sandbeige-Hairline statt Grau */
  --contrastColorInverted: #fff;
  --whHighlight: #B89968;        /* Champagner-Gold - Hairlines + Pills (Bernert-Familie) */
  --whHairlineGold: rgba(184, 153, 104, 0.4);
  --baseFontSize: 16px;
  --miniFontSize: 14px;
  --baseLineheight: 175%;
  --borderRadius: 10px;
  --primaryGradient: linear-gradient(180deg, #2E4F7A 0%, #1E3A5F 100%);   /* Marineblau-Gradient */
  --secondaryGradient: linear-gradient(180deg, #4A5468 0%, #1A2433 100%); /* Anthrazit-Navy-Gradient */
  --stickyHeaderHeight: 125px;
  --baseTransition: all .3s ease-in-out;
  --baseWidth: 92%;
  --maxWidthBig: 1504px;
  --pageLimit: 1920px;
}

html { scroll-behavior: smooth; scroll-padding-top: 140px; }
body {
  background: var(--contrastColorInverted);
  font-family: var(--mainFont);
  color: var(--fontColor);
  line-height: 1.6875;
  font-size: var(--baseFontSize);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--mainColor); text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--headline); color: var(--secondColor); line-height: 120%; font-weight: 700; }
h1 { font-size: clamp(2rem, 1.4545rem + 2.727vw, 3.5rem); line-height: 125%; }
h2 { font-size: clamp(1.625rem, 1.0795rem + 2.727vw, 3.125rem); }
h3 { font-size: clamp(1.5rem, 1.0454rem + 2.272vw, 2.75rem); }
h4 { font-size: clamp(1.375rem, 1.0113rem + 1.818vw, 2.375rem); }

#site {
  max-width: var(--pageLimit);
  width: 100%;
  margin: 0 auto;
  background: var(--contrastColorInverted);
}

/* ═══ BUTTON (1:1 Bernert aus _textstile.scss) ═══ */
.btn {
  display: inline-block;
  position: relative;
  border: 1px solid var(--mainColor);
  cursor: pointer;
  padding: 12px 40px;
  padding-left: 64px;                  /* Platz für Pfeil-Icon links */
  color: var(--contrastColorInverted);
  background: var(--primaryGradient);
  transition: var(--baseTransition);
  line-height: 120%;
  box-shadow: 0 -4px 14px 0 rgba(0,0,0,0.25) inset;
  border-radius: 50px;                 /* Bernert: 50px, nicht 10px */
  font-family: var(--headline);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
.btn::before {
  content: '';
  display: inline-block;
  position: absolute;
  background-color: var(--contrastColorInverted);
  -webkit-mask: url('../../Brand/Assets/Icons-from-bernert/arrow.svg') no-repeat right center/100% auto;
          mask: url('../../Brand/Assets/Icons-from-bernert/arrow.svg') no-repeat right center/100% auto;
  height: 14px;
  width: 14px;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  transition: var(--baseTransition);
}
.btn:hover {
  padding-left: 40px;
  padding-right: 64px;
  box-shadow:
    0 0 2px 0 rgba(0,0,0,0.25) inset,
    2px -2px 12px 0 rgba(0,0,0,0.15) inset,
    -2px 2px 12px 0 rgba(0,0,0,0.15) inset;
}
.btn:hover::before {
  left: calc(100% - 54px);
}

/* Outline-Variante */
.btn-outline {
  background: transparent;
  border: 1px solid var(--mainColor);
  color: var(--mainColor);
  box-shadow: none;
}
.btn-outline::before { background-color: var(--mainColor); }
.btn-outline:hover {
  background: var(--mainColor);
  color: var(--contrastColorInverted);
}
.btn-outline:hover::before { background-color: var(--contrastColorInverted); }

/* Outline-White (z.B. auf Hero-Dunkel) */
.btn-outline-white {
  background: transparent;
  border: 1px solid var(--contrastColorInverted);
  color: var(--contrastColorInverted);
  box-shadow: none;
}
.btn-outline-white:hover {
  background: var(--secondColor);
  color: var(--contrastColorInverted);
}

/* Secondary (Navy-Gradient) */
.btn-secondary {
  border: 1px solid var(--secondColor);
  background: var(--secondaryGradient);
}

/* ═══ HEADER - SINGLE SOURCE OF TRUTH ═══
 * WICHTIG (2026-05-21): Header + Mobile-Nav + Kontakt-Widget + Hamburger
 * sind technisch in `werthandel-header.css` zentralisiert.
 * Alle 8 Pages (Haupt + 5 Subpages + Impressum + Datenschutz) laden diese
 * gemeinsame CSS-Datei. Wenn der Header geändert werden soll:
 *   → IMMER in `werthandel-header.css` ändern, nicht hier inline.
 * Der untenstehende Inline-Block ist nur historischer Bestand (vor Refactor).
 * ════════════════════════════════════════════════════════════════════════ */

/* ═══ HEADER (Bernert-Style, zwei Modi) ═══ */
header.head {
  position: sticky;
  top: 0;
  width: 100%;
  max-width: var(--pageLimit);
  z-index: 99;
  padding: 70px 0 0;   /* Platz oben für handschriftliches Label */
  transition: var(--baseTransition);
}

header.head .inner {
  width: var(--baseWidth);
  max-width: var(--maxWidthBig);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

header.head #logo {
  transition: var(--baseTransition);
  width: 232px;
  height: 117px;
  margin: 0;
  position: relative;
}
header.head #logo a { display: block; width: 100%; height: 100%; position: relative; }
header.head #logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity .2s ease-in-out;
}
/* Home-Mode (nicht sticky): helles Logo sichtbar über dunklem Hero */
header.head #logo .logo-hell   { opacity: 1; }
header.head #logo .logo-dunkel { opacity: 0; }
/* Sticky-Mode: dunkles Logo sichtbar auf weißer Box */
header.head.is-sticky #logo .logo-hell   { opacity: 0; }
header.head.is-sticky #logo .logo-dunkel { opacity: 1; }

/* Nav-Pill weiss auf Home-Mode (nicht sticky) */
#site-navigation { margin-bottom: 30px; }
#primary-menu {
  display: flex;
  align-items: center;
  background-color: var(--contrastColorInverted);
  border-radius: var(--borderRadius);
  list-style: none;
  padding: 0;
}
#primary-menu > li { position: relative; }
#primary-menu > li > a {
  color: var(--secondColor);
  font-size: var(--baseFontSize);
  font-family: var(--headline);
  font-weight: 500;
  padding: 10px 20px;
  display: block;
  text-decoration: none;
  transition: var(--baseTransition);
}
#primary-menu > li:first-of-type > a { border-radius: var(--borderRadius) 0 0 var(--borderRadius); }
#primary-menu > li:last-of-type > a { border-radius: 0 var(--borderRadius) var(--borderRadius) 0; }
#primary-menu > li:hover > a,
#primary-menu > li.current_page_item > a {
  color: var(--contrastColorInverted);
  background: var(--mainColor);
}
#primary-menu > li.has-children > a::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  background: url('../../Brand/Assets/Icons-from-bernert/arrow.svg') no-repeat center / contain;
  width: 10px; height: 10px;
  transform: rotate(90deg);
  filter: invert(1);
}

.button-header-wrapper {
  position: relative;
  margin-bottom: 30px;
}
.text-button-header-wrapper {
  position: absolute;
  top: -67px;
  left: -102px;
  pointer-events: none;
}
.text-button-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--contrastColorInverted);
  transform: rotate(-8deg);
  white-space: nowrap;
  position: absolute;
  left: -75px;
  top: -5px;
}
/* Handschriftliches Label nur auf breiten Desktops - sonst kollidiert es mit der Nav-Pill */
@media (max-width: 1290px) {
  .text-button-header-wrapper { display: none; }
  header.head { padding-top: 30px; }
}

/* Sticky-State */
header.head.is-sticky { padding-top: 30px; }
header.head.is-sticky > .inner {
  box-shadow: 0 0 24px 0 rgba(0,0,0,.25);
  border-radius: var(--borderRadius);
  background: var(--contrastColorInverted);
  padding-right: 20px;
  align-items: center;
}
header.head.is-sticky #logo {
  width: 140px;
  height: 48px;
  margin: 12px 20px;
}
header.head.is-sticky .button-header-wrapper { margin-bottom: 0; }
header.head.is-sticky .text-button-header-wrapper { display: none; }
header.head.is-sticky #site-navigation { margin-bottom: 0; }
header.head.is-sticky #primary-menu {
  background: transparent;
  border-radius: 0;
}
header.head.is-sticky #primary-menu > li > a {
  padding: 27px 20px;
  border-radius: 0;
}

/* Scroll-Progress-Bar (transparenter BG - nur Gold-Indicator sichtbar) */
#page-scroll-position {
  height: 3px;
  width: 100%;
  display: block;
  background: transparent;
  position: absolute;
  top: 100%;
  left: 0;
  pointer-events: none;
}
#indicator-bar {
  height: 100%;
  width: 0;
  display: block;
  background: var(--mainColor);
  transition: width .1s;
}


/* === Header-Nav Dropdown-Submenus === */
#primary-menu .submenu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff; min-width: 220px;
  border: 1px solid rgba(184,153,104,0.4);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(26,36,51,0.15);
  list-style: none; padding: 10px 0; margin: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}
#primary-menu .has-children:hover .submenu,
#primary-menu .has-children:focus-within .submenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
#primary-menu .submenu li { display: block; }
#primary-menu .submenu li a {
  display: block !important; padding: 10px 24px !important;
  color: var(--secondColor) !important;
  text-decoration: none; font-size: 14px; font-weight: 500;
  border: none !important; border-radius: 0 !important;
  text-align: left; transition: all 0.2s;
  white-space: nowrap;
}
#primary-menu .submenu li a:hover {
  background: var(--greyVeryLight); color: var(--mainColor) !important;
}
#primary-menu .has-children > a::after {
  content: '▾'; margin-left: 6px; font-size: 0.7em; opacity: 0.7;
}

/* ═══ HERO (Split-Screen mit Schnellanfrage-Form) ═══ */
.hero {
  position: relative;
  min-height: 100vh;
  margin-top: -135px;  /* Header-Höhe ausgleichen */
  padding-top: 227px;  /* Hero-Content unter den Header schieben */
  background:
    linear-gradient(180deg, rgba(26, 36, 51,.55) 0%, rgba(26, 36, 51,.30) 40%, rgba(26, 36, 51,.75) 100%),
    url('../heroes/werthandel-hero.svg') center/cover;
  color: var(--contrastColorInverted);
  padding-bottom: 80px;
}

.hero__inner {
  max-width: var(--maxWidthBig, 1504px);
  width: var(--baseWidth);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  text-align: left;
  flex-wrap: nowrap;
}
.hero__copy { flex: 0 1 640px; max-width: 640px; min-width: 0; }
.hero-form {
  flex: 0 0 360px;
  max-width: 360px;
  width: 100%;
  margin-left: auto;     /* Form klebt RECHTS in der Flex-Row */
}
/* H1 Groesse runter - weniger Zeilenumbrueche */
/* OLD H1 - replaced by unified rule below */
.hero__copy .lead { font-size: 1rem; }

.hero__copy { padding-right: 24px; }
.hero__copy h1 { text-align: left; }
.hero__copy .lead { text-align: left; max-width: 580px; }

/* === Hero Schnellanfrage-Form === */
.hero-form {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(184, 153, 104, 0.4);
  border-radius: 14px;
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.35);
  padding: 36px 32px;
  color: var(--text);
  position: relative;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.hero-form__title {
  font-family: var(--headline);
  font-size: 1.45rem;
  color: var(--secondColor);
  margin: 0 0 6px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-align: left;
}
.hero-form__sub {
  color: var(--text-soft, #4A5468);
  font-size: 0.92rem;
  margin-bottom: 22px;
  line-height: 1.5;
}
.hero-form__sub strong { color: var(--mainColor); font-family: var(--headline); }
.hero-form__field {
  position: relative;
  margin-bottom: 12px;
}
.hero-form__field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--secondColor);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.hero-form__field input,
.hero-form__field select {
  width: 100%;
  border: 1.5px solid var(--formBorderColor, rgba(184,153,104,0.4));
  border-radius: 8px;
  padding: 11px 14px;
  font-family: var(--mainFont);
  font-size: 0.93rem;
  color: var(--fontColor);
  background: #fff;
  transition: all 0.2s;
}
.hero-form__field input:focus,
.hero-form__field select:focus {
  outline: none;
  border-color: var(--mainColor);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}
.hero-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-form__dsgvo {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.78rem; color: var(--text-soft, #4A5468);
  line-height: 1.45; margin: 14px 0;
}
.hero-form__dsgvo input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--mainColor); flex-shrink: 0; }
.hero-form__dsgvo a { color: var(--mainColor); text-decoration: underline; }
.hero-form__submit {
  width: 100%;
  background: linear-gradient(180deg, var(--whHighlight, #B89968) 0%, #A38357 100%);
  color: var(--secondColor);
  border: none;
  padding: 13px 18px;
  border-radius: 50px;
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.25s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(184, 153, 104, 0.3);
  margin-top: 6px;
  white-space: nowrap;
}
.hero-form__submit:hover {
  background: linear-gradient(180deg, #D4B988 0%, #B89968 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(184, 153, 104, 0.4);
}
.hero-form__submit::after { content: '→'; font-size: 1.1em; transition: transform 0.2s; }
.hero-form__submit:hover::after { transform: translateX(4px); }
.hero-form__hint {
  font-size: 0.78rem;
  color: var(--text-soft, #4A5468);
  text-align: center;
  margin-top: 12px;
  letter-spacing: 0.02em;
}
.hero-form__hint strong { color: var(--mainColor); }
.hero-form__alt {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-soft, #4A5468);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(184, 153, 104, 0.2);
}
.hero-form__alt a { color: var(--mainColor); text-decoration: none; font-weight: 600; }
.hero-form__alt a:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .hero__inner { flex-direction: column !important; gap: 40px; text-align: center; }
  .hero__copy { flex: 1 1 auto !important; max-width: 100% !important; }
  .hero-form { flex: 0 0 auto !important; }
  .hero__copy { padding-right: 0; }
  .hero__copy h1, .hero__copy .lead { text-align: center; }
  .hero__copy .lead { margin-left: auto; margin-right: auto; }
  .hero-form { max-width: 480px; margin: 0 auto; }
}

.hero__eyebrow {
  display: inline-block;
  font-family: var(--mainFont);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  background: rgba(184, 153, 104, 0.12);
  border: 1px solid rgba(184, 153, 104, 0.45);
  padding: 6px 20px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.hero h1 {
  color: var(--contrastColorInverted);
  margin-bottom: 20px;
}
.hero h1 em {
  color: var(--gold-text, #8A6E40);
  font-style: normal;
  position: relative;
  display: inline-block;
}
.hero h1 em::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--whHighlight, #B89968);
  opacity: 0.85;
  pointer-events: none;
}

.hero p.lead {
  color: rgba(255,255,255,.8);
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══ TRUST BAR (Floating Card mit Eck-Siegel) ═══ */
.trust-bar {
  max-width: 1060px;
  width: var(--baseWidth);
  margin: -56px auto 0;
  position: relative;
  z-index: 10;
  background: var(--contrastColorInverted);
  border-radius: var(--borderRadius);
  box-shadow: 0 0 24px 0 rgba(0,0,0,.25);
  padding: 40px 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.trust-bar__siegel {
  position: absolute;
  top: -36px;
  right: -28px;
  width: 116px;
  height: 116px;
  transform: rotate(12deg);
  filter: drop-shadow(0 6px 14px rgba(26, 36, 51,.22));
  pointer-events: none;
  z-index: 11;
}
@media (max-width: 680px) {
  .trust-bar__siegel { width: 78px; height: 78px; top: -24px; right: -10px; }
}
.trust-item {
  text-align: center;
  padding: 0 20px;
  border-right: 1px solid var(--greyVeryLight);
}
.trust-item:last-child { border-right: none; }
.trust-item__num {
  font-family: var(--headline);
  font-size: 2.6rem;
  color: var(--secondColor);
  line-height: 1;
  margin-bottom: 4px;
}
.trust-item__label {
  font-family: var(--mainFont);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  margin-bottom: 4px;
}
.trust-item__sub { font-size: 13px; color: #666; line-height: 1.4; max-width: 160px; margin: 0 auto; }

/* ═══ ALLGEMEINE SECTIONS ═══ */
.section {
  padding: 100px 0;
}
.section .container {
  max-width: var(--maxWidthBig);
  width: var(--baseWidth);
  margin: 0 auto;
}
.section--grey { background: var(--backgroundColor); }
.section--cream { background: var(--greyVeryLight); }

.section-header { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.section-label {
  font-family: var(--mainFont);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mainColor);
  margin-bottom: 12px;
}
.section p.lead {
  color: #666;
  font-size: 17px;
  line-height: 1.7;
}

/* ═══ FOOTER (Bernert-Style) ═══ */
/* Footer-Styles zentralisiert in werthandel-footer.css */

/* Footer Logo + Kontakt */

/* Social Icons */

@media (max-width: 900px) {
  footer.foot .row.row-1 { flex-direction: column; }
  footer.foot .row.row-1 .col-1,
  footer.foot .row.row-1 .col-2 { max-width: 100%; width: 100%; }
}

/* ═══ STEPS-SECTION (Variante D: Journey mit Gold-Häusern) ═══ */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}
.steps__line {
  position: absolute;
  top: 56px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--secondColor) 0 10px, transparent 10px 18px);
  z-index: 0;
  opacity: .35;
}
.step {
  position: relative;
  text-align: center;
  z-index: 1;
  padding: 0 14px;
}
.step__icon {
  width: 112px;
  height: 112px;
  margin: 0 auto 24px;
  background: var(--primaryGradient);
  border: 1px solid var(--mainColor);
  border-radius: 20px;
  box-shadow: 0 -4px 14px 0 rgba(0,0,0,.2) inset, 0 8px 24px rgba(30, 58, 95,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: var(--baseTransition);
}
.step:hover .step__icon { transform: translateY(-4px); }
.step__icon svg { width: 52px; height: 52px; }
.step__icon svg path { fill: var(--secondColor); stroke: var(--secondColor); stroke-width: 0; stroke-linejoin: round; }
.step__icon svg [data-stroke] {
  fill: none;
  stroke: var(--secondColor);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step__num {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  background: var(--secondColor);
  color: var(--contrastColorInverted);
  border-radius: 50%;
  font-family: var(--headline);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.step h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--secondColor);
}
.step p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  max-width: 230px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .steps__line { display: none; }
  .step::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -36px;
    width: 2px;
    height: 24px;
    background: repeating-linear-gradient(180deg, var(--secondColor) 0 6px, transparent 6px 12px);
    opacity: .35;
    transform: translateX(-50%);
  }
  .step:last-child::after { display: none; }
}

/* Mid-CTA nach Steps */
.mid-cta {
  text-align: center;
  margin-top: 64px;
}

/* ═══ USPs-SECTION (Variante A: Navy-Karten) ═══ */
.usps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}
.usp-card {
  position: relative;
  background: var(--secondColor);
  color: #fff;
  border-radius: var(--borderRadius);
  padding: 48px 36px 40px;
  overflow: hidden;
  transition: var(--baseTransition);
  box-shadow: 0 0 24px 0 rgba(0,0,0,.15);
}
.usp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--whHighlight, #B89968) 50%, transparent 100%);
}
.usp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px 0 rgba(0,0,0,.3);
}
.usp-icon {
  width: 56px;
  height: 56px;
  background: rgba(184, 153, 104, 0.15);
  border: 1px solid rgba(184, 153, 104, 0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.usp-icon svg { width: 28px; height: 28px; }
.usp-icon svg [data-stroke] {
  fill: none;
  stroke: var(--whHighlight, #B89968);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.usp-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.25;
}
.usp-card p {
  font-size: 15px;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
  margin: 0;
}
.usp-card .usp-highlight {
  display: block;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(184, 153, 104, 0.25);
  font-size: 14px;
  color: var(--gold-text, #8A6E40);
  font-weight: 600;
  letter-spacing: 0.5px;
}

@media (max-width: 900px) {
  .usps { grid-template-columns: 1fr; gap: 20px; }
}

/* ═══ CITIES-GRID (Variante B: Bild-Karten) ═══ */
.cities {
  /* Verschiebbarer Horizontal-Slider - Sektionshöhe bleibt konstant, egal wie viele Karten */
  display: flex;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--highlight, #B89968) transparent;
  padding: 4px 4px 24px;
  /* Hint: rechte Kante leicht ausfaden, damit klar wird, dass es weitergeht */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 48px), transparent 100%);
}
.cities::-webkit-scrollbar { height: 8px; }
.cities::-webkit-scrollbar-track { background: rgba(184,153,104,0.10); border-radius: 4px; }
.cities::-webkit-scrollbar-thumb { background: var(--highlight, #B89968); border-radius: 4px; }
.cities .city-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 60px) / 4);   /* 4 Karten sichtbar, 3 Gaps à 20px */
  min-width: 220px;
}
.city-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--borderRadius);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 0 24px 0 rgba(0,0,0,.15);
  transition: var(--baseTransition);
}
.city-card__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .6s ease;
}
.city-card:hover .city-card__img { transform: scale(1.06); }
.city-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 36, 51,.9) 0%, rgba(26, 36, 51,.3) 45%, rgba(26, 36, 51,.15) 100%);
  transition: var(--baseTransition);
}
.city-card:hover::after { background: linear-gradient(to top, rgba(26, 36, 51,.95) 0%, rgba(26, 36, 51,.5) 50%, rgba(26, 36, 51,.25) 100%); }
.city-card__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px;
  z-index: 2;
}
.city-card__name {
  font-family: var(--headline);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.city-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,.85);
}
.city-card__price {
  color: var(--mainColor);
  font-weight: 700;
  font-size: 14px;
}
.city-card__region {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--highlight, #B89968);
  margin-bottom: 6px;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.city-card__name {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.city-card__arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--baseTransition);
  z-index: 2;
}
.city-card:hover .city-card__arrow {
  background: var(--mainColor);
  border-color: var(--mainColor);
}
.city-card__arrow::before {
  content: '';
  width: 12px;
  height: 12px;
  background-color: #fff;
  -webkit-mask: url('../../Brand/Assets/Icons-from-bernert/arrow.svg') no-repeat center/contain;
          mask: url('../../Brand/Assets/Icons-from-bernert/arrow.svg') no-repeat center/contain;
}
.city-card:hover .city-card__arrow::before { background-color: var(--secondColor); }

.cities-more {
  text-align: center;
  margin-top: 48px;
}

/* Slider: weniger Karten sichtbar bei kleineren Viewports */
@media (max-width: 1100px) {
  .cities .city-card { flex: 0 0 calc((100% - 40px) / 3); }  /* 3 sichtbar */
}
@media (max-width: 800px) {
  .cities .city-card { flex: 0 0 calc((100% - 20px) / 2); }  /* 2 sichtbar */
}
@media (max-width: 650px) {
  .cities { gap: 16px; padding: 4px 4px 20px; }
  .cities .city-card {
    flex: 0 0 78%;
    max-width: 320px;
  }
}

/* ═══ MARKTPREISE BAR-CHART (Variante C) ═══ */
.marktpreise {
  max-width: 900px;
  margin: 0 auto;
}
.marktpreise__toggle {
  display: inline-flex;
  background: #fff;
  border-radius: 50px;
  padding: 4px;
  margin: 0 auto 40px;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}
.marktpreise__toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.marktpreise__toggle button {
  background: transparent;
  border: none;
  padding: 10px 28px;
  font-family: var(--headline);
  font-size: 15px;
  font-weight: 500;
  color: var(--secondColor);
  cursor: pointer;
  border-radius: 50px;
  transition: var(--baseTransition);
}
.marktpreise__toggle button.active {
  background: var(--primaryGradient);
  color: #fff;
  box-shadow: 0 -4px 14px 0 rgba(0,0,0,.25) inset;
}

.marktpreise__chart { display: grid; gap: 14px; }

.bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 150px;
  align-items: center;
  gap: 20px;
}
.bar-city {
  font-family: var(--headline);
  font-size: 15px;
  font-weight: 600;
  color: var(--secondColor);
}
.bar-track {
  position: relative;
  height: 30px;
  background: rgba(26, 36, 51,.08);
  border-radius: 50px;
  overflow: hidden;
}
.bar-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0;
  background: var(--primaryGradient);
  border-radius: 50px;
  box-shadow: 0 -4px 14px 0 rgba(0,0,0,.15) inset;
  transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bar-row.in-view .bar-fill { width: var(--target, 0%); }

.bar-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.bar-price-num {
  font-family: var(--headline);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--secondColor);
}
.bar-price-trend {
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}
.bar-price-trend.up { color: #2E8B57; }
.bar-price-trend.down { color: #C84C4C; }
.bar-price-trend::before {
  content: '';
  width: 0; height: 0;
}
.bar-price-trend.up::before { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid #2E8B57; }
.bar-price-trend.down::before { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #C84C4C; }

.marktpreise__source {
  text-align: center;
  font-size: 12px;
  color: #888;
  margin-top: 40px;
}

@media (max-width: 700px) {
  .bar-row { grid-template-columns: 100px 1fr 120px; gap: 12px; }
  .bar-city { font-size: 13px; }
  .bar-price-num { font-size: 1rem; }
}

/* ═══ FAQ-ACCORDION (1:1 Bernert blockstudio/accordion/style.scss) ═══ */
.ce-accordion { width: 100%; max-width: 880px; margin: 0 auto; }
.ce-accordion-inner > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.accordion {
  width: 100%;
  overflow: hidden;
}
.accordion input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.accordion-label {
  display: block;
  width: 100%;
  padding: 20px 60px 20px 30px;
  font-weight: 700;
  font-family: var(--headline);
  font-size: 17px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  background: var(--mainColor);
  color: var(--contrastColorInverted);
  border-radius: var(--borderRadius);
  transition: var(--baseTransition);
}
.accordion-label::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-color: #fff;
  -webkit-mask: url('../../Brand/Assets/Icons-from-bernert/arrow.svg') no-repeat center / 14px auto;
          mask: url('../../Brand/Assets/Icons-from-bernert/arrow.svg') no-repeat center / 14px auto;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%) rotate(90deg);
  transition: var(--baseTransition);
}
.accordion-label:hover { background: var(--mainColorLight); }
.accordion-content {
  max-height: 0;
  padding: 0 30px;
  transition: max-height .35s ease-in-out, padding .35s ease-in-out;
  overflow: hidden;
  background: var(--greyVeryLight);
  color: #53556D;
  border-radius: 0 0 var(--borderRadius) var(--borderRadius);
  font-size: 15px;
  line-height: 1.7;
}
.accordion-content p { margin-bottom: 12px; }
.accordion-content p:last-of-type { margin-bottom: 0; }
.accordion input:checked + .accordion-label {
  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
  background: var(--secondColor);
}
.accordion input:checked + .accordion-label::after {
  transform: translateY(-50%) rotate(270deg);
}
.accordion input:checked ~ .accordion-content {
  max-height: 500px;
  padding: 20px 30px;
}

/* ═══ STATS-STRIP (Volumen-Zahlen) ═══ */
/* ═══ STATS-STRIP - Cream-Card-Style (passt zu uebrigen Sections) ═══ */
.stats-strip {
  background: var(--bg-cream, #F8F4ED);
  padding: 72px 0;
  position: relative;
}
.stats-strip__inner {
  max-width: 1180px;
  width: var(--baseWidth);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}
.stat-item {
  text-align: center;
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.2));
  border-radius: 12px;
  padding: 30px 22px;
  transition: var(--baseTransition, all 0.25s ease);
  position: relative;
  overflow: hidden;
}
.stat-item::after {
  content: '';
  position: absolute;
  left: 24px; right: 24px; top: 0;
  height: 3px;
  background: var(--whHighlight, #B89968);
  border-radius: 0 0 3px 3px;
  opacity: 0.7;
}
.stat-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(30,58,95,0.10);
  border-color: rgba(184,153,104,0.4);
}
.stat-item__value {
  font-family: var(--headline);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1;
  color: var(--secondColor, #1A2433);
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}
.stat-item__suffix {
  color: var(--gold-text, #8A6E40);
  font-size: 0.55em;
  margin-left: 4px;
  font-weight: 700;
}
.stat-item__label {
  font-family: var(--mainFont);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-text, #8A6E40);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.4;
}
@media (max-width: 800px) {
  .stats-strip { padding: 56px 0; }
  .stats-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stat-item { padding: 24px 16px; }
}
@media (max-width: 480px) {
  .stats-strip__inner { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-item { padding: 20px 12px; }
  .stat-item__label { font-size: 0.65rem; }
}

/* ═══ B2B-TEASER ═══ */
.b2b-teaser__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.b2b-teaser-card {
  background: var(--secondColor); color: #fff;
  border-radius: var(--borderRadius); padding: 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
  border: 1px solid rgba(184,153,104,0.18);
  transition: transform 0.3s, box-shadow 0.3s;
}
.b2b-teaser-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(30,58,95,0.18); }
.b2b-teaser-card__icon {
  width: 56px; height: 56px; border-radius: var(--borderRadius);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(184,153,104,0.2);
  display: flex; align-items: center; justify-content: center;
}
.b2b-teaser-card__icon svg { width: 28px; height: 28px; stroke: var(--whHighlight); fill: none; stroke-width: 1.5; }
.b2b-teaser-card h3 { color: #fff; font-family: var(--headline); font-size: 1.25rem; margin: 0; line-height: 1.2; }
.b2b-teaser-card__body { color: rgba(255,255,255,0.78); line-height: 1.6; font-size: 0.93rem; flex-grow: 1; }
.b2b-teaser-card__pill {
  display: inline-block; padding: 6px 14px;
  background: var(--whHighlight); color: var(--secondColor);
  border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; align-self: flex-start;
}
.b2b-teaser__footer {
  margin-top: 48px; text-align: center;
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 20px;
}
.b2b-teaser__footer-note { color: var(--secondColorLight); font-size: 1rem; }
.b2b-teaser__footer-note strong { color: var(--mainColor); font-family: var(--headline); }
@media (max-width: 900px) { .b2b-teaser__grid { grid-template-columns: 1fr; } }

/* ═══ SCHADEN-TEASER ═══ */
.schaden-teaser__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.schaden-teaser-card {
  background: #fff; border: 1px solid var(--formBorderColor);
  border-radius: var(--borderRadius); padding: 40px 36px;
  display: flex; flex-direction: column; gap: 16px;
  text-decoration: none; color: inherit;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.schaden-teaser-card:hover { transform: translateY(-4px); border-color: var(--mainColor); box-shadow: 0 20px 48px rgba(30,58,95,0.12); }
.schaden-teaser-card__icon {
  width: 64px; height: 64px; border-radius: var(--borderRadius);
  background: rgba(30,58,95,0.08); border: 1px solid var(--whHairlineGold);
  display: flex; align-items: center; justify-content: center;
}
.schaden-teaser-card__icon svg { width: 32px; height: 32px; stroke: var(--mainColor); fill: none; stroke-width: 1.5; }
.schaden-teaser-card h3 { font-family: var(--headline); font-size: 1.4rem; color: var(--secondColor); margin: 0; }
.schaden-teaser-card__body { color: var(--secondColorLight); line-height: 1.65; font-size: 0.95rem; }
.schaden-teaser-card__stamp {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; color: var(--mainColor); letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
  padding: 8px 14px; border: 1px solid var(--mainColor);
  border-radius: 6px; align-self: flex-start;
}
.schaden-teaser-card__stamp::before { content: '✓'; font-weight: 700; }
.schaden-teaser-card__cta {
  margin-top: 12px; color: var(--mainColor); font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem;
}
.schaden-teaser-card__cta::after { content: '→'; transition: transform 0.3s; }
.schaden-teaser-card:hover .schaden-teaser-card__cta::after { transform: translateX(4px); }
@media (max-width: 760px) { .schaden-teaser__grid { grid-template-columns: 1fr; } }

/* ═══ PREMIUM LEAD-FORM ═══ */
.lf { max-width: 1180px; margin: 56px auto 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; }
.lf__main {
  background: #fff; border: 1px solid var(--whHairlineGold); border-radius: var(--borderRadius);
  padding: 48px; box-shadow: 0 24px 56px rgba(30,58,95,0.08);
}
.lf__title { font-family: var(--headline); font-size: 1.5rem; color: var(--secondColor); margin: 0 0 8px; }
.lf__intro { color: var(--secondColorLight); font-size: 0.98rem; margin-bottom: 32px; line-height: 1.55; }

.lf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lf__field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.lf__field--full { grid-column: 1 / -1; }
.lf__label { font-size: 0.85rem; font-weight: 600; color: var(--secondColor); display: flex; gap: 4px; }
.lf__label .lf__req { color: var(--mainColor); font-weight: 700; }
.lf__hint { font-size: 0.75rem; color: var(--secondColorLight); margin-top: 2px; }
.lf__input,
.lf__select,
.lf__textarea {
  border: 1.5px solid var(--formBorderColor); border-radius: 8px;
  padding: 13px 16px; font-family: var(--mainFont); font-size: 0.95rem;
  color: var(--fontColor); background: #fff; transition: all 0.2s; font-weight: 500;
}
.lf__input:focus, .lf__select:focus, .lf__textarea:focus {
  outline: none; border-color: var(--mainColor);
  box-shadow: 0 0 0 3px rgba(30,58,95,0.1);
}
.lf__textarea { resize: vertical; min-height: 100px; }
.lf__field.is-valid .lf__input,
.lf__field.is-valid .lf__select { border-color: #16A34A; padding-right: 40px; }
.lf__field.is-valid::after {
  content: '✓'; position: absolute; right: 14px; top: 38px;
  color: #16A34A; font-weight: 700; pointer-events: none; font-size: 1.1rem;
}
.lf__field.is-invalid .lf__input,
.lf__field.is-invalid .lf__select { border-color: #DC2626; }
.lf__error { font-size: 0.78rem; color: #DC2626; margin-top: 4px; display: none; font-weight: 500; }
.lf__field.is-invalid .lf__error { display: block; }

.lf__conditional {
  display: none; margin-top: 16px; padding: 18px;
  background: rgba(184,153,104,0.08); border: 1px solid var(--whHairlineGold);
  border-radius: 8px;
}
.lf__conditional.is-visible { display: block; animation: lfFade 0.3s ease-out; }
@keyframes lfFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.lf__conditional-label {
  font-family: var(--headline); font-weight: 700; color: var(--mainColor);
  font-size: 0.9rem; margin-bottom: 12px;
}

.lf__dsgvo {
  font-size: 0.85rem; color: var(--secondColorLight); line-height: 1.55;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 18px; background: var(--bg-cream, #F8F4ED);
  border: 1px solid var(--whHairlineGold); border-radius: 8px; margin-top: 16px;
}
.lf__dsgvo input {
  width: 20px; height: 20px; margin-top: 1px; cursor: pointer;
  flex-shrink: 0; accent-color: var(--mainColor);
}
.lf__dsgvo a { color: var(--mainColor); text-decoration: underline; }
.lf__submit-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--whHairlineGold);
}
.lf__submit-hint { font-size: 0.82rem; color: var(--secondColorLight); }
.lf__submit-hint strong { color: var(--mainColor); font-weight: 700; }
.lf__submit {
  background: linear-gradient(180deg, var(--whHighlight) 0%, #A38357 100%);
  color: var(--secondColor); border: none;
  padding: 16px 32px; border-radius: 50px;
  font-family: var(--headline); font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: all 0.25s;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 24px rgba(184,153,104,0.3);
}
.lf__submit:hover { background: linear-gradient(180deg, #D4B988 0%, #B89968 100%); transform: translateY(-2px); }
.lf__submit::after { content: '→'; transition: transform 0.2s; }
.lf__submit:hover::after { transform: translateX(4px); }
.lf__submit.is-loading { pointer-events: none; opacity: 0.7; }
.lf__submit.is-loading::after { content: '...'; }

/* Sidebar */
.lf__side {
  background: var(--secondColor); color: #fff;
  border-radius: var(--borderRadius); padding: 40px 32px;
  display: flex; flex-direction: column; gap: 28px;
  position: relative; overflow: hidden;
}
.lf__side::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none; opacity: 0.5;
}
.lf__side > * { position: relative; }
.lf__side h3 { font-family: var(--headline); color: #fff; font-size: 1.1rem; margin: 0; line-height: 1.25; word-break: keep-all; }
.lf__person { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid rgba(184,153,104,0.25); flex-wrap: nowrap; }
.lf__person > div:not(.lf__person__avatar) { min-width: 0; flex: 1; }
.lf__person__avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--whHighlight) 0%, #A38357 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--headline); font-weight: 700; font-size: 1.2rem;
  color: var(--secondColor); flex-shrink: 0;
}
.lf__person__name { font-family: var(--headline); font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: 4px; line-height: 1.2; word-break: keep-all; overflow-wrap: break-word; }
.lf__person__role { font-size: 0.7rem; color: var(--whHighlight); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; line-height: 1.3; overflow-wrap: break-word; }
.lf__promise { display: flex; flex-direction: column; gap: 18px; }
.lf__promise-item { display: flex; align-items: flex-start; gap: 14px; }
.lf__promise-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(184,153,104,0.18); display: flex; align-items: center; justify-content: center;
  color: var(--whHighlight); font-weight: 700; flex-shrink: 0; font-size: 0.92rem;
}
.lf__promise-text { font-size: 0.92rem; color: rgba(255,255,255,0.85); line-height: 1.5; }
.lf__promise-text strong { color: #fff; font-family: var(--headline); }
.lf__contact-alt {
  margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(184,153,104,0.25);
  font-size: 0.85rem; color: rgba(255,255,255,0.78); line-height: 1.55;
}
.lf__contact-alt a { color: var(--whHighlight); text-decoration: none; font-weight: 700; }
.lf__contact-alt a:hover { color: #fff; }

/* Success-Modal */
.lf__success {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(26,36,51,0.85); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 32px;
}
.lf__success.is-open { display: flex; animation: lfFadeIn 0.4s ease-out; }
@keyframes lfFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lf__success__card {
  background: #fff; border-radius: var(--borderRadius);
  max-width: 600px; width: 100%; padding: 56px 48px;
  text-align: center; position: relative;
  animation: lfPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid var(--whHairlineGold);
  box-shadow: 0 40px 80px rgba(0,0,0,0.3);
}
@keyframes lfPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lf__success__check {
  width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(135deg, var(--whHighlight) 0%, #A38357 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2.8rem; margin: 0 auto 28px; font-weight: 700;
  box-shadow: 0 12px 32px rgba(184,153,104,0.3);
}
.lf__success h3 { font-family: var(--headline); color: var(--secondColor); font-size: 1.8rem; margin-bottom: 12px; }
.lf__success > p { color: var(--secondColorLight); margin-bottom: 24px; line-height: 1.55; }
.lf__success__steps {
  text-align: left; background: var(--bg-cream, #F8F4ED);
  border-radius: 8px; padding: 24px; margin: 28px 0; border: 1px solid var(--whHairlineGold);
}
.lf__success__steps li { padding: 8px 0; color: var(--secondColor); font-size: 0.95rem; list-style: none; }
.lf__success__steps li::before { content: '✓ '; color: var(--gold-text, #8A6E40); font-weight: 700; margin-right: 10px; }
.lf__success__close {
  background: var(--mainColor); color: #fff; border: none;
  padding: 14px 32px; border-radius: 50px; cursor: pointer;
  font-family: var(--mainFont); font-weight: 600; font-size: 0.95rem;
}
.lf__success__close:hover { background: var(--mainColorLight); }

@media (max-width: 980px) {
  .lf { grid-template-columns: 1fr; }
  .lf__main { padding: 32px 24px; }
  .lf__grid { grid-template-columns: 1fr; }
  .lf__side { padding: 32px 24px; }
  .lf__submit-row { flex-direction: column; align-items: stretch; }
  .lf__submit-hint { text-align: center; }
  .lf__success__card { padding: 40px 24px; }
}

/* ═══ GOLD-CTA-BANNER (Variante C) ═══ */
.cta-gold {
  position: relative;
  padding: 100px 0;
  background: var(--secondaryGradient);
  color: var(--bg-cream, #F8F4ED);
  overflow: hidden;
  text-align: center;
}
.cta-gold::before,
.cta-gold::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background-color: var(--gold-text, #8A6E40);
  opacity: 0.4;
}
.cta-gold::before { top: -1px; transform: scaleY(-1); }
.cta-gold::after  { bottom: -1px; }
.cta-gold__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  width: var(--baseWidth);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
  text-align: left;
}
.cta-gold__siegel {
  width: 180px;
  height: 180px;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 20px rgba(26, 36, 51,.3));
  transform: rotate(-6deg);
}
.cta-gold__content h2 {
  color: var(--bg-cream, #F8F4ED);
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.7rem);
  margin-bottom: 16px;
  line-height: 1.15;
}
.cta-gold__content h2 em {
  font-style: normal;
  display: block;
  background: var(--highlight, #B89968);
  color: var(--text, #1A2433);
  padding: 2px 14px;
  border-radius: 6px;
  width: fit-content;
  margin-top: 4px;
}
.cta-gold__content p {
  color: var(--bg-cream, #F8F4ED);
  font-size: 17px;
  opacity: .9;
  margin-bottom: 24px;
  max-width: 520px;
}
.cta-gold__meta {
  display: flex;
  gap: 24px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--highlight, #B89968);
  opacity: .95;
  flex-wrap: wrap;
}
.cta-gold__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.cta-gold__meta span::before {
  content: '';
  width: 14px;
  height: 14px;
  background-color: var(--highlight, #B89968);
  -webkit-mask: url('../../Brand/Assets/Icons-from-bernert/check.svg') no-repeat center/contain;
          mask: url('../../Brand/Assets/Icons-from-bernert/check.svg') no-repeat center/contain;
}

/* Cream-Button für dunklen Navy-Hintergrund - Kontrast maximieren */
.btn-navy {
  background: var(--bg-cream, #F8F4ED);
  color: var(--text, #1A2433);
  border: 1px solid var(--highlight, #B89968);
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(26, 36, 51, 0.35);
}
.btn-navy:hover {
  background: var(--highlight, #B89968);
  color: var(--text, #1A2433);
  border-color: var(--highlight, #B89968);
}
.btn-navy::before { background-color: var(--text, #1A2433); }

@media (max-width: 800px) {
  .cta-gold__inner { flex-direction: column; text-align: center; gap: 28px; }
  .cta-gold__siegel { width: 140px; height: 140px; }
  .cta-gold__content p { max-width: 100%; }
  .cta-gold__content h2 em { margin: 4px auto 0; }
  .cta-gold__meta { justify-content: center; }
}

/* ═══ KONTAKT-WIDGET (Schwebendes Pill rechts, Bernert-Style) ═══ */
.contact-widget {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  background: #fff;
  border-radius: 50px;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  padding: 10px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: var(--baseTransition);
}
.contact-widget:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.contact-widget__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 2px solid #fff;
}
.contact-widget__avatar::after {
  content: '';
  position: absolute;
  right: 2px; bottom: 2px;
  width: 14px; height: 14px;
  background: #2E8B57;
  border: 2px solid #fff;
  border-radius: 50%;
}
.contact-widget__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-cream, #F8F4ED);
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.4));
  color: var(--main, #1E3A5F);
  transition: var(--baseTransition, all 0.25s ease);
  text-decoration: none;
}
.contact-widget__icon:hover {
  background: var(--main, #1E3A5F);
  border-color: var(--main, #1E3A5F);
  color: var(--highlight, #B89968);
}

.contact-widget__icon svg { fill: currentColor;
  width: 22px;
  height: 22px;
  fill: var(--mainColor);
  transition: var(--baseTransition);
}

/* Expanded Card bei Hover */
.contact-widget__card {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
  padding: 24px 26px;
  width: 300px;
  opacity: 0;
  pointer-events: none;
  transition: var(--baseTransition);
}
.contact-widget:hover .contact-widget__card {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}
.contact-widget__card::after {
  content: '';
  position: absolute;
  left: 100%; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #fff;
}
.contact-widget__card .greeting {
  font-family: var(--headline);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--secondColor);
  margin-bottom: 4px;
}
.contact-widget__card .name {
  font-size: 13px;
  color: var(--mainColor);
  font-weight: 600;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.contact-widget__card p {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 16px;
}
.contact-widget__card .cw-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-widget__card .cw-links a {
  font-size: 13px;
  color: var(--secondColor);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  transition: var(--baseTransition);
}
.contact-widget__card .cw-links a:last-child { border-bottom: none; }
.contact-widget__card .cw-links a:hover { color: var(--mainColor); padding-left: 4px; }
.contact-widget__card .cw-links a::before {
  content: '→';
  color: var(--mainColor);
  font-weight: 700;
}

/* Mobile: kompaktere Version, bleibt sichtbar */
@media (max-width: 900px) {
  .contact-widget {
    right: 12px;
    padding: 6px 6px 10px;
    gap: 8px;
  }
  .contact-widget__avatar { width: 44px; height: 44px; }
  .contact-widget__avatar::after { width: 10px; height: 10px; right: 1px; bottom: 1px; }
  .contact-widget__icon { width: 34px; height: 34px; }
  .contact-widget__icon svg { fill: currentColor; width: 17px; height: 17px; }
  .contact-widget__card { display: none; }  /* Hover-Expand nur Desktop */
}

/* ═══ HAMBURGER-BUTTON (Bernert 1:1) ═══ */
#hamburger {
  position: relative;
  display: none;           /* Desktop: hidden */
  height: 33px;
  width: 40px;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: var(--baseTransition);
  z-index: 101;            /* über Overlay */
  margin-bottom: 30px;
}
#hamburger .hamburger-line {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 40px;
  height: 3px;
  background: var(--mainColor);
  transition: var(--baseTransition);
  border-radius: 2px;
}
#hamburger .hamburger-line:first-child { transform: translateX(-50%) translateY(-10px); }
#hamburger .hamburger-line:last-child { transform: translateX(-50%) translateY(7px); }
#hamburger.is-active .hamburger-line {
  background: #fff;
}
#hamburger.is-active .hamburger-line:first-child { transform: translateX(-50%) translateY(0) rotate(-45deg); }
#hamburger.is-active .hamburger-line:nth-child(2) { opacity: 0; }
#hamburger.is-active .hamburger-line:last-child { transform: translateX(-50%) translateY(0) rotate(45deg); }

@media (max-width: 1120px) {
  #hamburger { display: block; }
  /* Desktop-Nav + CTA ausblenden */
  #site-navigation { display: none !important; }
  .button-header-wrapper { display: none !important; }
  /* Header-Inner kompakter */
  header.head { padding-top: 20px; }
  header.head .inner { align-items: center; }
  header.head #logo { width: 160px; height: 80px; }
}

/* ═══ MOBILE-NAV-OVERLAY (Fullscreen, Navy-BG) ═══ */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, #4A5468 0%, #1A2433 100%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 90px 28px 30px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
  transition: opacity .35s ease, transform .4s ease;
  overflow-y: auto;
}
.mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-nav__logo {
  position: absolute;
  top: 24px;
  left: 28px;
  width: 140px;
}
.mobile-nav__menu {
  list-style: none;
  padding: 0;
  margin: 30px 0 40px;
  flex: 1;
}
.mobile-nav__menu li {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-nav__menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 4px;
  color: #fff;
  text-decoration: none;
  font-family: var(--headline);
  font-size: 1.4rem;
  font-weight: 500;
  transition: var(--baseTransition);
}
.mobile-nav__menu a::after {
  content: '';
  width: 14px;
  height: 14px;
  background-color: var(--mainColor);
  -webkit-mask: url('../../Brand/Assets/Icons-from-bernert/arrow.svg') no-repeat center/contain;
          mask: url('../../Brand/Assets/Icons-from-bernert/arrow.svg') no-repeat center/contain;
  transition: var(--baseTransition);
}
.mobile-nav__menu a:hover,
.mobile-nav__menu a:active {
  color: var(--mainColor);
  padding-left: 10px;
}
.mobile-nav__menu a:hover::after { transform: translateX(6px); }
.mobile-nav__menu li.is-current a { color: var(--mainColor); }

.mobile-nav__cta {
  display: block;
  text-align: center;
  background: var(--primaryGradient);
  color: var(--secondColor);
  padding: 18px 24px;
  border-radius: 50px;
  font-family: var(--headline);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 -4px 14px 0 rgba(0,0,0,.25) inset;
  margin-bottom: 28px;
}

.mobile-nav__contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.mobile-nav__contact a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: var(--baseTransition);
}
.mobile-nav__contact a:hover,
.mobile-nav__contact a:active {
  background: var(--mainColor);
  border-color: var(--mainColor);
  color: var(--secondColor);
}
.mobile-nav__contact a svg {
  width: 26px;
  height: 26px;
  fill: var(--mainColor);
  transition: var(--baseTransition);
}
.mobile-nav__contact a:hover svg { fill: var(--secondColor); }

.mobile-nav__footer {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
}
.mobile-nav__footer a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  margin: 0 6px;
}

/* Scroll-Lock wenn Overlay offen */
body.mobile-nav-open { overflow: hidden; }

/* ═══ SIEGEL-ROW (Trust-Leiste: IVD + Google + Partner) ═══ */
.siegel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 32px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 24px 0 rgba(0,0,0,.08);
}
.siegel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 140px;
  text-align: center;
}
.siegel-item__val {
  font-family: var(--headline);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--secondColor);
  line-height: 1;
}
.siegel-item__label {
  font-size: 12px;
  color: #777;
  letter-spacing: .04em;
  font-weight: 600;
}
.siegel-item__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--mainColor);
  font-size: 1.2rem;
  line-height: 1;
  margin-bottom: 2px;
}
.siegel-item__logo {
  height: 40px;
  width: auto;
  filter: grayscale(100%);
  opacity: .7;
  transition: var(--baseTransition);
}
.siegel-item:hover .siegel-item__logo { filter: grayscale(0%); opacity: 1; }
.siegel-item__divider {
  width: 1px;
  height: 50px;
  background: #e5e5e5;
  flex: 0 0 1px;
  min-width: 1px;
}
@media (max-width: 820px) {
  .siegel-row { gap: 16px; padding: 24px 20px; }
  .siegel-item__divider { display: none; }
  .siegel-item { min-width: 45%; }
}

/* ═══ SLIDER-FRAMEWORK (shared: Testimonials + Beispiele) ═══ */
.slider {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.slider-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 16px 4px 28px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}
.slider-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.slider-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--secondColor);
  background: #fff;
  color: var(--secondColor);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--baseTransition);
}
.slider-btn:hover {
  background: var(--secondColor);
  color: #fff;
}
.slider-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}
.slider-btn svg { width: 16px; height: 16px; }
.slider-btn.prev svg { transform: rotate(180deg); }

/* ═══ TESTIMONIALS (10 Zitate als Slider) ═══ */
.testimonials {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 16px 4px 28px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 1200px;
  margin: 0 auto;
}
.testimonials::-webkit-scrollbar { display: none; }
.testimonials > * {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: calc((100% - 48px) / 3);
  min-width: 300px;
  max-width: 360px;
}
.testimonial {
  background: #fff;
  border-radius: 10px;
  padding: 36px 32px 32px;
  position: relative;
  box-shadow: 0 0 24px 0 rgba(0,0,0,.08);
  transition: var(--baseTransition);
  border-top: 3px solid var(--mainColor);
}
.testimonial:hover { transform: translateY(-4px); box-shadow: 0 10px 36px rgba(0,0,0,.12); }
.testimonial::before {
  content: '"';
  position: absolute;
  top: 16px;
  right: 24px;
  font-family: var(--headline);
  font-size: 5rem;
  color: var(--mainColor);
  opacity: .18;
  line-height: 1;
}
.testimonial__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--mainColor);
  font-size: 1rem;
  margin-bottom: 16px;
}
.testimonial__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--secondColor);
  margin-bottom: 22px;
  min-height: 120px;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #f0f0f0;
}
.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.testimonial__name {
  font-family: var(--headline);
  font-weight: 700;
  color: var(--secondColor);
  font-size: 15px;
}
.testimonial__city {
  font-size: 12px;
  color: var(--mainColor);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .testimonials {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ═══ BEWERTUNGS-BEISPIELE (10 anonymisierte Cases als Slider) ═══ */
.beispiele {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 16px 4px 28px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 1200px;
  margin: 0 auto;
}
.beispiele::-webkit-scrollbar { display: none; }
.beispiele > * {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: calc((100% - 60px) / 4);
  min-width: 250px;
  max-width: 300px;
}
@media (max-width: 900px) {
  .testimonials > * { width: 82%; min-width: 82%; max-width: 82%; }
  .beispiele > * { width: 72%; min-width: 72%; max-width: 72%; }
}
.beispiel {
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 0 24px 0 rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--baseTransition);
  position: relative;
  overflow: hidden;
}
.beispiel:hover { transform: translateY(-4px); }
.beispiel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--primaryGradient);
}
.beispiel__type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--mainColor);
}
.beispiel__desc {
  font-family: var(--headline);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--secondColor);
  line-height: 1.3;
}
.beispiel__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  color: #666;
  padding: 10px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.beispiel__specs span { display: inline-flex; align-items: center; gap: 4px; }
.beispiel__value {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.beispiel__value-label {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.beispiel__value-num {
  font-family: var(--headline);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--mainColor);
}

/* ═══ CONTEXTUAL-CTA (schmaler Zwischen-CTA) ═══ */
.ctx-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  background: var(--secondColor);
  color: #fff;
  padding: 28px 36px;
  border-radius: 10px;
  flex-wrap: wrap;
}
.ctx-cta__text {
  flex: 1;
  min-width: 260px;
}
.ctx-cta__text h3 {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.2;
}
.ctx-cta__text p {
  font-size: 14px;
  color: rgba(255,255,255,.78);
  margin: 0;
}

/* ═══ WHATSAPP-FLOAT-BUTTON (unten-rechts, separat) ═══ */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.5);
  z-index: 85;
  transition: var(--baseTransition);
  text-decoration: none;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(37,211,102,.6); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.wa-float::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: .4;
  z-index: -1;
  animation: wa-pulse 2s ease-out infinite;
}
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ═══ MOBILE-STICKY-BOTTOM-CTA (nur mobile) ═══ */
.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 80;
  background: #fff;
  border-top: 1px solid rgba(26, 36, 51,.1);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  gap: 8px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
}
.mobile-sticky-cta a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  text-decoration: none;
  font-family: var(--headline);
  font-size: 14px;
  font-weight: 600;
  border-radius: 50px;
}
.mobile-sticky-cta .msc-primary {
  background: var(--primaryGradient);
  color: var(--secondColor);
  box-shadow: 0 -4px 14px 0 rgba(0,0,0,.2) inset;
  flex: 2;
}
.mobile-sticky-cta .msc-secondary {
  background: transparent;
  color: var(--secondColor);
  border: 1.5px solid var(--secondColor);
}
.mobile-sticky-cta svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 900px) {
  .mobile-sticky-cta { display: flex; }
  .wa-float { bottom: 90px; }   /* Platz lassen für Mobile-Sticky-CTA */
  /* Extra Padding bottom damit Content nicht von der Sticky-Leiste überdeckt wird */
  body { padding-bottom: 80px; }
}

/* Placeholder für Sektionen */
.placeholder {
  padding: 80px 40px;
  background: #fafafa;
  border: 2px dashed #ddd;
  border-radius: 10px;
  text-align: center;
  color: #999;
  font-family: var(--mainFont);
  font-size: 14px;
}
.placeholder strong { color: #666; display: block; font-size: 16px; margin-bottom: 8px; }

/* Info-Banner */
.info-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(10px);
  color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 13px;
  max-width: 320px;
  line-height: 1.5;
  border: 1px solid rgba(30, 58, 95,.3);
}
.info-banner b { color: var(--mainColor); }

/* Problem-Section (PSL-Struktur, vor 'So läuft der Ankauf') */
.problems { background: var(--bg-cream, #F8F4ED); padding: 90px 0; border-top: 1px solid var(--whHairlineGold, rgba(184,153,104,0.4)); }
.problems__inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.problems__header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.problems__label { display: inline-block; color: var(--gold-text, #8A6E40); font-size: 13px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--whHighlight, #B89968); margin-bottom: 24px; }
.problems__header h2 { font-family: var(--headline, 'Mosafin', serif); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); color: var(--secondColor, #1A2433); margin-bottom: 16px; line-height: 1.2; }
.problems__header h2 em { font-style: italic; color: var(--gold-text, #8A6E40); }
.problems__header p { color: var(--secondColorLight, #4A5468); font-size: 1.05rem; line-height: 1.6; }
.problems__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 800px) { .problems__grid { grid-template-columns: 1fr; } }
.problem-card { background: #fff; padding: 36px 30px; border-radius: 12px; border-top: 3px solid var(--whHighlight, #B89968); box-shadow: 0 4px 16px rgba(0,0,0,0.04); position: relative; transition: all 0.3s; }
.problem-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.problem-card__num { position: absolute; top: -18px; left: 30px; width: 38px; height: 38px; background: var(--whHighlight, #B89968); color: var(--secondColor, #1A2433); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--headline, 'Mosafin', serif); font-weight: 700; font-size: 1.05rem; }
.problem-card h3 { font-family: var(--headline, 'Mosafin', serif); font-size: 1.25rem; color: var(--secondColor, #1A2433); margin-bottom: 14px; line-height: 1.3; }
.problem-card p { color: var(--secondColorLight, #4A5468); line-height: 1.6; font-size: 0.95rem; }
.problem-card__data { display: inline-block; margin-top: 16px; padding: 4px 12px; background: rgba(184,153,104,0.12); color: var(--gold-text, #8A6E40); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; border-radius: 100px; }
.problems__solution-hint { max-width: 780px; margin: 56px auto 0; padding: 24px 32px; background: linear-gradient(135deg, rgba(184,153,104,0.08), rgba(184,153,104,0.02)); border-left: 4px solid var(--whHighlight, #B89968); border-radius: 8px; }
.problems__solution-hint strong { color: var(--gold-text, #8A6E40); }


/* === Positionierungs-Shift Sections (ChatGPT-Bundle) === */

/* Objektartenblock */
.objektarten { background: var(--bg-cream, #F8F4ED); padding: 90px 0; }
.objektarten__inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.objektarten__header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.objektarten__header h2 { font-family: var(--headline, 'Mosafin', serif); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); color: var(--secondColor, #1A2433); margin-bottom: 16px; line-height: 1.2; }
.objektarten__header p { color: var(--secondColorLight, #4A5468); font-size: 1.05rem; line-height: 1.6; }
.objektarten__label { display: inline-block; color: var(--gold-text, #8A6E40); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--whHighlight, #B89968); margin-bottom: 24px; }
.objektarten__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) { .objektarten__grid { grid-template-columns: 1fr; } }
.objektart-card { background: #fff; padding: 36px 30px; border-radius: 12px; border-left: 4px solid var(--whHighlight, #B89968); box-shadow: 0 4px 16px rgba(0,0,0,0.04); transition: all 0.3s; display: flex; flex-direction: column; }
.objektart-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.objektart-card h3 { font-family: var(--headline, 'Mosafin', serif); font-size: 1.35rem; color: var(--secondColor, #1A2433); margin-bottom: 14px; }
.objektart-card p { color: var(--secondColorLight, #4A5468); line-height: 1.65; font-size: 0.95rem; flex-grow: 1; margin-bottom: 20px; }
.objektart-card__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-text, #8A6E40); font-weight: 700; text-decoration: none; font-size: 0.92rem; }
.objektart-card__cta:hover { gap: 12px; }
.objektart-card__cta::after { content: '→'; transition: transform 0.2s; }

/* Verkäufer-Situationen (Pain-Cluster 6 Kacheln) */
.situations { background: #fff; padding: 90px 0; }
.situations__inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.situations__header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.situations__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) { .situations__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .situations__grid { grid-template-columns: 1fr; } }
.situation-card { background: var(--bg-cream, #F8F4ED); padding: 28px 26px; border-radius: 10px; border-top: 3px solid var(--whHighlight, #B89968); transition: all 0.25s; }
.situation-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); background: #fff; }
.situation-card h3 { font-family: var(--headline, 'Mosafin', serif); font-size: 1.1rem; color: var(--secondColor, #1A2433); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.situation-card h3::before { content: '●'; color: var(--gold-text, #8A6E40); font-size: 0.7rem; }
.situation-card p { color: var(--secondColorLight, #4A5468); line-height: 1.55; font-size: 0.92rem; }



/* ═══ COMPARISON-BOX (klassisch vs Direktankauf) ═══ */
.comparison-box { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
@media (max-width: 700px) { .comparison-box { grid-template-columns: 1fr; } }
.comparison-box__col { padding: 36px 32px; }
.comparison-box__col--classic { background: #fff; border-right: 1px solid var(--hairline-gold); }
.comparison-box__col--werthandel { background: linear-gradient(135deg, var(--main, #1E3A5F) 0%, var(--text, #1A2433) 100%); color: #fff; position: relative; }
.comparison-box__col--werthandel::before { content: 'WERTHANDEL'; position: absolute; top: 12px; right: 14px; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--highlight); font-weight: 700; }
.comparison-box__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; }
.comparison-box__col--classic .comparison-box__label { color: var(--text-soft); }
.comparison-box__col--werthandel .comparison-box__label { color: var(--highlight); }
.comparison-box h3 { font-family: var(--headline); font-size: 1.3rem; margin-bottom: 18px; }
.comparison-box__col--classic h3 { color: var(--text); }
.comparison-box__col--werthandel h3 { color: #fff; }
.comparison-box ul { list-style: none; padding: 0; margin: 0; }
.comparison-box li { padding: 9px 0 9px 28px; position: relative; font-size: 0.95rem; line-height: 1.5; }
.comparison-box__col--classic li::before { content: '○'; position: absolute; left: 0; color: var(--text-soft); font-size: 1.1rem; line-height: 1.4; }
.comparison-box__col--werthandel li::before { content: '●'; position: absolute; left: 0; color: var(--highlight); font-size: 1rem; line-height: 1.5; }
.comparison-box__col--classic li { color: var(--text-soft); }
.comparison-box__col--werthandel li { color: rgba(255,255,255,0.92); }

/* WEG-Block (für Wohnung-Page) */
.weg-block { max-width: 920px; margin: 0 auto; background: var(--bg-cream); padding: 40px 36px; border-radius: 14px; border-left: 4px solid var(--highlight); }
.weg-block__label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text, #8A6E40); margin-bottom: 14px; }
.weg-block h3 { font-family: var(--headline); color: var(--main); font-size: 1.4rem; margin-bottom: 16px; }
.weg-block p { color: var(--text-soft); line-height: 1.7; }

/* Diskretionsblock (für MFH-Page) */
.diskretion-block { max-width: 920px; margin: 0 auto; background: linear-gradient(135deg, var(--main) 0%, var(--text) 100%); padding: 48px 36px; border-radius: 14px; color: #fff; }
.diskretion-block__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--highlight); margin-bottom: 14px; }
.diskretion-block h3 { font-family: var(--headline); color: #fff; font-size: 1.5rem; margin-bottom: 16px; }
.diskretion-block p { color: rgba(255,255,255,0.85); line-height: 1.7; }


/* ═══ Subpage Hero-Backgrounds (lokale Bilder pro Page-Type) ═══ */
body[data-page-type="einfamilienhaus"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.70) 45%, rgba(26,36,51,.88) 100%),
    url('../beispiele/einfamilienhaus/efh-03.jpg') center/cover;
}
body[data-page-type="wohnung"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.70) 45%, rgba(26,36,51,.88) 100%),
    url('../beispiele/wohnung/wohnung-05.jpg') center/cover;
}
body[data-page-type="mehrfamilienhaus"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.70) 45%, rgba(26,36,51,.88) 100%),
    url('../beispiele/mehrfamilienhaus/mfh-10.jpg') center/cover;
}
body[data-page-type="reihenhaus"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.70) 45%, rgba(26,36,51,.88) 100%),
    url('../beispiele/einfamilienhaus/efh-06.jpg') center/cover;
}

body[data-page-type="situation"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.70) 45%, rgba(26,36,51,.88) 100%),
    url('../beispiele/einfamilienhaus/efh-04.jpg') center/cover;
}
body[data-page-type="geerbt"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.78) 0%, rgba(26,36,51,.65) 45%, rgba(26,36,51,.85) 100%),
    url('../beispiele/einfamilienhaus/efh-05.jpg') center/cover;
}
body[data-page-type="city"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.68) 45%, rgba(26,36,51,.88) 100%),
    url('../heroes/landkreis-lichtenfels.webp') center/cover;
}
body[data-page-type="city"][data-city="bamberg"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.68) 45%, rgba(26,36,51,.88) 100%),
    url('../heroes/bamberg.webp') center/cover;
}
body[data-page-type="city"][data-city="bayreuth"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.68) 45%, rgba(26,36,51,.88) 100%),
    url('../heroes/bayreuth.webp') center/cover;
}
body[data-page-type="city"][data-city="nuernberg"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.68) 45%, rgba(26,36,51,.88) 100%),
    url('../heroes/nuernberg.webp') center/cover;
}
body[data-page-type="city"][data-city="erlangen"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.68) 45%, rgba(26,36,51,.88) 100%),
    url('../heroes/erlangen.webp') center/cover;
}
body[data-page-type="city"][data-city="kulmbach"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.68) 45%, rgba(26,36,51,.88) 100%),
    url('../heroes/kulmbach.webp') center/cover;
}
body[data-page-type="city"][data-city="lichtenfels"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.68) 45%, rgba(26,36,51,.88) 100%),
    url('../heroes/landkreis-lichtenfels.webp') center/cover;
}
body[data-page-type="city"][data-city="forchheim"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.68) 45%, rgba(26,36,51,.88) 100%),
    url('../heroes/forchheim.webp') center/cover;
}
body[data-page-type="city"][data-city="badstaffelstein"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.68) 45%, rgba(26,36,51,.88) 100%),
    url('../heroes/bad-staffelstein.webp') center/cover;
}


body[data-page-type="city"][data-city="coburg"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.68) 45%, rgba(26,36,51,.88) 100%),
    url('../heroes/coburg.webp') center/cover;
}
body[data-page-type="schaden"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.70) 45%, rgba(26,36,51,.88) 100%),
    url('../beispiele/brandschaeden/brand-03.jpg') center/cover;
}
body[data-page-type="brand"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.70) 45%, rgba(26,36,51,.88) 100%),
    url('../beispiele/brandschaeden/brand-01.jpg') center/cover;
}
body[data-page-type="wasser"] .hero {
  background:
    linear-gradient(180deg, rgba(26,36,51,.82) 0%, rgba(26,36,51,.70) 45%, rgba(26,36,51,.88) 100%),
    url('../beispiele/wasserschaeden/wasser-01.jpg') center/cover;
}


/* ═══ Trust-Photos Grid (Index, 3-spaltig) ═══ */
@media (max-width: 800px) {
  .trust-photos { grid-template-columns: 1fr !important; }
}

/* ═══ Media-Card (Content-Bild auf Unterseiten) ═══ */
.media-section { background: var(--bg-cream); }
.media-card img { aspect-ratio: 16 / 9; object-fit: cover; }


/* ─── Responsive-Refinement (Stand 26.05.2026) ─────────────────────────── */

/* Steps: 4-Step-Ablauf braucht 2x2-Zwischenstufe statt 1x4-Stack */
@media (max-width: 900px) and (min-width: 601px) {
  .steps {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px 24px !important;
  }
  .steps__line { display: none; }
  .step::after { display: none; }
}

/* Trust-Photos: zwischen 1000 und 600 ist 2-spalt sinnvoll */
@media (max-width: 1000px) and (min-width: 601px) {
  .trust-photos { grid-template-columns: 1fr 1fr !important; }
}

/* Media-Card: Caption kompakter auf Mobile */
@media (max-width: 600px) {
  .media-card figcaption {
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
  }
}

/* Hero-Form Submit: nicht zu klein auf Mobile */
@media (max-width: 600px) {
  .hero-form__submit { font-size: 0.92rem !important; padding: 12px 14px !important; }
}

/* lf__submit-row: auf 600-980 schon sichtbar besser stacken */
@media (max-width: 720px) {
  .lf__submit { width: 100%; justify-content: center; }
  .lf__main { padding: 24px 18px !important; }
}


/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE-PASS (Stand 26.05.2026 - Komplett-Optimierung)
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero zwischen 980 und 1280px: Form bekommt mehr Platz, Copy schmaler ── */
@media (max-width: 1280px) and (min-width: 981px) {
  .hero__inner {
    gap: 36px !important;
    max-width: 1080px !important;
    padding-right: 32px !important;
  }
  .hero__copy { flex: 1 1 580px !important; max-width: 640px !important; padding-right: 0 !important; }
  .hero h1 { font-size: clamp(1.6rem, 2.5vw, 2.4rem) !important; line-height: 1.1 !important; }
  .hero__copy .lead { font-size: 0.95rem !important; }
  .hero-form { padding: 24px 20px !important; flex: 0 0 340px !important; max-width: 340px !important; }
  .hero-form__title { font-size: 1.2rem !important; line-height: 1.15 !important; }
  .hero-form__sub { font-size: 0.85rem !important; margin-bottom: 16px !important; }
  .contact-widget { display: none !important; }
}

/* ── Mobile/Tablet bis 980px: Hero-Form zentriert, Sub-Text kompakter ── */
@media (max-width: 980px) {
  .hero-form { padding: 28px 24px !important; }
  .hero-form__title { font-size: 1.3rem !important; line-height: 1.2 !important; }
  .hero-form__sub { font-size: 0.9rem !important; line-height: 1.4 !important; margin-bottom: 18px !important; }
  .hero-form__field label { font-size: 0.75rem !important; }
  .hero-form__field input, .hero-form__field select { padding: 10px 12px !important; font-size: 0.9rem !important; }
  /* Contact-Widget zum Bottom-Bar oder ausblenden */
  .contact-widget {
    top: auto !important;
    bottom: 80px !important;
    right: 12px !important;
    transform: none !important;
  }
}

/* ── Schmal-Tablet 600-800px: Contact-Widget komplett aus (Mobile-Bottom-Bar reicht) ── */
@media (max-width: 800px) {
  .contact-widget { display: none !important; }
}

/* ── Phone bis 600px: Padding generell reduziert ── */
@media (max-width: 600px) {
  .hero { padding-top: 200px !important; padding-bottom: 60px !important; }
  .hero h1 { font-size: clamp(1.4rem, 5vw, 1.9rem) !important; }
  .hero__copy .lead { font-size: 0.92rem !important; line-height: 1.5 !important; }
  .hero-form { padding: 22px 18px !important; border-radius: 12px !important; }
  .hero-form__title { font-size: 1.15rem !important; }
  .hero-form__sub { font-size: 0.85rem !important; margin-bottom: 14px !important; }
  .hero-form__row { grid-template-columns: 1fr !important; gap: 8px !important; }
  /* Section-Padding generell schmaler */
  .section { padding: 56px 0 !important; }
  .container { padding: 0 16px !important; }
  /* h2 Section-Headlines */
  h2 { font-size: clamp(1.4rem, 5vw, 1.9rem) !important; line-height: 1.2 !important; }
  /* Buttons full-width auf Phone */
  .btn { padding: 12px 24px !important; padding-left: 44px !important; font-size: 15px !important; }
  /* CTA-Banner kompakter */
  .cta-gold { padding: 60px 0 !important; }
}

/* ── Sehr klein (iPhone SE 360px): Padding noch enger ── */
@media (max-width: 380px) {
  .hero-form { padding: 18px 14px !important; }
  .hero-form__title { font-size: 1.05rem !important; }
  .hero h1 { font-size: 1.35rem !important; }
  .container { padding: 0 12px !important; }
  .lf__main { padding: 18px 14px !important; }
}

/* ── Mobile-Bottom-Bar darf Footer-Content nicht verdecken ── */
@media (max-width: 800px) {
  body { padding-bottom: 64px !important; }
}

/* ── Trust-Bar (4 Trust-Items horizontal) wraps statt overflow ── */
@media (max-width: 980px) {
  .trust-bar { flex-wrap: wrap !important; gap: 16px !important; padding: 24px 16px !important; }
  .trust-bar__siegel { width: 60px !important; }
}

/* ── Premium Lead-Form (lf) - schon bei 980px 1-spaltig, aber Padding ── */
@media (max-width: 980px) {
  .lf { gap: 20px !important; margin-top: 32px !important; }
  .lf__main { padding: 32px 22px !important; }
  .lf__title { font-size: 1.3rem !important; }
  .lf__intro { font-size: 0.92rem !important; margin-bottom: 22px !important; }
  .lf__side { padding: 28px 22px !important; }
}

/* ── Cities-Slider auf Mobile (war ab 650): nach unten anpassen ── */
@media (max-width: 650px) {
  .cities-more { margin-top: 28px !important; }
}

/* ── Marktpreise Bar-Chart auf Mobile schmaler ── */
@media (max-width: 600px) {
  .marktpreise__toggle button { padding: 8px 14px !important; font-size: 0.85rem !important; }
  .bar-row { grid-template-columns: 70px 1fr 80px !important; gap: 8px !important; }
  .bar-city { font-size: 0.85rem !important; }
  .bar-price-num { font-size: 0.85rem !important; }
}

/* ── Objektart-Cards (3-spaltig auf Index) - Stack auf Mobile ── */
@media (max-width: 800px) {
  .objektart-cards { grid-template-columns: 1fr !important; gap: 18px !important; }
}

/* ── USP-Cards (4-spaltig) - 2x2 zwischen 600-980, 1-spaltig <600 ── */
@media (max-width: 980px) and (min-width: 601px) {
  .usps { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
}
@media (max-width: 600px) {
  .usps { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* ── Jennifer-Block (320px + content) - Stack auf Mobile ── */
@media (max-width: 760px) {
  .jennifer-block { grid-template-columns: 1fr !important; }
  .jennifer-block__img { min-height: 240px !important; }
  .jennifer-block__content { padding: 28px 22px !important; }
}

/* ── Comparison-Box (2-spaltig EFH-Seite) - Stack auf Mobile ── */
@media (max-width: 760px) {
  .comparison-box { grid-template-columns: 1fr !important; gap: 16px !important; }
  .comparison-box__col { padding: 20px !important; }
}

/* ── FAQ Accordion-Inputs touch-friendly ── */
@media (max-width: 600px) {
  .accordion-label { padding: 18px 14px !important; font-size: 0.95rem !important; line-height: 1.35 !important; }
}

/* ── Risk-Reverser Banner auf Mobile zentriert + Padding klein ── */
@media (max-width: 600px) {
  .risk-reverser { padding: 28px 18px !important; flex-direction: column !important; text-align: center !important; gap: 14px !important; }
}

/* ── Skip-to-content darf nicht überlappen auf Mobile ── */
@media (max-width: 600px) {
  .skip-to-content:focus { top: 8px !important; left: 8px !important; }
}


/* lf__side - schmale rechte Spalte zwischen 980-1280px (sonst überlauft Text) */
@media (max-width: 1280px) and (min-width: 981px) {
  .lf__side { padding: 28px 22px !important; gap: 20px !important; }
  .lf__side h3 { font-size: 1rem !important; }
  .lf__person__avatar { width: 52px !important; height: 52px !important; font-size: 1rem !important; }
  .lf__person__name { font-size: 0.92rem !important; }
  .lf__person__role { font-size: 0.62rem !important; letter-spacing: 0.04em !important; }
  .lf__promise-text { font-size: 0.85rem !important; line-height: 1.45 !important; }
  .lf__promise-icon { width: 30px !important; height: 30px !important; font-size: 0.82rem !important; }
  .lf__promise { gap: 14px !important; }
  .lf__contact-alt { font-size: 0.78rem !important; padding-top: 20px !important; }
}

/* lf__side auch generell besser: word-wrap, overflow-Schutz */
.lf__side { overflow-wrap: break-word; word-break: keep-all; }
.lf__side * { min-width: 0; }


/* ═══ Hero-Trust-Card (Jennifer als Hero-Anker) ═══ */
.hero-trust-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 16px 22px 16px 16px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-left: 3px solid var(--whHighlight, #B89968);
  border-radius: 14px;
  max-width: 520px;
}
.hero-trust-card__photo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-image: url('../team/jennifer-portrait.jpg');
  background-size: cover;
  background-position: center top;
  border: 2px solid rgba(184,153,104,0.55);
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.hero-trust-card__body { flex: 1; min-width: 0; }
.hero-trust-card__name {
  font-family: var(--headline);
  font-weight: 700;
  font-size: 1.02rem;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 3px;
}
.hero-trust-card__role {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  font-weight: 700;
  margin-bottom: 8px;
}
.hero-trust-card__quote {
  font-family: var(--headline);
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 980px) {
  .hero-trust-card { margin: 24px auto 0; max-width: 460px; }
}
@media (max-width: 600px) {
  .hero-trust-card { gap: 14px; padding: 14px 16px; }
  .hero-trust-card__photo { width: 60px; height: 60px; }
  .hero-trust-card__name { font-size: 0.95rem; }
  .hero-trust-card__role { font-size: 0.65rem; }
  .hero-trust-card__quote { font-size: 0.85rem; }
}


/* Submenu Section-Labels (NEU - strukturierte Untermenues) */
.submenu__label {
  font-size: 0.7rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40) !important;
  font-weight: 700 !important;
  padding: 8px 24px 4px !important;
  margin-top: 4px;
  border-top: 1px solid rgba(184,153,104,0.15);
  pointer-events: none;
}
.submenu__label:first-child { border-top: 0; margin-top: 0; }
.submenu__label a { display: none; }
.submenu .submenu__label { display: block !important; }

/* Submenu 3-Spalten-Layout für "Verkaufen" (Objektart / Situation / Schaden) */
#primary-menu .submenu--3col {
  display: grid !important;
  grid-template-columns: 260px 260px 240px;
  gap: 0 40px !important;
  min-width: 860px !important;
  padding: 22px 28px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
}
#primary-menu .has-children:hover .submenu--3col,
#primary-menu .has-children:focus-within .submenu--3col {
  transform: translateX(-50%) translateY(0) !important;
}
#primary-menu .submenu--3col .submenu__col {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
#primary-menu .submenu--3col .submenu__col > .submenu__label {
  display: block !important;
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 6px !important;
}
#primary-menu .submenu--3col .submenu__col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#primary-menu .submenu--3col .submenu__col ul li a {
  white-space: nowrap !important;
  padding: 7px 10px !important;
  display: block !important;
  border-radius: 8px !important;
}
#primary-menu .submenu--3col .submenu__col ul li a:hover {
  background: rgba(184, 153, 104, 0.10) !important;
  color: var(--mainColor, #1E3A5F) !important;
}


/* ════════════════════════════════════════════════════════════════════════
   ICON-SYSTEM - Single Source of Truth
   ════════════════════════════════════════════════════════════════════════

   Drei Klassen, drei Verwendungs-Zwecke. Jedes Icon nutzt EINE davon.

   1. .icon-action      → klickbar (Phone/Mail/WhatsApp/Social), Cream-BG, Navy-Symbol, Gold-Hairline
   2. .icon-decoration  → nicht klickbar (Step, USP, Trust-Badge), Cream-BG, Gold-Symbol
   3. .icon-inline      → im Text-Fluss (Arrows ", →"), erbt Farbe

   Mehrere Größen: --sm 32px, --md 40px (Default), --lg 56px, --xl 80px

   ════════════════════════════════════════════════════════════════════════ */

/* ─── Action-Icons (klickbar) ─────────────────────────────────────────── */
.icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-cream, #F8F4ED);
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.4));
  color: var(--main, #1E3A5F);            /* Symbol-Farbe (currentColor) */
  transition: var(--baseTransition, all 0.25s ease);
  cursor: pointer;
  text-decoration: none;
}
.icon-action:hover {
  background: var(--main, #1E3A5F);
  border-color: var(--main, #1E3A5F);
  color: var(--highlight, #B89968);
}
.icon-action svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.icon-action--sm { width: 32px; height: 32px; }
.icon-action--sm svg { width: 16px; height: 16px; }
.icon-action--lg { width: 56px; height: 56px; }
.icon-action--lg svg { width: 26px; height: 26px; }

/* ─── Action-Icons auf dunklem BG (Sticky-Bar, Bottom-Bar) ──────────── */
.icon-action--on-dark {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.icon-action--on-dark:hover {
  background: var(--highlight, #B89968);
  border-color: var(--highlight, #B89968);
  color: var(--secondColor, #1A2433);
}

/* ─── Decoration-Icons (Step, USP, Trust-Badges) ─────────────────────── */
.icon-decoration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg-cream, #F8F4ED);
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.4));
  color: var(--gold-text, #8A6E40);
}
.icon-decoration svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  stroke: currentColor;
}
.icon-decoration--sm { width: 40px; height: 40px; border-radius: 8px; }
.icon-decoration--sm svg { width: 20px; height: 20px; }
.icon-decoration--lg { width: 72px; height: 72px; border-radius: 14px; }
.icon-decoration--lg svg { width: 36px; height: 36px; }
.icon-decoration--xl { width: 88px; height: 88px; border-radius: 16px; }
.icon-decoration--xl svg { width: 44px; height: 44px; }

/* ─── Decoration auf dunklem BG (z.B. .lf__side, .diskretion-block) ──── */
.icon-decoration--on-dark {
  background: rgba(184,153,104,0.15);
  border-color: rgba(184,153,104,0.3);
  color: var(--highlight, #B89968);
}

/* ─── Inline-Icons (im Text) ──────────────────────────────────────────── */
.icon-inline {
  display: inline-block;
  vertical-align: -2px;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* ─── Social-Icons (Footer) ──────────────────────────────────────────── */
.icon-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.82);
  transition: var(--baseTransition, all 0.25s ease);
}
.icon-social:hover {
  background: var(--highlight, #B89968);
  color: var(--secondColor, #1A2433);
}
.icon-social svg { width: 18px; height: 18px; fill: currentColor; }


/* ════════════════════════════════════════════════════════════════════════
   TRACK-RECORD CASES - Premium Image-Cards
   ════════════════════════════════════════════════════════════════════════ */
/* === AUTO-SLIDER fuer Track-Record === */
.cases-slider {
  max-width: 1320px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding: 8px 0;
}
.cases-slider__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: casesScroll 70s linear infinite;
  will-change: transform;
}
/* Slider laeuft IMMER weiter - kein Pause on Hover (Roland-Pflicht) */

/* Hard-Override fuer Card-Look im Slider - gewinnt gegen 06-subpages.css */
.cases-slider .case-card {
  flex: 0 0 300px !important;
  width: 300px !important;
  background: #fff !important;
  color: var(--secondColor, #1A2433) !important;
  padding: 0 !important;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.25)) !important;
  border-top: 1px solid var(--whHairlineGold, rgba(184,153,104,0.25)) !important;
  border-radius: 12px !important;
}
.cases-slider .case-card__img {
  height: 170px !important;
  border-radius: 12px 12px 0 0;
}
.cases-slider .case-card__body {
  padding: 18px 18px 20px !important;
}
.cases-slider .case-card__type {
  color: var(--gold-text, #8A6E40) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.14em;
}
.cases-slider .case-card__title {
  color: var(--secondColor, #1A2433) !important;
  font-size: 1.02rem !important;
  margin: 0 0 4px !important;
}
.cases-slider .case-card__location {
  color: var(--secondColorLight, #4A5468) !important;
  font-size: 0.82rem !important;
  margin-bottom: 12px !important;
}
.cases-slider .case-card__specs {
  display: block !important;
  grid-template-columns: none !important;
  border-top: 1px solid rgba(184,153,104,0.18) !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  list-style: none !important;
}
.cases-slider .case-card__specs li {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  gap: 16px !important;
  padding: 7px 0 !important;
  font-size: 0.82rem !important;
  border-bottom: 1px solid rgba(184,153,104,0.1) !important;
}
.cases-slider .case-card__specs li:last-child {
  border-bottom: 0 !important;
}
.cases-slider .case-card__specs li span:first-child {
  color: var(--secondColorLight, #4A5468) !important;
  font-weight: 500 !important;
  flex-shrink: 0;
  min-width: 84px;
}
.cases-slider .case-card__specs li span:last-child {
  color: var(--secondColor, #1A2433) !important;
  font-weight: 700 !important;
  text-align: left !important;
  word-break: normal;
  flex: 1;
}
.cases-slider .case-card__price {
  border-top: 2px solid var(--highlight, #B89968) !important;
  padding-top: 12px !important;
}
.cases-slider .case-card__price-label {
  color: var(--gold-text, #8A6E40) !important;
  font-size: 0.66rem !important;
}
.cases-slider .case-card__price-num {
  color: var(--secondColor, #1A2433) !important;
  font-size: 1.35rem !important;
}
.cases-slider .case-card__badge {
  font-size: 0.66rem !important;
  padding: 5px 12px !important;
}

@keyframes casesScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 12px)); }    /* -50% (halbe Inhalt, da 2x dupliziert) - halbes gap */
}

/* Responsive Slider-Card-Breite */
@media (max-width: 1100px) {
  .cases-slider .case-card { flex: 0 0 320px; width: 320px; }
}
@media (max-width: 768px) {
  .cases-slider .case-card { flex: 0 0 280px; width: 280px; }
  .cases-slider__track { animation-duration: 60s; }
}
@media (max-width: 480px) {
  .cases-slider .case-card { flex: 0 0 240px; width: 240px; }
  .cases-slider .case-card__img { height: 160px; }
  .cases-slider .case-card__price-num { font-size: 1.3rem; }
}

/* A11Y: Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
  .cases-slider__track { animation: none; }
  .cases-slider {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .cases-slider__track { gap: 16px; }
}
.case-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(30,58,95,0.06);
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.2));
  transition: var(--baseTransition, all 0.3s ease);
  display: flex;
  flex-direction: column;
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(30,58,95,0.14);
  border-color: var(--highlight, #B89968);
}
.case-card__img {
  position: relative;
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-cream, #F8F4ED);
  transition: var(--baseTransition, all 0.3s ease);
}
.case-card:hover .case-card__img {
  filter: brightness(1.05);
}
.case-card__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--secondColor, #1A2433);
  color: var(--highlight, #B89968);
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.case-card__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.case-card__type {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  margin-bottom: 6px;
}
.case-card__title {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--secondColor, #1A2433);
  margin: 0 0 6px;
  line-height: 1.25;
}
.case-card__location {
  font-size: 0.88rem;
  color: var(--secondColorLight, #4A5468);
  margin-bottom: 16px;
}
.case-card__location::before {
  content: '📍';
  margin-right: 4px;
}
.case-card__specs {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  border-top: 1px solid var(--whHairlineGold, rgba(184,153,104,0.2));
  flex: 1;
}
.case-card__specs li {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(184,153,104,0.1);
  font-size: 0.85rem;
}
.case-card__specs li:last-child { border-bottom: 0; }
.case-card__specs li span:first-child {
  color: var(--secondColorLight, #4A5468);
  font-weight: 500;
}
.case-card__specs li span:last-child {
  color: var(--secondColor, #1A2433);
  font-weight: 700;
  text-align: right;
}
.case-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 16px;
  border-top: 2px solid var(--highlight, #B89968);
  margin-top: auto;
}
.case-card__price-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  margin-bottom: 2px;
}
.case-card__price-num {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--secondColor, #1A2433);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.cases-grid__footer {
  margin: 48px auto 0;
  text-align: center;
  max-width: 720px;
}
.cases-grid__footer p {
  font-size: 0.9rem;
  color: var(--secondColorLight, #4A5468);
  font-style: italic;
  margin-bottom: 22px;
}

/* Responsive */




/* ════════════════════════════════════════════════════════════════════════
   RISK-REVERSAL-BAND (Bernert-Adaption - direkt unter Hero)
   ════════════════════════════════════════════════════════════════════════ */
.risk-band {
  background: var(--secondColor, #1A2433);
  padding: 32px 0;
  position: relative;
  border-top: 1px solid rgba(184,153,104,0.2);
  border-bottom: 1px solid rgba(184,153,104,0.2);
}
.risk-band__inner {
  max-width: 1240px;
  width: var(--baseWidth, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: start;
}
.risk-band__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 12px;
  border-right: 1px solid rgba(184,153,104,0.18);
}
.risk-band__item:last-child { border-right: 0; }
.risk-band__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--highlight, #B89968);
  background: rgba(184,153,104,0.12);
  border-radius: 50%;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.risk-band__icon svg { width: 22px; height: 22px; }
.risk-band__title {
  font-family: var(--headline, 'Mosafin', serif);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 6px;
}
.risk-band__sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  max-width: 220px;
}

@media (max-width: 980px) {
  .risk-band { padding: 28px 0; }
  .risk-band__inner { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .risk-band__item:nth-child(2) { border-right: 0; }
  .risk-band__item:nth-child(odd) { border-right: 1px solid rgba(184,153,104,0.18); }
}
@media (max-width: 560px) {
  .risk-band__inner { grid-template-columns: 1fr; }
  .risk-band__item { border-right: 0 !important; padding: 16px 8px; border-bottom: 1px solid rgba(184,153,104,0.15); }
  .risk-band__item:last-child { border-bottom: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   TRUST-BULLETS unter Hero-Form (Bernert-Adaption)
   ════════════════════════════════════════════════════════════════════════ */
.hero-form__trust {
  list-style: none;
  padding: 14px 0 0;
  margin: 12px 0 0;
  border-top: 1px solid rgba(184,153,104,0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-form__trust li {
  font-size: 0.78rem;
  color: var(--text-soft, #4A5468);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}
.hero-form__trust li::before {
  content: '✓';
  color: var(--gold-text, #8A6E40);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}


/* Finanzierung-Pain-Section: Mobile stacken */
@media (max-width: 760px) {
  .finance-pain { grid-template-columns: 1fr !important; gap: 28px !important; }
  .finance-pain__visual { padding: 28px 24px !important; }
}

/* Vergleichsbox auf Index - gleiches Design wie EFH-Page */
.comparison-box--index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 760px) {
  .comparison-box--index { grid-template-columns: 1fr !important; gap: 16px !important; }
}


/* ════════════════════════════════════════════════════════════════════════
   BERNERT-ADAPTION: Background-Rhythmus + Gold-Bullets + Animationen
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Section-Background-Varianten (rhythmischer Wechsel) ──────────── */
.section--white { background: #fff; }
.section--navy  {
  background: var(--secondColor, #1A2433);
  color: #fff;
}
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: rgba(255,255,255,0.85); }
.section--navy .section-label { color: var(--highlight, #B89968); }

/* Mehr Atemraum zwischen Sections - Bernert-Style */
.section { padding: clamp(60px, 8vw, 110px) 0; }
@media (max-width: 600px) {
  .section { padding: 48px 0 !important; }
}

/* ─── 2. Gold-Haekchen-Bullet-System (Universal) ─────────────────────── */
.bullet-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
  text-align: left;
}
.bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(184,153,104,0.15);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--text, #1A2433);
}
.bullet-list li:last-child { border-bottom: 0; }
.bullet-list li::before {
  content: '';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-cream, #F8F4ED);
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.4));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238A6E40'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 1px;
}
/* Variante: auf navy-BG */
.section--navy .bullet-list li {
  border-bottom-color: rgba(184,153,104,0.18);
  color: rgba(255,255,255,0.92);
}
.section--navy .bullet-list li::before {
  background-color: rgba(184,153,104,0.15);
  border-color: rgba(184,153,104,0.3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B89968'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
/* Compact-Variante (kleine Specs) */
.bullet-list--compact li { padding: 8px 0; font-size: 0.88rem; }
.bullet-list--compact li::before { width: 20px; height: 20px; background-size: 14px 14px; }

/* ─── 3. Mikro-Animationen ────────────────────────────────────────────── */
/* Universal Card-Hover-Lift */
.usp-card,
.problem-card,
.objektart-card,
.situation-card,
.stat-item,
.case-card {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s ease;
}
.usp-card:hover,
.problem-card:hover,
.objektart-card:hover,
.situation-card:hover,
.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(30,58,95,0.10);
}

/* Button-Arrow-Animation */
.btn,
.btn-outline,
.btn--outline {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.btn:hover::after {
  transform: translateX(100%);
}

/* Image-Zoom auf Hover (universal fuer alle BG-Image-Cards) */
.city-card__img,
.objektart-card__img,
.case-card__img,
.media-card img {
  transition: transform 0.6s ease, filter 0.4s ease;
}
.city-card:hover .city-card__img,
.objektart-card:hover .objektart-card__img,
.case-card:hover .case-card__img {
  transform: scale(1.04);
  filter: brightness(1.04);
}

/* Section-Header Center-Pattern (Bernert-Style) */
.section-header,
.section__header,
.problems__header,
.situations__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}

/* Reduced-Motion: alles deaktivieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   BERNERT-DESIGN-SYSTEM (A-K komplett)
   ════════════════════════════════════════════════════════════════════════ */

/* ─── A. Konsistenter Whitespace-Token ──────────────────────────────── */
:root {
  --section-pad: clamp(80px, 9vw, 130px);
  --section-pad-tight: clamp(48px, 6vw, 80px);
  --content-max: 720px;       /* Standard-Lese-Breite */
  --content-wide: 1100px;     /* Grid/Cards-Breite */
}
.section { padding: var(--section-pad) 0; }
.section--tight { padding: var(--section-pad-tight) 0; }

/* ─── B. Story-Block (asymmetrisch Image+Text) ──────────────────────── */
.story-block {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  max-width: var(--content-wide);
  margin: 0 auto;
}
.story-block--reverse { grid-template-columns: 1.2fr 1fr; }
.story-block--reverse .story-block__visual { order: 2; }
.story-block__visual {
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--bg-cream);
  position: relative;
  aspect-ratio: 4 / 5;
  box-shadow: 0 16px 40px rgba(30,58,95,0.12);
}
.story-block__visual img,
.story-block__visual .story-block__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  display: block;
  transition: transform 0.7s ease;
}
.story-block:hover .story-block__visual img,
.story-block:hover .story-block__visual .story-block__bg { transform: scale(1.04); }
.story-block__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.story-block__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
}
.story-block__title {
  font-family: var(--headline);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1.15;
  color: var(--text);
  margin: 0;
}
.story-block__title em {
  font-style: italic;
  color: var(--gold-text, #8A6E40);
  font-weight: 700;
}
.story-block__subhead {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-soft);
  font-weight: 500;
  margin: 0;
}
.story-block__lead {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}
@media (max-width: 800px) {
  .story-block,
  .story-block--reverse { grid-template-columns: 1fr; gap: 24px; }
  .story-block--reverse .story-block__visual { order: 0; }
  .story-block__visual { aspect-ratio: 16 / 10; }
}

/* ─── C. .h-focus pattern (Headline-Em Gold) ──────────────────────── */
.h-focus em,
.section-header h2 em,
.section__header h2 em {
  font-style: italic;
  color: var(--gold-text, #8A6E40);
  font-weight: 700;
  position: relative;
}
/* Bei dunklem BG: gold statt gold-text */
.section--navy .h-focus em,
.section--navy h2 em,
.hero h2 em,
.hero h1 em {
  color: var(--highlight, #B89968);
}

/* ─── D. .subhead Pattern (Untertitel zwischen H2 und Lead) ─────── */
.subhead {
  font-family: var(--mainFont);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-soft);
  line-height: 1.5;
  max-width: var(--content-max);
  margin: -8px auto 16px;
  text-align: center;
}
.section--navy .subhead { color: rgba(255,255,255,0.85); }

/* ─── E. Karten generell softer (Border statt harter Schatten) ────── */
.usp-card,
.problem-card,
.objektart-card,
.situation-card,
.case-card,
.stat-item,
.problem-card,
.situations__grid > div {
  border-radius: 14px;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.18));
}

/* ─── G. Section-Header Center + Width Token ───────────────────────── */
.section-header,
.section__header,
.problems__header,
.situations__header,
.objektarten__header {
  text-align: center;
  max-width: var(--content-max);
  margin: 0 auto clamp(40px, 5vw, 56px);
}
.section-header .lead,
.section__header .lead,
.problems__header p,
.situations__header p,
.objektarten__header p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── I. Section-Pattern als BG-Decoration ─────────────────────────── */
.section--patterned {
  position: relative;
  overflow: hidden;
}
.section--patterned::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, transparent 49%, rgba(184,153,104,0.08) 49%, rgba(184,153,104,0.08) 51%, transparent 51%);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.4;
  z-index: 0;
}
.section--patterned > * { position: relative; z-index: 1; }

/* Variante: Dot-Pattern subtil */
.section--dotted {
  position: relative;
  overflow: hidden;
}
.section--dotted::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(184,153,104,0.18) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.section--dotted > * { position: relative; z-index: 1; }

/* ─── J. Verbessertes Button-Arrow ─────────────────────────────────── */
.btn::before {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover::before {
  transform: translateY(-50%) translateX(4px);
}


/* Anlass als Gold-Pill innerhalb der Card */
/* Verkaufsgrund-Zeile: stack-Layout (Label oben, Pille darunter) */
.cases-slider .case-card__specs li:last-child {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
.cases-slider .case-card__specs li:last-child span:first-child {
  min-width: 0 !important;
}
.cases-slider .case-card__specs li:last-child span:last-child {
  display: inline-block;
  background: var(--bg-cream, #F8F4ED);
  color: var(--gold-text, #8A6E40) !important;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.35));
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: 1.35;
  max-width: 100%;
  white-space: normal;
  word-break: normal;
  text-align: left !important;
  flex: 0 0 auto !important;
}


/* ─── Track-Record: Mini-Stat-Header oben in Card ─── */
.cases-slider .case-card__meta {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(248,244,237,0.95);
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.4));
  color: var(--secondColor, #1A2433);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Cursor-Pointer bei klickbaren Cards (modal) */
.cases-slider .case-card[data-modal] {
  cursor: pointer;
}
.cases-slider .case-card[data-modal]:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(30,58,95,0.16);
}

/* ─── Filter-Pills ─── */
.cases-filter {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 28px;
  max-width: 900px;
}
.cases-filter__btn {
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.35));
  color: var(--secondColor, #1A2433);
  padding: 9px 18px;
  border-radius: 50px;
  font-family: var(--mainFont);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.cases-filter__btn:hover {
  border-color: var(--highlight, #B89968);
  color: var(--main, #1E3A5F);
}
.cases-filter__btn.is-active {
  background: var(--main, #1E3A5F);
  border-color: var(--main, #1E3A5F);
  color: #fff;
}
.cases-filter__btn.is-active:hover { color: var(--highlight, #B89968); }
@media (max-width: 600px) {
  .cases-filter { gap: 6px; }
  .cases-filter__btn { padding: 7px 12px; font-size: 0.78rem; }
}

/* Pause Slider beim Filtern (Modal/Filter aktiv) */
.cases-slider.is-paused .cases-slider__track { animation-play-state: paused; }

/* ─── Case-Detail-Modal ─── */
.case-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.case-modal.is-open { display: flex; animation: cmFade 0.25s ease-out; }
.case-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26,36,51,0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.case-modal__panel {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
  animation: cmPop 0.32s ease-out;
}
.case-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.35));
  background: #fff;
  color: var(--secondColor, #1A2433);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.case-modal__close:hover { background: var(--main); color: var(--highlight); }
.case-modal__img {
  width: 100%;
  height: 280px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-cream);
  border-radius: 16px 16px 0 0;
}
.case-modal__body { padding: 28px 32px 32px; }
.case-modal__type {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  margin-bottom: 6px;
}
.case-modal__title {
  font-family: var(--headline);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--secondColor);
  margin: 0 0 4px;
  line-height: 1.2;
}
.case-modal__location {
  font-size: 0.95rem;
  color: var(--secondColorLight);
  margin-bottom: 18px;
}
.case-modal__location::before { content: '📍 '; }
.case-modal__specs {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  border-top: 1px solid var(--whHairlineGold);
}
.case-modal__specs li {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(184,153,104,0.12);
  font-size: 0.92rem;
}
.case-modal__specs li span:first-child {
  min-width: 110px;
  color: var(--secondColorLight);
}
.case-modal__specs li span:last-child {
  color: var(--secondColor);
  font-weight: 700;
}
.case-modal__price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 2px solid var(--highlight);
  flex-wrap: wrap;
}
.case-modal__price-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.case-modal__price {
  font-family: var(--headline);
  font-size: 1.7rem;
  color: var(--secondColor);
  font-weight: 700;
}
.case-modal__note {
  font-size: 0.78rem;
  color: var(--secondColorLight);
  font-style: italic;
  margin: 22px 0 0;
  line-height: 1.5;
}
@keyframes cmFade { from {opacity:0} to {opacity:1} }
@keyframes cmPop { from {opacity:0; transform: translateY(20px) scale(0.97)} to {opacity:1; transform: none} }
@media (max-width: 600px) {
  .case-modal { padding: 12px; }
  .case-modal__img { height: 200px; }
  .case-modal__body { padding: 22px 22px 24px; }
  .case-modal__title { font-size: 1.15rem; }
  .case-modal__price { font-size: 1.35rem; }
}


/* ════════════════════════════════════════════════════════════════════════
   VERGLEICHSBOX V2 - Rote X / Gruene Haken / Werthandel-Hervorhebung
   ════════════════════════════════════════════════════════════════════════ */
.comparison-box--v2 {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 20px;
  align-items: stretch;
  position: relative;
}
.comparison-box--v2 .comparison-box__col {
  position: relative;
  padding: 36px 32px 32px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  transition: transform 0.32s ease;
}

/* Klassisch (links, weiss, gedämpft) */
.comparison-box--v2 .comparison-box__col--classic {
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.2));
  color: var(--secondColor, #1A2433);
  opacity: 0.95;
}
.comparison-box--v2 .comparison-box__col--classic .comparison-box__label {
  color: var(--secondColorLight, #4A5468);
}
.comparison-box--v2 .comparison-box__col--classic h3 { color: var(--secondColor, #1A2433); }
.comparison-box--v2 .comparison-box__col--classic ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.comparison-box--v2 .comparison-box__col--classic li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--secondColorLight, #4A5468);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.comparison-box--v2 .comparison-box__col--classic li:last-child { border-bottom: 0; }
.comparison-box--v2 .comparison-box__col--classic li::before {
  content: '';
  position: static;          /* override .comparison-box li::before { position: absolute } */
  left: auto;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #DC2626; /* Solid Rot, voll deckend */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 2px;
  box-shadow: 0 1px 3px rgba(220,38,38,0.30);
}

/* Werthandel (rechts, navy, hervorgehoben) */
.comparison-box--v2 .comparison-box__col--werthandel {
  background: linear-gradient(135deg, var(--main, #1E3A5F) 0%, var(--secondColor, #1A2433) 100%);
  color: #fff;
  border: 2px solid var(--highlight, #B89968);
  box-shadow: 0 18px 40px rgba(30,58,95,0.20);
  transform: scale(1.02);
  overflow: hidden;
}
.comparison-box--v2 .comparison-box__col--werthandel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, transparent 49%, rgba(184,153,104,0.05) 49%, rgba(184,153,104,0.05) 51%, transparent 51%);
  background-size: 24px 24px;
  pointer-events: none;
  opacity: 0.5;
}
.comparison-box--v2 .comparison-box__col--werthandel > * { position: relative; z-index: 1; }
.comparison-box--v2 .comparison-box__col--werthandel .comparison-box__label {
  color: var(--highlight, #B89968);
}
.comparison-box--v2 .comparison-box__col--werthandel h3 { color: #fff; }
.comparison-box--v2 .comparison-box__col--werthandel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.comparison-box--v2 .comparison-box__col--werthandel li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.95);
  border-bottom: 1px solid rgba(184,153,104,0.18);
  font-weight: 500;
}
.comparison-box--v2 .comparison-box__col--werthandel li:last-child { border-bottom: 0; }
.comparison-box--v2 .comparison-box__col--werthandel li::before {
  content: '';
  position: static;          /* override .comparison-box li::before { position: absolute } */
  left: auto;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #16A34A; /* Solid Grün, voll deckend */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 2px;
  border: 0;
  box-shadow: 0 1px 3px rgba(22,163,74,0.35);
}

/* Header-Icons in beiden Spalten */
.comparison-box--v2 .comparison-box__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(220, 38, 38, 0.08);
  color: rgba(220, 38, 38, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.comparison-box--v2 .comparison-box__icon svg { width: 28px; height: 28px; }
.comparison-box--v2 .comparison-box__icon--gold {
  background: rgba(184, 153, 104, 0.18);
  color: var(--highlight, #B89968);
}

/* "Empfohlen"-Pill oben rechts */
.comparison-box--v2 .comparison-box__pill {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--highlight, #B89968);
  color: var(--secondColor, #1A2433);
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 50px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* Werthandel-Siegel (klein, unter dem Pill) */
.comparison-box--v2 .comparison-box__siegel {
  position: absolute;
  bottom: 22px;
  right: 22px;
  width: 84px;
  height: auto;
  opacity: 0.92;
  z-index: 1;
  pointer-events: none;
}

/* Common Labels & Headlines */
.comparison-box--v2 .comparison-box__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.comparison-box--v2 h3 {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.4rem;
  margin: 0 0 22px;
  line-height: 1.2;
}

/* Responsive */
@media (max-width: 800px) {
  .comparison-box--v2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .comparison-box--v2 .comparison-box__col--werthandel {
    transform: none;
    order: -1;
  }
  .comparison-box--v2 .comparison-box__col {
    padding: 28px 22px;
  }
  .comparison-box--v2 .comparison-box__siegel { width: 60px; bottom: 14px; right: 14px; }
  .comparison-box--v2 .comparison-box__pill { font-size: 0.62rem; padding: 4px 10px; }
}


/* ════════════════════════════════════════════════════════════════════════
   VERGLEICHSBOX - Premium-Variante mit Haken/Kreuzen + Siegel
   ════════════════════════════════════════════════════════════════════════ */
.comparison-box--index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  position: relative;
}

.comparison-box--index .comparison-box__col {
  position: relative;
  padding: 36px 32px 32px;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Klassisch-Spalte: dezent cream-getöntes Weiß + Border + Dot-Pattern */
.comparison-box--index .comparison-box__col--classic {
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.2));
}
.comparison-box--index .comparison-box__col--classic::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(74,84,104,0.08) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0.4;
}
.comparison-box--index .comparison-box__col--classic > * { position: relative; z-index: 1; }
.comparison-box--index .comparison-box__col--classic .comparison-box__label {
  color: var(--secondColorLight, #4A5468) !important;
}
.comparison-box--index .comparison-box__col--classic h3 {
  color: var(--secondColor, #1A2433);
  font-family: var(--headline);
  font-size: 1.35rem;
  margin: 12px 0 22px;
}

/* Werthandel-Spalte: prominent, Navy-Gradient + Gold-Akzente + Lift */
.comparison-box--index .comparison-box__col--werthandel {
  background: linear-gradient(135deg, var(--main, #1E3A5F) 0%, var(--secondColor, #1A2433) 100%);
  color: #fff;
  border: 2px solid var(--highlight, #B89968);
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(30,58,95,0.18);
}
.comparison-box--index .comparison-box__col--werthandel:hover {
  transform: translateY(-12px);
  box-shadow: 0 24px 50px rgba(30,58,95,0.25);
}
.comparison-box--index .comparison-box__col--werthandel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(184,153,104,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,153,104,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.5;
}
.comparison-box--index .comparison-box__col--werthandel > * { position: relative; z-index: 1; }

/* "EMPFOHLEN"-Badge oben links auf Werthandel-Spalte */
.comparison-box--index .comparison-box__col--werthandel::after {
  content: 'EMPFOHLEN';
  position: absolute;
  top: 0;
  right: 32px;
  background: var(--highlight, #B89968);
  color: var(--secondColor, #1A2433);
  font-family: var(--headline);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 7px 16px 8px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  z-index: 2;
}

/* Siegel oben rechts in Werthandel-Spalte */
.comparison-box--index .comparison-box__siegel {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 56px;
  height: 56px;
  z-index: 2;
  opacity: 0.95;
}

.comparison-box--index .comparison-box__col--werthandel .comparison-box__label {
  color: var(--highlight, #B89968) !important;
  margin-top: 56px; /* Platz für Siegel + Badge */
}
.comparison-box--index .comparison-box__col--werthandel h3 {
  color: #fff;
  font-family: var(--headline);
  font-size: 1.4rem;
  margin: 12px 0 22px;
}

/* Listen mit Haken/Kreuzen statt Bullets */
.comparison-box--index ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.comparison-box--index ul li {
  position: relative;
  padding: 11px 0 11px 36px;
  font-size: 0.95rem;
  line-height: 1.5;
  border-bottom: 1px solid rgba(184,153,104,0.15);
}
.comparison-box--index ul li:last-child { border-bottom: 0; }

/* Rotes X für Klassisch */
.comparison-box--index .comparison-box__col--classic li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.30);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DC2626'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.comparison-box--index .comparison-box__col--classic li {
  color: var(--secondColor, #1A2433);
}

/* Grüner Haken für Werthandel */
.comparison-box--index .comparison-box__col--werthandel li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322C55E'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.comparison-box--index .comparison-box__col--werthandel li {
  color: rgba(255,255,255,0.94);
  border-bottom-color: rgba(184,153,104,0.18);
}

/* Mobile: stack + Werthandel zuerst */
@media (max-width: 760px) {
  .comparison-box--index {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .comparison-box--index .comparison-box__col {
    padding: 28px 22px 24px;
  }
  .comparison-box--index .comparison-box__col--werthandel {
    transform: none;
    order: -1; /* Werthandel zuerst */
  }
  .comparison-box--index .comparison-box__col--werthandel:hover {
    transform: none;
  }
}


/* ─── Track-Record Filter: gedimmte Cards (laufen weiter mit) ─── */
.cases-slider .case-card.is-dimmed {
  opacity: 0.18;
  filter: grayscale(0.7);
  pointer-events: none;
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.cases-slider .case-card {
  transition: opacity 0.4s ease, filter 0.4s ease,
              transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Pause-Klasse bleibt verfuegbar aber wird nicht mehr automatisch gesetzt */
.cases-slider.is-paused .cases-slider__track {
  animation-play-state: paused;
}


/* ─── Status-Pille statt Kaufpreis (vertraulich) ─── */
.case-card__status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  margin-top: auto;
  border-top: 2px solid var(--highlight, #B89968);
}
.case-card__status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
  flex-shrink: 0;
  animation: pulseGreen 2.5s ease-in-out infinite;
}
.case-card__status-text {
  font-family: var(--headline);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--secondColor, #1A2433);
  letter-spacing: 0.01em;
}
.cases-slider .case-card__status-text { font-size: 0.88rem !important; }
@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0.06); }
}

/* Status-Block im Modal */
.case-modal__price-row .case-card__status {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}


/* Modal-Status statt Preis-Label */
.case-modal__price-row .case-modal__price-label {
  display: none;
}


/* ════════════════════════════════════════════════════════════════════════
   VERGLEICHSBOX - HARDFIX: Icons + Text-Padding (gewinnt gegen alle alten)
   ════════════════════════════════════════════════════════════════════════ */
.comparison-box--index ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.comparison-box--index ul li {
  list-style: none !important;
  padding: 12px 0 12px 40px !important;
  position: relative !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  border-bottom: 1px solid rgba(184,153,104,0.15) !important;
}
.comparison-box--index ul li:last-child { border-bottom: 0 !important; }

/* Rotes X - solider Hintergrund, deutlich sichtbar */
.comparison-box--index .comparison-box__col--classic ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 13px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background-color: #FEE2E2 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DC2626'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") !important;
  background-size: 16px 16px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1px solid #FCA5A5 !important;
}
.comparison-box--index .comparison-box__col--classic li {
  color: var(--secondColor, #1A2433) !important;
}

/* Gruener Haken - solider Hintergrund */
.comparison-box--index .comparison-box__col--werthandel ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 13px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background-color: #DCFCE7 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23166534'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important;
  background-size: 16px 16px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1px solid #86EFAC !important;
}
.comparison-box--index .comparison-box__col--werthandel li {
  color: rgba(255,255,255,0.94) !important;
  border-bottom-color: rgba(184,153,104,0.20) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   TRACK-RECORD: Status-Block ersetzen durch prominente VERKAUFSDAUER
   ════════════════════════════════════════════════════════════════════════ */
.case-card__status {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding-top: 16px !important;
  margin-top: auto !important;
  border-top: 2px solid var(--highlight, #B89968) !important;
}
/* Label oben - kleine Caps */
.case-card__status::before {
  content: 'Notartermin';
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
}
/* Verkaufsdauer (kommt aus Mini-Stat-Header) wird gross dargestellt */
.case-card__status .case-card__status-dot { display: none !important; }
.case-card__status .case-card__status-text {
  font-family: var(--headline, 'Mosafin', serif) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--secondColor, #1A2433) !important;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.cases-slider .case-card__status .case-card__status-text {
  font-size: 1.4rem !important;
}

/* Mini-Stat-Header oben in Card → weg (war Doppel-Info, jetzt unten prominent) */
.cases-slider .case-card__meta {
  display: none !important;
}


/* ════════════════════════════════════════════════════════════════════════
   HERO NEU - A+B-Mix (Foto-BG + Jennifer-Person rechts statt Form)
   ════════════════════════════════════════════════════════════════════════ */
body .hero.hero--new,
.hero.hero--new {
  position: relative !important;
  min-height: auto !important;
  padding: clamp(130px, 14vh, 180px) 0 0 !important;
  margin-top: -135px !important;
  background:
    linear-gradient(90deg, rgba(26,36,51,0.55) 0%, rgba(26,36,51,0.30) 60%, rgba(26,36,51,0.10) 100%),
    linear-gradient(180deg, rgba(26,36,51,0.78) 0%, rgba(26,36,51,0.62) 40%, rgba(26,36,51,0.90) 100%),
    url('../heroes/hero-startseite.webp') center/cover !important;
  background-color: #1A2433 !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
}
.hero--new .hero__inner {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr !important;
  gap: 64px;
  align-items: center;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 32px 96px;
  flex-wrap: nowrap !important;
}

.hero--new .hero__copy {
  flex: none;
  max-width: none;
}
.hero--new .hero__eyebrow {
  display: inline-block;
  font-family: var(--mainFont);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--highlight, #B89968);
  margin-bottom: 18px;
  padding: 6px 18px;
  border: 1px solid rgba(184,153,104,0.5);
  border-radius: 50px;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
}
.hero--new h1 {
  font-family: var(--headline);
  font-size: clamp(1.9rem, 1.1rem + 2.0vw, 2.9rem);
  line-height: 1.08;
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
  letter-spacing: -0.5px;
}
.hero--new h1 em {
  font-style: italic;
  color: var(--highlight, #B89968);
  font-weight: 700;
}
.hero--new .hero__subhead {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
  font-weight: 400;
  max-width: 560px;
  margin: 0 0 28px;
}
.hero--new .hero__cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.hero--new .btn-outline-white {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 12px 28px;
  border-radius: 50px;
  font-family: var(--headline);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}
.hero--new .btn-outline-white:hover {
  background: var(--highlight, #B89968);
  border-color: var(--highlight, #B89968);
  color: var(--secondColor, #1A2433);
}
.hero--new .hero__trust-line {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  margin: 0;
  letter-spacing: 0.02em;
}

/* Jennifer-Person rechts statt Form */
.hero--new .hero__person {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 22px;
  align-items: center;
  padding: 28px 28px 28px 22px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.18);
  border-left: 3px solid var(--highlight, #B89968);
  border-radius: 16px;
  max-width: 460px;
  justify-self: end;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25);
}
.hero--new .hero__person-photo {
  width: 110px;
  height: 140px;
  border-radius: 12px;
  background-image: url('../team/jennifer-portrait.jpg');
  background-size: cover;
  background-position: center top;
  border: 1px solid rgba(184,153,104,0.4);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  flex-shrink: 0;
}
.hero--new .hero__person-card { min-width: 0; }
.hero--new .hero__person-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--highlight, #B89968);
  margin-bottom: 6px;
}
.hero--new .hero__person-name {
  font-family: var(--headline);
  font-size: 1.18rem;
  color: #fff;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 4px;
}
.hero--new .hero__person-role {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.4;
  margin-bottom: 12px;
}
.hero--new .hero__person-quote {
  font-family: var(--headline);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.94);
  line-height: 1.4;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(184,153,104,0.25);
}

/* Trust-Strip unten im Hero */
.hero--new .hero__trust-strip {
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 18px 0;
}
.hero--new .hero__trust-strip-inner {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
}
.hero--new .hero__trust-strip-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--highlight, #B89968);
  margin-right: 8px;
}
.hero--new .hero__trust-strip-item { font-weight: 500; }
.hero--new .hero__trust-strip-sep { color: rgba(184,153,104,0.45); }

/* Schnellanfrage-Stage direkt nach Hero */
.hero-form-section { padding: clamp(64px, 8vw, 100px) 0; }
.hero-form-stage {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  max-width: 1140px;
  margin: 0 auto;
  align-items: start;
}
.hero-form-stage__intro h2 {
  font-family: var(--headline);
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.3rem);
  margin-bottom: 14px;
  color: var(--text, #1A2433);
  line-height: 1.18;
}
.hero-form-stage__intro .lead { margin-bottom: 24px; color: var(--text-soft, #4A5468); }
.hero-form-stage__form .hero-form {
  margin: 0;
  width: 100%;
  max-width: none;
  padding: 36px 32px;
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.3));
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(30,58,95,0.10);
}

/* Responsive */
@media (max-width: 980px) {
  .hero--new .hero__inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding-bottom: 60px;
  }
  .hero--new .hero__person { justify-self: stretch; max-width: 100%; }
  .hero-form-stage { grid-template-columns: 1fr; gap: 32px; }
  .hero--new .hero__trust-strip-inner { font-size: 0.75rem; gap: 8px; }
}
@media (max-width: 600px) {
  .hero--new { padding-top: clamp(120px, 16vh, 170px) !important; }
  .hero--new .hero__person { grid-template-columns: 80px 1fr; gap: 14px; padding: 18px; }
  .hero--new .hero__person-photo { width: 80px; height: 100px; }
  .hero--new .hero__person-name { font-size: 1rem; }
  .hero--new .hero__person-quote { font-size: 0.85rem; }
}


/* Hero-Text-Shadow fuer extra Lesbarkeit auf Foto-BG */
.hero--new h1 {
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}
.hero--new .hero__subhead {
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.hero--new .hero__eyebrow {
  background: rgba(26,36,51,0.55) !important;
}
.hero--new .hero__trust-line,
.hero--new .hero__trust-strip {
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero--new .hero__trust-strip {
  background: rgba(0,0,0,0.42);
}


/* Hero-Layout-Polish: Grid + Top-Align */
.hero--new .hero__inner {
  grid-template-columns: 1.75fr 0.85fr !important;
  align-items: start !important;
  padding-top: 16px !important;
}
.hero--new .hero__copy { max-width: 820px !important; }
.hero--new .hero__person { margin-top: 32px !important; max-width: 440px !important; }


/* ─── Trust-Bar als saubere Cards (kein nackter Look mehr) ─── */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
  position: relative;
}
.trust-bar__siegel {
  width: 88px;
  height: 88px;
  align-self: center;
  margin: 0 16px;
  flex-shrink: 0;
}
.trust-bar .trust-item {
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.25));
  border-radius: 14px;
  padding: 22px 24px 20px;
  flex: 1 1 200px;
  min-width: 200px;
  max-width: 280px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(30,58,95,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  border-top: 3px solid var(--highlight, #B89968);
}
.trust-bar .trust-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(30,58,95,0.12);
}
.trust-bar .trust-item__num {
  font-family: var(--headline);
  font-size: clamp(1.4rem, 0.9rem + 1.4vw, 1.9rem);
  font-weight: 700;
  color: var(--secondColor, #1A2433);
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.trust-bar .trust-item__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  margin-bottom: 4px;
}
.trust-bar .trust-item__sub {
  font-size: 0.82rem;
  color: var(--secondColorLight, #4A5468);
  line-height: 1.45;
}
@media (max-width: 980px) {
  .trust-bar__siegel { display: none; }
  .trust-bar { padding: 0 20px; gap: 12px; }
  .trust-bar .trust-item { flex: 1 1 220px; padding: 18px 16px; }
}
@media (max-width: 600px) {
  .trust-bar .trust-item { flex: 1 1 100%; max-width: 100%; }
}


/* ════════════════════════════════════════════════════════════════════════
   EINHEITLICHE CONTAINER-BREITE (alles fluchtet)
   ════════════════════════════════════════════════════════════════════════ */
body header.head .inner,
body .hero--new .hero__inner,
body .hero--new .hero__trust-strip-inner,
body .hero-form-stage,
body .section .container,
body .section > .container {
  max-width: 1240px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}

/* Auf Mobile: Padding etwas kleiner */
@media (max-width: 600px) {
  body header.head .inner,
  body .hero--new .hero__inner,
  body .hero--new .hero__trust-strip-inner,
  body .section .container,
  body .section > .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   FINAL ALIGNMENT FIX - Hero-Text vertikal mittig + Risk/Schnellanfrage
   ════════════════════════════════════════════════════════════════════════ */

/* Hero-Text vertikal mittig zwischen Logo und Bankpartner-Strip austarieren */
body .hero--new .hero__inner,
.hero--new .hero__inner {
  align-items: center !important;
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
body .hero--new .hero__person,
.hero--new .hero__person {
  margin-top: 0 !important;
}

/* Risk-Band-Inner: padding-left/right für Linksbündigkeit mit Logo (211px) */
body .risk-band__inner,
.risk-band__inner {
  max-width: 1240px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}

/* Hero-Form-Stage sitzt schon in .container - kein doppeltes Padding */
body .hero-form-stage,
.hero-form-stage {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Mobile: kleinere Hero-Paddings */
@media (max-width: 600px) {
  body .hero--new .hero__inner,
  .hero--new .hero__inner {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  body .risk-band__inner,
  .risk-band__inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   JENNIFER-CARD POLISH + STICKY-FLIMMER-FIX
   ════════════════════════════════════════════════════════════════════════ */

/* Jennifer-Card: prominenter, dichteres Glas, größeres Foto, ruhigeres Layout */
body .hero--new .hero__person,
.hero--new .hero__person {
  grid-template-columns: 128px 1fr !important;
  gap: 24px !important;
  padding: 30px 30px 30px 26px !important;
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  border-left: 3px solid var(--highlight, #B89968) !important;
  border-radius: 18px !important;
  max-width: 480px !important;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Größeres Foto, schärfere Kanten, dezent goldener Rahmen */
body .hero--new .hero__person-photo,
.hero--new .hero__person-photo {
  width: 128px !important;
  height: 162px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(184,153,104,0.55) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.40),
    inset 0 0 0 1px rgba(255,255,255,0.08) !important;
}

/* Eyebrow ein Hauch dezenter */
body .hero--new .hero__person-eyebrow,
.hero--new .hero__person-eyebrow {
  font-size: 0.68rem !important;
  letter-spacing: 0.20em !important;
  margin-bottom: 8px !important;
}

/* Name größer, prominenter */
body .hero--new .hero__person-name,
.hero--new .hero__person-name {
  font-size: 1.26rem !important;
  line-height: 1.18 !important;
  margin-bottom: 5px !important;
  letter-spacing: -0.2px !important;
}

/* Rolle dichter gestapelt */
body .hero--new .hero__person-role,
.hero--new .hero__person-role {
  font-size: 0.8rem !important;
  margin-bottom: 14px !important;
  color: rgba(255,255,255,0.78) !important;
}

/* Quote: typografische Anführungszeichen, größerer Atemraum */
body .hero--new .hero__person-quote,
.hero--new .hero__person-quote {
  font-size: 0.96rem !important;
  line-height: 1.45 !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(184,153,104,0.30) !important;
  color: rgba(255,255,255,0.95) !important;
}


/* ─── Sticky-Header: Flimmer-Fix ───
   Ursache: `transition: all 0.25s` auf `header.head` animiert beim
   Sticky-Toggle gleichzeitig padding, max-width, background, box-shadow,
   border-radius - das ruckelt/flimmert. Fix: nur die wirklich sichtbaren
   Properties animieren, GPU-Hint setzen. */
body header.head,
header.head {
  transition: padding 180ms ease !important;
  will-change: padding;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

body header.head .inner,
header.head .inner {
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    padding 180ms ease,
    max-width 220ms ease !important;
  will-change: background-color, box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

body header.head #logo,
header.head #logo {
  transition: width 220ms ease, height 220ms ease, margin 220ms ease !important;
  will-change: width, height;
}

body header.head #logo img,
header.head #logo img {
  transition: opacity 160ms ease-in-out !important;
}


/* ════════════════════════════════════════════════════════════════════════
   JENNIFER-CARD V2: mehr Platz für Text, Foto leicht kompakter
   ════════════════════════════════════════════════════════════════════════ */

/* Hero-Grid: rechte Spalte (Card) breiter - vorher 1.75/0.85, jetzt 1.55/1 */
body .hero--new .hero__inner,
.hero--new .hero__inner {
  grid-template-columns: 1.55fr 1fr !important;
  gap: 56px !important;
}

/* Card-Layout: Foto links etwas kleiner, Text-Spalte deutlich mehr Raum */
body .hero--new .hero__person,
.hero--new .hero__person {
  grid-template-columns: 108px 1fr !important;
  gap: 22px !important;
  padding: 26px 28px 28px 24px !important;
  max-width: 440px !important;
}

body .hero--new .hero__person-photo,
.hero--new .hero__person-photo {
  width: 108px !important;
  height: 138px !important;
  border-radius: 12px !important;
}

/* Quote etwas kompakter, aber atmungsaktiv */
body .hero--new .hero__person-quote,
.hero--new .hero__person-quote {
  font-size: 0.93rem !important;
  line-height: 1.5 !important;
  padding-top: 14px !important;
  margin-top: 4px !important;
}

/* Responsive: kleine Viewports → Foto oben mittig, Text drunter zentriert */
@media (max-width: 1100px) {
  body .hero--new .hero__person,
  .hero--new .hero__person {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 26px 24px 26px 24px !important;
    border-left: 1px solid rgba(255,255,255,0.20) !important;
    border-top: 3px solid var(--highlight, #B89968) !important;
  }
  body .hero--new .hero__person-photo,
  .hero--new .hero__person-photo {
    width: 120px !important;
    height: 152px !important;
    justify-self: center !important;
    margin-bottom: 6px !important;
  }
}


/* Sticky-Transitions synchron auf 200ms - verhindert restliches Asynchron-Flimmern */
body header.head,
header.head {
  transition: padding 200ms ease !important;
}
body header.head .inner,
header.head .inner {
  transition:
    background-color 200ms ease,
    box-shadow 200ms ease,
    padding 200ms ease,
    max-width 200ms ease !important;
}
body header.head #logo,
header.head #logo {
  transition: width 200ms ease, height 200ms ease, margin 200ms ease !important;
}
body header.head #logo img,
header.head #logo img {
  transition: opacity 200ms ease !important;
}


/* ════════════════════════════════════════════════════════════════════════
   GLOBAL CONTAINER ALIGNMENT - wirkt auch auf Subpages
   Alle Container der Sub-Pages (Hero, Sections) fluchten ebenfalls auf 1240px
   ════════════════════════════════════════════════════════════════════════ */

body .hero .hero__inner,
body .hero__inner.container,
body section .container,
body section > .container,
body .container {
  max-width: 1240px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}

/* Aber: smarte Ausnahmen - schmalere Form-Container, Tabellen etc. NICHT erweitern */
body .hero-form-stage .hero-form,
body .container--narrow,
body .container.narrow {
  max-width: none !important;
}

@media (max-width: 600px) {
  body .hero .hero__inner,
  body .hero__inner.container,
  body section .container,
  body section > .container,
  body .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   SUBPAGE-HERO-HARMONISIERUNG - alle Heros linksbündig wie Index
   ════════════════════════════════════════════════════════════════════════ */

/* .hero--single: Pages ohne Side-Form (Brand-/Wasserschaden) - 1-Spalter */
body .hero.hero--single .hero__inner,
.hero.hero--single .hero__inner {
  grid-template-columns: 1fr !important;
  max-width: 1240px !important;
}

body .hero.hero--single .hero__copy,
.hero.hero--single .hero__copy {
  max-width: 880px !important;
  text-align: left !important;
}

/* Generischer Subpage-Hero: alle direkten Kinder im linken Grid-Item halten,
   falls keine .hero__copy-Wrap-Klasse existiert (Defensive - Fallback) */
body .hero:not(.hero--new):not(.hero--single) .hero__inner > .hero__eyebrow,
body .hero:not(.hero--new):not(.hero--single) .hero__inner > h1,
body .hero:not(.hero--new):not(.hero--single) .hero__inner > .hero__sub,
body .hero:not(.hero--new):not(.hero--single) .hero__inner > .hero__cta {
  grid-column: 1 !important;
  max-width: 760px !important;
}

/* Alle Subpage-Heros: Text linksbündig (nicht zentriert) */
body .hero:not(.hero--new) .hero__copy,
.hero:not(.hero--new) .hero__copy {
  text-align: left !important;
}
body .hero:not(.hero--new) .hero__inner,
.hero:not(.hero--new) .hero__inner {
  text-align: left !important;
}


/* ════════════════════════════════════════════════════════════════════════
   SUBPAGE-HERO: EINE SEITE MAX - wie Index
   ════════════════════════════════════════════════════════════════════════ */

/* Hero-Container Höhe begrenzen, padding kompakt */
body .hero:not(.hero--new),
.hero:not(.hero--new) {
  min-height: auto !important;
  padding-top: clamp(120px, 14vh, 170px) !important;
  padding-bottom: clamp(60px, 8vh, 100px) !important;
}

/* H1 Subpage: gleicher Stil wie Index - 2-3 Zeilen, nicht riesig */


/* Sub-Text kompakter Lead */
body .hero:not(.hero--new) .hero__sub,
.hero:not(.hero--new) .hero__sub {
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem) !important;
  line-height: 1.55 !important;
  max-width: 640px !important;
  margin-bottom: 24px !important;
}

/* Eyebrow konsistent zu Index */
body .hero:not(.hero--new) .hero__eyebrow,
.hero:not(.hero--new) .hero__eyebrow {
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  margin-bottom: 22px !important;
}

/* CTA-Reihe kompakt */
body .hero:not(.hero--new) .hero__cta,
.hero:not(.hero--new) .hero__cta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

@media (max-width: 980px) {
  body .hero:not(.hero--new),
  .hero:not(.hero--new) {
    padding-top: clamp(100px, 16vh, 150px) !important;
    padding-bottom: clamp(40px, 6vh, 80px) !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   HERO-FORM AUF HERO-HÖHE BEGRENZEN
   Kompakter: kleinere Paddings, dichtere Felder. Form endet auf Hero-Höhe.
   ════════════════════════════════════════════════════════════════════════ */

/* Subpage-Hero-Inner: Form vertikal zur Copy zentrieren */
body .hero:not(.hero--new) .hero__inner,
.hero:not(.hero--new) .hero__inner {
  align-items: center !important;
}

/* Hero-Form: kompaktes Layout, max Höhe = Hero-Inhalt */
body .hero .hero-form,
.hero .hero-form {
  padding: 22px 22px 24px !important;
  max-width: 440px !important;
  margin: 0 !important;
  align-self: center !important;
  max-height: none !important;
  overflow: visible !important;
}

body .hero .hero-form__title,
.hero .hero-form__title {
  font-size: 1.22rem !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}

body .hero .hero-form__sub,
.hero .hero-form__sub {
  font-size: 0.85rem !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
}

body .hero .hero-form__step-indicator,
.hero .hero-form__step-indicator {
  margin-bottom: 14px !important;
}

body .hero .hero-form__field,
.hero .hero-form__field {
  margin-bottom: 11px !important;
}

body .hero .hero-form__field label,
.hero .hero-form__field label {
  font-size: 0.78rem !important;
  margin-bottom: 4px !important;
}

body .hero .hero-form__field input,
body .hero .hero-form__field select,
.hero .hero-form__field input,
.hero .hero-form__field select {
  padding: 10px 12px !important;
  font-size: 0.9rem !important;
}

body .hero .hero-form__btn,
.hero .hero-form__btn,
body .hero .hero-form__submit,
.hero .hero-form__submit {
  padding: 13px !important;
  font-size: 0.95rem !important;
  margin-top: 6px !important;
}

body .hero .hero-form__hint,
.hero .hero-form__hint {
  font-size: 0.72rem !important;
  margin-top: 8px !important;
}

/* Scrollbar dezent */
body .hero .hero-form::-webkit-scrollbar { width: 6px; }
body .hero .hero-form::-webkit-scrollbar-thumb { background: rgba(184,153,104,0.4); border-radius: 3px; }

/* Mobile: Form unter Copy → keine Höhen-Begrenzung */
@media (max-width: 980px) {
  body .hero .hero-form,
  .hero .hero-form {
    max-height: none !important;
    overflow: visible !important;
    max-width: 100% !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   SUBPAGE-HERO SUB-TEXT LINKSBÜNDIG (Fix für hero--single und alle Subpages)
   ════════════════════════════════════════════════════════════════════════ */
body .hero:not(.hero--new) .hero__sub,
.hero:not(.hero--new) .hero__sub {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

body .hero:not(.hero--new) .hero__cta,
.hero:not(.hero--new) .hero__cta {
  justify-content: flex-start !important;
}

body .hero:not(.hero--new) .hero__copy,
.hero:not(.hero--new) .hero__copy {
  align-items: flex-start !important;
}


/* ════════════════════════════════════════════════════════════════════════
   SUBPAGE-HERO AUF INDEX-MASS GEZOGEN (verbindliche Referenz: index.html)
   ════════════════════════════════════════════════════════════════════════ */

/* H1 - gleiche Schriftgröße wie Index (clamp ergibt ~48px bei Desktop) */



/* Sub-Text - gleiche Größe wie Index */
body .hero:not(.hero--new) .hero__sub,
.hero:not(.hero--new) .hero__sub {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem) !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.86) !important;
  font-weight: 400 !important;
  max-width: 560px !important;
  margin: 0 0 28px !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
}

/* Eyebrow - gleicher Stil wie Index */
body .hero:not(.hero--new) .hero__eyebrow,
.hero:not(.hero--new) .hero__eyebrow {
  background: rgba(26,36,51,0.55) !important;
}

/* Hero-Padding analog Index */
body .hero:not(.hero--new),
.hero:not(.hero--new) {
  padding-top: 130px !important;
  padding-bottom: 0 !important;
}
body .hero:not(.hero--new) .hero__inner,
.hero:not(.hero--new) .hero__inner {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
  align-items: center !important;
}


/* ════════════════════════════════════════════════════════════════════════
   FINAL HEADER-SCHRIFT-VEREINHEITLICHUNG (höchste Specificity)
   Index = Maszstab. Bei vw=1598: H1 = 48.77px, Sub = 27.6px, Eyebrow = 12px.
   ════════════════════════════════════════════════════════════════════════ */





/* .hero--single (Brand/Wasser): Mindesthöhe analog Index, da kein Form rechts */
html body .hero.hero--single .hero__inner,
.hero.hero--single .hero__inner {
  min-height: 605px !important;  /* gleich Index */
  align-items: center !important;
}


/* ════════════════════════════════════════════════════════════════════════
   FINAL TYPO-UNIFICATION (alle Hero-Header gleiche Schrift)
   Verbindlich seit 05/2026. Index = Master, Subpages identisch.
   ════════════════════════════════════════════════════════════════════════ */
html body .hero h1,
html body section.hero h1,
html body section.hero--new h1,
html body .hero.hero--new h1,
html body section.hero h1.hero-h1 {
  font-family: 'Mosafin', 'Playfair Display', serif !important;
  font-size: clamp(1.9rem, 1.1rem + 2vw, 2.9rem) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 18px !important;
  letter-spacing: -0.5px !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45) !important;
}
html body .hero h1 em,
html body section.hero h1 em,
html body .hero.hero--new h1 em {
  font-style: italic !important;
  color: var(--highlight, #B89968) !important;
  font-weight: 700 !important;
}
html body .hero .hero__sub,
html body section.hero .hero__sub,
html body .hero .hero__subhead,
html body .hero.hero--new .hero__subhead {
  font-family: 'Montserrat', sans-serif !important;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem) !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.86) !important;
  font-weight: 400 !important;
  max-width: 560px !important;
  margin: 0 0 28px !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
}
html body .hero .hero__eyebrow,
html body section.hero .hero__eyebrow,
html body .hero.hero--new .hero__eyebrow {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--highlight, #B89968) !important;
  background: rgba(26,36,51,0.55) !important;
  padding: 6px 18px !important;
  border: 1px solid var(--highlight, #B89968) !important;
  border-radius: 999px !important;
  display: inline-block !important;
  margin-bottom: 22px !important;
}
html body .hero.hero--single .hero__inner,
.hero.hero--single .hero__inner {
  min-height: 605px !important;
  align-items: center !important;
}

/* Auch generic h1 in 06-subpages.css "h1 { clamp(2rem, 1.4+2vw, 3rem) }" deaktivieren */
html body h1.subpage-typo-override { font-size: inherit; }


/* ════════════════════════════════════════════════════════════════════════
   JENNY-MINI-PILLE über Hero-Form (alle Subpages mit Form)
   ════════════════════════════════════════════════════════════════════════ */
.hero-form__jenny {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: -22px -22px 18px;
  background: linear-gradient(90deg, rgba(184,153,104,0.12) 0%, rgba(184,153,104,0.04) 100%);
  border-bottom: 1px solid rgba(184,153,104,0.30);
  border-radius: 14px 14px 0 0;
}
.hero-form__jenny-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-image: url('../team/jennifer-portrait.jpg');
  background-size: cover;
  background-position: center top;
  border: 2px solid var(--highlight, #B89968);
  flex-shrink: 0;
  position: relative;
}
.hero-form__jenny-photo::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: #25D366;
  border: 2px solid #fff;
  border-radius: 50%;
}
.hero-form__jenny-text {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.hero-form__jenny-pre {
  font-size: 0.72rem;
  color: var(--text-soft, #6b7280);
  margin: 0 0 1px;
  letter-spacing: 0.02em;
}
.hero-form__jenny-name {
  font-family: var(--headline);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text, #1A2433);
  margin: 0;
}
.hero-form__jenny-role {
  font-size: 0.72rem;
  color: var(--text-soft, #6b7280);
  margin: 0;
}



/* Jenny-Mini-Pille - Quote-Zeile (kleines persönliches Statement) */
.hero-form__jenny-quote {
  font-family: var(--headline);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--main, #1E3A5F);
  margin: 4px 0 0;
  line-height: 1.35;
  letter-spacing: 0.01em;
}


/* ════════════════════════════════════════════════════════════════════════
   JENNY-CARD AUF EMOTIONALEN SUBPAGES (Pflegefall, Scheidung, Erbe)
   Gleicher Stil wie Index .hero--new .hero__person, aber auf .hero
   ════════════════════════════════════════════════════════════════════════ */

html body .hero:not(.hero--new) .hero__inner {
  display: grid !important;
  grid-template-columns: 1.55fr 1fr !important;
  gap: 56px !important;
  align-items: center !important;
}

html body .hero:not(.hero--new) .hero__person {
  display: grid !important;
  grid-template-columns: 108px 1fr !important;
  gap: 22px !important;
  align-items: center !important;
  padding: 26px 28px 28px 24px !important;
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  border-left: 3px solid var(--highlight, #B89968) !important;
  border-radius: 18px !important;
  max-width: 440px !important;
  justify-self: end !important;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

html body .hero:not(.hero--new) .hero__person-photo {
  width: 108px !important;
  height: 138px !important;
  border-radius: 12px !important;
  background-image: url('../team/jennifer-portrait.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  border: 1px solid rgba(184,153,104,0.55) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.40), inset 0 0 0 1px rgba(255,255,255,0.08) !important;
}

html body .hero:not(.hero--new) .hero__person-card { min-width: 0; }

html body .hero:not(.hero--new) .hero__person-eyebrow {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--highlight, #B89968) !important;
  margin-bottom: 8px !important;
}

html body .hero:not(.hero--new) .hero__person-name {
  font-family: 'Mosafin', serif !important;
  font-size: 1.26rem !important;
  color: #fff !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  margin-bottom: 5px !important;
  letter-spacing: -0.2px !important;
}

html body .hero:not(.hero--new) .hero__person-role {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.78) !important;
  line-height: 1.4 !important;
  margin-bottom: 14px !important;
}

html body .hero:not(.hero--new) .hero__person-quote {
  font-family: 'Mosafin', serif !important;
  font-style: italic !important;
  font-size: 0.96rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(184,153,104,0.30) !important;
  color: rgba(255,255,255,0.95) !important;
}

/* Form-Sektion direkt unter Hero - eigener Cream-Block mit Schatten */
html body section.section--cream .hero-form {
  max-width: 640px !important;
  margin: 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Responsive: kleine Viewports → Card stapelt */
@media (max-width: 980px) {
  html body .hero:not(.hero--new) .hero__inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  html body .hero:not(.hero--new) .hero__person {
    justify-self: stretch !important;
    max-width: 100% !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   INDEX SCHNELLANFRAGE - KOMPAKT-VARIANTE
   ════════════════════════════════════════════════════════════════════════ */

/* Section-Padding zurück auf moderat (war clamp(64,8vw,100px) - fuer Compact: kleiner) */
.hero-form-section--compact {
  padding: clamp(48px, 6vw, 72px) 0 !important;
}

/* Intro-Spalte: kompakter, weniger Atemraum */
.hero-form-section--compact .hero-form-stage__intro h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem) !important;
  margin-bottom: 12px !important;
  line-height: 1.18 !important;
}
.hero-form-section--compact .hero-form-stage__intro .lead {
  font-size: 0.95rem !important;
  margin-bottom: 20px !important;
  line-height: 1.55 !important;
}
.hero-form-section--compact .hero-form-stage__intro .section-label {
  margin-bottom: 12px !important;
}

/* Kompakte Bullet-Liste */
.bullet-list--compact {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bullet-list--compact li {
  font-size: 0.9rem;
  line-height: 1.45;
  padding: 6px 0 6px 28px;
  position: relative;
  color: var(--text, #1A2433);
}
.bullet-list--compact li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 18px;
  height: 18px;
  background: var(--highlight, #B89968);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Form-Box kompakter im Schnellanfrage-Stage */
.hero-form-section--compact .hero-form {
  padding: 22px 22px 24px !important;
  border-radius: 14px !important;
  max-width: 480px !important;
}
.hero-form-section--compact .hero-form__step-indicator {
  margin-bottom: 14px !important;
}
.hero-form-section--compact .hero-form__field {
  margin-bottom: 11px !important;
}
.hero-form-section--compact .hero-form__field label {
  font-size: 0.82rem !important;
  margin-bottom: 4px !important;
  font-weight: 700 !important;
}
.hero-form-section--compact .hero-form__field input,
.hero-form-section--compact .hero-form__field select {
  padding: 10px 12px !important;
  font-size: 0.93rem !important;
}
.hero-form-section--compact .hero-form__btn {
  padding: 13px !important;
  font-size: 0.95rem !important;
}
.hero-form-section--compact .hero-form__hint {
  font-size: 0.72rem !important;
  margin-top: 8px !important;
}

/* Stage-Grid kompakter (Intro+Form näher beieinander) */
.hero-form-section--compact .hero-form-stage {
  grid-template-columns: 1fr 460px !important;
  gap: 48px !important;
  align-items: center !important;
}

@media (max-width: 900px) {
  .hero-form-section--compact .hero-form-stage {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   INDEX-SCHNELLANFRAGE - 7 Verbesserungen (Step-Labels, Ablauf, Trust-Strip)
   ════════════════════════════════════════════════════════════════════════ */

/* 1. Step-Indicator mit Labels */
.hero-form__step-indicator--labeled {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 18px !important;
  padding: 0 8px !important;
}
.hero-form__step-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.hero-form__step-label .hero-form__step-dot {
  width: 22px;
  height: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(184,153,104,0.25);
  border: 2px solid rgba(184,153,104,0.4);
  flex: none;
  transition: all 0.25s;
  position: relative;
}
.hero-form__step-label .hero-form__step-dot.is-active {
  background: var(--highlight, #B89968);
  border-color: var(--highlight, #B89968);
  box-shadow: 0 0 0 4px rgba(184,153,104,0.18);
}
.hero-form__step-label .hero-form__step-dot.is-active::after {
  content: '';
  position: absolute;
  inset: 5px;
  background: #fff;
  border-radius: 50%;
}
.hero-form__step-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-soft, #6b7280);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-form__step-label:has(.is-active) .hero-form__step-name {
  color: var(--main, #1E3A5F);
}
.hero-form__step-connector {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--highlight, #B89968) 0%, rgba(184,153,104,0.2) 100%);
  margin: 0 12px;
  margin-bottom: 18px;
}

/* 2. 3-Schritte-Mini-Ablauf (links unter Lead-Text) */
.ablauf-mini {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ablauf-mini__step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  position: relative;
}
.ablauf-mini__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 50px;
  width: 2px;
  height: 24px;
  background: linear-gradient(180deg, var(--highlight, #B89968) 0%, rgba(184,153,104,0.3) 100%);
}
.ablauf-mini__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--main, #1E3A5F);
  color: #fff;
  font-family: var(--headline);
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--highlight, #B89968);
}
.ablauf-mini__body {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  padding-top: 3px;
}
.ablauf-mini__body strong {
  font-size: 0.95rem;
  color: var(--text, #1A2433);
  font-weight: 700;
  margin-bottom: 2px;
}
.ablauf-mini__body span {
  font-size: 0.82rem;
  color: var(--text-soft, #6b7280);
}

/* 5. Form-Box: linker Gold-Border + Bonus etwas mehr Schatten */
.hero-form--gold-border {
  border-left: 4px solid var(--highlight, #B89968) !important;
  box-shadow: 0 18px 48px rgba(30,58,95,0.12), 0 2px 6px rgba(0,0,0,0.04) !important;
}

/* 3. Bank-Trust-Strip unter der Form */
.form-trust-strip {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(184,153,104,0.06);
  border: 1px solid rgba(184,153,104,0.18);
  border-radius: 10px;
  font-size: 0.74rem;
  color: var(--text-soft, #6b7280);
  text-align: center;
  line-height: 1.6;
  max-width: 480px;
}
.form-trust-strip__label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  margin-bottom: 6px;
}
.form-trust-strip__item {
  display: inline;
  color: var(--text, #1A2433);
  font-weight: 500;
}
.form-trust-strip__sep {
  color: rgba(184,153,104,0.45);
  margin: 0 4px;
}

/* Mobile */
@media (max-width: 600px) {
  .ablauf-mini__num {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }
  .ablauf-mini__step:not(:last-child)::before {
    left: 15px;
    top: 46px;
    height: 22px;
  }
  .form-trust-strip {
    font-size: 0.7rem;
  }
}


/* Schnellanfrage: Überschrift + Form auf gleicher Höhe (top-aligned) */
.hero-form-section--compact .hero-form-stage {
  align-items: start !important;
}


/* === COVERAGE-PILLS - Stadt+Umland-Section (Pilot Bamberg) === */
.coverage-pills {
  position: relative;
  background: var(--bg-cream, #F8F4ED);
  overflow: hidden;
  padding: clamp(40px, 4.5vw, 72px) 0;
}
.coverage-pills__watermark {
  position: absolute;
  inset: 0;                       /* füllt die Section */
  display: flex;
  align-items: center;            /* MITTIG vertikal */
  justify-content: center;
  font-family: var(--headline, 'Mosafin', serif);
  font-weight: 700;
  font-size: clamp(60px, 9vw, 150px);   /* kleiner */
  letter-spacing: 0.14em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(184, 153, 104, 0.18);
          text-stroke: 1.2px rgba(184, 153, 104, 0.18);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
  line-height: 1;
}
.coverage-pills > .container {
  position: relative;
  z-index: 1;
}
.coverage-pills .section__header,
.coverage-pills .section-header {
  text-align: center;
  margin: 0 auto 32px;
  max-width: 900px;
}
.coverage-pills h2 {
  font-family: var(--headline, 'Mosafin', serif);
  text-align: center;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  color: var(--main, #1E3A5F);
  line-height: 1.18;
  margin: 0;
}
.coverage-pills h2 em {
  color: var(--gold-text, #8A6E40);
  font-style: italic;
}
/* Gold-Strich-Akzent unter der Section-Headline */
.coverage-pills .section__header::after,
.coverage-pills .section-header::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--highlight, #B89968);
  margin: 16px auto 0;
  border-radius: 2px;
  opacity: 0.85;
}
.coverage-pills__group {
  text-align: center;
  margin: 0 auto;
  max-width: 1100px;
}
.coverage-pills__group + .coverage-pills__group {
  margin-top: 36px;
}
.coverage-pills__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  background: rgba(184, 153, 104, 0.10);
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.coverage-pills__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--highlight, #B89968);
  flex-shrink: 0;
}
.coverage-pills__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.coverage-pills__list li {
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.22));
  color: var(--secondColor, #1A2433);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(30,58,95,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.coverage-pills__list li:hover {
  transform: translateY(-2px);
  border-color: var(--highlight, #B89968);
  box-shadow: 0 4px 16px rgba(184,153,104,0.18);
}
.coverage-pills__divider {
  border: 0;
  height: 1px;
  background: var(--whHairlineGold, rgba(184,153,104,0.22));
  max-width: 240px;
  margin: 32px auto;
}
@media (max-width: 700px) {
  .coverage-pills__list li {
    padding: 10px 16px;
    font-size: 0.88rem;
  }
  .coverage-pills__watermark {
    font-size: clamp(80px, 30vw, 160px);
  }
  .coverage-pills h2 {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }
}
/* === ENDE COVERAGE-PILLS === */


/* ════════════════════════════════════════════════════════════════════════
   B2B-SEITE - Zielgruppen-Grid + B2B-Workflow
   ════════════════════════════════════════════════════════════════════════ */

/* Zielgruppen-Cards Grid (2x2 auf Desktop, 1-Spalter auf Mobile) */
.zielgruppen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.zielgruppe-card {
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.25));
  border-radius: 16px;
  padding: 32px 28px;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
  border-top: 3px solid var(--highlight, #B89968);
  box-shadow: 0 6px 24px rgba(30,58,95,0.06);
}
.zielgruppe-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(30,58,95,0.12);
}
.zielgruppe-card__icon {
  width: 48px;
  height: 48px;
  background: var(--highlight, #B89968);
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.zielgruppe-card__icon svg {
  width: 26px;
  height: 26px;
}
.zielgruppe-card h3 {
  font-family: var(--headline);
  font-size: 1.35rem;
  color: var(--main, #1E3A5F);
  margin-bottom: 12px;
  line-height: 1.2;
}
.zielgruppe-card > p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-soft, #6b7280);
  margin-bottom: 18px;
}
.zielgruppe-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--whHairlineGold, rgba(184,153,104,0.25));
}
.zielgruppe-card__list li {
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 7px 0 7px 24px;
  position: relative;
  color: var(--text, #1A2433);
}
.zielgruppe-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 14px;
  background: var(--highlight, #B89968);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

/* B2B-Workflow (vertikale Schritte) */
.b2b-workflow {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.b2b-workflow__step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 0;
  position: relative;
}
.b2b-workflow__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 70px;
  width: 2px;
  height: calc(100% - 40px);
  background: linear-gradient(180deg, var(--highlight, #B89968) 0%, rgba(184,153,104,0.3) 100%);
}
.b2b-workflow__num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--main, #1E3A5F);
  color: var(--highlight, #B89968);
  font-family: var(--headline);
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--highlight, #B89968);
}
.b2b-workflow__step > div {
  padding-top: 8px;
}
.b2b-workflow__step h4 {
  font-family: var(--headline);
  font-size: 1.15rem;
  color: var(--main, #1E3A5F);
  margin: 0 0 6px;
  line-height: 1.25;
}
.b2b-workflow__step p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-soft, #6b7280);
  margin: 0;
}

@media (max-width: 768px) {
  .zielgruppen-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .b2b-workflow__step {
    gap: 16px;
    padding: 16px 0;
  }
  .b2b-workflow__num {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  .b2b-workflow__step:not(:last-child)::before {
    left: 19px;
    top: 60px;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   KONTAKT-SEKTION (unten auf Index + Subpages)
   Links: Persönlich-Block (Jennifer + Direct-Buttons)
   Rechts: Ausführliche Form (Ergänzung zur Schnellanfrage oben)
   ════════════════════════════════════════════════════════════════════════ */

.kontakt-stage {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

/* ──── Persönlich-Block (linke Spalte) ──── */
.kontakt-persoenlich {
  background: linear-gradient(155deg, var(--main, #1E3A5F) 0%, #15293f 100%);
  color: #fff;
  padding: 36px 32px 32px;
  border-radius: 18px;
  border-left: 4px solid var(--highlight, #B89968);
  box-shadow: 0 18px 40px rgba(30,58,95,0.18);
  position: sticky;
  top: 160px;
}

.kontakt-persoenlich__photo {
  width: 140px;
  height: 170px;
  border-radius: 14px;
  background-image: url('../team/jennifer-portrait.jpg');
  background-size: cover;
  background-position: center top;
  border: 2px solid var(--highlight, #B89968);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  margin: 0 0 22px;
}

.kontakt-persoenlich__name {
  font-family: var(--headline);
  font-size: 1.45rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}
.kontakt-persoenlich__role {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.45;
  margin-bottom: 18px;
}
.kontakt-persoenlich__quote {
  font-family: var(--headline);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.94);
  margin: 0 0 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(184,153,104,0.35);
  border-bottom: 1px solid rgba(184,153,104,0.35);
}

.kontakt-persoenlich__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.kontakt-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  transition: all 0.2s;
}
.kontakt-action:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(184,153,104,0.5);
  transform: translateX(2px);
}
.kontakt-action--primary {
  background: var(--highlight, #B89968);
  border-color: var(--highlight, #B89968);
  color: var(--main, #1E3A5F);
}
.kontakt-action--primary:hover {
  background: #A38357;
  border-color: #A38357;
  color: var(--main, #1E3A5F);
}
.kontakt-action--whatsapp {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.3);
}
.kontakt-action--whatsapp:hover {
  background: rgba(37, 211, 102, 0.25);
  border-color: rgba(37, 211, 102, 0.5);
}
.kontakt-action__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kontakt-action--primary .kontakt-action__icon {
  background: rgba(30,58,95,0.18);
  color: var(--main, #1E3A5F);
}
.kontakt-action--whatsapp .kontakt-action__icon {
  background: rgba(37, 211, 102, 0.2);
  color: #25D366;
}
.kontakt-action__icon svg {
  width: 18px;
  height: 18px;
}
.kontakt-action__body {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.kontakt-action__body strong {
  font-size: 0.95rem;
  font-weight: 700;
}
.kontakt-action__body span {
  font-size: 0.78rem;
  opacity: 0.85;
}

.kontakt-persoenlich__hours {
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.kontakt-persoenlich__hours strong {
  color: var(--highlight, #B89968);
  display: block;
  margin-bottom: 2px;
}

/* ──── Ausführliche Form (rechte Spalte) ──── */
.kontakt-formular {
  background: #fff;
  padding: 36px;
  border-radius: 18px;
  border-left: 4px solid var(--highlight, #B89968);
  box-shadow: 0 18px 40px rgba(30,58,95,0.10);
}
.kontakt-formular__header {
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--whHairlineGold, rgba(184,153,104,0.25));
}
.kontakt-formular__title {
  font-family: var(--headline);
  font-size: 1.55rem;
  color: var(--main, #1E3A5F);
  margin: 8px 0 10px;
  line-height: 1.2;
}
.kontakt-formular__sub {
  font-size: 0.95rem;
  color: var(--text-soft, #6b7280);
  line-height: 1.5;
  margin: 0;
}

/* Responsive */
@media (max-width: 980px) {
  .kontakt-stage {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .kontakt-persoenlich {
    position: static;
    text-align: center;
  }
  .kontakt-persoenlich__photo {
    margin: 0 auto 22px;
  }
  .kontakt-formular {
    padding: 28px 22px;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   KONTAKT-SEKTION - KOMPAKT-VARIANTE (verkleinert + statisch)
   ════════════════════════════════════════════════════════════════════════ */

/* Section-Padding kleiner */
#kontakt {
  padding: clamp(48px, 6vw, 72px) 0 !important;
}

/* Sticky raus */
.kontakt-persoenlich {
  position: static !important;
  top: auto !important;
  padding: 28px 26px 24px !important;
}

/* Foto kleiner */
.kontakt-persoenlich__photo {
  width: 110px !important;
  height: 140px !important;
  margin-bottom: 18px !important;
}

/* Name + Rolle tighter */
.kontakt-persoenlich__name {
  font-size: 1.3rem !important;
  margin-bottom: 3px !important;
}
.kontakt-persoenlich__role {
  font-size: 0.82rem !important;
  margin-bottom: 14px !important;
}
.kontakt-persoenlich__quote {
  font-size: 0.92rem !important;
  margin-bottom: 18px !important;
  padding: 12px 0 !important;
}

/* Action-Buttons enger */
.kontakt-persoenlich__actions {
  gap: 8px !important;
  margin-bottom: 16px !important;
}
.kontakt-action {
  padding: 10px 14px !important;
  gap: 12px !important;
}
.kontakt-action__icon {
  width: 32px !important;
  height: 32px !important;
}
.kontakt-action__icon svg {
  width: 16px !important;
  height: 16px !important;
}
.kontakt-action__body strong {
  font-size: 0.9rem !important;
}
.kontakt-action__body span {
  font-size: 0.74rem !important;
}

/* Stunden-Box kleiner */
.kontakt-persoenlich__hours {
  font-size: 0.76rem !important;
  padding-top: 10px !important;
}

/* Form-Box kompakter */
.kontakt-formular {
  padding: 28px !important;
}
.kontakt-formular__header {
  margin-bottom: 20px !important;
  padding-bottom: 18px !important;
}
.kontakt-formular__title {
  font-size: 1.35rem !important;
  margin: 6px 0 8px !important;
}
.kontakt-formular__sub {
  font-size: 0.88rem !important;
}

/* Form-Felder dichter */
.kontakt-formular .lf__field {
  margin-bottom: 12px !important;
}
.kontakt-formular .lf__label {
  font-size: 0.82rem !important;
  margin-bottom: 4px !important;
}
.kontakt-formular .lf__input,
.kontakt-formular .lf__select,
.kontakt-formular .lf__textarea {
  padding: 10px 12px !important;
  font-size: 0.93rem !important;
}
.kontakt-formular .lf__dsgvo {
  font-size: 0.78rem !important;
  margin-top: 6px !important;
}
.kontakt-formular .lf__submit-row {
  margin-top: 18px !important;
}

/* Stage-Gap etwas kleiner */
.kontakt-stage {
  grid-template-columns: 340px 1fr !important;
  gap: 36px !important;
}

@media (max-width: 980px) {
  .kontakt-stage {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}


/* === CITY-INTRO - kompakter Markt-Steckbrief unter Hero === */
.city-intro {
  background: #fff;
  padding: clamp(40px, 5vw, 64px) 0;
}
.city-intro__inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.city-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  background: rgba(184, 153, 104, 0.10);
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.city-intro__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--highlight, #B89968);
  display: inline-block;
}
.city-intro__text {
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.6;
  color: var(--secondColor, #1A2433);
  max-width: 780px;
  margin: 0 auto 28px;
}
.city-intro__text em {
  color: var(--gold-text, #8A6E40);
  font-style: italic;
}
.city-intro__facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.city-intro__facts li {
  background: var(--bg-cream, #F8F4ED);
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.22));
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 0.88rem;
  color: var(--secondColor, #1A2433);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.city-intro__facts li strong {
  font-weight: 700;
  color: var(--main, #1E3A5F);
}
@media (max-width: 600px) {
  .city-intro__facts li {
    font-size: 0.82rem;
    padding: 8px 14px;
  }
}
/* === ENDE CITY-INTRO === */


/* ════════════════════════════════════════════════════════════════════════
   KONTAKT-MIKRO-TWEAKS
   ════════════════════════════════════════════════════════════════════════ */

/* 2. Anruf-Button: Outline-Gold statt Solid (Hierarchie zum Form-Submit) */
.kontakt-action--primary {
  background: transparent !important;
  border: 1px solid var(--highlight, #B89968) !important;
  color: #fff !important;
}
.kontakt-action--primary:hover {
  background: rgba(184,153,104,0.18) !important;
  border-color: var(--highlight, #B89968) !important;
  color: #fff !important;
}
.kontakt-action--primary .kontakt-action__icon {
  background: rgba(184,153,104,0.18) !important;
  color: var(--highlight, #B89968) !important;
}

/* 3. Submit-Row: Hint ÜBER Button (zentriert) statt daneben */
.kontakt-formular .lf__submit-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--whHairlineGold, rgba(184,153,104,0.25)) !important;
}
.kontakt-formular .lf__submit-hint {
  text-align: center !important;
  font-size: 0.85rem !important;
  color: var(--text-soft, #6b7280) !important;
  line-height: 1.5 !important;
}
.kontakt-formular .lf__submit {
  min-width: 240px !important;
  padding: 14px 36px !important;
}


/* === BAMBERG-AUDIT-V2: mid-cta-bar, persona-grid, market-trend, local-testimonial === */
/* ─── Mid-CTA-Bar (schmal, Navy mit Gold-Button) ─── */
.mid-cta-bar {
  background: linear-gradient(135deg, var(--main, #1E3A5F) 0%, var(--secondColor, #1A2433) 100%);
  padding: 28px 0;
  position: relative;
  overflow: hidden;
}
.mid-cta-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 49%, rgba(184,153,104,0.05) 49%, rgba(184,153,104,0.05) 51%, transparent 51%);
  background-size: 32px 32px;
  pointer-events: none;
}
.mid-cta-bar__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.mid-cta-bar__text { flex: 1; color: #fff; }
.mid-cta-bar__title {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  margin: 0 0 4px;
  color: #fff;
}
.mid-cta-bar__sub {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.78);
  margin: 0;
}
.mid-cta-bar__btn {
  background: var(--highlight, #B89968);
  color: var(--main, #1E3A5F);
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: var(--mainFont, 'Montserrat', sans-serif);
}
.mid-cta-bar__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(184,153,104,0.35);
}
@media (max-width: 700px) {
  .mid-cta-bar__inner {
    flex-direction: column;
    text-align: center;
    gap: 18px;
  }
}

/* ─── Persona-Grid (für "Wann ist Direktverkauf sinnvoll") ─── */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.persona-card {
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.22));
  border-radius: 12px;
  padding: 24px 22px;
  text-align: left;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.persona-card:hover {
  transform: translateY(-3px);
  border-color: var(--highlight, #B89968);
  box-shadow: 0 8px 24px rgba(30,58,95,0.08);
}
.persona-card__icon svg { width: 22px; height: 22px; }
.persona-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(184,153,104,0.12);
  color: var(--gold-text, #8A6E40);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 1.3rem;
}
.persona-card__title {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.05rem;
  color: var(--main, #1E3A5F);
  margin: 0 0 8px;
}
.persona-card__text {
  font-size: 0.9rem;
  color: var(--secondColorLight, #4A5468);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 900px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .persona-grid { grid-template-columns: 1fr; } }

/* ─── Markt-Daten Trend-Pfeile ─── */
.fakt__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 4px;
}
.fakt__trend--up   { color: #16A34A; }
.fakt__trend--down { color: #DC2626; }
.fakt__trend--flat { color: var(--secondColorLight, #4A5468); }
.fakt__trend::before {
  content: '';
  display: inline-block;
  width: 0; height: 0;
}
.fakt__trend--up::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid currentColor;
}
.fakt__trend--down::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid currentColor;
}
.fakt__trend--flat::before {
  width: 10px;
  height: 2px;
  background: currentColor;
  margin-top: 2px;
}

/* ─── Lokales Testimonial (Bamberg) ─── */
.local-testimonial {
  background: var(--bg-cream, #F8F4ED);
  padding: clamp(48px, 6vw, 80px) 0;
}
.local-testimonial__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.local-testimonial__quote-mark {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 4rem;
  color: var(--highlight, #B89968);
  line-height: 1;
  margin-bottom: -16px;
  opacity: 0.6;
}
.local-testimonial__quote {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  color: var(--secondColor, #1A2433);
  font-style: italic;
  margin: 0 0 24px;
}
.local-testimonial__author {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.22));
  border-radius: 999px;
}
.local-testimonial__name {
  font-weight: 700;
  color: var(--main, #1E3A5F);
  font-size: 0.95rem;
}
.local-testimonial__role {
  color: var(--secondColorLight, #4A5468);
  font-size: 0.88rem;
}
.local-testimonial__role::before {
  content: '·';
  margin: 0 6px;
  opacity: 0.5;
}
/* === ENDE BAMBERG-AUDIT-V2 === */


/* ════════════════════════════════════════════════════════════════════════
   KONTAKT-ACTIONS - Text-Lesbarkeit + E-Mail-Wrap
   ════════════════════════════════════════════════════════════════════════ */

/* Alle Action-Buttons: Text MUSS weiß sein (auf Navy-Card-Hintergrund) */
.kontakt-action,
.kontakt-action strong,
.kontakt-action span,
.kontakt-action__body strong,
.kontakt-action__body span {
  color: #fff !important;
}
.kontakt-action__body span {
  opacity: 0.78 !important;
}

/* E-Mail-Adresse: kleiner + Umbruch erlauben statt überlaufen */
.kontakt-action[href^="mailto"] .kontakt-action__body span {
  font-size: 0.7rem !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}

/* Sicherstellen, dass der Body nicht überläuft */
.kontakt-action__body {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Outline-Primary (Direkt anrufen) - Border-Color etwas heller damit der Button auch ohne Solid-Background sichtbar konturiert ist */
.kontakt-action--primary {
  border-color: var(--highlight, #B89968) !important;
  border-width: 1.5px !important;
}
.kontakt-action--primary:hover {
  background: rgba(184,153,104,0.22) !important;
}


/* E-Mail-Adresse: einzeilig + Ellipsis bei Überlauf */
.kontakt-action[href^="mailto"] .kontakt-action__body {
  overflow: hidden;
}
.kontakt-action[href^="mailto"] .kontakt-action__body strong {
  font-size: 0.88rem !important;
}
.kontakt-action[href^="mailto"] .kontakt-action__body span {
  font-size: 0.72rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  display: block !important;
}


/* ════════════════════════════════════════════════════════════════════════
   HERO-FORM: KEIN interner Scroll mehr - Form ist so hoch wie ihr Content
   (Verhindert "Form lässt sich hoch/runter schieben"-Effekt)
   ════════════════════════════════════════════════════════════════════════ */
html body .hero .hero-form,
html body .hero-form-stage .hero-form {
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}


/* === BAMBERG-V3: ablauf-flow + multi-testimonial-grid === */
/* ─── Ablauf-Visualizer (4-Step) ─── */
.ablauf-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  align-items: stretch;
}
.ablauf-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.22));
  border-radius: 12px;
  padding: 26px 20px 22px;
  text-align: left;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.ablauf-step:hover {
  transform: translateY(-3px);
  border-color: var(--highlight, #B89968);
  box-shadow: 0 8px 24px rgba(30,58,95,0.08);
}
.ablauf-step__num {
  position: absolute;
  top: -14px;
  left: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--highlight, #B89968);
  color: var(--main, #1E3A5F);
  font-family: var(--headline, 'Mosafin', serif);
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(184,153,104,0.35);
}
.ablauf-step__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(184, 153, 104, 0.10);
  color: var(--gold-text, #8A6E40);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0 4px;
}
.ablauf-step__icon svg { width: 22px; height: 22px; }
.ablauf-step__when {
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  margin: 8px 0 8px;
}
.ablauf-step__title {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.05rem;
  color: var(--main, #1E3A5F);
  margin: 0 0 8px;
}
.ablauf-step__text {
  font-size: 0.88rem;
  color: var(--secondColorLight, #4A5468);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 900px) { .ablauf-flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ablauf-flow { grid-template-columns: 1fr; gap: 32px; } }

/* ─── Multi-Testimonial-Grid (für Stadtseiten) ─── */
.local-testimonial--multi .local-testimonial__inner {
  max-width: 1180px;
}
.local-testimonial__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 16px;
}
.local-testimonial__card {
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.22));
  border-radius: 12px;
  padding: 28px 26px;
  text-align: left;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.local-testimonial__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(30,58,95,0.08);
}
.local-testimonial__card__stars {
  color: var(--highlight, #B89968);
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.local-testimonial__card__quote {
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--secondColor, #1A2433);
  margin: 0 0 18px;
}
.local-testimonial__card__author {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--whHairlineGold, rgba(184,153,104,0.18));
  padding-top: 14px;
}
.local-testimonial__card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--main, #1E3A5F) 0%, var(--secondColor, #1A2433) 100%);
  color: #F8F4ED;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--headline, 'Mosafin', serif);
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.local-testimonial__card__name {
  font-weight: 700;
  color: var(--main, #1E3A5F);
  font-size: 0.88rem;
}
.local-testimonial__card__role {
  font-size: 0.78rem;
  color: var(--secondColorLight, #4A5468);
}
@media (max-width: 900px) { .local-testimonial__grid { grid-template-columns: 1fr; } }

/* ─── Page-Cross-Links (Footer-nah) ─── */
.page-cross-links {
  background: var(--bg-cream, #F8F4ED);
  padding: 36px 0;
  border-top: 1px solid var(--whHairlineGold, rgba(184,153,104,0.18));
}
.page-cross-links__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.page-cross-links__label {
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  margin-bottom: 14px;
}
.page-cross-links__links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
}
.page-cross-links__links a {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.05rem;
  color: var(--main, #1E3A5F);
  text-decoration: none;
  border-bottom: 1px solid var(--highlight, #B89968);
  padding-bottom: 2px;
  transition: color 0.2s;
}
.page-cross-links__links a:hover { color: var(--gold-text, #8A6E40); }
/* === ENDE BAMBERG-V3 === */


/* ════════════════════════════════════════════════════════════════════════
   CTA-FINAL BANNER (Navy + Jennifer-Foto + 3 Trust-Stats)
   ════════════════════════════════════════════════════════════════════════ */
.cta-final {
  background: linear-gradient(155deg, var(--main, #1E3A5F) 0%, #15293f 50%, #0F1F33 100%);
  color: #fff;
  padding: clamp(56px, 8vw, 90px) 0;
  position: relative;
}
.cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 85% 30%, rgba(184,153,104,0.10) 0%, transparent 50%);
  pointer-events: none;
}
.cta-final__inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
.cta-final__person {
  text-align: center;
}
.cta-final__photo {
  width: 180px;
  height: 220px;
  margin: 0 auto 14px;
  background-image: url('../team/jennifer-portrait.jpg');
  background-size: cover;
  background-position: center top;
  border-radius: 16px;
  border: 2px solid var(--highlight, #B89968);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.cta-final__person-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--highlight, #B89968);
  font-weight: 700;
  margin-bottom: 4px;
}
.cta-final__person-name {
  font-family: var(--headline);
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}
.cta-final__content {
  min-width: 0;
}
.cta-final__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--highlight, #B89968);
  margin-bottom: 14px;
}
.cta-final__h2 {
  font-family: var(--headline);
  font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem);
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -0.3px;
}
.cta-final__h2 em {
  font-style: italic;
  color: var(--highlight, #B89968);
  font-weight: 700;
}
.cta-final__lead {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin: 0 0 28px;
  max-width: 560px;
}
.cta-final__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
  padding: 22px 0;
  border-top: 1px solid rgba(184,153,104,0.28);
  border-bottom: 1px solid rgba(184,153,104,0.28);
}
.cta-final__stat-value {
  font-family: var(--headline);
  font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.1rem);
  font-weight: 700;
  color: var(--highlight, #B89968);
  line-height: 1.1;
  margin-bottom: 4px;
}
.cta-final__stat-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
}
.cta-final__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .cta-final__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .cta-final__person {
    margin: 0 auto;
  }
  .cta-final__photo {
    width: 140px;
    height: 170px;
  }
  .cta-final__lead {
    margin-left: auto;
    margin-right: auto;
  }
  .cta-final__actions {
    justify-content: center;
  }
  .cta-final__stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   BACKGROUND-RHYTHMUS - 3 Modi (Weiß / Cream / Navy)
   Verbindlich seit 05/2026. Nie 3x gleiche BG hintereinander.
   ════════════════════════════════════════════════════════════════════════ */

/* Reset: alle Section-Varianten vereinheitlichen */
.section--cream,
.section--cream--patterned,
.section--alt,
.section--sand {
  background: var(--bg-cream, #F8F4ED) !important;
}
.section--white {
  background: #ffffff !important;
}
.section--navy {
  background: linear-gradient(155deg, var(--main, #1E3A5F) 0%, #15293f 100%) !important;
  color: #fff !important;
}
.section--navy h2,
.section--navy h3 { color: #fff !important; }
.section--navy .section-label,
.section--navy .section__label { color: var(--highlight, #B89968) !important; }
.section--navy p,
.section--navy .lead { color: rgba(255,255,255,0.82) !important; }


/* === BAMBERG-V5: trust-strip, market-chart, stadtteil-card-with-image === */
/* ─── Trust-Strip (3 Bilder mit Caption) ─── */
.trust-strip {
  background: #fff;
  padding: clamp(40px, 5vw, 64px) 0;
}
.trust-strip__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.trust-strip__card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 4px 16px rgba(30,58,95,0.06);
}
.trust-strip__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.trust-strip__card:hover .trust-strip__img { transform: scale(1.04); }
.trust-strip__card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(26,36,51,0.85) 100%);
}
.trust-strip__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 22px;
  color: #fff;
  z-index: 1;
}
.trust-strip__caption__label {
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--highlight, #B89968);
  margin-bottom: 6px;
}
.trust-strip__caption__title {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.1rem;
  margin: 0;
}
@media (max-width: 700px) {
  .trust-strip__grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ─── Market-Bar-Chart (4-Jahres-Trend) ─── */
.market-chart {
  margin: 40px auto 0;
  max-width: 760px;
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.22));
  border-radius: 12px;
  padding: 24px 28px 20px;
}
.market-chart__title {
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  margin: 0 0 18px;
  text-align: center;
}
.market-chart__bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 16px;
  height: 140px;
  padding-bottom: 28px;
  position: relative;
}
.market-chart__bar {
  flex: 1;
  background: linear-gradient(to top, var(--main, #1E3A5F), var(--highlight, #B89968));
  border-radius: 4px 4px 0 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-width: 36px;
  max-width: 80px;
}
.market-chart__bar__value {
  position: absolute;
  top: -22px;
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--main, #1E3A5F);
  white-space: nowrap;
}
.market-chart__bar__year {
  position: absolute;
  bottom: -22px;
  font-size: 0.75rem;
  color: var(--secondColorLight, #4A5468);
  font-weight: 600;
}
.market-chart__bar--current {
  outline: 2px solid var(--highlight, #B89968);
  outline-offset: 2px;
}

/* ─── Stadtteil-Card mit Bild ─── */
.stadtteile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}
.stadtteil-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.22));
  transition: transform 0.2s, box-shadow 0.2s;
}
.stadtteil-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(30,58,95,0.10);
}
.stadtteil-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}
.stadtteil-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(26,36,51,0) 60%, rgba(26,36,51,0.55) 100%);
}
.stadtteil-card__body {
  padding: 20px 22px 22px;
}
.stadtteil-card__name {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--main, #1E3A5F);
  margin-bottom: 6px;
}
.stadtteil-card p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--secondColorLight, #4A5468);
  margin: 0;
}
@media (max-width: 700px) { .stadtteile { grid-template-columns: 1fr; } }

/* ─── Comparison-Bullet mit Mini-Icon ─── */
.comparison-box--v2 li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.comparison-box__col--classic li::before,
.comparison-box__col--werthandel li::before {
  flex-shrink: 0;
}
/* === ENDE BAMBERG-V5 === */


/* ════════════════════════════════════════════════════════════════════════
   SECTION--NAVY: ALLE Text-Elemente weiß (Lesbarkeit auf Navy)
   ════════════════════════════════════════════════════════════════════════ */
.section--navy,
.section--navy *:not(a):not(.btn):not(.btn-navy):not(.btn-outline-white):not(.usp-highlight):not(.section-label):not(.section__label):not(em) {
  color: #fff !important;
}
.section--navy li,
.section--navy ul,
.section--navy ol,
.section--navy span,
.section--navy strong,
.section--navy em,
.section--navy small,
.section--navy figcaption {
  color: rgba(255,255,255,0.92) !important;
}
.section--navy em {
  color: var(--highlight, #B89968) !important;
}
.section--navy .section-label,
.section--navy .section__label {
  color: var(--highlight, #B89968) !important;
}
/* Listen-Bullets/Häkchen */
.section--navy ul li::before,
.section--navy ol li::before {
  color: var(--highlight, #B89968) !important;
}
/* Story-Block + Karten auf Navy: Glas-Look */
.section--navy .story-block__card,
.section--navy .story-block__visual,
.section--navy .pain-card,
.section--navy [class*="card"] {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(184,153,104,0.30) !important;
  color: #fff !important;
}
.section--navy .story-block__card *,
.section--navy [class*="card"] * {
  color: rgba(255,255,255,0.92) !important;
}
/* Buttons im Navy bleiben gold */
.section--navy .btn:not(.btn-outline-white):not(.btn-navy) {
  color: var(--main, #1E3A5F) !important;
}


/* === BAMBERG-V6: scroll-reveal + smooth-scroll + bar-transition === */
/* ─── Smooth-Scroll für Anker-Links ─── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ─── Scroll-Reveal-Animation ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── Bar-Chart wachsende Balken ─── */
.market-chart__bar {
  transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* === ENDE BAMBERG-V6 === */


/* === FIX: schadens-hint-Buttons sichtbar + ::before-Pfeil deaktiviert === */
.schadens-hint__buttons .btn,
.schadens-hint__buttons a.btn {
  background: var(--highlight, #B89968);
  color: var(--main, #1E3A5F);
  border: 1px solid var(--highlight, #B89968);
  padding: 13px 26px;
  font-weight: 700;
  position: relative;
}
.schadens-hint__buttons .btn::before,
.schadens-hint__buttons a.btn::before {
  display: none;
}
.schadens-hint__buttons .btn:hover,
.schadens-hint__buttons a.btn:hover {
  background: var(--main, #1E3A5F);
  color: #fff;
  border-color: var(--main, #1E3A5F);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(30,58,95,0.18);
}
/* === ENDE FIX === */


/* === KARTEN-VARIANTEN: A (SVG-Marker) + B (Leaflet) === */
/* ─── Variante A: Stilisierte SVG-Marker-Karte ─── */
.map-stylized {
  background: var(--bg-cream, #F8F4ED);
  padding: clamp(48px, 6vw, 80px) 0;
  overflow: hidden;
}
.map-stylized__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}
.map-stylized__canvas {
  position: relative;
  background-color: #fff;
  background-image:
    radial-gradient(circle at center, rgba(184,153,104,0.10) 1px, transparent 1.4px),
    radial-gradient(ellipse at 50% 100%, rgba(184,153,104,0.06), transparent 60%);
  background-size: 24px 24px, 100% 100%;
  background-position: 0 0, center bottom;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.22));
  border-radius: 14px;
  padding: 32px;
  margin-top: 32px;
  box-shadow: 0 8px 32px rgba(30,58,95,0.06);
  overflow: hidden;
}
.map-stylized__canvas::before {
  /* Sehr dezente Vignette zur Mitte hin */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(248,244,237,0.4) 100%);
  pointer-events: none;
  border-radius: 14px;
}
.map-stylized__svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 1000px;
  margin: 0 auto;
}
.map-stylized__river {
  fill: none;
  stroke: rgba(30,58,95,0.18);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-stylized__roads {
  fill: none;
  stroke: rgba(184,153,104,0.18);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.map-stylized__district-outline {
  fill: rgba(184,153,104,0.04);
  stroke: rgba(184,153,104,0.18);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
}
.map-stylized__marker {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.map-stylized__marker__dot {
  fill: var(--main, #1E3A5F);
  stroke: #fff;
  stroke-width: 2;
  transition: fill 0.2s ease, r 0.2s ease;
}
.map-stylized__marker--umland .map-stylized__marker__dot {
  fill: var(--gold-text, #8A6E40);
  r: 5;
}

.map-stylized__marker__label {
  fill: var(--main, #1E3A5F);
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0.85;
}
.map-stylized__marker--umland .map-stylized__marker__label {
  fill: var(--gold-text, #8A6E40);
  font-size: 10px;
  opacity: 0.7;
}
.map-stylized__marker:hover .map-stylized__marker__label {
  opacity: 1;
}
.map-stylized__legend {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 24px;
  flex-wrap: wrap;
}
.map-stylized__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--secondColorLight, #4A5468);
}
.map-stylized__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}
.map-stylized__legend-dot--stadt { background: var(--main, #1E3A5F); }
.map-stylized__legend-dot--umland { background: var(--gold-text, #8A6E40); }

/* Tooltip */
.map-stylized__tooltip {
  position: absolute;
  background: var(--main, #1E3A5F);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
  max-width: 220px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-12px);
  transition: opacity 0.2s ease;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(30,58,95,0.25);
}
.map-stylized__tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--main, #1E3A5F);
  border-right: 1px solid rgba(184, 153, 104, 0.45);
  border-bottom: 1px solid rgba(184, 153, 104, 0.45);
}
/* Below-Modus: Tooltip unter dem Marker (für Marker im oberen Karten-Bereich) */
.map-stylized__tooltip.is-below {
  transform: translate(-50%, 0) translateY(0) scale(0.85);
}
.map-stylized__tooltip.is-below.is-visible {
  transform: translate(-50%, 0) translateY(18px) scale(1);
}
.map-stylized__tooltip.is-below::after {
  bottom: auto;
  top: -6px;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid rgba(184, 153, 104, 0.45);
  border-top: 1px solid rgba(184, 153, 104, 0.45);
}
.map-stylized__tooltip.is-visible {
  opacity: 1;
}
.map-stylized__tooltip__name {
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--highlight, #B89968);
}

@media (max-width: 700px) {
  .map-stylized__canvas { padding: 16px; }
  .map-stylized__marker__label { font-size: 9px; }
}

/* ─── Variante B: Leaflet-Container ─── */
.map-leaflet {
  background: #fff;
  padding: clamp(48px, 6vw, 80px) 0;
}
.map-leaflet__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}
.map-leaflet__container {
  height: 520px;
  margin-top: 32px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.22));
  box-shadow: 0 8px 32px rgba(30,58,95,0.06);
}
.map-leaflet__container .leaflet-popup-content-wrapper {
  background: var(--main, #1E3A5F);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(30,58,95,0.25);
}
.map-leaflet__container .leaflet-popup-content {
  margin: 12px 16px;
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 0.85rem;
  line-height: 1.45;
}
.map-leaflet__container .leaflet-popup-content strong {
  color: var(--highlight, #B89968);
  display: block;
  margin-bottom: 4px;
}
.map-leaflet__container .leaflet-popup-tip {
  background: var(--main, #1E3A5F);
}
.map-leaflet__container .leaflet-popup-close-button {
  color: rgba(255,255,255,0.7);
}
/* Variante-Label */
.variant-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  background: rgba(184, 153, 104, 0.12);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}
/* === ENDE KARTEN-VARIANTEN === */


/* === MAP-A POWER-UPGRADE: Watermark, Animations, Pulse, Wahrzeichen === */
/* ─── Watermark BAMBERG im Hintergrund ─── */
.map-stylized__watermark { display: none; }
/* ─── Topografie: Hügelflächen ─── */
.map-stylized__hill {
  fill: rgba(184, 153, 104, 0.06);
  stroke: rgba(184, 153, 104, 0.18);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}
/* ─── Stadtkern-Highlight ─── */
.map-stylized__core {
  fill: rgba(184, 153, 104, 0.10);
  stroke: rgba(184, 153, 104, 0.30);
  stroke-width: 1.5;
}
/* ─── Insel (Inselstadt) ─── */
.map-stylized__island {
  fill: rgba(255, 255, 255, 0.85);
  stroke: rgba(30, 58, 95, 0.30);
  stroke-width: 1.2;
}
/* ─── Wahrzeichen-Icons ─── */
.map-stylized__landmark {
  fill: var(--main, #1E3A5F);
  opacity: 0.85;
  pointer-events: none;
}
/* ─── Compass ─── */
.map-stylized__compass {
  opacity: 0.5;
}
.map-stylized__compass-circle {
  fill: #fff;
  stroke: var(--highlight, #B89968);
  stroke-width: 1.5;
}
.map-stylized__compass-needle {
  fill: var(--main, #1E3A5F);
}
.map-stylized__compass-label {
  fill: var(--gold-text, #8A6E40);
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
}
/* ─── Wappen / Logo unten links ─── */
.map-stylized__crest {
  opacity: 0.6;
}

/* ─── Pfad-Animation beim Scroll ─── */
.map-stylized__river,
.map-stylized__district-outline,
.map-stylized__core,
.map-stylized__hill,
.map-stylized__island {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.8s ease-out;
}
.map-stylized.is-revealed .map-stylized__river,
.map-stylized.is-revealed .map-stylized__district-outline,
.map-stylized.is-revealed .map-stylized__core,
.map-stylized.is-revealed .map-stylized__hill,
.map-stylized.is-revealed .map-stylized__island {
  stroke-dashoffset: 0;
}
/* Fill-Animation für gefüllte Pfade */
.map-stylized__hill,
.map-stylized__core,
.map-stylized__island {
  fill-opacity: 0;
  transition: fill-opacity 1.2s ease 1s, stroke-dashoffset 1.8s ease-out;
}
.map-stylized.is-revealed .map-stylized__hill,
.map-stylized.is-revealed .map-stylized__core,
.map-stylized.is-revealed .map-stylized__island {
  fill-opacity: 1;
}

/* ─── Marker: sequentielles Pop-in ─── */
.map-stylized__marker {
  opacity: 0;
  transform-origin: var(--mx, 50%) var(--my, 50%);
  transform: scale(0.3);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.map-stylized.is-revealed .map-stylized__marker {
  opacity: 1;
  transform: scale(1);
}

/* Pulse-Glow nur auf Stadtteil-Markern (Navy) */
.map-stylized__marker:not(.map-stylized__marker--umland) .map-stylized__marker__dot {
  animation: mapMarkerPulse 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes mapMarkerPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(30, 58, 95, 0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(184, 153, 104, 0.55)); }
}

/* Hover-Upgrade */
.map-stylized__marker:hover {
  z-index: 5;
}


/* Tooltip-Upgrade: Premium-Layout */
.map-stylized__tooltip {
  background: linear-gradient(135deg, var(--main, #1E3A5F) 0%, var(--secondColor, #1A2433) 100%);
  border: 1px solid rgba(184, 153, 104, 0.4);
  padding: 14px 16px;
  max-width: 260px;
  box-shadow: 0 8px 24px rgba(30, 58, 95, 0.35);
}
.map-stylized__tooltip__name {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--highlight, #B89968);
  margin-bottom: 6px;
}
.map-stylized__tooltip__text {
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.map-stylized__tooltip__stats {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(184, 153, 104, 0.25);
  font-size: 0.76rem;
  color: var(--highlight, #B89968);
  font-weight: 600;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .map-stylized__marker { opacity: 1; transform: scale(1); transition: none; }
  .map-stylized__marker .map-stylized__marker__dot { animation: none; }
  .map-stylized__river, .map-stylized__district-outline,
  .map-stylized__core, .map-stylized__hill, .map-stylized__island {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    transition: none;
  }
}
/* === ENDE MAP-A POWER-UPGRADE === */


/* ════════════════════════════════════════════════════════════════════════
   SECTION--NAVY BUTTON-LESBARKEIT
   Auf Navy: .btn (default-blau) → Gold-Background + Navy-Text
   Verhindert "blau auf blau" - sicheres Werthandel-Branding
   ════════════════════════════════════════════════════════════════════════ */

.section--navy .btn:not(.btn-outline-white):not(.btn--outline):not(.btn--lg.btn-outline-white) {
  background: var(--highlight, #B89968) !important;
  border-color: var(--highlight, #B89968) !important;
  color: var(--main, #1E3A5F) !important;
}
.section--navy .btn:not(.btn-outline-white):not(.btn--outline):hover {
  background: #A38357 !important;
  border-color: #A38357 !important;
  color: var(--main, #1E3A5F) !important;
}

/* .cta-final ist Navy + auch betroffen (eigene Klasse) */
.cta-final .btn:not(.btn-outline-white):not(.btn--outline) {
  background: var(--highlight, #B89968) !important;
  border-color: var(--highlight, #B89968) !important;
  color: var(--main, #1E3A5F) !important;
}
.cta-final .btn:not(.btn-outline-white):not(.btn--outline):hover {
  background: #A38357 !important;
  color: var(--main, #1E3A5F) !important;
}

/* btn-navy auf Navy-Sektionen: weißer Outline statt Navy-Solid */
.section--navy .btn-navy,
.cta-final .btn-navy {
  background: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}
.section--navy .btn-navy:hover,
.cta-final .btn-navy:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: #fff !important;
}


/* === MAP-A V2: Triple-Pulse, Hover-Bounce, Drop-In, Tooltip-Card === */
/* ─── Marker: Drop-In-Reveal statt scale-only ─── */
.map-stylized__marker {
  opacity: 0;
  transform: translateY(-40px) scale(0.4);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.6, 0.5, 1);
}
.map-stylized.is-revealed .map-stylized__marker {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─── Triple-Ripple-Pulse (3 konzentrische Wellen) ─── */
.map-stylized__marker:not(.map-stylized__marker--umland) .map-stylized__marker__pulse {
  fill: none;
  stroke: var(--highlight, #B89968);
  stroke-width: 2;
  opacity: 0;
  animation: mapRipple 3s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.map-stylized__marker:not(.map-stylized__marker--umland) .map-stylized__marker__pulse--2 {
  animation-delay: 1s;
}
.map-stylized__marker:not(.map-stylized__marker--umland) .map-stylized__marker__pulse--3 {
  animation-delay: 2s;
}
@keyframes mapRipple {
  0%   { r: 6;  opacity: 0.6; stroke-width: 2; }
  100% { r: 22; opacity: 0;   stroke-width: 0.5; }
}

/* ─── Umland-Marker mit dezentem Pulse (Gold) ─── */
.map-stylized__marker--umland .map-stylized__marker__pulse {
  fill: none;
  stroke: var(--gold-text, #8A6E40);
  stroke-width: 1.5;
  opacity: 0;
  animation: mapRippleUmland 4s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.map-stylized__marker--umland .map-stylized__marker__pulse--2 {
  animation-delay: 2s;
}
@keyframes mapRippleUmland {
  0%   { r: 5;  opacity: 0.4; }
  100% { r: 14; opacity: 0;   }
}

/* ─── Hover (smooth, ohne Flackern) ─── */
.map-stylized__marker:hover { z-index: 5; }
.map-stylized__marker__dot {
  transition: r 0.18s ease, fill 0.18s ease, filter 0.18s ease;
}
.map-stylized__marker:hover .map-stylized__marker__dot,
.map-stylized__marker:focus .map-stylized__marker__dot {
  r: 9;
  fill: var(--highlight, #B89968);
  filter: drop-shadow(0 0 10px rgba(184, 153, 104, 0.7));
}
/* Pulse während Hover komplett stoppen + unsichtbar (kein Flimmer) */
.map-stylized__marker:hover .map-stylized__marker__pulse,
.map-stylized__marker:focus .map-stylized__marker__pulse {
  animation: none !important;
  opacity: 0 !important;
}
.map-stylized__marker:hover .map-stylized__marker__label,
.map-stylized__marker:focus .map-stylized__marker__label {
  opacity: 1;
  font-weight: 800;
}

/* ─── Wahrzeichen mit subtiler Floating-Animation ─── */
.map-stylized__landmark {
  animation: mapLandmarkFloat 4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.map-stylized__landmark:nth-of-type(2) { animation-delay: 1.2s; }
.map-stylized__landmark:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes mapLandmarkFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ─── Compass dreht sich subtil ─── */
.map-stylized__compass-needle {
  animation: compassWobble 8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes compassWobble {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}



/* ─── River fließt (Dash-Animation nach Reveal) ─── */
.map-stylized.is-revealed .map-stylized__river {
  animation: riverFlow 6s linear infinite 2s;
}
@keyframes riverFlow {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -120; }
}

/* ─── Tooltip-Card V2: größer, mit Bild, smoother Animation ─── */
.map-stylized__tooltip {
  background: linear-gradient(135deg, var(--main, #1E3A5F) 0%, var(--secondColor, #1A2433) 100%);
  border: 1px solid rgba(184, 153, 104, 0.45);
  padding: 0;
  max-width: 290px;
  min-width: 240px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(30, 58, 95, 0.45);
  transform: translate(-50%, -100%) translateY(0) scale(0.85);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.5, 1);
}
.map-stylized__tooltip.is-visible {
  transform: translate(-50%, -100%) translateY(-18px) scale(1);
}
.map-stylized__tooltip__img {
  width: 100%;
  height: 100px;
  background-size: cover;
  background-position: center;
  background-color: var(--main, #1E3A5F);
  border-bottom: 1px solid rgba(184, 153, 104, 0.35);
  position: relative;
}
.map-stylized__tooltip__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(26,36,51,0.4) 100%);
}
.map-stylized__tooltip__body {
  padding: 14px 16px 16px;
}
.map-stylized__tooltip__name {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--highlight, #B89968);
  margin-bottom: 6px;
}
.map-stylized__tooltip__text {
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.map-stylized__tooltip__stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(184, 153, 104, 0.18);
  font-size: 0.74rem;
  color: var(--highlight, #B89968);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.map-stylized__tooltip__stats::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--highlight, #B89968);
  box-shadow: 0 0 0 3px rgba(184, 153, 104, 0.25);
}
.map-stylized__tooltip::after {
  /* override existing arrow positioning */
  bottom: -7px;
  border-radius: 0 0 4px 0;
}

@media (prefers-reduced-motion: reduce) {
  .map-stylized__marker__pulse,
  .map-stylized__landmark,
  .map-stylized__compass-needle,
  .map-stylized__watermark,
  .map-stylized.is-revealed .map-stylized__river { animation: none !important; }
}
/* === ENDE MAP-A V2 === */


/* === MAP-A V3: Stadtteil-Flächen, Höhenlinien, Park, HQ === */
/* ─── Stadtteil-Flächen (anstatt nur Punkte) ─── */
.map-stylized__district {
  fill: rgba(184, 153, 104, 0.06);
  stroke: rgba(184, 153, 104, 0.20);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  cursor: pointer;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.map-stylized__district:hover,
.map-stylized__district.is-active {
  fill: rgba(184, 153, 104, 0.18);
  stroke: rgba(184, 153, 104, 0.50);
  stroke-dasharray: none;
  stroke-width: 1.5;
}

/* ─── Höhenlinien (statt blobby Hill) ─── */
.map-stylized__contour {
  fill: none;
  stroke: rgba(184, 153, 104, 0.22);
  stroke-width: 0.8;
}
.map-stylized__contour--2 { stroke-opacity: 0.18; }
.map-stylized__contour--3 { stroke-opacity: 0.13; }
.map-stylized__contour--4 { stroke-opacity: 0.09; }

/* ─── Park / Hain ─── */
.map-stylized__park {
  fill: rgba(40, 100, 70, 0.06);
  stroke: rgba(40, 100, 70, 0.18);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.map-stylized__park-tree {
  fill: rgba(40, 100, 70, 0.40);
}

/* ─── Werthandel-HQ Marker (Sonnefeld) ─── */
.map-stylized__hq {
  cursor: help;
}
.map-stylized__hq__base {
  fill: var(--highlight, #B89968);
  stroke: var(--main, #1E3A5F);
  stroke-width: 2.5;
  filter: drop-shadow(0 4px 8px rgba(184, 153, 104, 0.4));
}
.map-stylized__hq__crown {
  fill: var(--main, #1E3A5F);
}
.map-stylized__hq__label {
  fill: var(--main, #1E3A5F);
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: 0.04em;
}
.map-stylized__hq__sublabel {
  fill: var(--gold-text, #8A6E40);
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-anchor: middle;
  text-transform: uppercase;
}
.map-stylized__hq__pulse {
  fill: none;
  stroke: var(--highlight, #B89968);
  stroke-width: 2;
  opacity: 0;
  animation: hqPulse 2.8s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.map-stylized__hq__pulse--2 { animation-delay: 1.4s; }
@keyframes hqPulse {
  0%   { r: 10; opacity: 0.7; stroke-width: 2.5; }
  100% { r: 38; opacity: 0;   stroke-width: 0.5; }
}

/* ─── Verbindungslinie HQ → Bamberg ─── */
.map-stylized__hq-link {
  fill: none;
  stroke: var(--highlight, #B89968);
  stroke-width: 1.6;
  stroke-dasharray: 6 6;
  opacity: 0.55;
}
.map-stylized.is-revealed .map-stylized__hq-link {
  animation: hqLinkFlow 4s linear infinite;
}
@keyframes hqLinkFlow {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -24; }
}

/* ─── Marker poppen jetzt synchroner mit Bounce ─── */
.map-stylized__marker {
  transition-timing-function: cubic-bezier(0.34, 1.7, 0.5, 1);
}

/* Tooltip-Card auch für umland-Marker leicht reduziert */
.map-stylized__marker--umland + .map-stylized__tooltip__img,
.map-stylized__tooltip__img[style*="undefined"] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .map-stylized__hq__pulse,
  .map-stylized.is-revealed .map-stylized__hq-link { animation: none !important; }
}
/* === ENDE MAP-A V3 === */





/* === BRANDSANIERUNG: pain-card (Redesign) === */
/* old .faq-item/.faq-list/.faq-item__body Pattern entfernt - FAQ jetzt Website-weit auf .ce-accordion (siehe Zeilen 1087+) */

/* ─── Pain-Card (Brandschäden Stressquellen) ─── */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.pain-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--whHairlineGold, rgba(184,153,104,0.22));
  border-radius: 14px;
  padding: 30px 26px 26px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
}
.pain-card:hover {
  transform: translateY(-3px);
  border-color: var(--highlight, #B89968);
  box-shadow: 0 12px 32px rgba(30,58,95,0.08);
}
.pain-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(184,153,104,0.10);
  color: var(--gold-text, #8A6E40);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.pain-card__icon svg { width: 24px; height: 24px; }
.pain-card__num {
  position: absolute;
  top: 22px;
  right: 24px;
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(184,153,104,0.30);
  letter-spacing: 0.02em;
}
.pain-card__title {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.1rem;
  color: var(--main, #1E3A5F);
  margin: 0 0 10px;
  line-height: 1.25;
}
.pain-card__text {
  font-size: 0.92rem;
  color: var(--secondColorLight, #4A5468);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 900px) { .pain-grid { grid-template-columns: 1fr; } }
/* === ENDE BRANDSANIERUNG === */


/* === RISK-BAND CTA-EXTENSION (Wasserschaden + ggf. weitere) === */
.risk-band__cta {
  max-width: 1180px;
  margin: 16px auto 0;
  padding: 16px 32px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.risk-band__cta-text { flex: 1; min-width: 260px; }
.risk-band__cta-text h3 {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.risk-band__cta-text p {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.78);
  margin: 0;
  line-height: 1.5;
}
.risk-band__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--highlight, #B89968);
  color: var(--main, #1E3A5F);
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}
.risk-band__cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(184,153,104,0.35);
  color: var(--main);
}
.risk-band__cta-btn svg { width: 18px; height: 18px; }

.risk-band__stats {
  max-width: 1180px;
  margin: 4px auto 0;
  padding: 0 32px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.risk-band__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.risk-band__stat-num {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--highlight, #B89968);
  letter-spacing: -0.01em;
}
.risk-band__stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  line-height: 1.3;
}
.risk-band__call {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--highlight, #B89968);
  font-size: 0.88rem;
  font-weight: 600;
}
.risk-band__call:hover { color: var(--highlight, #B89968); }

@media (max-width: 760px) {
  .risk-band__cta {
    flex-direction: column;
    text-align: center;
  }
  .risk-band__stats { gap: 24px; }
  .risk-band__stat-num { font-size: 1.2rem; }
}
/* === ENDE RISK-BAND CTA === */


/* === MID-CTA-SECTION (Wasserschaden - cream Sub-Section unter Risk-Band) === */
.mid-cta-section {
  background: var(--bg-cream, #F8F4ED);
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--whHairlineGold, rgba(184,153,104,0.22));
}
.mid-cta-section__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.mid-cta-section__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.mid-cta-section__text { flex: 1; min-width: 280px; }
.mid-cta-section__text h3 {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 700;
  color: var(--main, #1E3A5F);
  margin: 0 0 6px;
}
.mid-cta-section__text p {
  font-size: 0.92rem;
  color: var(--secondColorLight, #4A5468);
  margin: 0;
  line-height: 1.5;
}
.mid-cta-section__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--highlight, #B89968);
  color: var(--main, #1E3A5F);
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}
.mid-cta-section__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(184,153,104,0.35);
  color: var(--main);
}
.mid-cta-section__btn svg { width: 18px; height: 18px; }
.mid-cta-section__stats {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--whHairlineGold, rgba(184,153,104,0.18));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.mid-cta-section__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.mid-cta-section__stat-num {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold-text, #8A6E40);
  letter-spacing: -0.01em;
}
.mid-cta-section__stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondColorLight, #4A5468);
  font-weight: 600;
  line-height: 1.3;
}
.mid-cta-section__call {
  color: var(--main, #1E3A5F);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--highlight, #B89968);
  font-size: 0.88rem;
  font-weight: 600;
}
.mid-cta-section__call:hover { color: var(--gold-text, #8A6E40); }
@media (max-width: 760px) {
  .mid-cta-section__main { flex-direction: column; text-align: center; }
  .mid-cta-section__stats { gap: 22px; }
}
/* === ENDE MID-CTA-SECTION === */


/* ═════════════════════════════════════════════════════════════════════
   SEO-Cleanup 2026-05-31: Inline-Style-Pollution → CSS-Klassen
   (extrahiert die häufigsten Pattern aus den HTML-Pages)
   ════════════════════════════════════════════════════════════════════ */

/* Trust-Photos / Beispiele-Grid Cards */
.tp-figure { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.08); background: #fff; }
.tp-figure--strong { box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
.tp-figure__img { width: 100%; height: 240px; object-fit: cover; display: block; }
.tp-figure__img--tall { height: 280px; }
.tp-figure__caption { padding: 14px 18px; font-size: 0.88rem; color: var(--text-soft, #6b7280); font-style: italic; }

/* Sections-Container mit max-width */
.section-narrow { max-width: 1100px; margin: 0 auto; }
.section-header--centered { text-align: center; max-width: 640px; margin: 0 auto 32px; }

/* USP/Step-Cards (background:#fff padding etc.) */
.usp-card-frame { background: #fff; padding: 36px 30px; border-radius: 12px; border-left: 4px solid var(--highlight); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.usp-card-frame__title { font-family: var(--headline); font-size: 1.35rem; color: var(--text); margin-bottom: 14px; }
.usp-card-frame__body { color: var(--text-soft); line-height: 1.65; font-size: 0.95rem; flex-grow: 1; margin-bottom: 20px; }
.usp-card-frame__link { color: var(--highlight); font-weight: 700; text-decoration: none; font-size: 0.92rem; }

/* Beispiele-Grid (3 oder 2 cols) */
.beispiele-grid { display: grid; gap: 24px; max-width: 1100px; margin: 0 auto; }
.beispiele-grid--3 { grid-template-columns: repeat(3, 1fr); }
.beispiele-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) {
  .beispiele-grid--3, .beispiele-grid--2 { grid-template-columns: 1fr; }
}

/* Trust-Photos Grid (universell, 3 cols) */
.trust-photos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 800px) { .trust-photos-grid { grid-template-columns: 1fr; } }

/* Form-Helpers */
.form-label-hint { color: var(--text-soft); font-weight: 400; }

/* Margin-Helpers */
.mt-24 { margin-top: 24px; }
.mt-8 { margin-top: 8px; }
.mt-36 { margin-top: 36px; }

/* Mid-CTA spezial */
.mid-cta-inner { max-width: 820px; text-align: center; }
.mid-cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Navy-Statement Bullet-Wrapper */
.navy-bullets { max-width: 720px; margin: 0 auto; }
.navy-center-cta { text-align: center; margin-top: 36px; }

/* Jennifer-Block */
.jennifer-block-quote { font-family: var(--headline); font-size: 1.12rem; font-style: italic; color: var(--text); line-height: 1.5; margin-bottom: 16px; padding-left: 14px; border-left: 3px solid var(--highlight); }


/* ═════════════════════════════════════════════════════════════════════
   Objekttypen-Stadt-Sektion (Long-Tail-SEO)
   ════════════════════════════════════════════════════════════════════ */
.objekttypen-stadt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.ots-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 26px;
  border-top: 3px solid var(--highlight);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}
.ots-card h3 {
  font-family: var(--headline);
  font-size: 1.18rem;
  line-height: 1.3;
  color: var(--main);
  margin-bottom: 12px;
}
.ots-card p {
  color: var(--text-soft);
  font-size: 0.94rem;
  line-height: 1.55;
  margin-bottom: 16px;
  flex-grow: 1;
}
.ots-link {
  color: var(--gold-text);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.ots-link:hover { text-decoration: underline; }

@media (max-width: 880px) {
  .objekttypen-stadt { grid-template-columns: 1fr; gap: 16px; }
  .ots-card { padding: 22px 20px; }
}


/* ═════════════════════════════════════════════════════════════════════
   Stadt-Fakten-Sektion (ersetzt Quadratmeterpreise - Trust ohne Preisrisiko)
   ════════════════════════════════════════════════════════════════════ */
.stadt-fakten-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 980px) {
  .stadt-fakten-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .stadt-fakten-grid { grid-template-columns: 1fr; }
}
.stadt-fakt-card {
  background: var(--bg-cream, #F8F4ED);
  border: 1px solid rgba(184,153,104,0.20);
  border-radius: 12px;
  padding: 26px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stadt-fakt-card__value {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--main, #1E3A5F);
  line-height: 1.1;
}
.stadt-fakt-card__label {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text, #8A6E40);
  margin-bottom: 4px;
}
.stadt-fakt-card__hint {
  font-size: 0.86rem;
  color: var(--text-soft, #4A5468);
  line-height: 1.5;
  margin-top: 8px;
}

/* Compare-Card (klassisch vs. Werthandel) - gleiche Breite wie andere Cards */
.stadt-fakt-card--highlight {
  background: linear-gradient(135deg, var(--main, #1E3A5F) 0%, var(--secondColor, #1A2433) 100%);
  border-color: var(--highlight, #B89968);
  color: #fff;
  padding: 22px 18px;
}
.stadt-fakt-card__compare {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}
.stadt-fakt-card__compare-left,
.stadt-fakt-card__compare-right {
  text-align: center;
}
.stadt-fakt-card__compare-val {
  font-family: var(--headline);
  font-size: 1.55rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.stadt-fakt-card__compare-right .stadt-fakt-card__compare-val {
  color: var(--highlight, #B89968);
}
.stadt-fakt-card__compare-lab {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.stadt-fakt-card__compare-vs {
  font-family: var(--headline);
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
}
.stadt-fakt-card--highlight .stadt-fakt-card__hint {
  color: rgba(255,255,255,0.7);
  text-align: center;
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.stadt-fakten-quelle {
  font-size: 0.78rem;
  color: var(--text-soft);
  text-align: center;
  margin: 24px auto 0;
  max-width: 760px;
  line-height: 1.5;
  opacity: 0.8;
}


/* ═════════════════════════════════════════════════════════════════════
   Werthandel-Suchprofil-Sektion (ersetzt Track-Record auf nicht-Bamberg-Stadtseiten)
   ════════════════════════════════════════════════════════════════════ */
.suchprofil-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 1000px) {
  .suchprofil-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .suchprofil-grid { grid-template-columns: 1fr; }
}
.suchprofil-card {
  background: #fff;
  border: 1px solid rgba(184,153,104,0.18);
  border-radius: 14px;
  padding: 26px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.suchprofil-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
.suchprofil-card__badge {
  position: absolute;
  top: -12px;
  left: 22px;
  background: var(--main, #1E3A5F);
  color: var(--highlight, #B89968);
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  padding: 5px 12px;
  border-radius: 14px;
  border: 1px solid var(--highlight, #B89968);
}
.suchprofil-card__type {
  font-family: var(--headline);
  font-size: 1.22rem;
  color: var(--main, #1E3A5F);
  margin: 6px 0 0;
  line-height: 1.2;
}
.suchprofil-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.suchprofil-card__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(184,153,104,0.12);
}
.suchprofil-card__row:last-child { border-bottom: none; padding-bottom: 0; }
.suchprofil-card__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-text, #8A6E40);
  font-weight: 700;
}
.suchprofil-card__val {
  font-size: 0.92rem;
  color: var(--text, #1A2433);
  line-height: 1.4;
}
.suchprofil-card__note {
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.84rem;
  color: var(--text-soft, #4A5468);
  font-style: italic;
  border-top: 1px solid rgba(184,153,104,0.12);
  line-height: 1.45;
}
.suchprofil-quelle {
  font-size: 0.84rem;
  color: var(--text-soft);
  text-align: center;
  margin: 32px auto 0;
  max-width: 760px;
  line-height: 1.55;
  opacity: 0.85;
  font-style: italic;
}


/* ═════════════════════════════════════════════════════════════════════
   Suchprofil-Card · Polish v2 (SVG-Icons, Hover-Glow, Tag-Pills)
   ════════════════════════════════════════════════════════════════════ */

/* Badge: SVG-Icon statt Text */
.suchprofil-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--main, #1E3A5F);
  color: var(--highlight, #B89968);
  border: 1.5px solid var(--highlight, #B89968);
  top: -16px;
  left: 22px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.suchprofil-card__badge svg {
  width: 22px;
  height: 22px;
  color: var(--highlight, #B89968);
}

/* Hover-Effekt: Gold-Border-Glow + Badge-Highlight */
.suchprofil-card {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.suchprofil-card:hover {
  transform: translateY(-4px);
  border-color: var(--highlight, #B89968);
  box-shadow: 0 10px 28px rgba(184,153,104,0.18), 0 4px 12px rgba(0,0,0,0.08);
}
.suchprofil-card:hover .suchprofil-card__badge {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(184,153,104,0.35);
  background: var(--highlight, #B89968);
}
.suchprofil-card:hover .suchprofil-card__badge svg {
  color: var(--main, #1E3A5F);
}

/* Tag-Pills statt italic-Note */
.suchprofil-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(184,153,104,0.14);
}
.suchprofil-pill {
  font-size: 0.74rem;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(184,153,104,0.10);
  color: var(--gold-text, #8A6E40);
  border: 1px solid rgba(184,153,104,0.22);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.4;
  transition: background .2s ease, color .2s ease;
}
.suchprofil-card:hover .suchprofil-pill {
  background: rgba(184,153,104,0.18);
}


/* ════════════════════════════════════════════════════════════════════════
   FIX 2026-05-31 v2: Hero-Grid Mobile-Stacking (Breakpoint 720)
   Reason: Spätere "Jennifer-Card V2"-Regel (Z. 4997) hat .hero--new .hero__inner
   ohne Media-Query überschrieben → 2-Spalten-Layout blieb auch auf Mobile.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  body .hero--new .hero__inner,
  .hero--new .hero__inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-top: 32px !important;
    padding-bottom: 60px !important;
  }
  body .hero--new .hero__person,
  .hero--new .hero__person {
    justify-self: stretch !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }
}
@media (max-width: 600px) {
  body .hero--new .hero__person,
  .hero--new .hero__person {
    grid-template-columns: 88px 1fr !important;
    gap: 14px !important;
    padding: 18px 18px 18px 16px !important;
  }
  body .hero--new .hero__person-photo,
  .hero--new .hero__person-photo {
    width: 88px !important;
    height: 112px !important;
  }
  body .hero--new .hero__person-name,
  .hero--new .hero__person-name {
    font-size: 1rem !important;
  }
  body .hero--new .hero__person-quote,
  .hero--new .hero__person-quote {
    font-size: 0.85rem !important;
  }
}
/* ════════════════════════════════════════════════════════════════════════════
 * Werthandel · 06-subpages.css
 * ----------------------------------------------------------------------------
 * Page-spezifische Styles aus allen Subpages (brandsanierung, wasserschaden,
 * Landingpages, Stadtseiten, impressum, datenschutz).
 *
 * AUFGEBAUT: Jeder Block ist mit Source-File-Kommentar markiert, damit klar ist
 * woher der Style kommt.
 *
 * TODO bei nächstem Refactor:
 *   - Doppelte Selektoren konsolidieren (.hero-form, .stadtteil-card etc.
 *     kommen mehrfach vor - können in komponenten.css zusammengeführt werden)
 *   - Inline-Schmuckelemente (color:..., padding:...) in echte BEM-Klassen
 *
 * Aktuell pragmatisch zusammengehalten, alle Styles funktional korrekt.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── extrahiert aus: brandsanierung.html ─── */

/* Mosafin (Werthandel-Familie) */
@font-face { font-family: 'Mosafin'; src: url('../../Brand/Assets/Fonts/Mosafin-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Mosafin'; src: url('../../Brand/Assets/Fonts/Mosafin-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }

:root {
  --main: #1E3A5F; --main-soft: #2E4F7A;
  --text: #1A2433; --text-soft: #4A5468;
  --bg-cream: #F8F4ED; --bg-sand: #EBE4D6;
  --highlight: #B89968; --hairline-gold: rgba(184,153,104,0.4);
  --hairline: #DDD1B8;
  /* Alias-Tokens für CI-Konsistenz mit Hauptseite */
  --mainColor: var(--main);
  --mainColorLight: var(--main-soft);
  --secondColor: var(--text);
  --secondColorLight: var(--text-soft);
  --backgroundColor: var(--bg-cream);
  --greyVeryLight: var(--bg-sand);
  --whHighlight: var(--highlight);
  --whHairlineGold: var(--hairline-gold);
  --headline: 'Mosafin', 'Playfair Display', serif;
  --mainFont: 'Montserrat', sans-serif;

}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', sans-serif; background: var(--bg-cream); color: var(--text); line-height: 1.65; }
h1,h2,h3,h4 { font-family: 'Mosafin', 'Mosafin', 'Playfair Display', serif; line-height: 1.15; letter-spacing: -0.5px; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }



.btn { display: inline-flex; align-items: center; padding: 14px 28px; border-radius: 50px; background: var(--main); color: var(--bg-cream); text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.2s; border: none; cursor: pointer; }
.btn:hover { background: var(--main-soft); }
.btn--lg { padding: 18px 36px; font-size: 16px; }
.btn--outline { background: transparent; color: var(--main); border: 1.5px solid var(--main); }

.hero { background: linear-gradient(160deg, var(--bg-sand) 0%, var(--bg-cream) 100%); padding: 120px 0 160px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 80% 30%, rgba(184,153,104,0.18) 0%, transparent 55%); }
.hero__inner { max-width: 820px; position: relative; z-index: 2; }
.hero__eyebrow { display: inline-block; color: var(--main); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--highlight); margin-bottom: 32px; }
/* DEPRECATED - see 05-pages.css for unified .hero h1 */
/* DEPRECATED em - see 05-pages.css */
.hero__sub { font-size: 1.2rem; color: var(--text-soft); margin-bottom: 36px; max-width: 640px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }

.section { padding: 120px 0; }
.section--alt { background: var(--bg-sand); }
.section--dark { background: var(--text); color: var(--bg-cream); }
.section--dark h2 { color: var(--bg-cream); }
.section--dark p { color: rgba(248,244,237,0.78); }
.section__header { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.section__label { display: inline-block; color: var(--main); font-size: 11px; letter-spacing: 0.28em; font-weight: 700; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--highlight); margin-bottom: 20px; }
.section__header h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin-bottom: 16px; }
.section__header p { color: var(--text-soft); font-size: 1.1rem; }

.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.problem-card { background: #fff; border: 1px solid var(--hairline); border-radius: 10px; padding: 32px 28px; }
.problem-card__num { color: var(--main); font-family: 'Mosafin', 'Mosafin', 'Playfair Display', serif; font-size: 2.4rem; font-weight: 700; line-height: 1; margin-bottom: 16px; }
.problem-card h3 { font-size: 1.2rem; margin-bottom: 12px; }
.problem-card p { color: var(--text-soft); font-size: 0.95rem; }
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; } }

.solution { max-width: 920px; margin: 0 auto; background: #fff; border: 1px solid var(--hairline-gold); border-radius: 10px; padding: 56px; box-shadow: 0 24px 56px rgba(30,58,95,0.08); }
.solution__stamp { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--main); color: var(--main); border-radius: 6px; font-size: 11px; letter-spacing: 0.2em; font-weight: 700; text-transform: uppercase; margin-bottom: 24px; }
.solution__stamp::before { content: '✓'; }
.solution h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); margin-bottom: 24px; }
.solution ul { list-style: none; margin-top: 24px; }
.solution li { padding: 12px 0; border-bottom: 1px solid var(--hairline-gold); display: flex; align-items: flex-start; gap: 12px; }
.solution li:last-child { border-bottom: none; }
.solution li::before { content: '→'; color: var(--main); font-weight: 700; flex-shrink: 0; }

.cta-banner { background: var(--text); color: var(--bg-cream); padding: 96px 32px; text-align: center; }
.cta-banner h2 { color: var(--bg-cream); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin-bottom: 16px; font-weight: 500; }
.cta-banner p { color: rgba(248,244,237,0.85); margin-bottom: 32px; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-banner .btn { background: var(--bg-cream); color: var(--main); }
.cta-banner .btn:hover { background: var(--highlight); color: var(--text); }
.cta-banner + footer.foot { padding-top: 56px; border-top: 1px solid rgba(184,153,104,0.18); }
.cta-banner { padding-bottom: 88px; }


/* Hauptseite-Style Footer */
.foot { background: var(--text); color: rgba(248,244,237,0.72); padding: 72px 0 28px; }
.foot .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.foot__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px; padding-bottom: 48px; border-bottom: 1px solid rgba(184,153,104,0.18); }
.foot-logo { max-width: 220px; margin-bottom: 24px; filter: brightness(0) invert(1); display: block; }
.foot-desc { font-size: 0.92rem; line-height: 1.65; margin-bottom: 20px; max-width: 380px; }
.foot-addr { font-size: 0.88rem; line-height: 1.55; color: rgba(248,244,237,0.6); }
.foot-addr a { color: var(--highlight); text-decoration: none; }
.foot-addr a:hover { color: #fff; }
.foot__col h4 { color: #fff; font-family: 'Mosafin', 'Playfair Display', serif; font-size: 1rem; font-weight: 700; margin-bottom: 18px; letter-spacing: 0.5px; }
.foot__col ul { list-style: none; padding: 0; margin: 0; }
.foot__col li { padding: 5px 0; }
.foot__col a { color: rgba(248,244,237,0.7); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.foot__col a:hover { color: var(--highlight); }
.foot__bottom { padding-top: 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; }
.foot__legal a { color: rgba(248,244,237,0.55); text-decoration: none; }
.foot__legal a:hover { color: var(--highlight); }
.foot__copy { color: rgba(248,244,237,0.5); }
@media (max-width: 900px) { .foot__top { grid-template-columns: 1fr; gap: 40px; } .foot-logo { max-width: 180px; } }
.foot__row .foot-logo, .foot__row img { filter: brightness(0) invert(1); max-width: 200px; }
.foot__row { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.foot__row a { color: rgba(248,244,237,0.7); text-decoration: none; }
.foot__row a:hover { color: var(--highlight); }

/* Sticky-Call mobile */
@media (max-width: 768px) {
  .sticky-call { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--main); color: var(--bg-cream); padding: 14px 16px; text-decoration: none; justify-content: center; gap: 12px; font-family: 'Playfair Display'; font-weight: 600; box-shadow: 0 -4px 16px rgba(0,0,0,0.12); }
  .head__nav { display: none; }
  .section { padding: 64px 0; }
}
.sticky-call { display: none; }

@media (max-width: 768px) {
  .problem-grid { grid-template-columns: 1fr; }
  .solution { padding: 32px 24px; }
}

/* === Hauptseite-Match: Container-Breite === */
.container { max-width: 1504px; width: 92%; padding: 0; }
@media (max-width: 1100px) { .container { width: 94%; } }

/* === Hauptseite-Match: Button im Bernert-Style === */
.btn {
  display: inline-block; position: relative;
  border: 1px solid var(--main);
  cursor: pointer; padding: 14px 40px 14px 64px;
  color: var(--bg-cream); background: linear-gradient(180deg, var(--main-soft) 0%, var(--main) 100%);
  box-shadow: 0 -4px 14px 0 rgba(0,0,0,0.25) inset;
  border-radius: 50px; font-family: 'Mosafin', 'Playfair Display', serif;
  font-size: 17px; font-weight: 500; text-decoration: none;
  transition: all 0.3s ease-in-out; line-height: 120%;
}
.btn::before {
  content: ''; position: absolute; left: 32px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center / contain;
  transition: transform 0.3s;
}
.btn:hover { background: linear-gradient(180deg, var(--main) 0%, var(--main-soft) 100%); }
.btn:hover::before { transform: translateY(-50%) translateX(4px); }
.btn--outline { background: transparent; color: var(--main); }
.btn--outline:hover { background: var(--main); color: var(--bg-cream); }
.btn--lg { padding: 18px 48px 18px 72px; font-size: 19px; }

/* === Hauptseite-Match: Hero mit Foto-BG + dunklem Overlay === */
.hero {
  position: relative; min-height: 80vh;
  padding: 180px 24px 140px;
  background:
    linear-gradient(180deg, rgba(26, 36, 51,.85) 0%, rgba(26, 36, 51,.60) 45%, rgba(26, 36, 51,.85) 100%),
    url('../heroes/landkreis-lichtenfels.webp') center/cover;
  color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden;
}
.hero::before { content: none !important; }
.hero__inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 2; color: #fff; text-align: center; }
.hero__eyebrow { color: var(--highlight) !important; border-bottom-color: var(--highlight) !important; }
.hero h1 { color: #fff !important; }
.hero h1 em { color: var(--highlight) !important; }
.hero__sub { color: rgba(255,255,255,0.88) !important; margin-left: auto; margin-right: auto; }
.hero__cta { justify-content: center; }
.hero .btn--outline { color: #fff; border-color: #fff; }
.hero .btn--outline:hover { background: #fff; color: var(--main); }

/* Subpage Hero+Breadcrumb-Layout (visuell konsistent zur Startseite - transparenter Header über Hero) */
.container.breadcrumb {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  z-index: 5;
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  padding: 0 32px;
  text-align: center;
  letter-spacing: 0.5px;
}
.container.breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.container.breadcrumb a:hover { color: var(--highlight, #B89968); }
@media (max-width: 768px) { .container.breadcrumb { display: none; } }
.hero {
  margin-top: -135px;
  padding-top: 220px !important;
}
body { background: var(--bg-cream, #F8F4ED); }


.section { background: var(--bg-cream, #F8F4ED); padding: 80px 0; }
.section--alt { background: var(--bg-sand, #EBE4D6); }
.section .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section__header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section__header h2 { font-family: var(--headline, 'Mosafin', serif); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); color: var(--main, #1E3A5F); margin-bottom: 16px; }
.section__header p { color: var(--text-soft, #4A5468); font-size: 1.05rem; line-height: 1.6; }
.section__label { display: inline-block; color: var(--highlight, #B89968); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--highlight, #B89968); margin-bottom: 24px; }


/* === SCHADENS-PAGE Schärfung === */
.hero-form { background: rgba(255,255,255,0.97); border-radius: 14px; padding: 32px 28px; box-shadow: 0 12px 48px rgba(0,0,0,0.35); color: var(--text); max-width: 460px; margin: 32px 0 0; }
.hero-form__title { font-family: var(--headline); font-size: 1.4rem; margin-bottom: 8px; color: var(--text); }
.hero-form__sub { font-size: 0.92rem; color: var(--text-soft); margin-bottom: 22px; line-height: 1.5; }
.hero-form__field { margin-bottom: 16px; }
.hero-form__field label { display: block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 6px; color: var(--text); }
.hero-form__field input, .hero-form__field select { width: 100%; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 8px; font-size: 0.95rem; font-family: var(--mainFont); background: #FAFAF7; }
.hero-form__btn { width: 100%; padding: 16px; background: var(--highlight); color: var(--text); border: none; border-radius: 50px; font-weight: 700; font-size: 1rem; cursor: pointer; margin-top: 8px; }
.hero-form__btn:hover { background: #A38357; }
.hero-form__step { display: none; }
.hero-form__step.is-active { display: block; }
.hero-form__step-indicator { display: flex; gap: 6px; margin-bottom: 18px; }
.hero-form__step-dot { flex: 1; height: 3px; background: rgba(184,153,104,0.2); border-radius: 2px; transition: background 0.3s; }
.hero-form__step-dot.is-active { background: var(--highlight); }
.hero-form__back { background: transparent; border: none; color: var(--text-soft); font-size: 0.85rem; cursor: pointer; margin-top: 10px; }
.hero-form__hint { font-size: 0.78rem; color: var(--text-soft); margin-top: 12px; text-align: center; }

.risk-reverser { max-width: 1200px; margin: -40px auto 60px; padding: 0 32px; position: relative; z-index: 5; }
.risk-reverser__inner { background: #fff; padding: 28px 32px; border-radius: 12px; border-top: 3px solid var(--highlight); box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
.risk-reverser__title { font-family: var(--headline); font-weight: 700; color: var(--main); font-size: 1.1rem; margin-bottom: 16px; }
.risk-reverser__title::before { content: '✓ '; color: var(--highlight); }
.risk-reverser__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 800px) { .risk-reverser__steps { grid-template-columns: repeat(2, 1fr); } }
.risk-reverser__step { display: flex; gap: 10px; }
.risk-reverser__step-num { flex-shrink: 0; width: 24px; height: 24px; background: var(--highlight); color: var(--text); font-weight: 700; font-size: 0.85rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.risk-reverser__step-text { font-size: 0.88rem; line-height: 1.45; color: var(--text-soft); }
.risk-reverser__step-text b { color: var(--main); display: block; font-size: 0.92rem; }

.partner-bar { background: var(--bg-cream); padding: 36px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.partner-bar__label { text-align: center; color: var(--text-soft); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600; }
.partner-bar__list { display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.partner-bar__item { font-family: var(--headline); font-weight: 700; color: var(--text-soft); font-size: 1.05rem; opacity: 0.7; }
.partner-bar__item small { display: block; font-family: var(--mainFont); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.5px; color: var(--highlight); margin-top: 3px; }

.whatsapp-sticky { position: fixed; bottom: 24px; right: 24px; z-index: 95; background: #25D366; color: #fff; padding: 14px 22px 14px 56px; border-radius: 50px; box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.whatsapp-sticky:hover { transform: translateY(-2px); }
.whatsapp-sticky::before { content: ''; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.7-.9-2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.6.1c-.9-.4-1.7-.9-2.4-1.7-.7-.7-1.2-1.5-1.6-2.4-.1-.3 0-.4.2-.5.1-.1.3-.3.4-.5.1-.1.2-.3.2-.4.1-.2.1-.4 0-.5 0-.1-.5-1.3-.7-1.7-.2-.5-.4-.4-.6-.4h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3 4.7 4.2 1.6.7 2.3.7 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.7-.4zM12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.6 1.4 5.2L2 22l4.9-1.3c1.5.8 3.2 1.3 5.1 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; }

.staedte-anker { background: var(--bg-cream); padding: 60px 0; }
.staedte-anker__inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; text-align: center; }
.staedte-anker h3 { font-family: var(--headline); color: var(--main); font-size: 1.4rem; margin-bottom: 14px; }
.staedte-anker p { color: var(--text-soft); margin-bottom: 28px; }
.staedte-anker__grid { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 920px; margin: 0 auto; }
.staedte-anker__pill { display: inline-flex; align-items: baseline; gap: 8px; background: #fff; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--hairline-gold); text-decoration: none; color: var(--main); font-weight: 600; font-size: 0.95rem; transition: all 0.2s; line-height: 1.2; }
.staedte-anker__pill:hover { border-color: var(--highlight); background: var(--bg-cream); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30,58,95,0.08); }
.staedte-anker__pill small { color: var(--text-soft); font-weight: 500; font-size: 0.78rem; }
/* Legacy: keep .__card alive but pill-styled if someone still uses old class */
.staedte-anker__card { display: inline-flex; align-items: baseline; gap: 8px; background: #fff; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--hairline-gold); text-decoration: none; color: var(--main); font-weight: 600; font-size: 0.95rem; transition: all 0.2s; line-height: 1.2; min-width: auto; }
.staedte-anker__card:hover { border-color: var(--highlight); background: var(--bg-cream); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30,58,95,0.08); }
.staedte-anker__card small { display: inline; color: var(--text-soft); font-weight: 500; font-size: 0.78rem; margin-top: 0; }




/* ─── extrahiert aus: impressum.html ─── */

:root {
  --main: #1E3A5F; --main-soft: #2E4F7A; --text: #1A2433; --text-soft: #4A5468;
  --bg-cream: #F8F4ED; --bg-sand: #EBE4D6; --highlight: #B89968;
  --hairline-gold: rgba(184,153,104,0.4); --hairline: #DDD1B8;
  --mainColor: var(--main); --secondColor: var(--text); --backgroundColor: var(--bg-cream);
  --greyVeryLight: var(--bg-sand); --whHighlight: var(--highlight); --whHairlineGold: var(--hairline-gold);
  --headline: 'Mosafin', 'Playfair Display', serif; --mainFont: 'Montserrat', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', sans-serif; background: var(--bg-cream); color: var(--text); line-height: 1.7; }
h1, h2, h3 { font-family: 'Mosafin', 'Playfair Display', serif; line-height: 1.2; letter-spacing: -0.5px; }
.wrap { max-width: 820px; margin: 0 auto; padding: 100px 24px 80px; }
.eyebrow { color: var(--main); font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--highlight); display: inline-block; margin-bottom: 24px; }
.wrap h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); margin-bottom: 32px; }
h2 { font-size: 1.4rem; margin: 40px 0 14px; color: var(--main); }
p { margin-bottom: 14px; color: var(--text-soft); }
strong { color: var(--text); font-weight: 600; }
a { color: var(--main); text-decoration: underline; }
.placeholder { background: rgba(184,153,104,0.1); border: 1px solid var(--hairline-gold); border-radius: 8px; padding: 16px 20px; margin: 16px 0; font-size: 0.92rem; color: var(--text-soft); }
.placeholder strong { color: var(--main); font-family: 'Mosafin', serif; display: block; margin-bottom: 4px; letter-spacing: 0.05em; }
.foot { background: var(--text); color: rgba(248,244,237,0.7); padding: 40px 0; text-align: center; font-size: 0.85rem; }
.foot a { color: var(--highlight); }
/* Subpage Hero+Breadcrumb-Layout (visuell konsistent zur Startseite - transparenter Header über Hero) */
.container.breadcrumb {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  z-index: 5;
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  padding: 0 32px;
  text-align: center;
  letter-spacing: 0.5px;
}
.container.breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.container.breadcrumb a:hover { color: var(--highlight, #B89968); }
@media (max-width: 768px) { .container.breadcrumb { display: none; } }
.hero {
  margin-top: -135px;
  padding-top: 220px !important;
}
body { background: var(--bg-cream, #F8F4ED); }


.section { background: var(--bg-cream, #F8F4ED); padding: 80px 0; }
.section--alt { background: var(--bg-sand, #EBE4D6); }
.section .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section__header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section__header h2 { font-family: var(--headline, 'Mosafin', serif); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); color: var(--main, #1E3A5F); margin-bottom: 16px; }
.section__header p { color: var(--text-soft, #4A5468); font-size: 1.05rem; line-height: 1.6; }
.section__label { display: inline-block; color: var(--highlight, #B89968); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--highlight, #B89968); margin-bottom: 24px; }




/* ─── extrahiert aus: datenschutz.html ─── */

:root {
  --main: #1E3A5F; --main-soft: #2E4F7A; --text: #1A2433; --text-soft: #4A5468;
  --bg-cream: #F8F4ED; --bg-sand: #EBE4D6; --highlight: #B89968;
  --hairline-gold: rgba(184,153,104,0.4); --hairline: #DDD1B8;
  --mainColor: var(--main); --secondColor: var(--text); --backgroundColor: var(--bg-cream);
  --greyVeryLight: var(--bg-sand); --whHighlight: var(--highlight); --whHairlineGold: var(--hairline-gold);
  --headline: 'Mosafin', 'Playfair Display', serif; --mainFont: 'Montserrat', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', sans-serif; background: var(--bg-cream); color: var(--text); line-height: 1.7; }
h1, h2, h3 { font-family: 'Mosafin', 'Playfair Display', serif; line-height: 1.2; letter-spacing: -0.5px; }
.wrap { max-width: 820px; margin: 0 auto; padding: 100px 24px 80px; }
.eyebrow { color: var(--main); font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--highlight); display: inline-block; margin-bottom: 24px; }
.wrap h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); margin-bottom: 32px; }
h2 { font-size: 1.4rem; margin: 40px 0 14px; color: var(--main); }
h3 { font-size: 1.1rem; margin: 28px 0 10px; }
p, ul { margin-bottom: 14px; color: var(--text-soft); }
ul { padding-left: 24px; }
li { margin-bottom: 6px; }
strong { color: var(--text); font-weight: 600; }
a { color: var(--main); text-decoration: underline; }
.box { background: rgba(184,153,104,0.08); border: 1px solid var(--hairline-gold); border-radius: 8px; padding: 20px 24px; margin: 24px 0; }
.box strong { color: var(--main); font-family: 'Mosafin', serif; display: block; margin-bottom: 8px; }
.foot { background: var(--text); color: rgba(248,244,237,0.7); padding: 40px 0; text-align: center; font-size: 0.85rem; }
.foot a { color: var(--highlight); }
/* Subpage Hero+Breadcrumb-Layout (visuell konsistent zur Startseite - transparenter Header über Hero) */
.container.breadcrumb {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  z-index: 5;
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  padding: 0 32px;
  text-align: center;
  letter-spacing: 0.5px;
}
.container.breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.container.breadcrumb a:hover { color: var(--highlight, #B89968); }
@media (max-width: 768px) { .container.breadcrumb { display: none; } }
.hero {
  margin-top: -135px;
  padding-top: 220px !important;
}
body { background: var(--bg-cream, #F8F4ED); }


.section { background: var(--bg-cream, #F8F4ED); padding: 80px 0; }
.section--alt { background: var(--bg-sand, #EBE4D6); }
.section .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section__header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section__header h2 { font-family: var(--headline, 'Mosafin', serif); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); color: var(--main, #1E3A5F); margin-bottom: 16px; }
.section__header p { color: var(--text-soft, #4A5468); font-size: 1.05rem; line-height: 1.6; }
.section__label { display: inline-block; color: var(--highlight, #B89968); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--highlight, #B89968); margin-bottom: 24px; }




/* ─── extrahiert aus: Stadtseiten/bamberg.html ─── */

/* Mosafin (Werthandel-Familie) */
@font-face { font-family: 'Mosafin'; src: url('../../Brand/Assets/Fonts/Mosafin-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Mosafin'; src: url('../../Brand/Assets/Fonts/Mosafin-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }

:root {
  --main: #1E3A5F; --main-soft: #2E4F7A;
  --text: #1A2433; --text-soft: #4A5468;
  --bg-cream: #F8F4ED; --bg-sand: #EBE4D6;
  --highlight: #B89968; --hairline-gold: rgba(184,153,104,0.4);
  --hairline: #DDD1B8;
  /* Alias-Tokens für CI-Konsistenz mit Hauptseite */
  --mainColor: var(--main);
  --mainColorLight: var(--main-soft);
  --secondColor: var(--text);
  --secondColorLight: var(--text-soft);
  --backgroundColor: var(--bg-cream);
  --greyVeryLight: var(--bg-sand);
  --whHighlight: var(--highlight);
  --whHairlineGold: var(--hairline-gold);
  --headline: 'Mosafin', 'Playfair Display', serif;
  --mainFont: 'Montserrat', sans-serif;

}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', sans-serif; background: var(--bg-cream); color: var(--text); line-height: 1.65; }
h1,h2,h3,h4 { font-family: 'Mosafin', 'Playfair Display', serif; line-height: 1.15; letter-spacing: -0.5px; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.btn { display: inline-flex; align-items: center; padding: 14px 28px; border-radius: 50px; background: var(--main); color: var(--bg-cream); text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.2s; border: none; cursor: pointer; }
.btn:hover { background: var(--main-soft); }
.btn--lg { padding: 18px 36px; font-size: 16px; }
.btn--outline { background: transparent; color: var(--main); border: 1.5px solid var(--main); }
.breadcrumb { padding: 20px 0 0; font-size: 13px; color: var(--text-soft); }
.breadcrumb a { color: var(--main); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.hero { background: linear-gradient(160deg, var(--bg-sand) 0%, var(--bg-cream) 100%); padding: 80px 0 140px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 80% 30%, rgba(184,153,104,0.18) 0%, transparent 55%); }
.hero__inner { max-width: 820px; position: relative; z-index: 2; }
.hero__eyebrow { display: inline-block; color: var(--main); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--highlight); margin-bottom: 28px; }
/* DEPRECATED - see 05-pages.css for unified .hero h1 */
/* DEPRECATED em - see 05-pages.css */
.hero__sub { font-size: 1.2rem; color: var(--text-soft); margin-bottom: 36px; max-width: 640px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.section { padding: 100px 0; }
.section--alt { background: var(--bg-sand); }
.section__header { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section__label { display: inline-block; color: var(--main); font-size: 11px; letter-spacing: 0.28em; font-weight: 700; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--highlight); margin-bottom: 20px; }
.section__header h2 { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem); margin-bottom: 14px; }
.section__header p { color: var(--text-soft); font-size: 1.05rem; }
.fakten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.fakt { background: #fff; border: 1px solid var(--hairline-gold); border-radius: 10px; padding: 28px; text-align: center; }
.fakt__num { font-family: 'Mosafin', 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: var(--main); line-height: 1; margin-bottom: 8px; }
.fakt__label { font-size: 11px; color: var(--text-soft); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 760px) { .fakten { grid-template-columns: repeat(2, 1fr); } }
.was { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.was-card { background: #fff; border: 1px solid var(--hairline); border-radius: 10px; padding: 28px; }
.was-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.was-card p { color: var(--text-soft); font-size: 0.93rem; }
@media (max-width: 900px) { .was { grid-template-columns: 1fr; } }
.cta-banner { background: var(--text); color: var(--bg-cream); padding: 80px 32px; text-align: center; }
.cta-banner h2 { color: var(--bg-cream); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin-bottom: 16px; font-weight: 500; }
.cta-banner p { color: rgba(248,244,237,0.85); margin-bottom: 32px; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-banner .btn { background: var(--bg-cream); color: var(--main); }
.cta-banner .btn:hover { background: var(--highlight); color: var(--text); }
.cta-banner + footer.foot { padding-top: 56px; border-top: 1px solid rgba(184,153,104,0.18); }
.cta-banner { padding-bottom: 88px; }

/* Hauptseite-Style Footer */
.foot { background: var(--text); color: rgba(248,244,237,0.72); padding: 72px 0 28px; }
.foot .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.foot__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px; padding-bottom: 48px; border-bottom: 1px solid rgba(184,153,104,0.18); }
.foot-logo { max-width: 220px; margin-bottom: 24px; filter: brightness(0) invert(1); display: block; }
.foot-desc { font-size: 0.92rem; line-height: 1.65; margin-bottom: 20px; max-width: 380px; }
.foot-addr { font-size: 0.88rem; line-height: 1.55; color: rgba(248,244,237,0.6); }
.foot-addr a { color: var(--highlight); text-decoration: none; }
.foot-addr a:hover { color: #fff; }
.foot__col h4 { color: #fff; font-family: 'Mosafin', 'Playfair Display', serif; font-size: 1rem; font-weight: 700; margin-bottom: 18px; letter-spacing: 0.5px; }
.foot__col ul { list-style: none; padding: 0; margin: 0; }
.foot__col li { padding: 5px 0; }
.foot__col a { color: rgba(248,244,237,0.7); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.foot__col a:hover { color: var(--highlight); }
.foot__bottom { padding-top: 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; }
.foot__legal a { color: rgba(248,244,237,0.55); text-decoration: none; }
.foot__legal a:hover { color: var(--highlight); }
.foot__copy { color: rgba(248,244,237,0.5); }
@media (max-width: 900px) { .foot__top { grid-template-columns: 1fr; gap: 40px; } .foot-logo { max-width: 180px; } }
.foot__row .foot-logo, .foot__row img { filter: brightness(0) invert(1); max-width: 200px; }
.foot__row { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.foot__row a { color: rgba(248,244,237,0.7); text-decoration: none; }
.foot__row a:hover { color: var(--highlight); }
@media (max-width: 768px) { .head__nav { display: none; } .section { padding: 64px 0; } }

/* === Hauptseite-Match: Container-Breite === */
.container { max-width: 1504px; width: 92%; padding: 0; }
@media (max-width: 1100px) { .container { width: 94%; } }

/* === Hauptseite-Match: Button im Bernert-Style === */
.btn {
  display: inline-block; position: relative;
  border: 1px solid var(--main);
  cursor: pointer; padding: 14px 40px 14px 64px;
  color: var(--bg-cream); background: linear-gradient(180deg, var(--main-soft) 0%, var(--main) 100%);
  box-shadow: 0 -4px 14px 0 rgba(0,0,0,0.25) inset;
  border-radius: 50px; font-family: 'Mosafin', 'Playfair Display', serif;
  font-size: 17px; font-weight: 500; text-decoration: none;
  transition: all 0.3s ease-in-out; line-height: 120%;
}
.btn::before {
  content: ''; position: absolute; left: 32px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center / contain;
  transition: transform 0.3s;
}
.btn:hover { background: linear-gradient(180deg, var(--main) 0%, var(--main-soft) 100%); }
.btn:hover::before { transform: translateY(-50%) translateX(4px); }
.btn--outline { background: transparent; color: var(--main); }
.btn--outline:hover { background: var(--main); color: var(--bg-cream); }
.btn--lg { padding: 18px 48px 18px 72px; font-size: 19px; }

/* === Hauptseite-Match: Hero mit Foto-BG + dunklem Overlay === */
.hero {
  position: relative; min-height: 70vh;
  padding: 160px 24px 120px;
  background:
    linear-gradient(160deg, rgba(26,36,51,0.78) 0%, rgba(30,58,95,0.65) 50%, rgba(26,36,51,0.85) 100%),
    radial-gradient(circle at 25% 20%, rgba(184,153,104,0.18) 0%, transparent 55%),
    linear-gradient(160deg, var(--main, #1E3A5F) 0%, var(--text, #1A2433) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(184,153,104,0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(184,153,104,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 1;
}
.hero::before { content: none !important; }
.hero__inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 2; color: #fff; text-align: center; }
.hero__eyebrow { color: var(--highlight) !important; border-bottom-color: var(--highlight) !important; }
.hero h1 { color: #fff !important; }
.hero h1 em { color: var(--highlight) !important; }
.hero__sub { color: rgba(255,255,255,0.88) !important; margin-left: auto; margin-right: auto; }
.hero__cta { justify-content: center; }
.hero .btn--outline { color: #fff; border-color: #fff; }
.hero .btn--outline:hover { background: #fff; color: var(--main); }

/* Subpage Hero+Breadcrumb-Layout (visuell konsistent zur Startseite - transparenter Header über Hero) */
.container.breadcrumb {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  z-index: 5;
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  padding: 0 32px;
  text-align: center;
  letter-spacing: 0.5px;
}
.container.breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.container.breadcrumb a:hover { color: var(--highlight, #B89968); }
@media (max-width: 768px) { .container.breadcrumb { display: none; } }
.hero {
  margin-top: -135px;
  padding-top: 220px !important;
}
body { background: var(--bg-cream, #F8F4ED); }


/* ═══ BAMBERG-PILOT · Section-Styles ═══ */

/* Hero mit Lead-Form (Split-Layout wie Index) */
.hero__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero__copy { max-width: 100%; text-align: left; }
.hero__copy h1 { text-align: left; }
.hero__cta { justify-content: flex-start; }
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { text-align: center; }
  .hero__copy h1 { text-align: center; }
  .hero__cta { justify-content: center; }
}

/* Lead-Form im Hero */
.hero-form { background: rgba(255,255,255,0.97); border-radius: 14px; padding: 32px 28px; box-shadow: 0 12px 48px rgba(0,0,0,0.35); color: var(--text); }
.hero-form__title { font-family: var(--headline, 'Mosafin', serif); font-size: 1.4rem; margin-bottom: 8px; color: var(--text); }
.hero-form__sub { font-size: 0.92rem; color: var(--text-soft); margin-bottom: 22px; line-height: 1.5; }
.hero-form__sub strong { color: var(--main); }
.hero-form__field { margin-bottom: 16px; }
.hero-form__field label { display: block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 6px; color: var(--text); }
.hero-form__field input, .hero-form__field select { width: 100%; padding: 12px 14px; border: 1px solid var(--hairline, #DDD1B8); border-radius: 8px; font-size: 0.95rem; font-family: var(--mainFont); background: #FAFAF7; transition: border-color 0.2s; }
.hero-form__field input:focus, .hero-form__field select:focus { outline: none; border-color: var(--highlight); }
.hero-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-form__btn { width: 100%; padding: 16px; background: var(--highlight, #B89968); color: var(--text); border: none; border-radius: 50px; font-weight: 700; font-size: 1rem; letter-spacing: 0.5px; cursor: pointer; transition: all 0.25s; margin-top: 8px; }
.hero-form__btn:hover { background: #A38357; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.hero-form__hint { font-size: 0.78rem; color: var(--text-soft); margin-top: 12px; text-align: center; }

/* Stadtteile-Section */
.stadtteile { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; }
@media (max-width: 700px) { .stadtteile { grid-template-columns: 1fr; } }
.stadtteil-card { background: #fff; padding: 28px 26px; border-radius: 12px; border-left: 3px solid var(--highlight); box-shadow: 0 2px 12px rgba(0,0,0,0.04); transition: all 0.25s; }
.stadtteil-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.stadtteil-card__name { display: flex; align-items: center; gap: 8px; font-family: var(--headline); font-weight: 700; font-size: 1.15rem; color: var(--main); margin-bottom: 8px; }
.stadtteil-card__name::before { content: '◉'; color: var(--highlight); font-size: 1rem; }
.stadtteil-card p { color: var(--text-soft); line-height: 1.6; font-size: 0.95rem; margin: 0; }

/* Track-Record-Cases */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 980px; margin: 0 auto; }
@media (max-width: 800px) { .cases { grid-template-columns: 1fr; } }
.case-card { background: var(--text); color: rgba(255,255,255,0.9); padding: 32px 28px; border-radius: 12px; border-top: 3px solid var(--highlight); }
.case-card__label { color: var(--highlight); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 12px; }
.case-card h3 { font-family: var(--headline); color: #fff; font-size: 1.3rem; margin-bottom: 18px; line-height: 1.3; }
.case-card__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(184,153,104,0.25); }
.case-card__spec { font-size: 0.85rem; }
.case-card__spec b { display: block; color: var(--highlight); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; font-weight: 600; }
.case-card__highlight { font-size: 1rem; font-weight: 600; color: #fff; }
.case-card__highlight em { color: var(--highlight); font-style: normal; }

/* Schadens-Hinweis-Box */
.schadens-hint { max-width: 920px; margin: 0 auto; background: linear-gradient(135deg, rgba(184,153,104,0.08), rgba(184,153,104,0.02)); border: 1px solid rgba(184,153,104,0.3); border-radius: 14px; padding: 36px 32px; text-align: center; }
.schadens-hint h3 { font-family: var(--headline); color: var(--main); font-size: 1.4rem; margin-bottom: 10px; }
.schadens-hint p { color: var(--text-soft); margin-bottom: 22px; font-size: 1rem; }
.schadens-hint__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.schadens-hint__buttons .btn { background: #fff; border: 1px solid var(--main); color: var(--main); padding: 12px 28px; }
.schadens-hint__buttons .btn:hover { background: var(--main); color: #fff; }

/* FAQ-Section */
/* old .faq-item entfernt - siehe 05-pages.css für neues Pattern */

/* Jennifer-Section */
.jennifer-block { max-width: 980px; margin: 0 auto; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.08); display: grid; grid-template-columns: 320px 1fr; gap: 0; align-items: center; }
@media (max-width: 800px) { .jennifer-block { grid-template-columns: 1fr; } }
.jennifer-block__img { width: 100%; height: 100%; min-height: 360px; background-size: cover; background-position: center; background-color: var(--main); position: relative; }

.jennifer-block__content { padding: 40px 36px; }
.jennifer-block__label { color: var(--highlight); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; }
.jennifer-block__quote { font-family: var(--headline); font-size: 1.3rem; font-style: italic; color: var(--text); line-height: 1.45; margin-bottom: 18px; position: relative; }
.jennifer-block__quote::before { content: '\201E'; font-size: 2.4rem; line-height: 0.5; color: var(--highlight); margin-right: 4px; vertical-align: -0.3em; }
.jennifer-block__name { font-weight: 700; color: var(--main); font-size: 1.05rem; margin-bottom: 4px; }
.jennifer-block__role { color: var(--text-soft); font-size: 0.9rem; margin-bottom: 22px; }
.jennifer-block__contact { display: flex; gap: 18px; flex-wrap: wrap; }
.jennifer-block__contact a { color: var(--main); text-decoration: none; font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; }
.jennifer-block__contact a:hover { color: var(--highlight); }


.section { background: var(--bg-cream, #F8F4ED); padding: 80px 0; }
.section--alt { background: var(--bg-sand, #EBE4D6); }
.section .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section__header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section__header h2 { font-family: var(--headline, 'Mosafin', serif); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); color: var(--main, #1E3A5F); margin-bottom: 16px; }
.section__header p { color: var(--text-soft, #4A5468); font-size: 1.05rem; line-height: 1.6; }
.section__label { display: inline-block; color: var(--highlight, #B89968); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--highlight, #B89968); margin-bottom: 24px; }


/* Schadens-Pill im Hero */
.hero__schaden-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 18px; background: rgba(184,153,104,0.12); border: 1px solid rgba(184,153,104,0.5); border-radius: 100px; color: var(--highlight); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.hero__schaden-pill:hover { background: rgba(184,153,104,0.22); transform: translateX(2px); }
.hero__schaden-pill::after { content: '→'; transition: transform 0.2s; }
.hero__schaden-pill:hover::after { transform: translateX(3px); }

/* 2-Stufiges Form */
.hero-form__step { display: none; }
.hero-form__step.is-active { display: block; }
.hero-form__step-indicator { display: flex; gap: 6px; margin-bottom: 18px; }
.hero-form__step-dot { flex: 1; height: 3px; background: rgba(184,153,104,0.2); border-radius: 2px; transition: background 0.3s; }
.hero-form__step-dot.is-active { background: var(--highlight); }
.hero-form__back { background: transparent; border: none; color: var(--text-soft); font-size: 0.85rem; cursor: pointer; padding: 0; margin-top: 10px; }
.hero-form__back:hover { color: var(--main); }

/* Risk-Reverser-Box (Vertrauen, was passiert) */
.risk-reverser { max-width: 1200px; margin: -40px auto 60px; padding: 0 32px; position: relative; z-index: 5; }
.risk-reverser__inner { background: #fff; padding: 28px 32px; border-radius: 12px; border-top: 3px solid var(--highlight); box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
.risk-reverser__title { font-family: var(--headline); font-weight: 700; color: var(--main); font-size: 1.1rem; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.risk-reverser__title::before { content: '✓'; color: var(--highlight); font-size: 1.3rem; }
.risk-reverser__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 800px) { .risk-reverser__steps { grid-template-columns: repeat(2, 1fr); } }
.risk-reverser__step { display: flex; gap: 10px; align-items: flex-start; }
.risk-reverser__step-num { flex-shrink: 0; width: 24px; height: 24px; background: var(--highlight); color: var(--text); font-weight: 700; font-size: 0.85rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.risk-reverser__step-text { font-size: 0.88rem; line-height: 1.45; color: var(--text-soft); }
.risk-reverser__step-text b { color: var(--main); display: block; font-size: 0.92rem; }

/* Partner-Logo-Bar (Text-based, da keine echten Logo-Dateien) */
.partner-bar { background: var(--bg-cream); padding: 36px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.partner-bar__label { text-align: center; color: var(--text-soft); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600; }
.partner-bar__list { display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.partner-bar__item { font-family: var(--headline); font-weight: 700; color: var(--text-soft); font-size: 1.05rem; letter-spacing: 0.5px; opacity: 0.7; transition: opacity 0.2s; }
.partner-bar__item:hover { opacity: 1; color: var(--main); }
.partner-bar__item small { display: block; font-family: var(--mainFont); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.5px; color: var(--highlight); margin-top: 3px; }

/* WhatsApp-Sticky (rechts unten, prominent) */
.whatsapp-sticky { position: fixed; bottom: 24px; right: 24px; z-index: 95; background: #25D366; color: #fff; padding: 14px 22px 14px 56px; border-radius: 50px; box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45); text-decoration: none; font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; transition: all 0.25s; }
.whatsapp-sticky:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(37, 211, 102, 0.55); }
.whatsapp-sticky::before { content: ''; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.7-.9-2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.6.1c-.9-.4-1.7-.9-2.4-1.7-.7-.7-1.2-1.5-1.6-2.4-.1-.3 0-.4.2-.5.1-.1.3-.3.4-.5.1-.1.2-.3.2-.4.1-.2.1-.4 0-.5 0-.1-.5-1.3-.7-1.7-.2-.5-.4-.4-.6-.4h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3 4.7 4.2 1.6.7 2.3.7 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.7-.4zM12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.6 1.4 5.2L2 22l4.9-1.3c1.5.8 3.2 1.3 5.1 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; }
@media (max-width: 600px) { .whatsapp-sticky { bottom: 16px; right: 16px; padding: 12px 18px 12px 48px; font-size: 0.85rem; } .whatsapp-sticky::before { left: 14px; width: 22px; height: 22px; } }

/* Bamberg-Skyline-SVG (subtile Silhouette im Hero unten) */
.hero__skyline { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 90px; opacity: 0.22; pointer-events: none; }
.hero__skyline svg { width: 100%; height: 100%; }

/* Trust-Hinweis-Block (statt fake Testimonial) */
.trust-info { max-width: 920px; margin: 0 auto; background: linear-gradient(135deg, rgba(184,153,104,0.05), rgba(255,255,255,0.95)); border-radius: 14px; padding: 36px 32px; border-left: 4px solid var(--highlight); }
.trust-info__quote { font-family: var(--headline); font-size: 1.15rem; font-style: italic; color: var(--main); line-height: 1.55; margin-bottom: 16px; }
.trust-info__quote::before { content: '"'; font-size: 1.6rem; color: var(--highlight); margin-right: 4px; vertical-align: -0.2em; }
.trust-info__quote::after { content: '"'; color: var(--highlight); margin-left: 2px; }
.trust-info__source { font-size: 0.85rem; color: var(--text-soft); }
.trust-info__source b { color: var(--main); font-weight: 600; }




/* ─── extrahiert aus: Stadtseiten/coburg.html ─── */

/* Mosafin (Werthandel-Familie) */
@font-face { font-family: 'Mosafin'; src: url('../../Brand/Assets/Fonts/Mosafin-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Mosafin'; src: url('../../Brand/Assets/Fonts/Mosafin-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }

:root {
  --main: #1E3A5F; --main-soft: #2E4F7A;
  --text: #1A2433; --text-soft: #4A5468;
  --bg-cream: #F8F4ED; --bg-sand: #EBE4D6;
  --highlight: #B89968; --hairline-gold: rgba(184,153,104,0.4);
  --hairline: #DDD1B8;
  /* Alias-Tokens für CI-Konsistenz mit Hauptseite */
  --mainColor: var(--main);
  --mainColorLight: var(--main-soft);
  --secondColor: var(--text);
  --secondColorLight: var(--text-soft);
  --backgroundColor: var(--bg-cream);
  --greyVeryLight: var(--bg-sand);
  --whHighlight: var(--highlight);
  --whHairlineGold: var(--hairline-gold);
  --headline: 'Mosafin', 'Playfair Display', serif;
  --mainFont: 'Montserrat', sans-serif;

}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', sans-serif; background: var(--bg-cream); color: var(--text); line-height: 1.65; }
h1,h2,h3,h4 { font-family: 'Mosafin', 'Playfair Display', serif; line-height: 1.15; letter-spacing: -0.5px; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.btn { display: inline-flex; align-items: center; padding: 14px 28px; border-radius: 50px; background: var(--main); color: var(--bg-cream); text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.2s; border: none; cursor: pointer; }
.btn:hover { background: var(--main-soft); }
.btn--lg { padding: 18px 36px; font-size: 16px; }
.btn--outline { background: transparent; color: var(--main); border: 1.5px solid var(--main); }
.breadcrumb { padding: 20px 0 0; font-size: 13px; color: var(--text-soft); }
.breadcrumb a { color: var(--main); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.hero { background: linear-gradient(160deg, var(--bg-sand) 0%, var(--bg-cream) 100%); padding: 80px 0 140px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 80% 30%, rgba(184,153,104,0.18) 0%, transparent 55%); }
.hero__inner { max-width: 820px; position: relative; z-index: 2; }
.hero__eyebrow { display: inline-block; color: var(--main); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--highlight); margin-bottom: 28px; }
/* DEPRECATED - see 05-pages.css for unified .hero h1 */
/* DEPRECATED em - see 05-pages.css */
.hero__sub { font-size: 1.2rem; color: var(--text-soft); margin-bottom: 36px; max-width: 640px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.section { padding: 100px 0; }
.section--alt { background: var(--bg-sand); }
.section__header { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section__label { display: inline-block; color: var(--main); font-size: 11px; letter-spacing: 0.28em; font-weight: 700; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--highlight); margin-bottom: 20px; }
.section__header h2 { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem); margin-bottom: 14px; }
.section__header p { color: var(--text-soft); font-size: 1.05rem; }
.fakten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.fakt { background: #fff; border: 1px solid var(--hairline-gold); border-radius: 10px; padding: 28px; text-align: center; }
.fakt__num { font-family: 'Mosafin', 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: var(--main); line-height: 1; margin-bottom: 8px; }
.fakt__label { font-size: 11px; color: var(--text-soft); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 760px) { .fakten { grid-template-columns: repeat(2, 1fr); } }
.was { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.was-card { background: #fff; border: 1px solid var(--hairline); border-radius: 10px; padding: 28px; }
.was-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.was-card p { color: var(--text-soft); font-size: 0.93rem; }
@media (max-width: 900px) { .was { grid-template-columns: 1fr; } }
.cta-banner { background: var(--text); color: var(--bg-cream); padding: 80px 32px; text-align: center; }
.cta-banner h2 { color: var(--bg-cream); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin-bottom: 16px; font-weight: 500; }
.cta-banner p { color: rgba(248,244,237,0.85); margin-bottom: 32px; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-banner .btn { background: var(--bg-cream); color: var(--main); }
.cta-banner .btn:hover { background: var(--highlight); color: var(--text); }
.cta-banner + footer.foot { padding-top: 56px; border-top: 1px solid rgba(184,153,104,0.18); }
.cta-banner { padding-bottom: 88px; }

/* Hauptseite-Style Footer */
.foot { background: var(--text); color: rgba(248,244,237,0.72); padding: 72px 0 28px; }
.foot .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.foot__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px; padding-bottom: 48px; border-bottom: 1px solid rgba(184,153,104,0.18); }
.foot-logo { max-width: 220px; margin-bottom: 24px; filter: brightness(0) invert(1); display: block; }
.foot-desc { font-size: 0.92rem; line-height: 1.65; margin-bottom: 20px; max-width: 380px; }
.foot-addr { font-size: 0.88rem; line-height: 1.55; color: rgba(248,244,237,0.6); }
.foot-addr a { color: var(--highlight); text-decoration: none; }
.foot-addr a:hover { color: #fff; }
.foot__col h4 { color: #fff; font-family: 'Mosafin', 'Playfair Display', serif; font-size: 1rem; font-weight: 700; margin-bottom: 18px; letter-spacing: 0.5px; }
.foot__col ul { list-style: none; padding: 0; margin: 0; }
.foot__col li { padding: 5px 0; }
.foot__col a { color: rgba(248,244,237,0.7); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.foot__col a:hover { color: var(--highlight); }
.foot__bottom { padding-top: 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; }
.foot__legal a { color: rgba(248,244,237,0.55); text-decoration: none; }
.foot__legal a:hover { color: var(--highlight); }
.foot__copy { color: rgba(248,244,237,0.5); }
@media (max-width: 900px) { .foot__top { grid-template-columns: 1fr; gap: 40px; } .foot-logo { max-width: 180px; } }
.foot__row .foot-logo, .foot__row img { filter: brightness(0) invert(1); max-width: 200px; }
.foot__row { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.foot__row a { color: rgba(248,244,237,0.7); text-decoration: none; }
.foot__row a:hover { color: var(--highlight); }
@media (max-width: 768px) { .head__nav { display: none; } .section { padding: 64px 0; } }

/* === Hauptseite-Match: Container-Breite === */
.container { max-width: 1504px; width: 92%; padding: 0; }
@media (max-width: 1100px) { .container { width: 94%; } }

/* === Hauptseite-Match: Button im Bernert-Style === */
.btn {
  display: inline-block; position: relative;
  border: 1px solid var(--main);
  cursor: pointer; padding: 14px 40px 14px 64px;
  color: var(--bg-cream); background: linear-gradient(180deg, var(--main-soft) 0%, var(--main) 100%);
  box-shadow: 0 -4px 14px 0 rgba(0,0,0,0.25) inset;
  border-radius: 50px; font-family: 'Mosafin', 'Playfair Display', serif;
  font-size: 17px; font-weight: 500; text-decoration: none;
  transition: all 0.3s ease-in-out; line-height: 120%;
}
.btn::before {
  content: ''; position: absolute; left: 32px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center / contain;
  transition: transform 0.3s;
}
.btn:hover { background: linear-gradient(180deg, var(--main) 0%, var(--main-soft) 100%); }
.btn:hover::before { transform: translateY(-50%) translateX(4px); }
.btn--outline { background: transparent; color: var(--main); }
.btn--outline:hover { background: var(--main); color: var(--bg-cream); }
.btn--lg { padding: 18px 48px 18px 72px; font-size: 19px; }

/* === Hauptseite-Match: Hero mit Foto-BG + dunklem Overlay === */
.hero {
  position: relative; min-height: 70vh;
  padding: 160px 24px 120px;
  background:
    linear-gradient(160deg, rgba(26,36,51,0.78) 0%, rgba(30,58,95,0.65) 50%, rgba(26,36,51,0.85) 100%),
    radial-gradient(circle at 25% 20%, rgba(184,153,104,0.18) 0%, transparent 55%),
    linear-gradient(160deg, var(--main, #1E3A5F) 0%, var(--text, #1A2433) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(184,153,104,0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(184,153,104,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 1;
}
.hero::before { content: none !important; }
.hero__inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 2; color: #fff; text-align: center; }
.hero__eyebrow { color: var(--highlight) !important; border-bottom-color: var(--highlight) !important; }
.hero h1 { color: #fff !important; }
.hero h1 em { color: var(--highlight) !important; }
.hero__sub { color: rgba(255,255,255,0.88) !important; margin-left: auto; margin-right: auto; }
.hero__cta { justify-content: center; }
.hero .btn--outline { color: #fff; border-color: #fff; }
.hero .btn--outline:hover { background: #fff; color: var(--main); }

/* Subpage Hero+Breadcrumb-Layout (visuell konsistent zur Startseite - transparenter Header über Hero) */
.container.breadcrumb {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  z-index: 5;
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  padding: 0 32px;
  text-align: center;
  letter-spacing: 0.5px;
}
.container.breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.container.breadcrumb a:hover { color: var(--highlight, #B89968); }
@media (max-width: 768px) { .container.breadcrumb { display: none; } }
.hero {
  margin-top: -135px;
  padding-top: 220px !important;
}
body { background: var(--bg-cream, #F8F4ED); }


/* ═══ BAMBERG-PILOT · Section-Styles ═══ */

/* Hero mit Lead-Form (Split-Layout wie Index) */
.hero__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero__copy { max-width: 100%; text-align: left; }
.hero__copy h1 { text-align: left; }
.hero__cta { justify-content: flex-start; }
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { text-align: center; }
  .hero__copy h1 { text-align: center; }
  .hero__cta { justify-content: center; }
}

/* Lead-Form im Hero */
.hero-form { background: rgba(255,255,255,0.97); border-radius: 14px; padding: 32px 28px; box-shadow: 0 12px 48px rgba(0,0,0,0.35); color: var(--text); }
.hero-form__title { font-family: var(--headline, 'Mosafin', serif); font-size: 1.4rem; margin-bottom: 8px; color: var(--text); }
.hero-form__sub { font-size: 0.92rem; color: var(--text-soft); margin-bottom: 22px; line-height: 1.5; }
.hero-form__sub strong { color: var(--main); }
.hero-form__field { margin-bottom: 16px; }
.hero-form__field label { display: block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 6px; color: var(--text); }
.hero-form__field input, .hero-form__field select { width: 100%; padding: 12px 14px; border: 1px solid var(--hairline, #DDD1B8); border-radius: 8px; font-size: 0.95rem; font-family: var(--mainFont); background: #FAFAF7; transition: border-color 0.2s; }
.hero-form__field input:focus, .hero-form__field select:focus { outline: none; border-color: var(--highlight); }
.hero-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-form__btn { width: 100%; padding: 16px; background: var(--highlight, #B89968); color: var(--text); border: none; border-radius: 50px; font-weight: 700; font-size: 1rem; letter-spacing: 0.5px; cursor: pointer; transition: all 0.25s; margin-top: 8px; }
.hero-form__btn:hover { background: #A38357; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.hero-form__hint { font-size: 0.78rem; color: var(--text-soft); margin-top: 12px; text-align: center; }

/* Stadtteile-Section */
.stadtteile { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; }
@media (max-width: 700px) { .stadtteile { grid-template-columns: 1fr; } }
.stadtteil-card { background: #fff; padding: 28px 26px; border-radius: 12px; border-left: 3px solid var(--highlight); box-shadow: 0 2px 12px rgba(0,0,0,0.04); transition: all 0.25s; }
.stadtteil-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.stadtteil-card__name { display: flex; align-items: center; gap: 8px; font-family: var(--headline); font-weight: 700; font-size: 1.15rem; color: var(--main); margin-bottom: 8px; }
.stadtteil-card__name::before { content: '◉'; color: var(--highlight); font-size: 1rem; }
.stadtteil-card p { color: var(--text-soft); line-height: 1.6; font-size: 0.95rem; margin: 0; }

/* Track-Record-Cases */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 980px; margin: 0 auto; }
@media (max-width: 800px) { .cases { grid-template-columns: 1fr; } }
.case-card { background: var(--text); color: rgba(255,255,255,0.9); padding: 32px 28px; border-radius: 12px; border-top: 3px solid var(--highlight); }
.case-card__label { color: var(--highlight); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 12px; }
.case-card h3 { font-family: var(--headline); color: #fff; font-size: 1.3rem; margin-bottom: 18px; line-height: 1.3; }
.case-card__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(184,153,104,0.25); }
.case-card__spec { font-size: 0.85rem; }
.case-card__spec b { display: block; color: var(--highlight); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; font-weight: 600; }
.case-card__highlight { font-size: 1rem; font-weight: 600; color: #fff; }
.case-card__highlight em { color: var(--highlight); font-style: normal; }

/* Schadens-Hinweis-Box */
.schadens-hint { max-width: 920px; margin: 0 auto; background: linear-gradient(135deg, rgba(184,153,104,0.08), rgba(184,153,104,0.02)); border: 1px solid rgba(184,153,104,0.3); border-radius: 14px; padding: 36px 32px; text-align: center; }
.schadens-hint h3 { font-family: var(--headline); color: var(--main); font-size: 1.4rem; margin-bottom: 10px; }
.schadens-hint p { color: var(--text-soft); margin-bottom: 22px; font-size: 1rem; }
.schadens-hint__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.schadens-hint__buttons .btn { background: #fff; border: 1px solid var(--main); color: var(--main); padding: 12px 28px; }
.schadens-hint__buttons .btn:hover { background: var(--main); color: #fff; }

/* FAQ-Section */
/* old .faq-item entfernt - siehe 05-pages.css für neues Pattern */

/* Jennifer-Section */
.jennifer-block { max-width: 980px; margin: 0 auto; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.08); display: grid; grid-template-columns: 320px 1fr; gap: 0; align-items: center; }
@media (max-width: 800px) { .jennifer-block { grid-template-columns: 1fr; } }
.jennifer-block__img { width: 100%; height: 100%; min-height: 360px; background-size: cover; background-position: center; background-color: var(--main); position: relative; }

.jennifer-block__content { padding: 40px 36px; }
.jennifer-block__label { color: var(--highlight); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; }
.jennifer-block__quote { font-family: var(--headline); font-size: 1.3rem; font-style: italic; color: var(--text); line-height: 1.45; margin-bottom: 18px; position: relative; }
.jennifer-block__quote::before { content: '\201E'; font-size: 2.4rem; line-height: 0.5; color: var(--highlight); margin-right: 4px; vertical-align: -0.3em; }
.jennifer-block__name { font-weight: 700; color: var(--main); font-size: 1.05rem; margin-bottom: 4px; }
.jennifer-block__role { color: var(--text-soft); font-size: 0.9rem; margin-bottom: 22px; }
.jennifer-block__contact { display: flex; gap: 18px; flex-wrap: wrap; }
.jennifer-block__contact a { color: var(--main); text-decoration: none; font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; }
.jennifer-block__contact a:hover { color: var(--highlight); }


.section { background: var(--bg-cream, #F8F4ED); padding: 80px 0; }
.section--alt { background: var(--bg-sand, #EBE4D6); }
.section .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section__header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section__header h2 { font-family: var(--headline, 'Mosafin', serif); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); color: var(--main, #1E3A5F); margin-bottom: 16px; }
.section__header p { color: var(--text-soft, #4A5468); font-size: 1.05rem; line-height: 1.6; }
.section__label { display: inline-block; color: var(--highlight, #B89968); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--highlight, #B89968); margin-bottom: 24px; }


/* Schadens-Pill im Hero */
.hero__schaden-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 18px; background: rgba(184,153,104,0.12); border: 1px solid rgba(184,153,104,0.5); border-radius: 100px; color: var(--highlight); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.hero__schaden-pill:hover { background: rgba(184,153,104,0.22); transform: translateX(2px); }
.hero__schaden-pill::after { content: '→'; transition: transform 0.2s; }
.hero__schaden-pill:hover::after { transform: translateX(3px); }

/* 2-Stufiges Form */
.hero-form__step { display: none; }
.hero-form__step.is-active { display: block; }
.hero-form__step-indicator { display: flex; gap: 6px; margin-bottom: 18px; }
.hero-form__step-dot { flex: 1; height: 3px; background: rgba(184,153,104,0.2); border-radius: 2px; transition: background 0.3s; }
.hero-form__step-dot.is-active { background: var(--highlight); }
.hero-form__back { background: transparent; border: none; color: var(--text-soft); font-size: 0.85rem; cursor: pointer; padding: 0; margin-top: 10px; }
.hero-form__back:hover { color: var(--main); }

/* Risk-Reverser-Box (Vertrauen, was passiert) */
.risk-reverser { max-width: 1200px; margin: -40px auto 60px; padding: 0 32px; position: relative; z-index: 5; }
.risk-reverser__inner { background: #fff; padding: 28px 32px; border-radius: 12px; border-top: 3px solid var(--highlight); box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
.risk-reverser__title { font-family: var(--headline); font-weight: 700; color: var(--main); font-size: 1.1rem; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.risk-reverser__title::before { content: '✓'; color: var(--highlight); font-size: 1.3rem; }
.risk-reverser__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 800px) { .risk-reverser__steps { grid-template-columns: repeat(2, 1fr); } }
.risk-reverser__step { display: flex; gap: 10px; align-items: flex-start; }
.risk-reverser__step-num { flex-shrink: 0; width: 24px; height: 24px; background: var(--highlight); color: var(--text); font-weight: 700; font-size: 0.85rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.risk-reverser__step-text { font-size: 0.88rem; line-height: 1.45; color: var(--text-soft); }
.risk-reverser__step-text b { color: var(--main); display: block; font-size: 0.92rem; }

/* Partner-Logo-Bar (Text-based, da keine echten Logo-Dateien) */
.partner-bar { background: var(--bg-cream); padding: 36px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.partner-bar__label { text-align: center; color: var(--text-soft); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600; }
.partner-bar__list { display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.partner-bar__item { font-family: var(--headline); font-weight: 700; color: var(--text-soft); font-size: 1.05rem; letter-spacing: 0.5px; opacity: 0.7; transition: opacity 0.2s; }
.partner-bar__item:hover { opacity: 1; color: var(--main); }
.partner-bar__item small { display: block; font-family: var(--mainFont); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.5px; color: var(--highlight); margin-top: 3px; }

/* WhatsApp-Sticky (rechts unten, prominent) */
.whatsapp-sticky { position: fixed; bottom: 24px; right: 24px; z-index: 95; background: #25D366; color: #fff; padding: 14px 22px 14px 56px; border-radius: 50px; box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45); text-decoration: none; font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; transition: all 0.25s; }
.whatsapp-sticky:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(37, 211, 102, 0.55); }
.whatsapp-sticky::before { content: ''; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.7-.9-2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.6.1c-.9-.4-1.7-.9-2.4-1.7-.7-.7-1.2-1.5-1.6-2.4-.1-.3 0-.4.2-.5.1-.1.3-.3.4-.5.1-.1.2-.3.2-.4.1-.2.1-.4 0-.5 0-.1-.5-1.3-.7-1.7-.2-.5-.4-.4-.6-.4h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3 4.7 4.2 1.6.7 2.3.7 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.7-.4zM12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.6 1.4 5.2L2 22l4.9-1.3c1.5.8 3.2 1.3 5.1 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; }
@media (max-width: 600px) { .whatsapp-sticky { bottom: 16px; right: 16px; padding: 12px 18px 12px 48px; font-size: 0.85rem; } .whatsapp-sticky::before { left: 14px; width: 22px; height: 22px; } }

/* Bamberg-Skyline-SVG (subtile Silhouette im Hero unten) */
.hero__skyline { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 90px; opacity: 0.22; pointer-events: none; }
.hero__skyline svg { width: 100%; height: 100%; }

/* Trust-Hinweis-Block (statt fake Testimonial) */
.trust-info { max-width: 920px; margin: 0 auto; background: linear-gradient(135deg, rgba(184,153,104,0.05), rgba(255,255,255,0.95)); border-radius: 14px; padding: 36px 32px; border-left: 4px solid var(--highlight); }
.trust-info__quote { font-family: var(--headline); font-size: 1.15rem; font-style: italic; color: var(--main); line-height: 1.55; margin-bottom: 16px; }
.trust-info__quote::before { content: '"'; font-size: 1.6rem; color: var(--highlight); margin-right: 4px; vertical-align: -0.2em; }
.trust-info__quote::after { content: '"'; color: var(--highlight); margin-left: 2px; }
.trust-info__source { font-size: 0.85rem; color: var(--text-soft); }
.trust-info__source b { color: var(--main); font-weight: 600; }




/* ─── extrahiert aus: Stadtseiten/bayreuth.html ─── */

/* Mosafin (Werthandel-Familie) */
@font-face { font-family: 'Mosafin'; src: url('../../Brand/Assets/Fonts/Mosafin-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Mosafin'; src: url('../../Brand/Assets/Fonts/Mosafin-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }

:root {
  --main: #1E3A5F; --main-soft: #2E4F7A;
  --text: #1A2433; --text-soft: #4A5468;
  --bg-cream: #F8F4ED; --bg-sand: #EBE4D6;
  --highlight: #B89968; --hairline-gold: rgba(184,153,104,0.4);
  --hairline: #DDD1B8;
  /* Alias-Tokens für CI-Konsistenz mit Hauptseite */
  --mainColor: var(--main);
  --mainColorLight: var(--main-soft);
  --secondColor: var(--text);
  --secondColorLight: var(--text-soft);
  --backgroundColor: var(--bg-cream);
  --greyVeryLight: var(--bg-sand);
  --whHighlight: var(--highlight);
  --whHairlineGold: var(--hairline-gold);
  --headline: 'Mosafin', 'Playfair Display', serif;
  --mainFont: 'Montserrat', sans-serif;

}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Montserrat', sans-serif; background: var(--bg-cream); color: var(--text); line-height: 1.65; }
h1,h2,h3,h4 { font-family: 'Mosafin', 'Playfair Display', serif; line-height: 1.15; letter-spacing: -0.5px; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.btn { display: inline-flex; align-items: center; padding: 14px 28px; border-radius: 50px; background: var(--main); color: var(--bg-cream); text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.2s; border: none; cursor: pointer; }
.btn:hover { background: var(--main-soft); }
.btn--lg { padding: 18px 36px; font-size: 16px; }
.btn--outline { background: transparent; color: var(--main); border: 1.5px solid var(--main); }
.breadcrumb { padding: 20px 0 0; font-size: 13px; color: var(--text-soft); }
.breadcrumb a { color: var(--main); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.hero { background: linear-gradient(160deg, var(--bg-sand) 0%, var(--bg-cream) 100%); padding: 80px 0 140px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 80% 30%, rgba(184,153,104,0.18) 0%, transparent 55%); }
.hero__inner { max-width: 820px; position: relative; z-index: 2; }
.hero__eyebrow { display: inline-block; color: var(--main); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--highlight); margin-bottom: 28px; }
/* DEPRECATED - see 05-pages.css for unified .hero h1 */
/* DEPRECATED em - see 05-pages.css */
.hero__sub { font-size: 1.2rem; color: var(--text-soft); margin-bottom: 36px; max-width: 640px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.section { padding: 100px 0; }
.section--alt { background: var(--bg-sand); }
.section__header { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section__label { display: inline-block; color: var(--main); font-size: 11px; letter-spacing: 0.28em; font-weight: 700; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--highlight); margin-bottom: 20px; }
.section__header h2 { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem); margin-bottom: 14px; }
.section__header p { color: var(--text-soft); font-size: 1.05rem; }
.fakten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.fakt { background: #fff; border: 1px solid var(--hairline-gold); border-radius: 10px; padding: 28px; text-align: center; }
.fakt__num { font-family: 'Mosafin', 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: var(--main); line-height: 1; margin-bottom: 8px; }
.fakt__label { font-size: 11px; color: var(--text-soft); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 760px) { .fakten { grid-template-columns: repeat(2, 1fr); } }
.was { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.was-card { background: #fff; border: 1px solid var(--hairline); border-radius: 10px; padding: 28px; }
.was-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.was-card p { color: var(--text-soft); font-size: 0.93rem; }
@media (max-width: 900px) { .was { grid-template-columns: 1fr; } }
.cta-banner { background: var(--text); color: var(--bg-cream); padding: 80px 32px; text-align: center; }
.cta-banner h2 { color: var(--bg-cream); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin-bottom: 16px; font-weight: 500; }
.cta-banner p { color: rgba(248,244,237,0.85); margin-bottom: 32px; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-banner .btn { background: var(--bg-cream); color: var(--main); }
.cta-banner .btn:hover { background: var(--highlight); color: var(--text); }
.cta-banner + footer.foot { padding-top: 56px; border-top: 1px solid rgba(184,153,104,0.18); }
.cta-banner { padding-bottom: 88px; }

/* Hauptseite-Style Footer */
.foot { background: var(--text); color: rgba(248,244,237,0.72); padding: 72px 0 28px; }
.foot .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.foot__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px; padding-bottom: 48px; border-bottom: 1px solid rgba(184,153,104,0.18); }
.foot-logo { max-width: 220px; margin-bottom: 24px; filter: brightness(0) invert(1); display: block; }
.foot-desc { font-size: 0.92rem; line-height: 1.65; margin-bottom: 20px; max-width: 380px; }
.foot-addr { font-size: 0.88rem; line-height: 1.55; color: rgba(248,244,237,0.6); }
.foot-addr a { color: var(--highlight); text-decoration: none; }
.foot-addr a:hover { color: #fff; }
.foot__col h4 { color: #fff; font-family: 'Mosafin', 'Playfair Display', serif; font-size: 1rem; font-weight: 700; margin-bottom: 18px; letter-spacing: 0.5px; }
.foot__col ul { list-style: none; padding: 0; margin: 0; }
.foot__col li { padding: 5px 0; }
.foot__col a { color: rgba(248,244,237,0.7); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.foot__col a:hover { color: var(--highlight); }
.foot__bottom { padding-top: 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; }
.foot__legal a { color: rgba(248,244,237,0.55); text-decoration: none; }
.foot__legal a:hover { color: var(--highlight); }
.foot__copy { color: rgba(248,244,237,0.5); }
@media (max-width: 900px) { .foot__top { grid-template-columns: 1fr; gap: 40px; } .foot-logo { max-width: 180px; } }
.foot__row .foot-logo, .foot__row img { filter: brightness(0) invert(1); max-width: 200px; }
.foot__row { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.foot__row a { color: rgba(248,244,237,0.7); text-decoration: none; }
.foot__row a:hover { color: var(--highlight); }
@media (max-width: 768px) { .head__nav { display: none; } .section { padding: 64px 0; } }

/* === Hauptseite-Match: Container-Breite === */
.container { max-width: 1504px; width: 92%; padding: 0; }
@media (max-width: 1100px) { .container { width: 94%; } }

/* === Hauptseite-Match: Button im Bernert-Style === */
.btn {
  display: inline-block; position: relative;
  border: 1px solid var(--main);
  cursor: pointer; padding: 14px 40px 14px 64px;
  color: var(--bg-cream); background: linear-gradient(180deg, var(--main-soft) 0%, var(--main) 100%);
  box-shadow: 0 -4px 14px 0 rgba(0,0,0,0.25) inset;
  border-radius: 50px; font-family: 'Mosafin', 'Playfair Display', serif;
  font-size: 17px; font-weight: 500; text-decoration: none;
  transition: all 0.3s ease-in-out; line-height: 120%;
}
.btn::before {
  content: ''; position: absolute; left: 32px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") no-repeat center / contain;
  transition: transform 0.3s;
}
.btn:hover { background: linear-gradient(180deg, var(--main) 0%, var(--main-soft) 100%); }
.btn:hover::before { transform: translateY(-50%) translateX(4px); }
.btn--outline { background: transparent; color: var(--main); }
.btn--outline:hover { background: var(--main); color: var(--bg-cream); }
.btn--lg { padding: 18px 48px 18px 72px; font-size: 19px; }

/* === Hauptseite-Match: Hero mit Foto-BG + dunklem Overlay === */
.hero {
  position: relative; min-height: 70vh;
  padding: 160px 24px 120px;
  background:
    linear-gradient(160deg, rgba(26,36,51,0.78) 0%, rgba(30,58,95,0.65) 50%, rgba(26,36,51,0.85) 100%),
    radial-gradient(circle at 25% 20%, rgba(184,153,104,0.18) 0%, transparent 55%),
    linear-gradient(160deg, var(--main, #1E3A5F) 0%, var(--text, #1A2433) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(184,153,104,0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(184,153,104,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 1;
}
.hero::before { content: none !important; }
.hero__inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 2; color: #fff; text-align: center; }
.hero__eyebrow { color: var(--highlight) !important; border-bottom-color: var(--highlight) !important; }
.hero h1 { color: #fff !important; }
.hero h1 em { color: var(--highlight) !important; }
.hero__sub { color: rgba(255,255,255,0.88) !important; margin-left: auto; margin-right: auto; }
.hero__cta { justify-content: center; }
.hero .btn--outline { color: #fff; border-color: #fff; }
.hero .btn--outline:hover { background: #fff; color: var(--main); }

/* Subpage Hero+Breadcrumb-Layout (visuell konsistent zur Startseite - transparenter Header über Hero) */
.container.breadcrumb {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  z-index: 5;
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  padding: 0 32px;
  text-align: center;
  letter-spacing: 0.5px;
}
.container.breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.container.breadcrumb a:hover { color: var(--highlight, #B89968); }
@media (max-width: 768px) { .container.breadcrumb { display: none; } }
.hero {
  margin-top: -135px;
  padding-top: 220px !important;
}
body { background: var(--bg-cream, #F8F4ED); }


/* ═══ BAMBERG-PILOT · Section-Styles ═══ */

/* Hero mit Lead-Form (Split-Layout wie Index) */
.hero__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hero__copy { max-width: 100%; text-align: left; }
.hero__copy h1 { text-align: left; }
.hero__cta { justify-content: flex-start; }
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { text-align: center; }
  .hero__copy h1 { text-align: center; }
  .hero__cta { justify-content: center; }
}

/* Lead-Form im Hero */
.hero-form { background: rgba(255,255,255,0.97); border-radius: 14px; padding: 32px 28px; box-shadow: 0 12px 48px rgba(0,0,0,0.35); color: var(--text); }
.hero-form__title { font-family: var(--headline, 'Mosafin', serif); font-size: 1.4rem; margin-bottom: 8px; color: var(--text); }
.hero-form__sub { font-size: 0.92rem; color: var(--text-soft); margin-bottom: 22px; line-height: 1.5; }
.hero-form__sub strong { color: var(--main); }
.hero-form__field { margin-bottom: 16px; }
.hero-form__field label { display: block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 6px; color: var(--text); }
.hero-form__field input, .hero-form__field select { width: 100%; padding: 12px 14px; border: 1px solid var(--hairline, #DDD1B8); border-radius: 8px; font-size: 0.95rem; font-family: var(--mainFont); background: #FAFAF7; transition: border-color 0.2s; }
.hero-form__field input:focus, .hero-form__field select:focus { outline: none; border-color: var(--highlight); }
.hero-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-form__btn { width: 100%; padding: 16px; background: var(--highlight, #B89968); color: var(--text); border: none; border-radius: 50px; font-weight: 700; font-size: 1rem; letter-spacing: 0.5px; cursor: pointer; transition: all 0.25s; margin-top: 8px; }
.hero-form__btn:hover { background: #A38357; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.hero-form__hint { font-size: 0.78rem; color: var(--text-soft); margin-top: 12px; text-align: center; }

/* Stadtteile-Section */
.stadtteile { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 980px; margin: 0 auto; }
@media (max-width: 700px) { .stadtteile { grid-template-columns: 1fr; } }
.stadtteil-card { background: #fff; padding: 28px 26px; border-radius: 12px; border-left: 3px solid var(--highlight); box-shadow: 0 2px 12px rgba(0,0,0,0.04); transition: all 0.25s; }
.stadtteil-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.stadtteil-card__name { display: flex; align-items: center; gap: 8px; font-family: var(--headline); font-weight: 700; font-size: 1.15rem; color: var(--main); margin-bottom: 8px; }
.stadtteil-card__name::before { content: '◉'; color: var(--highlight); font-size: 1rem; }
.stadtteil-card p { color: var(--text-soft); line-height: 1.6; font-size: 0.95rem; margin: 0; }

/* Track-Record-Cases */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 980px; margin: 0 auto; }
@media (max-width: 800px) { .cases { grid-template-columns: 1fr; } }
.case-card { background: var(--text); color: rgba(255,255,255,0.9); padding: 32px 28px; border-radius: 12px; border-top: 3px solid var(--highlight); }
.case-card__label { color: var(--highlight); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 12px; }
.case-card h3 { font-family: var(--headline); color: #fff; font-size: 1.3rem; margin-bottom: 18px; line-height: 1.3; }
.case-card__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(184,153,104,0.25); }
.case-card__spec { font-size: 0.85rem; }
.case-card__spec b { display: block; color: var(--highlight); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 3px; font-weight: 600; }
.case-card__highlight { font-size: 1rem; font-weight: 600; color: #fff; }
.case-card__highlight em { color: var(--highlight); font-style: normal; }

/* Schadens-Hinweis-Box */
.schadens-hint { max-width: 920px; margin: 0 auto; background: linear-gradient(135deg, rgba(184,153,104,0.08), rgba(184,153,104,0.02)); border: 1px solid rgba(184,153,104,0.3); border-radius: 14px; padding: 36px 32px; text-align: center; }
.schadens-hint h3 { font-family: var(--headline); color: var(--main); font-size: 1.4rem; margin-bottom: 10px; }
.schadens-hint p { color: var(--text-soft); margin-bottom: 22px; font-size: 1rem; }
.schadens-hint__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.schadens-hint__buttons .btn { background: #fff; border: 1px solid var(--main); color: var(--main); padding: 12px 28px; }
.schadens-hint__buttons .btn:hover { background: var(--main); color: #fff; }

/* FAQ-Section */
/* old .faq-item entfernt - siehe 05-pages.css für neues Pattern */

/* Jennifer-Section */
.jennifer-block { max-width: 980px; margin: 0 auto; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.08); display: grid; grid-template-columns: 320px 1fr; gap: 0; align-items: center; }
@media (max-width: 800px) { .jennifer-block { grid-template-columns: 1fr; } }
.jennifer-block__img { width: 100%; height: 100%; min-height: 360px; background-size: cover; background-position: center; background-color: var(--main); position: relative; }

.jennifer-block__content { padding: 40px 36px; }
.jennifer-block__label { color: var(--highlight); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; }
.jennifer-block__quote { font-family: var(--headline); font-size: 1.3rem; font-style: italic; color: var(--text); line-height: 1.45; margin-bottom: 18px; position: relative; }
.jennifer-block__quote::before { content: '\201E'; font-size: 2.4rem; line-height: 0.5; color: var(--highlight); margin-right: 4px; vertical-align: -0.3em; }
.jennifer-block__name { font-weight: 700; color: var(--main); font-size: 1.05rem; margin-bottom: 4px; }
.jennifer-block__role { color: var(--text-soft); font-size: 0.9rem; margin-bottom: 22px; }
.jennifer-block__contact { display: flex; gap: 18px; flex-wrap: wrap; }
.jennifer-block__contact a { color: var(--main); text-decoration: none; font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 6px; }
.jennifer-block__contact a:hover { color: var(--highlight); }


.section { background: var(--bg-cream, #F8F4ED); padding: 80px 0; }
.section--alt { background: var(--bg-sand, #EBE4D6); }
.section .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section__header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section__header h2 { font-family: var(--headline, 'Mosafin', serif); font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); color: var(--main, #1E3A5F); margin-bottom: 16px; }
.section__header p { color: var(--text-soft, #4A5468); font-size: 1.05rem; line-height: 1.6; }
.section__label { display: inline-block; color: var(--highlight, #B89968); font-size: 12px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--highlight, #B89968); margin-bottom: 24px; }


/* Schadens-Pill im Hero */
.hero__schaden-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 18px; background: rgba(184,153,104,0.12); border: 1px solid rgba(184,153,104,0.5); border-radius: 100px; color: var(--highlight); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.hero__schaden-pill:hover { background: rgba(184,153,104,0.22); transform: translateX(2px); }
.hero__schaden-pill::after { content: '→'; transition: transform 0.2s; }
.hero__schaden-pill:hover::after { transform: translateX(3px); }

/* 2-Stufiges Form */
.hero-form__step { display: none; }
.hero-form__step.is-active { display: block; }
.hero-form__step-indicator { display: flex; gap: 6px; margin-bottom: 18px; }
.hero-form__step-dot { flex: 1; height: 3px; background: rgba(184,153,104,0.2); border-radius: 2px; transition: background 0.3s; }
.hero-form__step-dot.is-active { background: var(--highlight); }
.hero-form__back { background: transparent; border: none; color: var(--text-soft); font-size: 0.85rem; cursor: pointer; padding: 0; margin-top: 10px; }
.hero-form__back:hover { color: var(--main); }

/* Risk-Reverser-Box (Vertrauen, was passiert) */
.risk-reverser { max-width: 1200px; margin: -40px auto 60px; padding: 0 32px; position: relative; z-index: 5; }
.risk-reverser__inner { background: #fff; padding: 28px 32px; border-radius: 12px; border-top: 3px solid var(--highlight); box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
.risk-reverser__title { font-family: var(--headline); font-weight: 700; color: var(--main); font-size: 1.1rem; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.risk-reverser__title::before { content: '✓'; color: var(--highlight); font-size: 1.3rem; }
.risk-reverser__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 800px) { .risk-reverser__steps { grid-template-columns: repeat(2, 1fr); } }
.risk-reverser__step { display: flex; gap: 10px; align-items: flex-start; }
.risk-reverser__step-num { flex-shrink: 0; width: 24px; height: 24px; background: var(--highlight); color: var(--text); font-weight: 700; font-size: 0.85rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.risk-reverser__step-text { font-size: 0.88rem; line-height: 1.45; color: var(--text-soft); }
.risk-reverser__step-text b { color: var(--main); display: block; font-size: 0.92rem; }

/* Partner-Logo-Bar (Text-based, da keine echten Logo-Dateien) */
.partner-bar { background: var(--bg-cream); padding: 36px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.partner-bar__label { text-align: center; color: var(--text-soft); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600; }
.partner-bar__list { display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.partner-bar__item { font-family: var(--headline); font-weight: 700; color: var(--text-soft); font-size: 1.05rem; letter-spacing: 0.5px; opacity: 0.7; transition: opacity 0.2s; }
.partner-bar__item:hover { opacity: 1; color: var(--main); }
.partner-bar__item small { display: block; font-family: var(--mainFont); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.5px; color: var(--highlight); margin-top: 3px; }

/* WhatsApp-Sticky (rechts unten, prominent) */
.whatsapp-sticky { position: fixed; bottom: 24px; right: 24px; z-index: 95; background: #25D366; color: #fff; padding: 14px 22px 14px 56px; border-radius: 50px; box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45); text-decoration: none; font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; transition: all 0.25s; }
.whatsapp-sticky:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(37, 211, 102, 0.55); }
.whatsapp-sticky::before { content: ''; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.7-.9-2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.6.1c-.9-.4-1.7-.9-2.4-1.7-.7-.7-1.2-1.5-1.6-2.4-.1-.3 0-.4.2-.5.1-.1.3-.3.4-.5.1-.1.2-.3.2-.4.1-.2.1-.4 0-.5 0-.1-.5-1.3-.7-1.7-.2-.5-.4-.4-.6-.4h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3 4.7 4.2 1.6.7 2.3.7 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.7-.4zM12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.6 1.4 5.2L2 22l4.9-1.3c1.5.8 3.2 1.3 5.1 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; }
@media (max-width: 600px) { .whatsapp-sticky { bottom: 16px; right: 16px; padding: 12px 18px 12px 48px; font-size: 0.85rem; } .whatsapp-sticky::before { left: 14px; width: 22px; height: 22px; } }

/* Bamberg-Skyline-SVG (subtile Silhouette im Hero unten) */
.hero__skyline { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 90px; opacity: 0.22; pointer-events: none; }
.hero__skyline svg { width: 100%; height: 100%; }

/* Trust-Hinweis-Block (statt fake Testimonial) */
.trust-info { max-width: 920px; margin: 0 auto; background: linear-gradient(135deg, rgba(184,153,104,0.05), rgba(255,255,255,0.95)); border-radius: 14px; padding: 36px 32px; border-left: 4px solid var(--highlight); }
.trust-info__quote { font-family: var(--headline); font-size: 1.15rem; font-style: italic; color: var(--main); line-height: 1.55; margin-bottom: 16px; }
.trust-info__quote::before { content: '"'; font-size: 1.6rem; color: var(--highlight); margin-right: 4px; vertical-align: -0.2em; }
.trust-info__quote::after { content: '"'; color: var(--highlight); margin-left: 2px; }
.trust-info__source { font-size: 0.85rem; color: var(--text-soft); }
.trust-info__source b { color: var(--main); font-weight: 600; }

/* Mobile-Fix: 2-Spalten-Grids auf 1 Spalte unter 768px */
@media (max-width: 768px) {
  .situations__grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}
/* Jennifer-Block-Bild auf Mobile sauber */
@media (max-width: 800px) {
  .jennifer-block__img { min-height: 280px; background-position: center top; }
}


/* ════════════════════════════════════════════════════════════
   FINANCE-PAIN-SECTION V2 (Restschuld/Finanzierung)
   Integriertes Design — 3 Trust-Cards + CTA + Bank-Trust-Strip
   ════════════════════════════════════════════════════════════ */
.finance-pain-v2 { max-width: 1100px; margin: 0 auto; }

.finance-pain-v2__header { text-align: center; margin-bottom: 32px; }
.finance-pain-v2__eyebrow {
  display: inline-block; color: var(--highlight, #B89968); font-size: 0.75rem;
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 14px;
}
.finance-pain-v2__header h2 {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
  color: #fff; margin: 0 0 16px; line-height: 1.2;
}

.finance-pain-v2__hook {
  border-left: 3px solid var(--highlight, #B89968);
  padding: 6px 0 6px 32px;
  display: flex; align-items: baseline; gap: 26px;
  margin: 0 auto 40px;
  max-width: 880px;
}
.finance-pain-v2__hook-text {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 2.4rem; font-weight: 700;
  color: var(--highlight, #B89968) !important;
  line-height: 1; flex-shrink: 0;
  letter-spacing: -0.01em;
}
.finance-pain-v2__hook p {
  margin: 0; color: rgba(255,255,255,0.88);
  font-size: 1.02rem; line-height: 1.55; font-weight: 400;
}

.finance-pain-v2__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-bottom: 36px;
}
.finance-pain-v2__card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(184, 153, 104, 0.28);
  border-top: 3px solid var(--highlight, #B89968);
  border-radius: 12px;
  padding: 24px 22px;
  transition: background 0.2s, transform 0.2s;
}
.finance-pain-v2__card:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-2px);
}
.finance-pain-v2__card-icon {
  width: 44px; height: 44px;
  background: rgba(184, 153, 104, 0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--highlight, #B89968);
  margin-bottom: 14px;
}
.finance-pain-v2__card-icon svg { width: 22px; height: 22px; }
.finance-pain-v2__card h3 {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 1.05rem; color: #fff;
  margin: 0 0 8px; line-height: 1.3;
}
.finance-pain-v2__card p {
  margin: 0; color: rgba(255,255,255,0.78);
  font-size: 0.92rem; line-height: 1.55;
}

.finance-pain-v2__cta { text-align: center; margin-bottom: 36px; }
.finance-pain-v2__cta .btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--highlight, #B89968); color: var(--main, #1E3A5F);
  padding: 14px 28px; border-radius: 999px;
  font-weight: 700; text-decoration: none;
  font-size: 1rem;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 18px rgba(184, 153, 104, 0.3);
}
.finance-pain-v2__cta .btn:hover {
  background: #C9A972; transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(184, 153, 104, 0.4);
}

.finance-pain-v2__banks {
  text-align: center;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.finance-pain-v2__banks-label {
  color: rgba(255,255,255,0.55);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 600;
}
.finance-pain-v2__banks-list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 28px;
  color: rgba(255,255,255,0.85);
  font-size: 0.92rem;
  font-weight: 600;
}
.finance-pain-v2__banks-list span:not(:last-child)::after {
  content: '·'; color: var(--highlight, #B89968);
  margin-left: 28px; opacity: 0.8;
}

/* Mobile */
@media (max-width: 768px) {
  .finance-pain-v2__hook { flex-direction: column; gap: 10px; padding: 4px 0 4px 22px; border-left-width: 3px; }
  .finance-pain-v2__hook-text { font-size: 2rem; }
  .finance-pain-v2__grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
  .finance-pain-v2__banks-list { flex-direction: column; gap: 6px; }
  .finance-pain-v2__banks-list span:not(:last-child)::after { display: none; }
}

/* ════════════════════════════════════════════════════════════
   STEP-ICONS GOLD (Vier-Schritte-Ablauf)
   Boxen Gold statt Navy, Icons Navy auf Gold
   ════════════════════════════════════════════════════════════ */
.step__icon {
  background: linear-gradient(180deg, #2E4F7A 0%, var(--main, #1E3A5F) 100%) !important;
  border: 1px solid var(--main, #1E3A5F) !important;
  box-shadow: 0 -4px 14px 0 rgba(0,0,0,.2) inset, 0 8px 24px rgba(30, 58, 95, .25) !important;
}
.step__icon svg path { fill: var(--highlight, #B89968) !important; stroke: var(--highlight, #B89968) !important; }
.step__icon svg [data-stroke] { stroke: var(--highlight, #B89968) !important; fill: none !important; }
.step__num {
  background: var(--main, #1E3A5F) !important;
  color: #fff !important;
}

/* Fix: section--navy global rule has higher specificity — chain class */
.section--navy .finance-pain-v2__hook-text { color: var(--highlight, #B89968) !important; }
.section--navy .finance-pain-v2__hook p { color: rgba(255, 255, 255, 0.88) !important; }
.section--navy .finance-pain-v2__card h3 { color: #fff !important; }
.section--navy .finance-pain-v2__card p { color: rgba(255, 255, 255, 0.78) !important; }
.section--navy .finance-pain-v2__card-icon { color: var(--highlight, #B89968) !important; }
.section--navy .finance-pain-v2__eyebrow { color: var(--highlight, #B89968) !important; }
.section--navy .finance-pain-v2__banks-label { color: rgba(255, 255, 255, 0.55) !important; }
.section--navy .finance-pain-v2__banks-list { color: rgba(255, 255, 255, 0.85) !important; }

/* ════════════════════════════════════════════════════════════
   CTA-HOVER-POLISH — einheitlich auf alle Buttons
   Dezent: translateY(-2px) + Shadow, 0.2s ease
   Respektiert prefers-reduced-motion
   ════════════════════════════════════════════════════════════ */
.btn, .button, .mid-cta-section__btn, .hero__cta, .hero-form__btn,
.btn-primary, .btn-secondary, .btn-outline-white,
.staedte-anker__pill, .staedte-anker__card,
.case-card, .finance-pain-v2__cta .btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover, .button:hover, .mid-cta-section__btn:hover, .hero__cta:hover,
.hero-form__btn:hover, .btn-primary:hover, .btn-secondary:hover,
.btn-outline-white:hover, .finance-pain-v2__cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(30, 58, 95, 0.18);
}

.btn:active, .button:active, .mid-cta-section__btn:active,
.hero__cta:active, .hero-form__btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.15);
}

/* Pills & Cards bekommen leichteres Lift */
.staedte-anker__pill:hover, .staedte-anker__card:hover {
  transform: translateY(-1px);
}

/* Case-Cards: leichter Hover-Lift */
.case-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(30, 58, 95, 0.12);
}

/* Reduced-Motion-Respekt */
@media (prefers-reduced-motion: reduce) {
  .btn, .button, .mid-cta-section__btn, .hero__cta, .hero-form__btn,
  .btn-primary, .btn-secondary, .btn-outline-white,
  .staedte-anker__pill, .staedte-anker__card, .case-card,
  .finance-pain-v2__cta .btn {
    transition: none !important;
  }
  .btn:hover, .button:hover, .mid-cta-section__btn:hover, .hero__cta:hover,
  .hero-form__btn:hover, .case-card:hover,
  .staedte-anker__pill:hover, .staedte-anker__card:hover,
  .finance-pain-v2__cta .btn:hover {
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   TRUST-PARTNERS — Bank- und Anwaltskanzlei-Logos
   Mockup-4-Stil: Logo links, Trust-Snippet rechts, Gold-Trenner
   ════════════════════════════════════════════════════════════ */
.trust-partners { max-width: 720px; margin: 0 auto; }
.trust-partners__header { text-align: center; margin-bottom: 14px; }
.trust-partners__eyebrow {
  font-size: 0.72rem; font-weight: 600;
  color: var(--highlight, #B89968) !important;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.trust-partners__row {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(184, 153, 104, 0.18);
}
.trust-partners__row:last-child { border-bottom: 0; }
.trust-partners__logo {
  flex-shrink: 0;
  width: 96px; height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.trust-partners__logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
}
.trust-partners__divider {
  width: 3px; height: 40px;
  background: var(--highlight, #B89968);
  border-radius: 2px; flex-shrink: 0;
}
.trust-partners__text { flex: 1; min-width: 0; }
.trust-partners__name {
  font-family: var(--headline, 'Mosafin', serif);
  font-size: 0.98rem; font-weight: 700;
  color: #fff;
  margin-bottom: 2px; line-height: 1.3;
}
.trust-partners__role {
  font-size: 0.85rem; color: rgba(255,255,255,0.75);
  line-height: 1.5;
}
.section--navy .trust-partners__name { color: #fff !important; }
.section--navy .trust-partners__role { color: rgba(255,255,255,0.75) !important; }
.section--navy .trust-partners__logo { background: #fff; border-radius: 6px; padding: 8px; }

/* Mobile */
@media (max-width: 600px) {
  .trust-partners__row { flex-wrap: wrap; padding: 14px 0; }
  .trust-partners__logo { width: 80px; height: 48px; }
  .trust-partners__divider { display: none; }
  .trust-partners__text { flex: 1 1 auto; }
  .trust-partners__name { font-size: 0.92rem; }
  .trust-partners__role { font-size: 0.8rem; }
}

/* ════════════════════════════════════════════════════════════
   TRUST-BAR (Bernert-Stil) — weiße Bar mit 4 Logos + Caption
   Ersetzt Logo+Story-Liste in finance-pain-v2 mit kompakter Bar
   ════════════════════════════════════════════════════════════ */
.trust-bar {
  max-width: 880px !important;
  margin: 0 auto !important;
  text-align: center !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: 0 !important;
  display: block !important;
}
.trust-bar__caption {
  margin-bottom: 16px;
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--highlight, #B89968) !important;
}
.trust-bar__strip {
  background: var(--bg-cream, #F8F4ED);
  border-radius: 12px;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
  flex-wrap: wrap;
}
.trust-bar__logo {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.trust-bar__logo--wide {
  padding: 0 6px;
}
.trust-bar__logo img {
  height: 48px;
  width: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
.trust-bar__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(184, 153, 104, 0.4);
  margin: 4px 0;
  flex: 0 0 auto;
}
.trust-bar__logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}


/* Mobile */
@media (max-width: 700px) {
  .trust-bar__strip { padding: 16px 18px; gap: 18px; }
  .trust-bar__logo { height: 44px; min-width: 70px; flex-basis: calc(50% - 12px); }
  .trust-bar__caption { font-size: 0.92rem; }
}
@media (max-width: 380px) {
  .trust-bar__logo { flex-basis: 100%; }
}

/* ════════════════════════════════════════════════════════════
   HERO-TRUST-BAR — Cream-Bridge-Section unter Hero
   Werthandel-Brand-konform (kein dunkles Overlay).
   ════════════════════════════════════════════════════════════ */
.hero-trust-bar {
  background: var(--bg-cream, #F8F4ED);
  border-top: 1px solid rgba(184, 153, 104, 0.22);
  border-bottom: 1px solid rgba(184, 153, 104, 0.22);
  padding: 18px 24px;
}
.hero-trust-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-trust-bar__caption {
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-text, #8A6E40) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.hero-trust-bar__strip {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-trust-bar__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.hero-trust-bar__logo--wide {
  padding: 0 4px;
}
.hero-trust-bar__logo img {
  height: 36px;
  width: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
.hero-trust-bar__divider {
  width: 1px;
  height: 36px;
  background: rgba(184, 153, 104, 0.4);
  align-self: center;
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .hero-trust-bar { padding: 14px 16px; }
  .hero-trust-bar__inner { gap: 14px; }
  .hero-trust-bar__strip { gap: 14px; }
  .hero-trust-bar__logo img { height: 28px; }
  .hero-trust-bar__logo { padding: 0 2px; }
  .hero-trust-bar__logo--wide { padding: 0 2px; }
  .hero-trust-bar__caption { font-size: 0.66rem; }
}


/* ════════════════════════════════════════════════════════════
   GLOBAL SELECT STYLING — Werthandel-Brand (Cream + Navy + Gold)
   Ersetzt nativen Browser-Look durch Custom Caret + Brand-Farben.
   Greift auf alle <select> in Forms, Cockpits, Rechnern.
   ════════════════════════════════════════════════════════════ */
select,
.cockpit-select select,
.hero-form__field select,
.lf__select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #FAFAF7 !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%231E3A5F' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px 8px !important;
  border: 1px solid #DDD1B8 !important;
  border-radius: 10px !important;
  color: #1A2433 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  padding: 12px 44px 12px 16px !important;
  cursor: pointer !important;
  width: 100% !important;
  line-height: 1.4 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
select:hover,
.cockpit-select select:hover,
.hero-form__field select:hover,
.lf__select:hover {
  border-color: #B89968 !important;
  background-color: #FFFFFF !important;
}
select:focus,
.cockpit-select select:focus,
.hero-form__field select:focus,
.lf__select:focus {
  outline: none !important;
  border-color: #1E3A5F !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(184, 153, 104, 0.22) !important;
}
select:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  background-color: #F0EBE0 !important;
}
/* Option-Liste (nativer Browser-Style — begrenzt stylebar) */
select option {
  background: #FFFFFF;
  color: #1A2433;
  padding: 10px;
  font-size: 0.95rem;
}
/* Cockpit-Select Container */
.cockpit-select {
  position: relative;
  width: 100%;
}

/* ════════════════════════════════════════════════════════════
   BACK-TO-TOP — Floating button bottom-left
   ════════════════════════════════════════════════════════════ */
#werthandel-back-to-top {
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mainColor, #1E3A5F);
  color: var(--highlight, #B89968);
  border: 2px solid var(--highlight, #B89968);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s, background 0.2s ease, color 0.2s ease;
  z-index: 998;
  box-shadow: 0 6px 20px rgba(30, 58, 95, 0.32);
  padding: 0;
}
#werthandel-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
#werthandel-back-to-top:hover {
  background: var(--highlight, #B89968);
  color: var(--mainColor, #1E3A5F);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(184, 153, 104, 0.38);
}
#werthandel-back-to-top:focus-visible {
  outline: 2px solid var(--highlight, #B89968);
  outline-offset: 3px;
}
#werthandel-back-to-top svg { display: block; }

@media (max-width: 640px) {
  #werthandel-back-to-top {
    left: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #werthandel-back-to-top {
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    transform: none;
  }
  #werthandel-back-to-top:hover { transform: none; }
}


/* ════════════════════════════════════════════════════════════
   SKIP-LINK (WCAG 2.1) — Direkt zum Inhalt
   ════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--mainColor, #1E3A5F);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-family: var(--mainFont, 'Montserrat', sans-serif);
  text-decoration: none;
  z-index: 9999;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
  outline: 2px solid var(--highlight, #B89968);
  outline-offset: 3px;
}


/* Utility-Class: Gold-Text-Override (gegen .section--navy-Spezifität) */
.color-gold-override {
  color: var(--highlight, #B89968) !important;
}

/* Fix: mid-cta-section-Button darf auf Mobile umbrechen.
   Sonst erzwingt white-space:nowrap eine 365px-Breite -> +7px horizontaler Overflow auf <=480px (brand/wasserschaden). */
@media (max-width: 600px) {
  .mid-cta-section__btn {
    white-space: normal;
    max-width: 100%;
    flex-basis: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* === A11y-Kontrast (WCAG 2.1 AA): Gold-Text auf hellem BG ===
   #B89968 (--highlight) auf weiss/cream = nur 2.46-2.69:1 (FAIL). Diese Selektoren
   stehen auf hellem Grund -> auf das AA-konforme Text-Gold --gold-text (#8A6E40,
   ~4.4:1) umstellen. Navy-Kontext-Varianten (.section--navy .X, .comparison-box__col--werthandel .X)
   haben hoehere Spezifitaet/!important und behalten ihr helles Gold. Einzelklassen
   hier stehen am Konkat-Ende -> gewinnen bei Gleichstand per Quellreihenfolge. */
.hero-trust-bar__caption,
.trust-bar__caption,
.trust-strip__caption__label,
.section__label,
.section-label,
.comparison-box__label,
.cta-final__person-label,
.cta-final__eyebrow,
.cta-final__stat-value,
.city-card__region,
.hero__schaden-pill,
.hero__person-eyebrow,
.finance-pain-v2__eyebrow,
.finance-pain-v2__hook-text,
.usp-card-frame__link,
.jennifer-block__label,
.cockpit-stage__num,
.cockpit-euro-input__suffix,
.stadt-fakt-card__compare-val,
.local-testimonial__card__stars,
.pain-card__num,
.form-trust-strip__sep,
.diskretion-block__label,
.case-card__label {
  color: var(--gold-text, #8A6E40) !important;
}
/* Navy-Kontexte behalten das helle Gold (hoehere Spezifitaet schlaegt obiges !important). */
.section--navy .section-label,
.section--navy .section__label,
.section--navy .cta-final__eyebrow,
.section--navy .cta-final__person-label,
.section--navy .cta-final__stat-value,
.comparison-box__col--werthandel .comparison-box__label,
.foot .section-label,
.foot .section__label {
  color: var(--highlight, #B89968) !important;
}

/* A11y: sichtbarer Tastatur-Fokus auf FAQ-Accordions (summary), fokussierbare
   Cockpit-Karten (role=radio) und Info-Icons. */
summary:focus-visible,
.cockpit-info:focus-visible,
[data-cockpit-card-group] [data-value]:focus-visible {
  outline: 2px solid var(--gold-text, #8A6E40);
  outline-offset: 2px;
  border-radius: 6px;
}
[data-cockpit-card-group] [data-value] { cursor: pointer; }