/* ============================================================
   MPU Akademie Westfalen — Dark Premium, warmer Orange-Akzent
   Eigenständiges Design. Effekte GPU-schonend, Hover/Animation
   nur ab Desktop (Migration-Regel 12). Co-located, nie in globals.
   Prefix: .mw-
   ============================================================ */

.mw-root {
  --mw-bg: #17120c;
  --mw-bg-2: #251b11;
  --mw-bg-3: #33261a;
  --mw-line: rgba(255, 240, 230, 0.10);
  --mw-line-strong: rgba(255, 240, 230, 0.17);
  --mw-text: #f1ebe4;
  --mw-muted: #b8aea3;
  --mw-orange: #f2671c;
  --mw-orange-light: #ff8a3d;
  --mw-orange-deep: #c2440f;
  --mw-amber: #e9b25a;
  --mw-glow: rgba(242, 103, 28, 0.45);
  --mw-wrap: 1360px;

  background: var(--mw-bg);
  color: var(--mw-text);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden: schneidet seitlich genauso ab, macht aber position:sticky
     im Inneren NICHT kaputt (hidden erzeugt einen Scroll-Container) */
  overflow-x: clip;
}

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

.mw-root a { color: inherit; text-decoration: none; }
.mw-root img { max-width: 100%; display: block; }
.mw-root h1, .mw-root h2, .mw-root h3, .mw-root h4 { margin: 0; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; }
.mw-root p { margin: 0; }

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

/* Warm leicht getönter Grund + sehr feines Korn */
.mw-root::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 640px at 82% -8%, rgba(242, 103, 28, 0.15), transparent 60%),
    radial-gradient(1000px 560px at -8% 10%, rgba(233, 178, 90, 0.09), transparent 58%),
    radial-gradient(1100px 900px at 50% 116%, rgba(242, 103, 28, 0.06), transparent 60%);
}
@media (min-width: 1024px) {
  .mw-root::before { animation: mwAmbient 13s ease-in-out infinite; }
}
@keyframes mwAmbient { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
.mw-root > * { position: relative; z-index: 1; }

/* ===================== TYPOGRAFIE-HELFER ===================== */
.mw-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mw-orange-light);
}
.mw-h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.mw-h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.mw-h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.mw-lead { color: var(--mw-muted); font-size: clamp(1.02rem, 1.6vw, 1.18rem); }
/* Zeilen sauber umbrechen: Überschriften ausbalancieren, keine einzelnen Wörter
   in einer Zeile; Fließtexte ohne einzelnes Wort in der letzten Zeile. */
.mw-h1, .mw-h2, .mw-h3 { text-wrap: balance; }
.mw-lead, .mw-prose p, .mw-card p, .mw-hero-sub { text-wrap: pretty; }
.mw-muted { color: var(--mw-muted); }

/* Schimmernder Akzent-Text (Verlauf + Lauflicht, Desktop animiert) */
.mw-shine {
  background: linear-gradient(92deg, var(--mw-orange-light), var(--mw-amber) 45%, var(--mw-orange) 70%, var(--mw-orange-light));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (min-width: 1024px) {
  .mw-shine { animation: mwShine 7s ease-in-out infinite; }
}
@keyframes mwShine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Ruhiger, statischer Akzent (schlichte Variante) + ruhiger Status-Punkt */
.mw-accent { color: var(--mw-orange-light); }

/* Schlichter Akzent für Schlüsselwörter (gleiche Schrift, nur Orange — keine Serif/Kursiv) */
.mw-em { color: var(--mw-orange-light); font-style: normal; }
.mw-em.gold { color: var(--mw-amber); }
.mw-em.orange { color: var(--mw-orange-light); }
/* Redaktionelle Nummerierung (I · II · III bzw. 01 · 02) */
.mw-num { font-weight: 800; font-size: 1.05rem; line-height: 1; color: var(--mw-orange-light); display: inline-block; }
.mw-num-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mw-num-row::after { content: ''; flex: 1; height: 1px; background: var(--mw-line); }

/* Persönlicher Coach-Bereich (Köln-Anmutung) */
.mw-quote { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.6; color: var(--mw-text); margin-top: 20px; }
.mw-person { margin-top: 22px; display: flex; flex-direction: column; gap: 2px; }
.mw-person b { font-size: 1.06rem; color: var(--mw-text); }
.mw-person span { font-size: 0.9rem; color: var(--mw-muted); }
.mw-portrait { position: relative; }
.mw-portrait-tag { position: absolute; left: 12px; bottom: 12px; font-size: 0.7rem; letter-spacing: .04em; background: rgba(8,6,5,.72); color: #fff; padding: 5px 9px; border-radius: 7px; backdrop-filter: blur(4px); }
/* Porträt randlos: kein Rahmen/Kasten, läuft an den Rändern weich in den Hintergrund aus */
.mw-split-media.mw-portrait { border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible; background: transparent; }
/* Warmer Glow hinter dem Porträt — verschmilzt das helle Aquarell mit dem dunklen Grund */
.mw-split-media.mw-portrait::before {
  content: ''; position: absolute; inset: -10% -8%; z-index: 0; pointer-events: none;
  background: radial-gradient(62% 58% at 50% 48%, rgba(242,103,28,.2), rgba(233,178,90,.08) 55%, transparent 75%);
}
.mw-split-media.mw-portrait img {
  position: relative; z-index: 1;
  border-radius: 0;
  /* tiefe, weiche Ausblendung an allen vier Seiten (Schnittmenge zweier Verläufe) → keine harte Kante */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 16%, #000 38%, #000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 16%, #000 38%, #000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%, #000 76%, transparent 100%);
  mask-composite: intersect;
}
.mw-split-media.mw-portrait .mw-portrait-tag { z-index: 2; }
/* Helle Variante: Startseiten-Porträt größer (nur Desktop-Split, mobil unverändert) */
@media (min-width: 920px) {
  .mw-hell-scope .mw-split-media.mw-portrait img {
    transform: scale(1.2);
    transform-origin: center;
  }
}
.mw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mw-orange); display: inline-block; flex: 0 0 auto; }
/* Gründer-Bühne: das Aquarell als Vollbild-Hintergrund der ganzen Sektion
   (gleiche Bildsprache wie Video-Hero und Anlass-Seiten), Text links im Verlauf */
