/* Service Producer – Mobile Upgrade v2.1
   Safe responsive override. Upload this file next to index.html and link it after all other CSS.
   Purpose: remove horizontal overflow, keep images inside layout, improve phone/tablet spacing,
   fix the hero heading not shrinking on phones, and add a working mobile navigation menu.

   Changes vs v2.0:
   - Corrected selectors that never matched the real markup (.strip -> .metric-strip,
     .metric strong -> .mini strong, removed .hero-panel / .hero .container which don't exist
     in this page) so the rules that were silently doing nothing now actually apply.
   - The hero heading (<h1 class="hero-title">) has its size set by a CLASS selector in the
     main stylesheet, which beats a bare "h1" selector in specificity. The old file's h1 rules
     were therefore never applied on phones. Now targeting .hero-title directly so the
     headline actually shrinks on small screens instead of staying fixed at 64px.
   - Added a real mobile navigation menu (hamburger button + slide-down panel). Previously the
     nav links were simply hidden below 1100px with no way to reach them on phones/tablets.
   - Reduced the fixed min-height on .card/.service on phones so single-column cards don't
     leave large empty gaps.
   - Left-aligned card text on phones instead of justified text, which avoids uneven word
     spacing ("rivers") in narrow columns.
*/

:root{
  --sp-mobile-gutter: clamp(16px, 5vw, 24px);
}

/* Global overflow protection */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body{
  min-width: 0;
}

*, *::before, *::after{
  box-sizing: border-box;
}

img, svg, video, canvas, iframe{
  max-width: 100%;
  height: auto;
}

