/* Responsive overrides für Hamm Systembau.
   Die Komponenten setzen Grids/Paddings als React-Inline-Styles; wir
   überschreiben per [style*=]-Attributselektor. !important nötig, um
   Inline-Styles zu gewinnen. Reihenfolge = Kaskade, spätere Regeln gewinnen. */

/* ── Basis ───────────────────────────────────────────────── */
*{-webkit-text-size-adjust:100%}
img,video,iframe{max-width:100%}
body{text-wrap:pretty}
a{color:inherit}
a:hover{color:#D19A00}

/* ============================================================
   TABLET — ≤ 960 px
   ============================================================ */
@media (max-width:960px){
  /* Zweispaltige Splits → einspaltig */
  div[style*="grid-template-columns: 1.1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.1fr"],
  div[style*="grid-template-columns: 1.4fr 1fr"],
  div[style*="grid-template-columns: 1.3fr 1fr"],
  div[style*="grid-template-columns: 1.5fr 1fr"],
  div[style*="grid-template-columns: 1.6fr 1fr"],
  div[style*="grid-template-columns: 1.2fr 1fr"],
  div[style*="grid-template-columns: 1fr 2fr"],
  div[style*="grid-template-columns: 2fr 1fr 1fr 1fr"]{grid-template-columns:1fr!important;gap:40px!important}

  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns: repeat(5, 1fr)"]{grid-template-columns:1fr 1fr!important}

  /* Trennlinien: aus vertikal wird horizontal, sobald umgebrochen wird */
  div[style*="grid-template-columns: repeat(5, 1fr)"]>div{border-right:none!important;border-bottom:1px solid rgba(255,255,255,.10)}
  div[style*="grid-template-columns: repeat(4, 1fr)"]>div{border-right:none!important;border-bottom:1px solid #e6e5e2}
  div[style*="grid-template-columns: repeat(4, 1fr)"]>div:last-child{border-bottom:none}

  /* Breite Referenztabelle */
  a[style*="grid-template-columns: 80px 2fr 1.2fr 1fr 1.5fr 40px"],
  div[style*="grid-template-columns: 80px 2fr 1.2fr 1fr 1.5fr 40px"]{grid-template-columns:1fr 1fr!important;row-gap:6px!important}

  /* Typo-Stufen */
  body div[style*="font-size: 84px"]{font-size:56px!important;letter-spacing:-1.5px!important}
  body div[style*="font-size: 72px"]{font-size:48px!important;letter-spacing:-1px!important}
  body div[style*="font-size: 60px"]{font-size:44px!important;letter-spacing:-1px!important}
  body div[style*="font-size: 52px"]{font-size:38px!important;letter-spacing:-1px!important}
  body div[style*="font-size: 48px"]{font-size:34px!important;letter-spacing:-.8px!important}
  body div[style*="font-size: 44px"]{font-size:32px!important;letter-spacing:-.6px!important}
  body div[style*="font-size: 36px"]{font-size:28px!important;letter-spacing:-.4px!important}

  /* Lange deutsche Komposita dürfen umbrechen statt zu überlaufen */
  #root div,#root a,#root p,#root form{min-width:0}
  #root div[style*="font-size: 84px"],#root div[style*="font-size: 72px"],
  #root div[style*="font-size: 60px"],#root div[style*="font-size: 52px"],
  #root div[style*="font-size: 48px"],#root div[style*="font-size: 44px"],
  #root div[style*="font-size: 36px"]{overflow-wrap:break-word;hyphens:auto}

  /* Section-Paddings */
  div[style*="padding: 96px 56px"]{padding:56px 28px!important}
  div[style*="padding: 80px 56px"]{padding:56px 28px!important}
  div[style*="padding: 72px 56px"]{padding:48px 24px!important}
  div[style*="padding: 72px 56px 64px"]{padding:48px 24px 40px!important}
  div[style*="padding: 64px 56px 72px"]{padding:44px 24px 48px!important}
  div[style*="padding: 56px"]{padding:32px 24px!important}
  div[style*="padding: 40px 36px"]{padding:28px 24px!important}
  div[style*="padding: 36px 32px"]{padding:28px 24px!important}
  div[style*="padding: 32px 32px"]{padding:26px 22px!important}
  div[style*="padding: 28px 24px 32px"]{padding:24px 20px 28px!important}

  /* Meta-Streifen im Page-Hero darf umbrechen */
  div[style*="display: flex"][style*="gap: 48px"]{flex-wrap:wrap!important;gap:24px!important}
  /* Rechtstexte: Marginalspalte über den Text */
  div[style*="grid-template-columns: 220px 1fr"]{grid-template-columns:1fr!important;gap:10px!important}
  /* Kopfzeilen "Headline links / Fließtext rechts" umbrechen */
  div[style*="display: flex"][style*="align-items: end"]{flex-wrap:wrap!important;gap:20px!important}
}

/* ============================================================
   PHONE — ≤ 640 px
   ============================================================ */
@media (max-width:640px){
  /* Alles einspaltig */
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns: repeat(5, 1fr)"],
  div[style*="grid-template-columns: repeat(2, 1fr)"],
  div[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}

  /* Karten-Raster: Innenrahmen von rechts nach unten drehen */
  div[style*="grid-template-columns: repeat(2, 1fr)"]>div{border-right:none!important;border-bottom:1px solid #e6e5e2!important}
  div[style*="grid-template-columns: repeat(2, 1fr)"]>div:last-child{border-bottom:none!important}

  /* Bildraster mit fixer Maximalbreite füllen jetzt die Spalte */
  div[style*="minmax(180px, 240px)"]{grid-template-columns:1fr!important}

  /* Team-Band (Headline + Text) braucht Luft … */
  div[style*="grid-template-columns: 1fr 2fr"]{grid-template-columns:1fr!important;gap:28px!important}
  /* … Spec-Zeilen dagegen nicht */
  div[style*="grid-template-columns: 1fr 1.4fr"],
  div[style*="grid-template-columns: 1fr 2fr"][style*="padding: 14px 20px"]{grid-template-columns:1fr!important;gap:2px!important}

  /* Typo-Stufen */
  body div[style*="font-size: 84px"]{font-size:40px!important}
  body div[style*="font-size: 72px"]{font-size:36px!important}
  body div[style*="font-size: 60px"]{font-size:34px!important}
  body div[style*="font-size: 52px"]{font-size:30px!important}
  body div[style*="font-size: 48px"]{font-size:28px!important}
  body div[style*="font-size: 44px"]{font-size:28px!important}
  body div[style*="font-size: 36px"]{font-size:24px!important}
  body div[style*="font-size: 32px"]{font-size:22px!important}

  /* Section-Paddings — durchgehend 18 px Satzspiegel */
  div[style*="padding: 96px 56px"]{padding:44px 18px!important}
  div[style*="padding: 80px 56px"]{padding:40px 18px!important}
  div[style*="padding: 72px 56px"]{padding:38px 18px!important}
  div[style*="padding: 72px 56px 64px"]{padding:36px 18px 32px!important}
  div[style*="padding: 64px 56px 72px"]{padding:32px 18px 40px!important}
  div[style*="padding: 56px"]{padding:32px 18px!important}
  div[style*="padding: 40px 36px"]{padding:26px 18px!important}
  div[style*="padding: 36px 32px"]{padding:26px 18px!important}
  div[style*="padding: 32px 32px"]{padding:24px 18px!important}
  div[style*="padding: 28px 24px 32px"]{padding:22px 18px 26px!important}
  div[style*="padding: 20px 56px"]{padding:14px 18px!important;flex-wrap:wrap!important;gap:12px!important}

  /* Hero-Fußzeile mit den Normkürzeln */
  div[style*="bottom: 32px"][style*="left: 32px"]{left:18px!important;right:18px!important;bottom:18px!important;font-size:9px!important;gap:10px!important}
  div[style*="top: 32px"][style*="right: 32px"]{top:18px!important;right:18px!important}

  /* Chips "Typische Anwendungen": nicht mitten im Wort brechen */
  div[style*="padding: 8px 14px"]{white-space:nowrap}
  /* Koordinaten-Chip auf der Karte */
  div[style*="top: 10px"][style*="left: 10px"]{white-space:nowrap}
  /* Cookie-Banner */
  div[style*="padding: 24px 28px 22px"]{padding:20px 18px 18px!important}

  /* Formular: Auswahlbuttons und Absenden über die ganze Breite */
  #root form button[type="submit"]{width:100%!important;justify-content:center!important;text-align:center!important}
  #root form div[style*="padding-top: 8px"]{flex-direction:column!important;align-items:stretch!important;gap:18px!important}
  #root form div[style*="padding-top: 8px"]>div{max-width:none!important}

  /* Sprungnavigation Leistungen: statt horizontalem Scroller ein 2er-Raster */
  div[style*="overflow-x: auto"]{display:grid!important;grid-template-columns:1fr 1fr!important;overflow-x:visible!important}
  div[style*="overflow-x: auto"]>a{min-width:0!important;padding:14px 16px!important;border-right:none!important;border-bottom:1px solid #e6e5e2!important}
  div[style*="overflow-x: auto"]>a:nth-child(odd){border-right:1px solid #e6e5e2!important}
}

/* ============================================================
   NAV — Hamburger ≤ 860 px
   ============================================================ */
.hs-nav{gap:16px!important;z-index:50!important}
.hs-nav-links{display:flex;gap:28px;font-size:13px}
.hs-nav-toggle{display:none}
.hs-nav-toggle-btn{display:none}
.hs-nav-cta{white-space:nowrap}

@media (max-width:860px){
  .hs-nav{padding:12px 18px!important;flex-wrap:wrap!important;gap:10px!important}
  .hs-nav-brandtext{display:none!important}
  .hs-nav-links{order:99;flex-basis:100%;flex-direction:column;gap:0;background:#111;margin:12px -18px -12px;padding:0;max-height:0;overflow:hidden;transition:max-height .25s ease}
  .hs-nav-toggle:checked ~ .hs-nav-links{max-height:400px}
  .hs-nav-links a{padding:16px 18px!important;border-bottom:1px solid #2a2a2a;border-bottom-color:#2a2a2a!important}
  .hs-nav-toggle-btn{display:flex!important;flex-direction:column;gap:4px;background:transparent;border:1px solid #444;padding:10px 11px;cursor:pointer}
  .hs-nav-toggle-btn span{display:block;width:18px;height:2px;background:#F5B800}
  .hs-nav-cta{padding:11px 13px!important;font-size:11.5px!important}
}
@media (max-width:400px){
  .hs-nav{padding:12px 14px!important}
  .hs-nav-cta{padding:10px 11px!important;font-size:11px!important}
}

/* Lightbox auf dem Handy stapeln */
@media (max-width:860px){
  div[style*="grid-template-columns: 1.6fr 1fr"]{grid-template-columns:1fr!important;max-height:95vh!important}
}