/* ============================================================
   Klar Finanz - Steve (Immobilienmakler + Finanzierungsvermittler)
   Design-System: Navy + Gold, premium / vertrauensvoll / klar
   ============================================================ */

/* Schriften selbst gehostet, kein Google-CDN.
   Die Latin-Subsets decken alle deutschen Zeichen ab, inklusive
   Umlauten, Eszett und den Anfuehrungszeichen aus U+2000-206F.
   Fraunces und Inter sind Variable Fonts, eine Datei je Stil
   bedient deshalb die komplette Gewichtsspanne. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marke */
  --brand: #0E2E47;          /* Navy - Primaerfarbe (Vertrauen, Finanz) */
  --brand-rgb: 14, 46, 71;
  --brand-700: #0A2236;      /* dunkleres Navy fuer dunkle Sektionen */
  --brand-300: #2C5170;      /* helleres Navy fuer Hover/Linien */

  --accent: #B5883C;         /* Gold - Akzent (Premium, Wert) */
  --accent-rgb: 181, 136, 60;
  --accent-soft: #D8B870;    /* helles Gold fuer Glanz */
  --accent-text: #ffffff;

  /* Flaechen */
  --bg: #FBF8F3;             /* warmes Ivory */
  --surface: #ffffff;
  --sand: #F2ECE1;           /* warmes Sand fuer abgesetzte Flaechen */

  /* Text */
  --text: #16212B;
  --muted: #5A6470;
  --on-dark: #EAF0F6;
  --on-dark-muted: rgba(234, 240, 246, 0.66);

  /* Linien / Schatten */
  --line: rgba(14, 46, 71, 0.10);
  --line-strong: rgba(14, 46, 71, 0.18);
  --shadow-sm: 0 1px 2px rgba(14, 46, 71, 0.06);
  --shadow-md: 0 18px 40px -24px rgba(14, 46, 71, 0.35);
  --shadow-lg: 0 40px 80px -40px rgba(14, 46, 71, 0.45);

  --radius: 16px;
  --radius-lg: 24px;
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .serif {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--brand);
  line-height: 1.08;
}

p { color: var(--text); }

a { color: inherit; text-decoration: none; }

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Eyebrow / Labels ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}
.eyebrow.center::before { display: none; }

/* ---------- Gold-Gradient-Text (wichtige Woerter) ---------- */
.gold-grad {
  background: linear-gradient(100deg, #D8B870 0%, #B5883C 55%, #9A6E2E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Animierter Gold-Gradient: heller Schimmer wandert fortlaufend durch das Wort.
   Symmetrische Farbstops + 0->100% Position = nahtloser Loop ohne Sprung. */
.gold-grad-anim {
  background: linear-gradient(100deg, #B5883C 0%, #D8B870 25%, #F0DCA8 50%, #D8B870 75%, #B5883C 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gold-grad-move 5s linear infinite;
}
@keyframes gold-grad-move {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .gold-grad-anim { animation: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 26px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, background .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  background: var(--brand-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn-gold {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 18px 40px -22px rgba(var(--accent-rgb), 0.8);
}
.btn-gold:hover {
  filter: brightness(1.04);
  transform: translateY(-2px);
}
/* Hero-CTA wie der Header-Button: premium Gold-Verlauf mit Glanz */
.hero-cta .btn-gold {
  background:
    radial-gradient(120% 120% at 28% 22%, rgba(255,255,255,0.45), transparent 58%),
    linear-gradient(160deg, var(--accent-soft), var(--accent));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.55),
    0 14px 30px -14px rgba(var(--accent-rgb), 0.75);
}
.hero-cta .btn-gold:hover {
  filter: none;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.75),
    0 20px 44px -14px rgba(var(--accent-rgb), 0.9);
}
.btn-ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.btn-ondark {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
}
.btn-ondark:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-2px);
}
.btn .arrow { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Navbar ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  /* Start (oben): transparent, ohne Kante - verschmilzt mit der Seite */
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background .4s ease, box-shadow .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
/* keine Vignette/Kante im Start-Zustand */
.nav::before { content: none; }
.nav-inner {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 34px;
  margin-top: 0;
  transition: margin-top .4s cubic-bezier(.16,1,.3,1), border-radius .4s cubic-bezier(.16,1,.3,1), background .4s ease, border-color .4s ease, box-shadow .4s ease;
  border: 1px solid transparent;
  border-radius: 0;
}
/* Beim Scrollen: normaler, vollbreiter Header-Balken (nicht rund, nicht schwebend) */
.nav.scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: rgba(14, 46, 71, 0.10);
  box-shadow: 0 10px 30px -22px rgba(14, 46, 71, 0.35);
}
.nav.scrolled::before { opacity: 0; }
.nav.scrolled .nav-inner {
  margin-top: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}
/* CTA: goldener Chip-Look wie die Partner-Kacheln (Gold-Verlauf + weisses Innen-Licht + Glow) */
.nav .btn-primary {
  background:
    radial-gradient(120% 120% at 28% 22%, rgba(255,255,255,0.45), transparent 58%),
    linear-gradient(160deg, var(--accent-soft), var(--accent));
  border-color: transparent; color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.55),
    0 14px 30px -14px rgba(var(--accent-rgb), 0.75);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.nav .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.75),
    0 20px 44px -14px rgba(var(--accent-rgb), 0.9);
}
.brandmark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--brand);
  letter-spacing: -0.01em;
  transition: color .45s cubic-bezier(.16,1,.3,1);
}
.brandmark .logo-k {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--brand);
  border: 1px solid rgba(216,184,112,0.55);
  display: grid; place-items: center;
  padding: 4px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(14,46,71,0.14);
  transition: box-shadow .45s;
}
.brandmark .logo-k img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brandmark .brand-logo { height: 48px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 26px; position: relative; }
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  opacity: 0.78;
  transition: opacity .45s cubic-bezier(.16,1,.3,1), color .45s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover { opacity: 1; color: var(--brand); }

/* ---------- Sektionen ---------- */
section { position: relative; }
section[id] { scroll-margin-top: 104px; } /* Offset fuer fixe Navbar bei Anker-Sprung */
.section { padding: 110px 0; }
.section-sm { padding: 84px 0; }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(2.3rem, 4.4vw, 3.4rem);
  margin: 18px 0 0;
}
.section-head p { color: var(--muted); font-size: 1.06rem; margin-top: 18px; }

.dark { background: var(--brand); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark .eyebrow { color: var(--accent-soft); }
.dark .eyebrow::before { background: var(--accent-soft); }
.dark p { color: var(--on-dark-muted); }
.sand-bg { background: linear-gradient(180deg, var(--bg), var(--sand)); }

/* ---------- Klar abgesetzte Section-Hintergruende (jede Section eigener Ton) ---------- */
#leistungen { background: #FFFFFF; border-top: 1px solid var(--line); }
#ueber-mich { background: #F1EADD; }                                  /* warmes Sand */
#rechner    { background: linear-gradient(180deg, #0E2E47, #0A2236); } /* dunkle Navy-Sektion = klarer Bruch */
#partner    { background: var(--brand-700); } /* dunkles Navy: goldene Chips leuchten darauf */
#kontakt    { background: #EDF1F5; border-top: 1px solid var(--line); } /* kuehler Ton */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 132px 0 110px;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(var(--accent-rgb), 0.10), transparent 60%),
    radial-gradient(900px 500px at 8% 12%, rgba(var(--brand-rgb), 0.06), transparent 55%),
    var(--bg);
}
/* Hero-Video-Band (oberer Bereich) */
.hero-band {
  position: relative;
  width: calc(100% + 64px);
  margin-left: -64px;
  height: clamp(110px, 13vw, 165px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow:
    var(--shadow-md),
    0 0 0 1px rgba(216,184,112,0.30),
    0 10px 50px -6px rgba(216,184,112,0.45),
    0 0 90px -10px rgba(216,184,112,0.35);
}
.hero-band .hb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-band .hb-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(62% 130% at 0% 0%, rgba(216,184,112,0.55) 0%, rgba(216,184,112,0) 62%),
    radial-gradient(62% 130% at 100% 0%, rgba(216,184,112,0.55) 0%, rgba(216,184,112,0) 62%),
    radial-gradient(62% 130% at 0% 100%, rgba(216,184,112,0.55) 0%, rgba(216,184,112,0) 62%),
    radial-gradient(62% 130% at 100% 100%, rgba(216,184,112,0.55) 0%, rgba(216,184,112,0) 62%),
    linear-gradient(180deg, rgba(14,46,71,0.16), rgba(14,46,71,0.34));
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 60px;
  align-items: center;
}
.hero-copy h1 { margin-top: 22px; }
.hero h1 {
  font-size: clamp(2.85rem, 5.6vw, 4.8rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.hero h1 .gold { color: var(--accent); font-style: italic; }
.hero h1 .klar-uline {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.hero-lead {
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 520px;
  margin: 26px 0 36px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-reviews {
  position: absolute;
  left: -22px; bottom: 22px; z-index: 4;
  width: min(310px, 82%);
  margin: 0;
  padding: 15px 17px;
  background: rgba(10,28,46,0.66);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  box-shadow: 0 26px 60px -28px rgba(0,0,0,0.7);
}
.hero-reviews .gr-head { display: flex; align-items: center; gap: 12px; }
.hero-reviews .gr-logo { display: inline-flex; flex: none; }
.hero-reviews .gr-head-text { display: flex; flex-direction: column; gap: 2px; }
.hero-reviews .gr-rating { display: flex; align-items: center; gap: 8px; }
.hero-reviews .gr-rating strong { font-size: 17px; color: #fff; font-weight: 700; line-height: 1; }
.hero-reviews .gr-stars { display: inline-flex; gap: 1px; }
.hero-reviews .gr-source { font-size: 12.5px; color: rgba(234,240,246,0.62); text-decoration: none; }
.hero-reviews .gr-source:hover { color: #fff; text-decoration: underline; }
.hero-reviews .gr-review {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
  min-height: 84px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
}
.hero-reviews .gr-review.show { opacity: 1; transform: none; }
.hero-reviews .gr-review-stars { display: inline-flex; gap: 1px; margin-bottom: 7px; }
.hero-reviews .gr-quote { font-size: 14px; line-height: 1.5; color: var(--on-dark); margin: 0 0 7px; min-height: 6em; }
.hero-reviews .gr-author { font-size: 12.5px; color: rgba(234,240,246,0.55); font-style: normal; }
.hero-reviews .gr-dots { display: flex; gap: 6px; margin-top: 12px; }
.hero-reviews .gr-dots button {
  width: 7px; height: 7px; padding: 0;
  border: none; border-radius: 999px;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background .3s, width .3s;
}
.hero-reviews .gr-dots button.active { width: 18px; background: var(--accent); }
.hero-figure { position: relative; }
/* Benefit-Feature-Balken unter dem Hero-Grid */
.hero-features {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.hero-features .hf-item {
  display: flex; align-items: center; gap: 16px;
  padding: 26px 30px;
  border-left: 1px solid var(--line);
}
.hero-features .hf-item:first-child { border-left: none; padding-left: 2px; }
/* Gold-shiny Chips (gespiegelt vom Partner-Look): Gold-Verlauf + weisses Innen-Licht + Glow */
.hero-features .hf-ico {
  display: grid; place-items: center; flex: none;
  width: 54px; height: 54px; border-radius: 15px;
  background:
    radial-gradient(120% 120% at 28% 22%, rgba(255,255,255,0.5), transparent 58%),
    linear-gradient(160deg, var(--accent-soft), var(--accent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.55),
    0 12px 26px -10px rgba(var(--accent-rgb), 0.7);
}
.hero-features .hf-ico svg { width: 26px; height: 26px; display: block; }
/* IHK-Logo auf weisser Mini-Kachel im Gold-Chip */
.hero-features .hf-mini {
  display: grid; place-items: center; background: #fff;
  border-radius: 8px; padding: 5px 7px;
  box-shadow: 0 4px 10px -6px rgba(10,34,54,0.5);
}
.hero-features .hf-mini img { height: 22px; width: auto; display: block; }
.hero-features .hf-txt { font-size: 14.5px; line-height: 1.35; color: var(--brand); font-weight: 600; max-width: 220px; }
.hero-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
}
.hero-trust .ht-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px;
  min-height: 235px;
  padding: 22px 12px;
  background: linear-gradient(180deg, #fff 0%, var(--sand) 175%);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s;
}
.hero-trust .ht-item::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.hero-trust .ht-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--accent-rgb), 0.42);
}
.hero-trust .ht-item:hover::before { transform: scaleX(1); }
.hero-trust .ht-label {
  position: relative;
  display: block; max-width: 140px;
  font-size: 13px; line-height: 1.35; color: var(--brand); font-weight: 600;
}
.hero-trust .ht-plate {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100px; height: 68px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 14px 30px -8px rgba(0,0,0,0.45);
}
.hero-trust .ht-plate img { height: 44px; width: auto; display: block; }
.hero-trust .ht-plate svg { height: 44px; width: 44px; display: block; }

/* Hero visual - bild-unabhaengiges Premium-Panel */
.hero-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(420px 280px at 80% 12%, rgba(var(--accent-rgb), 0.22), transparent 60%),
    linear-gradient(160deg, var(--brand) 0%, var(--brand-700) 100%);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(216,184,112,0.30),
    0 10px 50px -6px rgba(216,184,112,0.45),
    0 0 90px -10px rgba(216,184,112,0.35);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.hero-badge {
  position: absolute;
  top: 20px; right: 18px;
  background: var(--surface);
  border-radius: 18px;
  padding: 14px 18px 14px 14px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: 13px;
  max-width: calc(100% - 32px);
  animation: floaty 5s ease-in-out infinite;
}
.hero-badge .num {
  font-family: "Fraunces", serif; font-size: 1.15rem; font-weight: 600;
  line-height: 1; white-space: nowrap;
  color: var(--accent-soft); background: var(--brand);
  border-radius: 12px; padding: 13px 14px;
}
.hero-badge .lbl { font-size: 12.5px; color: var(--muted); line-height: 1.4; font-weight: 500; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Hero-Visual mit echtem Foto */
.hero-visual .hv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-visual .hv-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 42% at 0% 0%, rgba(216,184,112,0.50) 0%, rgba(216,184,112,0) 60%),
    radial-gradient(55% 42% at 100% 0%, rgba(216,184,112,0.50) 0%, rgba(216,184,112,0) 60%),
    radial-gradient(55% 42% at 0% 100%, rgba(216,184,112,0.50) 0%, rgba(216,184,112,0) 60%),
    radial-gradient(55% 42% at 100% 100%, rgba(216,184,112,0.50) 0%, rgba(216,184,112,0) 60%),
    linear-gradient(180deg, rgba(10,34,54,0.04) 38%, rgba(10,34,54,0.80) 100%);
}

/* ---------- Leistungen ---------- */
/* Goldener Pinsel-Reveal: Mauszeiger legt im Hintergrund der Leistungen ein Bild frei */
.svc-shimmer-section { position: relative; overflow: hidden; }
.svc-shimmer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.svc-shimmer-section > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .svc-shimmer-canvas { display: none; }
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.svc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 42px 38px;
  transition: transform .22s ease-out, box-shadow .22s ease-out, opacity .22s ease-out;
  position: relative;
  overflow: hidden;
}
/* Hover: aktive Karte tritt hervor, andere treten zurueck */
.svc-grid:hover .svc-card { transform: scale(0.92); opacity: 0.4; }
.svc-grid .svc-card:hover { transform: scale(1.07); opacity: 1; box-shadow: var(--shadow-lg); z-index: 2; }
.svc-ico {
  width: 60px; height: 60px;
  border-radius: 14px;
  background: var(--sand);
  color: var(--brand);
  display: grid; place-items: center;
  margin-bottom: 22px;
  transition: background .4s, color .4s;
}
.svc-card:hover .svc-ico { background: var(--brand); color: var(--accent-soft); }
.svc-card h3 { font-size: 1.5rem; margin: 0 0 12px; }
.svc-card p { color: var(--muted); font-size: 1.04rem; margin: 0; }
.svc-card .more {
  margin-top: 18px; font-size: 14px; font-weight: 600;
  color: var(--accent); display: inline-flex; align-items: center; gap: 8px;
}

/* ---------- Ueber mich ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}
.about-figure { display: flex; flex-direction: column; gap: 14px; }
.about-photo {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  /* Basis = das fertige, saubere Gold (liegt unten und wird freigelegt) */
  background:
    radial-gradient(120% 75% at 50% 0%, rgba(216,184,112,0.34), transparent 62%),
    linear-gradient(165deg, #e6c98a 0%, var(--accent) 50%, #7d5a22 100%);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: border-color 1.7s ease, box-shadow 1.7s ease;
}
/* Navy-Ebene liegt ueber dem Gold (hinter Steve) und zieht sich beim Verweilen langsam
   ins Zentrum zurueck -> das Blau "geht ins Innere", darunter kommt das saubere Gold zum
   Vorschein. clip-path-Kreis ist weich animierbar (anders als Gradienten). */
.about-photo::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 75% at 50% 0%, rgba(var(--accent-rgb),0.22), transparent 62%),
    linear-gradient(165deg, #16456e 0%, var(--brand) 48%, var(--brand-700) 100%);
  clip-path: circle(140% at 50% 50%);
  transition: clip-path 1.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Nach Verweilen: Navy schrumpft sanft in die Mitte und verschwindet */
.about-photo.is-gold::before { clip-path: circle(0% at 50% 50%); }
@media (prefers-reduced-motion: reduce) {
  .about-photo::before { transition: none; }
}
.about-photo.is-gold { border-color: rgba(var(--accent-rgb), 0.5); }

/* IHK-Badge oben links: schwebt ein, sobald der Gold-Zustand kommt, und wippt sanft */
.ap-ihk {
  position: absolute; top: 16px; left: 16px; z-index: 4;
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: .4s;
  pointer-events: none;
}
.about-photo.is-gold .ap-ihk { opacity: 1; transform: translateY(0); }
.ap-ihk-inner {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 8px 20px rgba(20,30,45,0.22);
  animation: ap-ihk-float 4s ease-in-out infinite;
}
.ap-ihk-inner img { height: 16px; width: auto; display: block; }
.ap-ihk-inner span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand); white-space: nowrap;
}
@keyframes ap-ihk-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-3px, -5px); }
}
@media (prefers-reduced-motion: reduce) {
  .ap-ihk { transition: none; }
  .ap-ihk-inner { animation: none; }
}
.about-photo .ap-glow {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  width: 86%; height: 55%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb),0.22), transparent);
  pointer-events: none; z-index: 0;
}
/* Echtes Foto im Rahmen, nicht freigestellt. Bei diesen Aufnahmen gehoert die
   Umgebung zur Aussage, eine Freistellung wuerde sie entfernen und die Figur
   zu klein und ausser Mitte stehen lassen. object-position haelt den
   Oberkoerper im Bild, der Ueberschuss wird oben und unten beschnitten. */
