/* =============================================
   GOOGLE MAPS SEO — Page-Specific Layer
   Dark hero · Scope visual · Section rhythm
   ============================================= */


/* --- 1. DARK HERO --- */

.maps-hero {
  position: relative;
  padding: 108px 0 88px;
  overflow: hidden;
  background: linear-gradient(165deg, #041a27, #072a3c 30%, #0a4660 70%, #083449);
  color: #fff;
}

.maps-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(650px 420px at 72% 18%, rgba(136, 206, 217, 0.10), transparent 58%),
    radial-gradient(500px 350px at 12% 85%, rgba(184, 138, 76, 0.06), transparent 55%);
  pointer-events: none;
}

.maps-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 62% 38%, rgba(0, 0, 0, 0.5), transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse at 62% 38%, rgba(0, 0, 0, 0.5), transparent 68%);
  pointer-events: none;
}

.maps-hero > .container {
  position: relative;
  z-index: 1;
}

.maps-hero .hero-grid {
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
}

.maps-hero .eyebrow {
  color: rgba(255, 255, 255, 0.52);
}

.maps-hero h1 {
  color: white;
}

.maps-hero .lead {
  color: rgba(255, 255, 255, 0.78);
  max-width: 540px;
}

.maps-hero .muted {
  color: rgba(255, 255, 255, 0.56);
}

.maps-hero a:not(.btn) {
  color: rgba(255, 255, 255, 0.80);
  text-decoration-color: rgba(136, 206, 217, 0.35);
}

.maps-hero a:not(.btn):hover {
  color: white;
  text-decoration-color: rgba(136, 206, 217, 0.7);
}


/* Hero Buttons */

.maps-hero .btn-primary {
  background: rgba(255, 255, 255, 0.96);
  color: var(--brand-900);
  border-color: transparent;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.maps-hero .btn-primary:hover {
  background: white;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30), 0 0 0 4px rgba(136, 206, 217, 0.12);
}

.maps-hero .btn-ghost {
  color: white;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.maps-hero .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.26);
}


/* Hero Trust Row */

.maps-hero .trust {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.09);
}

.maps-hero .trust:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
}

.maps-hero .trust-k {
  color: rgba(255, 255, 255, 0.44);
}

.maps-hero .trust-v {
  color: rgba(255, 255, 255, 0.90);
  font-size: 14px;
}


/* Scope Visual — dark theme */

.maps-hero .scope-visual {
  min-height: 360px;
  background:
    radial-gradient(circle at 50% 50%, rgba(136, 206, 217, 0.06), transparent 52%),
    rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}

.maps-hero .scope-visual-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.maps-hero .scope-axis {
  background: linear-gradient(90deg, transparent, rgba(136, 206, 217, 0.16), transparent);
}

.maps-hero .scope-axis-vertical {
  background: linear-gradient(180deg, transparent, rgba(136, 206, 217, 0.16), transparent);
}

.maps-hero .scope-ring {
  border-color: rgba(136, 206, 217, 0.09);
}

.maps-hero .scope-hub {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(228, 238, 243, 0.94));
  color: var(--brand-900);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38);
  animation: maps-hub-pulse 3s ease-in-out infinite;
}

.maps-hero .scope-hub span {
  color: var(--brand-700);
  opacity: 1;
}

.maps-hero .scope-hub strong {
  color: var(--brand-900);
}

.maps-hero .scope-node {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(136, 206, 217, 0.14);
  color: var(--brand-800);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.maps-hero .scope-tag {
  background: rgba(136, 206, 217, 0.07);
  color: rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(136, 206, 217, 0.10);
}


/* Hub pulse animation (Signature Element) */

@keyframes maps-hub-pulse {
  0%, 100% {
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38), 0 0 0 0 rgba(136, 206, 217, 0.14);
  }
  50% {
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38), 0 0 0 20px rgba(136, 206, 217, 0);
  }
}


/* Scope ring expand */

