/* ============================================
   FTC Stuttgart — Hauptstylesheet
   Design: Luxury Financial, Navy & Gold
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* ---- CSS Variables ---- */
:root {
  --navy:        #0B1A2E;
  --navy-mid:    #142540;
  --navy-light:  #1E3557;
  --gold:        #C8A96E;
  --gold-light:  #E8C98A;
  --gold-pale:   rgba(200,169,110,0.10);
  --cream:       #F7F4EE;
  --cream-dark:  #EDE9E0;
  --white:       #FFFFFF;
  --text-dark:   #0B1A2E;
  --text-muted:  #6B7A8D;
  --text-light:  rgba(255,255,255,0.60);
  --border:      rgba(11,26,46,0.10);
  --border-gold: rgba(200,169,110,0.30);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --transition: 0.25s ease;
  --shadow-card: 0 4px 24px rgba(11,26,46,0.08);
  --shadow-hover: 0 8px 40px rgba(11,26,46,0.14);


  /* Basis */
  --font-base: 16px;

  /* Text */
  --fs-caption: 12px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-body-large: 17px;
  --fs-body-big: 24px;
  --fs-body-big-xl: 28px;
  --title-small:32px;
  --title:36px;
  --card-icon-small:42px;
  --card-icon:48px;

  /* Überschriften */
  --fs-h6: 18px;
  --fs-h5: 22px;
  --fs-h4: 28px;
  --fs-h3: 36px;
  --fs-h2: 48px;
  --fs-h1: 72px;



}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: var(--font-base); }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text-dark);
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

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

.section { padding: 96px 0; }
.section--dark { background: var(--navy); }
.section--mid  { background: var(--navy-mid); }
.section--cream { background: var(--cream-dark); }

.section-tag {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  display: block;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 20px;
}

.section-title em { font-style: italic; color: var(--gold); }
.section-title--white { color: var(--white); }

.section-sub {
  font-size: var(--fs-body);
  color: var(--text-muted);
  max-width: 520px;
  line-height: 1.7;
  margin-bottom: 48px;
}

.section-sub--light { color: var(--text-light); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.btn--gold {
  background: var(--gold);
  color: var(--navy);
}
.btn--gold:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
}
.btn--outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn--outline-dark {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--border);
}
.btn--outline-dark:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn svg { width: 16px; height: 16px; stroke: currentColor; }

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  transition: background var(--transition), backdrop-filter var(--transition), box-shadow var(--transition);
}

.nav.scrolled {
  background: rgba(11,26,46,0.97);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(200,169,110,0.15);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.nav__logo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
}

.nav__logo-sub {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.nav__logo-main {
  font-family: var(--font-display);
  font-size: var(--fs-body-big);
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.04em;
}

.nav__logo-main span { color: var(--gold); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}

.nav__links a {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.60);
  text-decoration: none;
  transition: color var(--transition);
  position: relative;
}

.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 100%;
  height: 1px;
  background: var(--gold);
  transition: right var(--transition);
}

.nav__links a:hover { color: var(--white); }
.nav__links a:hover::after { right: 0; }

.nav__links li.has-dropdown { position: relative; }

/* Unsichtbare Brücke: füllt die Lücke zwischen Link und Dropdown */
.nav__links li.has-dropdown::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

/* Pfeil-Indikator am Parent-Link */
.nav__links li.has-dropdown > a::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.6;
  transition: transform var(--transition);
}

.nav__links li.has-dropdown.is-open > a::before {
  transform: rotate(180deg);
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--navy-mid);
  border: 0.5px solid var(--border-gold);
  min-width: 200px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 200;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 769px) {
  .nav__links li.has-dropdown:hover .nav__dropdown,
  .nav__links li.has-dropdown.is-open .nav__dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
  }
}

.nav__dropdown a {
  display: block;
  padding: 12px 20px;
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.65);
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
  letter-spacing: 0.08em;
}

.nav__dropdown a:hover { color: var(--gold); background: var(--gold-pale); }
.nav__dropdown a::after { display: none; }

.nav__cta {
  background: var(--gold);
  color: var(--navy) !important;
  padding: 10px 20px;
  font-size: var(--fs-caption) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  transition: background var(--transition) !important;
}

.nav__cta:hover { background: var(--gold-light) !important; color: var(--navy) !important; }
.nav__cta::after { display: none !important; }

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--white);
  transition: all var(--transition);
}

/* ============================================
   HERO
   ============================================ */
.hero {
  min-height: 100vh;
  background: var(--navy);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 120px 0 80px;
}

/* Geometric decorations */
.hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__decor-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(200,169,110,0.10);
}

.hero__decor-ring:nth-child(1) { width: 600px; height: 600px; right: -100px; top: -100px; }
.hero__decor-ring:nth-child(2) { width: 420px; height: 420px; right: 60px; top: 40px; border-color: rgba(200,169,110,0.06); }
.hero__decor-ring:nth-child(3) { width: 240px; height: 240px; right: 180px; top: 150px; border-color: rgba(200,169,110,0.04); }

.hero__decor-line {
  position: absolute;
  width: 1px;
  height: 200px;
  background: linear-gradient(to bottom, transparent, rgba(200,169,110,0.2), transparent);
  left: 48%;
  top: 60px;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.hero__content { position: relative; z-index: 2; }

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}

.hero__tag::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 24px;
}

.hero__title em {
  font-style: italic;
  color: var(--gold-light);
  display: block;
}

.hero__subtitle {
  font-size: var(--fs-body);
  color: var(--text-light);
  max-width: 400px;
  line-height: 1.75;
  margin-bottom: 40px;
}

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

.hero__stats {
  display: flex;
  gap: 0;
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.hero__stat {
  flex: 1;
  padding-right: 32px;
  border-right: 1px solid rgba(255,255,255,0.07);
}

.hero__stat:last-child { border-right: none; }

.hero__stat-num {
  font-family: var(--font-display);
  font-size: var(--title);
  font-weight: 300;
  color: var(--gold);
  display: block;
  line-height: 1;
}

.hero__stat-label {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-top: 6px;
  display: block;
}

/* Hero visual card */
.hero__visual {
  position: relative;
  z-index: 2;
}

.hero__card {
  background: var(--navy-mid);
  border: 0.5px solid var(--border-gold);
  padding: 36px;
  position: relative;
}

.hero__card::before {
  content: '';
  position: absolute;
  top: -1px; left: 32px;
  width: 64px; height: 2px;
  background: var(--gold);
}

.hero__card-title {
  font-family: var(--font-display);
  font-size: var(--fs-body-big);
  font-weight: 400;
  color: var(--white);
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}

.hero__service-list { list-style: none; }

.hero__service-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.65);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  transition: color var(--transition);
  cursor: pointer;
}

.hero__service-item:last-child { border-bottom: none; }
.hero__service-item:hover { color: var(--gold-light); }

.hero__service-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.hero__service-arrow {
  margin-left: auto;
  opacity: 0;
  transition: opacity var(--transition);
  font-size: var(--fs-small);
  color: var(--gold);
}

.hero__service-item:hover .hero__service-arrow { opacity: 1; }

/* ============================================
   ZIELGRUPPEN (Audience Strip)
   ============================================ */
.audience {
  background: var(--navy-mid);
  padding: 0;
  border-top: 1px solid rgba(200,169,110,0.12);
  border-bottom: 1px solid rgba(200,169,110,0.12);
}

.audience__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.audience__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  border-right: 1px solid rgba(255,255,255,0.06);
  transition: background var(--transition);
  cursor: default;
}

.audience__item:last-child { border-right: none; }
.audience__item:hover { background: rgba(200,169,110,0.04); }

.audience__icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.audience__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.audience__label {
  font-family: var(--font-display);
  font-size: var(--fs-body-large);
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.02em;
}

.audience__sub {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.30);
}

/* ============================================
   LEISTUNGEN (Services)
   ============================================ */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 56px;
}

/* 2×2 Variante — für genau 4 Kacheln */
.services__grid--2x2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Für genau 6 Kacheln explizit 3 Spalten */
.services__grid--2x3 {
  grid-template-columns: repeat(3, 1fr);
}

.service-card {
  background: var(--white);
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 100%;
  height: 2px;
  background: var(--gold);
  transition: right 0.4s ease;
}

.service-card:hover { background: var(--navy); }
.service-card:hover::before { right: 0; }

.service-card__num {
  font-family: var(--font-display);
  font-size: var(--card-icon);
  font-weight: 300;
  color: rgba(11,26,46,0.06);
  line-height: 1;
  margin-bottom: 20px;
  transition: color var(--transition);
}

.service-card:hover .service-card__num { color: rgba(200,169,110,0.15); }

.service-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  color: var(--navy);
  transition: color var(--transition);
}

.service-card:hover .service-card__icon { color: var(--gold); }

.service-card__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.25; }

.service-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-body-big);
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 12px;
  letter-spacing: 0.01em;
  transition: color var(--transition);
}

.service-card:hover .service-card__title { color: var(--white); }

.service-card__text {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
  transition: color var(--transition);
}

.service-card:hover .service-card__text { color: rgba(255,255,255,0.50); }

.service-card__link {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--transition);
}

.service-card__link:hover { gap: 14px; }
.service-card__link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

/* Featured service */
.service-card--featured {
  grid-column: span 3;
  background: var(--navy);
  display: flex;
  gap: 60px;
  align-items: center;
}

/* In 2×2-Grid spannt featured nur 2 Spalten */
.services__grid--2x2 .service-card--featured {
  grid-column: span 2;
}

.service-card--featured::before { background: var(--gold); right: 0; }