.about-photo .ap-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 34%;
  z-index: 1;
}
.about-photo .ap-shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
  background: linear-gradient(180deg, transparent, rgba(8,24,40,0.88));
  z-index: 2; pointer-events: none;
}
.about-photo .ap-card {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3;
  padding: 18px 20px 20px; text-align: center;
  background: rgba(9,26,44,0.42);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.6);
}
.about-photo .ap-id h3 { color: #fff; font-family: "Fraunces", serif; font-size: 1.65rem; margin: 0; }
.about-photo .ap-id p { margin: 5px 0 0; font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; color: rgba(234,240,246,0.74); }
.about-photo .ap-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.about-photo .ap-stats strong { display: block; font-family: "Fraunces", serif; font-weight: 600; font-size: 1.45rem; line-height: 1; color: #fff; }
.about-photo .ap-stats strong.gold { color: var(--accent-soft); }
.about-photo .ap-stats span { display: block; margin-top: 5px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(234,240,246,0.6); }
/* Google-Bewertungs-Chip unter dem Foto */
.ap-google {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 18px;
  background: rgba(9,26,44,0.42);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  box-shadow: 0 14px 34px -24px rgba(0,0,0,0.6);
}
.ap-google .apg-logo { display: inline-flex; flex: none; }
.ap-google .apg-text { display: flex; flex-direction: column; gap: 2px; }
.ap-google .apg-rate { display: flex; align-items: center; gap: 9px; }
.ap-google .apg-rate strong { font-size: 17px; color: #fff; font-weight: 700; line-height: 1; }
.ap-google .apg-stars { display: inline-flex; gap: 1px; }
.ap-google .apg-sub { font-size: 12px; color: rgba(234,240,246,0.62); }
.about h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
/* Zitatblock */
.about-quote {
  margin: 26px 0 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--accent);
}
.about-quote p {
  margin: 0;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--on-dark);
}
.about-sig {
  margin-top: 30px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--brand);
}
.about-sig span { display: block; font-family: "Inter", sans-serif; font-style: normal; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-top: 6px; }

/* ---------- Externe Tools (Kostenrechner / Versicherung) ---------- */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.tool-card {
  border-radius: var(--radius-lg);
  padding: 40px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(155deg, var(--brand) 0%, var(--brand-700) 100%);
  color: var(--on-dark);
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s, box-shadow .4s;
}
.tool-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.tool-card.gold {
  background: linear-gradient(155deg, #C79A4B 0%, var(--accent) 100%);
  border-color: rgba(255,255,255,0.18);
}
/* Auf dunklen Sektionen (Service-Seiten): Glas statt Navy */
.dark .tool-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dark .tool-card.gold { background: linear-gradient(155deg, #C79A4B 0%, var(--accent) 100%); }
.tool-card h3 { color: #fff; font-size: 1.5rem; margin: 16px 0 10px; }
.tool-card p { color: rgba(255,255,255,0.78); margin: 0 0 26px; font-size: 0.98rem; }
.tool-ico { width: 50px; height: 50px; border-radius: 12px; background: rgba(255,255,255,0.12); display:grid; place-items:center; color:#fff; }
.tool-links { display: flex; flex-wrap: wrap; gap: 12px; }
.ext-tag { display:inline-flex; align-items:center; gap:7px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color: rgba(255,255,255,0.7); margin-top: 22px; }

/* Full-Width-Variante: jede Karte ueber volle Breite, untereinander (Text links, Aktionen rechts) */
.tool-grid.stacked { grid-template-columns: 1fr; gap: 24px; }
.tool-grid.stacked .tool-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 56px;
  padding: 44px 48px;
}
.tool-grid.stacked .tc-body { max-width: 660px; }
.tool-grid.stacked .tc-body p { margin-bottom: 0; }
.tool-grid.stacked .tc-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.tool-grid.stacked .tc-actions .ext-tag { margin-top: 0; }
@media (max-width: 820px) {
  .tool-grid.stacked .tool-card { grid-template-columns: 1fr; row-gap: 28px; padding: 36px 28px; }
  .tool-grid.stacked .tc-body { max-width: none; }
}

/* Rechner-Split: links Text, rechts Tools als Glas-Link-Zeilen (dunkle Section) */
/* Gold-Glow in allen vier Ecken der Rechner-Section */
#rechner { position: relative; overflow: hidden; }
#rechner::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 0% 0%, rgba(216,184,112,0.22), transparent 70%),
    radial-gradient(38% 42% at 100% 0%, rgba(216,184,112,0.22), transparent 70%),
    radial-gradient(38% 42% at 0% 100%, rgba(216,184,112,0.22), transparent 70%),
    radial-gradient(38% 42% at 100% 100%, rgba(216,184,112,0.22), transparent 70%);
}
#rechner > .container { position: relative; z-index: 1; }

/* Direkt-loslegen-Section: links Text, rechts Formular */
.cta-compact.cta-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center; text-align: left; max-width: none;
}
.cta-split .cta-compact-head { margin: 0; }
.cta-split .cta-compact-head h2 { margin: 14px 0 16px; }
.cta-split .cta-compact-head p { color: var(--muted); margin: 0; font-size: 1.08rem; }
.cta-split .cta-form-col .form-card { width: 100%; margin: 0; }
.cta-split .cta-form-col .form-feedback { margin: 0; }
@media (max-width: 860px) {
  .cta-compact.cta-split { grid-template-columns: 1fr; gap: 30px; }
  .wiz-intro h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .wiz-intro > p { font-size: 1rem; max-width: none; }
}

/* Intro-Spalte: Trust-Liste + Bewertung */
.wiz-intro h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.08; margin: 14px 0 16px; }
.wiz-intro > p { color: var(--muted); font-size: 1.08rem; margin: 0 0 26px; max-width: 44ch; }
.wiz-trust { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.wiz-trust li { display: flex; align-items: flex-start; gap: 12px; color: var(--text); font-weight: 500; font-size: 1rem; line-height: 1.45; }
.wiz-trust li svg { flex: 0 0 auto; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(var(--accent-rgb),0.14); color: var(--accent); }
.wiz-rating { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 0.95rem; }
.wiz-rating .wiz-stars { color: #F5B301; letter-spacing: 2px; font-size: 1.05rem; }
.wiz-rating strong { color: var(--text); }

/* Wizard-Karte */
.wiz-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 34px 34px 28px;
  overflow: hidden;
}
/* hoehere Spezifitaet als .reveal, damit Hoehen-Morph + Reveal-Einblendung beide laufen */
.cta-form-col .wiz-card {
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), height .45s cubic-bezier(.16,1,.3,1);
}
.wiz-head { margin-bottom: 26px; }
.wiz-progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.wiz-step-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
.wiz-time { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.wiz-progress { height: 6px; border-radius: 999px; background: rgba(var(--brand-rgb),0.10); overflow: hidden; }
.wiz-progress-bar { display: block; height: 100%; width: 33%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent)); transition: width .45s cubic-bezier(.16,1,.3,1); }

.wiz-step { display: none; }
.wiz-step.is-active { display: block; animation: wiz-fade .4s cubic-bezier(.16,1,.3,1) both; will-change: opacity, transform; }
@keyframes wiz-fade { from { opacity: 0; transform: translate3d(0,6px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
.wiz-step h3 { font-family: "Fraunces", serif; font-size: 1.5rem; color: var(--brand); margin: 0 0 6px; }
.wiz-sub { color: var(--muted); margin: 0 0 20px; font-size: 0.98rem; }

.wiz-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wiz-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 20px 10px; border-radius: 16px; cursor: pointer; text-align: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font-weight: 600; font-size: 0.95rem; font-family: inherit;
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .25s, background .25s;
}
.wiz-tile.is-selected { border-color: var(--accent); background: rgba(var(--accent-rgb),0.07); }
.wiz-tile:active { transform: scale(0.97); }
.wiz-tile-ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(var(--brand-rgb),0.06); color: var(--brand); transition: background .25s ease, color .25s ease; }
.wiz-tile.is-selected .wiz-tile-ico { background: rgba(var(--accent-rgb),0.14); color: var(--accent); }
/* Hover-Lift NUR auf Geraeten mit echtem Hover (kein sticky :hover auf Touch -> kein Ruckeln) */
@media (hover: hover) {
  .wiz-tile:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb),0.55); box-shadow: var(--shadow-md); }
  .wiz-tile:hover .wiz-tile-ico { background: rgba(var(--accent-rgb),0.14); color: var(--accent); }
}
.wiz-tile-wide { flex-direction: row; width: 100%; margin-top: 12px; padding: 16px; }

.wiz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.wiz-nav .btn-ghost { padding-left: 18px; padding-right: 18px; }

@media (max-width: 520px) {
  .wiz-tiles { grid-template-columns: repeat(2, 1fr); }
  .wiz-card { padding: 26px 20px 22px; }
}

