/* ============================================================
   Pinter — Mobile layer.  MUST be the last stylesheet in <head>
   (after each page's own <style> block) so it wins on ties.
   Breakpoints: 900 (tablet-narrow) · 760 (phone) · 430 (small phone)
   ============================================================ */

/* ---------- Global overflow guard (all sizes) ---------- */
html { -webkit-text-size-adjust: 100%; }
img, svg, video, iframe { max-width: 100%; }

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

@media (max-width: 760px) {
  :root { --gutter: 18px; --container-max: 100%; }

  /* Nothing but the nav may scroll sideways */
  html, body { overflow-x: hidden; }
  .container, .container-narrow { width: 100%; max-width: 100%; }

  /* Words never get clipped, but also never split mid-word unless unavoidable */
  h1, h2, h3, h4, h5, h6, p, li, a, span, strong, em, dd, dt, figcaption, blockquote, label, button, .lede, .micro-up {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
  }

  /* ============ PROMO BAR ============ */
  .promo-bar { font-size: 10.5px; line-height: 1.5; padding: 7px 14px; }
  .promo-bar b { display: block; margin: 0 0 3px; }
  .promo-bar .sep { margin: 0 6px; }

  /* ============ NAV — the only horizontal scroller ============ */
  .nav-row {
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
    column-gap: 12px;
    padding: 10px var(--gutter) 0;
  }
  .nav-brand { flex: 1 1 auto; min-width: 0; }
  .pinter-wordmark { height: 38px; }
  .nav-right { gap: 12px; }
  .nav-lang { font-size: 11px; }
  .nav-cta-link { font-size: 11px; padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }

  /* Scroll strip: width is exactly the menu items, no trailing whitespace */
  .nav-links {
    order: 3;
    flex: 0 0 auto;
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    margin: 2px calc(var(--gutter) * -1) 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-top: 1px solid var(--color-hairline);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  /* max-content inner track — ends flush with the last item */
  .nav-links::before, .nav-links::after {
    content: "";
    flex: 0 0 var(--gutter);
    min-width: var(--gutter);
  }
  .nav-links a {
    flex: 0 0 auto;
    font-size: 13.5px;
    padding: 0 12px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
  }
  .nav-links a.is-active {
    color: var(--color-brand-espresso);
    border-bottom-color: var(--color-brand-gold);
  }
  /* The tubelight pill mis-positions inside a scroll container */
  .nav-pill-indicator { display: none !important; }

  /* ============ SECTIONS ============ */
  .section { padding: 56px 0; }
  .section-tight { padding: 40px 0; }
  .section-espresso, .section-services, .ueber-home, .featured-strip, .faq-section-wrap, .page-hero, .home-hero { overflow-x: clip; }

  .section-head { margin-bottom: 36px; max-width: 100%; }
  .section-head h2 { font-size: clamp(28px, 8.6vw, 38px); letter-spacing: -0.6px; line-height: 1.12; }
  .section-head p { font-size: 15px; }
  .section-head .micro-up, .stacked-display .micro-up, .feature-card .micro-up, .banner-champagne .micro-up { font-size: 10px; letter-spacing: 1.2px; margin-bottom: 12px; }

  /* ============ HOME HERO ============ */
  .home-hero { padding: 32px 0 72px; }
  .home-hero .hero-grid { grid-template-columns: 1fr; gap: 32px; min-height: 0; }
  .stacked-display { padding-top: 4px; }
  .stacked-display .word { font-size: clamp(38px, 12.5vw, 60px); letter-spacing: -1.4px; line-height: 0.96; }
  .stacked-display .word.indent { padding-left: 0.28em; }
  .stacked-display .word.indent2 { padding-left: 0.56em; }
  .stacked-display .tagline { font-size: 14.5px; margin-top: 20px; }
  .stacked-display .tagline::before, .stacked-display .tagline::after { margin: 0 6px; }
  .stacked-display .cta-row { margin-top: 28px; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .cta-pulse-wrap { display: flex; width: 100%; }
  .cta-pulse-wrap > * { width: 100%; }

  /* ============ BUTTONS — 44px touch minimum ============ */
  .btn-pill-dark, .btn-pill-magenta, .btn-pill-ghost, .btn-primary, .btn-secondary, .btn-ghost {
    min-height: 48px;
    padding: 14px 26px;
    font-size: 11.5px;
    letter-spacing: 1.4px;
    text-align: center;
    justify-content: center;
  }
  .atelier-mock .pill, .page-hero .stat-pill, .contact-form .topic-row > * { min-height: 40px; align-items: center; }

  /* ============ ATELIER MOCK (hero card) ============ */
  .atelier-mock { border-radius: 14px; }
  .atelier-mock .tabs { padding: 16px 14px 0; flex-wrap: wrap; gap: 6px; }
  .atelier-mock .pill { padding: 9px 14px; font-size: 12px; }
  .atelier-mock .head { padding: 14px 18px 8px; }
  .atelier-mock .head h3 { font-size: 21px; }
  .atelier-mock .head p { font-size: 12.5px; }
  .atelier-mock .stage { margin: 10px; aspect-ratio: 4 / 3; }
  .atelier-mock .callout { display: none; }
  .meister-foto-grid { gap: 5px; }
  .meister-foto-caption { padding: 20px 7px 7px; }
  .meister-foto-name { font-size: 10px; }
  .meister-foto-role { font-size: 8.5px; letter-spacing: 0.4px; }

  /* ============ TRUST BAND ============ */
  .trust-band { grid-template-columns: 1fr; margin-top: 44px; border-radius: 16px; }
  .trust-cell { padding: 26px 22px; }
  .trust-cell.materials { flex-direction: column; align-items: flex-start; gap: 18px; }
  .trust-cell.materials p { max-width: 100%; }
  .trust-cell.materials .material-stack { width: 96px; }
  .trust-cell.center { min-width: 0; border-left: 0; border-right: 0; border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); }
  .trust-cell.center .count { font-size: 36px; }
  .trust-cell.feature { padding: 26px 22px; }
  .trust-cell.feature h3 { font-size: 19px; max-width: 100%; letter-spacing: 0.3px; }

  /* ============ PAGE HERO (subpages) ============ */
  .page-hero { padding: 40px 0 36px; }
  .page-hero h1 { font-size: clamp(32px, 10vw, 48px); letter-spacing: -1.2px; line-height: 1.02; max-width: 100%; margin-bottom: 18px; }
  .page-hero .lede { font-size: 15.5px; max-width: 100%; }
  .page-hero .hero-grid { grid-template-columns: 1fr !important; gap: 22px; align-items: start; }
  .page-hero .visual { order: -1; width: 100%; }
  .page-hero .crumbs { font-size: 10px; letter-spacing: 1px; margin-bottom: 14px; }
  .page-hero .stat-pills { gap: 8px; margin-top: 22px; }
  .page-hero .stat-pill { font-size: 12px; padding: 9px 13px; }
  .page-hero .visual { aspect-ratio: 4 / 3; }

  /* ============ RIBBON / DECOR ============ */
  .ribbon-positioned { left: -30px; right: -30px; height: 130px; top: -20px; }
  .ribbon-text-fill { font-size: 11px; letter-spacing: 1.4px; }
  .visual-bg .filigree-corner { width: 100px; height: 100px; right: 12px; top: 12px; opacity: 0.3; }
  .visual-bg .p-emblem-wrap { display: none; }
  .visual-bg .mountains { height: 180px; }
  .scroll-indicator { display: none; }
  .footer .filigree, .ueber-home .filigree { height: 14px; }

  /* ============ CARD GRIDS → single / double column ============ */
  .tiles-grid, .tiles-grid.cols-3, .tiles-grid.cols-2 { grid-template-columns: 1fr; gap: 14px; }
  .news-grid, .locations-grid, .contact-grid, .split, .split-narrow, .news-feature,
  .tier-grid, .price-grid, .proc-grid, .uhrmacher-grid, .uhrmacher-card,
  .ring-brand-grid, .featured-grid, .ueber-grid, .home-faq-grid, .banner-champagne,
  .banner-cta, .newsletter-strip, .bleistift-irene-grid, .bleistift-werkstatt {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .gallery-grid, .gallery-grid.cols-4, .materials-grid, .ring-picker, .brand-grid,
  .process-steps, .ueber-portrait-pair {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .ueber-grid .masters, .banner-champagne .tiles { grid-template-columns: 1fr; gap: 12px; }

  .tile { padding: 22px 20px; }
  .tile h4 { font-size: 19px; }
  .tile p { font-size: 13.5px; }
  .img-card .body { padding: 18px 18px; }
  .img-card .media .overlay-title { font-size: 18px; left: 14px; right: 14px; bottom: 14px; }
  .feature-card { padding: 26px 22px; border-radius: 14px; }
  .feature-card h3 { font-size: 24px; }
  .featured-card, .featured-card.large { min-height: 300px; padding: 20px; }
  .featured-card h4, .featured-card.large h4 { font-size: 20px; }
  .featured-card .ext { font-size: 12.5px; max-width: 100%; }

  /* ============ BANNERS / CTA STRIPS ============ */
  .banner-champagne { padding: 32px 22px; border-radius: 16px; }
  .banner-champagne h2 { font-size: clamp(26px, 8.4vw, 34px); letter-spacing: -0.5px; }
  .banner-champagne p { font-size: 15px; max-width: 100%; }
  .banner-cta { padding: 32px 22px !important; }
  .cta-btn-row { flex-wrap: wrap; }
  .cta-btn-row a { width: 100%; text-align: center; }
  .newsletter-strip { padding: 32px 22px; margin: 0 var(--gutter) 56px; border-radius: 16px; }
  .newsletter-strip h3 { font-size: 24px; }
  .newsletter-strip p { max-width: 100%; font-size: 14px; }
  .newsletter-strip .form-row { flex-direction: column; border-radius: 16px; padding: 8px; max-width: 100%; gap: 6px; }
  .newsletter-strip input { width: 100%; padding: 13px 14px; }
  .newsletter-strip button { width: 100%; min-height: 46px; }

  /* ============ HOME · ÜBER / PORTRAITS ============ */
  .ueber-home { padding: 64px 0; }
  .ueber-grid { gap: 36px; }
  .ueber-grid h2 { font-size: clamp(28px, 8.6vw, 38px); }
  .ueber-grid p { font-size: 15px; max-width: 100%; }
  .ueber-portrait-hans { margin-top: 0; }
  .ueber-portrait-stats { grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding-top: 16px; }
  .ueber-portrait-stats .stat-num { font-size: 24px; }
  .ueber-portrait-stats .stat-lbl { font-size: 8.5px; letter-spacing: 0.5px; }
  .ueber-grid .quote-card { padding: 26px 22px; }
  .ueber-grid .quote-card .quote { font-size: 20px; }
  .ueber-grid .quote-card .stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ueber-grid .quote-card .stat-num { font-size: 26px; }
  .ueber-grid .quote-card .stat-lbl { font-size: 9.5px; letter-spacing: 0.5px; }

  /* ============ FAQ ============ */
  .home-faq-grid { gap: 32px; }
  .home-faq-grid h2 { font-size: clamp(26px, 8.4vw, 36px); }
  .faq-item-row { gap: 14px; }
  .faq-item h4 { font-size: 16px; }
  .faq-item .ans { max-width: 100%; font-size: 14.5px; }
  .faq-item.is-open .ans { max-height: 420px; }
  #faq-mouse-glow { display: none; }

  /* ============ TIMELINE (Über uns) ============ */
  .timeline-item { grid-template-columns: 48px 1fr; gap: 14px; margin-bottom: 28px; }
  .timeline-item .card, .timeline-item.left .card, .timeline-item.right .card { grid-column: 2; }
  .timeline::before { left: 24px; }
  .timeline-item .year-bubble { width: 48px; height: 48px; font-size: 11px; }

  /* ============ PROCESS / SKETCH ============ */
  .process-step { border-right: 0; border-bottom: 1px solid var(--color-hairline); padding: 20px 14px; }
  .sketch-pair, .sketch-pair.reverse { grid-template-columns: 1fr; gap: 18px; }
  .pair-arrow, .sketch-pair.reverse .pair-arrow { transform: rotate(90deg); }
  .proc-grid::before { display: none; }
  .proc-col:first-of-type, .proc-col:last-of-type { grid-column: 1; }
  .ab-disclaimer { grid-template-columns: 1fr; gap: 12px; padding: 20px 20px; }

  /* ============ FORMS / KONTAKT ============ */
  .contact-form .row { grid-template-columns: 1fr; }
  .input, .textarea { font-size: 16px; min-height: 48px; } /* 16px stops iOS zoom-on-focus */
  .textarea { min-height: 130px; }
  .location-card .info .hours-grid { grid-template-columns: 68px 1fr; font-size: 13px; }
  .google-map-wrap, .map-fallback { aspect-ratio: 4 / 3; min-height: 240px; }

  /* ============ RINGE / KONFIGURATOR ============ */
  .konfigurator-wrap { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  #trauringkonfigurator { max-width: 100%; overflow-x: auto; }

  /* ============ FOOTER ============ */
  .footer { padding: 56px 0 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 36px; }
  .footer-grid > *:first-child { grid-column: 1 / -1; }
  .footer .desc, .footer .addr { max-width: 100%; }
  .footer a { padding: 9px 0; min-height: 40px; display: flex; align-items: center; }
  .footer .bottom { flex-direction: column; gap: 8px; font-size: 11.5px; }

  /* ============ GSAP / reveal animations: never widen the page ============ */
  [data-gsap], .anim-reveal, .gs-reveal, .reveal { max-width: 100%; }
}

@media (max-width: 430px) {
  :root { --gutter: 15px; }
  .promo-bar { font-size: 10px; }
  .pinter-wordmark { height: 34px; }
  .nav-links a { font-size: 13px; padding: 0 10px; }
  .stacked-display .word { font-size: clamp(33px, 12vw, 46px); }
  .gallery-grid, .gallery-grid.cols-4, .materials-grid, .ring-picker, .brand-grid, .process-steps { grid-template-columns: 1fr; }
  .ueber-portrait-pair { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > *:first-child { grid-column: 1; }
  .trust-cell.center .count { font-size: 32px; }
  .ueber-portrait-stats .stat-num { font-size: 21px; }
}
