/* ============================================================
   Auftragsrausch Landing v5 — Premium-Anfrage-Objekt,
   Methodik-Säulen, Story-Szene "Premium-Anfrage erzeugen"
   ============================================================ */

/* ================= Premium-Anfrage als Motion-Objekt ================= */
.pq-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
.pq-stage {
  position: relative; display: flex; justify-content: center; align-items: center;
  min-height: 420px; perspective: 1200px;
}
.pq-halo {
  position: absolute; inset: 6% 10%; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(22,119,184,.14), rgba(27,188,203,.07) 52%, transparent 72%);
  filter: blur(2px);
}
.pq-card {
  position: relative; z-index: 1; width: min(420px, 100%);
  border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  border: 1px solid rgba(15,30,50,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(150,168,190,.18),
    0 40px 80px rgba(10,25,45,.22), 0 10px 26px rgba(10,25,45,.1);
  transform: rotateX(6deg) rotateY(-7deg);
  transition: transform 1.1s var(--ease-soft), box-shadow 1.1s var(--ease-soft);
}
.pq-stage.on .pq-card { animation: pqFloat 7s ease-in-out infinite; }
@keyframes pqFloat {
  0%, 100% { transform: rotateX(6deg) rotateY(-7deg) translateY(0); }
  50%      { transform: rotateX(3.5deg) rotateY(-4deg) translateY(-10px); }
}
.pq-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  background:
    radial-gradient(140% 160% at 50% -30%, #2c4d6d 0%, #14293c 44%, #081727 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.3);
}
.pq-head-txt { display: grid; gap: 1px; }
.pq-head-txt b { color: #fff; font-size: 15.5px; letter-spacing: -0.01em; }
.pq-head-txt .mono { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(210,230,246,.72); }
.pq-badge {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; width: 30px; height: 30px; border-radius: 9px;
  background: #0a1c2e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 10px rgba(7,24,39,.32);
}
.pq-body { padding: 18px 20px 20px; display: grid; gap: 12px; }
.pq-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 14px; color: var(--text-muted); font-weight: 600;
  border-bottom: 1px dashed rgba(15,30,50,.1); padding-bottom: 9px;
}
.pq-row b { color: var(--text-heading); font-weight: 700; }
.pq-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.pq-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 12px; border-top: 1px solid rgba(15,30,50,.08); flex-wrap: wrap;
}
.pq-score { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.pq-score i {
  width: 92px; height: 7px; border-radius: 999px; overflow: hidden; display: block;
  background: #e5ecf3; box-shadow: inset 0 1px 2px rgba(15,30,50,.14);
}
.pq-score b {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-strong), #1bbccb);
  box-shadow: 0 0 10px rgba(27,188,203,.5);
  transition: width 1.4s var(--ease-soft) .5s;
}
.pq-stage.on .pq-score b { width: 91%; }
.pq-slot {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--trust);
  padding: 7px 13px; border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #ecf7f1);
  border: 1px solid #c5e5d3;
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(31,138,91,.14);
}
.pq-slot .mono { color: var(--text-heading); }
/* wandernder Glanz über die Karte */
.pq-shine {
  position: absolute; top: -20%; left: 0; width: 42%; height: 140%; pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5) 48%, rgba(190,228,242,.25) 56%, transparent);
  mix-blend-mode: soft-light; transform: translateX(-160%) skewX(-30deg);
}
.pq-stage.on .pq-shine { animation: pqShine 6.5s ease-in-out infinite 1.2s; }
@keyframes pqShine {
  0% { transform: translateX(-160%) skewX(-30deg); opacity: 0; }
  8% { opacity: 1; }
  30%, 100% { transform: translateX(340%) skewX(-30deg); opacity: 0; }
}
/* Chips erscheinen nacheinander (per JS .on) — Basisstil kommt aus scenes.css (.chk) */
@media (max-width: 900px) {
  .pq-grid { grid-template-columns: 1fr; }
  .pq-stage { min-height: 0; padding-block: 10px 6px; }
  .pq-card { transform: rotateX(3deg) rotateY(-3deg); }
}

/* ================= Kapitel 3: Journey-Phasen (Kampagne -> Premium) ================= */
.flow-stage { position: relative; height: 470px; }
/* dezentes Auftragsrausch-Logo auf der Visualisierungsfläche */
.flow-wm { position: absolute; right: 20px; bottom: 18px; width: 84px; height: auto; opacity: .04; pointer-events: none; z-index: 0; }

/* Phase 6: 3D-Premium-Karte als Finale (nutzt pq-* Stile) */
.pq-stage.fl-final {
  position: absolute; inset: 0; min-height: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-out);
}
.pq-stage.fl-final.show { opacity: 1; }
.pq-stage.fl-final .pq-card { width: min(400px, 94%); }
/* Edle Ankunft der Premium-Karte */
.pq-stage.fl-final.show .pq-card { animation: pqArrive 1s var(--ease-soft); }
.pq-stage.fl-final.show .pq-shine { animation: pqShine 2.2s ease-out .2s; }
@keyframes pqArrive {
  0% { transform: rotateX(6deg) rotateY(-7deg) scale(.9); box-shadow: 0 0 0 rgba(27,188,203,0); filter: brightness(1.25); }
  55% { box-shadow: 0 0 70px rgba(27,188,203,.55); }
  100% { transform: rotateX(6deg) rotateY(-7deg) scale(1); filter: brightness(1); }
}