.rechner-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.rechner-text .eyebrow { color: var(--accent-soft); }
.rechner-text h2 { color: #fff; margin: 14px 0 18px; font-size: clamp(2.15rem, 3.6vw, 3rem); line-height: 1.1; }
.rechner-text p { color: rgba(234,240,246,0.84); margin: 0 0 24px; max-width: 46ch; font-size: 1.14rem; line-height: 1.62; }
.rechner-tools { display: flex; flex-direction: column; gap: 14px; }
.tool-link {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px; border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s ease, border-color .35s ease;
}
.tool-link:hover { transform: translateY(-3px); background: rgba(255,255,255,0.09); border-color: rgba(var(--accent-rgb),0.5); }
.tool-link .tl-ico {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(var(--accent-rgb),0.18); color: var(--accent-soft);
}
.tool-link .tl-label { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tool-link .tl-label strong { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.12rem; color: #fff; }
.tool-link .tl-label span { font-size: 0.86rem; color: rgba(234,240,246,0.62); }
.tool-link .tl-arrow { flex: 0 0 auto; color: var(--accent-soft); transition: transform .35s ease; }
.tool-link:hover .tl-arrow { transform: translate(2px,-2px); }
@media (max-width: 820px) {
  .rechner-split { grid-template-columns: 1fr; gap: 34px; }
  .rechner-text p { max-width: none; }
}

/* ---------- Rechner: vollbreite, fette Sektionen (Navy / Gold) ---------- */
.calc-band { color: #fff; position: relative; overflow: hidden; }
.calc-band.navy {
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(216,184,112,0.16), transparent 55%),
    linear-gradient(155deg, var(--brand) 0%, var(--brand-700) 100%);
}
.calc-band.gold {
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(255,255,255,0.18), transparent 55%),
    linear-gradient(155deg, #C79A4B 0%, var(--accent) 100%);
}
/* Goldene Akzentlinie oben */
.calc-band::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(216,184,112,0.85), transparent);
}
.calc-band.gold::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); }
/* Uebergrosses Geister-Icon (fuellt den Raum, schafft Tiefe) */
.calc-band .cb-deco {
  position: absolute; top: 50%; right: 4%; transform: translateY(-50%);
  width: clamp(220px, 28vw, 380px); aspect-ratio: 1; z-index: 0;
  color: #fff; opacity: 0.07; pointer-events: none;
}
.calc-band .cb-deco svg { width: 100%; height: 100%; }
.calc-band .container {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 56px;
}
.calc-band .cb-body { max-width: 600px; }
.calc-band .cb-eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.calc-band .cb-ico {
  width: 52px; height: 52px; border-radius: 13px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  display: grid; place-items: center; color: #fff;
  margin-bottom: 18px;
}
.calc-band h3 { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.15rem); margin: 0 0 12px; }
.calc-band p { color: rgba(255,255,255,0.82); margin: 0; font-size: 1.04rem; }
.calc-band .cb-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.calc-band .cb-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.calc-band .ext-tag { margin-top: 0; }
@media (max-width: 820px) {
  .calc-band .cb-deco { right: -6%; opacity: 0.05; }
  .calc-band .container { grid-template-columns: 1fr; gap: 28px; }
  .calc-band .cb-body { max-width: none; }
  .calc-band .cb-actions { align-items: flex-start; }
  .calc-band .cb-links { justify-content: flex-start; }
}

/* ---------- Ablauf-Timeline (Scroll-Fortschritt) ---------- */
.timeline { position: relative; max-width: 760px; margin: 0 auto; }
.tl-track {
  position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px;
  background: var(--line-strong); border-radius: 2px; overflow: hidden;
}
.tl-progress {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  border-radius: 2px; transition: height .12s linear;
}
.tl-step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 26px; padding-bottom: 42px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-node {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-strong);
  display: grid; place-items: center; z-index: 2;
  font-family: "Fraunces", serif; font-size: 1.15rem; font-weight: 600; color: var(--muted);
  transition: background .4s cubic-bezier(.16,1,.3,1), border-color .4s, color .4s, box-shadow .4s, transform .4s;
}
.tl-step.reached .tl-node {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 10px 24px -12px rgba(14,46,71,0.55); transform: scale(1.06);
}
.tl-card { padding-top: 8px; }
.tl-card h3 { font-size: 1.3rem; margin: 0 0 6px; color: var(--brand); transition: color .5s ease; }
.tl-card p { color: var(--muted); margin: 0; font-size: 1rem; }

/* ---------- Ziel erreicht: ganze Ablauf-Section leuchtet golden auf ---------- */
#ablauf { transition: background .9s ease; }
#ablauf::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 55% at 50% 62%, rgba(216,184,112,0.20), transparent 72%);
  opacity: 0; transition: opacity 1s ease;
}
#ablauf.goal { background: #FFFDF8; }
#ablauf.goal::after { opacity: 1; }
#ablauf > .container { position: relative; z-index: 1; }
/* Linie + alle Knoten werden golden, sanfter Glanz */
#ablauf.goal .tl-track { background: rgba(216,184,112,0.35); }
#ablauf.goal .tl-progress { box-shadow: 0 0 16px 2px rgba(216,184,112,0.75); }
#ablauf.goal .tl-node {
  background: linear-gradient(150deg, var(--accent-soft), var(--accent));
  border-color: var(--accent-soft); color: #fff;
  box-shadow: 0 0 0 5px rgba(216,184,112,0.18), 0 12px 28px -12px rgba(181,136,60,0.7);
}
#ablauf.goal .tl-card h3 { color: #8A6526; }
/* finaler Schritt: feiner Puls als "geschafft"-Moment */
#ablauf.goal .tl-step:last-child .tl-node { animation: tlGoalPulse 1.8s ease-in-out infinite; }
@keyframes tlGoalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,184,112,0.55), 0 12px 28px -12px rgba(181,136,60,0.7); }
  50% { box-shadow: 0 0 0 14px rgba(216,184,112,0), 0 12px 28px -12px rgba(181,136,60,0.7); }
}
@media (prefers-reduced-motion: reduce) {
  #ablauf.goal .tl-step:last-child .tl-node { animation: none; }
}

/* ---------- Partner ---------- */
.partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.partner-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  display: flex; flex-direction: column;
  transition: transform .22s ease-out, box-shadow .22s ease-out, opacity .22s ease-out;
}
.partner-grid:hover .partner-card { transform: scale(0.95); opacity: 0.5; }
.partner-grid .partner-card:hover { transform: scale(1.05); opacity: 1; box-shadow: var(--shadow-lg); z-index: 2; }
.partner-logo {
  font-family:"Fraunces",serif; font-size: 1.5rem; color: var(--brand); font-weight:600;
  display:flex; align-items:center; gap: 12px; margin-bottom: 14px;
}
.partner-logo .dot { width: 36px; height: 36px; border-radius: 9px; background: var(--sand); display:grid; place-items:center; color: var(--accent); }
.partner-card p { color: var(--muted); font-size: 0.96rem; flex: 1; }
.partner-card .more { margin-top: 18px; color: var(--accent); font-weight: 600; font-size: 14px; display:inline-flex; gap:8px; align-items:center; }

/* Partner-Karte mit Hintergrundbild */
.partner-card.has-img { position: relative; overflow: hidden; border: none; color: #fff; min-height: 300px; justify-content: flex-end; }
.partner-card.has-img .pc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: scale(1.06); filter: blur(3px); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.partner-card.has-img:hover .pc-bg { transform: scale(1.1); }
.partner-card.has-img.zoom .pc-bg { transform: scale(1.28); }
.partner-card.has-img.zoom:hover .pc-bg { transform: scale(1.33); }
.partner-card.has-img .pc-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 130% 100% at 50% 40%, transparent 30%, rgba(8,26,42,0.62) 100%), linear-gradient(180deg, rgba(14,46,71,0.40) 0%, rgba(10,34,54,0.90) 100%); z-index: 1; }
.partner-card.has-img > *:not(.pc-bg):not(.pc-overlay) { position: relative; z-index: 2; }
.partner-card.has-img .partner-logo { color: #fff; }
.partner-card.has-img .partner-logo .dot { background: rgba(255,255,255,0.14); color: var(--accent-soft); }
.partner-card.has-img p { color: rgba(255,255,255,0.86); }
.partner-card.has-img .more { color: var(--accent-soft); }

/* Makler-Section auf dunkel: Foto-Platzhalter + helle Texte */
.about-photo.photo-pending { background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.22); box-shadow: none; }
.about-photo.photo-pending .pending-label { display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(234,240,246,0.72); font-size: 14px; letter-spacing: 0.04em; text-align: center; padding: 0 24px; }
.about-photo.photo-pending .pending-label svg { color: var(--accent-soft); }
.dark .about-sig { color: #fff; }
.dark .about-photo .ring { border-color: rgba(var(--accent-rgb), 0.55); }

/* Partner-Logos in der Makler-Section (reziproke Verlinkung) */
#partner.about-partners { background: transparent; margin-top: 38px; }
.about-partners .ap-label { margin: 0 0 14px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(234,240,246,0.6); }
.about-partners .ap-logos { display: flex; flex-wrap: wrap; gap: 14px; }
.about-partners .ap-logo {
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--accent-soft), var(--accent)); border-radius: 14px;
  padding: 16px 24px; min-height: 66px; min-width: 158px;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.5), 0 12px 28px -10px rgba(var(--accent-rgb), 0.7);
  transition: transform .22s ease-out, box-shadow .22s ease-out;
}
.about-partners .ap-logo:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.75), 0 18px 38px -12px rgba(var(--accent-rgb), 0.85); }
.about-partners .ap-logo img { display: block; height: 34px; width: auto; }
@media (max-width: 520px) { .about-partners .ap-logo { flex: 1 1 100%; } }

/* ---------- Foto-Band (Sektion mit Hintergrundbild) ---------- */
.img-band { position: relative; overflow: hidden; background: var(--brand); }
.img-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img-band .ib-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,46,71,0.80), rgba(10,34,54,0.86)); }
.img-band .ib-content { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 120px 24px; text-align: center; }
.img-band h2 { color: #fff; font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.img-band p { color: rgba(234,240,246,0.82); margin-top: 16px; font-size: 1.05rem; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; }
.contact-info .ci-person { display:flex; align-items:center; gap:16px; padding-bottom:22px; margin-bottom:4px; border-bottom:1px solid rgba(255,255,255,0.14); }
.contact-info .ci-person img { width:74px; height:74px; border-radius:50%; object-fit:cover; object-position:center 20%; border:2px solid rgba(216,184,112,0.6); flex:none; }
.contact-info .ci-person-txt strong { display:block; font-family:"Fraunces",serif; font-size:1.3rem; color:#fff; line-height:1.1; }
.contact-info .ci-person-txt span { display:block; font-size:0.86rem; color:rgba(234,240,246,0.7); margin-top:3px; }
.contact-info .ci-item { display:flex; gap:16px; align-items:flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-info .ci-item:last-child { border-bottom: none; }
.contact-info .ci-ico { width:44px; height:44px; border-radius:11px; background: var(--sand); color: var(--brand); display:grid; place-items:center; flex:none; }
.contact-info .ci-item .lbl { font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.contact-info .ci-item .val { font-size: 1.05rem; color: var(--text); font-weight:500; margin-top: 2px; }
.contact-info .ci-item .val small { display:block; color: var(--muted); font-weight:400; font-size: 0.85rem; }

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.field { margin-bottom: 18px; }
.field label { display:block; font-size: 13px; font-weight:600; color: var(--brand); margin-bottom: 8px; letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--text);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}
.field textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; }

/* ---------- Final CTA ---------- */
.cta-band {
  text-align: center;
  border-radius: 28px;
  padding: 60px 40px;
  background:
    radial-gradient(620px 320px at 22% -5%, rgba(var(--accent-rgb), 0.16), transparent 55%),
    radial-gradient(620px 360px at 88% 112%, rgba(58, 104, 143, 0.32), transparent 55%),
    linear-gradient(155deg, #0c2336 0%, #07182a 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 40px 80px -50px rgba(0,0,0,0.55);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color:#fff; font-size: clamp(2rem, 4vw, 3rem); }
.cta-band p { color: var(--on-dark-muted); max-width: 560px; margin: 16px auto 0; }
.cta-benefits { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 26px; margin: 24px 0 30px; }
.cta-benefits span { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--on-dark); font-weight: 500; }
.cta-benefits svg { color: var(--accent-soft); flex: none; }
.cta-buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cta-divider { height: 1px; background: rgba(255,255,255,0.12); max-width: 600px; margin: 32px auto 22px; }
.cta-trust { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 26px; }
.cta-trust .ct-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--on-dark-muted); }
.cta-trust .ct-item svg { color: var(--accent-soft); flex: none; }
.cta-trust .stars { color: var(--accent-soft); letter-spacing: 1px; font-size: 13px; }

/* ---------- Footer ---------- */
.footer { background: var(--brand-700); color: var(--on-dark); padding: 72px 0 32px; }
.footer h4 { color: #fff; font-family:"Inter",sans-serif; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 18px; opacity: 0.7; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer a { color: var(--on-dark-muted); font-size: 14.5px; display:block; padding: 5px 0; transition: color .2s; }
.footer a:hover { color: var(--accent-soft); }
.footer .brandmark { color: #fff; margin-bottom: 16px; }
.footer .brandmark .logo-k { background: #fff; }
.footer .legal-note { font-size: 13px; color: var(--on-dark-muted); line-height: 1.7; }
.footer-bottom {
  margin-top: 50px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display:flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--on-dark-muted);
}
.placeholder-pill {
  display:inline-block; font-size: 11px; letter-spacing: 0.06em;
  background: rgba(var(--accent-rgb), 0.18); color: var(--accent-soft);
  border: 1px dashed rgba(var(--accent-rgb), 0.5);
  padding: 2px 8px; border-radius: 6px; margin-left: 6px; vertical-align: middle;
}

/* ---------- Reveal-Animation ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.15s cubic-bezier(.16,1,.3,1), transform 1.15s cubic-bezier(.16,1,.3,1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .12s; }
.reveal.d2 { transition-delay: .24s; }
.reveal.d3 { transition-delay: .36s; }
.reveal.d4 { transition-delay: .48s; }

/* Ratgeber-Karten: sauberer, klar gestaffelter Auftritt von unten nach oben */
#ratgeber .rg-card.reveal {
  transform: translateY(46px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
#ratgeber .rg-card.reveal.active { transform: translateY(0); }
#ratgeber .rg-card.reveal.d1 { transition-delay: .05s; }
#ratgeber .rg-card.reveal.d2 { transition-delay: .18s; }
#ratgeber .rg-card.reveal.d3 { transition-delay: .31s; }

/* ---------- Marquee / Scrolling-Bar unter Hero ---------- */
.marquee { background: linear-gradient(180deg, var(--brand), var(--brand-700)); overflow: hidden; padding: 17px 0; }
.marquee-track { display: flex; align-items: center; width: max-content; white-space: nowrap; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .kw { color: rgba(255,255,255,0.92); font-family: "Fraunces", serif; font-size: 1.15rem; letter-spacing: 0.01em; padding: 0 26px; }
.marquee .sep { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Footer: gebaut von PStudio ---------- */
.footer-bottom .footer-credit-logo { height: 19px; width: auto; opacity: 0.55; transition: opacity .25s; }
.footer-bottom .footer-credit-logo:hover { opacity: 0.9; }

/* ---------- Micro-Interactions (/animate) ---------- */
/* Tactiles Press-Feedback auf allen Buttons */
.btn:active { transform: scale(0.96); }
/* Formular-Fehler: dezentes Shake */
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.field.invalid input, .field.invalid select, .field.invalid textarea { animation: shake .35s cubic-bezier(.16,1,.3,1); }
/* Formular-Erfolg/Fehler: weiches Einblenden */
.form-feedback.show { animation: fb-in .4s cubic-bezier(.16,1,.3,1); }
@keyframes fb-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Barrierefreiheit: Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Aktive Seite in der Navigation ---------- */
.nav-links a.active { opacity: 1; color: var(--brand); }
.nav.scrolled .nav-links a.active { color: var(--brand); }
/* Mitwandernde Gold-Linie (Magic-Line) unter dem aktiven Wort */
.nav-underline {
  position: absolute;
  left: 0; top: 0; width: 0; height: 2.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  box-shadow: 0 2px 10px -2px rgba(var(--accent-rgb), 0.75);
  opacity: 0;
  transition: left .5s cubic-bezier(.16,1,.3,1), width .5s cubic-bezier(.16,1,.3,1), opacity .35s ease;
  pointer-events: none;
}
.nav-underline.show { opacity: 1; }

/* ---------- Leistungen-Dropdown (Hover) ---------- */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-item .caret { transition: transform .25s; opacity: 0.7; }
.nav-item.has-dropdown:hover .caret { transform: rotate(180deg); }
/* unsichtbare Hover-Bruecke, damit der Abstand den Hover nicht abreisst */
.nav-item.has-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 280px; padding: 10px;
  background: var(--brand);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden;
  transition: opacity .22s, transform .22s, visibility .22s;
  z-index: 70;
}
.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(12px);
}
.dropdown a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 11px; font-size: 14.5px;
  color: rgba(255,255,255,0.82); opacity: 1; white-space: nowrap;
}
.dropdown a::after { display: none; }
.dropdown a .dd-ico {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: rgba(255,255,255,0.07); color: var(--accent-soft);
  display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.dropdown a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.dropdown a:hover .dd-ico { background: var(--accent); color: #fff; }

/* ---------- Mobile-Burger + Off-Canvas-Menue ---------- */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  align-items: center; justify-content: center;
  transition: color .45s, border-color .45s, background .45s;
}
.nav.scrolled .nav-burger { color: var(--brand); border-color: rgba(14,46,71,0.18); }
.nav-burger svg { display: block; }

/* ---------- Sub-Page Hero (Unterseiten-Kopf) ---------- */
.page-hero {
  padding: 178px 0 70px;
  background:
    radial-gradient(900px 420px at 82% -10%, rgba(var(--accent-rgb), 0.10), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); margin: 18px 0 0; }
.page-hero p { color: var(--muted); font-size: 1.12rem; margin-top: 18px; max-width: 620px; }
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.breadcrumb a { color: var(--accent); }

/* ---------- Leistungs-Detailblock (Unterseite) ---------- */
.svc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--line); }
.svc-detail:last-child { border-bottom: none; }
.svc-detail.flip .svc-detail-media { order: 2; }
.svc-detail-media { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--sand); }
.svc-detail-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-detail h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.svc-detail p { color: var(--muted); margin: 14px 0 18px; }
.svc-detail ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.svc-detail li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.97rem; }
.svc-detail li svg { color: var(--accent); margin-top: 3px; flex: none; }