.service-card--featured .service-card__num { color: rgba(200,169,110,0.08); }
.service-card--featured .service-card__title { color: var(--white); }
.service-card--featured .service-card__text { color: rgba(255,255,255,0.50); }

.service-card--featured:hover {
  background: var(--navy-light);
}

.service-card--featured .service-card__body { flex: 1; }
.service-card--featured .service-card__aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-badge {
  display: inline-block;
  background: var(--gold-pale);
  border: 1px solid var(--border-gold);
  color: var(--gold);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: 12px;
}

/* ============================================
   PHILOSOPHIE
   ============================================ */
.philosophy {
  background: var(--cream-dark);
  padding: 96px 0;
}

.philosophy__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.philosophy__label {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 8px;
}

.philosophy__left {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.philosophy__bar {
  width: 2px;
  height: 120px;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 8px;
}

.philosophy__quote {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  font-style: italic;
  color: var(--navy);
  line-height: 1.25;
}

.philosophy__right {
  padding-top: 12px;
}

.philosophy__text {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 24px;
}

.philosophy__pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}

.pillar {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.pillar__icon {
  width: 36px;
  height: 36px;
  background: var(--gold-pale);
  border: 0.5px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
}

.pillar__icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.pillar__title {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}

.pillar__text {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.6;
}

/* ============================================
   TEAM / GESCHÄFTSFÜHRUNG
   ============================================ */
.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 56px;
}

.team-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}

.team-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.team-card__image {
  height: 280px;
  background: var(--navy-mid);
  position: relative;
  overflow: hidden;
}

.team-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%);
}

.team-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-light));
}

.team-card__placeholder-initials {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 300;
  color: rgba(200,169,110,0.3);
}

.team-card__body {
  padding: 28px;
}

.team-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-body-big);
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 4px;
}

.team-card__role {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.team-card__text {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.7;
}

/* ============================================
   KARRIERE CTA STRIP
   ============================================ */
.karriere-strip {
  background: var(--navy-light);
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  padding: 60px 0;
}

.karriere-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.karriere-strip__title {
  font-family: var(--font-display);
  font-size: var(--title-small);
  font-weight: 300;
  color: var(--white);
}

.karriere-strip__sub {
  font-size: var(--fs-small);
  color: var(--text-light);
  margin-top: 8px;
}

/* ============================================
   KONTAKT
   ============================================ */
.kontakt {
  background: var(--navy);
  padding: 96px 0;
}

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

.kontakt__info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.kontakt__info-icon {
  width: 40px;
  height: 40px;
  border: 0.5px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
}

.kontakt__info-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.kontakt__info-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 4px;
  display: block;
}

.kontakt__info-value {
  font-size: var(--fs-body);
  color: var(--white);
}

.kontakt__info-value a {
  color: var(--white);
  transition: color var(--transition);
}

.kontakt__info-value a:hover { color: var(--gold); }

/* Contact Form */
.kontakt__form { display: flex; flex-direction: column; gap: 20px; }

.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group--half { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}

.form-input,
.form-select,
.form-textarea {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.12);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 14px 18px;
  width: 100%;
  transition: border-color var(--transition), background var(--transition);
  outline: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gold);
  background: rgba(200,169,110,0.05);
}

.form-input::placeholder,
.form-textarea::placeholder { color: rgba(255,255,255,0.25); }

.form-select { cursor: pointer; }
.form-select option { background: var(--navy-mid); }

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

.form-checkbox-group {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.form-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--gold);
}

.form-checkbox-label {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

.form-checkbox-label a { color: var(--gold); text-decoration: underline; }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: #060F1A;
  padding: 60px 0 32px;
}

.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  margin-bottom: 32px;
}

.footer__brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-body-big);
  font-weight: 400;
  color: var(--white);
  margin-bottom: 4px;
}

.footer__brand-name span { color: var(--gold); }

.footer__brand-tag {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-bottom: 20px;
  display: block;
}

.footer__brand-text {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.35);
  line-height: 1.7;
  max-width: 280px;
}

.footer__col-title {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer__links { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.footer__links a {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.40);
  text-decoration: none;
  transition: color var(--transition);
}

.footer__links a:hover { color: var(--white); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__copyright {
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.20);
}

.footer__legal {
  display: flex;
  gap: 24px;
  list-style: none;
}

.footer__legal a {
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.25);
  text-decoration: none;
  transition: color var(--transition);
}

.footer__legal a:hover { color: rgba(255,255,255,0.60); }

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up:nth-child(2) { transition-delay: 0.10s; }
.fade-up:nth-child(3) { transition-delay: 0.20s; }
.fade-up:nth-child(4) { transition-delay: 0.30s; }
.fade-up:nth-child(5) { transition-delay: 0.40s; }

/* ============================================
   PAGE HEADER (Unterseiten)
   ============================================ */
.page-header {
  background: var(--navy);
  padding: 160px 0 80px;
  position: relative;
  overflow: hidden;
}

.page-header::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(to right, transparent, rgba(200,169,110,0.04));
  pointer-events: none;
}

.page-header__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  color: var(--white);
  margin-bottom: 16px;
}

.page-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.page-header__breadcrumb a { color: var(--gold); text-decoration: none; }
.page-header__breadcrumb span { opacity: 0.5; }

/* ============================================
   BACK TO TOP
   ============================================ */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  background: var(--navy);
  border: 0.5px solid var(--border-gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  transition: all var(--transition);
  z-index: 100;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover { background: var(--gold); color: var(--navy); }
.back-to-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
  .philosophy__inner { grid-template-columns: 1fr; }
  .philosophy__left { flex-direction: column; }
  .philosophy__label { writing-mode: horizontal-tb; transform: none; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .nav__links { display: none; }
  .nav__links.open { display: flex; flex-direction: column; position: fixed; inset: 0; background: var(--navy); padding: 80px 32px 40px; gap: 28px; z-index: 999; overflow-y: auto; }
  .nav__hamburger { display: flex; }
  .nav__inner { padding: 16px 20px; }

  /* Mobile Dropdown */
  .nav__links li.has-dropdown > a::before { display: none; }
  .nav__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(200,169,110,0.08);
    border: 0.5px solid var(--border-gold);
    border-radius: 2px;
    cursor: pointer;
    margin-left: 8px;
    flex-shrink: 0;
    transition: background var(--transition);
  }
  .nav__dropdown-toggle::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--gold);
    transition: transform var(--transition);
  }
  .nav__links li.has-dropdown.is-open .nav__dropdown-toggle::after {
    transform: rotate(180deg);
  }
  .nav__links li.has-dropdown > a {
    display: flex;
    align-items: center;
  }
  .nav__dropdown {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: all;
    background: rgba(200,169,110,0.04);
    border: none;
    border-left: 2px solid var(--gold);
    min-width: 0;
    width: 100%;
    padding: 4px 0;
    margin-top: 8px;
    display: none;
    transition: none;
  }
  .nav__links li.has-dropdown.is-open .nav__dropdown {
    display: block;
  }
  .nav__dropdown a {
    padding: 10px 20px;
    font-size: var(--fs-small);
  }
  .audience__grid { grid-template-columns: repeat(2, 1fr); }
  .services__grid,
  .services__grid--2x2,
  .services__grid--2x3 { grid-template-columns: 1fr; }
  .service-card--featured { flex-direction: column; gap: 24px; }
  .service-card--featured { grid-column: span 1; }
  .kontakt__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .karriere-strip__inner { flex-direction: column; text-align: center; }
  .philosophy__pillars { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero__ctas { flex-direction: column; }
  .hero__stats { flex-direction: column; gap: 20px; }
  .hero__stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 20px; }
  .hero__stat:last-child { border-bottom: none; }
  .audience__grid { grid-template-columns: 1fr 1fr; }
  .form-group--half { grid-template-columns: 1fr; }
}


/* ============================================================
   FTC Stuttgart — Interactive Components (v2 Erweiterung)
   Beratungs-Finder · Rentenrechner · ETF-Simulator
   Versicherungs-Check · Kontakt-Flow · Testimonials · Marktdaten
   ============================================================ */


/* ---- BERATUNGS-FINDER ---- */
.finder-section { background: var(--cream-dark); }

.finder {
  background: var(--white);
  border-radius: 16px;
  padding: 40px 48px;
  box-shadow: var(--shadow-card);
  max-width: 860px;
  margin: 48px auto 0;
}

