@media (max-width: 430px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    margin: 0 !important;
  }

  .wrap,
  .top,
  .hero,
  .band,
  .footer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .wrap {
    padding: 14px !important;
  }

  .top {
    position: static !important;
    padding-top: 18px !important;
    padding-bottom: 14px !important;
  }

  .nav {
    display: block !important;
    text-align: center !important;
  }

  .brand,
  .brand:visited {
    display: block !important;
    margin: 0 auto 10px !important;
    color: #075d6d !important;
    font-size: 19px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-decoration: none !important;
    max-width: 100% !important;
  }

  .brand span {
    display: block !important;
    margin: 2px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .nav nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
  }

  .nav nav a,
  .nav nav a:visited {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 5px !important;
    border: 1px solid #b8cbd4 !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: #075d6d !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .hero {
    margin-top: 0 !important;
  }

  .hero .wrap {
    padding-top: 26px !important;
    padding-bottom: 28px !important;
  }

  h1,
  .hero h1 {
    font-size: 28px !important;
    line-height: 1.12 !important;
    text-align: left !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    letter-spacing: 0 !important;
  }

  h2,
  .band h2,
  .wrap h2 {
    font-size: 26px !important;
    line-height: 1.15 !important;
    text-align: left !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    letter-spacing: 0 !important;
  }

  .lead,
  .hero .lead {
    font-size: 17px !important;
    line-height: 1.4 !important;
    text-align: left !important;
  }

  .device {
    display: none !important;
  }

  .btn,
  .btn:visited,
  .quick .btn {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 7px 0 !important;
    padding: 12px 10px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .grid,
  .grid.two,
  .screen,
  .cards {
    grid-template-columns: 1fr !important;
  }

  .card,
  .panel,
  .notice {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 360px) {
  .brand,
  .brand:visited {
    font-size: 18px !important;
  }

  .nav nav a,
  .nav nav a:visited {
    min-height: 40px !important;
    font-size: 12.5px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  h1,
  .hero h1 {
    font-size: 26px !important;
  }

  h2,
  .band h2,
  .wrap h2 {
    font-size: 24px !important;
  }
}

/* Zentrale mobile Korrektur fuer alle StromPing-Seiten.
   Sie sorgt dafuer, dass Menuebuttons auf Handys nicht mehr einzeln
   untereinander stehen und Inhalte nicht seitlich aus dem Display laufen. */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

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

  .wrap,
  .sp-wrap,
  .top,
  .sp-nav,
  .hero,
  .sp-hero,
  .band,
  .footer,
  main,
  section,
  .card,
  .panel,
  .notice {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .wrap,
  .sp-wrap {
    width: 100% !important;
    padding: 16px !important;
  }

  .top,
  .sp-nav {
    display: block !important;
    padding: 18px 12px !important;
    text-align: center !important;
  }

  .brand,
  .brand:visited,
  .sp-brand,
  .sp-brand:visited {
    display: block !important;
    max-width: 100% !important;
    margin: 0 auto 12px !important;
    color: #075d6d !important;
    font-size: 21px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  .brand span,
  .sp-brand span {
    display: block !important;
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .nav nav,
  .sp-navlinks {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
  }

  .nav nav a,
  .nav nav a:visited,
  .sp-navlinks a,
  .sp-navlinks a:visited {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 9px 8px !important;
    border: 1px solid #b8cbd4 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #075d6d !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .hero .wrap,
  .sp-hero .sp-wrap {
    display: block !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  h1,
  .hero h1,
  .sp-home h1 {
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 1.12 !important;
    text-align: left !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    letter-spacing: 0 !important;
  }

  h2,
  .band h2,
  .wrap h2,
  .sp-home h2 {
    font-size: clamp(24px, 6vw, 34px) !important;
    line-height: 1.15 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .lead,
  .hero .lead,
  .sp-lead {
    font-size: 18px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  .device,
  .phone,
  .sp-phone {
    display: none !important;
  }

  .btn,
  .btn:visited,
  .quick .btn,
  .sp-btn {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
    padding: 12px 10px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .btn:not(.light):not(.paypal),
  .quick .btn:not(.light):not(.paypal) {
    color: #ffffff !important;
  }

  .btn.light,
  .btn.light:visited {
    color: #075d6d !important;
    background: #ffffff !important;
  }

  .btn.paypal,
  .btn.paypal:visited {
    color: #111111 !important;
    background: #ffc439 !important;
  }

  .grid,
  .grid.two,
  .screen,
  .cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  img,
  iframe,
  video {
    max-width: 100% !important;
    height: auto;
  }
}

@media (max-width: 760px) {
  .nav nav.mobile-nav-3col,
  .sp-navlinks.mobile-nav-3col {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 720px !important;
  }
}

@media (max-width: 760px) {
  body.google-play-page .nav nav,
  body.google-play-page .sp-navlinks {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.google-play-page .nav nav a,
  body.google-play-page .sp-navlinks a {
    min-height: 40px !important;
    padding: 8px 4px !important;
    font-size: 13px !important;
  }

  body.google-play-page .nav nav a:nth-child(odd):last-child,
  body.google-play-page .sp-navlinks a:nth-child(odd):last-child {
    grid-column: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 390px) {
  body.google-play-page .nav nav,
  body.google-play-page .sp-navlinks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}