/* 3D-Flip: graue Rückseite -> Premium-Vorderseite */
.pq-flip {
  position: relative; width: min(400px, 94%);
  transform-style: preserve-3d; transform: rotateY(180deg);
  transition: transform .2s linear;
}
.pq-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 26px; }
/* Vorderseite (Premium) bestimmt die Höhe */
.pq-face-front { position: relative; transform: rotateY(0deg); }
.pq-flip .pq-face-front.pq-card { animation: none !important; transform: rotateY(0deg) !important; }
/* Rückseite: schlichte graue Fläche */
.pq-face-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  padding: 22px 22px 24px; display: grid; align-content: start; gap: 14px;
  background: linear-gradient(180deg, #eef1f5 0%, #e3e8ee 100%);
  border: 1px solid rgba(15,30,50,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 40px rgba(15,30,50,.16);
}
.pbc-head { display: flex; align-items: center; gap: 12px; }
.pbc-logo { width: 40px; height: 40px; flex: none; border-radius: 11px; background: #cfd6df; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.pbc-who { display: grid; gap: 1px; }
.pbc-who b { font-size: 15px; color: #56606c; }
.pbc-who span { font-size: 11.5px; font-weight: 600; color: #8a939d; }
.pbc-rows { display: grid; gap: 8px; margin-top: 4px; }
.pbc-rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; border-bottom: 1px dashed rgba(15,30,50,.12); padding-bottom: 7px; }
.pbc-rows span { color: #8a939d; font-weight: 600; }
.pbc-rows b { color: #56606c; font-weight: 700; }
.pbc-note { font-size: 12px; font-weight: 600; color: #97a0aa; }
/* Float/Score/Shine laufen (pq-stage.on kommt von premium.js) — auch ohne .on
   sicherstellen, dass Score & Chips im Finale gefüllt sind */
.pq-stage.fl-final.show .pq-score b { width: 91%; }

/* Fortschritts-Stepper: der Laie sieht immer die ganze Journey + Position */
.fl-steps {
  display: flex; justify-content: space-between; gap: 4px;
  margin: 4px 6px 40px; position: relative;
}
.fl-steps::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 7px; height: 2px;
  background: rgba(15,30,50,.1); border-radius: 2px; z-index: 0;
}
.fl-step {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; flex: 1;
  font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-align: center;
  transition: color .4s;
}
.fl-step i {
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  border: 2px solid rgba(15,30,50,.18); transition: background .4s, border-color .4s, transform .4s var(--ease-out);
}
.fl-step.done i { background: var(--accent); border-color: var(--accent); }
.fl-step.now { color: var(--text-heading); }
.fl-step.now i { background: var(--ar-navy); border-color: var(--ar-navy); transform: scale(1.28); box-shadow: 0 0 0 4px rgba(22,119,184,.16); }
@media (max-width: 560px) { .fl-step { font-size: 9px; } .fl-step i { width: 11px; height: 11px; } }

/* Stationen: immer nur die aktive Phase sichtbar, mittig auf der Bühne */
.fl-zone {
  position: absolute; left: 50%; top: 40%; z-index: 1;
  width: min(500px, 92%);
  transform: translate(-50%, -50%) translateX(40px);
  opacity: 0; pointer-events: none;
  display: grid; gap: 12px; justify-items: stretch;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.fl-zone.now { opacity: 1; transform: translate(-50%, -50%); }
.fl-zone.past { transform: translate(-50%, -50%) translateX(-40px); }
.fl-zone-label {
  display: block; text-align: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 2px;
}
/* Kennzahl unter der Station (erreicht / reagieren) */
.fl-metric {
  display: flex; align-items: baseline; gap: 8px; justify-content: center;
  padding: 8px 16px; border-radius: 999px; justify-self: center;
  background: var(--surface-tint, #eaf3fa); border: 1px solid rgba(22,119,184,.16);
}
.fl-metric b { font-size: 20px; color: var(--accent-strong); }
.fl-metric span { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
/* Plain-Language-Hinweis unter der Station */
.fl-note {
  display: flex; align-items: flex-start; gap: 8px; justify-self: center; max-width: 400px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted); line-height: 1.45;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(31,138,91,.08); border: 1px solid rgba(31,138,91,.16);
}
.fl-note svg { flex: none; margin-top: 1px; color: var(--trust); }
.fl-note.reject { background: rgba(200,60,60,.07); border-color: rgba(200,60,60,.16); }
.fl-note.reject svg { color: #c53c3c; }
.fl-tile {
  position: relative; z-index: 1; border-radius: 18px;
  background: var(--metal-plate-alt, #fff);
  border: 1px solid rgba(15,30,50,.09);
  box-shadow: var(--gloss-sm, 0 6px 16px rgba(15,30,50,.1));
  transition: box-shadow .5s var(--ease-out);
}
.fl-zone.now .fl-tile { box-shadow: var(--gloss-sm, 0 6px 16px rgba(15,30,50,.1)), 0 0 0 1.5px rgba(22,119,184,.28), 0 0 26px rgba(22,119,184,.18); }

/* Reichweiten-Wellen hinter der Station */
.fl-ripple {
  position: absolute; left: 50%; top: 52%; z-index: 0; pointer-events: none;
  width: 115%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(22,119,184,.4);
  transform: translate(-50%, -50%) scale(.35); opacity: 0;
}
.fl-zone.now .fl-ripple { animation: flRipple 3.2s ease-out infinite; }
.fl-zone.now .fl-ripple.r2 { animation-delay: 1.05s; }
.fl-zone.now .fl-ripple.r3 { animation-delay: 2.1s; }
@keyframes flRipple {
  0% { transform: translate(-50%, -50%) scale(.35); opacity: 0; }
  12% { opacity: .55; }
  100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0; }
}

/* Phase 1: Social-Feed-Anzeige (Meta-Stil, generisch) */
.fl-ad { padding: 14px 16px 16px; display: grid; gap: 11px; text-align: left; }
.fl-ad-head { display: flex; align-items: center; gap: 11px; }
.fl-ad-logo {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: #fff;
  background: radial-gradient(130% 150% at 50% -25%, #2c4d6d, #0a1c2e 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 5px 12px rgba(7,24,39,.28);
}
.fl-ad-lines { display: grid; gap: 1px; min-width: 0; flex: 1; }
.fl-ad-lines b { font-size: 14.5px; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-ad-lines span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.fl-ad-lines span svg { opacity: .7; }
.fl-ad-more { display: inline-flex; gap: 3px; flex: none; padding: 4px; }
.fl-ad-more i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); opacity: .6; }
.fl-ad-primary { font-size: 13px; font-weight: 500; color: var(--text-body); line-height: 1.45; }
.fl-ad-primary b { font-weight: 700; color: var(--text-heading); }
.fl-ad-motif {
  height: 122px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 12px 14px; margin-inline: -16px;
  background: radial-gradient(circle at 78% 12%, rgba(255,199,89,.4), transparent 55%), linear-gradient(165deg, #1677B8, #071827);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2); border-radius: 0;
}
.fl-ad-motif span { color: #fff; font-size: 15px; font-weight: 800; text-shadow: 0 1px 8px rgba(0,0,0,.5); letter-spacing: -0.01em; }
.fl-ad-engage { display: flex; align-items: center; justify-content: space-between; }
.fl-ae-left { display: inline-flex; gap: 15px; }
.fl-ad-engage svg { width: 21px; height: 21px; color: var(--text-heading); }
.fl-ae-save { color: var(--text-heading); }
/* Link-Preview-Leiste (FB-Stil, generisch) */
.fl-ad-linkbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-inline: -16px; margin-bottom: -16px; padding: 12px 16px;
  background: #eef1f5; border-top: 1px solid rgba(15,30,50,.08);
}
.fl-ad-link-txt { display: grid; gap: 2px; min-width: 0; }
.fl-ad-link-txt span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.fl-ad-link-txt b { font-size: 13px; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-ad-cta {
  position: relative; overflow: hidden; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--text-heading); padding: 9px 15px; border-radius: 9px;
  background: #dfe4ea; box-shadow: inset 0 0 0 1px rgba(15,30,50,.06);
}
.fl-ad-cta::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-30deg);
}
.fl-zone.now .fl-ad-cta::after { animation: flSheen 2.6s ease-in-out infinite .6s; }
@keyframes flSheen { 0% { left: -60%; } 45%, 100% { left: 130%; } }

/* Phase 2: lokale Karte (Ortschaft mit Straßenraster statt weißer Fläche) */
.fl-map {
  height: 200px; overflow: hidden; border-radius: 16px;
  background:
    radial-gradient(58% 52% at 72% 22%, rgba(31,138,91,.1), transparent 60%),
    radial-gradient(55% 50% at 22% 78%, rgba(22,119,184,.1), transparent 62%),
    linear-gradient(160deg, #f4f8fc, #e7eef6);
}
.fl-map::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(37deg, transparent 0 30px, rgba(15,30,50,.05) 30px 32px),
    repeating-linear-gradient(-53deg, transparent 0 34px, rgba(15,30,50,.04) 34px 36px),
    repeating-linear-gradient(37deg, transparent 0 94px, rgba(15,30,50,.075) 94px 97px);
  mask-image: radial-gradient(120% 100% at 50% 45%, #000 58%, transparent 90%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 58%, transparent 90%);
  opacity: .85;
}
.fl-you {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px;
  border-radius: 50%; background: radial-gradient(60% 60% at 36% 30%, #3b6e94, #0e2a42 75%);
  box-shadow: 0 0 0 5px rgba(22,119,184,.14), 0 3px 8px rgba(10,30,50,.4);
}
.fl-you::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid rgba(22,119,184,.45);
}
.fl-zone.now .fl-you::after { animation: flPing 2s ease-out infinite; }
@keyframes flPing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.fl-dot {
  position: absolute; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%;
  background: radial-gradient(60% 60% at 36% 30%, #7cc4ee, #1677B8 78%);
  box-shadow: 0 0 0 3px rgba(22,119,184,.12);
  opacity: 0; transform: scale(.4); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.fl-zone.now .fl-dot { opacity: 1; transform: none; animation: flGlow 3.2s ease-in-out infinite .5s; }
.fl-zone.now .fl-dot:nth-child(2) { transition-delay: .15s; }
.fl-zone.now .fl-dot:nth-child(3) { transition-delay: .55s; animation-delay: 1s; }
.fl-zone.now .fl-dot:nth-child(4) { transition-delay: .95s; animation-delay: 1.5s; }
.fl-zone.now .fl-dot:nth-child(5) { transition-delay: 1.35s; animation-delay: 2s; }
.fl-zone.now .fl-dot:nth-child(6) { transition-delay: 1.75s; animation-delay: 2.5s; }
@keyframes flGlow { 0%,100% { box-shadow: 0 0 0 3px rgba(22,119,184,.12); } 50% { box-shadow: 0 0 0 8px rgba(22,119,184,.05), 0 0 16px rgba(27,188,203,.55); } }

/* Phase 3: Interessent klickt */
.fl-person { display: flex; align-items: center; gap: 14px; padding: 22px 56px 22px 24px; }
.fl-avatar {
  width: 46px; height: 46px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff;
  background: radial-gradient(130% 150% at 50% -25%, #2c4d6d, #0a1c2e 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 5px 12px rgba(7,24,39,.28);
}
.fl-click {
  position: absolute; right: 26px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px;
  border-radius: 50%; background: radial-gradient(60% 60% at 36% 30%, #7cc4ee, #1677B8 80%);
  box-shadow: 0 0 10px rgba(27,188,203,.5);
}
.fl-click::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid rgba(22,119,184,.5);
}
.fl-zone.now .fl-click::after { animation: flPing 1.5s ease-out infinite .4s; }

/* Phase 4: Anfrage-Strecke mit echten Feldern */
.fl-form { padding: 18px 22px 20px; display: grid; gap: 10px; }
.fl-form-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.fl-field {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 13px; border-radius: 10px; overflow: hidden;
  background: #f1f6fb; border: 1px solid rgba(15,30,50,.08);
  opacity: 0; transform: translateX(-8px);
}
.fl-field i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text-muted); position: relative; z-index: 1; }
.fl-field em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--text-heading); position: relative; z-index: 1; }
.fl-field::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, rgba(22,119,184,.14), rgba(22,119,184,.04));
}
.fl-zone.now .fl-field { animation: flFieldIn .5s var(--ease-out) forwards; }
.fl-zone.now .fl-field:nth-of-type(2) { animation-delay: .45s; }
.fl-zone.now .fl-field:nth-of-type(3) { animation-delay: .9s; }
.fl-zone.now .fl-field::after { animation: flFill .6s var(--ease-out) forwards; }
.fl-zone.now .fl-field:nth-of-type(2)::after { animation-delay: .45s; }
.fl-zone.now .fl-field:nth-of-type(3)::after { animation-delay: .9s; }
@keyframes flFieldIn { to { opacity: 1; transform: none; } }
@keyframes flFill { to { width: 100%; } }
.fl-form-done {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--trust);
  padding: 6px 13px; border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #ecf7f1); border: 1px solid #c5e5d3;
  opacity: 0; transform: translateY(5px);
  transition: opacity .5s var(--ease-out) 1.5s, transform .5s var(--ease-out) 1.5s;
}
.fl-zone.now .fl-form-done { opacity: 1; transform: none; }

/* Phase 5: Vorprüfungs-Gate (Navy Premium) */
.fl-gate {
  border-radius: 20px; padding: 18px 22px 20px;
  background: radial-gradient(140% 160% at 50% -30%, #2c4d6d 0%, #14293c 44%, #081727 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 24px rgba(70,140,200,.12), 0 16px 36px rgba(7,24,39,.3);
}
.fl-gate-title {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 700; color: #fff; letter-spacing: .01em;
}
.fl-gate-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }

/* Phase 5: Filter-Maschine — die Anfrage läuft scroll-gescrubbt durch den Trichter */
.fl-machine { position: relative; padding: 96px 0 58px; }
.fl-funnel {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 38px;
  background: linear-gradient(180deg, #35597d 0%, #14293c 90%);
  clip-path: polygon(0 0, 100% 0, 63% 100%, 37% 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2);
  opacity: .96;
}
.fl-funnel::after {
  content: ""; position: absolute; left: 10%; right: 10%; top: 5px; height: 7px;
  border-radius: 999px; background: rgba(9,22,36,.7);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.55);
}
.fl-funnel-out {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 24px;
  background: linear-gradient(180deg, #14293c, #081727);
  clip-path: polygon(10% 0, 90% 0, 66% 100%, 34% 100%);
}
.fl-gate { position: relative; overflow: hidden; }
.fl-scan {
  position: absolute; left: 10px; right: 10px; top: 0; height: 30px;
  border-radius: 10px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(27,188,203,0), rgba(27,188,203,.24) 50%, rgba(27,188,203,0));
  transition: opacity .3s var(--ease-out);
}
.fl-out {
  position: absolute; bottom: 0; left: 50%; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 11px;
  background: #fff; border: 1px solid rgba(31,138,91,.45);
  box-shadow: 0 8px 18px rgba(15,30,50,.16), 0 0 18px rgba(31,138,91,.28);
  font-size: 11.5px; font-weight: 700; color: var(--trust);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, -10px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.fl-out svg { color: var(--trust); }
.fl-out.show { opacity: 1; transform: translate(-50%, 0); }

/* Phase 7: Mini-Vertriebskalender — Premium-Anfragen landen in den Slots */
.fl-zone.z6 { width: min(640px, 96%); }
.fl-week { padding: 16px 18px 18px; display: grid; gap: 12px; }
.fl-wk-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--text-heading); }
.fl-wk-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--trust); }
.fl-wk-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--trust); box-shadow: 0 0 8px rgba(31,138,91,.6); }
.fl-wk-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.fl-wk-day { display: grid; gap: 6px; align-content: start; }
.fl-wk-day > .mono { font-size: 10px; font-weight: 600; letter-spacing: .07em; color: var(--text-muted); text-align: center; }
.fl-wk-cell { min-height: 118px; border-radius: 10px; border: 1px dashed rgba(15,30,50,.16); background: #f4f8fc; padding: 5px; display: grid; gap: 5px; align-content: start; }
.fl-wk-ev { font-size: 10px; font-weight: 700; color: var(--text-heading); background: #e8f2fa; border: 1px solid #C7E3F7; border-radius: 7px; padding: 4px 6px; }
.fl-wk-slot {
  border-radius: 7px; padding: 4px 6px; min-height: 23px;
  border: 1px dashed rgba(22,119,184,.35); background: transparent;
}
/* Premium-Termin: sauber, hell, klare Kante — kein Leuchten */
.fl-wk-tgt.filled {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; color: var(--text-heading);
  border-radius: 7px; padding: 4px 6px; min-height: 23px;
  background: #fff; border: 1px solid rgba(22,119,184,.55);
  box-shadow: 0 1px 3px rgba(15,30,50,.1);
}
.fl-wk-tgt.filled svg { color: var(--accent-strong); flex: none; }
/* Wanderndes Premium-Badge (wie oben rechts auf der Karte) */
.fl-carry .fc-card {
  inset: auto; left: 50%; top: 50%;
  width: 30px; height: 30px; transform: translate(-50%, -50%);
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
  background: radial-gradient(130% 150% at 50% -25%, #2c4d6d, #0a1c2e 70%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 18px rgba(7,24,39,.3), 0 0 16px rgba(27,188,203,.3);
}
.fl-carry.lux .fc-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 30px rgba(27,188,203,.6), 0 8px 18px rgba(7,24,39,.32);
}
/* Umsatz-Leiste: füllt sich, wenn alle Slots belegt sind — klarer Fokus */
.fl-wk-rev { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--text-heading); }
.fl-wk-rev i { flex: 1; height: 9px; border-radius: 999px; background: #e5ecf3; overflow: hidden; box-shadow: inset 0 1px 2px rgba(15,30,50,.12); }
.fl-wk-rev b { display: block; height: 100%; width: 46%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-strong), #1bbccb); transition: width .5s var(--ease-out); }
.fl-wk-rev em { font-style: normal; display: inline-block; font-size: 17px; font-weight: 800; color: var(--trust); min-width: 64px; text-align: right; }
.fl-wk-rev.on b { box-shadow: 0 0 14px rgba(27,188,203,.7); }
.fl-wk-rev.on em { text-shadow: 0 0 12px rgba(31,138,91,.4); animation: flRevPulse 1.6s ease-in-out infinite; }
@keyframes flRevPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .fl-wk-rev.on em { animation: none; } }

/* Die Anfrage-Karte: entsteht aus dem Signal, wächst zum Premium-Output */
.fl-card {
  position: absolute; z-index: 3; left: 50%; top: 76%;
  transform: translate(-50%, -50%) scale(.85);
  width: 232px; padding: 14px 17px 15px; border-radius: 17px;
  display: grid; gap: 3px;
  background: var(--metal-premium-alt, #fff);
  border: 1px solid rgba(15,30,50,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 32px rgba(15,30,50,.18);
  opacity: 0; pointer-events: none;
  transition: left 1.05s var(--ease-soft), top 1.05s var(--ease-soft),
              transform 1.05s var(--ease-soft), opacity .6s var(--ease-out), box-shadow .5s var(--ease-out);
}
.fl-card.show { opacity: 1; transform: translate(-50%, -50%); }
/* Scroll-Scrub: Karte folgt dem Finger, nur Deckkraft weich */
.fl-card.scrub { transition: opacity .6s var(--ease-out); }
.fl-card b { font-size: 15.5px; color: var(--text-heading); }
.fl-card > span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.fl-card-rows {
  display: grid; gap: 5px; margin-top: 4px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease-out), opacity .5s var(--ease-out) .1s;
}
.fl-card.detail .fl-card-rows { max-height: 120px; opacity: 1; }
.fl-card-rows span { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; border-bottom: 1px dashed rgba(15,30,50,.1); padding-bottom: 4px; }
.fl-card-rows i { font-style: normal; font-weight: 600; color: var(--text-muted); }
.fl-card-rows b { font-size: 11.5px; font-weight: 700; color: var(--text-heading); }
.fl-card-score {
  display: flex; align-items: center; gap: 9px; margin-top: 6px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease-out) .3s, opacity .5s var(--ease-out) .4s;
}
.fl-card.focus .fl-card-score { max-height: 30px; opacity: 1; }
.fl-card-score i { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
.fl-card-score span { flex: 1; height: 6px; border-radius: 999px; background: #e5ecf3; overflow: hidden; box-shadow: inset 0 1px 2px rgba(15,30,50,.12); }
.fl-card-score span b {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-strong), #1bbccb);
  transition: width 1.2s var(--ease-soft) .7s;
}
.fl-card.focus .fl-card-score span b { width: 92%; }
.fl-card-score em { font-style: normal; font-size: 10.5px; color: var(--trust); }
.fl-card.premium {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1.5px rgba(22,119,184,.4),
              0 30px 70px rgba(22,119,184,.3), 0 0 60px rgba(27,188,203,.22);
}
/* Finale: die Premium-Anfrage allein im Fokus */
.fl-card.focus { transform: translate(-50%, -50%) scale(1.22); }
.fl-card-badge {
  position: absolute; top: -12px; right: -10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; width: 28px; height: 28px; border-radius: 8px;
  background: #0a1c2e;
  opacity: 0; transform: scale(.8); transition: opacity .5s var(--ease-out) .35s, transform .5s var(--ease-out) .35s;
}
.fl-card.premium .fl-card-badge { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .flow-stage { height: 430px; }
  .fl-card { width: 196px; }
  .fl-card.focus { transform: translate(-50%, -50%) scale(1.05); }
  .fl-map { height: 150px; }
}
/* Wander-Token: macht sichtbar, wie ein Signal zum Interessenten,
   zur Anfrage und zur Premium-Anfrage wird */
.fl-carry {
  position: absolute; z-index: 5; left: 50%; top: 50%;
  width: 46px; height: 46px; margin: -23px;
  opacity: 0; pointer-events: none;
  will-change: left, top, opacity;
}
.fl-carry-core {
  position: absolute; inset: 0; display: block;
  will-change: transform;
}
.fl-carry .fc {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; font-size: 15px;
}
.fl-carry .fc-dot {
  background: radial-gradient(60% 60% at 36% 30%, #7cc4ee, #1677B8 78%);
  box-shadow: 0 0 0 4px rgba(22,119,184,.14), 0 0 20px rgba(27,188,203,.6);
}
.fl-carry .fc-avatar {
  color: #fff;
  background: radial-gradient(130% 150% at 50% -25%, #2c4d6d, #0a1c2e 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 20px rgba(7,24,39,.32), 0 0 22px rgba(27,188,203,.3);
}
.fl-carry .fc-doc {
  border-radius: 14px; color: var(--accent-strong);
  background: linear-gradient(160deg, #ffffff 0%, #eef5fb 55%, #dfeaf4 100%);
  border: 1px solid rgba(22,119,184,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 4px rgba(15,30,50,.12),
              0 12px 24px rgba(15,30,50,.28), 0 0 18px rgba(22,119,184,.22);
}
.fl-carry .fc-star {
  color: #fff;
  background: radial-gradient(130% 150% at 50% -25%, #2c4d6d, #0a1c2e 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 0 28px rgba(27,188,203,.55), 0 10px 24px rgba(7,24,39,.32);
}
/* Edle Verwandlung: Star-Hop glüht hochwertig */
.fl-carry.lux .fc-star {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 42px rgba(27,188,203,.8), 0 0 90px rgba(120,180,230,.5), 0 12px 26px rgba(7,24,39,.35);
}
.fl-carry-label {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 12px);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--accent-strong); background: rgba(255,255,255,.94);
  padding: 3px 10px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15,30,50,.14);
}

/* Betriebs-Label auf der Karte */
.fl-you-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, 14px);
  font-size: 10.5px; font-weight: 700; color: var(--ar-navy);
  background: rgba(255,255,255,.9); padding: 1px 7px; border-radius: 6px; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .fl-carry { display: none; }
  .fl-scan { opacity: 0 !important; }
  .fl-zone.now .fl-dot, .fl-zone.now .fl-ripple, .fl-zone.now .fl-you::after,
  .fl-zone.now .fl-click::after, .fl-zone.now .fl-ad-cta::after { animation: none; }
  .fl-zone.now .fl-ripple { opacity: 0; }
  .fl-zone.now .fl-field { opacity: 1; transform: none; animation: none; }
  .fl-zone.now .fl-field::after { width: 100%; animation: none; }
}

/* ================= Kapitel 3: Sticky-Scroll ohne Step-Karten ================= */
.flow-scroll { position: relative; height: 580vh; }
.flow-sticky {
  position: sticky; top: 0; height: 100vh;
  max-width: 1020px; margin-inline: auto;
  display: grid; gap: 18px; align-content: center;
  box-sizing: border-box; padding-block: 76px 16px;
}
/* Die Bühne nutzt die Viewport-Höhe, mittig zentriert — während des Pins
   ist nur die Animation zu sehen */
.flow-panel .flow-stage { height: clamp(400px, calc(100vh - 360px), 600px); }
.flow-caption {
  text-align: center; max-width: 620px; margin-inline: auto;
  font-size: 16.5px; font-weight: 600; line-height: 1.55;
  color: rgba(206,222,238,.88);
  transition: opacity .22s var(--ease-out);
}
.flow-caption.swap { opacity: 0; }
@media (max-width: 760px) {
  .flow-scroll { height: 460vh; }
  .flow-sticky { gap: 14px; padding-block: 70px 12px; }
  .flow-caption { font-size: 14px; }
}

/* ================= Diagnose: Problem / Konsequenz / Ansatz ================= */
.dr-rows { display: grid; gap: 9px; margin-bottom: 20px; }
.dr-row {
  display: grid; grid-template-columns: 148px 1fr; gap: 14px; align-items: baseline;
  padding: 11px 15px; border-radius: 13px;
  background: rgba(15,30,50,.04);
  border: 1px solid rgba(15,30,50,.05);
}
.dr-row span {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.dr-row p { font-size: 14.5px; font-weight: 600; color: var(--text-body); line-height: 1.5; }
.dr-row.ok {
  background: linear-gradient(180deg, #f2faf6, #e9f6ef);
  border-color: rgba(31,138,91,.18);
}
.dr-row.ok span { color: var(--trust); }
.dr-row.ok p { color: var(--text-heading); }
@media (max-width: 640px) { .dr-row { grid-template-columns: 1fr; gap: 3px; } }

/* ================= Vergleich: Auftragsrausch-Flow veredelt ================= */
.vs-col.ar .vs-flow { position: relative; gap: 13px; justify-items: stretch; padding-left: 2px; }
.vs-col.ar .vs-flow::before {
  content: ""; position: absolute; left: 23px; top: 21px; bottom: 21px; width: 2px;
  transform: translateX(-1px);
  background: linear-gradient(180deg, #1677B8, #1bbccb 55%, #34C98A);
  box-shadow: 0 0 8px rgba(27,188,203,.4);
  opacity: .7; border-radius: 2px;
}
.vs-col.ar .vs-arrow { display: none; }
.vs-col.ar .vs-node {
  position: relative; z-index: 1; justify-content: flex-start;
  padding: 12px 16px 12px 44px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 22px rgba(0,0,0,.2) !important;
}
.vs-col.ar .vs-node::before {
  content: ""; position: absolute; left: 15px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 36% 30%, #9fdcff, #1677B8 82%);
  box-shadow: 0 0 10px rgba(27,188,203,.55), 0 0 0 3px rgba(22,119,184,.22);
}
.vs-col.ar .vs-node.end.good {
  background: linear-gradient(180deg, rgba(31,138,91,.3), rgba(31,138,91,.16)) !important;
  border: 1px solid rgba(52,201,138,.5) !important;
}
.vs-col.ar .vs-node.end.good::before {
  background: radial-gradient(60% 60% at 36% 30%, #a9f0cf, #1F8A5B 82%);
  box-shadow: 0 0 10px rgba(52,201,138,.6), 0 0 0 3px rgba(31,138,91,.24);
}

/* ================= Garantie-Check: hervorgehoben ================= */
#gquiz {
  box-shadow: var(--gloss-lift, 0 34px 70px rgba(15,30,50,.2)), 0 0 70px rgba(70,150,210,.22);
}

/* ================= Deckblatt / Cover ================= */
.cover { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(180deg, #fbfdff 0%, #eef4fa 100%); }
.cover-bg { position: absolute; inset: 0; pointer-events: none; }
.cover-glow { position: absolute; left: 50%; top: 46%; width: 62vw; height: 62vw; max-width: 820px; max-height: 820px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(22,119,184,.10), rgba(22,119,184,0) 68%); }
.cover-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(15,30,50,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,30,50,.045) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 40%, transparent 78%); mask-image: radial-gradient(circle at 50% 46%, #000 40%, transparent 78%); }
.cover-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; padding: 40px 24px; }
.cover-glass { display: flex; align-items: center; justify-content: center; width: clamp(200px, 34vw, 340px); aspect-ratio: 1; border-radius: 44px; background: rgba(255,255,255,.42); -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%); border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -30px 60px rgba(22,119,184,.08), 0 40px 90px rgba(15,30,50,.14); }
.cover-mark { width: 56%; height: auto; opacity: .9; filter: drop-shadow(0 8px 20px rgba(15,30,50,.14)); }
.cover-wordmark { width: clamp(180px, 24vw, 240px); height: auto; }
.cover-tag { margin: 0; font-size: clamp(15px, 2.2vw, 19px); font-weight: 600; color: var(--text-muted); letter-spacing: -0.01em; }
.cover-scroll { margin-top: 8px; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; }
.cover-scroll svg { animation: coverBob 1.8s ease-in-out infinite; }
@keyframes coverBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .cover-scroll svg { animation: none; } }

/* Cover merged: transparent glass, heading, subline, trust */
.cover-glass { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.55); }
.cover-glass { width: clamp(160px, 26vw, 250px); }
.cover-title { margin: 4px 0 0; font-size: clamp(30px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.02em; color: var(--text-heading); max-width: 16ch; }
.cover-signals { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; margin-top: 6px; }
.csig { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.csig b { font-size: 22px; letter-spacing: -0.02em; color: var(--text-heading); }
.csig span { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }

/* Cover elegant: logo as frosted watermark, content over it */
.cover-watermark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(320px, 52vw, 640px); height: auto; z-index: 0;
  opacity: .10; filter: blur(2px) saturate(120%) drop-shadow(0 30px 60px rgba(15,30,50,.12));
  pointer-events: none;
}
.cover-inner { z-index: 2; }

/* Cover watermark: larger, brand-forward, trust immediate */
.cover-watermark { width: clamp(440px, 68vw, 900px); opacity: .13; filter: blur(1.5px) saturate(125%) drop-shadow(0 30px 70px rgba(15,30,50,.14)); }
.cover-inner .cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 4px; }

/* ============================================================
   BRAND-STORY — Logo-Reveal, Strom-Puls, Emblem, Finale
   ============================================================ */

/* Cover-Mark: ersetzt das PNG-Wasserzeichen durch die animierbare Marke */
.cover-watermark.cm { opacity: 1; filter: none; }
.cm-fillg { filter: blur(1.2px); }
.cm-fill { fill: #0F172A; opacity: 0; transition: opacity 1.1s var(--ease-soft) 1.15s; }
.cover.brand-in .cm-fill, .cover.brand-done .cm-fill { opacity: .11; }
.cm-stroke {
  fill: none; stroke: url(#cmGrad); stroke-width: 7; stroke-linecap: round;
  opacity: 0;
}
.cover.brand-in .cm-stroke { animation: cmDraw 1.1s var(--ease-soft) .1s forwards; }
@keyframes cmDraw {
  0%   { opacity: .65; }
  100% { stroke-dashoffset: 0; opacity: .24; }
}
.cover.brand-done .cm-stroke { stroke-dashoffset: 0 !important; opacity: .15; animation: none; transition: opacity .8s; }
.cm-pulse {
  fill: none; stroke: url(#cmGrad); stroke-width: 5.5; stroke-linecap: round;
  opacity: 0; filter: drop-shadow(0 0 6px rgba(27,188,203,.5));
}

/* Cover-Inhalt: gestaffelter Einzug nach dem Marken-Reveal.
   Nur aktiv, wenn JS .brand-prep gesetzt hat — ohne JS bleibt alles sichtbar. */
.cover.brand-prep .cover-inner > * { opacity: 0; transform: translateY(12px); }
.cover.brand-in .cover-inner > * { animation: cvIn .6s var(--ease-out) forwards; }
.cover.brand-in .cover-inner > :nth-child(1) { animation-delay: .3s; }
.cover.brand-in .cover-inner > :nth-child(2) { animation-delay: .42s; }
.cover.brand-in .cover-inner > :nth-child(3) { animation-delay: .52s; }
.cover.brand-in .cover-inner > :nth-child(4) { animation-delay: .6s; }
.cover.brand-in .cover-inner > :nth-child(5) { animation-delay: .68s; }
.cover.brand-in .cover-inner > :nth-child(6) { animation-delay: .76s; }
.cover.brand-in .cover-inner > :nth-child(7) { animation-delay: .84s; }
.cover.brand-in .cover-inner > :nth-child(8) { animation-delay: .95s; }
@keyframes cvIn { to { opacity: 1; transform: none; } }
.cover.brand-done .cover-inner > * { opacity: 1 !important; transform: none !important; animation: none !important; }

/* Method-Seal als Chrome-Emblem: rotierender Glint + Tilt-Bereitschaft */
.method-seal i { overflow: hidden; transition: transform .3s var(--ease-out); will-change: transform; }
.method-seal i img { position: relative; z-index: 1; }
.method-seal i::before {
  content: ""; position: absolute; inset: -40%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.45) 38deg, transparent 95deg, transparent 250deg, rgba(255,255,255,.25) 300deg, transparent 360deg);
  animation: metalSpin 9s linear infinite;
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) { .method-seal i::before { animation: none; } }

/* Primär-CTA: AR-Zeichen als Signatur-Wasserzeichen */
.btn-primary::before {
  content: ""; position: absolute; right: -6px; bottom: -12px; width: 58px; height: 58px;
  background: url("assets/logo-mark-white.png") center / contain no-repeat;
  opacity: .1; pointer-events: none; transform: rotate(-6deg);
  transition: opacity var(--dur) var(--ease-out);
}
.btn-primary:hover::before { opacity: .16; }

/* Finale: Signale fliegen ins Siegel, die Marke fängt sie auf */
.mini-engine .me-sig { will-change: transform, opacity; }
.mini-engine.assemble .me-sig { animation: meFly 1s var(--ease-soft) forwards !important; }
.mini-engine.assemble .me-sig.s2 { animation-delay: .22s !important; }
.mini-engine.assemble .me-sig.s3 { animation-delay: .44s !important; }
@keyframes meFly {
  0%   { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(58px) scale(.35); }
}
.mini-engine.assemble .method-seal { animation: sealCatch .7s var(--ease-soft) 1.3s both; }
@keyframes sealCatch {
  0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
  45%  { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 34px rgba(27,188,203,.55); transform: scale(1.05); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 16px rgba(27,188,203,.22); transform: scale(1); }
}
.mini-engine.assembled .me-sig { opacity: 0; }
.mini-engine.assembled .method-seal { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 16px rgba(27,188,203,.22); }
@media (prefers-reduced-motion: reduce) {
  .cover.brand-prep .cover-inner > * { opacity: 1; transform: none; }
  .cm-pulse { display: none; }
}

/* ============================================================
   COVER — Refresh: mehr Weißraum, klare Hierarchie, ruhiger
   (überschreibt die früheren Cover-Regeln in dieser Datei)
   ============================================================ */
.cover-inner {
  gap: clamp(17px, 2.2vw, 24px);
  max-width: 940px; padding: clamp(48px, 8vh, 96px) 24px;
}
/* Headline: großzügiger, balanciert, führt klar */
.cover-title {
  margin: clamp(4px, 1vw, 12px) 0 0;
  font-size: clamp(33px, 5.2vw, 58px);
  line-height: 1.08; letter-spacing: -0.025em;
  max-width: 19ch; text-wrap: balance;
}
/* Subline: ein Gedanke, ruhig darunter */
.cover-tag {
  max-width: 46ch; line-height: 1.5;
  font-size: clamp(15px, 1.7vw, 18.5px);
}
/* Microcopy sitzt eng unter den Buttons */
.cover-inner .cta-row { margin-top: clamp(8px, 1.4vw, 16px); }
.cta-risk { margin-top: calc(-1 * clamp(17px, 2.2vw, 24px) + 10px); }
/* Trust-Zeile: ruhiger Footer, deutlich abgesetzt */
.cover-signals {
  margin-top: clamp(20px, 3.4vw, 40px);
  gap: 10px clamp(26px, 4vw, 52px);
  padding-top: clamp(18px, 2.6vw, 28px);
  position: relative;
}
.cover-signals::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 140px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,30,50,.14), transparent);
}
.csig b { font-size: 20px; opacity: .92; }
.csig span { font-size: 12px; }
.cover-scroll { margin-top: clamp(16px, 3vw, 34px); }

