/* ============================================================
   gunBOX — responsive layer (loaded last; overrides shared)
   ≥1240 as designed · 768–1239 tablet · <768 mobile
   ============================================================ */

/* mobile menu element is desktop-hidden by default */
.nav-mobile { display: none; }

/* ───────────── TABLET (≤1239): hero stacks; headlines scale; bigger reading text.
   The two-column content sections stay two-column down to 1024 (see ≤1023 below)
   so landscape iPads keep the proper layout instead of a sparse single column. ─── */
@media (max-width: 1239px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-left { padding: 72px 0 56px; }
  .hero-right { border-left: none; border-top: 1px solid var(--steel-mid); }
  .hero h1 { font-size: clamp(34px, 5.9vw, 64px); }
  .op-hero { padding-block: 72px 44px; }
  .op-hero h1 { font-size: clamp(34px, 5.9vw, 64px); }
  html[lang^="fr"] .hero h1, html[lang^="fr"] .op-hero h1 { font-size: clamp(34px, 5.3vw, 58px); }
  .s-head h2 { font-size: 40px; }
  .page-head h1 { font-size: 56px; }
  .cta h2 { font-size: 46px; }
  .cta-strip h2 { font-size: 40px; }
  .pull blockquote { font-size: 48px; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

  /* more comfortable reading size on tablets */
  body { font-size: 16px; }
  .pillar p, .svc-row p, .svc-teaser .it p, .marg p, .cta p, .cta-strip p,
  .contact-card p, .info-block p, .faq-a-inner .body, .page-head .lede, .hero-lede { font-size: 16px; }
  .clause .body p, .clause .body ul li, .topic .body p, .topic ul li, .kontakt-main .lead { font-size: 16.5px; }
}

/* ───────────── ≤1023 (portrait iPad / small): collapse to single column ───────────── */
@media (max-width: 1023px) {
  .s-head, .s-body, .cta-strip-inner, .cta-inner, .callout-inner,
  .doc-inner, .kontakt-layout { grid-template-columns: 1fr; gap: 32px; }
  .s-head { margin-bottom: 32px; }
  /* single column → titles span it (undo the desktop content-column placement) */
  .s-head h2 { grid-column: auto; }

  /* doc TOC: top block, not sticky sidebar */
  .doc-toc { position: static; margin-bottom: 16px; }
  .doc-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }

  /* kontakt: single column with a top rule (cells carry their own gutter) */
  .kontakt-main { padding: 56px 32px 32px; }
  .kontakt-info { border-left: none; border-top: 1px solid var(--rule); padding: 40px 32px 56px; }

  /* services rows (if present): drop spacer columns */
  .svc-row { grid-template-columns: 1fr auto; gap: 16px 24px; }
  .svc-row .num { grid-row: 1; padding-top: 0; }
  .svc-row .tag-cell { grid-row: 1; text-align: right; padding-top: 0; }
  .svc-row > div:nth-child(3) { grid-column: 1 / -1; }
  .svc-row .meta { grid-column: 1; }
  .svc-row .price { grid-column: 2; text-align: right; }
}

/* ───────────── TABLET NAV (768–1023): keep the menu visible, tighten it so the
   longest language fits; drop the (redundant) Anfrage CTA — Kontakt is in the menu ─── */
@media (min-width: 768px) and (max-width: 1023px) {
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 13px; }
  .nav-actions { gap: 12px; }
  .nav-actions .btn { display: none; }
  /* spec overview: 2 columns on portrait tablet */
  .spec .law-items { grid-template-columns: 1fr 1fr; }
}

/* ───────────── NAV → BURGER (phones only, <768) ───────────── */
@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-actions .lang, .nav-actions .btn, .nav-actions .lang-switch { display: none; }
  .nav-inner { justify-content: flex-start; gap: 14px; }
  .nav-actions { margin-left: auto; }
  .nav-burger { display: block; }
  .nav-mobile { display: block; background: var(--steel-deep); border-top: 1px solid var(--steel-mid); padding: 8px 32px 24px; }
  .nav-mobile[hidden] { display: none; }
  .nav-mobile a.mlink { display: block; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.12); font: 500 18px/1 var(--brand); color: var(--paper); letter-spacing: -0.01em; }
  .nav-mobile a.mlink:hover { text-decoration: none; }
  .nav-mobile .m-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
  .nav-mobile .m-langs a { font-size: 14px; }
  .nav-mobile .btn { background: var(--paper); color: var(--steel-deep); justify-content: center; align-self: stretch; }
}