.finder__progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.finder__progress-track {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.finder__progress-bar {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.finder__progress-label {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.finder__step { display: none; }
.finder__step.active { display: block; }

.finder__question {
  font-family: var(--font-display);
  font-size: var(--fs-body-big-xl);
  font-weight: 300;
  color: var(--navy);
  margin-bottom: 28px;
  line-height: 1.3;
}

.finder__options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.finder__options--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 600px) {
  .finder__options, .finder__options--3col {
    grid-template-columns: 1fr;
  }
  .finder { padding: 28px 20px; }
}

.finder__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  background: var(--cream);
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  font-family: var(--font-body);
}

.finder__option:hover {
  border-color: var(--gold);
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.finder__option.selected {
  border-color: var(--gold);
  background: var(--white);
}

.finder__option-icon {
  width: 40px;
  height: 40px;
  background: var(--navy);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.finder__option-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.finder__option-icon--sm {
  width: 36px;
  height: 36px;
  font-size: var(--fs-body-large);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  border-radius: 8px;
}
.finder__option-icon--sm svg {
  width: 18px; height: 18px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finder__option-label {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--navy);
}

.finder__option-sub {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.4;
}

.finder__back {
  margin-top: 20px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
  font-family: var(--font-body);
  transition: color 0.2s;
}
.finder__back:hover { color: var(--navy); }

/* Ergebnis */
.finder__result-inner {
  text-align: center;
  padding: 20px 0;
}

.finder__result-check {
  width: 56px;
  height: 56px;
  background: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.finder__result-check svg {
  width: 28px; height: 28px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finder__result-title {
  font-family: var(--font-display);
  font-size: var(--fs-body-big);
  font-weight: 300;
  color: var(--navy);
  margin-bottom: 12px;
}

.finder__result-text {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 20px;
}

.finder__result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 28px;
}

.finder__tag {
  padding: 5px 14px;
  background: var(--gold-pale);
  color: var(--navy);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  font-size: var(--fs-small);
  font-weight: 500;
}

.finder__result-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.finder__restart {
  color: var(--text-muted);
  font-size: var(--fs-small);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  margin-top: 0;
  transition: color 0.2s;
}
.finder__restart:hover { color: var(--navy); }

/* ---- Schritt 4: eingebettetes Kontaktformular (helles Theme) ---- */
.finder__form-divider {
  border-top: 1px solid var(--border);
  margin: 36px 0 28px;
}

.finder__form-intro { text-align: center; margin-bottom: 24px; }

.finder__form-title {
  font-family: var(--font-display);
  font-size: var(--fs-body-big);
  font-weight: 300;
  color: var(--navy);
  margin-bottom: 8px;
}

.finder__form-sub {
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto;
}

.finder__form { max-width: 560px; margin: 0 auto; }
.finder__form .form-group { margin-bottom: 16px; }

.finder__channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 560px) {
  .finder__channel-grid { grid-template-columns: 1fr; }
}

.finder__channel { cursor: pointer; }
.finder__channel input { position: absolute; opacity: 0; }

.finder__channel-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px;
  background: var(--cream);
  border: 1.5px solid transparent;
  border-radius: 8px;
  transition: all 0.2s;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.finder__channel-body svg {
  width: 20px; height: 20px;
  stroke: var(--navy);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.finder__channel input:checked + .finder__channel-body {
  border-color: var(--gold);
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-card);
}

.form-input--finder,
.form-textarea--finder {
  background: var(--cream) !important;
  border-color: var(--border) !important;
  color: var(--navy) !important;
}
.form-input--finder::placeholder,
.form-textarea--finder::placeholder { color: var(--text-muted) !important; opacity: 0.7; }
.form-input--finder:focus,
.form-textarea--finder:focus {
  border-color: var(--gold) !important;
  background: var(--white) !important;
}

.form-label--finder { color: var(--text-muted) !important; }

.form-checkbox-label--finder { color: var(--text-muted) !important; }
.form-checkbox-label--finder a { color: var(--gold); }

.finder__form-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 16px;
}
.finder__form-nav .finder__back { margin-top: 0; }

.finder__form-note {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: 16px;
}

.finder__success { text-align: center; padding: 12px 0 4px; }
.finder__success .finder__result-check { margin-top: 4px; }


/* ---- RENTENRECHNER ---- */
.rechner-section { background: var(--navy); }

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

@media (max-width: 840px) {
  .rechner-grid { grid-template-columns: 1fr; gap: 40px; }
}

.rechner-intro .section-title { color: var(--white); }
.rechner-intro .section-title em { color: var(--gold); }

.rechner-intro__text {
  color: rgba(255,255,255,0.65);
  font-size: var(--fs-body);
  line-height: 1.7;
  margin-bottom: 24px;
}

.rechner-intro__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.35);
  line-height: 1.5;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.rechner-intro__note svg {
  width: 16px; height: 16px;
  stroke: var(--gold);
  fill: none;
  flex-shrink: 0;
  margin-top: 1px;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rechner-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(200,169,110,0.2);
  border-radius: 14px;
  padding: 32px;
}

.rechner-row { margin-bottom: 24px; }

.rechner-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.rechner-slider-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rechner-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
  outline: none;
  cursor: pointer;
}

.rechner-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 2px solid var(--navy);
  box-shadow: 0 0 0 3px rgba(200,169,110,0.2);
  transition: box-shadow 0.2s;
}

.rechner-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 6px rgba(200,169,110,0.2);
}

.rechner-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 2px solid var(--navy);
}

.rechner-slider-out {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--gold);
  min-width: 90px;
  text-align: right;
  white-space: nowrap;
}

.rechner-result {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(200,169,110,0.2);
}

.rechner-result__bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  margin-bottom: 20px;
  overflow: hidden;
}

.rechner-result__bar-inner {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.rechner-result__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.rechner-result__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rechner-result__item--gap {
  background: rgba(200,169,110,0.08);
  padding: 12px 16px;
  border-radius: 8px;
  border-bottom: none;
  margin: 4px 0;
}

.rechner-result__label {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.45);
}

.rechner-result__val {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--white);
}

.rechner-result__val--big {
  font-family: var(--font-display);
  font-size: var(--fs-body-big);
  color: var(--gold);
}

.rechner-result__cta { margin-top: 4px; width: 100%; justify-content: center; }


/* ---- ETF SIMULATOR ---- */
.etf-section .section-title { color: var(--navy); }
.etf-section .section-title em { color: var(--gold); }

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

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

.etf-controls {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow-card);
}

.etf-controls .rechner-label { color: var(--text-muted); }
.etf-controls .rechner-slider { background: rgba(11,26,46,0.1); }
.etf-controls .rechner-slider-out { color: var(--navy); }
.etf-controls .rechner-slider::-webkit-slider-thumb { border-color: var(--white); }

.etf-summary {
  margin: 24px 0;
  padding: 20px;
  background: var(--cream-dark);
  border-radius: 10px;
}

.etf-summary__item {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 6px 0;
}

.etf-summary__item--highlight {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 6px 0;
}

.etf-summary__label { font-size: var(--fs-small); color: var(--text-muted); }
.etf-summary__val   { font-size: var(--fs-caption); font-weight: 600; color: var(--navy); }
.etf-summary__val--green { color: #3B6D11; }

.etf-chart-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--shadow-card);
}

#etf-canvas {
  width: 100%;
  height: 260px;
  display: block;
}

.etf-chart-legend {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  justify-content: center;
}

.etf-legend-item {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.etf-legend-item::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
}

.etf-legend-item--input::before  { background: rgba(200,169,110,0.45); border-top: 2px dashed rgba(200,169,110,0.45); height: 0; }
.etf-legend-item--rendite::before { background: var(--gold); }


/* ---- VERSICHERUNGS-CHECK ---- */
.check-section { background: var(--cream); }
.check-section .section-title { color: var(--navy); }
.check-section .section-title em { color: var(--gold); }

.check-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
  margin-top: 40px;
}

@media (max-width: 900px) {
  .check-wrap { grid-template-columns: 1fr; }
}

.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

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

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.check-item:has(.check-input:checked) {
  border-color: var(--gold);
  background: rgba(200,169,110,0.04);
}

.check-item:hover { border-color: rgba(200,169,110,0.4); }

.check-input { position: absolute; opacity: 0; pointer-events: none; }

.check-item__body { flex: 1; min-width: 0; }

.check-item__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.check-item__title {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy);
}

.check-item__prio {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
}

.check-item__prio--kritisch { background: rgba(226,75,74,0.1); color: #A32D2D; }
.check-item__prio--wichtig  { background: rgba(239,159,39,0.1); color: #854F0B; }
.check-item__prio--sinnvoll { background: rgba(99,153,34,0.1);  color: #3B6D11; }

.check-item__text {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: 1.5;
}

.check-item__status {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.check-item:has(.check-input:checked) .check-item__status {
  background: var(--navy);
  border-color: var(--navy);
}

.check-icon-yes, .check-icon-no {
  width: 14px; height: 14px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.check-icon-yes {
  stroke: var(--gold);
  display: none;
}
.check-icon-no {
  stroke: var(--text-muted);
}

.check-item:has(.check-input:checked) .check-icon-yes { display: block; }
.check-item:has(.check-input:checked) .check-icon-no  { display: none;  }

/* Ergebnis-Box */
.check-result {
  background: var(--navy);
  border-radius: 14px;
  padding: 28px;
  position: sticky;
  top: 100px;
}

.check-result__score { text-align: center; margin-bottom: 20px; }

.check-result__gauge {
  position: relative;
  width: 120px;
  margin: 0 auto 8px;
}

.check-result__gauge svg {
  width: 120px;
  height: 80px;
  display: block;
}

#gauge-fill { transition: stroke-dashoffset 0.6s ease; }

.check-result__score-num {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: var(--fs-body-big-xl);
  font-weight: 300;
  color: var(--gold);
}

.check-result__score-label {
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

.check-result__gaps {
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 20px;
}

.check-result__gaps-title {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 10px;
}

.check-result__gap-list {
  list-style: none;
  padding: 0;
}
.check-result__gap-list li {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.7);
  padding: 4px 0;
  padding-left: 16px;
  position: relative;
  line-height: 1.4;
}
.check-result__gap-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold);
}

.check-result__cta { width: 100%; justify-content: center; }


/* ---- SMART KONTAKT-FLOW ---- */
.kflow {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,169,110,0.2);
  border-radius: 14px;
  padding: 36px;
}

.kflow__steps {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  gap: 0;
}

.kflow__step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  transition: all 0.3s;
  flex-shrink: 0;
}

.kflow__step-dot--active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.kflow__step-dot--done {
  background: rgba(200,169,110,0.15);
  border-color: var(--gold);
  color: var(--gold);
}

.kflow__step-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.1);
}

.kflow__panel { display: none; }
.kflow__panel.active { display: block; }

