/* ============================================================
   Terrassen-Boden-Glanz · Raphael Ahlers, Hannover
   Farbwelt: Dunkelblau + Sandtöne (Vertrag Nr. 2026-014, § 2)
   Keine externen Requests. Schriften liegen lokal.
   ============================================================ */

:root {
  /* Blau */
  --navy-900: #08192B;
  --navy-800: #0E2740;
  --navy-700: #143453;
  --navy-600: #1C4670;
  --navy-500: #2A5F92;
  --navy-400: #4A82B8;

  /* Sand */
  --sand-50:  #FCF9F3;
  --sand-100: #F6F0E4;
  --sand-200: #EDE3D0;
  --sand-300: #DFD0B4;
  --sand-400: #C9B48E;
  --sand-600: #8A7551;

  --accent:       #1C4670;   /* Links, Akzente – 8.4:1 auf --bg */
  --accent-deep:  #0E2740;
  --accent-line:  rgba(28, 70, 112, 0.22);
  --accent-soft:  rgba(28, 70, 112, 0.07);

  --grad-navy: linear-gradient(155deg, #143453 0%, #0E2740 52%, #08192B 100%);
  --grad-btn:  linear-gradient(180deg, #2A5F92 0%, #1C4670 45%, #143453 100%);
  --grad-sand: linear-gradient(180deg, #FCF9F3 0%, #F6F0E4 16%, #F6F0E4 84%, #FCF9F3 100%);

  --ink:  #08192B;
  --bg:   #FCF9F3;
  --white:#ffffff;
  --gray: #55605E;
  --gray-on-navy: rgba(255, 255, 255, 0.76);
  --line: rgba(8, 25, 43, 0.10);
  --card-line: #E7DCC7;

  --radius-pill: 100px;
  --radius-card: 16px;
  --radius-lg: 26px;

  --f-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --max-width: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Oben dunkel, unten hell: beim Ueberziehen der Seite blitzt nichts Falsches auf */
  background: var(--navy-700);
}
body { background: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* Der Verlaufs-Vorrat ist unsichtbar, wuerde als Inline-Element aber eine leere
   Textzeile erzeugen und den Hero nach unten schieben. Deshalb aus dem Fluss nehmen. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }

:focus-visible {
  outline: 3px solid var(--navy-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-800); color: #fff; padding: 12px 20px;
  border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

.wrap { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Typografie ---------- */
h1, h2, h3 { font-family: var(--f-serif); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.35rem, 5.8vw, 4rem); letter-spacing: -.028em; }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { margin: 0 0 1.1em; }
.lead { font-size: clamp(1.05rem, 1.9vw, 1.22rem); color: var(--gray); }
.eyebrow {
  display: inline-block; font-family: var(--f-sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow.on-navy { color: var(--sand-300); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border: 0; border-radius: var(--radius-pill);
  font-family: var(--f-sans); font-size: 1rem; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background-image: var(--grad-btn); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 5px rgba(8,25,43,.28), 0 12px 26px -12px rgba(8,25,43,.6);
}
.btn-primary:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 9px rgba(8,25,43,.3), 0 18px 34px -14px rgba(8,25,43,.7); }
.btn-sand {
  background: var(--sand-100); color: var(--navy-800);
  box-shadow: inset 0 0 0 1.5px var(--sand-300), 0 2px 6px rgba(8,25,43,.08);
}
.btn-sand:hover { background: #fff; color: var(--navy-900); }
.btn-ghost-light {
  background: rgba(255,255,255,.08); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.16); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Kopfzeile: schwebende runde Leiste ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px var(--gutter) 0;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; max-width: 1060px; margin: 0 auto;
  padding: 9px 9px 9px 20px; min-height: 64px;
  border-radius: var(--radius-pill);
  background: rgba(10, 28, 48, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 2px 6px rgba(8,25,43,.18),
    0 18px 40px -18px rgba(8,25,43,.7);
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-header.scrolled .nav {
  background: rgba(8, 25, 43, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 3px 10px rgba(8,25,43,.3),
    0 22px 46px -20px rgba(8,25,43,.85);
}

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; font-weight: 700; }
.brand:hover { color: #fff; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.16);
}
.brand-name { font-family: var(--f-serif); font-size: 1.1rem; letter-spacing: -.01em; line-height: 1.1; color: #fff; }
.brand-name small {
  display: block; font-family: var(--f-sans); font-size: .64rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sand-400);
}

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: inline-block; padding: 9px 15px; border-radius: var(--radius-pill);
  color: rgba(255,255,255,.78); text-decoration: none; font-size: .93rem; font-weight: 500;
  transition: background-color .2s ease, color .2s ease;
}
.nav-links a:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav-links a.btn { padding: 12px 22px; font-weight: 600; }
.nav-links a.btn-sand, .nav-links a.btn-sand:hover {
  color: var(--navy-900); background-image: none; background-color: var(--sand-100);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 2px 8px rgba(0,0,0,.2);
}
.nav-links a.btn-sand:hover { background-color: #fff; }
.nav-cta { margin-left: 6px; }

.nav-toggle {
  display: none; background: rgba(255,255,255,.10); border: 0; padding: 11px; cursor: pointer;
  color: #fff; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

@media (max-width: 1180px) {
  .nav { padding-left: 16px; }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 10px);
    flex-direction: column; align-items: stretch; gap: 2px;
    max-width: 1060px; margin: 0 auto;
    background: rgba(8, 25, 43, 0.96);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-radius: 22px; padding: 12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 22px 46px -18px rgba(8,25,43,.9);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 16px; border-radius: 14px; }
  .nav-cta { margin: 6px 0 0; }
  .nav-cta .btn { width: 100%; }
}

/* ---------- Hero: Hintergrund laeuft bis ganz nach oben ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background-image: var(--grad-navy);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hb-glow { position: absolute; border-radius: 50%; filter: blur(10px); }
.hb-1 {
  width: min(760px, 78vw); aspect-ratio: 1; right: -12%; top: -18%;
  background: radial-gradient(circle, rgba(74,130,184,.40) 0%, rgba(74,130,184,.12) 44%, transparent 70%);
  animation: hbFloat 14s ease-in-out infinite;
}
.hb-2 {
  width: min(520px, 62vw); aspect-ratio: 1; left: -14%; bottom: -22%;
  background: radial-gradient(circle, rgba(201,180,142,.24) 0%, rgba(201,180,142,.07) 46%, transparent 72%);
  animation: hbFloat 18s ease-in-out infinite reverse;
}
.hb-grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.030) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(75% 70% at 50% 35%, #000 0%, transparent 78%);
  mask-image: radial-gradient(75% 70% at 50% 35%, #000 0%, transparent 78%);
}
@keyframes hbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-3%, 4%) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { .hb-glow { animation: none } }

.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(28px, 5vw, 60px);
  align-items: center;
  /* Kurzform wuerde den seitlichen Rand von .wrap loeschen. Gutter deshalb explizit. */
  padding: clamp(128px, 14vw, 184px) var(--gutter) 0;
}
.hero h1 { color: #fff; letter-spacing: -.022em; }
.hero h1 em {
  /* Signaturbewegung: kursive Serife als Akzent. Fraunces liegt als echter
     Kursivschnitt lokal vor (Gewicht 500), deshalb keine Kunstschräge. */
  font-style: italic; font-weight: 500; color: var(--sand-300);
  letter-spacing: -.012em; padding-right: .06em;
}
.hero .lead { color: var(--gray-on-navy); max-width: 44ch; font-size: clamp(1.05rem, 1.9vw, 1.19rem); }
.hero .lead b { color: #fff; font-weight: 600; }
/* Der dunkle Grund beginnt oberhalb des Bildschirms, damit beim Zurueckziehen
   der Seite (Bounce) kein heller Streifen aufblitzt. */
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: -240px; height: 240px;
  background: var(--navy-700); z-index: 0;
}

.hero-badges { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0 26px; padding: 0; list-style: none; }
.hero-badges li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.12);
  font-size: .89rem; color: #fff;
}
.hero-badges svg { flex: none; color: var(--sand-300); }

.hero-person {
  display: flex; align-items: center; gap: 13px;
  font-size: .93rem; color: var(--gray-on-navy); line-height: 1.45; max-width: 42ch;
}
.hero-person b { color: #fff; font-weight: 600; }
.hp-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.20), rgba(255,255,255,.05));
  color: var(--sand-300);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.14);
}

/* ---------- Glaskarte: mehrstufige Anfrage ---------- */
.glass-card {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: 30px 28px 26px;
  background: linear-gradient(165deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.055) 55%, rgba(255,255,255,.03) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 3px 10px rgba(8,25,43,.24),
    0 40px 80px -34px rgba(8,25,43,.9);
}
.gc-sheen {
  position: absolute; inset: -40% -20% auto -20%; height: 70%;
  background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, transparent 100%);
  transform: rotate(-8deg); pointer-events: none;
}
.glass-card > *:not(.gc-sheen) { position: relative; z-index: 2; }

