/* Variant: Map — a stylised map with the Rhine, Wiesbaden, a pulsing pin and remote rings. Light. */
:root {
  --bg: #f4f7fb; --surface: #ffffff; --muted: #e9eef5; --ink: #13213a; --ink-2: #546179; --line: #dde4ee;
  --accent: #13213a; --accent-ink: #ffffff; --accent-soft: #e2e9f5; --green-soft: #e2e9f5; --amber-soft: #fff0d6;
  --night: #13213a; --night-2: #1f3152; --pin: #e5484d;
  --ui-accent: #e5484d; --ui-img: #fde8e8;
  color-scheme: light;
}
.mp-inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem); }
@media (min-width: 64em) { .mp-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.mp-title { font-size: clamp(2.75rem, 5.4vw, 5.25rem); line-height: 0.98; letter-spacing: -0.05em; }
.mp-hero .hero__lead { margin-top: 1.5rem; }
.mp-hero .hero__actions { margin-top: 2rem; }
.mp { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 28px; border: 1px solid var(--line);
  background-color: #eef2f7;
  background-image: linear-gradient(rgba(19, 33, 58, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 33, 58, 0.05) 1px, transparent 1px);
  background-size: 32px 32px; box-shadow: 0 40px 80px -50px rgba(19, 33, 58, 0.45); font-size: clamp(0.6875rem, 1vw, 0.875rem); }
.mp-river { position: absolute; left: -10%; top: 58%; width: 130%; height: 22%; border-radius: 50%; border-top: 26px solid #b9d6f5; rotate: -8deg; }
.mp-river__label { position: absolute; left: 18%; top: 66%; color: #6d93bd; font-style: italic; font-weight: 600; rotate: -8deg; }
.mp-road { position: absolute; height: 6px; border-radius: 999px; background: #ffffff; box-shadow: 0 0 0 1px #dfe5ee; }
.mp-road--1 { left: 5%; right: 5%; top: 40%; rotate: 4deg; }
.mp-road--2 { left: 30%; width: 70%; top: 28%; rotate: -18deg; }
.mp-road--3 { left: 42%; width: 6px; height: 60%; top: 8%; rotate: 12deg; }
.mp-town { position: absolute; padding: 0.15rem 0.5rem; border-radius: 6px; background: rgba(255, 255, 255, 0.85); color: var(--ink-2); font-weight: 600; }
.mp-town--m { left: 56%; top: 74%; } .mp-town--f { right: 6%; top: 26%; }
.mp-ring { position: absolute; left: 40%; top: 42%; border: 2px dashed rgba(229, 72, 77, 0.35); border-radius: 50%; translate: -50% -50%; }
.mp-ring--1 { width: 26%; aspect-ratio: 1; } .mp-ring--2 { width: 56%; aspect-ratio: 1; } .mp-ring--3 { width: 92%; aspect-ratio: 1; border-color: rgba(229, 72, 77, 0.2); }
.mp-pin { position: absolute; left: 40%; top: 42%; translate: -50% -100%; }
.mp-pin__head { display: block; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--pin); box-shadow: 0 10px 20px -6px rgba(229, 72, 77, 0.6); }
.mp-pin__head::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #ffffff; }
.mp-pin__pulse { position: absolute; left: 50%; bottom: -10px; width: 24px; height: 10px; translate: -50% 0; border-radius: 50%; background: rgba(229, 72, 77, 0.35); }
@media (prefers-reduced-motion: no-preference) {
  .mp-pin__pulse { animation: mp-pulse 2.4s ease-out infinite; }
  @keyframes mp-pulse { from { scale: 1; opacity: 0.9; } to { scale: 4; opacity: 0; } }
}
.mp-label { position: absolute; left: 44%; top: 30%; display: grid; padding: 0.5rem 0.8rem; border-radius: 12px; background: #ffffff; box-shadow: 0 12px 24px -14px rgba(19, 33, 58, 0.5); font-weight: 700; font-size: 1rem; }
.mp-label small { font-size: 0.6875rem; font-weight: 500; color: var(--ink-2); }
.mp-chip { position: absolute; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--ink); color: #ffffff; font-weight: 600; }
.mp-chip--1 { left: 6%; top: 8%; } .mp-chip--2 { right: 6%; bottom: 8%; background: var(--pin); }
.steps li::before { background: var(--pin); color: #ffffff; }
.tile--dark .focus strong { color: #ff9b9e; }
.product__visual--water { background: #e2ecf8; } .product__visual--jobs { background: #fde8e8; } .product__visual--food { background: #fff0d6; }