.kflow__panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-body-big);
  font-weight: 300;
  color: var(--white);
  margin-bottom: 24px;
}

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

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

.kflow__topic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  font-family: var(--font-body);
}

.kflow__topic:hover, .kflow__topic.selected {
  border-color: var(--gold);
  background: rgba(200,169,110,0.08);
  transform: translateY(-2px);
}

.kflow__topic-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kflow__topic-icon svg {
  width: 22px; height: 22px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kflow__topic-label {
  font-size: var(--fs-small);
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  line-height: 1.3;
}

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

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

.kflow__channel { cursor: pointer; }
.kflow__channel input { position: absolute; opacity: 0; }

.kflow__channel-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  transition: all 0.2s;
  text-align: center;
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.65);
}
.kflow__channel-body svg {
  width: 22px; height: 22px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kflow__channel input:checked + .kflow__channel-body {
  border-color: var(--gold);
  background: rgba(200,169,110,0.08);
  color: var(--white);
}

.kflow__zeit { margin-bottom: 24px; }
.kflow__label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.form-input--light {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--white) !important;
}
.form-input--light::placeholder { color: rgba(255,255,255,0.25) !important; }
.form-input--light:focus {
  border-color: var(--gold) !important;
  background: rgba(255,255,255,0.08) !important;
}

.form-label--light { color: rgba(255,255,255,0.45) !important; }

.form-textarea--light {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--white) !important;
}
.form-textarea--light::placeholder { color: rgba(255,255,255,0.25) !important; }

.form-checkbox-label--light {
  color: rgba(255,255,255,0.45) !important;
  font-size: var(--fs-small);
}
.form-checkbox-label--light a { color: var(--gold); }

.kflow__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  gap: 16px;
}

.kflow__summary {
  display: flex;
  gap: 24px;
  padding: 14px 16px;
  background: rgba(200,169,110,0.08);
  border: 1px solid rgba(200,169,110,0.2);
  border-radius: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.kflow__summary-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  display: block;
  margin-bottom: 2px;
}

.kflow__summary-val {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--gold);
}

.kflow__form .form-group { margin-bottom: 16px; }

.kflow__success { text-align: center; padding: 40px 20px; }

.kflow__success-inner {}

.kflow__success-icon {
  width: 64px;
  height: 64px;
  background: rgba(200,169,110,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border: 1px solid rgba(200,169,110,0.3);
}
.kflow__success-icon svg {
  width: 32px; height: 32px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kflow__success h3 {
  font-family: var(--font-display);
  font-size: var(--fs-body-big);
  font-weight: 300;
  color: var(--white);
  margin-bottom: 10px;
}
.kflow__success p {
  font-size: var(--fs-body);
  color: rgba(255,255,255,0.5);
}


/* ---- TESTIMONIALS ---- */
.testimonials { background: var(--navy); }

.testimonials__track {
  position: relative;
  min-height: 160px;
  margin: 40px 0 28px;
}

.testimonial-card {
  display: none;
  animation: fadeSlideIn 0.4s ease;
}

.testimonial-card.active { display: block; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.testimonial-card__text {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  margin-bottom: 28px;
  max-width: 700px;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(200,169,110,0.15);
  border: 1px solid rgba(200,169,110,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--gold);
  flex-shrink: 0;
}

.testimonial-card__name {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--white);
}
.testimonial-card__role {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.35);
}

.testimonials__dots {
  display: flex;
  gap: 8px;
}

.testimonials__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}

.testimonials__dot.active {
  background: var(--gold);
  width: 24px;
  border-radius: 4px;
}


/* ---- MARKTDATEN STRIP ---- */
.markt-strip {
  background: var(--navy-mid);
  border-top: 1px solid rgba(200,169,110,0.1);
  border-bottom: 1px solid rgba(200,169,110,0.1);
  padding: 14px 0;
}

.markt-strip__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.markt-strip__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  flex-shrink: 0;
}

.markt-strip__grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  flex: 1;
}

.markt-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.markt-item__name {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: rgba(255,255,255,0.45);
}

.markt-item__wert {
  font-size: var(--fs-small);
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}

.markt-item__delta {
  font-size: var(--fs-caption);
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 10px;
}

.markt-item__delta--pos { background: rgba(99,153,34,0.15); color: #639922; }
.markt-item__delta--neg { background: rgba(226,75,74,0.12);  color: #E24B4A; }

.markt-strip__hint {
  font-size: 9px;
  color: rgba(255,255,255,0.18);
  margin-left: auto;
}


/* ---- MARKTDATEN WIDGET INLINE ---- */
.marktdaten-widget {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,169,110,0.15);
  border-radius: 10px;
  padding: 20px;
  margin-top: 32px;
}


/* ============================================================
   FTC Stuttgart — Seiten-spezifische Styles (v2 Ergänzung)
   Über uns · Philosophie · Karriere · Blog · Sachwertanlagen
   Generationenmanagement · Leistungen (Übersicht)
   ============================================================ */

/* ---- ÜBER UNS: Team-Timeline ---- */
.team-timeline { margin-top: 64px; }
.team-timeline__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  margin-bottom: 48px;
  align-items: start;
}
.team-timeline__year {
  font-family: var(--font-display);
  font-size: var(--card-icon-small);
  font-weight: 300;
  color: var(--gold);
  text-align: right;
  line-height: 1;
  padding-top: 4px;
}
.team-timeline__content {
  padding-left: 32px;
  border-left: 1px solid var(--border-gold);
}
.team-timeline__title { font-size: var(--fs-body-large); font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.team-timeline__text  { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.7; }
@media (max-width: 600px) {
  .team-timeline__item { grid-template-columns: 80px 1fr; gap: 16px; }
  .team-timeline__year { font-size: var(--fs-body-big-xl); }
}

/* ---- ÜBER UNS: Werte-Grid ---- */
.werte-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 640px) { .werte-grid { grid-template-columns: 1fr; } }
.wert-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  transition: all var(--transition);
}
.wert-card:hover { border-color: var(--border-gold); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.wert-card__num  { font-family: var(--font-display); font-size: var(--card-icon); font-weight: 300; color: rgba(200,169,110,0.25); line-height: 1; margin-bottom: 12px; }
.wert-card__title{ font-size: var(--font-base); font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.wert-card__text { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.6; }

/* ---- ÜBER UNS: Auszeichnungs-Badges ---- */
.badges-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.badge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  background: var(--gold-pale);
}
.badge-item svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.badge-item span { font-size: var(--fs-small); font-weight: 600; color: var(--navy); }

/* ---- PHILOSOPHIE: Stepper ---- */
.phil-stepper { margin-top: 48px; }
.phil-step {
  display: none;
  animation: fadeSlideIn 0.35s ease;
}
.phil-step.active { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 700px) { .phil-step.active { grid-template-columns: 1fr; } }
.phil-step__num {
  font-family: var(--font-display);
  font-size: 120px;
  font-weight: 300;
  color: rgba(200,169,110,0.12);
  line-height: 1;
  margin-bottom: -20px;
}
.phil-step__title { font-family: var(--font-display); font-size: var(--title); font-weight: 300; color: var(--navy); margin-bottom: 16px; }
.phil-step__title em { color: var(--gold); font-style: italic; }
.phil-step__text { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.8; }
.phil-step__visual {
  background: var(--navy);
  border-radius: 12px;
  padding: 36px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.phil-step__visual-icon { width: 48px; height: 48px; margin-bottom: 16px; }
.phil-step__visual-icon svg { width: 100%; height: 100%; stroke: var(--gold); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.phil-step__visual-title { font-family: var(--font-display); font-size: var(--fs-body-big); color: var(--white); margin-bottom: 8px; font-weight: 300; }
.phil-step__visual-sub   { font-size: var(--fs-small); color: rgba(255,255,255,0.45); line-height: 1.6; }

.stepper-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.stepper-dots { display: flex; gap: 8px; }
.stepper-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}
.stepper-dot.active { background: var(--gold); width: 24px; border-radius: 4px; }
.stepper-btn {
  padding: 8px 20px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}
.stepper-btn:hover { border-color: var(--gold); color: var(--navy); }
.stepper-btn--primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.stepper-btn--primary:hover { background: var(--navy-light); color: var(--white); }

/* ---- KARRIERE ---- */
.karriere-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 768px) { .karriere-intro-grid { grid-template-columns: 1fr; gap: 40px; } }

.karriere-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.karriere-stat {
  background: var(--gold-pale);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
.karriere-stat__num { font-family: var(--font-display); font-size: var(--title); font-weight: 300; color: var(--navy); display: block; }
.karriere-stat__lbl { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 500; letter-spacing: 0.06em; }

.stellen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 48px; }
.stelle-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  transition: all var(--transition);
  cursor: pointer;
}
.stelle-card:hover { border-color: var(--gold); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.stelle-card__tag  { font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; }
.stelle-card__title{ font-family: var(--font-display); font-size: var(--fs-body-big); font-weight: 300; color: var(--navy); margin-bottom: 8px; }
.stelle-card__sub  { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }
.stelle-card__meta { display: flex; gap: 12px; flex-wrap: wrap; }
.stelle-meta-item  { font-size: var(--fs-caption); font-weight: 500; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.stelle-meta-item svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.stelle-card__cta  { margin-top: 20px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--navy); transition: gap 0.2s; }
.stelle-card:hover .stelle-card__cta { gap: 10px; color: var(--gold); }

.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
@media (max-width: 700px) { .benefits-grid { grid-template-columns: 1fr 1fr; } }
.benefit-item { text-align: center; padding: 24px 16px; }
.benefit-icon {
  width: 48px; height: 48px;
  background: var(--gold-pale);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.benefit-icon svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; }
.benefit-title { font-size: var(--fs-body); font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.benefit-text  { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }

/* Bewerbungs-Modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(11,26,46,0.7);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--white);
  border-radius: 16px;
  padding: 40px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

#bewerbungs-modal .modal{
  background: #0B1A2E;
}

#bewerbungs-modal h2{
  color:#fff;
}

#bewerbungs-modal button{
  margin-top:20px;
}

.modal__close {
  position: absolute;
  top: 20px; right: 20px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: var(--font-base);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.modal__close:hover { border-color: var(--gold); color: var(--navy); }
.modal__title { font-family: var(--font-display); font-size: var(--fs-body-big-xl); font-weight: 300; color: var(--navy); margin-bottom: 6px; }
.modal__sub   { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 28px; }

/* ---- BLOG ---- */
.blog-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.blog-filter-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: none;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}
.blog-filter-btn:hover, .blog-filter-btn.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.blog-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: all var(--transition);
  cursor: pointer;
}
.blog-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: var(--border-gold); }
.blog-card[data-hidden="true"] { display: none; }
.blog-card__img {
  aspect-ratio: 16/9;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.blog-card__img-bg {
  position: absolute; inset: 0;
  opacity: 0.15;
}
.blog-card__img svg { width: 40px; height: 40px; stroke: var(--gold); fill: none; stroke-width: 1; stroke-linecap: round; position: relative; z-index: 1; }
.blog-card__body { padding: 24px; }
.blog-card__cat  { font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; display: block; }
.blog-card__title{ font-family: var(--font-display); font-size: var(--fs-body-big); font-weight: 300; color: var(--navy); margin-bottom: 8px; line-height: 1.3; }
.blog-card__text { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
.blog-card__meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-caption); color: var(--text-muted); }
.blog-card__read { color: var(--gold); font-weight: 600; }