/* ───────────── MOBILE (<768) ───────────── */
@media (max-width: 767px) {
  .nav-mobile { padding-left: 20px; padding-right: 20px; }
  /* tighter gutters: 32 → 20 */
  .nav-inner, .page-head-inner, .s-inner,
  .cta-strip-inner, .cta-inner, .callout-inner, .pull-inner,
  .foot-grid, .foot-bottom, .ptable, .doc-inner, .topic-inner, .legal-notice-inner,
  .preview-banner-inner, .preview-note-wrap { padding-left: 20px; padding-right: 20px; }
  .kontakt-main .preview-note-wrap { padding-left: 0; padding-right: 0; }
  /* Vorschau band: tag over the text, so the sentence keeps the full width */
  .preview-banner-inner { flex-direction: column; align-items: flex-start; gap: 7px; }
  .preview-banner p { font-size: 12px; line-height: 1.5; }
  .kontakt-main { padding-left: 20px; padding-right: 20px; }
  .kontakt-info { padding-left: 20px; padding-right: 20px; }

  /* page-head hero + topic + price table: hold two columns through tablet, collapse on phones */
  .page-head-grid, .topic-inner, .ptable-group { grid-template-columns: 1fr; gap: 32px; }
  .page-head-grid > :last-child { grid-column: auto; }

  section.s { padding: 56px 0; }

  /* price column may wrap on stacked mobile (long translated values) */
  .ptable-row .price { text-align: left; }

  /* headlines down a notch (hero h1 carries forced <br> lines → keep it inside 100vw) */
  .hero h1 { font-size: 34px; }
  .hero-lede, .hero-right .footnote { max-width: 100%; }
  .hero-left { padding: 48px 0 40px; }
  .hero-right { padding: 40px 24px; }
  .hero-right .grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .page-head { padding: 48px 0 40px; }
  .page-head h1 { font-size: 40px; }
  .s-head h2 { font-size: 32px; }
  .cta h2 { font-size: 36px; }
  .cta-strip h2 { font-size: 32px; }
  .cta-card { padding: 28px; }
  .pull { padding: 64px 0; }
  .pull blockquote { font-size: 32px; }
  .pull .quote-mark { font-size: 120px; }

  /* multi-col card grids → single column */
  .pillars, .law-items, .law-items.two, .contact-cards, .callout .neg-list, .svc-teaser { grid-template-columns: 1fr; }
  /* single column has no trailing orphan → drop the filler cell */
  .spec .law-items::after { display: none; }
  /* drop the desktop pillar subgrid: stacked cards are independent, no row sharing */
  .pillars { grid-template-rows: none; row-gap: 0; }
  .pillar { display: flex; flex-direction: column; grid-row: auto; gap: 20px; min-height: 0; padding: 28px; }
  .callout-inner { padding: 40px 20px; }
  .hero-right .grid { grid-template-columns: 1fr; }

  /* services rows */
  .svc-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .svc-row .tag-cell { text-align: left; }
  .svc-row .price { text-align: left; grid-column: 1; }

  /* price table → stacked */
  .ptable-row { grid-template-columns: 1fr; gap: 6px; }
  .ptable-row .price { text-align: left; }
  .ptable-row .price.price-stack { justify-content: start; }
  .ptable-group .gh h2 { font-size: 26px; }

  /* doc: clause head stacks, body flush-left */
  .doc-toc ol { grid-template-columns: 1fr; }
  .clause .head { flex-direction: column; gap: 4px; }
  .clause .num { flex-basis: auto; padding-top: 0; }
  .clause .body { padding-left: 0; }

  /* faq tighter */
  .faq-head, .faq-a-inner { grid-template-columns: 36px 1fr 24px; gap: 14px; }

  /* footer 1 column */
  .foot-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; }
  .foot-bottom { grid-template-columns: 1fr; gap: 12px; text-align: left; }
  .foot-bottom > div:last-child { text-align: left; }
  .foot-bottom .cookie-line { text-align: left; }

  .op-head, .op-hero, .op-signup, .op-mail-main { padding-inline: 20px; }
  .op-mail-main { padding-block: 56px 32px; }
  .op-mail-main .signup-status.is-standalone { font-size: var(--fs-2xl); max-width: 100%; }
  .op-hero { padding-block: 48px 40px; }
  .op-hero h1 { font-size: 34px; }
  .op-lede { max-width: 100%; }
  .op-signup { padding-block: 48px; }
  .op-site-foot .foot-grid { grid-template-columns: 1fr; }
  .signup-row { flex-direction: column; }
  .signup-row .btn { justify-content: center; }
}

/* very small phones */
@media (max-width: 400px) {
  .hero h1, .op-hero h1 { font-size: 29px; }
  .pull blockquote { font-size: 27px; }
}

/* ─── Price calculator ─── */
@media (max-width: 1023px) {
  .calc-result { grid-template-columns: 1fr; }
  /* groups collapse here — stack the Total heading (full-width steel rule, like the sections)
     above its amount, which keeps the 170px price column so it lines up with the rows. */
  .calc-first { grid-template-columns: 1fr 170px; gap: 8px 24px; }
  .calc-first .pos { grid-column: 1 / -1; }
  .calc-first .price { grid-column: 2; justify-self: stretch; width: auto; }
  .calc-first::before { display: none; }
}
@media (max-width: 767px) {
  .price-calc-inner { padding-left: 20px; padding-right: 20px; }
  .calc-period { display: flex; width: 100%; }
  .calc-period button { flex: 1 1 auto; text-align: center; }
  /* Stack each weapon row: controls go full width, remove button hugs the header line. */
  .calc-weapon { gap: 10px 12px; }
  .calc-w-typesel, .calc-w-sizesel { flex: 1 1 100%; }
  .calc-w-box, .calc-w-verschluss { flex: 1 1 auto; }
  .preise-switch-inner { padding-left: 20px; padding-right: 20px; }
}