/* Eigenständiger, lokaler Kampagnenentwurf. */
.mfb-home-kampagne {
  --kampagne-rahmen: min(1440px, calc(100% - 64px));
  --kampagne-nacht: #102720;
}

.mfb-home-kampagne .mfb-kampagne,
.mfb-home-kampagne .mfb-kampagne-direkt,
.mfb-home-kampagne .mfb-konzept-kategorien {
  width: var(--kampagne-rahmen);
  margin-inline: auto;
}

.mfb-kampagne {
  margin-block-start: clamp(15px, 2vw, 30px);
}

.mfb-kampagne-buehne {
  position: relative;
  overflow: clip;
  border-radius: 18px;
  background: var(--kampagne-nacht);
  color: #fff;
}

.mfb-kampagne-anbieterlogo {
  position: absolute;
  inset-block-start: 24px;
  inset-inline-end: 24px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 9px;
  background: #fff;
}

.mfb-kampagne-anbieterlogo img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.mfb-kampagne-motiv {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  min-height: clamp(420px, 35vw, 515px);
  position: relative;
  isolation: isolate;
}

.mfb-kampagne-motiv[hidden] {
  display: none;
}

/* Stack the offers in one grid cell so changing slides does not move the page. */
.mfb-kampagne-buehne[data-rotation="ready"] {
  display: grid;
  touch-action: pan-y pinch-zoom;
}

.mfb-kampagne-buehne[data-rotation="ready"] > .mfb-kampagne-motiv {
  grid-area: 1 / 1;
}

.mfb-kampagne-buehne[data-rotation="ready"] > .mfb-kampagne-motiv[aria-hidden="true"] {
  visibility: hidden;
}