/* Marken-Wasserzeichen: dezenter, damit die Botschaft klar führt */
.cover-watermark.cm { width: clamp(340px, 50vw, 660px); }
.cover.brand-in .cm-fill, .cover.brand-done .cm-fill { opacity: .06; }
.cover.brand-done .cm-stroke { opacity: .09 !important; }
.cover-glow { background: radial-gradient(circle, rgba(22,119,184,.08), rgba(22,119,184,0) 68%); }

@media (max-width: 560px) {
  .cover-inner { gap: 15px; padding-block: clamp(40px, 8vh, 72px); }
  .cover-title { font-size: clamp(29px, 8.4vw, 40px); max-width: 16ch; }
  .cover-signals { flex-wrap: nowrap; gap: 14px; width: 100%; }
  .csig { flex: 1; min-width: 0; }
  .csig b { font-size: 17px; }
  .csig span { font-size: 10.5px; }
}

/* ============================================================
   HERO-VERSCHMELZUNG — Botschaft links, Signal Engine rechts.
   Ersetzt das frühere Deckblatt (Cover-Regeln oben sind inaktiv).
   ============================================================ */
.hero {
  display: flex; align-items: center;
  min-height: min(920px, calc(100svh - 72px));
  padding: clamp(44px, 5.5vw, 80px) 0 clamp(36px, 4vw, 60px);
}
/* Zentrales Premium-Layout: Botschaft mittig, darunter die Engine als Bühne */
.hero-grid {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(30px, 3.6vw, 48px); width: 100%;
}
.hero-copy {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(15px, 1.8vw, 22px); max-width: 860px;
}
.hero-copy .cover-title {
  margin: 2px 0 0; font-size: clamp(33px, 4.6vw, 58px);
  line-height: 1.07; letter-spacing: -0.025em; max-width: 19ch; text-wrap: balance;
}
.hero-copy .cover-tag { max-width: 46ch; }
.hero-copy .cta-row { justify-content: center; align-items: center; margin-top: 6px; gap: 14px 26px; }
.hero-copy .cta-risk { margin-top: -6px; }
.hero-copy .cover-signals {
  justify-content: center; margin-top: clamp(8px, 1.4vw, 16px);
  padding-top: 18px; gap: 8px clamp(24px, 3vw, 48px);
}
/* Engine als Kino-Keyvisual: leicht gekippt, richtet sich beim Scrollen auf */
.hero-visual { width: 100%; max-width: 1140px; perspective: 1400px; }
.hero-visual .engine-shell { margin: 0 auto; max-width: none; transform: rotateX(var(--tiltx, 9deg)); transform-origin: top center; will-change: transform; }
.hero-visual .engine-head { margin-bottom: 12px; }