@keyframes maps-ring-expand {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.maps-hero .scope-ring {
  animation: maps-ring-expand 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.maps-hero .scope-ring-lg { animation-delay: 0.1s; }
.maps-hero .scope-ring-md { animation-delay: 0.25s; }
.maps-hero .scope-ring-sm { animation-delay: 0.4s; }


/* Node float-in */

@keyframes maps-node-in {
  from { opacity: 0; transform: scale(0.8) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.maps-hero .scope-node {
  animation: maps-node-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.maps-hero .scope-node-core { animation-delay: 0.5s; }
.maps-hero .scope-node-a { animation-delay: 0.6s; }
.maps-hero .scope-node-b { animation-delay: 0.7s; }
.maps-hero .scope-node-c { animation-delay: 0.8s; }
.maps-hero .scope-node-d { animation-delay: 0.9s; }

.maps-hero .scope-tag {
  animation: maps-node-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.maps-hero .scope-tag-top { animation-delay: 0.55s; }
.maps-hero .scope-tag-left { animation-delay: 0.65s; }
.maps-hero .scope-tag-bottom { animation-delay: 0.75s; }


/* --- 2. SIGNATURE ACCENT LINE --- */

.maps-accent {
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-gold, #b88a4c), rgba(136, 206, 217, 0.6));
  margin-bottom: 16px;
}


/* --- 3. LEVER NUMBER --- */

.lever-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(184, 138, 76, 0.14), rgba(27, 109, 132, 0.1));
  color: var(--brand-800);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}


/* --- 4. DARK SECTION (Typische Fehler) --- */

.maps-section-dark {
  background: linear-gradient(165deg, #071a24, #0a3040 45%, #0c3a50) !important;
  color: white;
  position: relative;
  overflow: hidden;
  border: none !important;
}

.maps-section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 300px at 18% 0%, rgba(184, 138, 76, 0.05), transparent 58%),
    radial-gradient(400px 250px at 82% 100%, rgba(136, 206, 217, 0.05), transparent 58%);
  pointer-events: none;
}

.maps-section-dark > .container {
  position: relative;
  z-index: 1;
}

.maps-section-dark .section-head h2 {
  color: white;
}

.maps-section-dark .section-head p,
.maps-section-dark .muted {
  color: rgba(255, 255, 255, 0.66);
}

.maps-section-dark .section-kicker {
  color: rgba(255, 255, 255, 0.42);
}

.maps-section-dark .section-kicker::before {
  background: linear-gradient(90deg, rgba(184, 138, 76, 0.65), rgba(136, 206, 217, 0.3));
}


/* Fehler Grid */

.fehler-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 32px;
}

.fehler-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 260ms ease, border-color 260ms ease, transform 260ms ease;
}

.fehler-item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(136, 206, 217, 0.14);
  transform: translateY(-2px);
}

.fehler-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 120, 100, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.fehler-icon svg {
  width: 14px;
  height: 14px;
  color: rgba(255, 140, 120, 0.9);
}

.fehler-text {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  font-size: 14px;
}

.fehler-text strong {
  color: rgba(255, 255, 255, 0.95);
}


/* --- 5. ABLAUF GRID --- */

.ablauf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
  position: relative;
}

.ablauf-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(16.66% + 10px);
  right: calc(16.66% + 10px);
  height: 2px;
  background: linear-gradient(90deg, var(--accent-gold, #b88a4c) 0%, rgba(27, 109, 132, 0.4) 50%, var(--accent-gold, #b88a4c) 100%);
  border-radius: 999px;
  opacity: 0.45;
}

.ablauf-phase {
  position: relative;
  z-index: 1;
}

.ablauf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(11, 28, 39, 0.12);
}

