/* Ergänzungen der statischen Spiegelung.
   Greift nicht in das Original-CSS ein. */

:root {
  --mh-rot: #e0001a;
  --mh-rot-dunkel: #b30015;
  --mh-dunkel: #07071a;
  --mh-grau: #6a6a75;
  --mh-linie: #e2e2e6;
}

/* ---------------------------------------------------------- Mobilmenü -- */
.mh-burger{display:none;position:fixed;top:14px;right:14px;z-index:9999;width:48px;height:48px;
  background:var(--mh-rot);border:0;border-radius:4px;cursor:pointer;padding:12px;
  flex-direction:column;justify-content:space-between}
.mh-burger span{display:block;height:3px;width:100%;background:#fff;border-radius:2px;transition:.25s}
.mh-burger.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.mh-burger.is-open span:nth-child(2){opacity:0}
.mh-burger.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.mh-mobilenav{display:none;position:fixed;inset:0;z-index:9998;background:rgba(7,7,26,.97);
  padding:88px 24px 32px;overflow-y:auto}
.mh-mobilenav.is-open{display:block}
.mh-mobilenav ul{list-style:none;margin:0;padding:0}
.mh-mobilenav li{border-bottom:1px solid rgba(255,255,255,.14)}
.mh-mobilenav a{display:block;padding:16px 4px;color:#fff;text-decoration:none;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:1.6rem}
.mh-mobilenav a:hover{color:var(--mh-rot)}

@media (max-width:900px){ .mh-burger{display:flex} }

/* ------------------------------------------------- Karte nach Klick ---- */
.mh-mapconsent{display:grid;place-items:center;gap:14px;text-align:center;padding:40px 24px;
  background:#f7f7f7;border:1px solid var(--mh-linie);min-height:260px}
.mh-mapconsent p{margin:0;font-size:15px;line-height:1.55;color:#4a4a55}
.mh-mapconsent a{color:var(--mh-rot)}
.mh-mapconsent button{background:var(--mh-rot);color:#fff;border:0;padding:12px 28px;cursor:pointer;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;border-radius:3px}
.mh-mapconsent button:hover{background:var(--mh-rot-dunkel)}

/* ------------------------------------------------- Formularmeldungen --- */
.mh-formnote{margin:16px 0 0;padding:13px 16px;font-size:15px;line-height:1.5;
  border-left:4px solid;border-radius:3px}
.mh-formnote--ok{background:#eef7ee;border-left-color:#2e7d32;color:#1b5e20}
.mh-formnote--fehler{background:#fdecee;border-left-color:var(--mh-rot);color:#8a0012}
.mh-formnote a{color:inherit}

.mh-feld-fehler{border-color:var(--mh-rot)!important;
  box-shadow:0 0 0 3px rgba(224,0,26,.12)!important}

.mh-knopf-wartet{pointer-events:none;opacity:.6}

/* Honigtopf gegen Bots: für Menschen unsichtbar. */
.mh-honigtopf{position:absolute!important;left:-9999px!important;
  width:1px!important;height:1px!important;opacity:0!important}

/* ================================================ Erstberatungs-Funnel ==
   Schritt 1 liegt im HTML. Die Auswahl war bisher unsichtbar, weil die
   Klassen dafür von React kamen. spiegel.js setzt sie jetzt. */

.one-kit-form-selectable-items .option-item{
  border-radius:5px;
  transition:box-shadow .18s ease, transform .18s ease;
}
.one-kit-form-selectable-items .option-item:hover{
  box-shadow:0 6px 18px rgba(17,17,26,.14);
  transform:translateY(-2px);
}
.one-kit-form-selectable-items .option-item__card-preview{position:relative}

/* Gewählte Kachel: roter Rahmen, Titel in Rot, Haken oben rechts. */
.mh-kachel-gewaehlt{
  box-shadow:0 0 0 3px var(--mh-rot), 0 8px 22px rgba(224,0,26,.20)!important;
}
.mh-kachel-gewaehlt .option-label__title{
  color:var(--mh-rot);
  font-weight:700;
}
.mh-kachel-gewaehlt .option-item__card-preview::after{
  content:"";
  position:absolute; top:10px; right:10px;
  width:26px; height:26px; border-radius:50%;
  background:var(--mh-rot);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  z-index:3;
  animation:mh-haken .28s cubic-bezier(.2,.9,.3,1.4);
}
.mh-kachel-gewaehlt .option-item__card-preview::before{
  content:"";
  position:absolute; top:18px; right:20px;
  width:13px; height:7px; z-index:4;
  border-left:3px solid #fff; border-bottom:3px solid #fff;
  transform:rotate(-45deg);
  animation:mh-haken .28s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes mh-haken{ from{transform:scale(.2);opacity:0} to{opacity:1} }

/* OnePage blendet zusätzlich einen blassen Haken in die Kachelmitte ein.
   Zwei Haken gleichzeitig sind unruhig – der eigene oben rechts genügt. */
.mh-kachel-gewaehlt .option-item--check{ display:none }

/* Der Weiter-Knopf zeigt an, wie viel gewählt ist. */
.mh-weiter-bereit{ box-shadow:0 6px 20px rgba(224,0,26,.35); }

/* --------------------------------------------- Schritt 2: Kontaktdaten -- */
/* Die Seite setzt nirgends eine Grundschrift auf <body> – dort steht noch
   der Browser-Standard Times New Roman. Jedes OnePage-Element bringt seine
   Schrift selbst mit. Unsere eigenen Bausteine müssen das deshalb auch tun,
   sonst erben sie Times. Fließtext ist Open Sans 16px, Überschriften Oswald. */
.mh-funnel,
.mh-funnel input,
.mh-funnel textarea,
.mh-funnel button,
.mh-funnel label,
.mh-mapconsent,
.mh-formnote{
  font-family:'Open Sans', Arial, Helvetica, sans-serif;
}
.mh-funnel{
  font-size:16px;
  line-height:1.6;
  background:#fff;
  border-radius:6px;
  padding:34px 32px 30px;
  box-shadow:0 18px 60px rgba(17,17,26,.12), 0 2px 8px rgba(17,17,26,.06);
  max-width:760px;
  color:var(--mh-dunkel);
}
@media (max-width:640px){ .mh-funnel{padding:24px 20px} }

.mh-funnel__kopf{border-bottom:1px solid var(--mh-linie);padding-bottom:18px;margin-bottom:20px}
.mh-funnel__schritt{
  margin:0 0 6px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--mh-rot);
}
.mh-funnel__titel{
  font-family:'Oswald',sans-serif;font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;margin:0;color:var(--mh-dunkel);
}
.mh-funnel__unter{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--mh-grau)}

.mh-funnel__auswahl{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:#f7f7f9;border-radius:5px;padding:12px 14px;margin-bottom:22px;
}
.mh-funnel__auswahl-label{
  font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:var(--mh-grau);margin-right:2px;
}
.mh-funnel__marken{display:flex;flex-wrap:wrap;gap:6px}
.mh-marke{
  display:inline-block;background:var(--mh-rot);color:#fff;
  padding:4px 11px;border-radius:20px;font-size:13px;font-weight:600;line-height:1.4;
}
.mh-funnel__zurueck{
  margin-left:auto;background:none;border:0;padding:2px 0;
  color:var(--mh-grau);cursor:pointer;font-size:13.5px;text-decoration:underline;
}
.mh-funnel__zurueck:hover{color:var(--mh-rot)}

.mh-funnel__raster{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
@media (max-width:640px){ .mh-funnel__raster{grid-template-columns:1fr} }
.mh-feld{margin:0}
.mh-feld--breit{grid-column:1 / -1}
.mh-feld label{
  display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;color:var(--mh-dunkel);
}
.mh-feld label b{color:var(--mh-rot);font-weight:700}
.mh-funnel input,
.mh-funnel textarea{
  display:block;width:100%;box-sizing:border-box;
  padding:12px 14px;border:1px solid #d3d3d9;border-radius:4px;background:#fff;
  font-family:inherit;font-size:15px;font-weight:400;color:var(--mh-dunkel);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.mh-funnel input::placeholder,
.mh-funnel textarea::placeholder{color:#a8a8b2}
.mh-funnel input:focus,
.mh-funnel textarea:focus{
  outline:0;border-color:var(--mh-rot);box-shadow:0 0 0 3px rgba(224,0,26,.12);
}
.mh-funnel textarea{resize:vertical;min-height:104px;line-height:1.55}

.mh-funnel__fuss{margin-top:24px}
.mh-funnel__senden{
  background:var(--mh-rot);color:#fff;border:0;border-radius:4px;
  padding:15px 38px;cursor:pointer;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(224,0,26,.28);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mh-funnel__senden:hover{
  background:var(--mh-rot-dunkel);transform:translateY(-1px);
  box-shadow:0 9px 24px rgba(224,0,26,.34);
}
.mh-funnel__klein{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--mh-grau)}
.mh-funnel__klein a{color:var(--mh-rot)}

/* --------------------------------------------- Schritt 3: Bestätigung --- */
.mh-danke{text-align:center;padding:14px 4px 6px}
.mh-danke__haken{color:#2e7d32;margin-bottom:14px;animation:mh-haken .45s cubic-bezier(.2,.9,.3,1.4)}
.mh-danke__text{margin:10px auto 0;max-width:44ch;font-size:16px;line-height:1.6;color:#4a4a55}
.mh-danke__schritte{
  list-style:none;counter-reset:s;margin:24px auto 0;padding:0;
  max-width:44ch;text-align:left;
}
.mh-danke__schritte li{
  counter-increment:s;position:relative;padding:0 0 0 40px;margin-bottom:13px;
  font-size:15px;line-height:1.55;color:#4a4a55;
}
.mh-danke__schritte li::before{
  content:counter(s);position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:50%;
  background:var(--mh-rot);color:#fff;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;
  display:grid;place-items:center;
}
.mh-danke__eilig{
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--mh-linie);
  font-size:15px;color:var(--mh-grau);
}
.mh-danke__eilig a{color:var(--mh-rot);font-weight:700;text-decoration:none}
.mh-danke__eilig a:hover{text-decoration:underline}

/* ============================================== Bewertungs-Laufband =====
   Im Markup stand --marquee-speed: 0s, deshalb stand das Band still.
   spiegel.js misst die Breite einer Bahn und setzt Strecke und Dauer. */
@keyframes mh-marquee{
  from{ transform:translateX(0) }
  to  { transform:translateX(calc(-1 * var(--mh-marquee-weg,0px))) }
}
/* Zwei Bauarten: die Bewertungen liegen in einem -grid, die Partnerlogos in
   einer -gallery. Die Galerie hatte keine Breitenangabe und war deshalb auf
   352px zusammengeschrumpft – man sah nur drei von elf Logos.
   Die zweite Bahn (__repeat) stand auf position:absolute mit width:0, sie
   lag also unsichtbar auf der ersten. Beides hier geradegerückt. */
.mh-marquee-laeuft .con-kit-component-marquee-gallery,
.mh-marquee-laeuft .con-kit-component-marquee-grid{
  width:max-content!important;
}
.mh-marquee-laeuft .con-kit-component-marquee__repeat{
  position:static!important;
  width:max-content!important;
  height:auto!important;
  transform:none!important;
}
.mh-marquee-laeuft .con-kit-component-marquee__content{
  animation:mh-marquee var(--mh-marquee-dauer,60s) linear infinite!important;
}
.mh-marquee-laeuft.con-kit-component-marquee--pause-on-hover:hover
  .con-kit-component-marquee__content{ animation-play-state:paused }

@media (prefers-reduced-motion: reduce){
  .mh-marquee-laeuft .con-kit-component-marquee__content{ animation:none!important }
}

/* ------------------------------------------------------ Überschriften -- */
h1.con-kit-quark-paragraph{ margin-top:0 }

/* Die Abschnittstitel sind jetzt h2/h3 statt div. Schriftart, -größe,
   -gewicht, Zeilenhöhe und der untere Abstand stehen in
   .con-kit-quark-paragraph und gelten unverändert weiter. Offen bleibt nur
   der obere Abstand, den Browser für Überschriften mitbringen. Bewusst kein
   font-size oder font-weight: das hätte höhere Spezifität als die Klasse
   und würde die Kit-Größen aushebeln. */
h2.con-kit-quark-paragraph,
h3.con-kit-quark-paragraph{ margin-top:0 }

/* ------------------------------------------------------- Fußzeilenlink -- */
.mh-fussnote{
  display:block;margin-top:6px;font-size:11.5px;line-height:1.5;
  color:rgba(255,255,255,.42);
}
.mh-fussnote a{color:inherit;text-decoration:none}
.mh-fussnote a:hover{color:rgba(255,255,255,.75);text-decoration:underline}