.mw-founder { position: relative; overflow: hidden; padding: clamp(90px, 11vw, 150px) 0; }
.mw-founder-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mw-founder-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 76% center; }
.mw-founder-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #17120c 0%, rgba(23,18,12,.97) 30%, rgba(23,18,12,.82) 48%, rgba(23,18,12,.3) 72%, rgba(23,18,12,.5) 100%),
    linear-gradient(180deg, rgba(23,18,12,.9) 0%, transparent 26%, transparent 72%, rgba(23,18,12,.94) 100%);
}
.mw-founder > .mw-wrap { position: relative; z-index: 2; }
.mw-founder-inner { max-width: 620px; }
.mw-about-rating.mw-founder-rating { position: absolute; top: auto; bottom: clamp(70px, 8vw, 104px); right: clamp(14px, 4vw, 60px); z-index: 2; }
.mw-portrait-tag.mw-founder-tag { position: absolute; left: auto; top: auto; right: clamp(14px, 4vw, 60px); bottom: clamp(16px, 3.5vw, 42px); z-index: 2; }
@media (max-width: 919px) {
  /* Mobil: Bild als Banner oben (im Fluss), Text darunter — kein Text-auf-Bild-Gedränge */
  .mw-founder { padding-top: 0; }
  .mw-founder-bg { position: relative; inset: auto; height: 44vh; min-height: 280px; }
  .mw-founder-bg::after { background: linear-gradient(180deg, rgba(23,18,12,.3), transparent 38%, transparent 62%, #17120c 100%); }
  .mw-founder-inner { margin-top: 8px; }
  .mw-portrait-tag.mw-founder-tag { display: none; }
  .mw-about-rating.mw-founder-rating { top: 14px; bottom: auto; right: 14px; }
}
/* Hell-Variante: heller Verlauf statt dunkel */
.mw-hell-scope .mw-founder-bg::after {
  background:
    linear-gradient(90deg, #f3e9d6 0%, rgba(243,233,214,.96) 32%, rgba(243,233,214,.72) 52%, rgba(243,233,214,.16) 74%, rgba(243,233,214,.42) 100%),
    linear-gradient(180deg, rgba(243,233,214,.9) 0%, transparent 26%, transparent 72%, #f3e9d6 100%);
}

/* Über-uns-Sektion: hochwertige Details (Zitat, Signatur, Trust-Pills, Rating auf dem Bild) */
.mw-about-rating {
  position: absolute; top: 10px; right: 4px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: rgba(20,13,9,.8); border: 1px solid rgba(242,103,28,.4);
}
.mw-about-rating b { color: #fff; font-size: .95rem; }
.mw-about-rating .stars { color: #fbbc05; font-size: .78rem; letter-spacing: 1.5px; }
.mw-about-quote {
  position: relative; margin: 24px 0 0; padding-left: 20px;
  border-left: 3px solid rgba(242,103,28,.55);
  font-size: clamp(1.15rem, 1.8vw, 1.42rem); line-height: 1.65; color: var(--mw-text); font-weight: 500;
}
.mw-about-quote .qmark { position: absolute; left: 12px; top: -34px; font-size: 4.6rem; line-height: 1; color: rgba(242,103,28,.4); font-weight: 800; pointer-events: none; }
.mw-about-person { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.mw-about-person .line { width: 42px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--mw-orange), var(--mw-amber)); flex: 0 0 auto; }
.mw-about-person b { display: block; color: var(--mw-text); font-size: 1.05rem; }
.mw-about-person div span { font-size: .88rem; color: var(--mw-muted); }
.mw-about-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mw-about-points li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 13px; border: 1px solid var(--mw-line); background: rgba(255,255,255,.03); font-size: .93rem; color: rgba(255,255,255,.92); }
.mw-about-points .ico { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(242,103,28,.14); color: var(--mw-orange-light); }
.mw-about-points b { color: var(--mw-text); }
.mw-hell-scope .mw-about-points li { background: #ffffff; border-color: rgba(34,20,10,.1); color: #3a2e24; box-shadow: 0 10px 26px -22px rgba(80,40,10,.4); }
.mw-hell-scope .mw-about-rating { background: rgba(255,250,244,.92); border-color: rgba(242,103,28,.35); }
.mw-hell-scope .mw-about-rating b { color: #211810; }

/* ===================== BUTTONS ===================== */
.mw-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 14px;
  font-weight: 700; font-size: 0.98rem; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
}
.mw-btn-primary {
  background: linear-gradient(135deg, var(--mw-orange-light), var(--mw-orange) 55%, var(--mw-orange-deep));
  color: #fff;
  box-shadow: 0 10px 30px -10px var(--mw-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.mw-btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--mw-line-strong);
  color: var(--mw-text);
}
.mw-btn-whatsapp {
  background: linear-gradient(135deg, var(--mw-orange-light), var(--mw-orange) 55%, var(--mw-orange-deep));
  color: #fff;
  box-shadow: 0 10px 30px -10px var(--mw-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

@media (min-width: 1024px) {
  .mw-btn { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, background .3s, border-color .3s; }
  .mw-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px var(--mw-glow), inset 0 1px 0 rgba(255,255,255,.3); }
  .mw-btn-ghost:hover { transform: translateY(-2px); border-color: var(--mw-orange); background: rgba(242,103,28,.08); }
}

/* Lichtstrahl-Sweep über Buttons (Desktop, via .sweep-active getriggert) */
.mw-glow::before {
  content: ''; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
@media (min-width: 1024px) {
  .mw-glow.sweep-active::before { animation: mwSweep 1.1s cubic-bezier(.4,0,.2,1); }
}
@keyframes mwSweep { 0% { left: -120%; opacity: 0; } 12% { opacity: 1; } 100% { left: 160%; opacity: 0; } }

/* ===================== HEADER ===================== */
.mw-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 60;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom: 1px solid transparent;
}
.mw-header.scrolled {
  background: rgba(12, 10, 9, 0.82);
  border-bottom-color: var(--mw-line);
}
@media (min-width: 1024px) {
  .mw-header.scrolled { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
.mw-nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 18px; }
.mw-logo { display: flex; align-items: center; gap: 11px; }
/* Echtes Original-Logo (oranges Lockup mit Sprechblase + „MPU Akademie") */
.mw-logo-real { height: 48px; width: auto; display: block; border-radius: 10px; }
@media (max-width: 560px) { .mw-logo-real { height: 44px; } }
.mw-logo-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: linear-gradient(135deg, var(--mw-orange-light), var(--mw-orange-deep)); box-shadow: 0 5px 16px -7px var(--mw-glow), inset 0 1px 0 rgba(255,255,255,.25); }
.mw-logo-icon img { width: 27px; height: 27px; object-fit: contain; filter: brightness(0) invert(1); }
.mw-wordmark { display: flex; flex-direction: column; line-height: 1; }
.mw-wordmark b { font-size: 1.02rem; font-weight: 800; letter-spacing: 0.02em; }
.mw-wordmark span { font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--mw-orange-light); margin-top: 3px; }
.mw-nav-links { display: none; align-items: center; gap: 26px; }
.mw-nav-link { font-size: 0.95rem; color: var(--mw-muted); position: relative; padding: 4px 0; }
.mw-nav-link::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--mw-orange); transition: width .25s ease; }
@media (min-width: 1024px) { .mw-nav-link:hover { color: var(--mw-text); } .mw-nav-link:hover::after { width: 100%; } }
.mw-nav-actions { display: flex; align-items: center; gap: 12px; }
.mw-tel { display: none; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; color: var(--mw-muted); padding: 8px 16px; border: 1px solid var(--mw-line); border-radius: 999px; transition: color .2s, border-color .2s; }
.mw-tel svg { color: var(--mw-orange-light); }
.mw-nav-login { display: none; align-items: center; gap: 7px; font-weight: 700; font-size: 0.9rem; color: var(--mw-text); padding: 8px 16px; border: 1px solid var(--mw-line); border-radius: 999px; transition: color .2s, border-color .2s; }
.mw-nav-login svg { color: var(--mw-orange-light); }
.mw-nav-login:hover { color: var(--mw-orange-light); border-color: var(--mw-orange); }
/* Erstgespräch-Button im Header = gleiche Höhe & Pill-Form wie der Telefon-Pill */
.mw-header .mw-nav-actions .mw-btn { padding: 8px 18px; font-size: 0.9rem; border-radius: 999px; }
.mw-burger { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); border: 1px solid var(--mw-line-strong); color: var(--mw-text); border-radius: 12px; padding: 9px 11px; cursor: pointer; }
.mw-burger-text { display: none; }

/* Aufklappmenü „Anlässe" — hält die Kopfleiste schlank */
.mw-nav-drop { position: relative; }
.mw-nav-trigger { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.mw-nav-trigger .lucide { transition: transform .25s ease; color: var(--mw-orange-light); }
.mw-nav-drop::after { content: ''; position: absolute; left: -14px; right: -14px; top: 100%; height: 16px; }
.mw-drop {
  position: absolute; top: calc(100% + 12px); left: -14px; min-width: 262px;
  background: rgba(18,14,11,.98); border: 1px solid var(--mw-line-strong); border-radius: 16px;
  padding: 10px; display: flex; flex-direction: column; z-index: 80;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  box-shadow: 0 26px 60px -26px rgba(0,0,0,.8);
}
.mw-drop-group { display: flex; flex-direction: column; }
.mw-drop-group + .mw-drop-group { margin-top: 6px; border-top: 1px solid var(--mw-line); padding-top: 4px; }
.mw-drop-h { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mw-orange-light); padding: 8px 12px 4px; }
.mw-drop a { padding: 9px 12px; border-radius: 10px; font-size: .92rem; color: var(--mw-text); transition: background .15s, color .15s; }
.mw-nav-drop:hover .mw-drop, .mw-nav-drop:focus-within .mw-drop { opacity: 1; visibility: visible; transform: none; }
.mw-nav-drop:hover .mw-nav-trigger .lucide, .mw-nav-drop:focus-within .mw-nav-trigger .lucide { transform: rotate(180deg); }

@media (min-width: 1024px) {
  .mw-drop { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .mw-drop a:hover { background: rgba(242,103,28,.1); color: var(--mw-orange-light); }
  .mw-tel:hover { color: var(--mw-text); border-color: var(--mw-line-strong); }
}

@media (min-width: 1100px) {
  .mw-nav-links { display: flex; }
  .mw-tel { display: inline-flex; }
  .mw-nav-login { display: inline-flex; }
  .mw-burger { display: none; }
}

/* Handy: Top-CTA weglassen (Aktion übernimmt der feste Balken unten) → Kopf bleibt sauber */
@media (max-width: 759px) {
  .mw-nav-actions .mw-btn-primary { display: none; }
}

/* Vollbild-Menü */
.mw-menu {
  position: fixed; inset: 0; z-index: 70; background: rgba(8, 6, 5, 0.97);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
  display: flex; flex-direction: column;
}
@media (min-width: 1024px) { .mw-menu { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } }
.mw-menu.open { opacity: 1; visibility: visible; }
.mw-menu-top { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.mw-menu-close { background: rgba(255,255,255,.05); border: 1px solid var(--mw-line-strong); color: #fff; border-radius: 12px; padding: 9px; cursor: pointer; display: inline-flex; }
/* safe center: zentriert bei Platz, rückt bei vielen Menüpunkten aber nach oben statt
   den oberen Teil abzuschneiden (sonst auf kleinen Handys nicht lesbar/erreichbar). */
.mw-menu-inner { flex: 1; display: flex; flex-direction: column; justify-content: safe center; padding: 8px 0 40px; overflow-y: auto; }
.mw-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
.mw-menu-col h4 { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mw-orange-light); margin-bottom: 14px; }
.mw-menu-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.mw-menu-col a { font-size: 1.12rem; font-weight: 600; color: var(--mw-text); transition: color .2s, padding-left .2s; }
@media (min-width: 1024px) { .mw-menu-col a:hover { color: var(--mw-orange-light); padding-left: 6px; } }
.mw-menu-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
@media (min-width: 768px) { .mw-menu-grid { grid-template-columns: repeat(4, 1fr); } }

/* ===================== MOBILE CTA-BALKEN ===================== */
.mw-cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(12, 10, 9, 0.92); border-top: 1px solid var(--mw-line);
  /* Erst ab der zweiten Section einblenden (JS: .show). Auf dem Hero versteckt,
     damit dort nicht zu viele Call-to-Actions gleichzeitig sind. */
  transform: translateY(110%); pointer-events: none;
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.mw-cta-bar.show { transform: translateY(0); pointer-events: auto; }
@media (min-width: 1024px) { .mw-cta-bar { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }
.mw-cta-bar .mw-btn { padding: 13px 10px; font-size: 0.95rem; border-radius: 13px; }
@media (min-width: 1024px) { .mw-cta-bar { display: none; } }

/* Vorschalt-Frage (KontaktWahlSektion) auf Unterseiten: unten genug Luft lassen,
   damit der feste Mobil-CTA-Balken den letzten Inhalt nicht verdeckt. */
@media (max-width: 1023px) {
  .mw-wahl-sektion { padding-bottom: calc(2.5rem + 84px + env(safe-area-inset-bottom)); }
}

/* ===================== AURORA-HINTERGRUND ===================== */
/* Gestreutes Hexagon-Feld im Hero (Marken-Orange), als lockere Wolke die ausläuft */
/* Hero-Video (dunkles Design): Auto-Fahrt als Hintergrund, dunkles Overlay hält den Text lesbar */
.mw-hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mw-hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mw-hero-video::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,7,5,.92) 0%, rgba(10,7,5,.78) 42%, rgba(10,7,5,.5) 75%, rgba(10,7,5,.62) 100%),
    linear-gradient(180deg, rgba(10,7,5,.6), transparent 28%, transparent 68%, rgba(10,7,5,.92));
}
/* Helle Variante behält ihren beigen Hero (Video nur im dunklen Design) */
.mw-hell-scope .mw-hero-video { display: none; }
.mw-hexbg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("/images/mpu-westfalen/hexfield.svg");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% auto;
  opacity: 0.85;
  /* Nur rechte Seite: oben rechts kräftig, läuft nach links (zur Schrift) und unten aus */
  -webkit-mask-image: radial-gradient(125% 135% at 100% 2%, #000 26%, rgba(0,0,0,0.45) 56%, transparent 80%);
  mask-image: radial-gradient(125% 135% at 100% 2%, #000 26%, rgba(0,0,0,0.45) 56%, transparent 80%);
}
/* Leucht-Ebene: gleiche Hexagons, kräftiger – nur rund um den Mauszeiger sichtbar.
   --sx/--sy (Cursorposition im Hero) + .mw-spot-on werden von useWowInteractions gesetzt. */
.mw-hexbg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("/images/mpu-westfalen/hexfield-hot.svg");
  background-repeat: no-repeat; background-position: right top; background-size: 100% auto;
  filter: brightness(1.5) saturate(1.9) drop-shadow(0 0 7px rgba(242,103,28,0.85));
  opacity: 0; transition: opacity .35s ease;
  -webkit-mask-image: radial-gradient(circle 190px at var(--sx, -999px) var(--sy, -999px), #000 0%, rgba(0,0,0,0.5) 45%, transparent 72%);
  mask-image: radial-gradient(circle 190px at var(--sx, -999px) var(--sy, -999px), #000 0%, rgba(0,0,0,0.5) 45%, transparent 72%);
}
@media (hover: hover) and (pointer: fine) {
  .mw-hero.mw-spot-on .mw-hexbg::after,
  .mw-page-hero.mw-spot-on .mw-hexbg::after { opacity: 1; }
}
/* Dezente Hexagon-Tupfer an den Section-Übergängen – füllen die leeren dunklen
   Randflächen, ohne aufdringlich zu sein. Nur auf breiten Desktops (echte Gutter). */
.mw-hexedge { position: absolute; z-index: 0; pointer-events: none;
  width: clamp(230px, 20vw, 285px); aspect-ratio: 1 / 1;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: .4;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 32%, transparent 80%);
  mask-image: radial-gradient(72% 72% at 50% 50%, #000 32%, transparent 80%); }
.mw-hexedge.right { right: -34px; top: -78px; }
.mw-hexedge.left { left: -34px; top: -78px; }
/* zusätzliche Höhen-Positionen für lange Sektionen (z. B. FAQ): mittig + unten */
.mw-hexedge.pos-mid { top: 40%; }
.mw-hexedge.pos-low { top: auto; bottom: -48px; }
/* kräftiger orange markierte Cluster: kräftig-oranges Grundbild (sonst nur dezente Outlines) */
.mw-hexedge--orange { opacity: .55; }
.mw-hexedge--orange.v1 { background-image: url("/images/mpu-westfalen/hexfield-edge-1-hot.svg"); }
.mw-hexedge--orange.v2 { background-image: url("/images/mpu-westfalen/hexfield-edge-2-hot.svg"); }
.mw-hexedge--orange.v5 { background-image: url("/images/mpu-westfalen/hexfield-edge-5-hot.svg"); }
.mw-hexedge--orange.v6 { background-image: url("/images/mpu-westfalen/hexfield-edge-6-hot.svg"); }
/* Leucht-Ebene: gleiche Hexagons kräftiger, nur rund um den Mauszeiger sichtbar.
   --hx/--hy (Cursor im Cluster) + .hex-on werden von useWowInteractions gesetzt. */
.mw-hexedge::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  filter: brightness(1.5) saturate(1.9) drop-shadow(0 0 7px rgba(242,103,28,0.85));
  opacity: 0; transition: opacity .35s ease;
  -webkit-mask-image: radial-gradient(circle 150px at var(--hx, -999px) var(--hy, -999px), #000 0%, rgba(0,0,0,0.5) 45%, transparent 72%);
  mask-image: radial-gradient(circle 150px at var(--hx, -999px) var(--hy, -999px), #000 0%, rgba(0,0,0,0.5) 45%, transparent 72%);
}
@media (hover: hover) and (pointer: fine) { .mw-hexedge.hex-on::after { opacity: 1; } }
/* verschiedene Cluster-Muster (Element + Leucht-Ebene) – damit nicht überall das gleiche steht */
/* Grundebene: Basis-Muster (vereinzelt mit weißen Hexagons). Hover-Ebene (::after): reine
   Orange-Version -> rund um den Cursor werden die weißen Hexagons orange (Lichteffekt). */
.mw-hexedge.v1 { background-image: url("/images/mpu-westfalen/hexfield-edge-1.svg"); }
.mw-hexedge.v1::after { background-image: url("/images/mpu-westfalen/hexfield-edge-1-hot.svg"); }
.mw-hexedge.v2 { background-image: url("/images/mpu-westfalen/hexfield-edge-2.svg"); }
.mw-hexedge.v2::after { background-image: url("/images/mpu-westfalen/hexfield-edge-2-hot.svg"); }
.mw-hexedge.v3 { background-image: url("/images/mpu-westfalen/hexfield-edge-3.svg"); }
.mw-hexedge.v3::after { background-image: url("/images/mpu-westfalen/hexfield-edge-3-hot.svg"); }
.mw-hexedge.v4 { background-image: url("/images/mpu-westfalen/hexfield-edge-4.svg"); }
.mw-hexedge.v4::after { background-image: url("/images/mpu-westfalen/hexfield-edge-4-hot.svg"); }
.mw-hexedge.v5 { background-image: url("/images/mpu-westfalen/hexfield-edge-5.svg"); }
.mw-hexedge.v5::after { background-image: url("/images/mpu-westfalen/hexfield-edge-5-hot.svg"); }
.mw-hexedge.v6 { background-image: url("/images/mpu-westfalen/hexfield-edge-6.svg"); }
.mw-hexedge.v6::after { background-image: url("/images/mpu-westfalen/hexfield-edge-6-hot.svg"); }
@media (max-width: 1200px) { .mw-hexedge { display: none; } }
.mw-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mw-orb { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .5; }
.mw-orb-1 { width: 540px; height: 540px; top: -160px; right: -120px; background: radial-gradient(circle, rgba(242,103,28,.35), transparent 70%); }
.mw-orb-2 { width: 460px; height: 460px; bottom: -180px; left: -120px; background: radial-gradient(circle, rgba(233,178,90,.22), transparent 70%); }
.mw-orb-3 { width: 380px; height: 380px; top: 30%; left: 40%; background: radial-gradient(circle, rgba(242,103,28,.16), transparent 70%); }
@media (max-width: 1023px) { .mw-orb { display: none; } }
@media (min-width: 1024px) {
  .mw-orb-1 { animation: mwFloat 14s ease-in-out infinite; }
  .mw-orb-2 { animation: mwFloat 18s ease-in-out infinite reverse; }
  .mw-orb-3 { animation: mwFloat 22s ease-in-out infinite; }
}
@keyframes mwFloat { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-26px,0); } }

/* ===================== REVEAL ===================== */
.reveal { opacity: 0; transform: translateY(30px) scale(.99); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
.reveal.active { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (min-width: 1024px) { .reveal { will-change: transform, opacity; } }

/* ===================== HERO ===================== */
.mw-hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 110px 0 70px; }
.mw-hero-inner { max-width: 960px; }
.mw-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--mw-line-strong); font-size: 0.84rem; color: var(--mw-text); }
.mw-ping { position: relative; display: inline-flex; width: 9px; height: 9px; }
.mw-ping i { position: absolute; inset: 0; border-radius: 50%; background: var(--mw-orange); }
.mw-ping i:first-child { animation: mwPing 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes mwPing { 75%,100% { transform: scale(2.4); opacity: 0; } }
.mw-hero h1 { margin: 22px 0 0; }
/* Hero-Texte etwas kompakter (nur Startseite) */
.mw-hero .mw-h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 708px; }
.mw-hero-sub { margin-top: 20px; max-width: 600px; font-size: clamp(0.98rem, 1.35vw, 1.08rem); }
.mw-hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }
.mw-hero-note { margin-top: 16px; font-size: 0.86rem; color: var(--mw-muted); }
/* Hero-Bild: Fahrer am Lenkrad (Aquarell) — nur helle Variante, erst ab 1280px (darunter kollidiert die Headline mit dem Bild) */
.mw-hero-media { display: none; }
@media (min-width: 1280px) {
  .mw-hell-scope .mw-hero-media {
    display: block; position: absolute; z-index: 1; pointer-events: none;
    right: clamp(8px, 3vw, 70px); top: 50%; transform: translateY(-50%);
    width: min(38vw, 540px);
  }
  .mw-hell-scope .mw-hero-media img {
    width: 100%; height: auto;
    /* weiche Ausblendung an allen vier Seiten — läuft in den hellen Grund aus (wie das Porträt) */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 18%, #000 84%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 18%, #000 84%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
    mask-composite: intersect;
  }
}

/* Trust-Leiste */
.mw-trustrow { margin-top: 46px; display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; }
.mw-trust { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--mw-muted); }
.mw-trust b { color: var(--mw-text); font-weight: 700; }
.mw-stars { color: var(--mw-amber); letter-spacing: 1px; }

/* ===================== SECTIONS ===================== */
.mw-section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.mw-section.alt { background: linear-gradient(180deg, transparent, rgba(242,103,28,.04) 14%, rgba(233,178,90,.022) 86%, transparent); }
/* Dunkle Sektion mit warmem Licht/Glow (Hintergrund bleibt dunkel, nur warmes Licht drüber) */
.mw-section--glow {
  background:
    radial-gradient(880px 600px at 26% 46%, rgba(242,103,28,.24), transparent 60%),
    radial-gradient(620px 420px at 86% 46%, rgba(242,103,28,.18), transparent 66%);
}
/* warmer Lichtpool rund um die Karte – sie liegt in einem warmen Schein statt im reinen Dunkel */
.mw-section--glow .mw-split--showcase::before {
  opacity: 1; left: -14%; width: 74%; height: 134%;
  background: radial-gradient(closest-side, rgba(255,150,70,.42), rgba(242,103,28,.16) 50%, transparent 74%);
  filter: blur(34px);
}
/* zweiter, weicher Licht-Tupfer (gegenüberliegende Ecke, hinter dem Inhalt) */
.mw-section--glow .mw-split--showcase::after {
  content: ''; position: absolute; right: -6%; top: 10%; width: 46%; height: 60%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,150,70,.3), rgba(242,103,28,.12) 55%, transparent 72%);
  filter: blur(36px);
}
.mw-section--glow > .mw-wrap { position: relative; z-index: 1; }
.mw-section-head { max-width: 720px; margin-bottom: 50px; }
.mw-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.mw-section-head h2 { margin: 14px 0 0; }
.mw-section-head p { margin-top: 16px; }

