/* =========================================================
   Der Meisterplan - Styles fuer die WPBakery-Variante
   Alle Regeln haengen an .mp2 (el_class der Reihen) und
   an den nativen Impreza-Klassen (.wpb_text_column, .w-btn, ...).
   ========================================================= */

.mp2 {
  --mp-accent: #ff7a0f;
  --mp-accent-dark: #e56a05;
  --mp-ink: #1b232c;
  --mp-light: #eef0f2;
  --mp-head: "Schibsted Grotesk", sans-serif;
  --mp-body: "Inter", sans-serif;
  font-family: var(--mp-body);
}

/* ---------- Typografie in Textblöcken ---------- */
.mp2 .wpb_text_column { font-family: var(--mp-body); }

.mp2 .wpb_text_column h1,
.mp2 .wpb_text_column h2,
.mp2 .wpb_text_column h3,
.mp2 .wpb_text_column h4 {
  font-family: var(--mp-head);
  color: var(--mp-ink);
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0 0 0.5em;
}
.mp2 .wpb_text_column h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); font-weight: 800; }
.mp2 .wpb_text_column h2 { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); font-weight: 800; }
.mp2 .wpb_text_column h3 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); font-weight: 700; line-height: 1.15; }
.mp2 .wpb_text_column h4 { font-size: 1.25rem; font-weight: 700; line-height: 1.28; }

.mp2 .wpb_text_column p {
  font-family: var(--mp-body);
  font-size: 1rem;
  line-height: 1.6;
  color: #1b232cad;
  margin: 0 0 1em;
}
.mp2 .wpb_text_column p:last-child { margin-bottom: 0; }
.mp2 .wpb_text_column strong { color: var(--mp-ink); font-weight: 600; }
.mp2 .wpb_text_column a { color: var(--mp-accent); }

/* Einleitungstext */
.mp2 .mp2-lead p { font-size: 1.0625rem; line-height: 1.62; }

/* Kleiner Hinweistext */
.mp2 .mp2-small p { font-size: 0.875rem; line-height: 1.55; }
.mp2 .mp2-xsmall p { font-size: 0.75rem; line-height: 1.5; }