/* ---------- Werte-/Trust-Liste (Ueber mich) ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.value-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.value-card .v-ico { width: 50px; height: 50px; border-radius: 13px; background: var(--sand); color: var(--brand); display: grid; place-items: center; margin-bottom: 18px; }
.value-card h3 { font-size: 1.2rem; margin: 0 0 8px; }
.value-card p { color: var(--muted); font-size: 0.96rem; margin: 0; }

/* ---------- Formular-States ---------- */
.field-error { font-size: 12.5px; color: #B23A2E; margin-top: 6px; display: none; }
.field.invalid .field-error { display: block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #B23A2E; }
.form-feedback { display: none; border-radius: 14px; padding: 26px; text-align: center; }
.form-feedback.show { display: block; }
.form-feedback.success { background: rgba(20,120,80,0.08); border: 1px solid rgba(20,120,80,0.25); }
.form-feedback.error { background: rgba(178,58,46,0.07); border: 1px solid rgba(178,58,46,0.25); }
.form-feedback h3 { color: var(--brand); margin: 12px 0 8px; }
.form-feedback p { color: var(--muted); margin: 0; font-size: 0.96rem; }
.form-feedback .fb-ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; }
.form-feedback.success .fb-ico { background: rgba(20,120,80,0.14); color: #157850; }
.form-feedback.error .fb-ico { background: rgba(178,58,46,0.12); color: #B23A2E; }
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.btn .spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: none; }
.btn[aria-busy="true"] .spinner { display: inline-block; }
.btn[aria-busy="true"] .btn-label, .btn[aria-busy="true"] .arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.contact-info .ci-item a.val { transition: color .2s; }
.contact-info .ci-item a.val:hover { color: var(--accent); }

/* ---------- Prose / Legal-Seiten ---------- */
/* Linksbuendig an derselben Kante wie die Seiten-Headline. Zuvor stand hier
   margin: 0 auto, wodurch der Text im Container zentriert wurde und 186 Pixel
   weiter rechts begann als die Ueberschrift darueber. Die Begrenzung auf 760
   Pixel bleibt, sie haelt die Zeilenlaenge in den Rechtstexten lesbar. */
.prose { max-width: 760px; margin: 0; }
.prose h2 { font-size: 1.5rem; margin: 38px 0 12px; }
.prose h3 { font-size: 1.15rem; margin: 24px 0 8px; }
.prose p, .prose li { color: var(--text); font-size: 1rem; line-height: 1.75; }
.prose ul { padding-left: 20px; }
.prose .legal-pill { display:inline-block; font-size: 12px; background: rgba(var(--accent-rgb),0.12); color: #8a6a2c; border: 1px dashed rgba(var(--accent-rgb),0.5); padding: 2px 8px; border-radius: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero-band { margin-left: 0; width: 100%; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-figure { max-width: 460px; margin: 0 auto; width: 100%; }
  .hero-visual { aspect-ratio: 4/5; }
  .hero-reviews { position: static; left: auto; bottom: auto; width: 100%; margin-top: 16px; }
  .hero-features { grid-template-columns: 1fr; margin-top: 40px; }
  .hero-features .hf-item { border-left: none; border-top: 1px solid var(--line); padding: 18px 4px; }
  .hero-features .hf-item:first-child { border-top: none; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-figure { max-width: 420px; margin: 0 auto; width: 100%; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .svc-grid, .value-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .svc-detail { grid-template-columns: 1fr; gap: 26px; }
  .svc-detail.flip .svc-detail-media { order: 0; }
}
@media (max-width: 760px) {
  .nav-burger { display: inline-flex; }
  .nav-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: rgba(14,46,71,0.96);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px; padding: 14px;
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links a { color: rgba(255,255,255,0.86); opacity: 1; padding: 12px 14px; border-radius: 10px; font-size: 16px; }
  .nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(255,255,255,0.08); }
  .nav-links a.active::after { display: none; }
  .nav-underline { display: none; }
  .nav-inner { position: relative; }
  .nav-cta { display: none; }
  /* Dropdown im Burger als statische Unterliste */
  .nav-item { flex-direction: column; align-items: stretch; }
  .nav-item .caret { display: none; }
  .dropdown {
    position: static; transform: none; min-width: 0;
    opacity: 1; visibility: visible;
    background: transparent; border: none; box-shadow: none;
    padding: 2px 0 6px 14px; gap: 0;
  }
  .dropdown a { color: rgba(255,255,255,0.66); font-size: 14.5px; padding: 9px 14px; }
  .dropdown a:hover { background: rgba(255,255,255,0.08); color: #fff; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .section { padding: 78px 0; }
  .hero { padding: 84px 0 64px; }
  .page-hero { padding: 140px 0 56px; }
  .svc-grid, .tool-grid, .partner-grid, .form-row, .value-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-badge { top: 14px; right: 12px; }
}


/* ============================================================
   PREMIUM-REFINEMENT v2 (alle Sektionen ausser Hero/Ueber-mich)
   Angehaengt: ueberschreibt vorherige Section-Regeln per Cascade
   ============================================================ */
/* ============================================================
   Klar Finanz - Veredelung: Marquee + Leistungen
   Nur CSS, an styles.css anzuhaengen (ueberschreibt bestehende Regeln).
   Tokens: --brand #0E2E47, --brand-700, --accent #B5883C, --accent-soft #D8B870,
   --bg #FBF8F3, --sand #F2ECE1, --line, --text, --muted.
   ============================================================ */

/* ============================================================
   1) MARQUEE - dezentes Premium-Scrollband
   Heller Ivory/Sand-Ton statt Navy-Block, gepflegte Muted/Navy-Keywords,
   Gold-Punkt als Separator, ruhige Geschwindigkeit, feine Linien oben/unten,
   weiche Rand-Fade-Maske links/rechts.
   ============================================================ */
.marquee {
  position: relative;
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--sand) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  overflow: hidden;
  /* weiche Rand-Fade-Maske links/rechts */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
/* feine Gold-Hairline mittig auf der oberen Kante */
.marquee::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.45), transparent);
  z-index: 1;
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .kw {
  color: var(--brand);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 1.06rem;
  letter-spacing: 0.005em;
  opacity: 0.62;
  padding: 0 30px;
  transition: opacity .35s ease, color .35s ease;
}
.marquee:hover .kw { opacity: 0.82; }
.marquee .sep {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  opacity: 0.85;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.10);
}

/* ============================================================
   2) LEISTUNGEN - edlere Service-Karten
   Weicher Verlauf statt Flat, feine Linie, Hover-Lift (translateY -4px) +
   duenne Gold-Linie oben + leuchtender Gold-Icon-Chip mit Ring/Innen-Glanz.
   Ersetzt das bisherige scale-down/scale-up-Grid-Hover-Pattern.
   ============================================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fff 0%, #FCFAF6 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 40px 36px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform .24s cubic-bezier(.16,1,.3,1),
    box-shadow .24s cubic-bezier(.16,1,.3,1),
    border-color .24s ease;
  will-change: transform;
}
/* Press-Feedback: Card reagiert spuerbar auf den Klick (Emil) */
.svc-card:active { transform: translateY(-2px) scale(0.985); transition-duration: .11s; }
/* duenne Gold-Linie oben, blendet bei Hover ein (Marken-Pattern wie .hero-trust) */
.svc-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  z-index: 3;
}

/* bisheriges Grid-Hover (Geschwister verkleinern) deaktivieren */
.svc-grid:hover .svc-card { transform: none; opacity: 1; }

/* ruhiger Marken-Hover: Lift + staerkerer Schatten + Gold-Hairline + Goldkante */
.svc-grid .svc-card:hover,
.svc-card:hover,
.svc-card:focus-visible {
  transform: translateY(-4px);
  opacity: 1;
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--accent-rgb), 0.40);
  z-index: 2;
}
.svc-card:hover::before,
.svc-card:focus-visible::before { transform: scaleX(1); }

/* ---- Icon-Chip: gold-getoentes gerundetes Quadrat mit Ring + Innen-Glanz ---- */
.svc-ico {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 28% 22%, rgba(255,255,255,0.85), transparent 58%),
    linear-gradient(160deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.30),
    0 6px 16px -10px rgba(var(--accent-rgb), 0.55);
  color: var(--accent);
  display: grid; place-items: center;
  margin-bottom: 24px;
  transition: transform .24s cubic-bezier(.16,1,.3,1), box-shadow .24s ease, background .24s ease, color .24s ease;
}
/* Chip leuchtet bei Hover golden auf */
.svc-card:hover .svc-ico {
  background:
    radial-gradient(120% 120% at 28% 22%, rgba(255,255,255,0.55), transparent 58%),
    linear-gradient(160deg, var(--accent-soft), var(--accent));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.55),
    0 14px 30px -12px rgba(var(--accent-rgb), 0.75);
  transform: translateY(-1px);
}
.svc-ico svg { position: relative; z-index: 1; }

/* ---- Typo-Rhythmus h3 / p verfeinern ---- */
.svc-card h3 {
  font-size: 1.42rem;
  line-height: 1.18;
  margin: 0 0 10px;
  letter-spacing: -0.012em;
}
.svc-card p {
  color: var(--muted);
  font-size: 1.0rem;
  line-height: 1.62;
  margin: 0;
}

