/* phone.css — Mobilschicht. Spezifität html body, damit der Inline-vw-Feinschliff verliert. */

/* Startseiten (mira-home): nicht die alte Cream-Rahmen-Logik aufzwingen. */
@media (max-width: 760px) {
  html body.mira-home,
  html body.mira-home * {
    max-width: 100%;
  }
  html body.mira-home .home-stage,
  html body.mira-home .home-stage-media {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body.mira-home [style*="display:grid"],
  html body.mira-home .home-after-inner {
    grid-template-columns: unset !important;
  }
  html body.mira-home .home-path-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}

@media (max-width: 760px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 !important;
  }
  html body,
  html body *,
  html body *::before,
  html body *::after {
    box-sizing: border-box !important;
  }

  /* Äußerer Cream-Rahmen. width:auto, sonst addiert sich 100% plus Padding
     auf 430px in einem 390px-Schirm und overflow-x:clip schneidet jede Zeile. */
  html body > div {
    padding: 8px !important;
    max-width: 100% !important;
    width: auto !important;
  }
  html body > div > div[style*="border"] {
    padding: 0 !important;
    max-width: 100% !important;
    width: auto !important;
  }

  html body header {
    padding: 16px 8px 0 !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body header > a {
    font-size: clamp(1.35rem, 7vw, 1.7rem) !important;
    letter-spacing: 0.08em !important;
    padding-left: 0 !important;
    max-width: 100% !important;
    line-height: 1.15 !important;
  }
  html body header > div:first-child {
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    line-height: 1.4 !important;
  }
  html body header > div[style*="max-width"] {
    max-width: 100% !important;
  }

  html body main,
  html body footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
    width: auto !important;
  }
  /* Der 760er-Feinschliff setzt main > div auf 20px — das schneidet Text. */
  html body main > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  html body p,
  html body li,
  html body td,
  html body h1,
  html body h2,
  html body h3,
  html body .mira-brief,
  html body .mira-brief p,
  html body .blog-page,
  html body .blog-hero,
  html body .home-copy,
  html body .home-note,
  html body article {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  /* Flex-Items default min-width:auto — der Text ragt dann über den Schirm
     und overflow-x:clip schneidet ihn ab. */
  html body main,
  html body main div,
  html body main p,
  html body [style*="display:flex"],
  html body [style*="display:grid"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body main div[style*="width:100%"],
  html body main div[style*="max-width:52"] {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Jedes Grid einspaltig — auch 0.72fr 1.28fr auf Buchseiten. */
  html body [style*="display:grid"],
  html body [style*="display: grid"],
  html body .hub,
  html body .blog-grid,
  html body .home-types {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html body [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Der Feinschliff macht aus padding:1.389vw 5vw 4.167vw 5vw plötzlich 14px rundum
     oder aus 5.278vw 47px — beides frisst den Schirm. */
  html body [style*="padding:5.556vw"],
  html body [style*="padding:5.278vw"],
  html body [style*="padding:5.139vw"],
  html body [style*="padding:4.167vw"],
  html body [style*="padding:1.389vw"],
  html body [style*="padding:5vw"] {
    padding: 16px 0 !important;
  }

  html body img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Solo-Buchcover volle Breite. */
  html body main img[src*="/assets/cover"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-inline: auto !important;
    display: block !important;
  }
  html body .home-covers:not(:has(> :nth-child(2))),
  html body .home-room-covers:not(:has(> :nth-child(2))) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .home-covers:not(:has(> :nth-child(2))) a,
  html body .home-covers:not(:has(> :nth-child(2))) span,
  html body .home-room-covers:not(:has(> :nth-child(2))) a,
  html body .home-room-covers:not(:has(> :nth-child(2))) span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  html body .home-covers:not(:has(> :nth-child(2))) img,
  html body .home-room-covers:not(:has(> :nth-child(2))) img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Promo-Leiste: umbrechen, nicht abschneiden. */
  html body > div > a {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    letter-spacing: 0.04em !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    font-size: 0.75rem !important;
    max-width: 100% !important;
    width: auto !important;
    gap: 6px 8px !important;
    white-space: normal !important;
    height: auto !important;
  }
  html body > div > a span {
    flex: 0 1 auto !important;
    white-space: normal !important;
    letter-spacing: 0.04em !important;
  }

  html body .blog-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
  html body .blog-page,
  html body .blog-page *,
  html body .mira-brief,
  html body .mira-brief p {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body .home-covers:has(> :nth-child(2)) img {
    min-width: 56px !important;
    width: 72px !important;
    max-width: 72px !important;
  }
  html body > div > a,
  html body > div > a span {
    white-space: normal !important;
    max-width: 100% !important;
  }
  html body .blog-jump {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  html body .blog-jump a {
    max-width: 100% !important;
  }

  html body footer {
    padding-top: 20px !important;
    padding-bottom: 28px !important;
  }
  html body footer nav,
  html body footer nav a,
  html body footer nav span {
    font-size: 0.875rem !important;
    min-height: 44px !important;
  }

  html body h1 {
    font-size: clamp(1.618rem, 8vw, 2.4rem) !important;
    line-height: 1.12 !important;
    overflow-wrap: break-word !important;
  }
  html body h2 {
    font-size: clamp(1.25rem, 6vw, 1.55rem) !important;
    overflow-wrap: break-word !important;
  }

  html body nav a,
  html body nav span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
}