/*
 * Zentrale Smartphone-Anpassungen
 * --------------------------------
 * Diese Datei wird nach allen seitenspezifischen Styles geladen.
 * Regeln außerhalb der Media Query vermeiden, damit Desktop unverändert bleibt.
 */

@media (max-width: 600px) {
  html { scroll-padding-top: 5rem; }
  body { overflow-x: clip; }
  main > section { max-width: 100%; }

  :is(h1, h2, h3) {
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
  }

  :is(p, li, blockquote) {
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  .shell,
  .selection-header,
  .hosting-packages__header,
  .hosting-packages__grid,
  .hosting-common,
  .hosting-packages__scope,
  .hosting-packages__note,
  .price-paths > header,
  .price-paths__list,
  .individual-package__shell {
    width: min(100% - 1.25rem, 42rem) !important;
  }

  .button,
  .primary,
  .elevation-cta,
  .sf-button,
  .social-primary {
    min-height: 3.15rem;
    padding-inline: 1rem;
    text-align: center;
  }

  /* Auswahlseiten: großzügige, einspaltige Karten. */
  .selection-grid {
    grid-template-columns: 1fr !important;
    gap: .8rem !important;
    width: 100% !important;
  }

  .selection-card {
    min-height: 15rem !important;
    border-radius: 1.1rem !important;
  }

  .selection-card__copy {
    padding: 1.2rem !important;
  }

  /* Mindmap: Auf Touch-Geräten sind alle Inhalte ohne Karten-Drehung sichtbar. */
  body #digital-roadmap {
    padding: 4.75rem .7rem 4rem !important;
    gap: 2rem !important;
  }

  body #digital-roadmap .digital-roadmap__header {
    width: min(100% - .5rem, 34rem);
    margin-bottom: .5rem !important;
  }

  body #digital-roadmap #digital-roadmap-title {
    max-width: 13ch;
    font-size: clamp(2rem, 9vw, 2.65rem) !important;
    line-height: 1.06 !important;
  }

  body #digital-roadmap .digital-roadmap__header > p:last-child {
    font-size: .93rem;
    line-height: 1.6;
  }

  body #digital-roadmap .digital-roadmap__map {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "center" "web" "social" "search" "content" "campaign" "care" !important;
    gap: .75rem !important;
    width: 100% !important;
    height: auto !important;
  }

  body #digital-roadmap .digital-roadmap__center {
    width: min(76vw, 18rem) !important;
    min-height: 0 !important;
    margin: 0 auto 1.25rem !important;
    padding: 1.6rem !important;
    aspect-ratio: 1;
  }

  body #digital-roadmap .digital-roadmap__center strong {
    margin: .7rem 0 !important;
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    line-height: 1.12 !important;
  }

  body #digital-roadmap .digital-roadmap__node {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    transform: none !important;
    perspective: none !important;
  }

  body #digital-roadmap .digital-roadmap__card,
  body #digital-roadmap .digital-roadmap__node:is(:hover, :focus, :focus-visible) .digital-roadmap__card {
    display: grid;
    grid-template-columns: minmax(7.5rem, .85fr) minmax(0, 1.15fr);
    min-height: 10rem !important;
    overflow: hidden;
    border: 1px solid rgba(169, 140, 84, .35);
    border-radius: 1rem;
    background: #fffdf8;
    filter: none !important;
    transform: none !important;
  }

  body #digital-roadmap .digital-roadmap__face {
    position: relative !important;
    inset: auto !important;
    min-height: 0 !important;
    padding: 1rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    backface-visibility: visible !important;
    transform: none !important;
  }

  body #digital-roadmap .digital-roadmap__face--front {
    justify-content: center;
    border-right: 1px solid rgba(169, 140, 84, .28) !important;
    background: linear-gradient(145deg, #fffdf8, #eee5d3) !important;
  }

  body #digital-roadmap .digital-roadmap__face--front::after { display: none; }

  body #digital-roadmap .digital-roadmap__face--front strong {
    font-size: 1.15rem !important;
    line-height: 1.15 !important;
  }

  body #digital-roadmap .digital-roadmap__face--back {
    display: flex !important;
    justify-content: center;
    color: #f5f0e7 !important;
    background: #17130e !important;
  }

  body #digital-roadmap .digital-roadmap__face--back strong {
    margin-bottom: .65rem;
    font-size: .9rem !important;
  }

  body #digital-roadmap .digital-roadmap__face--list ul { gap: .38rem; }
  body #digital-roadmap .digital-roadmap__face--list li {
    padding-left: .85rem;
    font-size: .68rem !important;
    line-height: 1.35 !important;
  }

  /* Preis- und Leistungsvergleiche bleiben vollständig lesbar. */
  .hosting-packages,
  .price-detail-panel {
    padding-inline: .625rem !important;
  }

  .hosting-packages__grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .hosting-package,
  .hosting-package--premium,
  .hosting-package--bestseller {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 1.1rem !important;
    transform: none !important;
  }

  .hosting-package > header {
    min-height: 0 !important;
    padding: 1.35rem 1.1rem !important;
  }

  .hosting-package h3 {
    margin-top: 1.5rem !important;
    font-size: clamp(1.65rem, 8vw, 2.2rem) !important;
  }

  .hosting-package table {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .hosting-package th {
    width: auto;
    padding: .9rem .55rem .9rem .85rem !important;
  }

  .hosting-package th strong {
    font-size: .78rem !important;
    line-height: 1.35;
  }

  .hosting-package th small {
    font-size: .64rem !important;
    line-height: 1.45;
  }

  .hosting-package td {
    width: 3rem !important;
    padding: .75rem .45rem !important;
  }

  .hosting-package td :is(b, i, span) {
    width: 1.75rem !important;
    min-width: 1.75rem;
  }

  .hosting-package tr.hosting-package__section th {
    padding: .7rem .85rem !important;
    font-size: .55rem !important;
  }

  .hosting-package > a {
    min-height: 3.2rem;
    margin: .8rem !important;
    padding: .85rem 1rem !important;
    white-space: normal;
  }

  .hosting-common {
    grid-template-columns: 1fr !important;
    padding: 1.15rem !important;
  }

  .hosting-common ul { grid-template-columns: 1fr !important; }
  .hosting-common li { padding: .8rem !important; }

  .hosting-packages__scope {
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
    margin-top: -1rem !important;
    padding: 1rem !important;
  }

  /* Preis-Auswahl und Formulare passen ohne seitliches Scrollen. */
  .price-path > button,
  .price-path__options > button,
  .website-model-choice > button {
    min-width: 0;
    padding-inline: .85rem !important;
  }

  .price-path > button strong,
  .price-path__options strong { overflow-wrap: break-word; }

  .website-care-option,
  .event-offer-stage {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .event-offer-value { position: static !important; }

  /* Kampagnenseite: vier Bausteine und Timeline ruhig untereinander. */
  .social-campaign .elevation-hero__pillars { grid-template-columns: 1fr !important; }
  .social-campaign .elevation-hero__pillars li { min-height: 0 !important; }
  .social-campaign #elevation-12 .elevation-shell { grid-template-columns: 1fr !important; }
  .social-campaign #elevation-12 p:nth-of-type(even) { rotate: 90deg; text-align: center; }

  /* Große Bilder und Medien bleiben im sichtbaren Bereich. */
  :is(img, video, canvas, iframe) { max-width: 100%; }
}

/* Final mobile typography pass: all regular reading copy uses one size. */
@media (max-width: 600px) {
  body main p:not(.eyebrow):not([class*="kicker"]):not([class*="index"]):not([class*="label"]):not([class*="number"]):not([class*="meta"]):not([class*="price"]):not([class*="tag"]),
  body main li,
  body main blockquote {
    font-family: inherit !important;
    font-size: 1.0625rem !important;
    line-height: 1.68 !important;
  }

  body main .hosting-package th small {
    font-size: 1.0625rem !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 390px) {
  body #digital-roadmap .digital-roadmap__card {
    grid-template-columns: 1fr;
  }

  body #digital-roadmap .digital-roadmap__face--front {
    min-height: 7rem !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(169, 140, 84, .28) !important;
  }

  .hosting-package th { padding-left: .7rem !important; }
  .hosting-package td { width: 2.7rem !important; padding-inline: .3rem !important; }
}