/* ---- Mehr-Link: Pfeil gleitet bei Hover nach rechts ---- */
.svc-card .more {
  margin-top: auto;
  padding-top: 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.svc-card .more .arrow {
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.svc-card:hover .more .arrow { transform: translateX(5px); }

/* ============================================================
   2b) Dunkle Akzent-Card "Alles aus einer Hand"
   Hintergrund kommt per inline-style (navy gradient) -> wir setzen nur
   Ring/Glow/Hover-Akzent. Selektor ueber das inline-Background-Attribut,
   damit wir die Card sicher treffen ohne HTML zu aendern.
   ============================================================ */
.svc-card[style*="var(--brand)"] {
  border: 1px solid rgba(var(--accent-rgb), 0.34) !important; /* ueberschreibt inline border:none */
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.20),
    var(--shadow-md),
    0 0 50px -18px rgba(var(--accent-rgb), 0.45);
}
/* dezenter goldener Innen-Schein oben rechts */
.svc-card[style*="var(--brand)"]::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(150% 110% at 88% -10%, rgba(var(--accent-rgb), 0.30), transparent 58%);
  pointer-events: none;
  z-index: 0;
}
.svc-card[style*="var(--brand)"] > * { position: relative; z-index: 1; }
/* Gold-Hairline oben auch hier sichtbar lassen */
.svc-card[style*="var(--brand)"]::before {
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
}
.svc-card[style*="var(--brand)"]:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.60) !important;
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.40),
    var(--shadow-lg),
    0 0 70px -16px rgba(var(--accent-rgb), 0.60);
}
/* Icon-Chip der dunklen Card: gold auf transluzentem Weiss, mit Gold-Ring */
.svc-card[style*="var(--brand)"] .svc-ico {
  background:
    radial-gradient(120% 120% at 28% 22%, rgba(255,255,255,0.22), transparent 58%),
    rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.45);
  color: var(--accent-soft);
}
.svc-card[style*="var(--brand)"]:hover .svc-ico {
  background:
    radial-gradient(120% 120% at 28% 22%, rgba(255,255,255,0.45), transparent 58%),
    linear-gradient(160deg, var(--accent-soft), var(--accent));
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.30),
    0 14px 30px -12px rgba(var(--accent-rgb), 0.75);
}
.svc-card[style*="var(--brand)"]:hover .more .arrow { transform: translateX(5px); }

/* ============================================================
   3) Responsive - bestehende Breakpoints respektieren
   (940px -> 2 Spalten, 680px -> 1 Spalte sind in styles.css definiert;
   nur Innenabstaende fuer kleine Screens leicht entspannen)
   ============================================================ */
@media (max-width: 680px) {
  .svc-card { padding: 32px 26px; }
  .marquee .kw { font-size: 1.0rem; padding: 0 22px; }
}

/* Reduced Motion: keine Pfeil-/Lift-Bewegung erzwingen */
@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card .more .arrow,
  .svc-ico { transition: none; }
  .marquee-track { animation: none; }
}

/* ============================================================
   Klar Finanz - Veredelung: Rechner/Tools + Partner
   Nur CSS, haengt ans Ende von styles.css an (ueberschreibt sauber).
   Tokens unveraendert: Navy/Gold/Ivory/Sand. Keine neuen Fonts/Farben.
   ============================================================ */

/* ============================================================
   1. RECHNER / TOOLS  -  vollbreite Baender (.calc-band navy + gold)
   Plus Vorschalt-Head section#rechner .section-head.center
   ============================================================ */


/* ---- 1.1 Band-Grundlage: mehr Tiefe, weicheres Premium-Padding ---- */
.calc-band {
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Navy-Band: gold-getoente Glows + ruhige Tiefe */
.calc-band.navy {
  background:
    radial-gradient(135% 150% at 90% -10%, rgba(var(--accent-rgb), 0.20), transparent 52%),
    radial-gradient(90% 120% at 6% 110%, rgba(var(--accent-rgb), 0.08), transparent 55%),
    linear-gradient(152deg, #103553 0%, var(--brand) 46%, var(--brand-700) 100%);
}

/* Gold-Band: warmes Gold mit Tiefe, Text wird dunkel (siehe 1.6) */
.calc-band.gold {
  background:
    radial-gradient(135% 150% at 90% -10%, rgba(255,250,240,0.12), transparent 56%),
    radial-gradient(95% 125% at 4% 118%, rgba(74,50,16,0.34), transparent 58%),
    linear-gradient(152deg, #CDAA63 0%, #B08537 46%, #8C6328 100%);
}

/* feine goldene/helle Hairline oben + dezente untere Trennlinie */
.calc-band::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.9), transparent);
}
.calc-band.gold::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
}
.calc-band::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
}
.calc-band.gold::after {
  background: linear-gradient(90deg, transparent, rgba(138,101,38,0.28), transparent);
}

/* ---- 1.2 Deko: grosses transparentes Outline-Icon in der Ecke ---- */
.calc-band .cb-deco {
  position: absolute; top: 50%; right: 3%;
  transform: translateY(-50%) rotate(-6deg);
  width: clamp(230px, 30vw, 420px); aspect-ratio: 1; z-index: 0;
  color: #fff; opacity: 0.08; pointer-events: none;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.18));
}
.calc-band.navy .cb-deco { color: var(--accent-soft); opacity: 0.10; }
.calc-band.gold .cb-deco { color: var(--brand-700); opacity: 0.10; }
.calc-band .cb-deco svg { width: 100%; height: 100%; }

/* ---- 1.3 Layout: ruhiger, mehr Weissraum ---- */
.calc-band .container {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 64px;
}
.calc-band .cb-body { max-width: 560px; }

/* ---- 1.4 Icon-Chip: gerundetes Glas-/Gold-Element ---- */
.calc-band .cb-ico {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  margin-bottom: 22px;
  background: linear-gradient(155deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 14px 30px -18px rgba(0,0,0,0.55);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.calc-band.navy .cb-ico { color: var(--accent-soft); }
.calc-band.gold .cb-ico {
  background: linear-gradient(155deg, rgba(14,46,71,0.16), rgba(14,46,71,0.05));
  border-color: rgba(14,46,71,0.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 14px 30px -18px rgba(138,101,38,0.6);
  color: var(--brand-700);
}

/* ---- 1.5 Hierarchie: Eyebrow / h3 / p ---- */
.calc-band .cb-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
.calc-band .cb-eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: var(--accent-soft);
}
.calc-band h3 {
  color: #fff; font-size: clamp(1.65rem, 2.7vw, 2.2rem);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 14px;
}
.calc-band p {
  color: rgba(255,255,255,0.84); margin: 0; font-size: 1.05rem;
  max-width: 50ch;
}

/* ---- 1.6 Gold-Band: dunkler Navy-Text fuer Kontrast/Lesbarkeit ---- */
.calc-band.gold .cb-eyebrow {
  color: var(--brand-700);
}
.calc-band.gold .cb-eyebrow::before {
  background: var(--brand-700);
  opacity: 0.55;
}
.calc-band.gold h3 { color: var(--brand-700); }
.calc-band.gold p { color: rgba(10,34,54,0.82); }

/* ---- 1.7 Actions + edle btn-ondark ---- */
.calc-band .cb-actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: 18px;
}
.calc-band .cb-links {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end;
}

/* Buttons im Navy-Band: feines Glas mit Gold-Hauch */
.calc-band .btn-ondark {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.26);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.calc-band .btn-ondark:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(var(--accent-rgb), 0.55);
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -20px rgba(0,0,0,0.6);
}

/* Buttons im Gold-Band: solides Navy fuer hohen Kontrast */
.calc-band.gold .btn-ondark {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 16px 34px -20px rgba(10,34,54,0.7);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.calc-band.gold .btn-ondark:hover {
  background: var(--brand-700);
  border-color: var(--brand-700);
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -20px rgba(10,34,54,0.8);
}

/* ---- 1.8 ext-tag dezent, an Bandfarbe angepasst ---- */
.calc-band .ext-tag {
  margin-top: 0;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.calc-band.gold .ext-tag {
  color: rgba(10,34,54,0.6);
}

/* ---- 1.9 Responsiv ---- */
@media (max-width: 820px) {
  .calc-band .cb-deco {
    right: -8%; opacity: 0.06;
    transform: translateY(-50%) rotate(-6deg);
  }
  .calc-band.navy .cb-deco { opacity: 0.08; }
  .calc-band.gold .cb-deco { opacity: 0.08; }
  .calc-band .container { grid-template-columns: 1fr; gap: 30px; }
  .calc-band .cb-body { max-width: none; }
  .calc-band .cb-actions { align-items: flex-start; }
  .calc-band .cb-links { justify-content: flex-start; }
  .calc-band p { max-width: none; }
}



/* ============================================================
   2. PARTNER  -  section#partner Bild-Cards (.partner-card.has-img)
   ============================================================ */

/* ---- 2.0 Section-Head: ruhiges Editorial ---- */
#partner .section-head { max-width: 640px; }

/* ---- 2.1 Grid: etwas grosszuegigere Rinne ---- */
.partner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

/* ---- 2.2 Card-Grundlage + edler Hover-Lift (Marken-Pattern) ----
   Ersetzt das aggressive Geschwister-Dimming durch ruhigen Lift. */
.partner-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 38px;
  display: flex; flex-direction: column;
  transition:
    transform .24s cubic-bezier(.16,1,.3,1),
    box-shadow .24s cubic-bezier(.16,1,.3,1),
    border-color .24s ease;
  will-change: transform;
}
.partner-grid:hover .partner-card { transform: none; opacity: 1; }
.partner-grid .partner-card:hover {
  transform: translateY(-4px); opacity: 1; z-index: 2;
  box-shadow: var(--shadow-lg);
}

/* ---- 2.3 Bild-Cards: Tiefe, Radius, satter Navy-Verlauf ---- */
.partner-card.has-img {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff; min-height: 340px;
  justify-content: flex-end;
  padding: 36px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.partner-card.has-img .pc-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transform: scale(1.06); filter: none;
  transition: transform .7s cubic-bezier(.16,1,.3,1), filter .7s ease;
}
.partner-card.has-img.zoom .pc-bg { transform: scale(1.12); }

/* sanfter Bild-Zoom beim Hover */
.partner-card.has-img:hover .pc-bg { transform: scale(1.12); }
.partner-card.has-img.zoom:hover .pc-bg { transform: scale(1.18); }

/* ---- 2.4 Overlay: satter Navy-Verlauf von unten fuer Lesbarkeit ---- */
.partner-card.has-img .pc-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,46,71,0.06) 0%, rgba(12,38,59,0.46) 52%, rgba(8,26,42,0.92) 100%),
    radial-gradient(120% 80% at 50% 120%, rgba(8,26,42,0.55), transparent 70%);
  transition: background .4s ease;
}
.partner-card.has-img:hover .pc-overlay {
  background:
    linear-gradient(180deg, rgba(14,46,71,0.10) 0%, rgba(12,38,59,0.52) 50%, rgba(8,26,42,0.94) 100%),
    radial-gradient(120% 80% at 50% 120%, rgba(8,26,42,0.6), transparent 70%);
}

/* feiner Gold-Ring beim Hover (innere Linie ueber dem Bild) */
.partner-card.has-img::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; pointer-events: none;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0);
  transition: border-color .4s ease, box-shadow .4s ease;
}
.partner-card.has-img:hover::after {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.22);
}

.partner-card.has-img > *:not(.pc-bg):not(.pc-overlay) {
  position: relative; z-index: 2;
}

/* ---- 2.5 Logo-Zeile: Glas-Chip mit Gold-Punkt ---- */
.partner-logo {
  font-family: "Fraunces", serif; font-size: 1.55rem;
  color: var(--brand); font-weight: 600;
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.partner-logo .dot {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--sand); display: grid; place-items: center;
  color: var(--accent);
  border: 1px solid var(--line);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}

