:root {
  color-scheme: light;
  --ink: #252b32;
  --text: #363636;
  --nav-active: #545b64;
  --paper: #fff;
  --machine: #e4e4e4;
  --row: #efefef;
  --content-width: 988px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body {
  margin: 0;
  color: var(--text);
  background: #b9bcc1 url("images/metall.jpg") repeat-y center top;
  font: 16px Arial, Helvetica, sans-serif;
}
img { display: block; max-width: 100%; height: auto; border: 0; }
figure { margin: 0; }
a { color: var(--nav-active); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; }
button { cursor: pointer; }
button[hidden], [hidden] { display: none !important; }
button, summary, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #078a9c; outline-offset: 4px; }
p { margin: 0 0 10px; }
h1, h2 {
  margin: 30px 0;
  padding-bottom: 30px;
  border-bottom: 3px solid var(--ink);
  color: var(--ink);
  font-size: 38px;
  font-weight: 400;
  line-height: normal;
}
h3 { font-size: 1.17em; }
h4 { margin: 10px 0; color: var(--ink); font-size: 18px; font-weight: 400; }
ul { margin-block: 1em; padding-left: 15px; list-style: none; }
ul > li { padding-left: 15px; background: url("images/punkt.png") no-repeat left 4px; }
.container { width: min(var(--content-width), 96%); margin-inline: auto; }
.visually-hidden, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus { position: fixed; z-index: 500; top: 5px; left: 5px; padding: 10px; background: white; }

/* Navigation und Startmotiv. */
.top-strip { height: 35px; background: #141414; }
.site-header { position: fixed; z-index: 30; inset: 35px 0 auto; background: var(--ink); transition: top 150ms; }
.header-inner { position: relative; min-height: 93px; }
.primary-nav { display: flex; align-items: stretch; width: max-content; max-width: calc(100% - 160px); }
.primary-nav > a { padding: 35px 15px; margin-right: 4px; color: white; font-size: 18px; line-height: 23px; white-space: nowrap; }
.primary-nav > a:hover, .primary-nav > a[aria-current] { background: var(--nav-active); text-decoration: none; }
.logo { position: absolute; top: -20px; right: 10px; width: 144px; transition: width 150ms, top 150ms; }
.logo img { width: 100%; height: auto; }
.scrolled .site-header { top: 0; }
.scrolled .logo { width: 90px; top: 5px; }
.mobile-menu { display: none; }
.hero { position: relative; height: 750px; }
.hero > img { position: absolute; top: 65px; left: 50%; width: 988px; max-width: 100%; transform: translateX(-50%); }
.intro { padding: 60px 0 40px; background: var(--paper); text-align: center; }

/* Inhaltsbereiche. */
.content-block, .machine-block { padding: 30px 0 40px; background: var(--paper); }
.section-photo { height: 300px; overflow: hidden; }
.section-photo > img { width: 100%; min-height: 400px; object-fit: cover; object-position: left top; }
.metal-columns { display: grid; grid-template-columns: 1fr 1fr; }
.metal-columns > :first-child { padding-right: 16px; }
.metal-columns > :last-child { padding-left: 16px; }
.services { display: flex; gap: 20px; }
.services > ul { padding-left: 15px; }
.services > ul > li { min-height: 29px; margin-bottom: 10px; padding: 2px 0 0 40px; background: url("images/haken.png") no-repeat left top; }
.machine-block { color: var(--ink); background: var(--machine); }
.accordion { margin-top: 2px; scroll-margin-top: 105px; }
.accordion > summary {
  position: relative;
  padding: 9px 42px 9px 5px;
  color: var(--ink);
  background: var(--row);
  font-size: 18px;
  font-weight: 400;
  line-height: 21px;
  list-style: none;
  cursor: pointer;
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::after { position: absolute; right: 15px; top: calc(50% - 6px); width: 14px; height: 14px; content: ""; background: url("images/geschlossen.png") no-repeat; }
.accordion[open] > summary, .accordion > summary:hover { background: var(--ink); color: white; }
.accordion[open] > summary::after, .accordion > summary:hover::after { background-image: url("images/offen.png"); }
.accordion-content { display: flow-root; padding: 16px 35.2px; background: white; color: var(--ink); }
.machine-image { float: right; width: 200px; margin-left: 10px; margin-bottom: 10px; }
.machine-image img { width: 200px; }
.machine-image figcaption { margin-top: 2px; color: #828282; font-size: 14px; text-align: right; }
.accordion-content a { color: var(--ink); }
.development-copy { display: flow-root; }
.rapid-badge { float: right; width: 182px; margin: 0 0 10px 10px; }
.product-title { padding: 20px 0 10px; background: var(--ink); color: white; }
.product-title h2 { color: white; border-color: white; }
.product-gallery { position: relative; padding: 10px 0 40px; overflow: hidden; background: var(--ink); }
.gallery-track { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track > a { flex: 0 0 calc((100% - 30px) / 4); scroll-snap-align: center; }
.gallery-track img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-button { position: absolute; top: 40%; width: 25px; height: 50px; padding: 0; border: 0; background: transparent url("images/pfeile.png") no-repeat left top; }
.gallery-button.previous { left: 5px; }
.gallery-button.next { right: 5px; background-position: right top; }
.gallery-button:hover { opacity: .75; }
.download { margin-top: 30px; }
.download a { text-decoration: underline; }

/* Unterseiten und aus Word bereinigte Datenschutztexte. */
.subpage { min-height: 100vh; display: flex; flex-direction: column; }
.subpage-main { margin-top: 300px; margin-bottom: 250px; }
.subpage .site-footer { margin-top: auto; }
.legal-copy { overflow-wrap: anywhere; }
.legal-copy ol { padding-left: 0; list-style-position: inside; }
.legal-copy ol > li { margin-bottom: 10px; }
.legal-copy ol > li:last-child { margin-bottom: 0; }
.privacy-copy { font: 14px "Calibri Light", Calibri, Arial, sans-serif; color: #444; }
.privacy-copy h1 { font-family: Arial, Helvetica, sans-serif; }
.privacy-title { margin-top: 20px; font-size: 22px; color: #000; }
.privacy-notice { text-align: center; background: #bfbfbf; color: #000; font-size: 22px; }
.privacy-copy .space { min-height: 16px; }

/* Fußbereich und lokale Seitenfunktionen. */
.site-footer { position: relative; margin-top: 150px; color: var(--ink); font-size: 14px; }
.footer-content { padding: 55px 0 30px; background: white; }
.footer-inner { position: relative; display: grid; grid-template-columns: 25% 45% 30%; }
.footer-inner address { padding-right: 14px; font-style: normal; }
.footer-inner p { padding-inline: 0 10px; }
.site-footer a { color: var(--ink); }
.certificate { position: absolute; top: -74px; left: 0; }
.footer-nav { padding-left: 14px; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 5px 6px; }
.footer-nav a { padding: 5px 3px; background: #d4d4d4; border-radius: 2px; text-align: center; }
.footer-nav a:hover { background: #c5c5c5; }
.footer-bottom { height: 38px; background: #2e2e2e; }
.footer-bottom > .container { position: relative; height: 100%; }
.agency { position: absolute; right: 0; top: -35px; padding: 5px 0; }
.page-tools { position: fixed; z-index: 40; right: 1%; bottom: 15%; display: grid; gap: 5px; }
.tool { display: block; width: 56px; height: 56px; padding: 0; border: 0; background: transparent; opacity: .7; }
.tool:hover, .tool:focus-visible { opacity: 1; }
.tool img { width: 100%; height: 100%; }
.top-link { display: none; }
.scrolled .top-link { display: block; }

/* Bildansicht und Suche verwenden native modale Dialoge. */
dialog { max-width: calc(100vw - 30px); max-height: calc(100dvh - 30px); padding: 35px; color: var(--ink); border: 0; box-shadow: 0 0 15px #0005; }
dialog::backdrop { background: #000b; }
.close-button { position: absolute; z-index: 2; top: 7px; right: 7px; width: 27px; height: 27px; padding: 0; border: 0; background: white; }
.lightbox { width: max-content; padding: 35px 40px 20px; }
.lightbox-image { max-width: min(1000px, calc(100vw - 110px)); max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; }
.lightbox-caption { margin-top: 8px; font-size: 14px; text-align: center; }
.lightbox .gallery-button { background-image: url("images/pfeileblau.png"); }
.search-dialog { width: 700px; }
.search-dialog h2 { font-size: 28px; margin-top: 5px; padding-bottom: 15px; }
.search-field { display: flex; gap: 10px; margin-block: 10px 20px; }
.search-field input { min-width: 0; width: 100%; padding: 10px; border: 1px solid #828282; }
.search-field button { padding: 10px 15px; border: 0; background: var(--ink); color: white; }
.search-results { max-height: 45dvh; padding: 0; overflow: auto; }
.search-results > li { padding: 15px 0; border-top: 1px solid #ddd; background: none; }
.search-results a { font-weight: 700; text-decoration: underline; }
.search-results p { margin-top: 7px; font-size: 14px; line-height: 1.4; }
body:has(dialog[open]) { overflow: hidden; }

@media (max-width: 1044px) {
  .page-tools { bottom: 20%; }
  .tool { width: 45px; height: 45px; }
}
@media (max-width: 900px) {
  .primary-nav > a { padding-inline: 10px; margin-right: 2px; font-size: 16px; }
  .services { gap: 5px; }
}
@media (min-width: 731px) and (max-width: 780px) {
  .primary-nav > a { font-size: 15px; padding-inline: 8px; }
}
@media (max-width: 820px) {
  .hero { height: 560px; }
  .search-toggle { display: none; }
}
@media (max-width: 730px) {
  html { scroll-padding-top: 55px; }
  .header-inner { min-height: 44px; width: 100%; }
  .primary-nav { display: none; }
  .logo, .scrolled .logo { width: 80px; top: 3px; }
  .mobile-menu { display: block; }
  .mobile-menu > summary { width: 55px; padding: 10px; cursor: pointer; list-style: none; }
  .mobile-menu > summary::-webkit-details-marker { display: none; }
  .mobile-menu nav { display: grid; padding: 3px 0 5px; }
  .mobile-menu nav > a { margin-top: 3px; padding: 5px 0; color: white; text-align: center; }
  .mobile-menu nav > a:hover, .mobile-menu nav > a[aria-current] { background: var(--nav-active); text-decoration: none; }
  .hero { height: 350px; }
  .hero > img { top: 45px; }
  h1, h2 { padding-bottom: 10px; font-size: 25px; }
  .section-photo { height: 200px; }
  .section-photo > img { min-height: 0; }
  .metal-columns { grid-template-columns: 1fr; }
  .metal-columns > :first-child, .metal-columns > :last-child { padding: 0; }
  .services { gap: 20px; }
  .accordion { scroll-margin-top: 55px; }
  .accordion > summary { font-size: 16px; }
  .accordion-content { padding-inline: 20px; }
  .gallery-track > a { flex-basis: calc((100% - 10px) / 2); }
  .product-gallery > .gallery-button { display: none; }
  .development-copy br { display: none; }
  .development-copy br + br { display: block; content: ""; margin-top: 1em; }
  .footer-inner { display: block; }
  .footer-inner address, .footer-inner p { margin: 0 0 10px; padding: 0; }
  .footer-nav { padding: 0; width: 100%; }
  .tool { width: 40px; height: 40px; }
  .subpage-main { margin-top: 120px; margin-bottom: 150px; }
  }
@media (max-width: 500px) {
  .hero { height: 300px; }
  .section-photo { height: 140px; }
  .tool { width: 30px; height: 30px; }
  .agency { width: 50px; top: -60px; right: 25px; }
  .footer-inner address, .footer-inner p { margin-block: 10px; }
  .footer-nav { margin-top: 20px; padding-top: 20px; border-top: 1px dotted var(--ink); }
  .rapid-badge { width: 40%; }
  .search-field { flex-direction: column; }
}
@media (max-width: 400px) {
  .hero { height: 240px; }
  .machine-image { float: none; width: 200px; max-width: 100%; margin: 0 0 15px auto; }
  .services { gap: 5px; }
  .services > ul { padding-left: 5px; }
  .services > ul > li { padding-left: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}
@media print {
  html { scroll-padding-top: 0; }
  body { background: white; color: black; font-size: 11pt; }
  .site-header, .top-strip, .hero, .section-photo, .page-tools, dialog, .agency, .certificate, .footer-nav, .gallery-button, .skip-link { display: none !important; }
  .container { width: 100%; }
  .intro, .content-block, .machine-block, .product-title { padding: 10px 0; background: white; color: black; }
  h1, h2, .product-title h2 { color: black; border-color: black; font-size: 22pt; break-after: avoid; }
  .accordion > summary, .accordion[open] > summary { background: white; color: black; font-weight: bold; }
  .accordion > summary::after { display: none; }
  .accordion-content { padding: 10px 0; }
  .accordion::details-content { display: block; content-visibility: visible; }
  .accordion > .accordion-content { display: flow-root; }
  .subpage-main { margin: 0; }
  .site-footer { margin-top: 20px; }
  .footer-content { padding: 10px 0; }
  .footer-bottom { display: none; }
  .gallery-track > [data-clone] { display: none; }
  .gallery-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; overflow: visible; }
  .product-gallery { background: white; padding: 10px 0; }
  a { color: inherit; }
}