/* ============================================================
   KMS Maschinentechnik – globales Stylesheet
   Responsive Layer, Navigation, Barrierefreiheit
   Hinweis: Die Seiten arbeiten mit Inline-Styles. Inline-Styles
   schlagen jede externe Regel – deshalb wird hier bewusst mit
   !important gearbeitet. Nicht entfernen.
   ============================================================ */

/* ---------- Grundlagen ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
body { overflow-x: hidden; }
/* Bilder nie breiter als ihr Container – ausgenommen absolut positionierte
   Bilder, die bewusst über den Rahmen hinausragen (z. B. der Schrägstreifen). */
img:not([style*="position:absolute"]), video, svg, picture { max-width: 100%; }
/* Lange Wörter und URLs dürfen umbrechen (sonst überläuft die Seite seitlich) */
body, h1, h2, h3, h4, h5, h6, p, li, dt, dd, td, th, a, span, div, label, button {
  overflow-wrap: break-word;
  word-break: normal;
}
h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }
picture { display: contents; }
/* Wichtig: display:contents macht die Kinder von <picture> zu Grid-/Flex-
   Einträgen. Das unsichtbare <source> würde sonst eine eigene Rasterspalte
   belegen und alles verschieben. */
picture > source { display: none !important; }
/* Verhindert verzerrte Bilder, wenn nur eine Dimension gesetzt ist */
img { height: auto; }
img[style*="height:"] { width: auto; }
img[style*="width:"] { height: auto; }