.partner-card.has-img .partner-logo { color: #fff; }
.partner-card.has-img .partner-logo .dot {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.24);
  color: var(--accent-soft);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 10px 22px -14px rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.partner-card.has-img:hover .partner-logo .dot { transform: scale(1.06); }

/* ---- 2.6 Text + more-Link mit gleitendem Pfeil ---- */
.partner-card p {
  color: var(--muted); font-size: 0.98rem; flex: 1; margin: 0;
}
.partner-card.has-img p { color: rgba(234,240,246,0.9); }

.partner-card .more {
  margin-top: 20px; color: var(--accent); font-weight: 600;
  font-size: 14px; display: inline-flex; gap: 8px; align-items: center;
}
.partner-card.has-img .more { color: var(--accent-soft); }
.partner-card .more .arrow {
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.partner-card:hover .more .arrow { transform: translateX(5px); }

/* ---- 2.7 Responsiv ---- */
@media (max-width: 720px) {
  .partner-grid { grid-template-columns: 1fr; gap: 18px; }
  .partner-card.has-img { min-height: 300px; padding: 30px; }
}

/* ============================================================
   Klar Finanz - Premium-Veredelung (NUR CSS, ans Ende anhaengen)
   Vier Sektionen: Ablauf-Timeline, Final-CTA, Kontakt, Footer
   Tokens unveraendert. JS-Hooks (#tlProgress, .reached, .goal,
   #formFeedback, .show) bleiben intakt. Hero/Ueber-mich unangetastet.
   ============================================================ */

/* ============================================================
   1. ABLAUF-TIMELINE (#ablauf)
   Edle vertikale Linie, Nummern-Badges, Karten mit Hover-Lift,
   Gold-Verlaufs-Fortschritt, Gold-Glow im erreichten Zustand.
   ============================================================ */

/* Sektion: dezenter warmer Verlauf statt flachem Weiss + ruhiger Raum */
#ablauf {
  background:
    radial-gradient(900px 460px at 84% -6%, rgba(var(--accent-rgb), 0.05), transparent 58%),
    linear-gradient(180deg, #FFFFFF 0%, #FEFCF8 100%);
  border-top: 1px solid var(--line);
  transition: background .9s ease;
}

/* Timeline-Container: etwas mehr Luft */
.timeline { position: relative; max-width: 760px; margin: 0 auto; }

/* Hintergrundlinie: feine, ruhige Hairline statt harter Kante */
.tl-track {
  position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px;
  background: linear-gradient(180deg,
    rgba(var(--brand-rgb), 0.06) 0%,
    rgba(var(--brand-rgb), 0.16) 12%,
    rgba(var(--brand-rgb), 0.16) 88%,
    rgba(var(--brand-rgb), 0.06) 100%);
  border-radius: 999px;
  overflow: hidden;
}

/* Fortschritts-Fuellung: warmer Gold-Verlauf mit feinem Glanz (JS setzt height) */
.tl-progress {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 70%, #9A6E2E 100%);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.45);
  transition: height .12s linear;
}

.tl-step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 28px; padding-bottom: 44px; }
.tl-step:last-child { padding-bottom: 0; }

/* Knoten offen: navy Outline, gedaempfte Zahl, weiches Glas */
.tl-node {
  position: relative;
  width: 48px; height: 48px; border-radius: 50%;
  background:
    radial-gradient(120% 120% at 50% 0%, #FFFFFF 0%, #FBF8F3 100%);
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; z-index: 2;
  box-shadow:
    0 1px 2px rgba(var(--brand-rgb), 0.06),
    inset 0 0 0 4px rgba(255, 255, 255, 0.6);
  transition:
    background .45s cubic-bezier(.16,1,.3,1),
    border-color .45s, color .45s, box-shadow .45s, transform .45s;
}
.tl-node span {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.18rem; font-weight: 600; line-height: 1;
  color: var(--muted);
  transition: color .45s ease;
}

/* Erreicht: Gold-Verlauf, weisse Zahl, Glow + Ring */
.tl-step.reached .tl-node {
  background: linear-gradient(150deg, var(--accent-soft) 0%, var(--accent) 70%, #9A6E2E 100%);
  border-color: transparent;
  box-shadow:
    0 0 0 5px rgba(var(--accent-rgb), 0.12),
    0 12px 26px -10px rgba(var(--accent-rgb), 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: scale(1.06);
}
.tl-step.reached .tl-node span {
  color: #fff;
  text-shadow: 0 1px 2px rgba(122, 88, 30, 0.4);
}

/* Karte: feine weisse Card mit weichem Schatten + Hover-Lift */
.tl-card {
  margin-top: -2px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow:
    0 1px 2px rgba(var(--brand-rgb), 0.04),
    0 18px 40px -32px rgba(var(--brand-rgb), 0.4);
  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    box-shadow .4s, border-color .4s;
}
.tl-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow:
    0 1px 2px rgba(var(--brand-rgb), 0.05),
    0 30px 60px -34px rgba(var(--brand-rgb), 0.45);
}
.tl-card h3 { font-size: 1.28rem; margin: 0 0 7px; color: var(--brand); transition: color .5s ease; }
.tl-card p { color: var(--muted); margin: 0; font-size: 1rem; line-height: 1.6; }

/* Ziel erreicht: ganze Section leuchtet golden auf (JS setzt .goal) */
#ablauf::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 55% at 50% 60%, rgba(var(--accent-rgb), 0.16), transparent 72%);
  opacity: 0; transition: opacity 1s ease;
}
#ablauf.goal {
  background:
    radial-gradient(900px 460px at 84% -6%, rgba(var(--accent-rgb), 0.07), transparent 58%),
    linear-gradient(180deg, #FFFDF8 0%, #FFFBF2 100%);
}
#ablauf.goal::after { opacity: 1; }
#ablauf > .container { position: relative; z-index: 1; }

#ablauf.goal .tl-track { background: rgba(var(--accent-rgb), 0.32); }
#ablauf.goal .tl-progress { box-shadow: 0 0 18px 3px rgba(var(--accent-rgb), 0.7); }
#ablauf.goal .tl-node {
  background: linear-gradient(150deg, var(--accent-soft), var(--accent));
  border-color: transparent; color: #fff;
  box-shadow:
    0 0 0 6px rgba(var(--accent-rgb), 0.18),
    0 14px 30px -12px rgba(var(--accent-rgb), 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
#ablauf.goal .tl-node span { color: #fff; }
#ablauf.goal .tl-card { border-color: rgba(var(--accent-rgb), 0.28); }
#ablauf.goal .tl-card h3 { color: #8A6526; }

/* finaler Schritt: feiner Puls als "geschafft"-Moment */
#ablauf.goal .tl-step:last-child .tl-node { animation: tlGoalPulse 1.8s ease-in-out infinite; }
@keyframes tlGoalPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55), 0 14px 30px -12px rgba(var(--accent-rgb), 0.75); }
  50% { box-shadow: 0 0 0 16px rgba(var(--accent-rgb), 0), 0 14px 30px -12px rgba(var(--accent-rgb), 0.75); }
}
@media (prefers-reduced-motion: reduce) {
  #ablauf.goal .tl-step:last-child .tl-node { animation: none; }
}

/* ============================================================
   2. FINAL-CTA (.cta-band)
   Premium dunkles Glas-Band, feiner Gold-Border-Glow,
   Haken in Gold-Kreis, edle Buttons, dezente Trust-Reihe.
   Texte/Badges NICHT veraendert (rechtlich sensibel).
   ============================================================ */
.cta-band {
  text-align: center;
  border-radius: var(--radius-lg);
  padding: 64px 44px;
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(640px 340px at 20% -8%, rgba(var(--accent-rgb), 0.18), transparent 56%),
    radial-gradient(620px 380px at 88% 114%, rgba(44, 81, 112, 0.42), transparent 56%),
    linear-gradient(155deg, #0E3050 0%, #0A2236 55%, #07182A 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 50px 90px -54px rgba(0, 0, 0, 0.6);
}
/* Feiner Gold-Hairline-Glow am oberen Rand */
.cta-band::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.9), transparent);
}
/* Dezenter Gold-Schimmer-Ring entlang der Kante */
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin-top: 16px; }
.cta-band p { color: var(--on-dark-muted); max-width: 560px; margin: 16px auto 0; }

/* Benefits: Haken im Gold-Kreis-Chip */
.cta-benefits { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 28px; margin: 28px 0 32px; }
.cta-benefits span {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--on-dark); font-weight: 500;
}
.cta-benefits span svg {
  flex: none; width: 13px; height: 13px;
  padding: 5px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(150deg, var(--accent-soft), var(--accent));
  box-shadow: 0 6px 14px -6px rgba(var(--accent-rgb), 0.7);
}

.cta-buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
/* Gold-Button im CTA: etwas mehr Praesenz */
.cta-band .btn-gold {
  background: linear-gradient(150deg, #C79A4B 0%, var(--accent) 100%);
  box-shadow: 0 20px 44px -22px rgba(var(--accent-rgb), 0.9);
}
.cta-band .btn-gold:hover { filter: brightness(1.05); transform: translateY(-3px); }
.cta-band .btn-ondark:hover { transform: translateY(-3px); }

/* Trenner: feine zentrierte Hairline mit weichem Ausklang */
.cta-divider {
  height: 1px; border: none;
  max-width: 600px; margin: 34px auto 24px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

/* Trust-Reihe: dezent, Gold-Sterne, gut ausbalanciert */
.cta-trust { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 26px; }
.cta-trust .ct-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--on-dark-muted); font-weight: 500;
}
.cta-trust .ct-item svg { color: var(--accent-soft); flex: none; }
.cta-trust .stars {
  color: var(--accent-soft); letter-spacing: 1.5px; font-size: 13px;
  text-shadow: 0 1px 8px rgba(var(--accent-rgb), 0.45);
}

@media (max-width: 680px) {
  .cta-band { padding: 48px 26px; }
}

/* ============================================================
   3. KONTAKT (#kontakt)
   Edle Form-Card mit Gold-Fokus, gold-getoente Icon-Chips,
   dezente Placeholder-Pills, saubere Feedback-States.
   ============================================================ */
#kontakt {
  background:
    radial-gradient(900px 460px at 12% -8%, rgba(var(--brand-rgb), 0.05), transparent 56%),
    #EDF1F5;
  border-top: 1px solid var(--line);
}

.contact-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: start; }

/* Kontaktinfos: ruhige Liste mit gold-getoenten Icon-Chips */
.contact-info .ci-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.contact-info .ci-item:first-child { padding-top: 4px; }
.contact-info .ci-item:last-child { border-bottom: none; }
.contact-info .ci-ico {
  width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(155deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.06));
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  color: var(--accent);
  display: grid; place-items: center; flex: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.ci-item:hover .ci-ico {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(var(--accent-rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.contact-info .ci-item .lbl {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.contact-info .ci-item .val { font-size: 1.05rem; color: var(--text); font-weight: 600; margin-top: 4px; }
.contact-info .ci-item a.val { transition: color .25s; }
.contact-info .ci-item a.val:hover { color: var(--accent); }
.contact-info .ci-item small { display: block; color: var(--muted); font-weight: 400; font-size: 0.85rem; margin-top: 4px; }

/* Form-Card: edle weisse Karte mit weichem mehrlagigem Schatten */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 42px;
  position: relative;
  box-shadow:
    0 1px 2px rgba(var(--brand-rgb), 0.05),
    0 40px 80px -50px rgba(var(--brand-rgb), 0.5);
}
/* Feiner Gold-Hairline-Akzent oben an der Karte */
.form-card::before {
  content: ""; position: absolute; top: 0; left: 28px; right: 28px; height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55), transparent);
}

.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--brand); margin-bottom: 8px; letter-spacing: 0.02em;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: #FBFAF7;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: var(--text);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.7; }
/* Gold-Fokus-Ring */
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14);
}
.field textarea { resize: vertical; min-height: 124px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: 16px; line-height: 1.5; }

/* Invalid-State: roter Rahmen + Shake (JS setzt .invalid) */
.field-error { font-size: 12.5px; color: #B23A2E; margin-top: 6px; display: none; }
.field.invalid .field-error { display: block; }
.field.invalid input, .field.invalid select, .field.invalid textarea {
  border-color: #B23A2E;
  box-shadow: 0 0 0 4px rgba(178, 58, 46, 0.10);
}

/* Submit-Button (Spinner/Label/Arrow von JS via aria-busy gesteuert) */
.form-card .btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 18px 40px -22px rgba(var(--brand-rgb), 0.7);
}
.form-card .btn-primary:hover { background: var(--brand-700); transform: translateY(-2px); }
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.btn .spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite; display: none;
}
.btn[aria-busy="true"] .spinner { display: inline-block; }
.btn[aria-busy="true"] .btn-label, .btn[aria-busy="true"] .arrow { display: none; }

/* Feedback-States (JS setzt .show + .success/.error) */
.form-feedback { display: none; border-radius: var(--radius); padding: 30px; text-align: center; }
.form-feedback.show { display: block; }
.form-feedback.success {
  background: rgba(20, 120, 80, 0.07);
  border: 1px solid rgba(20, 120, 80, 0.26);
  box-shadow: 0 30px 60px -44px rgba(20, 120, 80, 0.4);
}
.form-feedback.error {
  background: rgba(178, 58, 46, 0.06);
  border: 1px solid rgba(178, 58, 46, 0.26);
  box-shadow: 0 30px 60px -44px rgba(178, 58, 46, 0.4);
}
.form-feedback h3 { color: var(--brand); margin: 14px 0 8px; }
.form-feedback p { color: var(--muted); margin: 0; font-size: 0.96rem; }
.form-feedback .fb-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; }
.form-feedback.success .fb-ico { background: rgba(20, 120, 80, 0.14); color: #157850; }
.form-feedback.error .fb-ico { background: rgba(178, 58, 46, 0.12); color: #B23A2E; }

/* Placeholder-Pill im Kontakt-Block: dezenter */
#kontakt .placeholder-pill {
  display: inline-block; font-size: 11px; letter-spacing: 0.06em;
  background: rgba(var(--accent-rgb), 0.12);
  color: #8A6526;
  border: 1px dashed rgba(var(--accent-rgb), 0.45);
  padding: 2px 8px; border-radius: 6px; margin-left: 6px; vertical-align: middle;
}

/* ============================================================
   4. FOOTER (.footer)
   Ruhig, premium, Gold-Hover-Links, feine Trennlinie,
   ausbalancierte Bottom-Reihe, edler Brandmark.
   ============================================================ */
.footer {
  background:
    radial-gradient(1000px 400px at 84% -20%, rgba(var(--accent-rgb), 0.07), transparent 60%),
    linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%);
  color: var(--on-dark);
  padding: 76px 0 32px;
  position: relative;
}
/* Feine Gold-Hairline am oberen Footer-Rand */
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.5), transparent);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 44px; }
.footer h4 {
  color: #fff; font-family: "Inter", sans-serif;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 18px; opacity: 0.62;
}
.footer a {
  color: var(--on-dark-muted); font-size: 14.5px;
  display: block; padding: 5px 0; width: fit-content;
  transition: color .25s, transform .25s;
}
.footer a:hover { color: var(--accent-soft); transform: translateX(3px); }
/* Brandmark-Link soll nicht verschieben */
.footer .brandmark { color: #fff; margin-bottom: 16px; transform: none; }
.footer .brandmark:hover { transform: none; }
.footer .brandmark .logo-k {
  background: #fff;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
}
.footer .legal-note { font-size: 13px; color: var(--on-dark-muted); line-height: 1.7; }

.footer-bottom {
  margin-top: 52px; padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--on-dark-muted);
}
.footer-bottom .footer-credit-logo {
  height: 19px; width: auto; opacity: 0.55;
  transition: opacity .25s;
}
.footer-bottom .footer-credit-logo:hover { opacity: 0.9; }

/* Placeholder-Pill im Footer: dezent auf dunklem Grund */
.footer .placeholder-pill {
  display: inline-block; font-size: 11px; letter-spacing: 0.06em;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent-soft);
  border: 1px dashed rgba(var(--accent-rgb), 0.45);
  padding: 2px 8px; border-radius: 6px; margin-left: 6px; vertical-align: middle;
}