/* Long links / addresses / legal text should not push the viewport */
a, p, span, strong, address, li{
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Headings: do NOT force overflow-wrap:anywhere at desktop/tablet widths.
   It was causing large display headlines to break mid-word even when the
   word fit fine with normal wrapping (e.g. "MÖGLICH." -> "MÖGLIC"/"H."),
   which reads as broken/unprofessional. Normal wrapping only breaks at
   word boundaries, which is what we want here. */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *{
  overflow-wrap: normal;
  word-break: normal;
}

/* Containers never exceed viewport */
.container,
.nav,
.header,
.hero,
.metric-strip,
.contact,
.legal,
.footer,
section,
main{
  max-width: 100%;
}

/* Fix common 100vw / transform / background overflow issues */
.hero,
.dark-section,
.contact,
.metric-strip{
  width: 100%;
  overflow: hidden;
}

.container{
  width: min(1240px, 100%);
}

/* Header / navigation */
.nav{
  width: 100%;
  min-width: 0;
}

.logo,
.navlinks,
.lang{
  min-width: 0;
}

.logo span:last-child{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Buttons and actions */
.actions{
  max-width: 100%;
}

.btn{
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* Grid/flex children need min-width:0 to avoid pushing right side */
.grid-3 > *,
.grid-2 > *,
.service-list > *,
.split > *,
.contact-box > *,
.metric-strip .container > *,
.card,
.service,
.nda-box,
.address{
  min-width: 0;
}

/* Background-image blocks must stay inside the design */
.photo{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.photo:not(.events-photo){
  background-size: cover;
  background-position: center;
}

/* Image cards */
.image-card{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.image-card img{
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ---------- Mobile navigation menu ---------- */
/* Nav links are already hidden by the main stylesheet at <=1100px (.navlinks>a{display:none}).
   This adds the hamburger button + panel that replaces them, so every page section stays
   reachable on tablets and phones. Hidden entirely above 1100px. */

.menu-toggle{
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--black, #050505);
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.menu-toggle span{
  display: block;
  width: 20px;
  height: 2px;
  background: var(--black, #050505);
  transition: transform .2s ease, opacity .2s ease;
}

.menu-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity: 0; }
.menu-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Quiet dropdown, deliberately reusing the SAME typography and hover treatment
   as the existing desktop .navlinks a (small tracked uppercase caps + a gold
   underline that slides in) instead of inventing a new, louder style. It sits
   inside .header, right after .nav, and simply grows the sticky header's own
   height open/closed — no overlay, no takeover, nothing that competes with
   the rest of the page. */
.mobile-menu{
  display: none;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  background: var(--paper, #fffaf0);
  border-top: 0 solid var(--line, rgba(5,5,5,.16));
  transition: max-height .25s ease;
}

.mobile-menu a{
  position: relative;
  display: block;
  width: 100%;
  padding: 17px var(--sp-mobile-gutter);
  border-bottom: 1px solid var(--line, rgba(5,5,5,.16));
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink, #0d0d0d);
}

/* Same English-only display:inline-flex!important conflict as the desktop
   nav (see the media block above): without this, the "en" copies of these
   links (Services/Logistics/Contact) lose their full-width block layout the
   moment English is active. This must stay scoped to "html[lang=en] ...
   [data-lang=en]" specifically — an unscoped "#mobileMenu a{display:block}"
   would also out-specificity the rule that hides the *other* language's
   copies, and both German and English links would show at once. */
html[lang="en"] #mobileMenu a[data-lang="en"]{
  display: block !important;
}

.mobile-menu a:after{
  content: "";
  position: absolute;
  left: var(--sp-mobile-gutter);
  right: var(--sp-mobile-gutter);
  bottom: 0;
  height: 1px;
  background: var(--gold, #c8a35d);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.mobile-menu a:active:after,
.mobile-menu a:focus-visible:after{
  transform: scaleX(1);
}

.mobile-menu.open{
  display: flex;
  max-height: 70vh;
  overflow-y: auto;
  border-top-width: 1px;
}

@media (min-width: 1101px){
  .mobile-menu{ display: none !important; }
}

/* Nav: hamburger + panel take over exactly where the main stylesheet hides
   the desktop nav links (<=1100px), so there is never a gap where no
   navigation is reachable at all (this was the main bug in v2.0). */
@media (max-width: 1100px){
  .menu-toggle{
    display: flex;
  }

  .mobile-menu{
    display: flex;
  }

  /* Main stylesheet bug that only shows up in English: the language switch
     forces every a[data-lang="en"] to display:inline-flex!important
     (html[lang="en"] a[data-lang="en"]{display:inline-flex!important}) so it
     can sit inline in the desktop nav row. That !important rule has higher
     specificity than the plain ".navlinks>a{display:none}" rule below 1100px,
     so on English it was winning and the desktop nav links (Services,
     Logistics, Contact) were popping back into the header on phones/tablets,
     pushing it wider than the screen. Beat it here with a selector of higher
     specificity so English behaves exactly like German again. */
  html[lang="en"] .navlinks > a[data-lang="en"]{
    display: none !important;
  }
}

/* Tablet */
@media (max-width: 1020px){
  .hero{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .split,
  .contact-box{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .grid-3,
  .grid-2,
  .service-list,
  .metric-strip .container{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Phones */
@media (max-width: 680px){
  html, body{
    overflow-x: hidden;
  }

  .nav{
    padding-inline: var(--sp-mobile-gutter);
    gap: 12px;
  }

  .logo{
    max-width: calc(100vw - 170px);
    gap: 10px;
  }

  .logo-mark{
    flex: 0 0 auto;
  }

  .navlinks{
    flex: 0 0 auto;
  }

  .navlinks > a{
    display: none !important;
  }

  .lang{
    margin-left: 0;
  }

  .lang button{
    padding: 7px 9px;
  }

  .container{
    padding-inline: var(--sp-mobile-gutter);
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .hero .hero-copy{
    padding-top: 76px;
    padding-bottom: 68px;
  }

  /* Hero headline: targets the real class so this actually overrides the
     main stylesheet's fixed 64px on phones and keeps scaling down smoothly. */
  .hero-title{
    font-size: clamp(40px, 12vw, 52px);
    line-height: .96;
    letter-spacing: -.055em;
    max-width: 100%;
  }

  h2{
    font-size: clamp(31px, 9vw, 42px);
    line-height: 1.06;
    letter-spacing: -.045em;
  }

  h3{
    font-size: 21px;
  }

  p,
  .lead{
    font-size: 17px;
  }

  .service p,
  .card p,
  .legal p{
    font-size: 15.5px;
  }

  /* Justified text in narrow single-column cards creates uneven gaps between
     words ("rivers"); left alignment reads better on phones. */
  .card p{
    text-align: left;
    text-justify: auto;
  }

  /* Cards had a fixed 270px/214px min-height for the 3-4 column desktop grid;
     in the 1-column mobile layout that just leaves empty space under short text. */
  .card,
  .service{
    min-height: auto;
  }

  .actions{
    width: 100%;
  }

  .btn{
    width: 100%;
    min-height: 52px;
    padding-inline: 18px;
  }

  .metric-strip .container,
  .grid-3,
  .grid-2,
  .service-list,
  .reference-mosaic{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .split{
    gap: 0;
  }

  .photo{
    min-height: 280px;
  }

  .mosaic-item,
  .mosaic-item.tall{
    min-height: 280px;
    grid-row: auto;
  }

  .image-card img{
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .image-card .content{
    padding: 22px;
  }

  .nda-box{
    padding: 28px 22px;
  }

  .contact-box{
    gap: 1px;
  }

  .address{
    padding: 22px;
  }

  .footer{
    padding-inline: var(--sp-mobile-gutter);
  }
}

/* Very small phones */
@media (max-width: 344px){
  /* Extremely narrow phones only: without this, a single long compound
     word (e.g. "produktionsfähig.") can be wider than the column and get
     silently clipped by the global overflow-x:clip rule instead of
     wrapping. At 345px+ the word already fits on its own line normally,
     so this must stay scoped tightly to avoid reintroducing the
     mid-word breaks fixed above. */
  h1, h2, h3, h4, h5, h6,
  h1 *, h2 *, h3 *, h4 *, h5 *, h6 *{
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px){
  .logo span:last-child{
    max-width: 130px;
  }

  .hero-title{
    font-size: 38px;
  }

  .container{
    padding-inline: 16px;
  }

  .card,
  .service{
    padding: 22px;
  }
}

/* Fallback for older browsers without overflow: clip */
@supports not (overflow: clip){
  html, body{
    overflow-x: hidden;
  }
}