.ablauf-badge-1 {
  background: linear-gradient(135deg, #0d3445, #15546e);
  color: white;
}

.ablauf-badge-2 {
  background: linear-gradient(135deg, var(--accent-gold, #b88a4c), #9a7340);
  color: white;
}

.ablauf-badge-3 {
  background: linear-gradient(135deg, #0d3445, #226f88);
  color: white;
}

.ablauf-card {
  padding: 24px;
  border-radius: 24px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(249, 243, 233, 0.88));
  box-shadow: 0 10px 26px rgba(11, 28, 39, 0.05);
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.ablauf-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(11, 28, 39, 0.1);
}

.ablauf-card h3 {
  font-family: "Newsreader", Georgia, serif;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}


/* --- 6. SECTION BRIDGES --- */

.maps-bridge {
  height: 72px;
  margin: 0;
  padding: 0;
  border: none;
}

.maps-bridge-to-dark {
  background: linear-gradient(180deg, var(--bg), #071a24);
}

.maps-bridge-from-dark {
  background: linear-gradient(180deg, #0c3a50, var(--bg));
}


/* --- 7. FINAL CTA --- */

.maps-cta-final {
  padding: 72px 0;
  background: linear-gradient(135deg, var(--brand-900, #072a3c), var(--brand-700, #0a4660));
  color: white;
  position: relative;
  overflow: hidden;
}

.maps-cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 200px at 20% 80%, rgba(184, 138, 76, 0.08), transparent),
    radial-gradient(300px 200px at 80% 20%, rgba(136, 206, 217, 0.06), transparent);
  pointer-events: none;
}

.maps-cta-final > .container {
  position: relative;
  z-index: 1;
}

.maps-cta-final .cta-box h2 {
  color: white;
}

.maps-cta-final .cta-box p {
  color: rgba(255, 255, 255, 0.85);
}

.maps-cta-final .btn-primary {
  background: white;
  color: var(--brand-900);
  border-color: rgba(255, 255, 255, 0.2);
}

.maps-cta-final .btn-primary:hover {
  background: rgba(255, 255, 255, 0.95);
}


/* --- 8. SCROLL REVEAL --- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }


/* --- 9. ABLAUF BADGE ENTRANCE --- */

@keyframes maps-badge-enter {
  from { opacity: 0; transform: scale(0.5) rotate(-20deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.ablauf-badge {
  animation: maps-badge-enter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Stagger badges (controlled by reveal parents) */
.ablauf-phase.is-visible .ablauf-badge {
  animation: maps-badge-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ablauf-phase:nth-child(2).is-visible .ablauf-badge {
  animation-delay: 0.12s;
}

.ablauf-phase:nth-child(3).is-visible .ablauf-badge {
  animation-delay: 0.24s;
}


/* --- 10. DELIVERABLES HIGHLIGHT --- */

.deliverable-highlight {
  position: relative;
  overflow: hidden;
}

.deliverable-highlight::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--accent-gold, #b88a4c), rgba(136, 206, 217, 0.6));
}


/* --- 11. MOBILE CTA EMPHASIS --- */

.maps-hero .hero-cta .btn-primary {
  position: relative;
  z-index: 1;
}


/* --- RESPONSIVE --- */

@media (max-width: 981px) {
  .maps-hero {
    padding: 88px 0 68px;
  }

  .maps-hero .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .maps-hero .scope-visual {
    min-height: 280px;
    max-width: 480px;
    margin: 0 auto;
  }

  /* Trust row stays horizontal on tablet/mobile in the hero */
  .maps-hero .trust-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px;
  }

  .ablauf-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ablauf-grid::before {
    display: none;
  }

  .ablauf-phase {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
  }

  .ablauf-badge {
    margin-bottom: 0;
  }

  .maps-bridge {
    height: 48px;
  }
}

@media (max-width: 860px) {
  .maps-hero {
    padding-top: calc(96px + 48px);
  }
}

@media (max-width: 600px) {
  .maps-hero {
    padding-top: calc(88px + 40px);
    padding-bottom: 56px;
  }

  .maps-hero h1 {
    font-size: clamp(28px, 7.8vw, 38px);
  }

  .maps-hero .lead {
    font-size: 15.5px;
  }

  /* Compact trust badges on small screens */
  .maps-hero .trust-row {
    gap: 6px !important;
  }

  .maps-hero .trust {
    padding: 10px 8px;
  }

  .maps-hero .trust-k {
    font-size: 9px;
    letter-spacing: 0.04em;
  }

  .maps-hero .trust-v {
    font-size: 12px;
  }

  .maps-hero .scope-visual {
    min-height: 220px;
    max-width: 360px;
  }

  .maps-hero .scope-hub {
    width: 96px;
    height: 96px;
    padding: 14px;
  }

  .maps-hero .scope-hub span {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .maps-hero .scope-hub strong {
    font-size: 15px;
    margin-top: 5px;
  }

  .maps-hero .scope-node {
    min-width: 62px;
    padding: 6px 9px;
    font-size: 10px;
  }

  .maps-hero .scope-tag {
    font-size: 8.5px;
    padding: 4px 8px;
  }

  /* Ablauf cards stay horizontal (badge + card) on mobile */
  .ablauf-badge {
    width: 48px;
    height: 48px;
    font-size: 11px;
  }

  .maps-bridge {
    height: 36px;
  }

  .fehler-grid {
    grid-template-columns: 1fr;
  }

  .fehler-item {
    padding: 14px 16px;
    gap: 10px;
  }

  .fehler-icon {
    width: 24px;
    height: 24px;
  }

  .fehler-text {
    font-size: 13px;
  }

  .ablauf-card {
    padding: 18px;
  }

  .ablauf-card h3 {
    font-size: 17px;
  }

  .maps-cta-final {
    padding: 56px 0;
  }

  .maps-cta-final .cta-box h2 {
    font-size: clamp(24px, 6vw, 32px);
  }
}


/* --- 420px — Small Mobile --- */

@media (max-width: 420px) {
  .maps-hero .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .maps-hero .hero-cta .btn {
    width: 100%;
    text-align: center;
  }

  .maps-hero .scope-visual {
    min-height: 180px;
    max-width: 280px;
  }

  .maps-hero .scope-hub {
    width: 80px;
    height: 80px;
    padding: 10px;
  }

  .maps-hero .scope-hub span {
    font-size: 8px;
  }

  .maps-hero .scope-hub strong {
    font-size: 13px;
    margin-top: 3px;
  }

  .maps-hero .scope-node {
    min-width: 52px;
    padding: 5px 7px;
    font-size: 9px;
  }

  .maps-hero .scope-tag {
    font-size: 7.5px;
    padding: 3px 6px;
  }

  .maps-cta-final .btn-lg {
    width: 100%;
    text-align: center;
  }

  .fehler-item {
    padding: 12px 12px;
    gap: 8px;
  }

  .ablauf-badge {
    width: 42px;
    height: 42px;
    font-size: 10px;
  }

  .ablauf-card {
    padding: 14px;
  }

  .ablauf-card h3 {
    font-size: 16px;
  }
}


/* --- REDUCED MOTION --- */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .maps-hero .scope-hub {
    animation: none;
  }

  .maps-hero .scope-ring {
    animation: none;
  }

  .maps-hero .scope-node {
    animation: none;
  }

  .maps-hero .scope-tag {
    animation: none;
  }

  .ablauf-badge {
    animation: none;
  }
}