.blog-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: var(--navy);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 48px;
}
@media (max-width: 700px) { .blog-featured { grid-template-columns: 1fr; } }
.blog-featured__visual {
  min-height: 300px;
  background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy-mid) 100%);
  display: flex; align-items: center; justify-content: center;
}
.blog-featured__visual svg { width: 64px; height: 64px; stroke: var(--gold); fill: none; stroke-width: 1; stroke-linecap: round; }
.blog-featured__body { padding: 40px 40px 40px 0; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 700px) { .blog-featured__body { padding: 28px; } }
.blog-featured__tag   { font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: block; }
.blog-featured__title { font-family: var(--font-display); font-size: var(--title-small); font-weight: 300; color: var(--white); line-height: 1.25; margin-bottom: 14px; }
.blog-featured__title em { color: var(--gold); }
.blog-featured__text  { font-size: var(--fs-body); color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 24px; }

/* Lesedauer-Fortschritt */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--gold);
  width: 0%;
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ---- SACHWERTANLAGEN ---- */
.sachwert-tabs { display: flex; gap: 4px; margin-bottom: 40px; flex-wrap: wrap; }
.sachwert-tab-btn {
  padding: 8px 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: none;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.2s;
}
.sachwert-tab-btn:hover, .sachwert-tab-btn.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.sachwert-panel { display: none; }
.sachwert-panel.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  animation: fadeSlideIn 0.3s ease;
}
@media (max-width: 700px) { .sachwert-panel.active { grid-template-columns: 1fr; } }
.sachwert-panel__title { font-family: var(--font-display); font-size: var(--title-small); font-weight: 300; color: var(--navy); margin-bottom: 14px; }
.sachwert-panel__title em { color: var(--gold); font-style: italic; }
.sachwert-panel__text { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.8; margin-bottom: 24px; }
.sachwert-panel__facts { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.sachwert-fact { text-align: center; }
.sachwert-fact__num { font-family: var(--font-display); font-size: var(--title); font-weight: 300; color: var(--navy); display: block; }
.sachwert-fact__lbl { font-size: var(--fs-caption); color: var(--text-muted); }
.sachwert-panel__vis {
  background: var(--navy);
  border-radius: 14px;
  padding: 40px;
  min-height: 280px;
  display: flex; flex-direction: column; justify-content: center;
}
.sachwert-vis-icon { width: 56px; height: 56px; margin-bottom: 20px; }
.sachwert-vis-icon svg { width: 100%; height: 100%; stroke: var(--gold); fill: none; stroke-width: 1.2; stroke-linecap: round; }
.sachwert-vis-title { font-family: var(--font-display); font-size: var(--fs-body-big); color: var(--white); margin-bottom: 16px; font-weight: 300; }
.sachwert-pros { list-style: none; }
.sachwert-pros li { font-size: var(--fs-small); color: rgba(255,255,255,0.6); padding: 5px 0; padding-left: 18px; position: relative; }
.sachwert-pros li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-size: var(--fs-caption); }