.mfb-kampagne-iphone {
  background: radial-gradient(ellipse at 26% 60%, #647f9e, #2b405a 45%, #151f32 70%);
}

.mfb-kampagne-android {
  background: radial-gradient(ellipse at 26% 60%, #6e8878, #263e36 45%, #111f1b 70%);
}

.mfb-kampagne-raten {
  background: radial-gradient(ellipse at 27% 47%, #a78774, #795744 44%, #33261f 67%);
}

.mfb-kampagne-bild {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 28px 18px;
  user-select: none;
}

.mfb-kampagne-buehne[data-rotation="ready"] .mfb-kampagne-bild {
  cursor: grab;
}

.mfb-kampagne-buehne[data-rotation="ready"] .mfb-kampagne-bild:active {
  cursor: grabbing;
}

.mfb-kampagne-bild img {
  display: block;
  max-width: 90%;
  width: auto;
  height: clamp(265px, 28vw, 400px);
  object-fit: contain;
  filter: drop-shadow(12px 25px 24px #0b1312a6);
}

@media (prefers-reduced-motion: no-preference) {
  .mfb-kampagne-bild img {
    translate: var(--kampagne-wischweg, 0px) 0;
  }
}

.mfb-kampagne-iphone .mfb-kampagne-geraet {
  transform: rotate(-13deg) translateX(-5%);
}

.mfb-kampagne-android .mfb-kampagne-geraet {
  height: clamp(230px, 26vw, 350px);
  transform: rotate(-9deg);
}

.mfb-kampagne-geraete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.mfb-kampagne-geraete img {
  height: clamp(225px, 23vw, 345px);
  max-width: 41%;
}

.mfb-kampagne-geraete img:first-child {
  transform: rotate(-12deg);
}

.mfb-kampagne-geraete img:last-child {
  transform: rotate(9deg) translateY(14px);
}

.mfb-kampagne-text {
  min-width: 0;
  padding: clamp(25px, 4vw, 60px) clamp(64px, 5.4vw, 76px) clamp(25px, 4vw, 60px) 8px;
}

.mfb-kampagne-text p {
  color: #e9efe8;
  margin: 0;
  line-height: 1.55;
}

.mfb-kampagne-text .mfb-kampagne-tarif {
  color: #ffd1b7;
  font-size: 15px;
  font-weight: 700;
}

.mfb-home-kampagne #bd-main .mfb-kampagne-text h2 {
  color: #fff;
  font-size: clamp(38px, 5.15vw, 78px);
  font-weight: 760;
  line-height: .99;
  letter-spacing: -.052em;
  margin: 9px 0 15px;
  text-wrap: balance;
}

.mfb-kampagne-text .mfb-kampagne-details {
  font-size: clamp(14px, 1.3vw, 18px);
}

.mfb-kampagne-preise {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 13px 26px;
  color: #fff;
  margin: 23px 0 0;
}

.mfb-kampagne-preise > div + div {
  padding-inline-start: 19px;
  border-inline-start: 1px solid #ffffff45;
}

.mfb-kampagne-preise dt {
  color: #e9efe8;
  font-size: 12px;
  font-weight: 650;
}

.mfb-kampagne-preise dd {
  margin: 3px 0 0;
  white-space: nowrap;
  font-size: clamp(26px, 3.5vw, 48px);
  font-weight: 760;
  letter-spacing: -.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.mfb-kampagne-preise > div + div dd {
  font-size: clamp(18px, 2vw, 29px);
}

.mfb-kampagne-text .mfb-kampagne-preisstand {
  margin-top: 9px;
  font-size: 12px;
}

.mfb-kampagne-text .mfb-kampagne-cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 19px;
  padding: 11px 17px;
  margin-top: 23px;
  border-radius: 7px;
  background: #ffd3b9;
  color: #281a13;
  text-decoration: none;
  font-size: 14px;
  font-weight: 760;
}

.mfb-kampagne-text .mfb-kampagne-cta:hover {
  background: #fff1e7;
  color: #281a13;
}

.mfb-kampagne-steuerung:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.mfb-kampagne-steuerung button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #ffffff66;
  border-radius: 50%;
  background: #102720b8;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
}

.mfb-kampagne-steuerung button:hover,
.mfb-kampagne-steuerung button:active {
  background: #102720;
}

.mfb-kampagne-steuerung button:focus-visible {
  outline: 2px solid #fff2bf;
  outline-offset: 2px;
}

.mfb-kampagne-pfeil {
  inset-block-start: calc(50% - 22px);
  inset-inline-start: 12px;
}

.mfb-kampagne-pfeil[data-richtung="1"] {
  inset-inline-start: auto;
  inset-inline-end: 12px;
}

.mfb-kampagne-pfeil::before {
  content: "";
  width: 9px;
  height: 9px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: translateX(2px) rotate(-135deg);
}

.mfb-kampagne-pfeil[data-richtung="1"]::before {
  transform: translateX(-2px) rotate(45deg);
}

.mfb-kampagne-steuerung .mfb-kampagne-wiedergabe {
  inset-block-start: 12px;
  inset-inline-start: 12px;
}

.mfb-kampagne-wiedergabe::before {
  content: "";
  box-sizing: border-box;
  width: 10px;
  height: 12px;
  border-inline: 3px solid currentColor;
}

.mfb-kampagne-wiedergabe[data-playing="false"]::before {
  width: 0;
  border: 6px solid transparent;
  border-inline-start: 10px solid currentColor;
  border-inline-end: 0;
}

.mfb-kampagne-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.mfb-kampagne-weg a:focus-visible {
  outline: 2px solid #173d2e;
  outline-offset: 3px;
}

.mfb-kampagne-direkt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-block-start: 15px;
}

.mfb-kampagne-weg {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: 230px;
  border-radius: 14px;
  color: #172d24;
}

.mfb-kampagne-vergleich {
  background: #f2dfce;
}

.mfb-kampagne-unternehmen {
  background: #e2eae0;
}

.mfb-kampagne-weg-text {
  width: 66%;
  padding: clamp(18px, 3vw, 38px);
  position: relative;
}

.mfb-home-kampagne #bd-main .mfb-kampagne-weg h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.04;
  color: #172d24;
}

.mfb-kampagne-weg p {
  color: #3a5044;
  font-size: 14px;
  margin: 0 0 13px;
  max-width: 30ch;
}

.mfb-kampagne-weg a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 750;
  font-size: 14px;
  color: #172d24;
}

.mfb-kampagne-weg > img {
  position: absolute;
  z-index: -1;
}

.mfb-kampagne-vergleich-motiv {
  position: absolute;
  z-index: -1;
  inset: auto 11% -21% auto;
  height: 104%;
  max-width: 36%;
  aspect-ratio: 580 / 1200;
  filter: drop-shadow(5px 15px 13px #63402360);
}

.mfb-kampagne-vergleich-motiv > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(17deg);
}

.mfb-kampagne-unternehmen > img {
  inset: 0 0 0 auto;
  height: 100%;
  width: 52%;
  object-fit: cover;
  object-position: 45% 28%;
  mask-image: linear-gradient(90deg, transparent, black 32%);
}

.mfb-home-kampagne .mfb-kampagne-direkt > #mobilfunk-fuers-unternehmen {
  background: #dcecf7;
  min-height: clamp(248px, 21vw, 306px);
  scroll-margin-top: 104px;
}

.mfb-kampagne-direkt > .mfb-kampagne-unternehmen .mfb-kampagne-weg-text {
  width: 54%;
  padding-inline: clamp(16px, 2.6vw, 38px);
}