/* Fokus sichtbar machen (Tastaturbedienung / BITV) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1e3a8a !important;
  outline-offset: 2px !important;
}

/* Skip-Link */
.kms-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: #1e3a8a; color: #fff; padding: 12px 20px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px;
}
.kms-skip:focus { left: 0; color: #fff !important; }

/* ---------- Navigation: Burger ---------- */
.kms-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 64px; height: 63px;
  background: #ffffff; border: none; border-left: 1px solid #101418;
  cursor: pointer; padding: 0; color: #101418;
}
.kms-burger:hover { background: #1e3a8a; color: #ffffff; }
.kms-burger span {
  display: block; width: 24px; height: 2px; background: currentColor;
  position: relative; transition: transform .25s ease, opacity .2s ease;
}
.kms-burger span::before,
.kms-burger span::after {
  content: ''; position: absolute; left: 0; width: 24px; height: 2px;
  background: currentColor; transition: transform .25s ease, top .25s ease;
}
.kms-burger span::before { top: -8px; }
.kms-burger span::after  { top: 8px; }
.kms-nav.kms-open .kms-burger span { background: transparent; }
.kms-nav.kms-open .kms-burger span::before { top: 0; transform: rotate(45deg); }
.kms-nav.kms-open .kms-burger span::after  { top: 0; transform: rotate(-45deg); }

/* ---------- Desktop-Dropdown: Tastaturzugang ---------- */
.nav-dd:focus-within .dd-menu { visibility: visible; opacity: 1; transform: none; }

/* ============================================================
   TABLET / MOBIL – Navigation ab 1100px als Panel
   ============================================================ */
@media (max-width: 1100px) {
  .kms-burger { display: flex; }

  .kms-nav { position: sticky !important; }
  /* Geöffnetes Menü liegt über dem Cookie-Hinweis (z-index 200) */
  .kms-nav.kms-open { z-index: 220 !important; }

  .kms-navlinks {
    position: fixed !important;
    top: 64px; left: 0; right: 0;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: #ffffff;
    border-top: 1px solid #101418;
    border-bottom: 1px solid #101418;
    transform: translateY(-120%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    z-index: 210;
    box-shadow: 0 24px 40px -20px rgba(16,20,24,.45);
  }
  .kms-nav.kms-open .kms-navlinks { transform: none; }

  .kms-navlinks > a,
  .kms-navlinks .nav-dd > a {
    height: auto !important;
    padding: 17px 22px !important;
    border-left: none !important;
    border-bottom: 1px solid #e2e6ea !important;
    animation: none !important;
    font-size: 16px !important;
    justify-content: flex-start !important;
    background-image: none !important;
  }
  .kms-navlinks .nav-dd { flex-direction: column !important; display: flex !important; }
  .kms-navlinks .dd-menu {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    border: none !important;
    min-width: 0 !important;
    background: #f4f6f9 !important;
    transition: none !important;
  }
  .kms-navlinks .dd-menu a {
    padding: 14px 22px 14px 40px !important;
    font-size: 15px !important;
    border-bottom: 1px solid #e2e6ea !important;
  }
  /* Kontakt-Button bleibt blau, volle Breite */
  .kms-navlinks > a:last-child {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border-bottom: none !important;
    padding: 20px 22px !important;
  }
  /* Slogan neben dem Logo ausblenden */
  .kms-brand span { display: none !important; }
  .kms-brand { padding: 0 16px !important; flex: 0 1 auto !important; min-width: 0; }
  .kms-brand img { height: 26px !important; width: auto !important; }
  .kms-nav { flex-wrap: nowrap !important; align-items: center !important; }

  body.kms-nav-open { overflow: hidden; }
}

/* ============================================================
   LAYOUT ≤ 1000px
   ============================================================ */
@media (max-width: 1000px) {
  /* mehrspaltige Raster auf 2 Spalten */
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }
  /* Raster mit festen Pixelspalten stapeln – sonst laufen sie seitlich über */
  [style*="grid-template-columns:1fr 2fr 140px"],
  [style*="grid-template-columns:200px 170px 1fr 190px"],
  [style*="grid-template-columns:16px 150px 240px 1fr"],
  [style*="grid-template-columns:1fr 320px 80px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  [style*="justify-self:end"] { justify-self: start !important; }
  [style*="text-align:right"] { text-align: left !important; }
  .kms-row > span:last-child,
  .kms-row > div:last-child { justify-content: flex-start !important; }
}

/* ============================================================
   MOBIL ≤ 760px
   ============================================================ */
@media (max-width: 760px) {
  /* Alle Raster einspaltig */
  [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  /* Trennlinien zwischen ehemals nebeneinander liegenden Spalten */
  [style*="border-right:1px solid #101418"] {
    border-right: none !important;
    border-bottom: 1px solid #101418 !important;
  }
  /* Negative Ränder verursachen horizontales Scrollen */
  [style*="margin:0 -90px"] { margin: 0 !important; }
  [style*="margin:48px -24px 0"] { margin: 28px -18px 0 !important; }

  /* Flex-Reihen umbrechen lassen */
  [style*="display:flex"][style*="justify-content:space-between"] { flex-wrap: wrap !important; }

  /* Große Abstände in Flex-Gruppen reduzieren */
  [style*="gap:64px"] { gap: 32px !important; }
  [style*="gap:48px"] { gap: 26px !important; }

  /* Bildergalerie-Streifen auf der Startseite entzerren */
  .kms-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  .kms-strip > div {
    transform: none !important;
    flex: none !important;
    height: 150px !important;
  }
  .kms-strip > div > picture > img,
  .kms-strip > div > img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    top: auto !important; left: auto !important;
  }

  /* Tabellenartige Zeilen (Leistungen, Team, Timeline) stapeln */
  .kms-row { text-align: left !important; }
  .kms-row > span:last-child,
  .kms-row > div:last-child { justify-content: flex-start !important; }

  /* Touch-Ziele */
  a[href^="tel:"], a[href^="mailto:"] { word-break: break-word; }
}

/* ============================================================
   KLEINE GERÄTE ≤ 420px
   ============================================================ */
@media (max-width: 420px) {
  [style*="gap:64px"] { gap: 22px !important; }
  .kms-strip > div { height: 120px !important; }
}

/* ---------- Druckansicht ---------- */
@media print {
  .kms-nav, .kms-burger, #kms-cookie-banner, footer { display: none !important; }
  body { color: #000; }
}

/* ==========================================================
   Automatisch erzeugt: Abstände, Schriftgrößen und Höhen
   werden auf kleinen Displays herunterskaliert.
   ========================================================== */
@media (max-width: 760px) {
  [style*="padding:16px 32px"] { padding: 16px 18px !important; }
  [style*="padding:16px 36px"] { padding: 16px 20px !important; }
  [style*="padding:24px 40px 64px"] { padding: 13px 22px 35px !important; }
  [style*="padding:26px 32px"] { padding: 14px 18px !important; }
  [style*="padding:28px 40px"] { padding: 15px 22px !important; }
  [style*="padding:30px 40px"] { padding: 16px 22px !important; }
  [style*="padding:32px"] { padding: 18px !important; }
  [style*="padding:32px 40px 72px"] { padding: 18px 22px 40px !important; }
  [style*="padding:34px 40px"] { padding: 19px 22px !important; }
  [style*="padding:36px"] { padding: 20px !important; }
  [style*="padding:40px"] { padding: 22px !important; }
  [style*="padding:44px 40px"] { padding: 24px 22px !important; }
  [style*="padding:48px 40px"] { padding: 26px 22px !important; }
  [style*="padding:48px 40px 24px"] { padding: 26px 22px 13px !important; }
  [style*="padding:56px 32px 24px"] { padding: 31px 18px 13px !important; }
  [style*="padding:56px 32px 28px"] { padding: 31px 18px 15px !important; }
  [style*="padding:56px 32px 32px"] { padding: 31px 18px 18px !important; }
  [style*="padding:56px 40px"] { padding: 31px 22px !important; }
  [style*="padding:64px 40px 8px"] { padding: 35px 22px 8px !important; }
  [style*="padding:80px 32px 64px"] { padding: 44px 18px 35px !important; }
  [style*="font-size:24px"] { font-size: 20px !important; }
  [style*="font-size:26px"] { font-size: 20px !important; }
  [style*="font-size:28px"] { font-size: 20px !important; }
  [style*="font-size:30px"] { font-size: 22px !important; }
  [style*="font-size:32px"] { font-size: 23px !important; }
  [style*="font-size:34px"] { font-size: 24px !important; }
  [style*="font-size:36px"] { font-size: 26px !important; }
  [style*="font-size:38px"] { font-size: 27px !important; }
  [style*="font-size:40px"] { font-size: 29px !important; }
  [style*="font-size:44px"] { font-size: 32px !important; }
  [style*="font-size:52px"] { font-size: 37px !important; }
  [style*="height:240px"] { height: 190px !important; }
  [style*="height:260px"] { height: 190px !important; }
  [style*="height:280px"] { height: 190px !important; }
  [style*="height:320px"] { height: 190px !important; }
  [style*="height:380px"] { height: 209px !important; }
  [style*="height:440px"] { height: 242px !important; }
  [style*="height:480px"] { height: 264px !important; }
  [style*="height:640px"] { height: 352px !important; }
}