/* Marken-Wasserzeichen: angeschnittenes Emblem rechts — klar erkennbar,
   liegt nicht unter dem Text */
.hero .cover-watermark {
  left: auto; right: -7%; top: 30%;
  transform: translateY(-40%);
  width: clamp(460px, 42vw, 760px);
}
.hero.brand-in .cm-fill, .hero.brand-done .cm-fill { opacity: .085; }
.hero.brand-done .cm-stroke { opacity: .16 !important; }

/* Brand-Reveal auf den verschmolzenen Hero umgezogen */
.hero.brand-in .cm-fill, .hero.brand-done .cm-fill { opacity: .06; }
.hero.brand-in .cm-stroke { animation: cmDraw 1.1s var(--ease-soft) .1s forwards; }
.hero.brand-done .cm-stroke { stroke-dashoffset: 0 !important; opacity: .09 !important; animation: none; transition: opacity .8s; }
.hero.brand-prep .hero-copy > *, .hero.brand-prep .hero-proof, .hero.brand-prep .hero-visual { opacity: 0; transform: translateY(12px); }
.hero.brand-in .hero-copy > *, .hero.brand-in .hero-proof, .hero.brand-in .hero-visual { animation: cvIn .6s var(--ease-out) forwards; }
.hero.brand-in .hero-copy > :nth-child(1) { animation-delay: .25s; }
.hero.brand-in .hero-copy > :nth-child(2) { animation-delay: .36s; }
.hero.brand-in .hero-copy > :nth-child(3) { animation-delay: .46s; }
.hero.brand-in .hero-copy > :nth-child(4) { animation-delay: .54s; }
.hero.brand-in .hero-copy > :nth-child(5) { animation-delay: .62s; }
.hero.brand-in .hero-proof { animation-delay: .74s; }
.hero.brand-in .hero-visual { animation-delay: .55s; }
.hero.brand-done .hero-copy > *, .hero.brand-done .hero-proof, .hero.brand-done .hero-visual { opacity: 1 !important; transform: none !important; animation: none !important; }