.mfb-kampagne-direkt > .mfb-kampagne-unternehmen > img {
  width: 46%;
  padding: 10px 10px 8px 0;
  object-fit: contain;
  object-position: center bottom;
  mask-image: none;
}

.mfb-home-kampagne .mfb-konzept-kategorien {
  margin-block-start: 20px;
}

.mfb-home-kampagne .mfb-konzept-kategorien .bd-home2-category-chip {
  border-radius: 8px;
}

@media (max-width: 960px) {
  .mfb-home-kampagne {
    --kampagne-rahmen: calc(100% - 36px);
  }

  .mfb-kampagne-motiv {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    min-height: 385px;
  }

  .mfb-kampagne-anbieterlogo {
    inset-block-start: 15px;
    inset-inline-end: 15px;
  }
}

@media (max-width: 820px) {
  .mfb-kampagne-direkt {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .mfb-home-kampagne {
    --kampagne-rahmen: calc(100% - 24px);
  }

  .mfb-kampagne-buehne {
    --kampagne-bildhoehe: 221px;
    border-radius: 13px;
  }

  .mfb-kampagne-anbieterlogo {
    inset-block-start: 12px;
    inset-inline-end: 12px;
    width: 39px;
    height: 39px;
    border-radius: 7px;
  }

  .mfb-kampagne-anbieterlogo img {
    width: 25px;
    height: 25px;
  }

  .mfb-kampagne-motiv {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--kampagne-bildhoehe) 1fr;
    min-height: 485px;
  }

  .mfb-kampagne-iphone {
    background: radial-gradient(ellipse at 45% 25%, #647f9e, #2b405a 45%, #151f32 72%);
  }

  .mfb-kampagne-android {
    background: radial-gradient(ellipse at 45% 25%, #697f70, #223730 45%, #111f1b 72%);
  }

  .mfb-kampagne-raten {
    background: radial-gradient(ellipse at 46% 26%, #a78774, #735241 42%, #33261f 72%);
  }

  .mfb-kampagne-bild {
    height: var(--kampagne-bildhoehe);
    padding: 35px 48px 9px;
  }

  .mfb-kampagne-bild img {
    height: 174px;
    filter: drop-shadow(8px 13px 11px #0b131287);
  }

  .mfb-kampagne-android .mfb-kampagne-geraet {
    height: 160px;
  }

  .mfb-kampagne-geraete img {
    height: 147px;
  }

  .mfb-kampagne-text {
    padding: 4px 18px 21px;
  }

  .mfb-kampagne-text .mfb-kampagne-tarif {
    font-size: 13px;
  }

  .mfb-home-kampagne #bd-main .mfb-kampagne-text h2 {
    font-size: clamp(34px, 9vw, 49px);
    margin-block: 6px 9px;
    text-wrap: unset;
  }

  .mfb-kampagne-preise {
    margin-top: 14px;
  }

  .mfb-kampagne-text .mfb-kampagne-cta {
    margin-top: 17px;
    min-height: 44px;
  }

  .mfb-kampagne-steuerung:not([hidden]) {
    inset-block-end: auto;
    height: var(--kampagne-bildhoehe);
  }

  .mfb-kampagne-pfeil {
    inset-block-start: calc(50% - 9px);
    inset-inline-start: 8px;
  }

  .mfb-kampagne-pfeil[data-richtung="1"] {
    inset-inline-end: 8px;
  }

  .mfb-kampagne-steuerung .mfb-kampagne-wiedergabe {
    inset-block-start: 10px;
    inset-inline-start: 8px;
  }

  .mfb-kampagne-direkt {
    gap: 9px;
    margin-block-start: 11px;
  }

  .mfb-kampagne-weg {
    min-height: 176px;
  }

  .mfb-kampagne-weg p {
    font-size: 13px;
  }

  .mfb-kampagne-weg-text {
    width: 65%;
  }

  .mfb-kampagne-vergleich-motiv {
    inset-inline-end: clamp(32px, 11%, 54px);
    max-width: 29%;
    filter: drop-shadow(2px 8px 8px #63402360);
  }

  .mfb-kampagne-vergleich-motiv > img {
    transform: rotate(12deg);
  }

  .mfb-kampagne-unternehmen > img {
    width: 47%;
    mask-image: linear-gradient(90deg, transparent, black 50%);
  }
}

@media (max-width: 480px) {
  .mfb-kampagne-direkt > .mfb-kampagne-unternehmen {
    display: block;
  }

  .mfb-kampagne-direkt > .mfb-kampagne-unternehmen .mfb-kampagne-weg-text {
    width: 100%;
  }

  .mfb-kampagne-direkt > .mfb-kampagne-unternehmen > img {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    padding: 0 12px 8px;
    object-position: center bottom;
  }
}