.gc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.gc-kicker {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sand-300); margin-bottom: 6px;
}
.gc-title { font-family: var(--f-serif); font-size: 1.42rem; color: #fff; margin: 0; line-height: 1.18; }
.gc-badge {
  flex: none; font-size: .78rem; font-weight: 600; color: #fff;
  padding: 7px 13px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  font-variant-numeric: tabular-nums;
}

.gc-rail { height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; margin-bottom: 22px; }
.gc-fill {
  display: block; height: 100%; width: 33.33%; border-radius: 4px;
  background: linear-gradient(90deg, var(--sand-400), #EDE3D0);
  transition: width .45s cubic-bezier(.22,1,.3,1);
}

.gc-label { display: block; font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.86); margin: 16px 0 7px; }
.gc-label:first-of-type { margin-top: 0; }
.req { color: var(--sand-300); }

.gc-input {
  width: 100%; font: inherit; font-size: .96rem; color: #fff;
  padding: 12px 15px; border-radius: 13px; border: 0;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  transition: box-shadow .2s ease, background-color .2s ease;
}
.gc-input::placeholder { color: rgba(255,255,255,.44); }
.gc-input:focus {
  outline: none; background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1.5px var(--sand-400), 0 0 0 4px rgba(201,180,142,.18);
}
.gc-area { min-height: 104px; resize: vertical; }
.gc-hint { display: block; font-size: .78rem; color: rgba(255,255,255,.55); margin-top: 7px; }

.gc-check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin-top: 18px; cursor: pointer; }
.gc-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.gc-box {
  width: 22px; height: 22px; border-radius: 7px; margin-top: 1px;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28);
  display: grid; place-items: center; transition: all .18s ease;
}
.gc-box::after {
  content: ""; width: 10px; height: 6px; border: solid var(--navy-900);
  border-width: 0 0 2.6px 2.6px; transform: rotate(-45deg) scale(.4); opacity: 0;
  transition: all .18s cubic-bezier(.34,1.5,.5,1);
}
.gc-check input:checked ~ .gc-box { background: var(--sand-200); box-shadow: inset 0 0 0 1.5px var(--sand-300); }
.gc-check input:checked ~ .gc-box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.gc-check input:focus-visible ~ .gc-box { outline: 3px solid var(--sand-400); outline-offset: 3px; }
.gc-check span:last-child { font-size: .84rem; line-height: 1.5; color: rgba(255,255,255,.74); }
.gc-check a { color: var(--sand-300); }

