/* Complements the shared mobile styles on the Strom & Gas pages only. */
@media (max-width: 760px) {
  :root body :is(.hero-card, .side-card, .energy-box, .request-form) {
    min-width: 0;
    padding: 20px 16px;
  }

  :root body :is(.hero, .hero-points, .energy-box-grid, .good-to-know-grid, .form-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  :root body :is(.point, .quick-note, .good-to-know) {
    min-width: 0;
    padding: 16px 14px;
  }

  :root body :is(.point strong, .point span, .quick-note-list span,
    .good-to-know-item strong, .good-to-know-item span,
    .side-highlight strong, .side-highlight span, .energy-box-list li) {
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: break-word;
  }

  :root body :is(.point strong, .good-to-know-item strong, .side-highlight strong) {
    margin-bottom: 6px;
    line-height: 1.4;
  }

  :root body .point span {
    display: block;
  }

  :root body :is(.eyebrow, .price-pill, .form-note) {
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: break-word;
  }

  :root body .eyebrow {
    padding: 8px 12px;
  }

  :root body .eyebrow .dot {
    flex: 0 0 9px;
  }

  :root body .energy-box-header {
    gap: 12px;
  }

  :root body .energy-box-header h3 {
    min-width: 0;
    font-size: 22px;
    line-height: 1.3;
    overflow-wrap: break-word;
  }

  :root body .energy-box-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  :root body .energy-box-list {
    padding-inline-start: 20px;
    padding-inline-end: 0;
  }

  :root body .energy-box-list li + li {
    margin-top: 10px;
  }

  :root body :is(.energy-box-actions .btn, .request-form .submit-btn) {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: break-word;
  }

  :root body .request-form .field {
    min-width: 0;
  }

  :root body .request-form label {
    overflow-wrap: break-word;
  }

  :root body #energieformular {
    scroll-margin-top: 84px;
  }
}

@media (max-width: 760px) and (hover: none) {
  :root body :is(.point, .side-card, .cta-card):hover {
    transform: none;
  }
}