/* ===================== STAT COUNT-UP ===================== */
.mw-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 760px) { .mw-stats { grid-template-columns: repeat(4, 1fr); } }
.mw-stat { padding: 26px 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: linear-gradient(150deg, #ff8a3d 0%, #f2671c 56%, #d4520c 100%); text-align: center; box-shadow: 0 16px 38px -20px rgba(242,103,28,.6); }
.mw-stat-num { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: #fff; letter-spacing: -.02em; }
.mw-stat-lbl { margin-top: 6px; font-size: 0.86rem; color: rgba(255,255,255,.9); }
/* Icon-Badges in den Stat-Karten (Eye-Catcher: weißer Kreis, Icon in Orange bzw. Google-Farben) */
.mw-stat-ico { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #f2671c; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4), inset 0 -2px 0 rgba(0,0,0,.06); }
.mw-stat-stars { display: block; margin-top: 2px; color: #ffd76a; font-size: .95rem; letter-spacing: 3px; text-shadow: 0 1px 6px rgba(0,0,0,.3); }

/* ===================== GLAS-KARTEN ===================== */
.mw-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
/* Ratgeber-/Blog-Karten mit Symbolbild (Teaser + Übersicht, Optik wie MA-Immowert/AnimaContent-Blog) */
.mw-blogcard { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid var(--mw-line); background: rgba(255,255,255,.03); }
.mw-blogcard-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.mw-blogcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mw-blogcard-cat { position: absolute; left: 12px; bottom: 12px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(20,12,8,.62); padding: 5px 10px; border-radius: 8px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.mw-blogcard-body { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.mw-blogcard-body h3 { font-size: 1.1rem; margin: 0 0 10px; color: #fff; }
.mw-blogcard-body p { flex: 1; margin: 0; color: rgba(255,255,255,.9); font-size: 0.94rem; }
.mw-blogcard-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: .82rem; color: var(--mw-muted); }
.mw-blogcard-meta span { display: inline-flex; align-items: center; gap: 6px; }
.mw-blogcard-meta .more { color: var(--mw-orange-light); font-weight: 700; }
@media (min-width: 1024px) {
  .mw-blogcard { transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
  .mw-blogcard-media img { transition: transform .5s ease; }
  .mw-blogcard:hover { transform: translateY(-4px); border-color: rgba(242,103,28,.45); }
  .mw-blogcard:hover .mw-blogcard-media img { transform: scale(1.05); }
}
@media (min-width: 680px) { .mw-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .mw-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .mw-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.mw-card {
  position: relative; padding: 28px; border-radius: 20px;
  background: linear-gradient(150deg, #ff8a3d 0%, #f2671c 56%, #d4520c 100%);
  border: 1px solid rgba(255,255,255,.18); overflow: hidden; color: #fff;
  box-shadow: 0 16px 38px -20px rgba(242,103,28,.6);
  /* orange Felder: Texte + Akzente auf weiß umstellen → alles bleibt lesbar */
  --mw-text: #fff; --mw-muted: rgba(255,255,255,.88); --mw-orange-light: #fff;
}
.mw-card h3 { margin-bottom: 10px; color: #fff; }
.mw-card p { color: rgba(255,255,255,.9); font-size: 0.96rem; }
.mw-card-icon {
  width: 50px; height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.4); color: #fff; margin-bottom: 18px;
}
@media (min-width: 1024px) {
  .mw-card { transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, background .35s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .mw-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.55); background: linear-gradient(150deg, #ff9550 0%, #f4701f 56%, #df5811 100%); }
  .mw-card:hover .mw-card-icon { box-shadow: 0 0 22px rgba(242,103,28,.4); }
  /* rotierender Lichtrand */
  .mw-card.beam::after {
    content: ''; position: absolute; inset: -1px; border-radius: 20px; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--a, 0deg), transparent 0 78%, var(--mw-orange-light) 88%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .4s;
  }
  .mw-card.beam:hover::after { opacity: 1; animation: mwSpin 3s linear infinite; }
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes mwSpin { to { --a: 360deg; } }

/* Anlass-Kacheln mit Hintergrundbild */
.mw-anlass { position: relative; display: block; border-radius: 20px; overflow: hidden; min-height: 240px; border: 1px solid var(--mw-line); }
.mw-anlass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.mw-anlass-body { position: relative; z-index: 2; padding: 26px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px; background: linear-gradient(180deg, rgba(12,10,9,.1), rgba(12,10,9,.92)); }
.mw-anlass h3 { font-size: 1.3rem; }
.mw-anlass p { color: var(--mw-muted); font-size: 0.92rem; margin-top: 6px; }
.mw-anlass .mw-anlass-link { margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; color: var(--mw-orange-light); font-weight: 700; font-size: 0.92rem; }
@media (min-width: 1024px) {
  .mw-anlass img { transition: transform .6s ease, opacity .4s; }
  .mw-anlass:hover img { transform: scale(1.06); opacity: .62; }
  .mw-anlass .mw-anlass-link { transition: gap .25s; }
  .mw-anlass:hover .mw-anlass-link { gap: 12px; }
}

/* ===================== „DER WEG ZURÜCK" — JOURNEY ===================== */
.mw-journey { position: relative; max-width: 760px; margin: 0 auto; padding-left: 8px; }
.mw-journey-track { display: none; }
.mw-journey-track::after {
  content: ''; position: absolute; left: -3px; width: 8px; height: 90px; border-radius: 8px;
  background: linear-gradient(180deg, transparent, var(--mw-orange-light), transparent);
  filter: blur(3px);
}
@media (min-width: 1024px) { .mw-journey-track::after { animation: mwTravel 4.5s linear infinite; } }
@media (max-width: 1023px) { .mw-journey-track::after { top: 0; opacity: .5; } }
@keyframes mwTravel { 0% { top: -90px; } 100% { top: 100%; } }
.mw-step { position: relative; display: flex; align-items: flex-start; gap: 22px; padding: 14px 0 30px; }
.mw-step:last-child { padding-bottom: 0; }
/* saubere Verbindungslinie exakt von Kreis-Mitte zu Kreis-Mitte (keine Stummel) */
.mw-step:not(:last-child)::before {
  content: ''; position: absolute; left: 23px; transform: translateX(-1px); top: 63px; height: 100%; width: 2px; z-index: 0;
  background: linear-gradient(180deg, rgba(242,103,28,.5), rgba(242,103,28,.22));
}
.mw-step-node {
  position: relative; z-index: 2; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; margin-top: 24px;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
  background: var(--mw-bg-2); border: 1px solid var(--mw-line-strong); color: var(--mw-orange-light);
}
.mw-step.active .mw-step-node { border-color: var(--mw-orange); box-shadow: 0 0 0 4px rgba(242,103,28,.12), 0 0 22px rgba(242,103,28,.4); background: linear-gradient(135deg, rgba(242,103,28,.25), transparent), var(--mw-bg-2); }
/* Schritt-Text als orange Karte (wie die übrigen Karten) */
.mw-step-body {
  flex: 1; background: linear-gradient(150deg, #ff8a3d 0%, #f2671c 56%, #d4520c 100%);
  border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 15px 18px; color: #fff;
  box-shadow: 0 16px 38px -22px rgba(242,103,28,.55);
}
.mw-step-body h3 { font-size: 1.2rem; color: #fff; }
.mw-step-body p { color: rgba(255,255,255,.92); font-size: 0.96rem; margin-top: 6px; }

/* ===================== SPLIT (Bild + Text) ===================== */
.mw-split { display: grid; gap: 38px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 920px) { .mw-split { grid-template-columns: 1.05fr 1fr; } .mw-split.rev .mw-split-media { order: 2; } }
.mw-split-media { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--mw-line); }
.mw-split-media img { width: 100%; height: 100%; object-fit: cover; }
/* Helle Karte -> Dark-Map: invert+hue-rotate macht aus dem hellen Maps-Bild eine dunkle
   Karte (Hintergrund dunkel, Straßen hell), dazu warmer Marken-Ton + weiche Ränder. */
/* ===================== HELLE KONTRAST-INSELN =====================
   Einzelne Sektionen im dunklen Design bekommen den hellen Ton (Rhythmus-Wechsel).
   Farbvariablen werden nur für diese Sektion umgestellt — alles Innere folgt. */
.mw-section--light {
  background: linear-gradient(180deg, #f6ecd9 0%, #f3e9d6 48%, #f6ecd9 100%);
  --mw-text: #211810; --mw-muted: #6c5d50;
  --mw-line: rgba(34,20,10,.1); --mw-line-strong: rgba(34,20,10,.18);
  --mw-orange-light: #e0560f;
  color: var(--mw-text);
}
.mw-section--light .mw-h2, .mw-section--light .mw-h3 { color: #211810; }
/* Blog-Karten in heller Insel: weiße Karten, dunkle Schrift */
.mw-section--light .mw-blogcard { background: #ffffff; border-color: rgba(34,20,10,.1); box-shadow: 0 14px 34px -24px rgba(80,40,10,.42); }
.mw-section--light .mw-blogcard-body h3 { color: #211810; }
.mw-section--light .mw-blogcard-body p { color: #6c5d50; }
.mw-section--light .mw-blogcard-meta { color: #6c5d50; }
/* Ghost-Buttons in heller Insel lesbar */
.mw-section--light .mw-btn-ghost { background: rgba(34,20,10,.04); border-color: rgba(34,20,10,.2); color: #211810; }

/* Kontakt-Hero = Zwei-Wege-Flow (verschmolzen: Landung → Frage → Handlung) */
.mw-kontakt-hero { padding: 125px 0 70px; }
.mw-kontakt-hero .mw-section-head { max-width: 760px; }
/* Kontakt: Hintergrund-Effekte nur an den Rändern — die Mitte (Headline + Wahl-Karten)
   bleibt ruhig, damit die Texte gut lesbar sind. */
.mw-kontakt-hero .mw-hexbg {
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 9%, transparent 22%, transparent 78%, rgba(0,0,0,.5) 91%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.5) 9%, transparent 22%, transparent 78%, rgba(0,0,0,.5) 91%, #000 100%);
}
.mw-kontakt-hero .mw-hexbg::after { display: none; }
.mw-kontakt-hero .mw-orb-1 { opacity: .32; }
.mw-kontakt-hero .mw-orb-3 { left: -200px; top: 58%; opacity: .3; }

/* Kontakt: zielorientierter Zwei-Wege-Flow in 2 Schritten (unmissverständlich) */
.mw-wahl-schritt { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: 0 0 22px; }
.mw-wahl-schritt .chip { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--mw-orange-light), var(--mw-orange)); padding: 7px 14px; border-radius: 999px; box-shadow: 0 10px 26px -12px var(--mw-glow); }
.mw-wahl-schritt b { font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--mw-text); }
.mw-wahl-schritt .pfeil { color: var(--mw-orange-light); }
@media (min-width: 1024px) { .mw-wahl-schritt .pfeil { animation: mwPfeil 1.4s ease-in-out infinite; } }
@keyframes mwPfeil { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.mw-wahl { display: grid; gap: 20px; grid-template-columns: 1fr; max-width: 920px; margin: 0 auto; }
@media (min-width: 720px) { .mw-wahl { grid-template-columns: 1fr 1fr; } }
.mw-wahl-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left;
  padding: 30px 26px 24px; border-radius: 22px; cursor: pointer;
  border: 2px solid var(--mw-line-strong); background: rgba(255,255,255,.03); color: var(--mw-text);
  font: inherit; transition: border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.mw-wahl-card .nr {
  position: absolute; top: -16px; left: 22px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, var(--mw-orange-light), var(--mw-orange));
  box-shadow: 0 8px 20px -8px var(--mw-glow), 0 0 0 4px var(--mw-bg, #17120c);
}
.mw-wahl-card .ico { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; background: rgba(242,103,28,.14); color: var(--mw-orange-light); }
.mw-wahl-card b { font-size: 1.3rem; letter-spacing: -.01em; }
.mw-wahl-card p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--mw-muted); }
.mw-wahl-card p strong { color: var(--mw-text); }
.mw-wahl-card ul { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mw-wahl-card ul li { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--mw-muted); }
.mw-wahl-card ul li svg { color: var(--mw-orange-light); flex: 0 0 auto; }
.mw-wahl-card .wahl-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px;
  width: 100%; padding: 13px 18px; border-radius: 14px; font-weight: 800; font-size: .98rem; color: #fff;
  background: linear-gradient(135deg, var(--mw-orange-light), var(--mw-orange) 55%, var(--mw-orange-deep, #d4520c));
  box-shadow: 0 10px 30px -10px var(--mw-glow);
}
.mw-wahl-card em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: .74rem; font-weight: 700; color: var(--mw-muted); margin: 4px auto 0; }
.mw-wahl-card:hover { border-color: rgba(242,103,28,.55); transform: translateY(-4px); box-shadow: 0 22px 50px -26px var(--mw-glow); }
.mw-wahl-card.on { border-color: var(--mw-orange); background: linear-gradient(160deg, rgba(242,103,28,.16), rgba(233,178,90,.06)); box-shadow: 0 18px 46px -22px var(--mw-glow); }
.mw-wahl-card.on .wahl-cta { background: linear-gradient(135deg, #4caf50, #2e8b57); box-shadow: 0 10px 30px -10px rgba(76,175,80,.55); }
.mw-wahl-panel { margin-top: 34px; animation: mwPanelIn .45s cubic-bezier(.16,1,.3,1); }

/* „Wie geht es weiter?" — erklärt die automatische E-Mail nach der Wahl */
.mw-wahl-next {
  max-width: 920px; margin: 28px auto 0; padding: 26px 28px;
  border-radius: 20px; border: 1px solid rgba(242,103,28,.28);
  background: linear-gradient(160deg, rgba(242,103,28,.10), rgba(255,255,255,.03));
  text-align: center; position: relative; z-index: 1;
}
.mw-wahl-next .titel { display: inline-flex; align-items: center; gap: 9px; font-size: 1.1rem; font-weight: 800; color: var(--mw-text); }
.mw-wahl-next .titel svg { color: var(--mw-orange-light); flex: 0 0 auto; }
.mw-wahl-next .schritte { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px; margin: 16px 0 14px; }
.mw-wahl-next .schritte span { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1px solid var(--mw-line); font-size: .86rem; font-weight: 600; color: var(--mw-text); text-align: left; max-width: 255px; }
.mw-wahl-next .schritte span i { flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--mw-orange-light), var(--mw-orange)); }
.mw-wahl-next .schritte > svg { color: var(--mw-orange-light); align-self: center; flex: 0 0 auto; }
.mw-wahl-next p { margin: 0 auto; max-width: 660px; font-size: .9rem; line-height: 1.65; color: var(--mw-muted); }
.mw-wahl-next p b { color: var(--mw-text); }
@media (max-width: 719px) {
  .mw-wahl-next { padding: 22px 18px; }
  .mw-wahl-next .schritte { flex-direction: column; align-items: center; }
  .mw-wahl-next .schritte > svg { transform: rotate(90deg); }
  .mw-wahl-next .schritte span { max-width: none; width: 100%; }
}
.mw-hell-scope .mw-wahl-next { background: #fff; border-color: rgba(34,20,10,.14); box-shadow: 0 12px 30px -24px rgba(80,40,10,.4); }
.mw-hell-scope .mw-wahl-next .schritte span { background: rgba(242,103,28,.06); }
@keyframes mwPanelIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Kompakte Kanal-Leiste */
.mw-kanaele { display: grid; gap: 14px; grid-template-columns: 1fr; max-width: 1040px; margin: 0 auto; }
@media (min-width: 720px) { .mw-kanaele { grid-template-columns: repeat(4, 1fr); } }
.mw-kanal { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 15px; border: 1px solid var(--mw-line); background: rgba(255,255,255,.03); font-size: .9rem; color: var(--mw-muted); }
.mw-kanal strong { color: var(--mw-text); }
/* Hell-Variante */
.mw-hell-scope .mw-wahl-card, .mw-hell-scope .mw-kanal { background: #ffffff; border-color: rgba(34,20,10,.12); box-shadow: 0 12px 30px -24px rgba(80,40,10,.4); }
.mw-hell-scope .mw-wahl-card.on { background: linear-gradient(150deg, #ff8a3d 0%, #f2671c 56%, #d4520c 100%); border-color: rgba(255,255,255,.42); }

/* Online-Terminbuchung (Google-Terminplan, Zwei-Klick-Einbindung) */
.mw-booking { max-width: 880px; margin: 0 auto; border-radius: 18px; overflow: hidden; border: 1px solid var(--mw-line-strong); background: rgba(255,255,255,.03); }
.mw-booking iframe { background: #fff; }
.mw-booking-gate { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: clamp(28px, 5vw, 52px); }
.mw-booking-gate h3 { margin: 4px 0 0; color: var(--mw-text); }
.mw-booking-gate p { max-width: 520px; margin: 0; color: var(--mw-muted); font-size: .95rem; }
.mw-booking-alt { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--mw-orange-light); }
.mw-booking-hinweis { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem !important; color: var(--mw-muted); }
.mw-hell-scope .mw-booking { background: #ffffff; border-color: rgba(34,20,10,.12); box-shadow: 0 14px 34px -24px rgba(80,40,10,.42); }

/* ===================== GOOGLE-REZENSIONEN (Startseite) =====================
   Muster wie bei Hanse Gutachten: verlinktes Google-Badge + echte Stimmen.
   Desktop: das Badge links ist STICKY — es bleibt beim Scrollen stehen, bis die
   letzte Bewertungs-Reihe durchgelaufen ist. */
@media (min-width: 920px) {
  .mw-grev-side { align-self: stretch; }
  .mw-grev-summary { position: sticky; top: 110px; }
}
.mw-greviews { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 920px) { .mw-greviews { grid-template-columns: 0.82fr 1.6fr; } }
.mw-grev-summary {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 34px 24px; border-radius: 20px; border: 1px solid var(--mw-line-strong);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.mw-grev-summary .num { font-size: 3.4rem; font-weight: 800; color: var(--mw-text); letter-spacing: -.02em; line-height: 1; margin-top: 6px; }
.mw-grev-summary .stars { color: #fbbc05; font-size: 1.25rem; letter-spacing: 4px; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.mw-grev-summary p { margin: 4px 0 0; color: var(--mw-muted); font-size: .92rem; line-height: 1.5; }
.mw-grev-summary p b { color: var(--mw-text); }
.mw-grev-open { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .88rem; font-weight: 700; color: var(--mw-orange-light); }
.mw-grev-cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .mw-grev-cards { grid-template-columns: repeat(3, 1fr); } .mw-grev.big { grid-column: span 3; } }
@media (min-width: 1100px) { .mw-grev.big { grid-column: span 3; } }
.mw-grev {
  margin: 0; padding: 18px; border-radius: 16px; border: 1px solid var(--mw-line);
  background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 10px;
}
.mw-grev figcaption { display: flex; align-items: center; gap: 10px; }
.mw-grev .ava { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1rem; }
.mw-grev .who { display: flex; flex-direction: column; min-width: 0; }
.mw-grev .who b { color: var(--mw-text); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-grev .who em { font-style: normal; font-size: .74rem; color: var(--mw-muted); }
.mw-grev figcaption .stars { margin-left: auto; color: #fbbc05; font-size: .82rem; letter-spacing: 1.5px; white-space: nowrap; }
.mw-grev blockquote { margin: 0; color: rgba(255,255,255,.92); font-size: .92rem; line-height: 1.6; }
.mw-grev-reply { padding: 10px 12px; border-radius: 12px; font-size: .82rem; line-height: 1.55; color: var(--mw-muted); background: rgba(242,103,28,.09); border: 1px solid rgba(242,103,28,.25); }
.mw-grev-reply b { color: var(--mw-orange-light); display: block; margin-bottom: 2px; }
@media (min-width: 1024px) {
  .mw-grev-summary { transition: transform .3s ease, border-color .3s ease; }
  .mw-grev-summary:hover { transform: translateY(-4px); border-color: rgba(242,103,28,.4); }
}
/* Hell-Variante */
.mw-hell-scope .mw-grev-summary, .mw-hell-scope .mw-grev { background: #ffffff; border-color: rgba(34,20,10,.12); box-shadow: 0 14px 34px -26px rgba(80,40,10,.4); }
.mw-hell-scope .mw-grev blockquote { color: #3a2e24; }
.mw-hell-scope .mw-grev-summary .stars, .mw-hell-scope .mw-grev figcaption .stars { text-shadow: none; }

/* Portal-Mockup (Online-Portal-Sektion): Fake-Browser im Seiten-Design statt Platzhalter-Foto */
.mw-portal { position: relative; }
.mw-portal::before { content: ''; position: absolute; inset: -10% -8%; background: radial-gradient(60% 55% at 55% 45%, rgba(242,103,28,.2), transparent 70%); z-index: -1; }
.mw-portal-window { border-radius: 18px; overflow: hidden; border: 1px solid var(--mw-line-strong); background: rgba(20,15,11,.94); box-shadow: 0 30px 70px -30px rgba(0,0,0,.75); }
.mw-portal-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--mw-line); background: rgba(255,255,255,.03); }
.mw-portal-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.mw-portal-bar .dot:first-child { background: var(--mw-orange); }
.mw-portal-url { margin-left: 8px; font-size: .7rem; color: var(--mw-muted); background: rgba(255,255,255,.05); border: 1px solid var(--mw-line); border-radius: 999px; padding: 4px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-portal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.mw-portal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mw-portal-head .hi { display: block; font-size: .76rem; color: var(--mw-muted); }
.mw-portal-head b { font-size: 1.02rem; color: var(--mw-text); }
.mw-portal-ring { position: relative; width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(var(--mw-orange) 0 68%, rgba(242,103,28,.16) 68% 100%); display: grid; place-items: center; }
.mw-portal-ring i { position: absolute; inset: 5px; border-radius: 50%; background: #17100b; }
.mw-portal-ring b { position: relative; font-size: .7rem; color: var(--mw-text); }
.mw-portal-progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.mw-portal-progress span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mw-orange-light), var(--mw-orange)); }
.mw-portal-modules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mw-portal-modules li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--mw-line); border-radius: 12px; background: rgba(255,255,255,.03); font-size: .85rem; color: var(--mw-text); }
.mw-portal-modules .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(242,103,28,.14); color: var(--mw-orange-light); flex: 0 0 auto; }
.mw-portal-modules em { margin-left: auto; font-style: normal; font-size: .72rem; color: var(--mw-muted); white-space: nowrap; }
.mw-portal-modules li.done { opacity: .75; }
.mw-portal-modules li.done .ico { background: rgba(90,200,120,.16); color: #64c58b; }
.mw-portal-termin { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(242,103,28,.35); background: linear-gradient(135deg, rgba(242,103,28,.16), rgba(233,178,90,.08)); color: var(--mw-orange-light); }
.mw-portal-termin b { display: block; color: var(--mw-text); font-size: .88rem; }
.mw-portal-termin .sub { display: block; font-size: .76rem; color: var(--mw-muted); }
.mw-portal-termin .cta { margin-left: auto; font-size: .76rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--mw-orange-light), var(--mw-orange)); padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
.mw-portal-chip { position: absolute; top: -13px; right: -8px; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #64c58b, #3ea86a); padding: 8px 13px; border-radius: 999px; box-shadow: 0 12px 30px -12px rgba(62,168,106,.6); }
@media (min-width: 1024px) {
  .mw-portal-window { transform: perspective(1200px) rotateY(-5deg) rotateX(1.5deg); transition: transform .5s ease; }
  .mw-portal:hover .mw-portal-window { transform: none; }
}
.mw-split-media--map { border-color: rgba(242,103,28,.3); box-shadow: 0 24px 58px -34px rgba(0,0,0,.7); }
.mw-split-media--map img { filter: invert(0.9) hue-rotate(180deg) saturate(0.78) brightness(0.92) contrast(0.95); }
.mw-split-media--map::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(135deg, rgba(242,103,28,.26), rgba(242,103,28,0) 48%),
    linear-gradient(0deg, rgba(242,103,28,.07), rgba(242,103,28,.07)),
    radial-gradient(132% 130% at 50% 42%, rgba(18,13,10,0) 58%, rgba(18,13,10,.62) 100%);
  mix-blend-mode: normal;
}
.mw-list { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mw-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--mw-text); }
.mw-list li svg { flex: 0 0 auto; color: var(--mw-orange-light); margin-top: 3px; }
.mw-list li span { color: var(--mw-muted); }

/* ===== Optisch aufgewertete Showcase-Split (nur diese Sektion, Inhalt unverändert) ===== */
.mw-split--showcase { position: relative; }
/* dezenter warmer Halo hinter dem Bild, damit die Sektion mehr „lebt" */
.mw-split--showcase::before {
  content: ''; position: absolute; left: -4%; top: 50%; width: 56%; height: 116%;
  transform: translateY(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(242,103,28,.16), transparent 72%);
  filter: blur(26px);
}
.mw-split--showcase > * { position: relative; z-index: 1; }
.mw-split--showcase .mw-split-media { box-shadow: 0 34px 80px -34px rgba(242,103,28,.4), 0 26px 60px -36px rgba(0,0,0,.7); }
/* Feature-Liste als edle Zeilen mit Icon-Chips + feinen Trennlinien */
.mw-split--showcase .mw-list { gap: 0; margin-top: 26px; }
.mw-split--showcase .mw-list li { align-items: center; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--mw-line); }
.mw-split--showcase .mw-list li:last-child { border-bottom: none; }
.mw-split--showcase .mw-list li svg {
  width: 36px; height: 36px; padding: 8px; border-radius: 11px; margin-top: 0; flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(242,103,28,.22), rgba(233,178,90,.08));
  border: 1px solid rgba(242,103,28,.32); color: var(--mw-orange-light);
}
.mw-split--showcase .mw-list li span { color: var(--mw-text); font-weight: 600; font-size: 0.98rem; }
@media (min-width: 1024px) {
  .mw-split--showcase .mw-list li { transition: padding-left .25s ease, border-color .25s ease; }
  .mw-split--showcase .mw-list li:hover { padding-left: 8px; border-color: rgba(242,103,28,.35); }
}

/* ===================== FAQ ===================== */
.mw-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.mw-faq-item { border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: linear-gradient(150deg, #ff8a3d 0%, #f2671c 56%, #d4520c 100%); overflow: hidden; box-shadow: 0 16px 38px -20px rgba(242,103,28,.55); --mw-text: #fff; --mw-muted: rgba(255,255,255,.9); --mw-orange-light: #fff; }
.mw-faq-q { width: 100%; text-align: left; background: none; border: none; color: #fff; cursor: pointer; font-weight: 700; font-size: 1.02rem; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mw-faq-q svg { flex: 0 0 auto; color: var(--mw-orange-light); transition: transform .3s ease; }
.mw-faq-item.open .mw-faq-q svg { transform: rotate(45deg); }
.mw-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.mw-faq-a-inner { padding: 0 22px 20px; color: rgba(255,255,255,.9); }
.mw-faq-item.open .mw-faq-a { max-height: 460px; }

/* ===================== CTA-BAND ===================== */
.mw-ctaband { position: relative; z-index: 1; margin-top: clamp(40px, 7vh, 90px); border-radius: 26px; padding: clamp(34px, 5vw, 60px); overflow: hidden; border: 1px solid rgba(242,103,28,.25); background-color: #1b1511; background-image: linear-gradient(135deg, rgba(242,103,28,.16), rgba(27,21,17,.6)); text-align: center; }
.mw-ctaband h2 { max-width: 680px; margin: 0 auto; }
.mw-ctaband p { max-width: 560px; margin: 16px auto 0; color: var(--mw-muted); }
.mw-ctaband .mw-hero-actions { justify-content: center; }

/* ===================== FORMULAR ===================== */
.mw-form { display: grid; gap: 16px; }
.mw-row2 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .mw-row2 { grid-template-columns: 1fr 1fr; } }
.mw-field { display: flex; flex-direction: column; gap: 7px; }
.mw-field label { font-size: 0.86rem; font-weight: 600; color: var(--mw-text); }
.mw-field input, .mw-field textarea, .mw-field select {
  background: var(--mw-bg-2); border: 1px solid var(--mw-line-strong); border-radius: 12px;
  padding: 13px 15px; color: var(--mw-text); font-size: 0.98rem; font-family: inherit; width: 100%;
}
.mw-field textarea { min-height: 130px; resize: vertical; }
.mw-field input:focus, .mw-field textarea:focus, .mw-field select:focus { outline: none; border-color: var(--mw-orange); box-shadow: 0 0 0 3px rgba(242,103,28,.15); }
.mw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mw-form-consent { font-size: 0.82rem; color: var(--mw-muted); display: flex; gap: 10px; align-items: flex-start; }
.mw-form-consent a { color: var(--mw-orange-light); text-decoration: underline; }
.mw-form-success { padding: 30px; border-radius: 18px; border: 1px solid rgba(43,213,102,.3); background: rgba(43,213,102,.08); text-align: center; }
.mw-form-success svg { color: #2bd566; margin-bottom: 10px; }

/* ===================== INHALTS-SEITEN / PROSE ===================== */
.mw-page-hero { padding: 130px 0 40px; position: relative; overflow: hidden; }
.mw-page-hero > .mw-wrap { position: relative; z-index: 2; }
/* Themen-Bild im Unterseiten-Hero (dunkles Design): volle Fläche, dunkles Overlay hält den Text lesbar */
.mw-page-hero-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mw-page-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
@media (min-width: 1024px) { .mw-page-hero-media img { will-change: transform; } }
.mw-page-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,7,5,.94) 0%, rgba(10,7,5,.8) 45%, rgba(10,7,5,.45) 80%, rgba(10,7,5,.55) 100%),
    linear-gradient(180deg, rgba(10,7,5,.55), transparent 30%, transparent 62%, rgba(10,7,5,.96));
}
.mw-hell-scope .mw-page-hero-media { display: none; }
.mw-prose { max-width: 760px; }
/* Symbolbild oben im Ratgeber-Artikel */
.mw-article-hero { max-width: 760px; margin: 0 auto 34px; border-radius: 18px; overflow: hidden; border: 1px solid var(--mw-line); }
.mw-article-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.mw-prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 38px 0 14px; }
.mw-prose h3 { font-size: 1.2rem; margin: 26px 0 10px; }
.mw-prose p { color: var(--mw-muted); margin: 0 0 16px; }
.mw-prose ul { margin: 0 0 18px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.mw-prose ul li { display: flex; gap: 11px; color: var(--mw-muted); }
.mw-prose ul li::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%; background: var(--mw-orange); }
.mw-prose a { color: var(--mw-orange-light); text-decoration: underline; }
.mw-prose strong { color: var(--mw-text); }
.mw-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.84rem; color: var(--mw-muted); margin-bottom: 18px; }
.mw-breadcrumb a:hover { color: var(--mw-orange-light); }
.mw-breadcrumb span { color: var(--mw-line-strong); }

/* ===================== FOOTER ===================== */
.mw-footer { border-top: 1px solid var(--mw-line); padding: 64px 0 110px; background: var(--mw-bg); }
@media (min-width: 1024px) { .mw-footer { padding-bottom: 64px; } }
.mw-footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .mw-footer-grid { grid-template-columns: 1.6fr 1fr 1.2fr; } }
.mw-footer h4 { font-size: 0.78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mw-orange-light); margin-bottom: 16px; }
.mw-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mw-footer ul a { color: var(--mw-muted); font-size: 0.95rem; }
@media (min-width: 1024px) { .mw-footer ul a:hover { color: var(--mw-orange-light); } }
/* Mobil: fingerfreundlichere Tap-Flächen für Footer- und Rechtslinks (mind. ~40px) */
@media (max-width: 759px) {
  .mw-footer ul { gap: 4px; }
  .mw-footer ul a { display: inline-block; padding: 9px 0; }
  .mw-footer-bottom .mw-legal { gap: 10px 18px; }
  .mw-footer-bottom .mw-legal a { display: inline-block; padding: 6px 0; }
}
.mw-footer-brand p { color: var(--mw-muted); max-width: 340px; margin-top: 14px; font-size: 0.94rem; }
.mw-socials { display: flex; gap: 10px; margin-top: 20px; }
.mw-socials a { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mw-line-strong); color: var(--mw-muted); transition: color .2s, border-color .2s, transform .25s, background .2s; }
@media (min-width: 1024px) { .mw-socials a:hover { color: var(--mw-orange-light); border-color: var(--mw-orange); background: rgba(242,103,28,.08); transform: translateY(-2px); } }
.mw-footer-contact { display: flex; flex-direction: column; gap: 11px; color: var(--mw-muted); font-size: 0.95rem; }
.mw-footer-contact div { display: flex; gap: 10px; align-items: flex-start; }
.mw-footer-contact svg { color: var(--mw-orange-light); flex: 0 0 auto; margin-top: 2px; }
.mw-footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--mw-line); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 0.85rem; color: var(--mw-muted); }
.mw-footer-bottom .mw-legal { display: flex; flex-wrap: wrap; gap: 18px; }

/* ===================== SCROLL-TOP ===================== */
.mw-top { position: fixed; right: 18px; bottom: 84px; z-index: 50; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--mw-line-strong); background: rgba(20,16,13,.9); color: var(--mw-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.mw-top.show { opacity: 1; transform: none; }
@media (min-width: 1024px) { .mw-top { bottom: 24px; } .mw-top:hover { border-color: var(--mw-orange); color: var(--mw-orange-light); } }

/* ===================== SCROLL-PROGRESS ===================== */
.mw-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 65; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--mw-orange-deep), var(--mw-orange-light), var(--mw-amber)); box-shadow: 0 0 10px var(--mw-glow); }

/* ===================== „DER WEG ZURÜCK" — LEUCHT-STRASSE (scroll-gesteuert) ===================== */
.mw-road { position: relative; }
.mw-road-inner { position: relative; max-width: 1040px; margin: 0 auto; }
/* Hexagon-Feld neben der Straße – volle Seitenbreite (bis zum Rand); Seiten-Verteilung
   steckt im SVG (abwechselnd, Korridor frei). Maske fadet oben/unten weich aus → sauberer Übergang. */
.mw-road-hex { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  z-index: 0; pointer-events: none;
  background-image: url("/images/mpu-westfalen/hexfield-road.svg");
  background-repeat: no-repeat; background-position: left top; background-size: 100% auto;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 85%, transparent 100%);
}
/* maus-reaktive Leucht-Ebene (orange), nur rund um den Cursor sichtbar */
.mw-road-hex::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("/images/mpu-westfalen/hexfield-road-hot.svg");
  background-repeat: no-repeat; background-position: left top; background-size: 100% auto;
  filter: brightness(1.5) saturate(1.9) drop-shadow(0 0 7px rgba(242,103,28,0.85));
  opacity: 0; transition: opacity .35s ease;
  -webkit-mask-image: radial-gradient(circle 190px at var(--rsx, -999px) var(--rsy, -999px), #000 0%, rgba(0,0,0,0.5) 45%, transparent 72%);
  mask-image: radial-gradient(circle 190px at var(--rsx, -999px) var(--rsy, -999px), #000 0%, rgba(0,0,0,0.5) 45%, transparent 72%);
}
@media (hover: hover) and (pointer: fine) { .mw-road-hex.rhex-on::after { opacity: 1; } }
.mw-road-svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; overflow: visible; }
.mw-road-base { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 14; stroke-linecap: round; }
.mw-road-dash { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 2; stroke-dasharray: 1 26; stroke-linecap: round; }
.mw-road-glow {
  fill: none; stroke: url(#mwRoadGrad); stroke-width: 8; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(242,103,28,.85)) drop-shadow(0 0 16px rgba(242,103,28,.5));
}
.mw-road-dot { fill: #fff; filter: drop-shadow(0 0 8px #ff8a3d) drop-shadow(0 0 20px var(--mw-orange)); }
.mw-road-dot-halo { fill: rgba(242,103,28,.18); }
/* Fahrzeuge auf der Strecke (Vogelperspektive): Fahrrad fährt mit, am Ziel wird daraus ein Auto */
.mw-road-dot .mw-vehicle { transition: opacity .45s ease, transform .45s ease; transform-box: fill-box; transform-origin: center; }
.mw-vehicle-car { opacity: 0; transform: scale(.5); }
.mw-vehicle-car .car-body { fill: var(--mw-orange); stroke: #2b1a10; stroke-width: 2; }
.mw-vehicle-car .car-glass { fill: #2b1a10; }
.mw-vehicle-car .car-roof { fill: #46281a; }
.mw-vehicle-car .car-light { fill: #ffe9b0; }
.mw-vehicle-car .car-wheel { fill: #2b1a10; }
.mw-road-dot.is-car .mw-vehicle-bike { opacity: 0; transform: scale(.5); }
.mw-road-dot.is-car .mw-vehicle-car { opacity: 1; transform: scale(1); }

.mw-road-step {
  position: absolute; pointer-events: none;
  width: min(330px, 64vw);
  opacity: .4; transition: opacity .45s ease;
}
.mw-road-step.side-right { transform: translate(calc(-50% + 230px), -50%); }
.mw-road-step.side-left  { transform: translate(calc(-50% - 230px), -50%); }
/* schmalere Desktops: Karten etwas kompakter, damit nichts über den Rand ragt */
@media (max-width: 1240px) and (min-width: 701px) {
  .mw-road-step { width: min(292px, 50vw); }
  .mw-road-step.side-right { transform: translate(calc(-50% + 180px), -50%); }
  .mw-road-step.side-left  { transform: translate(calc(-50% - 180px), -50%); }
}
.mw-road-step.lit { opacity: 1; }
.mw-road-step-card {
  background: linear-gradient(150deg, #ff8a3d 0%, #f2671c 56%, #d4520c 100%);
  border: 1px solid rgba(255,255,255,.2); border-radius: 18px; color: #fff;
  padding: 20px 22px; box-shadow: 0 16px 40px -20px rgba(242,103,28,.5);
  transition: border-color .45s ease, box-shadow .45s ease, transform .45s ease;
}
.mw-road-step.lit .mw-road-step-card { border-color: rgba(255,255,255,.42); box-shadow: 0 20px 52px -16px rgba(242,103,28,.7); }
.mw-road-step.side-left { text-align: right; }
.mw-road-step-badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.82); margin-bottom: 6px;
}
.mw-road-step.lit .mw-road-step-badge { color: #fff; }
.mw-road-step-card h3 { font-size: 1.25rem; margin-bottom: 6px; color: #fff; }
.mw-road-step-card p { color: rgba(255,255,255,.92); font-size: .98rem; line-height: 1.6; }
.mw-road-pin { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.55); display: inline-block; }
.mw-road-step.lit .mw-road-pin { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2), 0 0 14px rgba(255,255,255,.7); }

/* Endschilder */
.mw-road-cap { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; width: max-content; }
.mw-road-cap .k { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--mw-muted); }
.mw-road-cap.end .k { color: var(--mw-orange-light); }
.mw-road-cap .v { font-size: clamp(1.1rem,2.4vw,1.5rem); font-weight: 800; color: var(--mw-text); margin-top: 2px; }


/* ====== Ankunfts-Finale: ruhiger, edler Ziel-Moment (scroll-gekoppelt via --carP) ====== */
.mw-finale { position: relative; max-width: 760px; margin: 18px auto 0; padding: 28px 22px 8px; text-align: center; }
/* warmer Lichtschein, der beim Heranscrollen aufblüht – schließt an den leuchtenden Weg an */
.mw-finale-glow { position: absolute; left: 50%; top: -40px; width: min(760px, 92%); height: 360px;
  transform: translateX(-50%) scale(calc(0.6 + 0.4 * var(--carP, 0))); transform-origin: 50% 30%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(242,103,28,.26), rgba(242,103,28,.08) 46%, rgba(242,103,28,0) 72%);
  filter: blur(6px); opacity: clamp(0, calc(var(--carP, 0) * 1.15), 1); }
.mw-finale > *:not(.mw-finale-glow) { position: relative; z-index: 1; }
.mw-finale-eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mw-orange); opacity: clamp(0, calc((var(--carP, 0) - 0.12) * 3), 1);
  transform: translateY(calc(14px * (1 - clamp(0, calc((var(--carP, 0) - 0.12) * 3), 1)))); }
.mw-finale-title { margin: 14px 0 0; font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 800; line-height: 1.08; letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--mw-text); opacity: clamp(0, calc((var(--carP, 0) - 0.2) * 3), 1);
  transform: translateY(calc(22px * (1 - clamp(0, calc((var(--carP, 0) - 0.2) * 3), 1)))); }
.mw-finale-sub { display: inline-block; margin: 18px 0 0; max-width: 560px; font-size: clamp(1rem, 1.6vw, 1.16rem); line-height: 1.7; color: var(--mw-muted);
  opacity: clamp(0, calc((var(--carP, 0) - 0.34) * 3), 1);
  transform: translateY(calc(22px * (1 - clamp(0, calc((var(--carP, 0) - 0.34) * 3), 1)))); }
.mw-finale-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px;
  opacity: clamp(0, calc((var(--carP, 0) - 0.48) * 3), 1);
  transform: translateY(calc(22px * (1 - clamp(0, calc((var(--carP, 0) - 0.48) * 3), 1)))); }

@media (max-width: 700px) {
  /* Felder mobil deutlich kompakter (wirkten erdrückend): weniger Padding, kleinere Icons/Schrift */
  /* Karten-Raster ~20% schmaler (80% Breite, mittig) – Felder gehen nicht mehr randvoll */
  .mw-grid { gap: 12px; max-width: 80%; margin-left: auto; margin-right: auto; }
  .mw-card { padding: 14px 15px; border-radius: 15px; }
  .mw-card-icon { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 9px; }
  .mw-card-icon svg { width: 17px; height: 17px; }
  .mw-card h3 { font-size: 1.04rem; margin-bottom: 4px; }
  .mw-card p { font-size: 0.88rem; line-height: 1.5; }
  .mw-card .mw-anlass-link { font-size: 0.85rem !important; margin-top: 10px !important; }
  /* Vorteils-Karten: Ziffern-Reihe kompakt halten */
  .mw-num-row { margin-bottom: 7px; }
  .mw-num { font-size: 0.88rem; }
  /* Statistik-Kacheln kleiner */
  .mw-stat { padding: 16px 12px; border-radius: 15px; }
  .mw-stat-num { font-size: 1.85rem; }
  .mw-stat-lbl { font-size: 0.8rem; }
  /* FAQ kompakter */
  .mw-faq-q { padding: 15px 16px; font-size: 0.96rem; }
  .mw-faq-a-inner { padding: 0 16px 16px; }
  /* Timeline-Schritt-Karten (Padding/Schrift; Kreis-Position unverändert) */
  .mw-step-body { padding: 12px 14px; }
  .mw-step-body h3 { font-size: 1.04rem; }
  .mw-step-body p { font-size: 0.88rem; }
  /* ============ „Weg zurück" MOBIL: Spur links, vollwertige Karten rechts ============
     Die Strecke läuft als geschwungene Spur (inkl. Mini-Slalom) am linken Rand (eigener
     Pfad PATH_M in WegZurueckRoad). Die Karten stehen rechts daneben – mit Text –
     und sind über einen leuchtenden Punkt mit der Spur verbunden. */
  .mw-road-step { left: 29% !important; width: 71%; z-index: 4; opacity: 1; }
  .mw-road-step.side-right, .mw-road-step.side-left { transform: translateY(-50%); text-align: left; }
  /* Verbindungs-Punkt zur Spur (leuchtet mit auf) */
  .mw-road-step::before {
    content: ''; position: absolute; left: -13px; top: 50%; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,.25); transition: background .45s ease, box-shadow .45s ease;
  }
  .mw-road-step.lit::before { background: var(--mw-orange-light); box-shadow: 0 0 10px rgba(242,103,28,.9), 0 0 22px rgba(242,103,28,.5); }
  /* Karte: dunkel-glasig solange nicht erreicht, leuchtet orange auf bei .lit */
  .mw-road-step-card { background: linear-gradient(150deg, rgba(46,28,16,.96), rgba(33,21,14,.96)); border-color: var(--mw-line-strong); box-shadow: none; padding: 14px 16px; }
  .mw-road-step.lit .mw-road-step-card { background: linear-gradient(150deg, #ff8a3d 0%, #f2671c 56%, #d4520c 100%); border-color: rgba(255,255,255,.42); box-shadow: 0 16px 42px -18px rgba(242,103,28,.7); }
  .mw-road-step-card h3 { font-size: 1rem; }
  .mw-road-step-card p { display: block; font-size: .82rem; line-height: 1.5; margin-top: 4px; }
  /* Start-Schild: über den Spur-Anfang links, linksbündig */
  .mw-road-cap { left: 6px !important; transform: translate(0, -130%) !important; text-align: left; }
  /* Straße mobil kräftiger zeichnen (viewBox wird stark verkleinert dargestellt) */
  .mw-road-base { stroke-width: 30; }
  .mw-road-glow { stroke-width: 17; }
  .mw-road-dash { stroke-width: 4; stroke-dasharray: 2 44; }
}

/* ===================== MEHR LEBEN (dezente Interaktion, Desktop) ===================== */
@media (min-width: 1024px) {
  .mw-card { transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, background .35s, box-shadow .35s; }
  .mw-card:hover { box-shadow: 0 22px 55px -28px var(--mw-glow); }
  .mw-card-icon { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
  .mw-card:hover .mw-card-icon { transform: translateY(-3px) scale(1.08); }
  .mw-split-media img { transition: transform .8s cubic-bezier(.16,1,.3,1); }
  .mw-split-media:hover img { transform: scale(1.045); }
  .mw-stat { transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s; }
  .mw-stat:hover { transform: translateY(-4px); border-color: rgba(242,103,28,.3); box-shadow: 0 18px 44px -26px var(--mw-glow); }
  .mw-eyebrow { transition: opacity .3s; }
}
/* Akzent-Linie unter Abschnitts-Überschriften: dezenter fester Strich, der beim Erscheinen
   „wächst". Sitzt mittig (zentrierte Heads) bzw. linksbündig unter dem Überschrift-Anfang –
   konsistent überall (auch Unterseiten), nie über die volle Breite bei mehrzeiligen Titeln. */
.mw-section-head h2 { position: relative; }
.mw-section-head.center h2::after { left: 50%; transform: translateX(-50%); }
.mw-section-head h2::after {
  content: ''; position: absolute; left: 0; bottom: -14px; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--mw-orange), var(--mw-amber));
  border-radius: 3px; transition: width .8s cubic-bezier(.16,1,.3,1) .2s;
}
.mw-section-head.reveal.active h2::after,
.mw-section-head:not(.reveal) h2::after { width: var(--stripe-w, 72px); }

/* Sanftes Leben im Hero-Label (Desktop) */
@media (min-width: 1024px) {
  .mw-badge { animation: mwBadgeFloat 5.5s ease-in-out infinite; }
  .mw-dot { animation: mwDotPulse 2.6s ease-in-out infinite; }
}
@keyframes mwBadgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes mwDotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,103,28,.55); } 50% { box-shadow: 0 0 0 5px rgba(242,103,28,0); } }

/* ===================== WOW: Kinetik & Micro-Interactions ===================== */

/* Rotierendes Wort (Hero) */
.mw-rotate { display: inline-block; }
.mw-rotate-word { display: inline-block; white-space: nowrap; color: var(--mw-orange-light); animation: mwWordIn .5s cubic-bezier(.16,1,.3,1); }
@keyframes mwWordIn { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
.mw-hero-kicker { margin-top: 14px; font-size: clamp(1.15rem, 2.3vw, 1.6rem); font-weight: 700; color: var(--mw-text); letter-spacing: -.01em; }

/* Hero-Spotlight (folgt dem Cursor, nur Desktop) */
.mw-spotlight {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .45s ease; mix-blend-mode: screen;
  background: radial-gradient(460px circle at var(--sx, 50%) var(--sy, 50%), rgba(242,103,28,.18), transparent 62%);
}
.mw-hero > .mw-wrap { position: relative; z-index: 2; }
.mw-hero.mw-spot-on .mw-spotlight { opacity: 1; }
@media (max-width: 1023px) { .mw-spotlight { display: none; } }

@media (min-width: 1024px) {
  /* 3D-Tilt + cursor-folgender Glow auf Karten */
  .mw-card.mw-tilting {
    transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(-4px);
    transition: transform .12s ease-out, box-shadow .35s, background .2s;
    background:
      radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 55%),
      linear-gradient(150deg, #ff8a3d 0%, #f2671c 56%, #d4520c 100%);
    box-shadow: 0 26px 60px -28px var(--mw-glow);
    will-change: transform;
  }
  /* Magnetische Primär-Buttons */
  .mw-btn.mw-magnetic { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .3s, background .3s; }
  .mw-btn-primary.mw-magnetic { transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 1px)); }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .mw-root * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .mw-road-step { opacity: 1; }
  .mw-section-head h2::after { width: var(--stripe-w, 72px); transition: none; }
  /* Ankunfts-Finale ohne Scroll-Animation voll sichtbar */
  .mw-finale-glow, .mw-finale-eyebrow, .mw-finale-title, .mw-finale-sub, .mw-finale-cta { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   HELLE VARIANTE (Weiß + Orange) — nur unter .mw-hell-scope.
   Struktur 1:1 wie das dunkle Design, nur Farben getauscht:
   heller Grund, dunkle Schrift, weiße Felder mit orangen Akzenten.
   ============================================================ */
/* Body-Grund für ALLE hellen Seiten hell setzen (sonst blitzt der dunkle Default oben durch) */
body:has(.mw-hell-scope) { background-color: #f3e9d6; }
.mw-hell-scope .mw-root {
  --mw-bg: #f3e9d6; --mw-bg-2: #fffdf6; --mw-bg-3: #f6ebd5;
  --mw-line: rgba(34,20,10,0.10); --mw-line-strong: rgba(34,20,10,0.18);
  --mw-text: #211810; --mw-muted: #6c5d50;
}
.mw-hell-scope .mw-root::before {
  background:
    radial-gradient(1200px 640px at 84% -8%, rgba(242,103,28,0.10), transparent 60%),
    radial-gradient(1000px 560px at -8% 8%, rgba(233,178,90,0.09), transparent 58%);
}
/* Header / Menü / Footer / Scroll-Top hell */
.mw-hell-scope .mw-header.scrolled { background: rgba(255,250,244,0.90); border-bottom-color: var(--mw-line); }
.mw-hell-scope .mw-burger { background: rgba(34,20,10,0.05); border-color: var(--mw-line-strong); color: var(--mw-text); }
.mw-hell-scope .mw-menu { background: rgba(255,250,244,0.98); }
/* Desktop-Dropdown (Anlässe): heller Kasten statt fest-dunklem — sonst dunkle Schrift auf dunklem Grund */
.mw-hell-scope .mw-drop { background: rgba(255,250,244,0.98); border-color: var(--mw-line-strong); box-shadow: 0 26px 60px -26px rgba(34,20,10,.35); }
.mw-hell-scope .mw-footer { background: #fff6ec; }
.mw-hell-scope .mw-top { background: rgba(255,250,244,0.94); color: var(--mw-text); }
.mw-hell-scope .mw-cta-bar { background: rgba(255,250,244,0.95); border-top-color: var(--mw-line); }
/* Sektions-Hintergründe hell */
.mw-hell-scope .mw-section.alt { background: linear-gradient(180deg, rgba(242,103,28,.055), rgba(233,178,90,.04)); }
.mw-hell-scope .mw-section--glow { background: radial-gradient(900px 600px at 26% 46%, rgba(242,103,28,.13), transparent 62%), radial-gradient(640px 440px at 88% 48%, rgba(233,178,90,.1), transparent 66%); }
.mw-hell-scope .mw-ctaband { background-color: #fff6ec; background-image: linear-gradient(135deg, rgba(242,103,28,.14), rgba(255,247,238,.92)); border-color: rgba(242,103,28,.28); }
/* Orange gefüllte Buttons: Schrift bleibt weiß (sonst erbt sie die dunkle Hell-Textfarbe) */
.mw-hell-scope .mw-btn-primary,
.mw-hell-scope .mw-btn-whatsapp { color: #fff; }
/* Ghost-Buttons in der hellen Variante: orange Outline-Stil (Text + Rahmen + Icon orange) */
.mw-hell-scope .mw-btn-ghost {
  color: #e0560f;
  border-color: rgba(224,86,15,0.42);
  background: rgba(242,103,28,0.07);
}
.mw-hell-scope .mw-btn-ghost:hover {
  border-color: rgba(224,86,15,0.7);
  background: rgba(242,103,28,0.14);
  color: #c2440f;
}
/* Helle Variante: eigene Hexagon-Felder mit deutlich mehr WEISSEN Hexagons.
   Die Hover-Glut (::after) bleibt das gemeinsame orange Hot-Feld → Weiße leuchten beim Hovern orange auf. */
.mw-hell-scope .mw-hexbg { background-image: url("/images/mpu-westfalen/hexfield-hell.svg"); }
.mw-hell-scope .mw-road-hex { background-image: url("/images/mpu-westfalen/hexfield-road-hell.svg"); }
.mw-hell-scope .mw-hexedge.v1 { background-image: url("/images/mpu-westfalen/hexfield-edge-1-hell.svg"); }
.mw-hell-scope .mw-hexedge.v2 { background-image: url("/images/mpu-westfalen/hexfield-edge-2-hell.svg"); }
.mw-hell-scope .mw-hexedge.v3 { background-image: url("/images/mpu-westfalen/hexfield-edge-3-hell.svg"); }
.mw-hell-scope .mw-hexedge.v4 { background-image: url("/images/mpu-westfalen/hexfield-edge-4-hell.svg"); }
.mw-hell-scope .mw-hexedge.v5 { background-image: url("/images/mpu-westfalen/hexfield-edge-5-hell.svg"); }
.mw-hell-scope .mw-hexedge.v6 { background-image: url("/images/mpu-westfalen/hexfield-edge-6-hell.svg"); }
/* kräftig-orange markierte Cluster behalten auch in der hellen Variante das orange Feld (statt weiß) */
.mw-hell-scope .mw-hexedge--orange.v1 { background-image: url("/images/mpu-westfalen/hexfield-edge-1-hot.svg"); }
.mw-hell-scope .mw-hexedge--orange.v2 { background-image: url("/images/mpu-westfalen/hexfield-edge-2-hot.svg"); }
.mw-hell-scope .mw-hexedge--orange.v5 { background-image: url("/images/mpu-westfalen/hexfield-edge-5-hot.svg"); }
.mw-hell-scope .mw-hexedge--orange.v6 { background-image: url("/images/mpu-westfalen/hexfield-edge-6-hot.svg"); }
/* Felder WEISS mit dunkler Schrift + orangen Akzenten (statt orange gefüllt) */
.mw-hell-scope .mw-card,
.mw-hell-scope .mw-stat,
.mw-hell-scope .mw-faq-item,
.mw-hell-scope .mw-step-body,
.mw-hell-scope .mw-road-step-card {
  background: #ffffff; border-color: rgba(34,20,10,0.10); color: #211810;
  --mw-text: #211810; --mw-muted: #6c5d50; --mw-orange-light: #e0560f;
  box-shadow: 0 14px 34px -24px rgba(80,40,10,0.42);
}
.mw-hell-scope .mw-card h3, .mw-hell-scope .mw-step-body h3, .mw-hell-scope .mw-road-step-card h3 { color: #211810; }
.mw-hell-scope .mw-card p, .mw-hell-scope .mw-step-body p, .mw-hell-scope .mw-road-step-card p { color: #6c5d50; }
/* Blog-Karten hell: weiße Karte, dunkle Schrift */
.mw-hell-scope .mw-blogcard {
  background: #ffffff; border-color: rgba(34,20,10,0.10);
  --mw-muted: #6c5d50; --mw-orange-light: #e0560f;
  box-shadow: 0 14px 34px -24px rgba(80,40,10,0.42);
}
.mw-hell-scope .mw-blogcard-body h3 { color: #211810; }
.mw-hell-scope .mw-blogcard-body p { color: #6c5d50; }
.mw-hell-scope .mw-card-icon { background: linear-gradient(135deg, rgba(242,103,28,.16), rgba(233,178,90,.1)); border-color: rgba(242,103,28,.3); color: #e0560f; }
.mw-hell-scope .mw-stat-num { color: #e0560f; }
.mw-hell-scope .mw-stat-lbl { color: #6c5d50; }
.mw-hell-scope .mw-stat-ico { background: rgba(242,103,28,.12); color: #e0560f; box-shadow: none; }
.mw-hell-scope .mw-stat-stars { color: #f0a500; text-shadow: none; }
.mw-hell-scope .mw-faq-q { color: #211810; }
.mw-hell-scope .mw-faq-q svg { color: #e0560f; }
.mw-hell-scope .mw-faq-a-inner { color: #6c5d50; }
.mw-hell-scope .mw-num { color: #e0560f; }
.mw-hell-scope .mw-road-step-badge { color: #6c5d50; }
/* helle Variante: Schritt-Karten immer sichtbar (kein Opacity-Reveal, sonst weiß-auf-weiß unsichtbar) */
.mw-hell-scope .mw-road-step { opacity: 1; }
/* erreichter Schritt: oranger Akzent statt voller Füllung */
.mw-hell-scope .mw-road-step.lit .mw-road-step-card { border-color: rgba(242,103,28,.5); box-shadow: 0 16px 42px -16px rgba(242,103,28,.5); }
.mw-hell-scope .mw-road-step.lit .mw-road-step-badge { color: #e0560f; }
/* Tilt-Glow (Desktop) hell */
.mw-hell-scope .mw-card.mw-tilting { background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(242,103,28,.1), transparent 55%), #ffffff; }
/* Standort-Karte hell lassen (kein Dark-Map-Invert) */
.mw-hell-scope .mw-split-media--map img { filter: saturate(.92) contrast(1.02); }
/* Portal-Mockup hell: weißes Fenster, dunkle Schrift */
.mw-hell-scope .mw-portal-window { background: #fffdf6; border-color: rgba(34,20,10,.14); box-shadow: 0 30px 70px -34px rgba(80,40,10,.4); }
.mw-hell-scope .mw-portal-bar { background: rgba(34,20,10,.03); }
.mw-hell-scope .mw-portal-bar .dot { background: rgba(34,20,10,.16); }
.mw-hell-scope .mw-portal-bar .dot:first-child { background: var(--mw-orange); }
.mw-hell-scope .mw-portal-url { background: #fff; }
.mw-hell-scope .mw-portal-ring i { background: #fffdf6; }
.mw-hell-scope .mw-portal-progress { background: rgba(34,20,10,.08); }
.mw-hell-scope .mw-portal-modules li { background: #ffffff; }
.mw-hell-scope .mw-portal-termin { background: linear-gradient(135deg, rgba(242,103,28,.12), rgba(233,178,90,.07)); }
.mw-hell-scope .mw-split-media--map::after { background: linear-gradient(135deg, rgba(242,103,28,.16), transparent 46%), radial-gradient(130% 128% at 50% 45%, transparent 60%, rgba(255,247,238,.55) 100%); }
/* Mobil: Schritt-Karten hell halten (Basis-Mobilregel setzte sie dunkel) */
@media (max-width: 700px) {
  .mw-hell-scope .mw-road-step-card { background: #ffffff; color: #211810; }
  .mw-hell-scope .mw-road-step.lit .mw-road-step-card { background: linear-gradient(150deg, #fff, #fff2e6); }
}

/* ============================================================
   ÜBER UNS: Hero mit Jan im Vollbild (Parallax) + Standortkarte
   ============================================================ */

/* Höherer, ruhigerer Hero. Das Bild ist eine helle Aquarell-Illustration,
   deshalb ein eigener, warm getönter Verlauf statt des harten Standard-Overlays:
   links dunkel (Text lesbar), rechts fast frei (Jan bleibt hell). */
.mw-hero-jan { padding: 150px 0 76px; min-height: clamp(560px, 78vh, 780px); display: flex; align-items: center; }
/* Y bewusst hoch: sonst schneidet der Zuschnitt Jans Kopf oben ab */
.mw-hero-media-jan img { object-position: 76% 24%; }
.mw-hero-media-jan::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(23,18,12,.97) 0%, rgba(23,18,12,.93) 34%, rgba(23,18,12,.62) 60%, rgba(23,18,12,.22) 100%),
    linear-gradient(180deg, rgba(23,18,12,.72) 0%, rgba(23,18,12,.18) 26%, rgba(23,18,12,.10) 58%, rgba(23,18,12,.92) 100%);
}
.mw-hero-jan-h1 { max-width: 15ch; }
.mw-hero-jan-lead { max-width: 56ch; }
.mw-hero-jan .mw-trustrow { margin-top: 30px; }

/* Mobil: Bild rückt hinter einen kräftigeren Schleier, sonst steht der Text
   direkt auf Jans Gesicht und wird unlesbar. */
@media (max-width: 900px) {
  .mw-hero-jan { padding: 120px 0 56px; min-height: 0; }
  .mw-hero-media-jan img { object-position: 68% top; }
  .mw-hero-media-jan::after {
    background:
      linear-gradient(180deg, rgba(23,18,12,.80) 0%, rgba(23,18,12,.86) 38%, rgba(23,18,12,.94) 72%, rgba(23,18,12,.99) 100%),
      linear-gradient(90deg, rgba(23,18,12,.72), rgba(23,18,12,.34));
  }
  .mw-hero-jan-h1 { max-width: none; }
}

/* ---------- Standort: links Wege, rechts Karte ---------- */
.mw-standort {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 18px; align-items: stretch; margin-top: 40px;
}
@media (max-width: 860px) { .mw-standort { grid-template-columns: 1fr; } }

.mw-standort-info {
  background: linear-gradient(160deg, rgba(255,240,230,.055), rgba(255,240,230,.015));
  border: 1px solid var(--mw-line-strong); border-radius: 20px;
  padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column;
}
.mw-standort-adr { color: var(--mw-muted); margin-top: 12px !important; line-height: 1.7; }
.mw-standort-adr strong { color: var(--mw-text); }

.mw-standort-links { display: flex; flex-direction: column; gap: 8px; margin: 22px 0 0; }
.mw-standort-link {
  display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 13px;
  border: 1px solid transparent; color: var(--mw-text);
}
.mw-standort-link .ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(242,103,28,.13); color: var(--mw-orange-light); border: 1px solid rgba(242,103,28,.22);
}
.mw-standort-link b { display: block; font-size: .95rem; font-weight: 700; line-height: 1.25; }
.mw-standort-link small { display: block; font-size: .8rem; color: var(--mw-muted); }
@media (min-width: 1024px) {
  .mw-standort-link { transition: border-color .16s, background .16s, transform .16s; }
  .mw-standort-link:hover { border-color: var(--mw-line-strong); background: rgba(255,240,230,.04); transform: translateX(3px); }
}
.mw-standort-route { margin-top: auto; padding-top: 0; align-self: flex-start; }
.mw-standort-info .mw-standort-route { margin-top: 24px; }

/* ---------- Karte + Zwei-Klick-Gate ---------- */
.mw-standort-map {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--mw-line-strong); background: var(--mw-bg-2);
  min-height: 380px;
}
@media (max-width: 860px) { .mw-standort-map { min-height: 320px; } }
.mw-standort-map iframe { filter: saturate(.9) contrast(1.03); }

.mw-map-gate {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 26px; text-align: center; cursor: pointer;
  border: 0; background: radial-gradient(120% 110% at 50% 40%, rgba(242,103,28,.14), transparent 62%), var(--mw-bg-2);
  color: var(--mw-text); font: inherit; overflow: hidden;
}
/* angedeutetes Kartenraster im Hintergrund, rein dekorativ (kein Google-Aufruf) */
.mw-map-grid {
  position: absolute; inset: -1px; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,240,230,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,240,230,.07) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 45%, #000 30%, transparent 78%);
}
.mw-map-pin {
  position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 8px;
  background: rgba(242,103,28,.16); border: 1px solid rgba(242,103,28,.3); color: var(--mw-orange-light);
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .mw-map-pin::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 1px solid rgba(242,103,28,.35); animation: mwPing 2.6s ease-out infinite;
  }
  @keyframes mwPing { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
}
.mw-map-gate-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mw-map-gate-body b { font-size: 1rem; font-weight: 700; }
.mw-map-cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px;
  background: var(--mw-orange); color: #fff; font-weight: 700; font-size: .9rem;
  box-shadow: 0 12px 28px -12px var(--mw-glow);
}
@media (min-width: 1024px) {
  .mw-map-cta { transition: filter .16s, transform .16s; }
  .mw-map-gate:hover .mw-map-cta { filter: brightness(1.06); transform: translateY(-1px); }
}
.mw-map-gate-body small {
  display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--mw-muted); max-width: 34ch; line-height: 1.5;
}

/* Helle Variante */
.mw-hell-scope .mw-standort-info { background: #fff; border-color: rgba(34,20,10,.12); box-shadow: 0 14px 34px -24px rgba(80,40,10,.42); }
.mw-hell-scope .mw-standort-map { background: #f6efe6; border-color: rgba(34,20,10,.12); }
.mw-hell-scope .mw-map-gate { background: radial-gradient(120% 110% at 50% 40%, rgba(242,103,28,.12), transparent 62%), #f6efe6; color: #211810; }
.mw-hell-scope .mw-map-grid { background-image: linear-gradient(rgba(34,20,10,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(34,20,10,.07) 1px, transparent 1px); }
.mw-hell-scope .mw-standort-link { color: #211810; }
.mw-hell-scope .mw-standort-link:hover { background: rgba(34,20,10,.03); border-color: rgba(34,20,10,.12); }

/* ============================================================
   KOSTEN: ehrliche Antwort, Gegenüberstellung, Geldfluss
   ============================================================ */

.mw-kosten-hero { padding: 130px 0 70px; }

/* Die große ehrliche Antwort direkt im Hero */
.mw-antwort {
  max-width: 780px; margin: 40px auto 0; text-align: center;
  padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 46px);
  border-radius: 24px; position: relative; overflow: hidden;
  background: linear-gradient(165deg, rgba(242,103,28,.11), rgba(255,240,230,.03));
  border: 1px solid rgba(242,103,28,.26);
}
.mw-antwort::before {
  content: ''; position: absolute; top: -80px; right: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(242,103,28,.20), transparent 70%);
  filter: blur(26px); pointer-events: none;
}
.mw-antwort > * { position: relative; z-index: 1; }
.mw-antwort-label {
  display: inline-block; font-family: ui-monospace, monospace; font-size: .7rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--mw-orange-light);
}
.mw-antwort-satz {
  margin-top: 14px !important; font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 700; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--mw-text);
}
.mw-antwort-sub { margin-top: 16px !important; color: var(--mw-muted); max-width: 60ch; margin-left: auto; margin-right: auto; }
.mw-antwort-row {
  margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: center;
  padding-top: 22px; border-top: 1px solid var(--mw-line);
}

/* Gegenüberstellung: zu hoch oder zu tief */
.mw-warum {
  margin-top: 40px; display: grid; gap: 16px; align-items: stretch;
  grid-template-columns: 1fr auto 1fr;
}
@media (max-width: 800px) { .mw-warum { grid-template-columns: 1fr; } }
.mw-warum-karte {
  padding: clamp(22px, 3vw, 30px); border-radius: 18px;
  background: rgba(255,240,230,.04); border: 1px solid var(--mw-line-strong);
}
.mw-warum-karte p { color: var(--mw-muted); margin-top: 8px !important; }
.mw-warum-ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px;
  background: rgba(255,240,230,.06); border: 1px solid var(--mw-line-strong); color: var(--mw-muted);
}
.mw-warum-ico.hoch { color: #e9b25a; border-color: rgba(233,178,90,.3); background: rgba(233,178,90,.1); }
.mw-warum-ico.tief { color: #d98a6a; border-color: rgba(217,138,106,.3); background: rgba(217,138,106,.1); }
.mw-warum-vs {
  align-self: center; font-family: ui-monospace, monospace; font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--mw-muted);
  padding: 9px 12px; border-radius: 999px; border: 1px solid var(--mw-line-strong); background: var(--mw-bg);
}
/* .mw-root p { margin: 0 } ist spezifischer als eine einzelne Klasse und würde
   das auto-Zentrieren killen, deshalb hier bewusst erhöhte Spezifität. */
.mw-root p.mw-warum-fazit {
  margin: 30px auto 0; max-width: 68ch; text-align: center; color: var(--mw-text);
  font-size: 1.06rem; line-height: 1.6;
}

/* Faktoren als Zeilen statt Kachelwand */
.mw-faktoren { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.mw-faktor {
  display: grid; grid-template-columns: auto auto 1fr; gap: 18px; align-items: center;
  padding: 20px clamp(18px, 2.4vw, 26px); border-radius: 16px;
  background: rgba(255,240,230,.035); border: 1px solid var(--mw-line);
}
@media (min-width: 1024px) {
  .mw-faktor { transition: border-color .18s, background .18s, transform .18s; }
  .mw-faktor:hover { border-color: rgba(242,103,28,.34); background: rgba(242,103,28,.05); transform: translateX(4px); }
}
@media (max-width: 620px) {
  .mw-faktor { grid-template-columns: auto 1fr; gap: 12px 14px; }
  .mw-faktor-ico { display: none; }
}
.mw-faktor-num {
  font-family: Georgia, serif; font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: rgba(242,103,28,.42); min-width: 2ch;
}
.mw-faktor-ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(242,103,28,.11); border: 1px solid rgba(242,103,28,.2); color: var(--mw-orange-light);
}
.mw-faktor-txt p { color: var(--mw-muted); margin-top: 5px !important; font-size: .95rem; }

/* Geldfluss: vier Töpfe, einer davon sind wir */
.mw-flow {
  margin-top: 40px; display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1000px) { .mw-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mw-flow { grid-template-columns: 1fr; } }
.mw-topf {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 22px 22px; border-radius: 18px;
  background: rgba(255,240,230,.03); border: 1px dashed var(--mw-line-strong);
}
.mw-topf p { color: var(--mw-muted); font-size: .88rem; margin-top: 10px !important; }
.mw-topf-ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px;
  background: rgba(255,240,230,.05); border: 1px solid var(--mw-line-strong); color: var(--mw-muted);
}
.mw-topf-was { font-size: 1rem; font-weight: 700; color: var(--mw-text); }
.mw-topf-an {
  display: block; margin: 8px 0 3px; font-family: ui-monospace, monospace; font-size: .66rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mw-muted);
}
.mw-topf-empf { font-size: .98rem; font-weight: 800; letter-spacing: -0.01em; color: var(--mw-muted); }

/* Unser Topf: der einzige, der hervorsticht */
.mw-topf.uns {
  background: linear-gradient(170deg, rgba(242,103,28,.14), rgba(242,103,28,.04));
  border: 1px solid rgba(242,103,28,.42);
  box-shadow: 0 22px 50px -30px var(--mw-glow);
}
.mw-topf.uns .mw-topf-ico { background: rgba(242,103,28,.18); border-color: rgba(242,103,28,.36); color: var(--mw-orange-light); }
.mw-topf.uns .mw-topf-empf { color: var(--mw-text); }
.mw-topf-flag {
  position: absolute; top: -10px; left: 22px;
  padding: 4px 12px; border-radius: 999px; background: var(--mw-orange); color: #fff;
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 8px 20px -8px var(--mw-glow);
}

/* Helle Variante */
.mw-hell-scope .mw-antwort { background: linear-gradient(165deg, #fff6ee, #fff); border-color: rgba(242,103,28,.26); }
.mw-hell-scope .mw-antwort-satz { color: #211810; }
.mw-hell-scope .mw-warum-karte,
.mw-hell-scope .mw-faktor,
.mw-hell-scope .mw-topf { background: #fff; border-color: rgba(34,20,10,.12); }
.mw-hell-scope .mw-warum-vs { background: #f6efe6; border-color: rgba(34,20,10,.12); }
.mw-hell-scope .mw-warum-fazit { color: #211810; }
.mw-hell-scope .mw-topf.uns { background: linear-gradient(170deg, #fff3e8, #fff); border-color: rgba(242,103,28,.42); }
.mw-hell-scope .mw-topf.uns .mw-topf-empf { color: #211810; }

/* ============================================================
   ABLAUF: Ihr Weg mit uns (Kontakt bis Vorbereitung) + Login
   ============================================================ */

.mw-weg { position: relative; margin-top: 42px; display: flex; flex-direction: column; gap: 14px; }
/* durchgehende Linie hinter den Nummern */
.mw-weg-track {
  position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; z-index: 0;
  background: linear-gradient(180deg, rgba(242,103,28,.5), rgba(242,103,28,.18), rgba(242,103,28,.5));
}
@media (max-width: 620px) { .mw-weg-track { left: 17px; } }

.mw-weg-step { position: relative; z-index: 1; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
@media (max-width: 620px) { .mw-weg-step { grid-template-columns: 36px 1fr; gap: 12px; } }

.mw-weg-node {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; color: var(--mw-text);
  background: var(--mw-bg-2); border: 2px solid rgba(242,103,28,.42);
}
@media (max-width: 620px) { .mw-weg-node { width: 36px; height: 36px; font-size: .92rem; } }

.mw-weg-card {
  padding: 20px clamp(18px, 2.4vw, 24px); border-radius: 16px;
  background: rgba(255,240,230,.035); border: 1px solid var(--mw-line);
}
.mw-weg-card p { color: var(--mw-muted); margin-top: 9px !important; font-size: .95rem; }
@media (min-width: 1024px) {
  .mw-weg-card { transition: border-color .18s, background .18s; }
  .mw-weg-step:hover .mw-weg-card { border-color: rgba(242,103,28,.3); background: rgba(242,103,28,.045); }
}
.mw-weg-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mw-weg-head .mw-h3 { margin: 0; }
.mw-weg-ico {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(242,103,28,.11); border: 1px solid rgba(242,103,28,.2); color: var(--mw-orange-light);
}
/* Die zwei Schritte, die im Portal passieren, heben sich ab */
.mw-weg-tag {
  margin-left: auto; padding: 4px 11px; border-radius: 999px;
  background: rgba(242,103,28,.15); border: 1px solid rgba(242,103,28,.34); color: var(--mw-orange-light);
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.mw-weg-step.portal .mw-weg-node { border-color: var(--mw-orange); box-shadow: 0 0 0 4px rgba(242,103,28,.13); }
.mw-weg-step.portal .mw-weg-card { border-color: rgba(242,103,28,.28); background: rgba(242,103,28,.05); }

.mw-weg-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.mw-weg-chip {
  padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  color: var(--mw-muted); background: rgba(255,240,230,.05); border: 1px solid var(--mw-line-strong);
}

/* Login-Kasten: ein Eingang für Kundschaft und Berater */
.mw-loginbox {
  margin-top: 34px; display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 3vw, 40px);
  align-items: center; padding: clamp(24px, 3.4vw, 36px); border-radius: 22px;
  background: linear-gradient(150deg, rgba(242,103,28,.10), rgba(255,240,230,.03));
  border: 1px solid rgba(242,103,28,.26);
}
@media (max-width: 820px) { .mw-loginbox { grid-template-columns: 1fr; } }
.mw-loginbox-txt p { color: var(--mw-muted); margin-top: 9px !important; max-width: 54ch; }
.mw-loginbox-cta { display: flex; flex-direction: column; gap: 11px; align-items: stretch; min-width: 250px; }
.mw-loginbox-cta .mw-btn { justify-content: center; }
.mw-loginbox-hint { font-size: .78rem; color: var(--mw-muted); text-align: center; line-height: 1.5; max-width: 28ch; margin: 0 auto; }

/* Helle Variante */
.mw-hell-scope .mw-weg-node { background: #fff; }
.mw-hell-scope .mw-weg-card { background: #fff; border-color: rgba(34,20,10,.12); }
.mw-hell-scope .mw-weg-step.portal .mw-weg-card { background: #fff7f0; }
.mw-hell-scope .mw-weg-chip { background: #f6efe6; border-color: rgba(34,20,10,.12); }
.mw-hell-scope .mw-loginbox { background: linear-gradient(150deg, #fff3e8, #fff); border-color: rgba(242,103,28,.26); }

/* ============================================================
   ANLASS-KARTEN (Startseite): 5 Anlässe, Cannabis eigenständig
   ============================================================ */

/* 3 + 2 statt starrer Reihen: die erste Reihe trägt drei Karten,
   die zweite zwei breitere. Wirkt geordnet statt „Rest übrig". */
.mw-anlass-grid {
  display: grid; gap: 16px; margin-top: 40px;
  grid-template-columns: repeat(6, 1fr);
}
.mw-anlass-card { grid-column: span 2; }
/* die letzten beiden Karten teilen sich die Reihe zu dritteln */
.mw-anlass-card:nth-child(4), .mw-anlass-card:nth-child(5) { grid-column: span 3; }
@media (max-width: 900px) {
  .mw-anlass-grid { grid-template-columns: repeat(2, 1fr); }
  .mw-anlass-card, .mw-anlass-card:nth-child(4), .mw-anlass-card:nth-child(5) { grid-column: span 1; }
  /* ungerade Anzahl: die letzte Karte über die volle Breite */
  .mw-anlass-card:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .mw-anlass-grid { grid-template-columns: 1fr; }
  .mw-anlass-card, .mw-anlass-card:nth-child(4), .mw-anlass-card:nth-child(5),
  .mw-anlass-card:last-child:nth-child(odd) { grid-column: span 1; }
}

.mw-anlass-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 28px 26px 24px; border-radius: 20px;
  background: linear-gradient(165deg, rgba(255,240,230,.05), rgba(255,240,230,.02));
  border: 1px solid var(--mw-line-strong); color: inherit;
}
.mw-anlass-card p { color: var(--mw-muted); margin-top: 9px !important; font-size: .95rem; }
/* dezente laufende Nummer, rein grafisch */
.mw-anlass-num {
  position: absolute; top: 16px; right: 22px; pointer-events: none;
  font-family: Georgia, serif; font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: rgba(242,103,28,.13);
}
.mw-anlass-tag {
  display: inline-block; margin: 16px 0 10px; padding: 4px 11px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mw-orange-light); background: rgba(242,103,28,.12); border: 1px solid rgba(242,103,28,.22);
  align-self: flex-start;
}
.mw-anlass-link {
  margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 7px;
  color: var(--mw-orange-light); font-weight: 700; font-size: .92rem;
}
@media (min-width: 1024px) {
  .mw-anlass-card { transition: border-color .2s, transform .2s, box-shadow .2s, background .2s; }
  .mw-anlass-card:hover {
    border-color: rgba(242,103,28,.45); transform: translateY(-4px);
    background: linear-gradient(165deg, rgba(242,103,28,.09), rgba(255,240,230,.02));
    box-shadow: 0 26px 56px -32px var(--mw-glow);
  }
  .mw-anlass-card .mw-anlass-link svg { transition: transform .2s; }
  .mw-anlass-card:hover .mw-anlass-link svg { transform: translateX(4px); }
  .mw-anlass-card:hover .mw-anlass-num { color: rgba(242,103,28,.24); }
}

/* Helle Variante */
.mw-hell-scope .mw-anlass-card { background: #fff; border-color: rgba(34,20,10,.12); box-shadow: 0 14px 34px -26px rgba(80,40,10,.4); }
.mw-hell-scope .mw-anlass-card:hover { background: linear-gradient(165deg, #fff7f0, #fff); }
.mw-hell-scope .mw-anlass-num { color: rgba(242,103,28,.16); }

/* ============================================================
   VORTEILE („Warum wir"): 2x2 mit großer Ziffer als Gestaltung
   ============================================================ */

.mw-vorteile {
  margin-top: 40px; display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 820px) { .mw-vorteile { grid-template-columns: 1fr; } }

.mw-vorteil {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  padding: 30px 30px 28px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,240,230,.05), rgba(255,240,230,.015));
  border: 1px solid var(--mw-line-strong);
}
@media (max-width: 560px) { .mw-vorteil { padding: 24px 22px; gap: 16px; } }
.mw-vorteil p { color: var(--mw-muted); margin-top: 9px !important; font-size: .95rem; }

/* Die römische Ziffer ist Deko, kein Text: groß, nur Kontur, oben rechts.
   Der Textblock bekommt rechts Luft (padding-right), damit nichts überlappt. */
.mw-vorteil-num {
  position: absolute; right: 22px; top: 14px; pointer-events: none; user-select: none;
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-style: italic;
  font-size: 3.4rem; line-height: 1; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.2px rgba(242,103,28,.30);
}
@media (max-width: 560px) { .mw-vorteil-num { font-size: 2.6rem; right: 16px; } }

.mw-vorteil-ico {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(242,103,28,.12); border: 1px solid rgba(242,103,28,.24); color: var(--mw-orange-light);
}
/* padding-right hält den Text von der Deko-Ziffer oben rechts frei */
.mw-vorteil-txt { position: relative; z-index: 1; min-width: 0; padding-right: 54px; }
@media (max-width: 560px) { .mw-vorteil-txt { padding-right: 42px; } }

@media (min-width: 1024px) {
  .mw-vorteil { transition: border-color .2s, transform .2s, box-shadow .2s, background .2s; }
  .mw-vorteil:hover {
    border-color: rgba(242,103,28,.42); transform: translateY(-3px);
    background: linear-gradient(160deg, rgba(242,103,28,.09), rgba(255,240,230,.02));
    box-shadow: 0 24px 52px -32px var(--mw-glow);
  }
  .mw-vorteil-num { transition: -webkit-text-stroke-color .2s, transform .2s; }
  .mw-vorteil:hover .mw-vorteil-num { -webkit-text-stroke-color: rgba(242,103,28,.34); transform: translateY(-3px); }
}

/* Helle Variante */
.mw-hell-scope .mw-vorteil { background: #fff; border-color: rgba(34,20,10,.12); box-shadow: 0 14px 34px -26px rgba(80,40,10,.4); }
.mw-hell-scope .mw-vorteil:hover { background: linear-gradient(160deg, #fff7f0, #fff); }
.mw-hell-scope .mw-vorteil-num { -webkit-text-stroke-color: rgba(242,103,28,.22); }

/* --- Neue Bausteine innerhalb einer hellen Kontrast-Insel ---
   .mw-section--light stellt nur die Farbvariablen um. Diese Karten nutzen aber
   halbtransparentes Weiß als Grund, das auf Creme fast verschwindet. Deshalb
   hier echte weiße Karten, damit sie sich abheben (wie .mw-blogcard).

   ACHTUNG: .mw-card und .mw-step-body sind hier BEWUSST NICHT dabei. Das sind
   ORANGE Karten mit weißer Schrift (sie setzen --mw-text: #fff selbst). Wer
   ihnen einen weißen Grund gibt, macht die Schrift unsichtbar — genau das ist
   hier einmal passiert. Orange auf Creme ist ohnehin der bessere Kontrast. */
.mw-section--light .mw-faktor,
.mw-section--light .mw-vorteil,
.mw-section--light .mw-anlass-card,
.mw-section--light .mw-weg-card,
.mw-section--light .mw-warum-karte,
.mw-section--light .mw-topf {
  background: #ffffff;
  border-color: rgba(34,20,10,.1);
  box-shadow: 0 14px 34px -26px rgba(80,40,10,.45);
}

/* Innerhalb der orangen Karten gilt weiter Weiß. Die Überschriften-Regel der
   hellen Insel ist spezifischer als .mw-card h3 und würde sonst dunkle Schrift
   auf Orange erzwingen. */
.mw-section--light .mw-card,
.mw-section--light .mw-step-body { color: #fff; }
.mw-section--light .mw-card h3,
.mw-section--light .mw-card .mw-h3,
.mw-section--light .mw-card strong,
.mw-section--light .mw-step-body h3,
.mw-section--light .mw-step-body .mw-h3 { color: #fff; }
.mw-section--light .mw-card p,
.mw-section--light .mw-card .mw-muted,
.mw-section--light .mw-step-body p { color: rgba(255,255,255,.92); }
.mw-section--light .mw-topf { border-style: dashed; }
.mw-section--light .mw-topf.uns {
  background: linear-gradient(170deg, #fff3e8, #fff);
  border-style: solid; border-color: rgba(242,103,28,.42);
}
.mw-section--light .mw-weg-node { background: #ffffff; }
.mw-section--light .mw-weg-chip { background: #f6efe6; border-color: rgba(34,20,10,.12); }
.mw-section--light .mw-warum-vs { background: #f6efe6; border-color: rgba(34,20,10,.14); }
/* Icon-Flächen bleiben orange getönt, brauchen auf Weiß aber etwas mehr Kontrast.
   .mw-card-icon ist NICHT dabei: das Icon sitzt in der orangen Karte und ist
   dort weiß auf hellem Overlay. */
.mw-section--light .mw-faktor-ico,
.mw-section--light .mw-vorteil-ico,
.mw-section--light .mw-weg-ico { background: rgba(242,103,28,.10); border-color: rgba(242,103,28,.26); color: #d4520c; }

/* ============================================================
   ONLINE-VORBEREITUNG: Hero mit rotierendem Globus rechts
   ============================================================ */

.mw-online-hero { padding: 130px 0 70px; }
/* minmax(0, 1fr) statt 1fr: Ein blankes 1fr ist minmax(AUTO, 1fr) und kann
   deshalb nicht unter die Mindestbreite seines Inhalts schrumpfen. Der Globus
   ist fest 360 px breit, dadurch wurde die Spalte auf schmalen Handys 360 px
   breit und Überschrift plus Text ragten aus dem Bild. Wegen overflow-x: clip
   am Wurzelelement gab es dabei KEINEN Scrollbalken, der Text war einfach
   abgeschnitten. Genau deshalb reicht eine reine scrollWidth-Prüfung nicht. */
.mw-online-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 56px); align-items: center;
}
@media (min-width: 1000px) {
  .mw-online-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.mw-online-hero .mw-trustrow { margin-top: 26px; }

.mw-online-hero-globe { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mw-globe-caption {
  font-family: ui-monospace, monospace; font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mw-muted); text-align: center;
}

/* ---------- Globus ---------- */
/* min(...) statt fester Breite: der Globus schrumpft auf schmalen Geräten mit,
   statt die Rasterspalte auseinanderzudrücken. */
.mw-globe {
  position: relative; width: min(var(--globe-size, 340px), 100%);
  aspect-ratio: 1; display: grid; place-items: center;
}
.mw-globe-svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* warmer Schein hinter der Kugel, damit sie im dunklen Grund schwebt */
.mw-globe-aura {
  position: absolute; inset: -12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(242,103,28,.30), rgba(242,103,28,.07) 55%, transparent 70%);
  filter: blur(26px);
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .mw-globe-aura { animation: mwGlobePulse 7s ease-in-out infinite; }
  @keyframes mwGlobePulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
}

/* Standort-Marker: Essen leuchtet, die anderen sind ruhiger */
.mw-globe-ring { fill: none; stroke: rgba(255,180,120,.55); stroke-width: .7; }
.mw-globe-ring.home { stroke: #ffb083; stroke-width: 1.1; }
.mw-globe-dot { fill: #ffd0ab; }
.mw-globe-dot.home { fill: #fff; }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .mw-globe-ring.home { animation: mwGlobePing 2.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes mwGlobePing {
    0%   { transform: scale(.7); opacity: 1; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
  }
}

/* Helle Variante */
.mw-hell-scope .mw-globe-aura { background: radial-gradient(circle, rgba(242,103,28,.22), transparent 70%); }
.mw-hell-scope .mw-globe-caption { color: #6c5d50; }

/* ============================================================
   ANLASS-SEITEN: Vertrauensband + Abschluss-Block
   ============================================================ */

/* Schmales Band direkt unter dem Hero. Nimmt sofort die Angst, bevor der
   Besucher überhaupt anfängt zu lesen. */
.mw-anlass-bar {
  border-top: 1px solid var(--mw-line);
  border-bottom: 1px solid var(--mw-line);
  background: linear-gradient(90deg, rgba(242,103,28,.07), rgba(242,103,28,.03) 50%, rgba(242,103,28,.07));
}
.mw-anlass-bar-in {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 30px; padding: 16px 0;
}
@media (max-width: 900px) { .mw-anlass-bar-in { justify-content: flex-start; } }
.mw-anlass-bar .mw-trust svg { color: var(--mw-orange-light); flex: 0 0 auto; }

/* Abschluss nach dem langen Lesetext: klarer Ausweg statt Sackgasse */
.mw-anlass-next {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(22px, 3.5vw, 46px); align-items: center;
  padding: clamp(26px, 3.6vw, 40px); border-radius: 22px;
  background: linear-gradient(150deg, rgba(242,103,28,.10), rgba(255,240,230,.03));
  border: 1px solid rgba(242,103,28,.26);
}
@media (max-width: 900px) { .mw-anlass-next { grid-template-columns: 1fr; } }
.mw-anlass-next-cta { display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.mw-anlass-next-cta .mw-btn { justify-content: center; }

/* Helle Variante */
.mw-hell-scope .mw-anlass-bar { background: linear-gradient(90deg, #fff3e8, #fffaf5 50%, #fff3e8); border-color: rgba(34,20,10,.1); }
.mw-hell-scope .mw-anlass-next { background: linear-gradient(150deg, #fff3e8, #fff); border-color: rgba(242,103,28,.26); }

/* --- Lesbarkeit in hellen Inseln nachgeschärft ---
   Gemessen (WCAG-Kontrast gegen den echten Creme-Grund), nicht geschätzt. */

/* Eyebrow und Textlinks: --mw-orange-light (#e0560f) erreicht auf Creme nur
   3,25:1, nötig sind 4,5:1 für kleine Schrift. Deshalb hier ein tieferes
   Orange, das die Marke hält und den Wert erreicht. */
.mw-section--light .mw-eyebrow,
.mw-section--light .mw-prose a,
.mw-section--light .mw-blogcard .more,
.mw-section--light .mw-anlass-link { color: #9c3c06; }

/* Orange Karten: Der hellste Verlaufsanfang (#ff8a3d) trug weiße Schrift mit
   nur 2,35:1. Start jetzt beim Marken-Orange, dadurch steigt der schlechteste
   Punkt spürbar und die Karte bleibt trotzdem klar orange. */
.mw-section--light .mw-card,
.mw-section--light .mw-step-body {
  background: linear-gradient(150deg, #f2671c 0%, #d4520c 58%, #b8440a 100%);
}
/* Fließtext auf den orangen Karten etwas kräftiger, das hilft zusätzlich */
.mw-section--light .mw-card p,
.mw-section--light .mw-step-body p { color: #fff; font-weight: 500; }

/* ============================================================
   STANDORT ESSEN: Anfahrt, echte Raumbilder, Einzugsgebiet
   ============================================================ */

.mw-essen-hero { padding: 130px 0 66px; }

/* ---------- Anfahrt: drei Wege ---------- */
.mw-anfahrt {
  margin-top: 40px; display: grid; gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) { .mw-anfahrt { grid-template-columns: 1fr; } }
.mw-anfahrt-karte {
  position: relative; padding: 28px 26px 24px; border-radius: 20px;
  background: linear-gradient(165deg, rgba(255,240,230,.05), rgba(255,240,230,.02));
  border: 1px solid var(--mw-line-strong);
}
.mw-anfahrt-karte p { color: var(--mw-muted); margin-top: 9px !important; font-size: .95rem; }
.mw-anfahrt-ico {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;
  background: rgba(242,103,28,.12); border: 1px solid rgba(242,103,28,.24); color: var(--mw-orange-light);
}
.mw-anfahrt-tag {
  position: absolute; top: -10px; right: 22px; padding: 4px 12px; border-radius: 999px;
  background: var(--mw-orange); color: #fff; font-size: .66rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 8px 20px -8px var(--mw-glow);
}
@media (min-width: 1024px) {
  .mw-anfahrt-karte { transition: border-color .2s, transform .2s, background .2s; }
  .mw-anfahrt-karte:hover { border-color: rgba(242,103,28,.4); transform: translateY(-3px); background: linear-gradient(165deg, rgba(242,103,28,.09), rgba(255,240,230,.02)); }
}

.mw-essen-karte { margin-top: 26px; border-radius: 20px; overflow: hidden; }

/* Kontaktzeile unter der Karte */
.mw-essen-kontakt {
  margin-top: 16px; display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 760px) { .mw-essen-kontakt { grid-template-columns: 1fr; } }
.mw-essen-kontakt-item {
  display: flex; align-items: center; gap: 13px; padding: 15px 18px; border-radius: 15px;
  border: 1px solid var(--mw-line); background: rgba(255,240,230,.035); color: var(--mw-text);
}
.mw-essen-kontakt-item .ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(242,103,28,.12); border: 1px solid rgba(242,103,28,.22); color: var(--mw-orange-light);
}
.mw-essen-kontakt-item b { display: block; font-size: .95rem; line-height: 1.25; }
.mw-essen-kontakt-item small { display: block; font-size: .8rem; color: var(--mw-muted); }
@media (min-width: 1024px) {
  a.mw-essen-kontakt-item { transition: border-color .16s, transform .16s; }
  a.mw-essen-kontakt-item:hover { border-color: rgba(242,103,28,.36); transform: translateY(-2px); }
}

/* ---------- Raum-Galerie: Mosaik aus echten Fotos ---------- */
.mw-raeume {
  margin-top: 40px; display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px;
}
.mw-raum { margin: 0; border-radius: 18px; overflow: hidden; position: relative; background: rgba(0,0,0,.2); }
.mw-raum img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mw-raum.gross { grid-column: span 2; grid-row: span 2; }
.mw-raum.hoch { grid-row: span 2; }
@media (min-width: 1024px) {
  .mw-raum img { transition: transform .5s cubic-bezier(.16,1,.3,1); }
  .mw-raum:hover img { transform: scale(1.05); }
}
@media (max-width: 860px) {
  .mw-raeume { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .mw-raum.gross { grid-column: span 2; grid-row: span 2; }
  .mw-raum.hoch { grid-row: span 1; }
}
@media (max-width: 520px) {
  .mw-raeume { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .mw-raum.gross, .mw-raum.hoch { grid-column: span 1; grid-row: span 1; }
}
.mw-raeume-list { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: center; }

/* ---------- Einzugsgebiet ---------- */
.mw-gebiet {
  margin-top: 36px; display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 820px) { .mw-gebiet { grid-template-columns: 1fr; } }
.mw-gebiet-block {
  padding: 26px; border-radius: 20px;
  background: linear-gradient(165deg, rgba(255,240,230,.05), rgba(255,240,230,.02));
  border: 1px solid var(--mw-line-strong);
}
.mw-gebiet-label {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-family: ui-monospace, monospace; font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mw-orange-light);
}
.mw-gebiet-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.mw-gebiet-tag {
  padding: 8px 15px; border-radius: 999px; font-size: .88rem; color: var(--mw-muted);
  border: 1px solid var(--mw-line-strong); background: rgba(255,240,230,.03);
}
/* Essener Stadtteile hervorgehoben: hier sind wir wirklich vor Ort */
.mw-gebiet-tag.stadt {
  color: var(--mw-text); border-color: rgba(242,103,28,.3); background: rgba(242,103,28,.09);
}

/* ---------- Anlass-Verweise ---------- */
.mw-essen-anlaesse {
  margin-top: 34px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.mw-essen-anlass {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 15px;
  border: 1px solid var(--mw-line-strong); background: rgba(255,240,230,.035); color: var(--mw-text);
}
.mw-essen-anlass .ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(242,103,28,.12); border: 1px solid rgba(242,103,28,.22); color: var(--mw-orange-light);
}
.mw-essen-anlass .txt { flex: 1; font-weight: 700; font-size: .95rem; }
.mw-essen-anlass .pfeil { color: var(--mw-muted); flex: 0 0 auto; }
@media (min-width: 1024px) {
  .mw-essen-anlass { transition: border-color .16s, transform .16s, background .16s; }
  .mw-essen-anlass:hover { border-color: rgba(242,103,28,.42); transform: translateX(4px); background: rgba(242,103,28,.06); }
  .mw-essen-anlass .pfeil { transition: transform .16s, color .16s; }
  .mw-essen-anlass:hover .pfeil { color: var(--mw-orange-light); transform: translateX(3px); }
}

/* Helle Variante */
.mw-hell-scope .mw-anfahrt-karte,
.mw-hell-scope .mw-gebiet-block,
.mw-hell-scope .mw-essen-kontakt-item,
.mw-hell-scope .mw-essen-anlass { background: #fff; border-color: rgba(34,20,10,.12); }
.mw-hell-scope .mw-gebiet-tag { background: #f6efe6; border-color: rgba(34,20,10,.12); }

/* ============================================================
   WEITERE ANLÄSSE (Querverweis-Leiste am Seitenende)
   ============================================================ */

.mw-related {
  margin-top: 38px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.mw-related-card {
  display: flex; align-items: center; gap: 15px; padding: 18px 20px; border-radius: 16px;
  border: 1px solid var(--mw-line-strong); background: rgba(255,240,230,.04); color: var(--mw-text);
}
.mw-related-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(242,103,28,.12); border: 1px solid rgba(242,103,28,.24); color: var(--mw-orange-light);
}
.mw-related-txt { flex: 1; min-width: 0; }
.mw-related-txt b { display: block; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.mw-related-txt small { display: block; margin-top: 3px; font-size: .84rem; color: var(--mw-muted); }
.mw-related-pfeil { flex: 0 0 auto; color: var(--mw-muted); }
@media (min-width: 1024px) {
  .mw-related-card { transition: border-color .18s, transform .18s, background .18s; }
  .mw-related-card:hover { border-color: rgba(242,103,28,.42); transform: translateY(-3px); background: rgba(242,103,28,.07); }
  .mw-related-pfeil { transition: transform .18s, color .18s; }
  .mw-related-card:hover .mw-related-pfeil { color: var(--mw-orange-light); transform: translateX(4px); }
}

/* Helle Variante */
.mw-hell-scope .mw-related-card { background: #fff; border-color: rgba(34,20,10,.12); box-shadow: 0 14px 34px -26px rgba(80,40,10,.42); }


/* ============================================================
   COOKIE-EINWILLIGUNG (rechtssicher): gleichwertige Knöpfe,
   Einstellungen mit Umschalter — unten fixiert
   ============================================================ */

.mw-cookie {
  position: fixed; z-index: 200; left: 50%; bottom: clamp(14px, 3vw, 26px);
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 28px));
  padding: 20px 22px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(40,28,18,.98), rgba(26,18,11,.98));
  border: 1px solid rgba(242,103,28,.32);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #f1ebe4;
}
.mw-cookie::before {
  content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--mw-orange), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .mw-cookie { animation: mwCookieIn .5s cubic-bezier(.16,1,.3,1) both; }
  @keyframes mwCookieIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

.mw-cookie-head { display: flex; align-items: flex-start; gap: 16px; }
.mw-cookie-ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(242,103,28,.14); border: 1px solid rgba(242,103,28,.3); color: var(--mw-orange-light);
}
.mw-cookie-txt b { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.mw-cookie-txt p { margin: 4px 0 0; font-size: .86rem; line-height: 1.5; color: #b8aea3; }
.mw-cookie-txt strong { color: #f1ebe4; }
.mw-cookie-txt a { color: var(--mw-orange-light); text-decoration: underline; }

/* Einstellungen: Kategorien */
.mw-cookie-kats { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.mw-cookie-kat {
  text-align: left; width: 100%; padding: 14px 16px; border-radius: 13px;
  background: rgba(255,240,230,.04); border: 1px solid var(--mw-line-strong); color: inherit;
}
.mw-cookie-kat p { margin: 6px 0 0; font-size: .8rem; line-height: 1.45; color: #b8aea3; }
.mw-cookie-kat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mw-cookie-kat-t { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 700; }
.mw-cookie-kat-t svg { color: var(--mw-orange-light); }
.mw-cookie-kat-fix { font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #7fcf97; }
.mw-cookie-kat.toggleable { cursor: pointer; transition: border-color .16s, background .16s; }
.mw-cookie-kat.toggleable:hover { border-color: rgba(242,103,28,.34); }
.mw-cookie-kat.toggleable.on { border-color: rgba(242,103,28,.5); background: rgba(242,103,28,.08); }
/* Umschalter */
.mw-cookie-switch { flex: 0 0 auto; width: 40px; height: 23px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid var(--mw-line-strong); position: relative; transition: background .18s, border-color .18s; }
.mw-cookie-switch .knob { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #cbb9a8; transition: transform .18s, background .18s; }
.mw-cookie-kat.on .mw-cookie-switch { background: var(--mw-orange); border-color: var(--mw-orange); }
.mw-cookie-kat.on .mw-cookie-switch .knob { transform: translateX(17px); background: #fff; }

/* Aktionen: gleichwertige Knöpfe (Ablehnen = Akzeptieren, rechtlich Pflicht) */
.mw-cookie-actions { margin-top: 18px; display: flex; align-items: center; gap: 10px; }
.mw-cookie-btn { flex: 1; justify-content: center; padding: 13px 20px; }
.mw-cookie-reject {
  background: rgba(255,255,255,.06); border: 1px solid var(--mw-line-strong); color: #f1ebe4;
}
.mw-cookie-reject:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.09); }
.mw-cookie-settings {
  flex: 0 0 auto; background: none; border: 0; color: var(--mw-muted); cursor: pointer;
  font-size: .84rem; font-weight: 600; text-decoration: underline; padding: 8px 6px; white-space: nowrap;
}
.mw-cookie-settings:hover { color: #f1ebe4; }

/* Fußzeilen-Widerruf */
.mw-legal-btn { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.mw-legal-btn:hover { color: var(--mw-orange-light); }

/* Handy: gestapelt */
@media (max-width: 620px) {
  .mw-cookie { left: 12px; right: 12px; bottom: 12px; transform: none; width: auto; }
  .mw-cookie-actions { flex-wrap: wrap; }
  .mw-cookie-btn { flex: 1 1 100%; }
  .mw-cookie-settings { flex: 1 1 100%; text-align: center; padding-top: 4px; }
  @media (prefers-reduced-motion: no-preference) {
    .mw-cookie { animation-name: mwCookieInM; }
    @keyframes mwCookieInM { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  }
}