/* Inflations-Rechner */
.inflation-calc {
  background: var(--cream-dark);
  border-radius: 14px;
  padding: 32px;
  margin-top: 40px;
}
.inflation-calc__title { font-family: var(--font-display); font-size: var(--fs-body-big); font-weight: 300; color: var(--navy); margin-bottom: 6px; }
.inflation-calc__sub   { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 24px; }
.inflation-result-row  { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.inflation-result-item {
  flex: 1; min-width: 140px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.inflation-result-item--loss { background: rgba(226,75,74,0.04); border-color: rgba(226,75,74,0.2); }
.inflation-result-item--gain { background: rgba(99,153,34,0.04); border-color: rgba(99,153,34,0.2); }
.inflation-result-label { font-size: var(--fs-caption); color: var(--text-muted); display: block; margin-bottom: 6px; }
.inflation-result-val   { font-size: var(--fs-body-big); font-weight: 300; font-family: var(--font-display); color: var(--navy); }
.inflation-result-val--neg { color: #A32D2D; }
.inflation-result-val--pos { color: #3B6D11; }

/* ---- GENERATIONENMANAGEMENT ---- */
.gen-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 48px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.gen-flow-step {
  flex: 1;
  min-width: 160px;
  background: var(--white);
  border: 1px solid var(--border);
  border-right: none;
  padding: 24px 20px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.gen-flow-step:first-child { border-radius: 10px 0 0 10px; }
.gen-flow-step:last-child  { border-right: 1px solid var(--border); border-radius: 0 10px 10px 0; }
.gen-flow-step:hover, .gen-flow-step.active {
  background: var(--navy);
  border-color: var(--navy);
}
.gen-flow-step.active + .gen-flow-step { border-left-color: var(--navy); }
.gen-flow-step__icon {
  width: 36px; height: 36px;
  margin: 0 auto 10px;
}
.gen-flow-step__icon svg { width: 100%; height: 100%; stroke: var(--gold); fill: none; stroke-width: 1.5; stroke-linecap: round; }
.gen-flow-step.active .gen-flow-step__icon svg { stroke: var(--gold); }
.gen-flow-step__label { font-size: var(--fs-small); font-weight: 600; color: var(--navy); transition: color 0.2s; }
.gen-flow-step:hover .gen-flow-step__label,
.gen-flow-step.active .gen-flow-step__label { color: var(--white); }
.gen-flow-step__sub { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 4px; transition: color 0.2s; }
.gen-flow-step:hover .gen-flow-step__sub,
.gen-flow-step.active .gen-flow-step__sub { color: rgba(255,255,255,0.5); }

.gen-detail {
  margin-top: 32px;
  display: none;
  animation: fadeSlideIn 0.3s ease;
}
.gen-detail.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 700px) { .gen-detail.active { grid-template-columns: 1fr; } }
.gen-detail__title { font-family: var(--font-display); font-size: var(--fs-body-big-xl); font-weight: 300; color: var(--navy); margin-bottom: 12px; }
.gen-detail__title em { color: var(--gold); }
.gen-detail__text  { font-size: var(--fs-body); color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; }
.gen-detail__list  { list-style: none; }
.gen-detail__list li { font-size: var(--fs-small); color: var(--text-muted); padding: 6px 0; padding-left: 20px; position: relative; border-bottom: 1px solid var(--border); }
.gen-detail__list li:last-child { border-bottom: none; }
.gen-detail__list li::before { content: '→'; position: absolute; left: 0; color: var(--gold); }
.gen-detail__card  { background: var(--navy); border-radius: 12px; padding: 32px; }
.gen-detail__card-title { font-family: var(--font-display); font-size: var(--fs-body-big); color: var(--white); margin-bottom: 16px; font-weight: 300; }
.gen-detail__fact  { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.gen-detail__fact:last-child { border-bottom: none; }
.gen-detail__fact-label { font-size: var(--fs-small); color: rgba(255,255,255,0.45); }
.gen-detail__fact-val   { font-size: var(--fs-small); font-weight: 600; color: var(--gold); }

/* Erbschaftssteuer-Rechner */
.erbschaft-calc { background: var(--cream-dark); border-radius: 14px; padding: 32px; margin-top: 40px; }
.erbschaft-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
@media (max-width: 640px) { .erbschaft-result-grid { grid-template-columns: 1fr; } }
.erbschaft-result-box  { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 16px; text-align: center; }
.erbschaft-result-box--highlight { background: var(--navy); border-color: var(--navy); }
.erbschaft-result-box--highlight .erbschaft-result-label { color: rgba(255,255,255,0.45); }
.erbschaft-result-box--highlight .erbschaft-result-num   { color: var(--gold); }
.erbschaft-result-label { font-size: var(--fs-caption); color: var(--text-muted); display: block; margin-bottom: 6px; }
.erbschaft-result-num   { font-family: var(--font-display); font-size: var(--fs-body-big-xl); font-weight: 300; color: var(--navy); }

/* ---- LEISTUNGEN ÜBERSICHT: Vergleichstabelle ---- */
.vergleich-section { background: var(--cream-dark); }
.vergleich-table-wrap { overflow-x: auto; margin-top: 40px; }
.vergleich-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.vergleich-table th {
  background: var(--navy);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 16px 20px;
  text-align: left;
  letter-spacing: 0.04em;
}
.vergleich-table th:first-child { border-radius: 10px 0 0 0; }
.vergleich-table th:last-child  { border-radius: 0 10px 0 0; }
.vergleich-table td {
  padding: 14px 20px;
  font-size: var(--fs-small);
  color: var(--navy);
  border-bottom: 1px solid var(--border);
}
.vergleich-table tr:hover td { background: rgba(200,169,110,0.04); }
.vergleich-table .check { color: #3B6D11; font-weight: 600; }
.vergleich-table .cross { color: #A32D2D; }
.vergleich-table .tag-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: var(--fs-caption);
  font-weight: 600;
  background: var(--gold-pale);
  border: 1px solid var(--border-gold);
  color: var(--navy);
}

/* ---- Globaler SVG-Reset: verhindert schwarze Füllung ---- */
svg:not([fill]) { fill: none; }

/* ---- Team-Card Kontakt-Links ---- */
.team-card__contact {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.team-card__contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.team-card__contact-item:hover {
  color: var(--gold);
}

.team-card__contact-item svg {
  width: 15px;
  height: 15px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Badge-Icons fix */
.badge-item svg {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ============================================================
   FTC Stuttgart — Visual Upgrade CSS
   SVG-Illustrationen, Animated Stats, Visual Sections
   ============================================================ */

/* ---- HERO VISUAL ILLUSTRATION ---- */
.hero-illustration {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-illustration svg {
  width: 100%;
  max-width: 480px;
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.25));
}

/* ---- STAT SHOWCASE ---- */
.stat-showcase {
  background: var(--navy);
  padding: 64px 0;
}
.stat-showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 700px) {
  .stat-showcase__grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-showcase__item {
  padding: 32px 24px;
  text-align: center;
  border-right: 1px solid rgba(200,169,110,0.12);
  position: relative;
}
.stat-showcase__item:last-child { border-right: none; }
.stat-showcase__num {
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 300;
  color: var(--white);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.stat-showcase__num em {
  font-style: normal;
  color: var(--gold);
}
.stat-showcase__label {
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  display: block;
}
.stat-showcase__bar {
  width: 32px;
  height: 2px;
  background: var(--gold);
  margin: 12px auto 0;
  opacity: 0.4;
}

/* ---- SVG ILLUSTRATION SECTIONS ---- */
.illu-section {
  padding: 80px 0;
}
.illu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 768px) {
  .illu-grid { grid-template-columns: 1fr; gap: 40px; }
  .illu-grid--reverse .illu-grid__visual { order: -1; }
}
.illu-grid__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.illu-grid__visual svg {
  width: 100%;
  max-width: 420px;
  height: auto;
}
.illu-grid__content {}
.illu-grid__tag {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 12px;
}
.illu-grid__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 16px;
}
.illu-grid__title em { color: var(--gold); font-style: italic; }
.illu-grid__text {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 28px;
}
.illu-grid__facts {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.illu-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.illu-fact__num {
  font-family: var(--font-display);
  font-size: var(--title-small);
  font-weight: 300;
  color: var(--navy);
  line-height: 1;
}
.illu-fact__num em { color: var(--gold); font-style: normal; }
.illu-fact__label { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 500; }

/* ---- RISIKO-RENDITE CHART ---- */
.rr-chart-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.rr-chart-title {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}
.rr-chart-sub { font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: 20px; }
.rr-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
}
#rr-canvas { width: 100%; height: 100%; display: block; }
.rr-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.rr-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.rr-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---- SCHILD ANIMATION ---- */
.shield-section {
  background: var(--cream-dark);
  padding: 80px 0;
  overflow: hidden;
}
.shield-wrap {
  display: flex;
  align-items: center;
  gap: 64px;
}
@media (max-width: 768px) {
  .shield-wrap { flex-direction: column; gap: 40px; }
}
.shield-visual {
  flex-shrink: 0;
  width: 280px;
  position: relative;
}
.shield-visual svg { width: 100%; height: auto; }

@keyframes shield-ring {
  0%   { opacity: 0.08; transform: scale(1); }
  50%  { opacity: 0.2;  transform: scale(1.06); }
  100% { opacity: 0.08; transform: scale(1); }
}
.shield-ring-1 { animation: shield-ring 3s ease-in-out infinite; transform-origin: center; }
.shield-ring-2 { animation: shield-ring 3s ease-in-out infinite 1s; transform-origin: center; }
.shield-ring-3 { animation: shield-ring 3s ease-in-out infinite 2s; transform-origin: center; }

@keyframes shield-check {
  0%   { stroke-dashoffset: 40; opacity: 0; }
  60%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
.shield-check-path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: shield-check 1.2s ease forwards 0.5s;
}

.shield-content { flex: 1; }
.shield-list {
  list-style: none;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shield-list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.2s;
}
.shield-list-item:hover {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-card);
  transform: translateX(4px);
}
.shield-list-item__icon {
  width: 32px; height: 32px;
  background: var(--navy);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.shield-list-item__icon svg {
  width: 16px; height: 16px;
  stroke: var(--gold); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.shield-list-item__title { font-size: var(--fs-small); font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.shield-list-item__sub   { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.4; }

/* ---- LEBENSPHASEN STEPPER ---- */
.lebensphase {
  background: transparent;
}


.lebensphasen {
  background: var(--navy);
  padding: 80px 0;
}
.lebensphasen__track {
  display: flex;
  gap: 0;
  margin: 40px 0 32px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.lebensphase {
  flex: 1;
  min-width: 120px;
  padding: 20px 16px;
  text-align: center;
  border-bottom: 2px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
}
.lebensphase::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.lebensphase.active::after { transform: scaleX(1); }
.lebensphase__icon {
  font-size: var(--fs-body-big-xl);
  margin-bottom: 8px;
  display: block;
  transition: transform 0.2s;
}
.lebensphase.active .lebensphase__icon { transform: scale(1.2); }
.lebensphase__label {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.06em;
  transition: color 0.2s;
}
.lebensphase.active .lebensphase__label { color: var(--gold); }

.lebensphase-detail {
  display: none;
  animation: fadeSlideIn 0.35s ease;
}
.lebensphase-detail.active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 700px) {
  .lebensphase-detail.active { grid-template-columns: 1fr; }
}
.lebensphase-detail__title {
  font-family: var(--font-display);
  font-size: var(--title-small);
  font-weight: 300;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.25;
}
.lebensphase-detail__title em { color: var(--gold); font-style: italic; }
.lebensphase-detail__text {
  font-size: var(--fs-body);
  color: rgba(255,255,255,0.55);
  line-height: 1.8;
  margin-bottom: 20px;
}
.lebensphase-detail__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lebensphase-detail__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.65);
}
.lebensphase-detail__item::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.lebensphase-visual {
  text-align: center;
}
.lebensphase-visual svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
}

/* ---- PROCESS FLOW (Über uns) ---- */
.process-section { background: var(--cream-dark); padding: 80px 0; }
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--border-gold);
  z-index: 0;
}
@media (max-width: 700px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-steps::before { display: none; }
}
.process-step {
  text-align: center;
  padding: 0 16px 32px;
  position: relative;
  z-index: 1;
}
.process-step__bubble {
  width: 56px; height: 56px;
  background: var(--navy);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  border: 3px solid var(--cream-dark);
  box-shadow: 0 0 0 1px var(--border-gold);
  transition: all 0.3s;
}
.process-step:hover .process-step__bubble {
  background: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 8px 24px rgba(200,169,110,0.3);
}
.process-step__bubble svg {
  width: 22px; height: 22px;
  stroke: var(--gold); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.3s;
}
.process-step:hover .process-step__bubble svg { stroke: var(--navy); }
.process-step__num {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  display: block;
}
.process-step__title { font-size: var(--fs-body); font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.process-step__text  { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.6; }

/* ---- PORTFOLIO DONUT ---- */
.donut-section { padding: 80px 0; }
.donut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 700px) { .donut-grid { grid-template-columns: 1fr; } }
.donut-wrap {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 0 auto;
}
.donut-wrap svg { width: 100%; height: 100%; }
.donut-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.donut-center__num {
  font-family: var(--font-display);
  font-size: var(--title);
  font-weight: 300;
  color: var(--navy);
  display: block;
  line-height: 1;
}
.donut-center__label {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.donut-legend { display: flex; flex-direction: column; gap: 12px; }
.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.donut-legend-item:hover { border-color: var(--border-gold); transform: translateX(4px); }
.donut-legend-item.active { border-color: var(--gold); background: var(--gold-pale); }
.donut-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.donut-legend-label { font-size: var(--fs-small); font-weight: 500; color: var(--navy); flex: 1; }
.donut-legend-pct { font-family: var(--font-display); font-size: var(--fs-body-large); color: var(--text-muted); }
.donut-legend-item.active .donut-legend-pct { color: var(--navy); font-weight: 400; }

/* Scroll-triggered counter */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-animate { animation: countUp 0.6s ease forwards; }


/* ============================================================
   VERSICHERUNGS-POPUP
   ============================================================ */

.shield-list-item--clickable {
  cursor: pointer;
  user-select: none;
}
.shield-list-item--clickable:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-hover);
  transform: translateX(6px);
}
.shield-list-item__prio {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}
.shield-list-item__prio--kritisch    { background: rgba(226,75,74,0.1);   color: #A32D2D; }
.shield-list-item__prio--unverzichtbar { background: rgba(226,75,74,0.1); color: #A32D2D; }
.shield-list-item__prio--wichtig     { background: rgba(239,159,39,0.1);  color: #854F0B; }
.shield-list-item__prio--empfohlen   { background: rgba(99,153,34,0.1);   color: #3B6D11; }
.shield-list-item__prio--sinnvoll    { background: rgba(99,153,34,0.1);   color: #3B6D11; }

.shield-list-item__arrow {
  width: 16px; height: 16px;
  stroke: var(--gold);
  opacity: 0.5;
  flex-shrink: 0;
  transition: transform 0.2s, opacity 0.2s;
}
.shield-list-item--clickable:hover .shield-list-item__arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* Overlay */
.vpopup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11,26,46,0.75);
  backdrop-filter: blur(6px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.vpopup-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Modal-Box */
.vpopup {
  background: var(--white);
  border-radius: 20px;
  padding: 40px;
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.3s ease;
  box-shadow: 0 32px 80px rgba(11,26,46,0.3);
}
.vpopup-overlay.open .vpopup {
  transform: translateY(0) scale(1);
}
@media (max-width: 680px) {
  .vpopup { padding: 28px 20px; border-radius: 16px; }
}

/* Schließen-Button */
.vpopup__close {
  position: absolute;
  top: 20px; right: 20px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--cream);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  color: var(--text-muted);
}
.vpopup__close:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }
.vpopup__close svg { width: 16px; height: 16px; }

/* Header */
.vpopup__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-right: 40px;
}
.vpopup__icon {
  width: 52px; height: 52px;
  background: var(--navy);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vpopup__icon svg {
  width: 24px; height: 24px;
  stroke: var(--gold); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.vpopup__prio {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.vpopup__title {
  font-family: var(--font-display);
  font-size: var(--fs-body-big);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.2;
}

/* Inhalt-Blöcke */
.vpopup__block {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.vpopup__block:last-of-type { border-bottom: none; margin-bottom: 20px; }

.vpopup__block--highlight {
  background: rgba(200,169,110,0.06);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 24px;
}
.vpopup__block--highlight .vpopup__block-title { color: var(--navy); }

.vpopup__block-title {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.vpopup__block-title svg {
  width: 14px; height: 14px;
  stroke: var(--gold); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.vpopup__block-text {
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: 1.75;
}

/* Alters-Ampel */
.vpopup__alter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 4px;
}
@media (max-width: 520px) {
  .vpopup__alter-grid { grid-template-columns: 1fr; }
}
.vpopup__alter-card {
  border-radius: 10px;
  padding: 14px;
  border: 1px solid transparent;
}
.vpopup__alter-card--jung   { background: rgba(99,153,34,0.06);  border-color: rgba(99,153,34,0.2); }
.vpopup__alter-card--mittel { background: rgba(239,159,39,0.06); border-color: rgba(239,159,39,0.2); }
.vpopup__alter-card--aelter { background: rgba(226,75,74,0.05);  border-color: rgba(226,75,74,0.15); }

.vpopup__alter-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.vpopup__alter-card--jung   .vpopup__alter-badge { background: rgba(99,153,34,0.15);  color: #3B6D11; }
.vpopup__alter-card--mittel .vpopup__alter-badge { background: rgba(239,159,39,0.15); color: #854F0B; }
.vpopup__alter-card--aelter .vpopup__alter-badge { background: rgba(226,75,74,0.1);   color: #A32D2D; }

.vpopup__alter-range {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy);
  display: block;
  margin-bottom: 4px;
}
.vpopup__alter-preis {
  font-family: var(--font-display);
  font-size: var(--fs-body-big);
  font-weight: 300;
  color: var(--navy);
  display: block;
  margin-bottom: 6px;
  line-height: 1;
}
.vpopup__alter-text {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: 1.5;
}

/* Tipp-Liste */
.vpopup__tipps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vpopup__tipps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.5;
}
.vpopup__tipps li::before {
  content: '✓';
  color: var(--gold);
  font-weight: 700;
  font-size: var(--fs-small);
  margin-top: 1px;
  flex-shrink: 0;
}

/* CTA */
.vpopup__cta {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

/* Body-Lock beim Popup */
body.vpopup-open { overflow: hidden; }


/* ============================================
   SEO LANDINGPAGES — Long-Form Content, TOC,
   Summary-Box, Praxisbeispiele, FAQ-Accordion
   (genutzt von /finanzberatung-stuttgart/ etc.)
   ============================================ */

.seo-hero-lead {
  max-width: 760px;
  margin: 0 auto 8px;
  font-size: var(--fs-body-large);
  color: var(--text-muted);
  line-height: 1.8;
  text-align: center;
}

/* Inhaltsverzeichnis */
.seo-toc {
  max-width: 760px;
  margin: 40px auto 0;
  background: var(--cream-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 32px;
}
.seo-toc__title {
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.seo-toc ol {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.seo-toc a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--fs-body);
  color: var(--navy);
  transition: color var(--transition);
}
.seo-toc a::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  transform: translateY(-2px);
}
.seo-toc a:hover { color: var(--gold); }

/* Summary-Box ("Das Wichtigste in Kürze") */
.summary-box {
  max-width: 760px;
  margin: 40px auto 0;
  background: var(--white);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 28px 32px;
  box-shadow: var(--shadow-card);
}
.summary-box__title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 14px;
}
.summary-box ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.summary-box li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-body);
  color: var(--text-dark);
  line-height: 1.6;
}
.summary-box li svg {
  width: 16px; height: 16px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 3px;
}

/* Long-Form Prose */
.seo-content {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--fs-body-large);
  color: var(--text-dark);
  line-height: 1.85;
}
.seo-content h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  color: var(--navy);
  margin: 56px 0 18px;
}
.seo-content h2 em { font-style: italic; color: var(--gold); }
.seo-content h3 {
  font-size: 21px;
  font-weight: 600;
  color: var(--navy);
  margin: 32px 0 12px;
}
.seo-content p { margin-bottom: 20px; }
.seo-content ul, .seo-content ol { margin: 0 0 20px 22px; }
.seo-content li { margin-bottom: 8px; }
.seo-content strong { color: var(--navy); font-weight: 600; }
.seo-content a { color: var(--gold); border-bottom: 1px solid var(--border-gold); }
.seo-content a:hover { color: var(--navy); }

/* Praxisbeispiele */
.praxis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.praxis-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.praxis-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.praxis-card__tag {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
  background: var(--gold-pale);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.praxis-card__title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.praxis-card__text {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.7;
}
.praxis-disclaimer {
  margin-top: 20px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-style: italic;
}

/* FAQ-Accordion (semantisches <details>/<summary>, kein JS nötig) */
.faq-accordion {
  max-width: 760px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  position: relative;
  font-size: var(--fs-body-large);
  font-weight: 600;
  color: var(--navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--gold);
  transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item__body {
  padding: 0 24px 22px;
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: 1.75;
}

@media (max-width: 860px) {
  .seo-toc ol { grid-template-columns: 1fr; }
  .praxis-grid { grid-template-columns: 1fr; }
}


/* ============================================
   FOOTER — Beliebte Themen (SEO-Landingpages)
   Eigene Reihe statt 5. Spalte, damit die
   Spaltenhöhen im Footer ausgeglichen bleiben.
   ============================================ */
.footer__topics {
  padding: 28px 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  margin-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.footer__topics-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.35);
  margin-right: 4px;
}
.footer__topics a {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.footer__topics a:hover { color: var(--gold); }
.footer__topics a:not(:last-child)::after {
  content: '·';
  margin-left: 18px;
  color: rgba(255,255,255,0.2);
}





/* =========================================================
   Legal Content (Datenschutz, AGB, etc.)
   ========================================================= */

.container--narrow {
  max-width: 820px;
}

.legal {
  padding-top: 4rem;
  padding-bottom: 6rem;
}

.legal__content {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text, #2b2f38);
}

/* Kapitel-Ebene (1., 2., 3. ...) */
.legal__content h2 {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-gold, #c6a15b);
}

.legal__content h2:first-child {
  margin-top: 0;
}

/* Unterabschnitt-Ebene */
.legal__content h3 {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

/* Detail-Ebene (z. B. "Wer ist verantwortlich...") */
.legal__content h4 {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy-soft, #1f3763);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.legal__content p {
  margin-bottom: 1.1rem;
}

.legal__content p:last-child {
  margin-bottom: 0;
}

.legal__content ul {
  margin: 0 0 1.25rem 0;
  padding-left: 1.4rem;
  list-style: none;
}

.legal__content ul li {
  position: relative;
  margin-bottom: 0.6rem;
  padding-left: 1.1rem;
}

.legal__content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--color-gold, #c6a15b);
  border-radius: 50%;
}

.legal__content a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-color: var(--color-gold, #c6a15b);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.legal__content a:hover {
  color: var(--color-gold, #c6a15b);
  text-decoration-color: currentColor;
}

.legal__content strong {
  color: var(--color-navy);
  font-weight: 700;
}

/* Kontaktblock-artige Absätze (Adresse, Verantwortliche Stelle) */
.legal__content p:has(br) {
  background: var(--color-grey-light, #f4f4f4);
  padding: 1.1rem 1.4rem;
  border-radius: 8px;
  border-left: 3px solid var(--color-gold, #c6a15b);
  line-height: 1.7;
}

/* Sprungmarken-Offset falls per Anker verlinkt */
.legal__content h2,
.legal__content h3 {
  scroll-margin-top: 6rem;
}

/* Inhaltsverzeichnis-Option (optional nutzbar) */
.legal__toc {
  background: var(--color-grey-light, #f4f4f4);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 3rem;
}

.legal__toc-title {
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.75rem;
  display: block;
}

.legal__toc ol {
  columns: 2;
  column-gap: 2rem;
  padding-left: 1.2rem;
  margin: 0;
}

.legal__toc li {
  break-inside: avoid;
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
}

.legal__toc a {
  color: var(--color-text, #2b2f38);
  text-decoration: none;
}

.legal__toc a:hover {
  color: var(--color-navy);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .legal {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }

  .legal__content {
    font-size: 0.96rem;
  }

  .legal__content h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
  }

  .legal__content h3 {
    font-size: 1.05rem;
  }

  .legal__toc ol {
    columns: 1;
  }
}



/* Impressum override — ersetzt alte Box-Optik */
.impressum__grid {
  display: block !important;
}

.impressum__item {
  display: grid !important;
  grid-template-columns: 200px 1fr !important;
  align-items: baseline !important;
  gap: 1.5rem !important;
  padding: 1.15rem 0 !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid #e6e2d8 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.impressum__item:first-child {
  padding-top: 0 !important;
}

.impressum__label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-gold, #c6a15b) !important;
}

.impressum__value {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--color-navy, #0d1b3e) !important;
}

@media (max-width: 640px) {
  .impressum__item {
    grid-template-columns: 1fr !important;
    gap: 0.35rem !important;
  }
}















/* ==========================================================================
   BLOG ARTIKEL — Einzelansicht (blog/{slug}.php)
   In style.css ergänzen. Nutzt bestehende Variablen (--navy, --navy-mid,
   --gold, --cream, --white) sowie Cormorant Garamond / Inter.
   ========================================================================== */

.container--narrow {
  max-width: 760px;
}

/* --- Meta-Zeile: Kategorie · Datum · Lesezeit --- */
.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-mid, #4a5a72);
  margin-bottom: 18px;
}
.article-meta__cat {
  color: var(--gold, #b08d3f);
  font-weight: 600;
}
.article-meta__dot { opacity: 0.5; }

/* --- Titel & Lead --- */
.article-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.15;
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 20px;
}
.article-title em {
  font-style: italic;
  color: var(--gold, #b08d3f);
}
.article-lede {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--navy-mid, #4a5a72);
  margin: 0 0 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(11, 26, 46, 0.1);
}

/* --- Inhaltsverzeichnis --- */
.article-toc {
  background: var(--cream, #f7f4ee);
  border: 1px solid rgba(11, 26, 46, 0.08);
  border-radius: 4px;
  padding: 24px 28px;
  margin-bottom: 40px;
}
.article-toc__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold, #b08d3f);
  font-weight: 600;
  margin-bottom: 12px;
}
.article-toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 1;
}
.article-toc li {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.9;
}
.article-toc a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.article-toc a:hover {
  color: var(--gold, #b08d3f);
  border-bottom-color: currentColor;
}

/* --- Artikel-Fließtext --- */
.article-body {
  font-family: 'Inter', sans-serif;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--navy);
}
.article-body p { margin: 0 0 22px; }
.article-body strong { font-weight: 600; }
.article-body a {
  color: var(--gold, #b08d3f);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body a:hover { color: var(--navy); }

.article-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--navy);
  margin: 52px 0 20px;
  scroll-margin-top: 100px;
}
.article-h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin: 34px 0 14px;
  scroll-margin-top: 100px;
}

.article-list {
  margin: 0 0 24px;
  padding-left: 22px;
}
.article-list li {
  margin-bottom: 10px;
}
.article-list li::marker {
  color: var(--gold, #b08d3f);
}

/* --- Tabellen --- */
.article-table-wrap {
  overflow-x: auto;
  margin: 8px 0 30px;
  border: 1px solid rgba(11, 26, 46, 0.1);
  border-radius: 4px;
}
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  font-family: 'Inter', sans-serif;
}
.article-table th,
.article-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(11, 26, 46, 0.08);
  white-space: nowrap;
}
.article-table th {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.article-table tbody tr:nth-child(odd) { background: var(--cream, #f7f4ee); }
.article-table tbody tr:hover { background: rgba(176, 141, 63, 0.08); }

/* --- Platzhalter für noch zu ergänzende Grafiken --- */
.article-figure-note {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream, #f7f4ee);
  border: 1px dashed rgba(11, 26, 46, 0.25);
  border-radius: 4px;
  padding: 16px 20px;
  margin: 0 0 26px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--navy-mid, #4a5a72);
  font-style: italic;
}
.article-figure-note svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: var(--gold, #b08d3f);
  fill: none;
  stroke-width: 1.6;
}

/* --- Inline-CTA & Backlink --- */
.article-inline-cta {
  margin: 44px 0 24px;
  padding-top: 36px;
  border-top: 1px solid rgba(11, 26, 46, 0.1);
}
.article-backlink {
  margin-bottom: 20px;
}
.article-backlink a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--navy-mid, #4a5a72);
  text-decoration: none;
}
.article-backlink a:hover { color: var(--gold, #b08d3f); }

@media (max-width: 640px) {
  .article-title { font-size: 30px; }
  .article-body { font-size: 16px; }
  .article-table th, .article-table td { padding: 10px 12px; font-size: 13px; }
}

/* ==========================================================================
   BLOG-LISTING — "Weiterlesen"-Link auf Artikel-Karten (blog.php)
   ========================================================================== */
.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold, #b08d3f);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.blog-card__link:hover { color: var(--navy); }





















/* ==========================================================================
   KONTAKT-FORMULAR — Honeypot, Fehleranzeige, Lade-Zustand
   In style.css ergänzen (z. B. direkt nach den bestehenden .kflow-Regeln).
   ========================================================================== */

/* Honeypot-Feld: für Menschen unsichtbar, aber im DOM/Tab-Reihenfolge
   vorhanden (kein display:none — manche Bots überspringen das gezielt). */
.kflow__hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* Fehlermeldung nach fehlgeschlagenem Absenden */
.kflow__error {
  background: rgba(226, 75, 74, 0.12);
  border: 1px solid rgba(226, 75, 74, 0.4);
  color: #E24B4A;
  border-radius: 4px;
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 4px 0 20px;
}
.kflow__error[hidden] { display: none; }

/* Lade-Zustand des Absenden-Buttons */
.btn.is-loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}






/* Hero-Bild auch auf Mobile anzeigen */
@media (max-width: 768px) {
    .hero__visual {
        display: block !important;
        width: 100%;
    }

    .hero__team-image {
        display: block !important;
        width: 100%;
        height: auto;
        max-width: 100%;
        margin: 20px auto !important;
    }
}








/* =========================================================
   Team Modern — Teaser + Expand (kein Hover-Overlay)
   ========================================================= */

.team-modern__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 28px;
}

.team-modern__card {
  display: flex;
  flex-direction: column;
}

.team-modern__image-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-navy, #0d1b3e);
}

.team-modern__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(100%) contrast(1.02);
  transform: scale(1.02);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.team-modern__card:hover .team-modern__image {
  filter: grayscale(0%);
  transform: scale(1.06);
}

/* Meta-Zeile unter dem Bild */
.team-modern__meta {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-grey-light, #e6e2d8);
}

.team-modern__index {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-gold, #c6a15b);
  padding-top: 3px;
}

.team-modern__name {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-navy, #0d1b3e);
  margin: 0 0 2px 0;
  line-height: 1.2;
}

.team-modern__role {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.82rem;
  color: var(--color-gold, #c6a15b);
  letter-spacing: 0.02em;
  margin: 0;
}

/* Teaser — immer sichtbar */
.team-modern__teaser {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text, #2b2f38);
  margin: 12px 0 0 0;
  min-height: calc(1.6em * 3); /* Platz für 3 Zeilen, damit alle Karten bündig enden */
}

/* Details/Summary — sanftes Expand ohne JS */
.team-modern__details {
  margin-top: 10px;
}

.team-modern__details summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-navy, #0d1b3e);
  padding: 2px 0;
  border-bottom: 1px solid var(--color-gold, #c6a15b);
  transition: color 0.15s ease;
}

.team-modern__details summary::-webkit-details-marker {
  display: none;
}

.team-modern__details summary:hover {
  color: var(--color-gold, #c6a15b);
}

.team-modern__details summary svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

.team-modern__details[open] summary svg {
  transform: rotate(180deg);
}

.team-modern__details-label-less { display: none; }
.team-modern__details[open] .team-modern__details-label-more { display: none; }
.team-modern__details[open] .team-modern__details-label-less { display: inline; }

.team-modern__rest {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text, #2b2f38);
  margin: 10px 0 0 0;
  animation: team-fade-in 0.3s ease;
}

@keyframes team-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .team-modern__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
  }
}

@media (max-width: 560px) {
  .team-modern__grid {
    grid-template-columns: 1fr;
  }

  .team-modern__image-wrap {
    aspect-ratio: 4 / 5;
  }
}














.vgk-compare__frame-wrap {
  margin-top: 40px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-grey-light, #e6e2d8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.vgk-compare__frame-wrap iframe {
  width: 100%;
  min-height: 800px; /* Startwert — Tool-Inhalt ist meist recht lang */
  border: 0;
  display: block;
}

@media (max-width: 640px) {
  .vgk-compare__frame-wrap iframe {
    min-height: 1000px; /* Formular stapelt sich auf Mobile, braucht mehr Höhe */
  }
}




.sachwert-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}