/* v58 · Visual & mobile quality pass
   Shared responsive refinements across all site templates. */

/* Dedicated action links should feel tappable, not like inline copy. */
@media (max-width:960px){
  .text-link{
    min-height:40px;
    padding:6px 0;
    line-height:1.4;
  }
}

@media (max-width:680px){
  /* Reliable touch targets for mobile actions and navigation. */
  .text-link{
    min-height:44px;
    padding:9px 0;
  }
  .menu-toggle{
    min-width:44px;
    min-height:44px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .mobile-panel nav a{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .footer-links{gap:0}
  .footer-links a{
    min-height:40px;
    display:flex;
    align-items:center;
    padding:5px 0;
  }

  /* Homepage reference slider: keep one project visually complete.
     The previous right padding exposed fragments of the following slide. */
  .project-slider-viewport{
    padding-right:0;
    scroll-padding-left:18px;
  }
  .project-slide-copy .text-link{margin-top:4px}

  /* Inquiry: orientation link and form controls stay easy to hit. */
  .field-hint a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:6px 0;
  }
  .project-form input:not([type="checkbox"]):not([type="file"]),
  .project-form select{
    min-height:50px;
  }

  /* Price examples: captions remain readable on a phone. */
  .cost-case-media figcaption{
    font-size:13px;
    line-height:1.5;
  }

  /* 3D planning consent copy was too small on mobile. */
  .plan-video-cover .plan-consent{
    font-size:12px!important;
    line-height:1.6;
  }
  .plan-video-cover>p:last-child{font-size:12px!important}
  .plan-video-meta{font-size:13px!important;line-height:1.6}
  .plan-video-meta a{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    margin-top:5px;
  }
}

/* Very narrow devices (320–340px): prevent long German compounds and
   intrinsic grid sizing from creating horizontal scrolling. */
@media (max-width:340px){
  h1{font-size:42px!important}
  h2{font-size:32px!important}
  h1,h2,h3{
    overflow-wrap:break-word;
    hyphens:auto;
  }

  /* Cost cases: force the single-column grid to respect container width. */
  .cost-case,
  .cost-case:nth-of-type(even){
    grid-template-columns:minmax(0,1fr)!important;
  }
  .cost-case-media,
  .cost-case-copy{min-width:0}

  /* Schornsteinbau is intentionally kept as a readable word instead of
     allowing the grid track to expand beyond the viewport. */
  .schornsteine-v31 .ofen-hero{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .schornsteine-v31 .ofen-hero>*{min-width:0}
  .schornsteine-v31 .ofen-hero h1{font-size:39px!important}

  .projects-head h2{overflow-wrap:anywhere}
}

@media (max-width:340px){
  /* Older project templates also contain grid tracks whose min-content
     width can be wider than a 320px phone. Keep the case-study content
     inside the same mobile container as the rest of the site. */
  .project-hero-copy,
  .project-story,
  .project-technical,
  .project-scope{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .project-hero-copy>*,
  .project-story>*,
  .project-technical>*,
  .project-scope>*{
    min-width:0;
  }
  .project-scope-list,
  .project-scope-item{min-width:0}
  .project-scope-item strong{min-width:0;overflow-wrap:break-word}
}