/* ---------- Kicker (Abdeckband) ---------- */
.mp2 .mp2-kicker { margin-bottom: 1.25rem; }
.mp2 .mp2-kicker .w-text-h {
  display: inline-block;
  font-family: var(--mp-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.4rem 0.7rem 0.35rem;
  background: #1b232c14;
  color: #1b232cc4;
  transform: rotate(-1.1deg);
  clip-path: polygon(0.4% 0, 100% 3%, 99.4% 100%, 0.6% 96%);
}
.mp2 .mp2-kicker.mp2-kicker-orange .w-text-h { background: var(--mp-accent); color: #fff; }
.mp2 .mp2-kicker.mp2-kicker-light .w-text-h { background: #ffffff1f; color: #ffffffd6; }

/* ---------- Buttons ---------- */
.mp2 a.w-btn.mp2-btn {
  font-family: var(--mp-body);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 1.1rem 1.8rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  background: var(--mp-accent);
  color: #fff;
  box-shadow: 0 1px 0 #0f141926;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.mp2 a.w-btn.mp2-btn:hover { background: var(--mp-accent-dark); color: #fff; }
.mp2 a.w-btn.mp2-btn.mp2-btn-outline { background: transparent; color: var(--mp-ink); border-color: #1b232c33; box-shadow: none; }
.mp2 a.w-btn.mp2-btn.mp2-btn-outline:hover { background: #1b232c0a; border-color: var(--mp-ink); color: var(--mp-ink); }
.mp2 a.w-btn.mp2-btn.mp2-btn-light { background: #fff; color: var(--mp-ink); }
.mp2 a.w-btn.mp2-btn.mp2-btn-light:hover { background: #f1f2f3; color: var(--mp-ink); }
.mp2 a.w-btn.mp2-btn.mp2-btn-small { padding: 0.65rem 1.05rem; font-size: 0.8125rem; }
.mp2 a.w-btn.mp2-btn.mp2-btn-medium { padding: 0.85rem 1.35rem; font-size: 0.9375rem; }
.mp2 .w-btn-wrapper { margin-top: 0; }

/* ---------- Listen ---------- */
.mp2 .wpb_text_column ul {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}
.mp2 .wpb_text_column ul li {
  position: relative;
  padding: 0.5rem 0 0.5rem 2rem;
  font-family: var(--mp-body);
  font-size: 1rem;
  line-height: 1.55;
  color: #1b232cad;
}
.mp2 .wpb_text_column ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 14px;
  height: 2px;
  background: var(--mp-accent);
}
/* Punkte-Liste */
.mp2 .mp2-dots ul li::before {
  top: 0.95rem; left: 2px; width: 8px; height: 8px; border-radius: 50%;
}
.mp2 .mp2-dots ul li { font-weight: 600; color: var(--mp-ink); }
/* Haken */
.mp2 .mp2-check ul li::before {
  top: 0.6rem; left: 0; width: 22px; height: 22px; border-radius: 2px;
  background: #ffe6cd;
}
.mp2 .mp2-check ul li::after {
  content: "";
  position: absolute; left: 5px; top: 1.0rem;
  width: 11px; height: 6px;
  border-left: 2px solid #b04f00; border-bottom: 2px solid #b04f00;
  transform: rotate(-45deg);
}
.mp2 .mp2-check ul li { padding-left: 2.25rem; }
/* Kreuz */
.mp2 .mp2-cross ul li::before {
  top: 0.6rem; left: 0; width: 22px; height: 22px; border-radius: 2px;
  background: #1b232c14;
}
.mp2 .mp2-cross ul li::after {
  content: "\00d7";
  position: absolute; left: 0; top: 0.5rem;
  width: 22px; text-align: center;
  font-size: 1rem; line-height: 1.4; color: #1b232c8a;
}
.mp2 .mp2-cross ul li { padding-left: 2.25rem; }
/* Quadrat */
.mp2 .mp2-squares ul li::before { top: 1.05rem; left: 0; width: 8px; height: 8px; border-radius: 0; }
.mp2 .mp2-squares ul li { font-weight: 600; color: var(--mp-ink); }

/* ---------- Akzentblöcke ---------- */
.mp2 .mp2-accentline { padding-left: 1.25rem; border-left: 3px solid var(--mp-accent); }
.mp2 .mp2-topline { padding-top: 2.25rem; border-top: 1px solid #0f14191f; }

.mp2 .mp2-quote { margin-top: 1.5rem; padding-top: 1.75rem; border-top: 2px solid #0f14191a; }
.mp2 .mp2-quote p {
  font-family: var(--mp-head);
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.022em;
  color: var(--mp-ink);
  max-width: 30ch;
}
.mp2 .mp2-quote p::before {
  content: "\201C";
  display: block;
  font-size: 3.4rem;
  line-height: 0.6;
  color: var(--mp-accent);
  margin-bottom: 0.9rem;
}

/* Grosse Umriss-Zahl */
.mp2 .mp2-num p {
  font-family: var(--mp-head);
  font-size: 5.2rem;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--mp-accent);
  margin: 0;
}
.mp2 .mp2-timing .w-text-h {
  display: inline-block;
  padding: 4px 9px;
  background: #0f14190f;
  font-family: var(--mp-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #1b232cb8;
}
.mp2 .mp2-timing { margin-top: 0.9rem; }

/* Orangefarbene Marke */
.mp2 .mp2-label .w-text-h {
  display: inline-block;
  padding: 6px 11px;
  background: var(--mp-accent);
  color: #fff;
  font-family: var(--mp-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}
.mp2 .mp2-label { margin-bottom: 1.4rem; }

/* Kleines Label über einem Absatz */
.mp2 .mp2-blocklabel .w-text-h {
  font-family: var(--mp-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mp-accent);
}
.mp2 .mp2-blocklabel { margin: 1.1rem 0 0.4rem; padding-top: 1.1rem; border-top: 1px solid #0f14191a; }

/* Ergebniskarte / Badge */
.mp2 .mp2-badge .wpb_wrapper {
  display: inline-block;
  background: var(--mp-accent);
  color: #fff;
  padding: 18px 22px 16px;
  max-width: 250px;
}
.mp2 .mp2-badge h3 { color: #fff; font-size: 3rem; line-height: 0.9; letter-spacing: -0.04em; font-weight: 800; margin: 0 0 8px; }
.mp2 .mp2-badge p { color: #ffffffeb; font-size: 0.8125rem; line-height: 1.35; font-weight: 600; margin: 0; }
.mp2 .mp2-badge { margin-top: -2.5rem; margin-left: -1rem; position: relative; z-index: 2; }

/* Proof-Karte im Hero */
.mp2 .mp2-proof .wpb_wrapper {
  display: inline-block;
  background: #fff;
  border: 1px solid #0f141914;
  box-shadow: 0 22px 44px -24px #0f14197a;
  padding: 16px 20px;
  max-width: 320px;
}
.mp2 .mp2-proof h3 { font-size: 2.75rem; line-height: 0.9; letter-spacing: -0.03em; color: var(--mp-accent); margin: 0 0 6px; }
.mp2 .mp2-proof p { font-size: 0.8125rem; margin: 0; }
.mp2 .mp2-proof { margin-top: -2.5rem; position: relative; z-index: 2; }

/* ---------- Bilder ---------- */
.mp2 .w-image .w-image-h { line-height: 0; }
.mp2 .mp2-frame .w-image-h {
  background: #fff;
  padding: 12px;
  box-shadow: 0 34px 64px -30px #0f141973;
  display: block;
}
.mp2 .mp2-tilt .w-image-h { transform: rotate(-1.4deg); }
.mp2 .mp2-tilt-r .w-image-h { transform: rotate(1.2deg); }
.mp2 .mp2-shot .w-image-h {
  position: relative;
  background: #fff;
  padding: 8px;
  box-shadow: 0 22px 44px -30px #0f14198c;
  display: block;
}
.mp2 .mp2-shot .w-image-h::after {
  content: "";
  position: absolute; left: 8px; bottom: 8px;
  width: 54px; height: 4px; background: var(--mp-accent);
}
.mp2 .mp2-logo img {
  max-height: 54px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter .25s ease, opacity .25s ease;
}
.mp2 .mp2-logo:hover img { filter: grayscale(0); opacity: 1; }
.mp2 .mp2-logo .w-image-h { display: flex; align-items: center; justify-content: center; min-height: 54px; }

/* Abspiel-Symbol auf Videovorschauen */
.mp2 .mp2-play .w-image-h { position: relative; }
.mp2 .mp2-play .w-image-h::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--mp-accent);
  box-shadow: 0 10px 26px -10px #0f141980;
}
.mp2 .mp2-play .w-image-h::before {
  content: "";
  position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}

/* ---------- Kopfzeile ---------- */
.mp2-header .l-section-h { padding-top: 0; padding-bottom: 0; }
.mp2-header .g-cols { align-items: center; }
.mp2-header .mp2-navlinks p { margin: 0; text-align: center; }
.mp2-header .mp2-navlinks a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #1b232cc4;
  text-decoration: none;
  white-space: nowrap;
}
.mp2-header .mp2-navlinks a:hover { color: var(--mp-ink); background: #0f14190a; }
.mp2-header .w-image img { max-height: 46px; width: auto; }
.mp2-header .w-btn-wrapper { text-align: right; }
@media (max-width: 900px) {
  .mp2-header .mp2-navlinks a { padding: 6px 8px; font-size: 0.875rem; }
}

/* ---------- Fortschrittsbalken (Auftragsmix) ---------- */
.mp2 .mp2-bar {
  padding: 26px 26px 24px;
  border-radius: 16px;
  background: #f5f6f9;
  border: 1px solid #0f14191a;
  max-width: 420px;
}
.mp2 .mp2-bar .w-progbar-title {
  font-family: var(--mp-body) !important;
  font-size: 0.75rem !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1b232c9e;
  margin-bottom: 14px;
}
.mp2 .mp2-bar .w-progbar-bar { background: #e3e6ec; border-radius: 999px; overflow: hidden; }
.mp2 .mp2-bar .w-progbar-bar-h { background: var(--mp-accent); }

/* ---------- Zähler ---------- */
.mp2 .mp2-fig { text-align: left; padding-left: 16px; border-left: 3px solid var(--mp-accent); }
.mp2 .mp2-fig .w-counter-value {
  font-family: var(--mp-head);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--mp-accent);
  justify-content: flex-start;
}
.mp2 .mp2-fig .w-counter-title {
  font-family: var(--mp-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 400;
  color: #ffffffc4;
  margin-top: 8px;
}

/* ---------- Siegel ---------- */
.mp2 .mp2-seal .wpb_wrapper {
  position: relative;
  width: 186px;
  height: 186px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--mp-accent);
  border-radius: 50%;
  transform: rotate(-7deg);
}
.mp2 .mp2-seal .wpb_wrapper::after {
  content: "";
  position: absolute; inset: 9px;
  border: 1px solid #ff7a0f7a;
  border-radius: 50%;
}
.mp2 .mp2-seal h3 {
  font-size: 3.6rem; font-weight: 800; line-height: 0.85;
  letter-spacing: -0.05em; color: var(--mp-accent); margin: 0;
}
.mp2 .mp2-seal p {
  margin: 8px 0 0;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: #ffffffcc;
}
@media (max-width: 860px) {
  .mp2 .mp2-seal .wpb_wrapper { width: 150px; height: 150px; }
  .mp2 .mp2-seal h3 { font-size: 3rem; }
}

/* ---------- Dunkle Abschnitte ---------- */
.mp2-dark .wpb_text_column h1,
.mp2-dark .wpb_text_column h2,
.mp2-dark .wpb_text_column h3,
.mp2-dark .wpb_text_column h4 { color: #fff; }
.mp2-dark .wpb_text_column p { color: #ffffffb8; }
.mp2-dark .wpb_text_column strong { color: #fff; }
.mp2-dark .wpb_text_column ul li { color: #ffffffb8; }
.mp2-dark .mp2-topline { border-top-color: #ffffff2b; }
.mp2-dark .mp2-accentline { border-left-color: var(--mp-accent); }

/* ---------- Spalten-Karten (Zwei Wege) ---------- */
.mp2 .mp2-cardcol > .vc_column-inner {
  background: #fff;
  border: 1px solid #0f14191a;
  padding: 44px 44px 40px;
  height: 100%;
}
.mp2 .mp2-cardcol + .mp2-cardcol > .vc_column-inner { border-left: none; }
@media (max-width: 900px) {
  .mp2 .mp2-cardcol > .vc_column-inner { padding: 32px 26px 30px; }
  .mp2 .mp2-cardcol + .mp2-cardcol > .vc_column-inner { border-left: 1px solid #0f14191a; border-top: none; }
}

/* Formularkarte */
.mp2 .mp2-formcard > .vc_column-inner {
  background: #fff;
  border: 1px solid #0f14191a;
  border-radius: 22px;
  padding: 40px 40px 34px;
  box-shadow: 0 44px 88px -48px #0f14198f;
}
@media (max-width: 640px) {
  .mp2 .mp2-formcard > .vc_column-inner { padding: 26px 22px 24px; }
}

/* Blöcke mit Trennlinie (Über uns) */
.mp2 .mp2-blocks h3 {
  font-size: 1.25rem;
  margin: 1.6rem 0 0.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid #0f14191a;
}
.mp2 .mp2-blocks h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Schritte im Ablauf */
.mp2 .mp2-step h3::before {
  content: attr(data-step);
}
.mp2 .mp2-stepnum .w-text-h {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--mp-accent);
  color: #fff;
  font-family: var(--mp-head);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mp2 .mp2-stepnum { margin-bottom: 1.5rem; }

/* ---------- FAQ-Akkordeon ---------- */
.mp2 .mp2-acc { border-top: 1px solid #1b232c24; }
.mp2 .mp2-acc .w-tabs-section { border-bottom: 1px solid #1b232c24; }
.mp2 .mp2-acc .w-tabs-section-header {
  padding: 1.15rem 0;
  background: none;
}
.mp2 .mp2-acc .w-tabs-section-title {
  font-family: var(--mp-head);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--mp-ink);
}
.mp2 .mp2-acc .w-tabs-section-control { color: var(--mp-accent); }
.mp2 .mp2-acc .w-tabs-section-content-h { padding: 0 3rem 1.4rem 0; }
.mp2 .mp2-acc .wpb_text_column p { max-width: 68ch; }
@media (max-width: 560px) {
  .mp2 .mp2-acc .w-tabs-section-content-h { padding-right: 0; }
}

/* ---------- Kontaktformular ---------- */
.mp2 .mp2-form .w-form-row-label span {
  font-family: var(--mp-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mp-ink);
}
.mp2 .mp2-form input[type="text"],
.mp2 .mp2-form input[type="email"],
.mp2 .mp2-form input[type="tel"],
.mp2 .mp2-form select,
.mp2 .mp2-form textarea {
  font-family: var(--mp-body);
  font-size: 0.9375rem;
  border-radius: 10px;
  border: 1px solid #1b232c2e;
  background: #fff;
  color: var(--mp-ink);
}
.mp2 .mp2-form input:focus,
.mp2 .mp2-form select:focus,
.mp2 .mp2-form textarea:focus {
  border-color: var(--mp-accent);
  box-shadow: 0 0 0 3px #ff7a0f26;
}
.mp2 .mp2-form .w-btn,
.mp2 .mp2-form button[type="submit"] {
  width: 100%;
  justify-content: center;
  background: var(--mp-accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 1.1rem 1.8rem;
  font-family: var(--mp-body);
  font-size: 1rem;
  font-weight: 600;
}
.mp2 .mp2-form .w-btn:hover,
.mp2 .mp2-form button[type="submit"]:hover { background: var(--mp-accent-dark); }

/* ---------- Footer ---------- */
.mp2-footer .mp2-coltitle .w-text-h {
  font-family: var(--mp-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mp-accent);
}
.mp2-footer .mp2-coltitle { margin-bottom: 1.25rem; }
.mp2-footer .wpb_text_column p { font-size: 0.9375rem; line-height: 1.5; margin-bottom: 0.75rem; }
.mp2-footer .wpb_text_column a { color: #ffffffd1; text-decoration: none; }
.mp2-footer .wpb_text_column a:hover { color: var(--mp-accent); }
.mp2-footer .wpb_text_column ul li { color: #ffffffab; padding-left: 0; }
.mp2-footer .wpb_text_column ul li::before { display: none; }
.mp2-footer .w-image img { max-height: 52px; width: auto; }
.mp2-footer-bottom .wpb_text_column p { font-size: 0.8125rem; color: #ffffff8a; margin: 0; }

/* ---------- Kleinigkeiten ---------- */
.mp2 .mp2-center .wpb_wrapper { text-align: center; }
.mp2 .mp2-rule { height: 1px; background: #0f14191f; }