.gc-status { font-size: .85rem; margin: 14px 0 0; display: none; }
.gc-status.show { display: block; }
.gc-status.err { color: #FFC9C9; }
.gc-status.ok { color: #BFE8CD; }

.gc-actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.gc-back {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,.72); font: inherit; font-size: .9rem; padding: 12px 8px; border-radius: 10px;
}
.gc-back:hover { color: #fff; }
.gc-back[hidden] { display: none; }   /* sonst gewinnt display:inline-flex gegen hidden */
.gc-next { margin-left: auto; }
.gc-foot { font-size: .78rem; color: rgba(255,255,255,.5); margin: 14px 0 0; text-align: center; }

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; padding-top: clamp(110px, 22vw, 150px); }
  .glass-card { padding: 26px 22px 22px; }
}

/* ---------- Vertrauensleiste ---------- */
.trust { background: var(--navy-900); color: var(--gray-on-navy); }
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 26px 0; }
.trust-item { display: flex; align-items: center; gap: 12px; font-size: .93rem; }
.trust-item svg { flex: none; color: var(--sand-300); }
.trust-item b { color: #fff; display: block; font-size: .98rem; }
@media (max-width: 860px) { .trust-inner { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; } }
@media (max-width: 460px) { .trust-inner { grid-template-columns: 1fr; } }

/* ---------- Sektionen ---------- */
.section { padding: clamp(60px, 9vw, 104px) 0; position: relative; }
.section.sand { background-image: var(--grad-sand); }

/* Dunkle Abschnitte sitzen als abgerundete Platte auf dem hellen Grund,
   statt als harte Bande quer durchs Bild zu schneiden. */
.section.navy {
  background-image: var(--grad-navy); color: #fff;
  margin: 26px var(--gutter); border-radius: 40px; isolation: isolate;
  padding-left: 0; padding-right: 0;
  box-shadow: 0 2px 6px rgba(8,25,43,.14), 0 46px 88px -54px rgba(8,25,43,.9);
}
.section.navy::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 200px;
  border-radius: 40px 40px 0 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, transparent 100%),
    radial-gradient(62% 100% at 50% 0%, rgba(201,180,142,.20) 0%, transparent 72%);
}
.section.navy > .wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
@media (max-width: 1000px) { .section.navy { border-radius: 28px; margin-inline: 16px; } }
@media (max-width: 640px)  { .section.navy { border-radius: 20px; margin-inline: 12px; } }

/* Der Hero endet abgerundet. Die Vertrauensleiste sitzt darunter als eigene
   Reihe auf hellem Grund und ueberlappt die Kante leicht — weicher Anschluss. */
.hero { border-radius: 0 0 46px 46px; box-shadow: 0 2px 6px rgba(8,25,43,.14), 0 44px 84px -52px rgba(8,25,43,.85); }
@media (max-width: 1000px) { .hero { border-radius: 0 0 30px 30px; } }
@media (max-width: 640px)  { .hero { border-radius: 0 0 22px 22px; } }

.trust { background: transparent; padding: clamp(34px, 5vw, 54px) 0 clamp(10px, 2vw, 18px); }
.trust-inner {
  position: relative; z-index: 3;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FDFBF7 100%);
  border-radius: 22px; padding: 26px 30px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--card-line),
    0 2px 6px rgba(8,25,43,.05),
    0 26px 52px -30px rgba(8,25,43,.5);
}
.trust-item svg { color: var(--accent); }
.trust-item b { color: var(--ink); }
.trust-item { color: var(--gray); }
@media (max-width: 860px) { .trust-inner { padding: 22px; } }

/* Heller Grund verdichtet sich sanft, statt flach zu bleiben */
.section:not(.navy):not(.sand) {
  background-image: radial-gradient(120% 55% at 50% 100%, rgba(28,70,112,.045) 0%, transparent 62%);
}
.section.navy h2, .section.navy h3 { color: #fff; }
.section.navy .lead { color: var(--gray-on-navy); }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- Leistungskarten ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* Gruppenüberschrift über je einem Kartenblock */
.gruppe {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(1.28rem, 2.1vw, 1.62rem); line-height: 1.2;
  color: var(--ink); margin: 6px 0 20px;
}
.cards + .gruppe { margin-top: 54px; }
.gruppe-strich {
  flex: 0 0 auto; width: 34px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sand-600), rgba(138,117,81,.22));
}
@media (max-width: 780px) { .cards { grid-template-columns: 1fr; } }
.card {
  position: relative; border-radius: 22px; overflow: hidden;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FDFBF7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--card-line),
    0 2px 6px rgba(8,25,43,.05),
    0 24px 48px -30px rgba(8,25,43,.5);
  display: flex; flex-direction: column;
  transition: transform .26s cubic-bezier(.22,1,.3,1), box-shadow .3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--sand-300),
    0 5px 12px rgba(8,25,43,.09),
    0 38px 70px -34px rgba(8,25,43,.65);
}
/* Nummer der Leistung, wie ein Etikett aufgesetzt */
.card-nr {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background-image: var(--grad-btn); color: #fff;
  font-family: var(--f-serif); font-weight: 600; font-size: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 5px 14px -5px rgba(8,25,43,.75);
}
.card-media {
  aspect-ratio: 16 / 11; position: relative;
  background:
    radial-gradient(75% 65% at 50% 30%, rgba(28,70,112,.09) 0%, transparent 72%),
    linear-gradient(168deg, #F7F2E8 0%, #EAE0CC 100%);
  box-shadow: inset 0 -1px 0 var(--card-line);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-media svg { display: block; }
.card-body { padding: 28px 26px 30px; }
.card-body h3 { margin-bottom: .4em; }
.card-body p { color: var(--gray); margin-bottom: 0; font-size: .98rem; }
.card-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.card-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--gray); }
.card-list svg { flex: none; margin-top: 5px; color: var(--accent); }