@media (max-width: 940px) {
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ============================================================
   RESPONSIVE-KORREKTUR (nach v2-Overrides): Grids mobil/tablet
   sicher zusammenklappen. Steht bewusst ganz am Ende -> gewinnt.
   ============================================================ */
@media (max-width: 940px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .svc-grid, .partner-grid, .contact-grid, .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .svc-grid, .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER-LOGO (Header-Logo auf weisser Plate) + KONTAKT-REASSURANCE
   ============================================================ */
.footer-brand { display: inline-block; margin-bottom: 18px; }
.footer-brand .fb-plate { display: inline-flex; align-items: center; }
.footer-brand .fb-plate img { height: 44px; width: auto; display: block; }

/* Kontakt-Spalte: Reassurance-Karte fuellt den unteren Raum */
.contact-info { display: flex; flex-direction: column; }
.ci-assure {
  margin-top: 28px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
}
.ci-assure .cia-head {
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 14px;
}
.ci-assure ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ci-assure li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; line-height: 1.3; color: var(--brand); font-weight: 500; }
.ci-assure li svg { color: var(--accent); flex: none; }
@media (min-width: 761px) {
  .ci-assure { margin-top: auto; }
}

/* ============================================================
   A11Y + FEINSCHLIFF (Redesign-Audit): Skip-Link, Tastatur-Fokus,
   Tabellenziffern. Ende der Datei -> gewinnt per Cascade.
   ============================================================ */
.skip-link {
  position: fixed; left: 16px; top: -64px; z-index: 200;
  background: var(--brand); color: #fff;
  padding: 12px 18px; border-radius: 12px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: top .2s cubic-bezier(.16,1,.3,1);
}
.skip-link:focus { top: 16px; }

/* Sichtbarer Tastatur-Fokus (Gold-Ring) auf Links + Buttons */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Tabellenziffern: saubere Ausrichtung der Kennzahlen (ohne Hero) */
.ap-stats strong, .apg-rate strong { font-variant-numeric: tabular-nums; }

/* ============================================================
   ZAHLEN / STATS-BAND (eigene Section unter "Der Makler")
   ============================================================ */
.stats-band {
  position: relative;
  padding: 66px 0 70px;
  border-top: 1px solid rgba(216,184,112,0.28);
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(181,136,60,0.16), transparent 60%),
    linear-gradient(180deg, var(--brand-700) 0%, #07182a 100%);
}
.stats-band .sb-eyebrow { display: flex; justify-content: center; color: var(--accent-soft); margin-bottom: 38px; }
.stats-band .sb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
.stats-band .sb-item {
  text-align: center;
  padding: 4px 18px;
  border-left: 1px solid rgba(255,255,255,0.10);
}
.stats-band .sb-item:first-child { border-left: none; }
.stats-band .sb-item strong {
  display: block;
  font-family: "Fraunces", serif; font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 3.7rem); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(150deg, var(--accent-soft) 0%, var(--accent) 72%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stats-band .sb-item span {
  display: block; margin-top: 13px;
  font-size: 13px; letter-spacing: 0.05em; line-height: 1.4;
  color: rgba(234,240,246,0.66);
}
@media (max-width: 760px) {
  .stats-band { padding: 48px 0 52px; }
  .stats-band .sb-grid { grid-template-columns: 1fr 1fr; gap: 38px 0; }
  .stats-band .sb-item { border-left: none; }
}

/* ============================================================
   UEBER MICH / "DER MAKLER" v2: Headline oben, Text links
   (Feature-Zitat + Inline-Google), Portrait rechts.
   ============================================================ */
.maker .maker-head { max-width: 780px; margin-bottom: 50px; }
.maker .maker-head .eyebrow { color: var(--accent-soft); }
.maker .maker-head h2 {
  color: #fff; margin-top: 18px;
  font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1.07; letter-spacing: -0.015em;
}
.maker-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 64px;
  align-items: center;
}
.maker-lead { color: var(--on-dark-muted); font-size: 1.12rem; line-height: 1.7; max-width: 54ch; }
.maker-quote {
  position: relative;
  margin: 34px 0 0;
  padding: 6px 0 6px 30px;
  border-left: 2px solid var(--accent);
}
.maker-quote::before {
  content: "\201C";
  position: absolute; left: 12px; top: -22px;
  font-family: "Fraunces", serif; font-size: 4.4rem; line-height: 1;
  color: rgba(var(--accent-rgb), 0.45);
}
.maker-quote p {
  margin: 0;
  font-family: "Fraunces", serif; font-style: italic;
  font-size: 1.32rem; line-height: 1.5; color: #fff;
}
.maker-sig { font-family: "Fraunces", serif; font-style: italic; font-size: 1.3rem; color: #fff; margin-top: 28px; }
.maker-sig span {
  display: block; font-family: "Inter", sans-serif; font-style: normal;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-top: 7px;
}
.maker-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 32px; }
.maker-rating { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--on-dark-muted); }
.maker-rating svg { flex: none; }
.maker-rating strong { color: #fff; font-size: 16px; font-weight: 700; }
.maker-rating .mr-sub { color: rgba(234,240,246,0.6); }
.maker-portrait .about-photo { width: 100%; }
@media (max-width: 900px) {
  .maker-grid { grid-template-columns: 1fr; gap: 40px; }
  .maker-portrait { order: -1; max-width: 440px; margin: 0 auto; width: 100%; }
  .maker .maker-head { margin-bottom: 36px; }
}

/* ============================================================
   DEBUG-FIXES: Footer-Logos + Section-Buttons
   ============================================================ */
/* Das Footer-KF-Logo liegt als eigene helle Variante vor
   (img/logo-footer.png): Schriftzug in Creme, Monogramm behaelt sein
   Gold. Frueher lief hier ein brightness(0) invert(1), das alles
   monochrom weiss gefaerbt und damit das Gold zerstoert hat. */

/* 2) PStudio-Credit-Logo: kein oranges P -> komplett weiss, monochrom */
.footer-bottom .footer-credit-logo { filter: brightness(0) invert(1); opacity: 0.5; }

/* 3) Buttons in den Kaufen/Vermieten-Bloecken: Abstand zur Liste + dezenterer Glow */
.svc-detail .btn { margin-top: 26px; }
.svc-detail .btn-gold { box-shadow: 0 12px 30px -18px rgba(var(--accent-rgb), 0.55); }

/* ============================================================
   HERO-STATUS-PILLE (Verfuegbarkeits-Widget)
   ============================================================ */
.hero-status {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; margin-bottom: 22px;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-700) 100%);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: #fff;
  box-shadow: 0 10px 26px -14px rgba(14,46,71,0.6);
}
.hero-status .hs-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
  animation: hsPulse 2.2s ease-in-out infinite;
}
@keyframes hsPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-status .hs-dot { animation: none; } }

/* ============================================================
   VERTRAUEN & PARTNER , statisches Grid (ersetzt Marquee)
   ============================================================ */
.trustgrid-band .tg-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.trustgrid-band .tg-head .eyebrow { justify-content: center; color: var(--accent); }
.trustgrid-band .tg-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 14px; }
.tg-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm);
}
.tg-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 34px 18px; min-height: 132px;
  border-left: 1px solid var(--line);
}
.tg-cell:first-child { border-left: none; }
.tg-cell .tg-logo { display: inline-flex; align-items: center; justify-content: center; height: 30px; }
.tg-cell .tg-logo img { height: 30px; width: auto; display: block; }
.tg-cell .tg-name { font-family: "Fraunces", serif; font-size: 1.3rem; font-weight: 600; color: var(--brand); }
.tg-cell .tg-sub { font-size: 12px; letter-spacing: 0.03em; color: var(--muted); }
.tg-cell .tg-sub strong { color: var(--brand); }
@media (max-width: 760px) {
  .tg-grid { grid-template-columns: 1fr 1fr; }
  .tg-cell { border-left: none; border-top: 1px solid var(--line); }
  .tg-cell:first-child, .tg-cell:nth-child(2) { border-top: none; }
  .tg-cell:nth-child(odd) { border-left: none; }
}

/* ============================================================
   RATGEBER , Teaser-Karten unten
   ============================================================ */
.rg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rg-card {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #fff 0%, var(--sand) 175%);
  border: 1px solid var(--line); border-radius: 18px;
  padding: 30px 28px; box-shadow: var(--shadow-sm);
  transition: transform .24s cubic-bezier(.16,1,.3,1), box-shadow .24s, border-color .24s;
}
.rg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(var(--accent-rgb), 0.4); }
.rg-tag {
  align-self: flex-start; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--accent);
  background: rgba(var(--accent-rgb), 0.10); border: 1px solid rgba(var(--accent-rgb), 0.25);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 16px;
}
.rg-card h3 { font-size: 1.3rem; color: var(--brand); margin: 0 0 10px; }
.rg-card p { color: var(--muted); font-size: 0.98rem; line-height: 1.55; margin: 0 0 18px; flex: 1; }
.rg-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; font-size: 0.95rem; margin-top: auto; }
.rg-link .arrow { transition: transform .25s ease-out; }
.rg-link:hover .arrow { transform: translateX(4px); }
@media (max-width: 860px) { .rg-grid { grid-template-columns: 1fr; } }

/* ============================================================
   RATGEBER-KARTEN: Bild oben
   ============================================================ */
.rg-card .rg-media {
  margin: -30px -28px 20px; border-radius: 18px 18px 0 0;
  overflow: hidden; aspect-ratio: 16/10;
}
.rg-card .rg-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.rg-card:hover .rg-media img { transform: scale(1.05); }

/* ============================================================
   PARTNER-RASTER (gold, direkt unter der Hero) - echte Logos
   ============================================================ */
.partners {
  padding: clamp(56px, 7vw, 92px) 0;
}
.partners-head { text-align: center; margin-bottom: clamp(34px, 4vw, 52px); }
.partners-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent-soft);
  margin-bottom: 14px;
}
.partners-head h2 {
  color: #fff; margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.1; letter-spacing: -0.015em;
}
/* Chips schweben frei auf Navy (kein Raster-Rahmen) */
.pg-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.pg-cell {
  display: grid; place-items: center; color: inherit;
}
a.pg-cell { cursor: pointer; }
/* GOLDENER CHIP mit weissem Innen-Licht + Glow (gespiegelt vom Leistungs-Icon) */
.pg-plate {
  display: grid; place-items: center;
  width: 100%; max-width: 240px; min-height: 96px;
  padding: 26px 30px; border-radius: 20px;
  background:
    radial-gradient(120% 120% at 28% 22%, rgba(255,255,255,0.45), transparent 58%),
    linear-gradient(160deg, var(--accent-soft), var(--accent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.55),
    0 14px 30px -12px rgba(var(--accent-rgb), 0.75);
  transition: transform .9s cubic-bezier(.16,1,.3,1), box-shadow .9s ease;
}
.pg-cell:hover .pg-plate { transform: translateY(-3px); }
/* Wortmarken (Zulassungshero, Profina) weiss aufs Gold */
.pg-plate > img {
  max-width: 100%; max-height: 38px; width: auto; height: auto; display: block;
  filter: brightness(0) invert(1);
}
/* IHK: echtes Logo auf kleiner weisser Kachel im Gold-Chip */
.pg-mini {
  display: grid; place-items: center;
  background: #fff; border-radius: 11px; padding: 12px 18px;
  box-shadow: 0 6px 16px -10px rgba(14,46,71,0.5);
}
.pg-mini img { max-height: 40px; max-width: 100%; width: auto; height: auto; display: block; }
.pg-mini svg.zh-logo { height: 40px; width: auto; display: block; }
@media (max-width: 760px) {
  .pg-grid { grid-template-columns: 1fr; gap: 18px; }
  .pg-plate { max-width: 300px; }
}

/* ============================================================
   GLOW-SECTION: scroll-getriggerter Gold-Weisslicht-Effekt
   (gespiegelt vom Leistungs-Icon-Hover, aber per .in-view beim Reinscrollen)
   Wiederverwendbar: section.glow-section + JS toggelt .in-view
   ============================================================ */

/* a) Ueberschrift: etwas bolder + warmer Gold-Licht-Schein */
.partners-head h2 {
  transition: text-shadow 1.1s cubic-bezier(.16,1,.3,1),
              transform 1.1s cubic-bezier(.16,1,.3,1),
              font-weight .7s ease;
}
.partners-eyebrow { transition: color 1.1s ease; }
.partners.in-view .partners-head h2 {
  font-weight: 600;
  text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.35);
  transform: translateY(-1px);
}
.partners.in-view .partners-eyebrow { color: rgb(var(--accent-rgb)); }

/* b) Logo-Kacheln: Gold-Glow-Ring + weisser Licht-Sweep, gestaffelt */
.partners .pg-plate { position: relative; overflow: hidden; }
.partners.in-view .pg-cell .pg-plate {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.75),
    0 24px 54px -14px rgba(var(--accent-rgb), 0.9);
}
/* weisser, diagonaler Licht-Sweep (wie ein Glanz, der einmal drueberlaeuft) */
.partners .pg-plate::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 60%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,0.0) 30%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.0) 70%,
    transparent 100%);
  transform: translateX(-180%) skewX(-12deg);
  opacity: 0;
  pointer-events: none;
}
.partners.in-view .pg-plate::before {
  animation: pg-shine 1.8s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes pg-shine {
  0%   { transform: translateX(-180%) skewX(-12deg); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(220%) skewX(-12deg); opacity: 0; }
}
/* Staffelung: Glow + Sweep starten zusammen mit dem Text, leicht versetzt fuer Politur */
.partners.in-view .pg-cell:nth-child(1) .pg-plate { transition-delay: 0s; }
.partners.in-view .pg-cell:nth-child(2) .pg-plate { transition-delay: .35s; }
.partners.in-view .pg-cell:nth-child(3) .pg-plate { transition-delay: .7s; }
.partners.in-view .pg-cell:nth-child(2) .pg-plate::before { animation-delay: .35s; }
.partners.in-view .pg-cell:nth-child(3) .pg-plate::before { animation-delay: .7s; }

/* c) Langsameres, cleanes Aufkommen beim Reinscrollen (Reveal der Partner-Section) */
#partner .reveal { transition-duration: 1.3s; }
#partner .pg-grid.reveal { transition-delay: .22s; }

/* d) Reduced Motion: Endzustand ohne Bewegung, kein Sweep */
@media (prefers-reduced-motion: reduce) {
  .partners .pg-plate::before { display: none; }
  .partners.in-view .partners-head h2,
  .partners.in-view .pg-cell .pg-plate { transform: none; transition: none; }
}

/* ============================================================
   SVC-DETAIL Bilder (Kaufen/Vermieten): Navy-Schatten + Vignette,
   die langsam & clean beim Reinscrollen ins Bild kommen
   (kein Hover) - aussen Schatten, von innen Vignette
   ============================================================ */
.svc-detail-media { position: relative; transition: box-shadow 1.6s ease; }

/* von innen: kraeftige navy Vignette an den Kanten, blendet langsam ein */
.svc-detail-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(150% 115% at 50% 50%, transparent 26%, rgba(var(--brand-rgb), 0.96) 100%);
  opacity: 0; transition: opacity 1.6s ease;
}
/* getriggert, sobald das Bild beim Scrollen wirklich in den Blick kommt (.media-lit) */
.svc-detail-media.media-lit::after { opacity: 1; }
.svc-detail-media.media-lit {
  box-shadow:
    var(--shadow-md),
    0 0 0 2px rgba(var(--brand-rgb), 0.70),
    0 55px 130px -16px rgba(var(--brand-rgb), 0.98),
    0 0 200px 50px rgba(var(--brand-rgb), 0.30);
}