@media (max-width: 1080px) {
  .hero { min-height: 0; }
  .hero-copy .cover-title { max-width: 17ch; }
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .hero-visual .engine-shell { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero.brand-prep .hero-copy > *, .hero.brand-prep .hero-visual { opacity: 1; transform: none; }
}

/* ============================================================
   SIGNAL ENGINE — mobile, gestapelte Variante (lesbar statt winzig)
   Ab <=700px ersetzt die Stapel-Version das skalierte Diagramm.
   ============================================================ */
.engine-mobile { display: none; }
@media (max-width: 700px) {
  .hero-visual .engine-scaler { display: none; }
  .engine-mobile { display: grid; gap: 6px; margin-top: 14px; }
}
.em-label {
  display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
}
.em-signals { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.em-sig {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--text-heading);
  background: #fff; border: 1px solid var(--border-card);
  border-radius: 999px; padding: 7px 13px 7px 10px; box-shadow: var(--shadow-sm);
}
.em-sig svg { width: 15px; height: 15px; color: var(--accent-strong); flex: none; }
.em-sig-more { color: var(--text-muted); background: transparent; box-shadow: none; border-style: dashed; }
.em-flow { display: flex; justify-content: center; padding: 1px 0; }
.em-flow svg { width: 22px; height: 22px; color: #9db2c4; }
.em-core {
  background: linear-gradient(160deg, rgba(14,79,122,.96), rgba(7,24,39,.97));
  border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 17px 19px;
  box-shadow: 0 20px 48px rgba(7,24,39,.32), inset 0 1px 0 rgba(255,255,255,.12);
}
.em-core-head { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 14.5px; font-weight: 800; margin-bottom: 13px; }
.em-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.em-checks li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: #fff; }
.em-checks li i {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 1.5px solid #34C98A; background: #1F8A5B center/11px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.em-out-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.em-counter { font-size: 12px; font-weight: 700; color: var(--trust); white-space: nowrap; }
.em-counter b { font-size: 17px; }
.em-cards { display: grid; gap: 9px; }
.em-card {
  background: #fff; border: 1px solid var(--border-card); border-radius: 14px;
  padding: 11px 14px; box-shadow: var(--shadow-sm); display: grid; gap: 3px;
}
.em-card b { font-size: 14px; color: var(--text-heading); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.em-card b .chip { padding: 2px 9px; font-size: 11px; }
.em-card span { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }

/* ---- Fluss-Animation (Loop): Signal -> Prüfung -> geprüfte Anfrage ---- */
.em-sig { transition: box-shadow .4s var(--ease-out), border-color .4s var(--ease-out); }
.em-sig.live { border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(22,119,184,.14), var(--shadow-sm); }
.em-sig.live svg { color: var(--accent-strong); }
.em-checks li i { transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out); }
.em-checks li.off { color: rgba(255,255,255,.7); }
.em-checks li.off i { border-color: rgba(255,255,255,.35); background-color: transparent; background-image: none; transform: scale(.82); }
.em-card { transition: box-shadow .45s var(--ease-out), border-color .45s var(--ease-out), transform .45s var(--ease-out); }
.em-card.lit { border-color: rgba(31,138,91,.5); box-shadow: 0 0 0 3px rgba(31,138,91,.12), 0 12px 26px rgba(7,24,39,.12); transform: translateY(-2px); }
.em-counter { transition: transform .3s var(--ease-out); }
.em-counter.bump { transform: scale(1.09); }
@media (prefers-reduced-motion: no-preference) {
  .em-flow svg { animation: emFlow 1.8s ease-in-out infinite; }
  .em-flow:nth-of-type(4) svg { animation-delay: .5s; }
}
@keyframes emFlow {
  0%, 100% { opacity: .3; transform: translateY(-2px); }
  50%      { opacity: 1; transform: translateY(3px); }
}

/* ============================================================
   KAPITEL 3 — MONO-HERO: Die Anfrage als Held.
   EIN Objekt bleibt in der Mitte und verwandelt sich beim
   Scrollen (Signal → Interessent → Anfrage → geprüft →
   Premium-Anfrage → dockt im Cockpit-Kalender an).
   Stufen als kumulative Klassen s2–s6 auf #mhStage.
   ============================================================ */

/* ---------- Kontexte hinter dem Objekt ---------- */
.mh-ctx {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .55s var(--ease-out);
}
.mh:not(.s3) .mc1 { opacity: 1; }
.mh.s4:not(.s5) .mc4 { opacity: 1; }
.mh.s5:not(.s6) .mc5 { opacity: 1; }
.mh.s6 .mc6 { opacity: 1; }

/* Stufe 1-2: lokale Karte */
.mh-map {
  position: relative; width: min(560px, 92%); height: min(320px, 82%);
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(58% 52% at 72% 22%, rgba(31,138,91,.1), transparent 60%),
    radial-gradient(55% 50% at 22% 78%, rgba(22,119,184,.1), transparent 62%),
    linear-gradient(160deg, #f4f8fc, #e7eef6);
  border: 1px solid rgba(15,30,50,.08);
  box-shadow: var(--gloss-sm, 0 6px 16px rgba(15,30,50,.1));
}
.mh-map::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(37deg, transparent 0 30px, rgba(15,30,50,.05) 30px 32px),
    repeating-linear-gradient(-53deg, transparent 0 34px, rgba(15,30,50,.04) 34px 36px);
  mask-image: radial-gradient(120% 100% at 50% 45%, #000 58%, transparent 90%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 58%, transparent 90%);
  opacity: .85;
}
.mh-map .fl-dot { opacity: 1; transform: none; }
.mh:not(.s3) .mc1 .fl-dot { animation: flGlow 3.2s ease-in-out infinite; }
.mh:not(.s3) .mc1 .fl-dot:nth-of-type(2) { animation-delay: .8s; }
.mh:not(.s3) .mc1 .fl-dot:nth-of-type(3) { animation-delay: 1.6s; }
.mh:not(.s3) .mc1 .fl-you::after { animation: flPing 2.2s ease-out infinite; }
.mh-ripple {
  position: absolute; left: 50%; top: 50%;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(22,119,184,.38);
  transform: translate(-50%, -50%) scale(.3); opacity: 0;
}
.mh:not(.s3) .mc1 .mh-ripple { animation: flRipple 3.4s ease-out infinite; }
.mh:not(.s3) .mc1 .mh-ripple.r2 { animation-delay: 1.1s; }
.mh:not(.s3) .mc1 .mh-ripple.r3 { animation-delay: 2.2s; }

/* Stufe 4: Prüf-Gate rahmt das Objekt */
.mh-gate {
  position: relative; width: min(480px, 96%); height: min(470px, 96%);
  border-radius: 28px;
  border: 1.5px solid rgba(70,140,200,.4);
  background: linear-gradient(180deg, rgba(14,42,66,.1), rgba(14,42,66,.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 46px rgba(22,119,184,.1), 0 0 44px rgba(22,119,184,.16);
}
.mh-gate-title {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: radial-gradient(140% 160% at 50% -30%, #2c4d6d, #0a1c2e 72%);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 20px rgba(7,24,39,.3);
}
/* Stufe 5: Halo */
.mc5 .pq-halo { position: absolute; inset: 8% 16%; }
/* Stufe 6: Kalender */
.mc6 .mh-week { width: min(620px, 94%); pointer-events: none; }

/* ---------- Das Held-Objekt ---------- */
.mh-obj {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  transform: translate(-50%, -50%);
  transition: transform .85s var(--ease-soft);
  will-change: transform;
}
.mh.s6 .mh-obj {
  transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(var(--ds, .3));
}
/* Stufe 1: nur ein atmendes Signal */
.mh-dot {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 36% 30%, #7cc4ee, #1677B8 78%);
  box-shadow: 0 0 0 6px rgba(22,119,184,.13), 0 0 24px rgba(27,188,203,.6);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  animation: mhBreathe 2.4s ease-in-out infinite;
}
@keyframes mhBreathe {
  0%, 100% { box-shadow: 0 0 0 5px rgba(22,119,184,.13), 0 0 18px rgba(27,188,203,.5); }
  50%      { box-shadow: 0 0 0 11px rgba(22,119,184,.07), 0 0 34px rgba(27,188,203,.85); }
}
.mh.s2 .mh-dot { opacity: 0; transform: scale(2.6); animation: none; }

/* Ab Stufe 2: die Karte — wächst mit jeder Stufe weiter */
.mh-card {
  position: relative; width: min(320px, 84vw);
  border-radius: 20px; overflow: hidden;
  padding: 13px 15px 14px; display: grid; gap: 10px; text-align: left;
  background: var(--metal-premium-alt, #fff);
  border: 1px solid rgba(15,30,50,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 44px rgba(15,30,50,.18);
  opacity: 0; transform: scale(.45);
  transition: opacity .5s var(--ease-out), transform .65s var(--ease-soft), box-shadow .7s var(--ease-out);
}
.mh.s2 .mh-card { opacity: 1; transform: none; }
.mh.s5 .mh-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1.5px rgba(22,119,184,.35),
    0 34px 70px rgba(22,119,184,.24), 0 0 50px rgba(27,188,203,.16);
}
.mh-head {
  display: flex; align-items: center; gap: 11px;
  margin: -13px -15px 0; padding: 11px 13px;
  transition: background .6s var(--ease-out);
}
.mh-avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff;
  background: radial-gradient(130% 150% at 50% -25%, #2c4d6d, #0a1c2e 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 5px 12px rgba(7,24,39,.28);
}
.mh-who { display: grid; gap: 1px; min-width: 0; flex: 1; }
.mh-who b { font-size: 14.5px; color: var(--text-heading); white-space: nowrap; }
.mh-who span { font-size: 11.5px; font-weight: 600; color: var(--text-muted); transition: color .5s; }
.mh.s5 .mh-head { background: radial-gradient(140% 180% at 50% -30%, #2c4d6d 0%, #14293c 48%, #081727 100%); }
.mh.s5 .mh-who b { color: #fff; }
.mh.s5 .mh-who span { color: rgba(210,230,246,.75); }
.mh.s5 .mh-avatar { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 14px rgba(27,188,203,.4); }
.mh-badge {
  margin-left: auto; width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: #0a1c2e; border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 14px rgba(27,188,203,.35);
  opacity: 0; transform: scale(.5); transition: opacity .45s var(--ease-out) .15s, transform .45s var(--ease-out) .15s;
}
.mh.s5 .mh-badge { opacity: 1; transform: none; }

/* Stufe 3: Anfrage-Felder klappen auf */
.mh-fields { display: grid; gap: 8px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease-out), opacity .5s var(--ease-out); }
.mh.s3 .mh-fields { max-height: 150px; opacity: 1; }
.mh.s3 .fl-field { animation: flFieldIn .5s var(--ease-out) forwards; }
.mh.s3 .fl-field:nth-of-type(2) { animation-delay: .35s; }
.mh.s3 .fl-field:nth-of-type(3) { animation-delay: .7s; }
.mh.s3 .fl-field::after { animation: flFill .6s var(--ease-out) forwards; }
.mh.s3 .fl-field:nth-of-type(2)::after { animation-delay: .35s; }
.mh.s3 .fl-field:nth-of-type(3)::after { animation-delay: .7s; }

/* Stufe 4: Prüf-Chips direkt am Objekt */
.mh-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease-out), opacity .5s var(--ease-out); }
.mh-chips .chk { font-size: 10.5px; padding: 4px 8px 4px 7px; gap: 5px; justify-content: flex-start; white-space: nowrap; }
.mh-chips .chk::before { width: 13px; height: 13px; background-size: 8px; }
.mh.s4 .mh-chips { max-height: 96px; opacity: 1; }
.mh-scan {
  position: absolute; left: 6px; right: 6px; top: 0; height: 26px; z-index: 4;
  border-radius: 9px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(27,188,203,0), rgba(27,188,203,.2) 50%, rgba(27,188,203,0));
}
.mh.s4:not(.s5) .mh-scan { opacity: 1; animation: mhScan 1.8s ease-in-out infinite; }
@keyframes mhScan { 0% { top: 4%; } 50% { top: 80%; } 100% { top: 4%; } }

/* Stufe 5: Premium-Fuß (Score + Slot), einmaliger Shine */
.mh-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease-out), opacity .5s var(--ease-out) .1s;
}
.mh.s5 .mh-foot { max-height: 84px; opacity: 1; }
.mh.s5 .pq-score b { width: 91%; }
.mh.s5:not(.s6) .pq-shine { animation: pqShine 2.4s ease-in-out .35s; }

/* Stufe 6: Andocken im Kalender */
.mh.s6 .mh-dock { border-color: rgba(22,119,184,.6); background: rgba(22,119,184,.06); box-shadow: 0 0 12px rgba(22,119,184,.25); }
.mh.s6 .mh-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 2px rgba(22,119,184,.5), 0 10px 26px rgba(15,30,50,.22); }
.mh.s6 #mhRevBar { width: 88%; }
.mh.s6 .fl-wk-rev em { text-shadow: 0 0 12px rgba(31,138,91,.4); }
/* DI-Zelle wird in Stufe 6 zum gebuchten Tag, der die angedockte Karte rahmt.
   Höhe wird per JS (measureDock) auf die Kartenhöhe gesetzt. */
.mh.s6 .mc6 .fl-wk-day:nth-child(2) .fl-wk-cell {
  border-style: solid; border-color: rgba(22,119,184,.34);
  background: linear-gradient(180deg, rgba(22,119,184,.06), rgba(27,188,203,.035));
  box-shadow: inset 0 0 0 1px rgba(22,119,184,.12), 0 8px 20px rgba(22,119,184,.1);
  transition: border-color .5s var(--ease-out), background .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.mh.s6 .mc6 .fl-wk-day:nth-child(2) .fl-wk-ev,
.mh.s6 .mc6 .fl-wk-day:nth-child(2) .mh-dock { display: none; }

@media (max-width: 760px) {
  .mh-card { width: min(280px, 84vw); }
  .mh-map { height: min(260px, 76%); }
  .mh-gate { height: min(300px, 92%); }
  .mc6 .mh-week { width: 96%; }
}
@media (max-width: 560px) {
  /* Mobil: das transparente Gate-Feld hinter der Karte weglassen (zu viele
     Flächen) — es bleibt nur das Vorprüfungs-Badge, sauber ÜBER der Karte */
  .mc4 .mh-gate { width: 100%; height: 100%; border: none; background: none; box-shadow: none; }
  .mh-gate-title { top: 6px; z-index: 6; font-size: 10.5px; padding: 6px 14px; gap: 7px; }
  /* Kalender mobil: nur 3 Tage (inkl. Dock-Tag DI) -> passt ohne Überlauf */
  .mc6 .mh-week { width: 100%; padding: 13px 13px 15px; }
  .mc6 .fl-wk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mc6 .fl-wk-day:nth-child(n+4) { display: none; }
  .mc6 .fl-wk-cell { min-height: 92px; padding: 4px; }
  .mc6 .fl-wk-ev { font-size: 9.5px; padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-dot, .mh:not(.s3) .mc1 .fl-dot, .mh:not(.s3) .mc1 .mh-ripple,
  .mh:not(.s3) .mc1 .fl-you::after, .mh.s4:not(.s5) .mh-scan { animation: none; }
  .mh.s5:not(.s6) .pq-shine { animation: none; }
}

/* ============================================================
   HERO-TRUST — Live-Ticker, Gründer-Zeile, Städte-Labels
   ============================================================ */
.hero-copy .hero-ticker { margin-top: -4px; width: min(440px, 100%); }
.hero-founders {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: clamp(2px, .8vw, 8px);
}
.hfd-avatars { display: inline-flex; flex: none; }
.hfd-avatars img {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; object-position: 50% 12%;
  border: 2px solid #fff; box-shadow: 0 3px 10px rgba(15,30,50,.18);
}
.hfd-avatars img + img { margin-left: -10px; }
.hfd-txt { font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-align: left; }
.hfd-txt b { color: var(--text-heading); font-weight: 700; }

/* Städte-Labels an den Signal-Ursprüngen der Engine */
.eng-city {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 3px; font-style: normal; white-space: nowrap;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
  background: rgba(255,255,255,.85); padding: 1px 5px; border-radius: 5px;
  transition: color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.eng-origin.pulse .eng-city {
  color: var(--accent-strong);
  box-shadow: 0 0 10px rgba(27,188,203,.35);
}

/* ============================================================
   HERO PROOF-LEISTE — Live, Kennzahlen und Gesichter in einer
   Zeile; ersetzt drei gestapelte Trust-Blöcke
   ============================================================ */
.hero-proof {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 2.2vw, 30px); flex-wrap: wrap;
  width: min(1140px, 100%);
  padding: 13px clamp(16px, 2.4vw, 28px);
  border-radius: 18px 20px 18px 8px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 30px rgba(15,30,50,.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
}
.hp-div {
  width: 1px; align-self: stretch; margin-block: 4px;
  background: linear-gradient(180deg, transparent, rgba(15,30,50,.14), transparent);
}
/* Ticker: verliert seine eigene Pille, wird Teil der Leiste */
.hero-proof .hero-ticker {
  margin: 0; padding: 0; width: auto; min-width: 250px; flex: 1 1 250px; max-width: 320px;
  background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Kennzahlen: kompakt, ohne eigene Trennlinie */
.hero-proof .cover-signals { margin: 0; padding: 0; gap: 6px clamp(16px, 1.8vw, 26px); flex-wrap: nowrap; }
.hero-proof .cover-signals::before { display: none; }
.hero-proof .csig b { font-size: 18px; }
.hero-proof .csig span { font-size: 10.5px; }
/* Gründer: zweizeilig kompakt */
.hero-proof .hero-founders { margin: 0; }
.hero-proof .hfd-txt { display: grid; gap: 0; line-height: 1.35; font-size: 12px; }
.hero-proof .hfd-txt em { font-style: normal; font-size: 10.5px; color: var(--text-muted); font-weight: 600; }

@media (max-width: 1060px) {
  .hero-proof { gap: 12px 22px; }
  .hp-div { display: none; }
  .hero-proof .hero-ticker { flex: 1 1 100%; max-width: none; justify-content: center; }
  .hero-proof .cover-signals { flex: 1 1 auto; justify-content: center; }
  .hero-proof .hero-founders { flex: 1 1 100%; justify-content: center; }
  .hero .cover-watermark { right: -22%; }
}
@media (max-width: 560px) {
  .hero-proof .cover-signals { width: 100%; }
  /* Mobil: Emblem klein und hoch, sehr dezent, damit die Headline klar führt */
  .hero .cover-watermark { right: -30%; top: 5%; transform: none; width: 320px; }
  .hero.brand-in .cm-fill, .hero.brand-done .cm-fill { opacity: .03; }
  .hero.brand-in .cm-stroke, .hero.brand-done .cm-stroke { opacity: .05 !important; }
}

/* ============================================================
   HERO-VEREDELUNG — Akzentwort, Subline, Proof-Instrumententafel
   ============================================================ */

/* „Premium-Anfragen." als editorialer Serif-Kursiv-Akzent mit Signal-Verlauf */
.hl-premium {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: 1.08em; letter-spacing: 0;
  padding-right: .06em;
  background: linear-gradient(120deg, #0E4F7A 0%, #1677B8 46%, #1bbccb 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Subline: kürzer, präsenter, Methode betont */
.hero-copy .cover-tag {
  font-size: clamp(16.5px, 1.9vw, 21px);
  color: var(--text-body); font-weight: 500;
  max-width: 52ch; line-height: 1.55; text-wrap: balance;
}
.hero-copy .cover-tag b { font-weight: 700; color: var(--text-heading); }

/* ---------- Proof-Leiste als Instrumententafel ---------- */
.hero-proof {
  position: relative; overflow: hidden;
  background: var(--metal-plate-alt, rgba(255,255,255,.8));
  border: 1px solid var(--metal-rim, rgba(15,30,50,.09));
  box-shadow: var(--gloss-sm, 0 6px 16px rgba(15,30,50,.1)), 0 22px 50px rgba(15,30,50,.1);
  padding: 15px clamp(18px, 2.6vw, 30px);
  gap: clamp(18px, 2.4vw, 34px);
}
/* Signal-Oberkante im Marken-Verlauf */
.hero-proof::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
  border-radius: 0 0 3px 3px;
  background: var(--signal, linear-gradient(90deg, #0E4F7A, #1bbccb));
  opacity: .5;
}
/* LIVE als Navy-Badge, Ticker-Text kräftiger */
.hero-proof .ht-live {
  padding: 5px 11px; border-radius: 999px; gap: 6px;
  color: #7CE0B4; font-size: 10.5px;
  background: radial-gradient(130% 160% at 50% -30%, #2c4d6d, #0a1c2e 74%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 10px rgba(7,24,39,.24);
}
.hero-proof .ht-live i { background: #1bbccb; box-shadow: 0 0 8px rgba(27,188,203,.8); }
.hero-proof .ht-item { font-size: 13.5px; }
/* Kennzahlen: groß, metallischer Navy-Blau-Verlauf, Mono-Labels */
.hero-proof .csig { gap: 3px; }
.hero-proof .csig b {
  font-size: clamp(23px, 2.1vw, 27px); line-height: 1; letter-spacing: -0.02em;
  background: linear-gradient(178deg, #12253a 0%, #0E4F7A 62%, #1677B8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-proof .csig span {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
/* Gründer: etwas größer, Namenszeile dunkler */
.hero-proof .hfd-avatars img { width: 38px; height: 38px; }
.hero-proof .hfd-txt { font-size: 12.5px; }
.hero-proof .hfd-txt b { font-size: 13px; }
.hp-div { background: linear-gradient(180deg, transparent, rgba(15,30,50,.18), transparent); }

@media (max-width: 560px) {
  .hero-proof .csig b { font-size: 21px; }
  .hero-proof { padding: 14px 16px; }
}