/* ---------- Werterhaltung ---------- */
.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (max-width: 880px) { .value-grid { grid-template-columns: 1fr; } }
.value-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.value-steps li {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  background: rgba(255,255,255,.06); border-radius: 14px; padding: 18px 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.value-steps .num {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(201,180,142,.18); color: var(--sand-300);
  font-family: var(--f-serif); font-size: 1.15rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(201,180,142,.3);
}
.value-steps b { display: block; color: #fff; margin-bottom: 3px; }
.value-steps span { color: var(--gray-on-navy); font-size: .95rem; }

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FDFBF7 100%);
  border-radius: var(--radius-card); padding: 0 0 26px; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--card-line),
    0 2px 6px rgba(8,25,43,.05),
    0 20px 42px -28px rgba(8,25,43,.45);
  transition: transform .24s cubic-bezier(.22,1,.3,1), box-shadow .28s ease;
}
.step:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--sand-300),
    0 4px 10px rgba(8,25,43,.08),
    0 30px 56px -30px rgba(8,25,43,.6);
}
.step-visual {
  position: relative; aspect-ratio: 4 / 3; margin-bottom: 22px;
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(28,70,112,.07) 0%, transparent 70%),
    linear-gradient(170deg, #F6F0E4 0%, #EDE3D0 100%);
  display: grid; place-items: center;
  box-shadow: inset 0 -1px 0 var(--card-line);
}
.step-visual svg { width: 82%; height: auto; }
.step-num {
  position: absolute; top: 14px; left: 14px;
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background-image: var(--grad-btn); color: #fff;
  font-family: var(--f-serif); font-weight: 600; font-size: .95rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 4px 10px -4px rgba(8,25,43,.6);
}
.step h3, .step p { padding-inline: 24px; }

/* Kleine Bewegungen in den Schritt-Grafiken */
@keyframes st-pulse { 0%,100% { opacity:.28 } 50% { opacity:.6 } }
@keyframes st-drift { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
.st-pulse { animation: st-pulse 3.2s ease-in-out infinite; }
.st-drift { animation: st-drift 3.6s ease-in-out infinite; }
.st-drift.d2 { animation-delay: .5s } .st-drift.d3 { animation-delay: 1s }
@media (prefers-reduced-motion: reduce) { .st-pulse, .st-drift { animation: none } }
.step h3 { font-size: 1.1rem; margin-bottom: .35em; }
.step p { color: var(--gray); font-size: .95rem; margin: 0; }

/* ---------- Über / Person ---------- */

/* ---------- Anfahrt / Karte ---------- */
.map-box {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  background: var(--sand-100); box-shadow: inset 0 0 0 1px var(--card-line);
  min-height: 340px; display: grid; place-items: center;
}
.map-consent { text-align: center; padding: 40px 26px; max-width: 520px; }
.map-consent h3 { margin-bottom: .5em; }
.map-consent p { color: var(--gray); font-size: .95rem; }
.map-box iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.map-box.is-loaded { place-items: stretch; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 380px; gap: clamp(28px, 5vw, 48px); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: .93rem; }
.field .req { color: var(--accent); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: 13px 15px; border-radius: 11px; background: var(--white);
  border: 1px solid var(--card-line);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--navy-500);
  box-shadow: 0 0 0 3px rgba(42,95,146,.18);
}
.field textarea { min-height: 130px; resize: vertical; }
.field .hint { font-size: .84rem; color: var(--gray); }

.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
.check label { font-size: .92rem; line-height: 1.5; font-weight: 400; color: var(--gray); }

.form-status { font-size: .95rem; padding: 14px 16px; border-radius: 11px; display: none; }
.form-status.show { display: block; }
.form-status.err { background: #FDECEC; color: #8A1F1F; box-shadow: inset 0 0 0 1px #F3C9C9; }
.form-status.ok  { background: #E9F4EC; color: #1E5230; box-shadow: inset 0 0 0 1px #C3E2CE; }

.contact-card {
  background: var(--white); border-radius: var(--radius-card); padding: 28px 26px;
  box-shadow: inset 0 0 0 1px var(--card-line), 0 18px 38px -28px rgba(8,25,43,.4);
}
.contact-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 4px; }
/* Nur die direkten Kinder der Zeile werden zu flex — sonst wird auch das
   innere <span> zu flex und das <small> rutscht daneben statt darunter. */
.contact-list > li > a, .contact-list > li > span {
  display: flex; align-items: center; gap: 13px; padding: 11px 0;
  text-decoration: none; color: var(--ink); font-size: .98rem;
}
.contact-list > li > a:hover { color: var(--accent); }
.contact-list li + li { border-top: 1px solid var(--line); }
.contact-list svg { flex: none; color: var(--accent); }
.contact-list b, .contact-list > li > a > span, .contact-list > li > span > span { display: block; }
.contact-list small { display: block; color: var(--gray); font-size: .82rem; font-weight: 400; }

.social-row { display: flex; gap: 10px; flex-wrap: wrap; }
.social-btn {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  border-radius: 13px; text-decoration: none;
  background: var(--sand-100); color: var(--navy-800);
  box-shadow: inset 0 0 0 1px var(--sand-300);
  transition: transform .18s ease, background-color .2s ease, color .2s ease;
}
.social-btn:hover { transform: translateY(-2px); background-image: var(--grad-btn); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }

/* ---------- Schluss-CTA ---------- */
.cta-band {
  background-image: var(--grad-navy); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(36px, 6vw, 64px); text-align: center; position: relative; overflow: hidden;
  box-shadow: 0 3px 8px rgba(8,25,43,.16), 0 40px 80px -46px rgba(8,25,43,.85);
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(201,180,142,.18) 0%, transparent 70%);
}
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--gray-on-navy); max-width: 52ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 26px; }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--navy-900); color: var(--gray-on-navy); padding: 52px 0 30px; font-size: .93rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 34px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }
.site-footer h4 { font-family: var(--f-sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sand-300); margin: 0 0 14px; }
.site-footer a { color: var(--gray-on-navy); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
/* Links in der Fusszeile waren nur 16 bis 18 px hoch. Innenabstand statt
   Zwischenraum: die Tippflaeche waechst, der Zeilenrhythmus bleibt gleich. */
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.footer-links a { display: inline-block; padding: 4px 0; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  font-size: .86rem; color: rgba(255,255,255,.6);
}
.footer-bottom a { display: inline-block; padding: 4px 0; }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }

/* ---------- Rechtstext-Seiten ---------- */
.legal { padding: clamp(40px, 7vw, 80px) 0; }
.legal .wrap { max-width: 820px; }
.legal h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-top: 2em; }
.legal h2:first-of-type { margin-top: 1em; }
.legal h3 { font-size: 1.1rem; margin-top: 1.6em; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: .5em; }
.legal .box {
  background: var(--sand-100); border-radius: 12px; padding: 18px 22px;
  box-shadow: inset 0 0 0 1px var(--sand-300); margin: 18px 0;
}
.legal .todo {
  background: #FFF8E5; border-radius: 12px; padding: 16px 20px;
  box-shadow: inset 0 0 0 1px #EBDCA8; margin: 16px 0; font-size: .93rem;
}

/* ---------- Auffahren beim Scrollen ---------- */
/* Eingeblendet wird nur, wenn JavaScript laeuft. Ohne die Klasse .js aus
   assets/vorab.js bleibt jeder Abschnitt sichtbar, sonst waere die Seite
   ohne JavaScript bis auf den Hero leer. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.3,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- Hilfsklassen (statt Inline-Stile, damit die CSP streng bleiben kann) ---------- */
.u-pt-0 { padding-top: 0; }
.u-center { justify-content: center; }
.u-note { margin-top: 14px; font-size: .85rem; }
.u-intro { margin: 0; max-width: 34ch; }
.u-label {
  font-family: var(--f-sans); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sand-600); margin: 0 0 12px;
}
.footer-bottom.plain { border-top: 0; padding-top: 0; }
.brand-name.on-navy { color: #fff; }
.brand-name.on-navy small { color: var(--sand-400); }

/* ---------- Haeufige Fragen ---------- */
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  border-radius: 16px; overflow: hidden;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FDFBF7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--card-line),
    0 2px 6px rgba(8,25,43,.04),
    0 18px 36px -28px rgba(8,25,43,.4);
  transition: box-shadow .25s ease;
}
.faq details[open] {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px var(--sand-300),
    0 3px 9px rgba(8,25,43,.07),
    0 26px 50px -30px rgba(8,25,43,.55);
}
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-size: 1.04rem; font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq-sign {
  flex: none; width: 30px; height: 30px; border-radius: 50%; position: relative;
  background: var(--sand-100); box-shadow: inset 0 0 0 1px var(--sand-300);
  transition: background-color .22s ease;
}
.faq-sign::before, .faq-sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.4px;
  border-radius: 2px; background: var(--accent);
  transform: translate(-50%, -50%); transition: opacity .22s ease, transform .28s ease;
}
.faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq-sign { background: var(--accent); }
.faq details[open] .faq-sign::before, .faq details[open] .faq-sign::after { background: #fff; }
.faq details[open] .faq-sign::after { opacity: 0; }
.faq-a { padding: 0 26px 24px; color: var(--gray); font-size: .99rem; line-height: 1.66; }

/* ---------- Einzugsgebiet ---------- */
.orte {
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.orte li {
  padding: 8px 15px; border-radius: var(--radius-pill);
  font-size: .88rem; color: var(--navy-700);
  background-image: linear-gradient(180deg, #FFFFFF, #F6F0E4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px var(--card-line);
}

/* ---------- Fragebogen im Hero ---------- */
.q-form { min-height: 322px; display: flex; flex-direction: column; }
/* Koederfeld gegen Formular-Spam: aus dem Sichtfeld geschoben statt
   display:none, weil einfache Bots ausgeblendete Felder ueberspringen. */
.koeder { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Statt eines per JavaScript gesetzten Inline-Stils (Uebergabe Regel 4). */
.gc-rail.is-weg { display: none; }

/* Sichtbar nur, wenn JavaScript fehlt. Der Fragebogen laeuft dann nicht,
   also bekommt der Besucher Telefon und E-Mail direkt angeboten. */
.q-ohne-js {
  margin: 0 0 18px; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  font-size: .93rem; line-height: 1.5; color: #fff;
}
.q-ohne-js a { color: var(--sand-300); }

.q-step {
  display: none; border: 0; padding: 0; margin: 0; min-inline-size: 0;
}
.q-step.is-on { display: block; animation: qIn .4s cubic-bezier(.22,1,.3,1); }
@keyframes qIn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .q-step.is-on { animation: none } }

.q-frage {
  padding: 0; font-family: var(--f-serif); font-size: 1.32rem; line-height: 1.24;
  color: #fff; margin-bottom: 6px; letter-spacing: -.012em;
}
.q-sub { font-size: .84rem; color: rgba(255,255,255,.55); margin: 0 0 16px; }
.q-frage + .q-opts { margin-top: 18px; }

.q-opts { display: flex; flex-direction: column; gap: 9px; }
.q-opt { position: relative; cursor: pointer; display: block; }
.q-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.q-opt span {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 18px; border-radius: 14px;
  font-size: .96rem; color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.13);
  transition: transform .18s cubic-bezier(.22,1,.3,1), background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
/* Auswahlpunkt links */
.q-opt span::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.6px rgba(255,255,255,.34);
  transition: all .2s ease;
}
.q-opt:hover span {
  background: rgba(255,255,255,.12); color: #fff; transform: translateX(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.22);
}
.q-opt input:checked + span {
  background: linear-gradient(180deg, #F6F0E4, #DFD0B4); color: var(--navy-900); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 18px -6px rgba(0,0,0,.55);
}
.q-opt input:checked + span::before {
  background: var(--navy-800); box-shadow: inset 0 0 0 2px var(--navy-800), 0 0 0 3px rgba(8,25,43,.18);
}
.q-opt input:focus-visible + span { outline: 3px solid var(--sand-400); outline-offset: 3px; }

.q-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q-paar .gc-label { margin-top: 0; }
.q-opt-tag {
  font-weight: 500; font-size: .72rem; color: rgba(255,255,255,.5);
  text-transform: none; letter-spacing: 0; margin-left: 6px;
}

/* Abschluss nach dem Absenden */
.q-danke { display: none; text-align: center; padding: 26px 6px 12px; }
.q-danke.is-on { display: block; animation: qIn .45s cubic-bezier(.22,1,.3,1); }
.q-danke .haken {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center;
  background: linear-gradient(180deg, #F6F0E4, #DFD0B4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 26px -10px rgba(0,0,0,.6);
}
.q-danke h3 { font-family: var(--f-serif); font-size: 1.35rem; color: #fff; margin-bottom: 8px; }
.q-danke p { font-size: .93rem; color: rgba(255,255,255,.7); margin: 0; }

@media (max-width: 520px) { .q-paar { grid-template-columns: 1fr; } }

/* ---------- Anfahrt und Kontakt nebeneinander ---------- */
.anfahrt-grid { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
@media (max-width: 940px) { .anfahrt-grid { grid-template-columns: 1fr; } }
.anfahrt-grid .map-box { min-height: 420px; }
.anfahrt-grid .map-box iframe { min-height: 420px; }

/* ---------- Bewertungen unter der Karte ---------- */
/* Rein statisch. Kein Widget, kein Nachladen, keine Verbindung zu Google.
   Rechtliche Vorgaben stehen als Kommentar am Block in index.html. */
.bewertungen { margin-top: 34px; }
.bw-kopf { margin-bottom: 18px; }
.bw-kopf h3 { margin: 0 0 4px; }
.bw-quelle { margin: 0; font-size: .9rem; color: var(--gray); }

.bw-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 940px) { .bw-liste { grid-template-columns: 1fr; } }

.bw-karte {
  background: var(--white); border-radius: var(--radius-card); padding: 22px 22px 20px;
  box-shadow: inset 0 0 0 1px var(--card-line), 0 18px 38px -28px rgba(8,25,43,.4);
  display: flex; flex-direction: column; gap: 12px;
}
.bw-sterne { line-height: 0; }
.bw-stern { fill: #C8A15A; display: block; }
.bw-karte blockquote {
  margin: 0; font-size: .97rem; line-height: 1.55; color: var(--navy-900);
}
.bw-wer {
  margin: auto 0 0; padding-top: 4px;
  font-size: .88rem; font-weight: 600; color: var(--navy-900);
}
.bw-wer small { display: block; font-weight: 400; color: var(--gray); }

/* Pflichtangabe nach Paragraf 5b Abs. 3 UWG. Klein, aber lesbar. */
.bw-hinweis {
  margin: 16px 0 0; max-width: 78ch;
  font-size: .82rem; line-height: 1.55; color: var(--gray);
}

/* ---------- Werterhaltung: Querschnitt ---------- */
.value-grid { grid-template-columns: 1fr; }
.wert-schnitt { margin: 0 0 34px; grid-column: 1 / -1; }
.wert-schnitt svg {
  width: 100%; height: auto; display: block;
  border-radius: 20px;
  background: linear-gradient(170deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.10);
}
.card-media .k4-nr   { font-family: var(--f-sans); font-weight: 700; font-size: 12.5px; fill: #FFFFFF; }
.card-media .k4-wort { font-family: var(--f-sans); font-weight: 600; font-size: 14.5px; fill: var(--navy-700); }
.step-visual .ab-zahl  { font-family: var(--f-sans); font-weight: 600; font-size: 15px; fill: var(--navy-700); }
.step-visual .ab-band  { font-family: var(--f-sans); font-weight: 600; font-size: 15px; fill: #FFFFFF; }
.step-visual .ab-klein { font-family: var(--f-sans); font-weight: 500; font-size: 12px; fill: #7C7361; }
/* Kopfzeile: nichts bricht um, nichts läuft über */
.site-header .brand-name,
.site-header .nav-links a,
.site-header .btn { white-space: nowrap; }
.site-header .nav-links { gap: 0; }
.site-header .nav-links a { padding: 10px 11px; font-size: .94rem; }
.site-header .nav-cta { padding: 11px 18px; font-size: .92rem; margin-left: auto; order: 3; }
.site-header .nav-toggle { order: 4; margin-left: 10px; }
.site-header .nav-links { order: 2; }
.site-header .cta-kurz { display: none; }
@media (max-width: 720px) {
  .site-header .cta-lang { display: none; }
  .site-header .cta-kurz { display: inline; }
  .site-header .nav-cta { padding: 10px 16px; font-size: .88rem; min-height: 44px; }
  .site-header .brand-name { font-size: .95rem; }
}
@media (max-width: 520px) {
  /* Nur die Bildmarke; der Link traegt den Namen im aria-label */
  .site-header .brand-name { display: none; }
  .site-header .nav-cta { padding: 9px 15px; font-size: .84rem; min-height: 44px; }
  .site-header .nav { padding-left: 12px; padding-right: 10px; gap: 12px; }
}
.site-header .brand-name { font-size: 1.02rem; }

.wert-schnitt .ws-titel { font-family: var(--f-serif); font-weight: 500; font-size: 17px; fill: #C9E8D2; }
.wert-schnitt .ws-warn  { fill: #FFB4A8; }
.wert-schnitt .ws-fuss  { font-family: var(--f-sans); font-weight: 500; font-size: 13px; fill: #FFFFFF; opacity: .72; }
.wert-schnitt figcaption {
  margin-top: 14px; text-align: center; font-size: .87rem; color: rgba(255,255,255,.58);
}
@keyframes wsSink  { 0%,100% { opacity:.35 } 50% { opacity:.9 } }
@keyframes wsIce   { 0%,100% { opacity:.35; transform: scale(.9) } 50% { opacity:1; transform: scale(1.12) } }
@keyframes wsBead  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes wsCrack { 0%,100% { opacity:.75 } 50% { opacity:1 } }
.ws-sink  { animation: none; }
.ws-ice   { animation: wsIce 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ws-bead  { animation: none; }
.ws-roll  { animation: none; }
.ws-crack { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ws-sink, .ws-ice, .ws-bead, .ws-roll, .ws-crack { animation: none; }
}

/* Die Schritte darunter jetzt zweispaltig, weil die Grafik die volle Breite nimmt */
@media (min-width: 900px) {
  .value-steps { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* ---------- Ablauf-Grafiken: Bewegung ---------- */
.step-visual svg { overflow: visible; }
/* Bewegte Gruppen tragen KEIN eigenes transform-Attribut mehr — sonst
   ueberschreibt die Animation die Position und das Element rutscht aus dem Bild. */
.step-visual [class^="ab-"] { transform-box: view-box; transform-origin: center; }
@keyframes abSchweb { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
@keyframes abBlase  { 0%,100% { transform: translateY(0); opacity:.9 } 50% { transform: translateY(-9px); opacity:1 } }
@keyframes abLupe   { 0%,100% { transform: translate(0,0) } 50% { transform: translate(-10px,6px) } }
@keyframes abMess   { to { stroke-dashoffset: -52 } }
@keyframes abStrahl { 0%,100% { opacity:.55 } 50% { opacity:1 } }
@keyframes abSpritz { 0%,100% { opacity:.35; transform: translateY(0) } 50% { opacity:1; transform: translateY(-5px) } }
@keyframes abSiegel { 0% { transform: scale(.86) rotate(-8deg); opacity:0 } 60% { transform: scale(1.06) rotate(2deg); opacity:1 } 100% { transform: scale(1) rotate(0); opacity:1 } }

.ab-schweb { animation: abSchweb 5s ease-in-out infinite; }
.ab-doc    { animation: abSchweb 5.4s ease-in-out infinite; }
.ab-blase  { animation: abBlase 4.2s ease-in-out infinite; }
.ab-blase.b2 { animation-delay: .8s; }
.ab-lupe   { animation: abLupe 6s ease-in-out infinite; }
.ab-mess path { animation: abMess 3.4s linear infinite; }
.ab-strahl { animation: abStrahl 2.4s ease-in-out infinite; }
.ab-spritz { animation: abSpritz 2.8s ease-in-out infinite; }
.ab-lanze  { animation: abSchweb 3.2s ease-in-out infinite; }
.ab-marke  { animation: abBlase 5s ease-in-out infinite; }
.step:hover .ab-siegel { animation: abSiegel .55s cubic-bezier(.34,1.5,.5,1); }
@media (prefers-reduced-motion: reduce) {
  .ab-schweb, .ab-doc, .ab-blase, .ab-lupe, .ab-strahl, .ab-spritz, .ab-lanze, .ab-marke { animation: none; }
  .ab-mess path { animation: none; }
}

/* Die Grafik bekommt mehr Luft und einen tieferen Grund */
.step-visual {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(68% 58% at 50% 34%, rgba(28,70,112,.10) 0%, transparent 74%),
    linear-gradient(168deg, #F8F3EA 0%, #E9DFCB 100%);
}
.step-visual svg { width: 96%; }

/* ---------- Über mich ---------- */
#ueber-mich { overflow: hidden; }
.um-glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(760px, 90%); aspect-ratio: 1; right: -16%; top: -30%;
  background: radial-gradient(circle, rgba(74,130,184,.30) 0%, rgba(74,130,184,.08) 46%, transparent 72%);
  filter: blur(8px);
  animation: umGlow 13s ease-in-out infinite;
}
@keyframes umGlow { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(-5%,6%) scale(1.1) } }
@media (prefers-reduced-motion: reduce) { .um-glow { animation: none } }

.um-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 400px 1fr; gap: clamp(30px, 5vw, 62px); align-items: center;
}
@media (max-width: 940px) { .um-grid { grid-template-columns: 1fr; } }

.um-photo { position: relative; margin: 0; border-radius: 24px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 3px 10px rgba(8,25,43,.3), 0 40px 70px -34px rgba(0,0,0,.85); }
.um-photo img { width: 100%; display: block; }
.um-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(8,25,43,.72) 100%);
}
.um-tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 100px;
  background: rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(255,255,255,.16);
  color: #fff; font-size: .88rem; font-weight: 600;
}
.um-punkt {
  width: 9px; height: 9px; border-radius: 50%; background: #7BD59A; flex: none;
  box-shadow: 0 0 0 4px rgba(123,213,154,.22);
  animation: umPuls 2.6s ease-in-out infinite;
}
@keyframes umPuls { 0%,100% { box-shadow: 0 0 0 4px rgba(123,213,154,.22) } 50% { box-shadow: 0 0 0 8px rgba(123,213,154,.08) } }
@media (prefers-reduced-motion: reduce) { .um-punkt { animation: none } }

.um-text h2 em { font-style: normal; color: var(--sand-300); }
.um-zitat {
  font-family: var(--f-serif); font-size: clamp(1.15rem, 2.1vw, 1.42rem); line-height: 1.42;
  color: #fff; margin: 0 0 22px; padding: 18px 0 18px 24px;
  border-left: 3px solid var(--sand-400);
}
.um-text p { color: var(--gray-on-navy); }

.um-fakten { list-style: none; margin: 26px 0 28px; padding: 0; display: grid; gap: 12px; }
.um-fakten li { display: flex; align-items: center; gap: 14px; }
.uf-icon {
  width: 44px; height: 44px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: var(--sand-300);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.12);
}
.um-fakten b { display: block; color: #fff; font-size: .98rem; }
.um-fakten span span, .um-fakten li > span:last-child { color: var(--gray-on-navy); font-size: .9rem; }
.um-fakten li > span:last-child { display: block; }

/* ---------- Schluss-CTA mit Reinigungsbahn ---------- */
.cta-band { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 84px) clamp(24px, 5vw, 56px); }
.cta-band > * { position: relative; z-index: 3; }
.cta-glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 120%; aspect-ratio: 2 / 1; left: -10%; top: -60%;
  background: radial-gradient(ellipse at center, rgba(201,180,142,.26) 0%, transparent 66%);
  animation: umGlow 15s ease-in-out infinite;
}
.cta-raster {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.025) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, #000 0%, transparent 82%);
  mask-image: radial-gradient(70% 80% at 50% 40%, #000 0%, transparent 82%);
}

/* Die Flaeche unten: Steine, ueber die eine Reinigungsbahn wandert */

/* Die Bahn selbst: heller Streifen in Kärcher-Gelb, der einmal durchzieht */

/* Was die Bahn passiert hat, bleibt heller — der Reinigungseffekt */

@keyframes cfBahn   { 0% { left: -160px } 62%,100% { left: calc(100% + 40px) } }
@keyframes cfSauber { 0% { background-position: 100% 0 } 62%,100% { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) {
  
}

.cta-inhalt { text-align: center; }
.cta-fuss { font-size: .84rem; color: rgba(255,255,255,.5); margin: 18px 0 0; }

/* ---------- Leistungsgrafiken: Bewegung ---------- */
.card-media svg { overflow: visible; }
.card-media [class^="k1-"], .card-media [class^="k2-"],
.card-media [class^="k3-"], .card-media [class^="k4-"],
.card-media [class^="hz"] {
  transform-box: view-box; transform-origin: center;
}

@keyframes kStrahl { 0%,100% { opacity:.6 } 50% { opacity:1 } }
@keyframes kLanze  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes kSpritz { 0%,100% { opacity:.3; transform: translateY(2px) } 50% { opacity:1; transform: translateY(-6px) } }
@keyframes kTropf  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-11px) } }
@keyframes kFilm   { 0%,100% { opacity:.35 } 50% { opacity:.65 } }
@keyframes kAbroll { 0%,100% { opacity:.25 } 50% { opacity:.75 } }
@keyframes kFuge { 0% { opacity:0; transform: translateX(-14px) } 45%,100% { opacity:1; transform: none } }
@keyframes kKorn   { 0%,100% { opacity:.35; transform: translateY(0) } 50% { opacity:1; transform: translateY(-4px) } }
@keyframes kEbene  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes hzStaub { 0%,100% { opacity:.25; transform: translate(0,0) } 50% { opacity:.9; transform: translate(-5px,-7px) } }
@keyframes hzSetzt { 0%,100% { transform: translateY(0) } 50% { transform: translateY(7px) } }

/* Holzböden */
.hzStaub1 { animation: hzStaub 2.6s ease-in-out infinite; }
.hzStaub2 { animation: hzStaub 2.6s ease-in-out .45s infinite; }
.hzStaub3 { animation: hzStaub 2.6s ease-in-out .9s infinite; }
.hzTropf1 { animation: kTropf 2.6s ease-in-out infinite; }
.hzTropf2 { animation: kTropf 2.6s ease-in-out .35s infinite; }
.hzTropf3 { animation: kTropf 2.6s ease-in-out .7s infinite; }
.hzNeu    { animation: none; }

.k1-strahl { animation: kStrahl 2.2s ease-in-out infinite; }
.k1-lanze  { animation: kLanze 3.4s ease-in-out infinite; }
.k1-spritz { animation: kSpritz 2.6s ease-in-out infinite; }

.k2-film   { animation: kFilm 5s ease-in-out infinite; }
.kt1 { animation: kTropf 4.4s ease-in-out infinite; }
.kt2 { animation: kTropf 4.4s ease-in-out .7s infinite; }
.kt3 { animation: kTropf 4.4s ease-in-out 1.4s infinite; }
.k2-abroll { animation: kAbroll 4.4s ease-in-out infinite; }

.k3-neu    { animation: kFuge 5.5s ease-in-out infinite; }
.k3-kelle  { animation: kLanze 4s ease-in-out infinite; }
.k3-korn   { animation: kKorn 3s ease-in-out infinite; }

.k4-e3 { animation: none; }
.k4-e2 { animation: none; }
.k4-l3 { animation: none; }
.k4-l2 { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .k1-strahl, .k1-lanze, .k1-spritz, .k2-film, .kt1, .kt2, .kt3, .k2-abroll,
  .k3-neu, .k3-kelle, .k3-korn, .k4-e3, .k4-e2, .k4-l3, .k4-l2 { animation: none; }
  .k3-neu { opacity: 1; transform: none; }
}

.card-media { aspect-ratio: 16 / 11; }
/* Die Grafik fuellt die Flaeche aus, statt mittig zu schweben */
.card-media .ph { width: 108%; height: 108%; left: -4%; top: -4%; }