/* Navy-Wash ueber die ganze Section: ~halbe Section wird dunkelblau,
   diagonal entlang der beiden Bilder (links-oben Kaufen, rechts-unten Vermieten) */
#kaufen { position: relative; }
#kaufen .container { position: relative; z-index: 1; }

/* ---------- Service-Erlebnis: Sticky-Scroll + Fragebogen (#kaufen) ---------- */
.svc-scroll { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: start; margin-top: 6px; }
.svc-cue { position: sticky; top: 118px; align-self: start; }
.svc-cue-text { color: var(--muted); font-size: 1.02rem; margin: 16px 0 0; max-width: 30ch; }

/* Scroll-Cue Pfeil: faerbt sich von oben nach unten beim Scrollen + wippt */
.svc-arrow { position: relative; margin-top: 34px; height: 210px; width: 34px; }
.svc-arrow .sa-track { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 2px; height: 100%; background: var(--line-strong); border-radius: 2px; overflow: hidden; }
.svc-arrow .sa-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, var(--accent-soft), var(--accent)); transform: scaleY(var(--p, 0)); transform-origin: top; }
.svc-arrow .sa-chevron { position: absolute; left: 50%; top: 0; transform: translate(-50%, calc(var(--p, 0) * 176px)); color: var(--accent); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); box-shadow: 0 6px 16px -6px rgba(var(--accent-rgb), 0.7), inset 0 0 0 1px rgba(var(--accent-rgb), 0.35); }
.svc-arrow .sa-chevron svg { display: block; }

/* 5 Schmerz-Punkte rechts */
.svc-pains { display: grid; gap: 4px; }
.svc-pain { padding: 30px 0; border-bottom: 1px solid var(--line); }
.svc-pain:first-child { padding-top: 0; }
.svc-pain:last-child { border-bottom: none; }
.svc-pain h3 { font-family: "Fraunces", serif; font-weight: 600; color: var(--brand); font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.12; margin: 12px 0 0; }
.svc-pain p { color: var(--muted); font-size: 1.02rem; margin: 12px 0 0; max-width: 52ch; }

/* Fragebogen-Abschluss: Text links, klickbare Situationen rechts */
.svc-fragebogen { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 52px; align-items: center; margin-top: 84px; padding-top: 60px; border-top: 1px solid var(--line); }
.fb-intro h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-top: 14px; }
.fb-intro p { color: var(--muted); margin-top: 16px; max-width: 42ch; }
.fb-options { display: grid; gap: 13px; }
.fb-opt { display: flex; align-items: center; gap: 17px; padding: 17px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--brand); box-shadow: 0 10px 26px -22px rgba(14, 46, 71, 0.6); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.fb-opt:hover { transform: translateX(5px); border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 16px 32px -20px rgba(14, 46, 71, 0.7); }
.fb-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, var(--accent-soft), var(--accent)); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.5); }
.fb-label { display: flex; flex-direction: column; gap: 3px; }
.fb-label strong { font-size: 1.06rem; font-weight: 600; }
.fb-label span { color: var(--muted); font-size: 0.9rem; }
.fb-arrow { flex: none; margin-left: auto; color: var(--accent); transition: transform .22s ease; }
.fb-opt:hover .fb-arrow { transform: translateX(4px); }

@media (max-width: 880px) {
  .svc-scroll { grid-template-columns: 1fr; gap: 22px; }
  .svc-cue { position: static; }
  .svc-cue-text { max-width: none; }
  .svc-arrow { display: none; }
  .svc-fragebogen { grid-template-columns: 1fr; gap: 26px; margin-top: 54px; padding-top: 44px; }
  .fb-intro p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-detail-media { transition: none; }
  .svc-detail-media::after { transition: none; }
  #kaufen::before { transition: none; }
}

#ueber-mich .about-grid { position: relative; z-index: 1; }

/* ============================================================
   ABLAUF-TIMELINE NEU: serpentinen-Kurve, grosse Karten
   abwechselnd links/rechts, Knoten auf der Kurve, Karte leuchtet
   beim Erreichen auf. Ueberschreibt die alte gerade Timeline.
   ============================================================ */
.timeline { position: relative; max-width: 980px; margin: 0 auto; }
.tl-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.tl-base { stroke: rgba(14,46,71,0.13); stroke-width: 3; stroke-linecap: round; }
.tl-fill {
  stroke: var(--accent); stroke-width: 4; stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(var(--accent-rgb), 0.55));
  transition: stroke-dashoffset .25s ease-out;
}
.tl-steps { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 64px; }
.tl-step { position: relative; min-height: 156px; padding: 0; display: block; }

/* Knoten sitzen auf der Kurve, weben zwischen 33% und 67% */
.tl-node {
  position: absolute; top: 50%; left: 33%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; z-index: 3; margin: 0;
  display: grid; place-items: center;
  background: #fff; border: 2px solid rgba(14,46,71,0.18);
  box-shadow: 0 8px 22px -10px rgba(14,46,71,0.45);
  transition: background .55s cubic-bezier(.16,1,.3,1), border-color .55s, box-shadow .55s, transform .55s cubic-bezier(.16,1,.3,1);
}
.tl-node span { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.2rem; color: var(--brand); }
.tl-step:nth-child(even) .tl-node { left: 67%; }

/* Karten doppelt so gross, abwechselnd rechts/links vom Knoten */
.tl-card {
  width: 58%; padding: 34px 38px; border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #FCFAF6 100%);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: border-color .55s ease, box-shadow .55s ease, background .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.tl-step:nth-child(odd)  .tl-card { margin-left: 40%; }
.tl-step:nth-child(even) .tl-card { margin-right: 40%; }
.tl-card h3 { font-size: 1.5rem; margin: 0 0 10px; color: var(--brand); transition: color .5s ease; }
.tl-card p  { color: var(--muted); margin: 0; font-size: 1.06rem; line-height: 1.62; }

/* erreicht: Knoten gold + Karte leuchtet auf */
.tl-step.reached .tl-node {
  background: radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,0.5), transparent 58%), linear-gradient(160deg, var(--accent-soft), var(--accent));
  border-color: var(--accent);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.16), 0 12px 30px -8px rgba(var(--accent-rgb), 0.7);
  transform: translate(-50%, -50%) scale(1.06);
}
.tl-step.reached .tl-node span { color: #fff; }
.tl-step.reached .tl-card {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: linear-gradient(180deg, #fff 0%, #FFF8EC 100%);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.30), 0 24px 56px -18px rgba(var(--accent-rgb), 0.5);
  transform: translateY(-3px);
}
.tl-step.reached .tl-card h3 { color: #8A6526; }

/* Mobile: gerade Schiene links, Karten volle Breite (Pfad wird automatisch gerade) */
@media (max-width: 760px) {
  .tl-node,
  .tl-step:nth-child(even) .tl-node { left: 27px; width: 50px; height: 50px; }
  .tl-card,
  .tl-step:nth-child(odd) .tl-card,
  .tl-step:nth-child(even) .tl-card { width: auto; margin: 0 0 0 70px; padding: 24px 24px; }
  .tl-steps { gap: 30px; }
  .tl-step { min-height: 0; }
  .tl-card h3 { font-size: 1.22rem; }
}


/* ============================================================
   FARB-PINSEL (Canvas): man "malt" mit dem Cursor, die Striche
   liegen als Spur und waschen langsam aus (Aquarell-Gefuehl).
   Gegenfarbe je Section: Gold-Section -> Navy, Navy-Section -> Gold.
   ============================================================ */
.brush-area { position: relative; overflow: hidden; }
.brush-area > .container { position: relative; z-index: 2; }
.brush-area > .cb-deco { z-index: 1; }
.brush-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: blur(18px); }
.brush-gold .brush-canvas { mix-blend-mode: screen; }   /* Gold leuchtet auf Navy */
@media (prefers-reduced-motion: reduce) { .brush-canvas { display: none; } }

/* ============================================================
   KONTAKT-SEITE: premium Split (navy Info-Panel + helle Form-Karte)
   (frontend-design: editorial/refined luxury, Navy + Gold)
   ============================================================ */
.kontakt-contact { background: linear-gradient(180deg, #F1EADD 0%, #FBF8F3 100%); }
.kontakt-contact .contact-grid { align-items: stretch; }
.kontakt-contact .contact-info {
  background:
    radial-gradient(120% 120% at 16% 10%, rgba(255,255,255,0.07), transparent 60%),
    linear-gradient(160deg, #0E2E47, #0A2236);
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 46px);
  box-shadow: 0 30px 70px -28px rgba(14,46,71,0.55);
  display: flex; flex-direction: column; gap: 30px; justify-content: center;
}
.kontakt-contact .ci-item { display: flex; gap: 16px; align-items: flex-start; }
.kontakt-contact .ci-ico {
  width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: rgba(var(--accent-rgb), 0.16); color: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb), 0.32);
}
.kontakt-contact .ci-item > div { color: rgba(255,255,255,0.82); }
.kontakt-contact .ci-item .lbl {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-soft); margin-bottom: 5px;
}
.kontakt-contact .ci-item .val {
  color: #fff; font-family: "Fraunces", serif; font-size: 1.16rem; font-weight: 500; text-decoration: none;
  transition: color .3s ease;
}
.kontakt-contact .ci-item .val:hover { color: var(--accent-soft); }
.kontakt-contact .ci-item small { display: block; color: rgba(255,255,255,0.5); margin-top: 5px; font-size: 13px; }
.kontakt-contact .form-card {
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -30px rgba(14,46,71,0.42);
  border: 1px solid var(--line);
}
@media (max-width: 860px) { .kontakt-contact .contact-info { gap: 22px; padding: 28px; } }

/* IHK-Chip breiter, Logo groesser (Querformat-Logo besser zur Geltung) */
.hero-features .hf-ico--ihk { width: 88px; border-radius: 16px; }
.hero-features .hf-ico--ihk .hf-mini { padding: 6px 12px; border-radius: 9px; }
.hero-features .hf-ico--ihk .hf-mini img { height: 27px; }

/* ============================================================
   KOMPAKTE CTA (#kaufen): Anliegen waehlen + Anfrage abschicken
   (ersetzt die grosse "Wo stehen Sie gerade"-Section)
   ============================================================ */
.cta-compact {
  max-width: 720px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.cta-compact-head h2 { margin: 8px 0 0; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.12; }
.cta-compact-form { display: flex; gap: 12px; width: 100%; max-width: 600px; }
.cta-compact-form select {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 16px; border-radius: 14px; border: 1px solid var(--line);
  background: #fff; color: var(--brand);
  font-family: "Inter", sans-serif; font-size: 15px; font-weight: 500; cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.cta-compact-form select:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.cta-compact-form select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18); }
.cta-compact-form .btn { flex: none; white-space: nowrap; }
@media (max-width: 560px) {
  .cta-compact-form { flex-direction: column; }
  .cta-compact-form .btn { width: 100%; }
}

/* ============================================================
   KONTAKTFORMULAR , Mobile-Optimierung
   ============================================================ */
@media (max-width: 600px) {
  /* 16px verhindert das iOS-Auto-Zoom beim Fokussieren der Felder */
  .field input, .field select, .field textarea { font-size: 16px; padding: 13px 14px; }
  .field { margin-bottom: 15px; }
  .field label { font-size: 13.5px; margin-bottom: 7px; }
  .field textarea { min-height: 108px; }
  .form-row { gap: 13px; }
  /* Karte schlanker, mehr Platz fuer den Inhalt */
  .form-card { padding: 24px 20px; border-radius: 18px; }
  .form-card::before { left: 18px; right: 18px; }
  .form-card .btn-primary { width: 100%; padding: 14px 20px; }
  /* Navy-Info-Panel kompakter ueber dem Formular */
  .kontakt-contact .contact-info { padding: 26px 22px; gap: 18px; border-radius: 18px; }
  .kontakt-contact .ci-item .val { font-size: 1.05rem; }
}

/* ============================================================
   FOOTER AUF SCHMALEN VIEWPORTS
   ============================================================
   Zwei Probleme wurden hier behoben.

   1. Der Footer stapelte alle vier Bloecke einspaltig und war dadurch
      ueber 1000 Pixel hoch. Die beiden Linklisten stehen jetzt
      nebeneinander, Marke und Kontaktdaten behalten die volle Breite.
      Das halbiert die Hoehe, ohne die Lesbarkeit zu verringern.

   2. Die untere Leiste lief als flex row mit Umbruch. Bei drei
      unterschiedlich breiten Elementen ergab das je nach Viewport
      wechselnde und unsaubere Gruppierungen, etwa Copyright allein und
      darunter Logo und Zusatz auf einer Zeile. Sie laeuft jetzt als
      Spalte, damit jedes Element eine eigene Zeile hat.

   Die Regeln stehen bewusst am Dateiende: weiter oben setzen zwei
   aeltere Media-Queries (max-width 680 und 760) widersprechende Werte
   fuer .footer-grid, die sich sonst gegenseitig aushebeln. */
/* Bis 680 Pixel laeuft die untere Leiste als Spalte. Ihre drei Elemente
   brauchen zusammen 560 Pixel, was erst ab dieser Breite in eine Zeile
   passt. Darunter erzeugte der Umbruch wechselnde Gruppierungen. */
@media (max-width: 680px) {
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-top: 38px;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 22px;
  }
  /* Markenblock und Kontaktspalte brauchen die ganze Zeile, die beiden
     Linklisten teilen sich eine. */
  .footer-grid > div:first-child,
  .footer-grid > div:last-child {
    grid-column: 1 / -1;
  }
  .footer h4 { margin-bottom: 12px; }
  .footer a { padding: 6px 0; }
}

/* Sehr schmale Geraete: Linklisten untereinander, sonst brechen die
   laengeren Eintraege wie "Immobilienfinanzierung" mehrzeilig um.
   Ab 361 Pixel bleiben die zwei Spalten erhalten, dort passt der Text. */
@media (max-width: 360px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}