/* ==========================================================================
   H. Romberg GmbH – Website
   Design-System: Farben, Schriften, Layout-Bausteine
   ========================================================================== */

/* --- Schriften (lokal gehostet, siehe assets/fonts) --- */
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('../fonts/big-shoulders-display.woff2') format('woff2');
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Design-Tokens: hell und freundlich, Rot aus dem Firmenlogo nur als Akzent --- */
:root {
  --color-bg: #FFFFFF;
  --color-bg-alt: #F3F5F7;
  --color-surface: #FFFFFF;
  --color-ink: #23272C;
  --color-ink-soft: #5A626C;
  --color-accent: #A14248;
  --color-accent-dark: #85353B;
  --color-tint: #EEF1F4;
  --color-border: #E2E6EA;
  --color-white: #FFFFFF;

  --font-head: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'Karla', Arial, sans-serif;

  --container-width: 1180px;
  --radius: 6px;
  --shadow-soft: 0 2px 18px rgba(35, 39, 44, 0.08);
  --shadow-lift: 0 10px 30px rgba(35, 39, 44, 0.14);

  --transition: 220ms ease;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.no-scroll { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Lange Wörter und Internetadressen dürfen umbrechen, statt über den Rand zu ragen */
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.05; margin: 0 0 0.5em; letter-spacing: 0.01em; color: var(--color-ink); hyphens: auto; }
p { margin: 0 0 1em; }
button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 1000;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 10px 16px;
  border-radius: var(--radius);
  transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }

.lead {
  font-size: 1.15rem;
  color: var(--color-ink-soft);
  max-width: 60ch;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  padding: 0.85em 1.7em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.btn-outline:hover, .btn-outline:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* ==========================================================================
   Header
   ========================================================================== */
/* Wichtig: Kein backdrop-filter/transform/filter am Header. Diese Eigenschaften
   würden das fest positionierte Handy-Menü an den Header binden statt an das Fenster. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.logo-link { display: inline-flex; align-items: center; }
.logo-link img { height: 50px; width: auto; }

.main-nav ul { display: flex; align-items: center; gap: 2.1rem; }
.main-nav a {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  position: relative;
  padding: 6px 2px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transition: right var(--transition);
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { right: 0; }
.main-nav a[aria-current="page"] { color: var(--color-accent); }

.main-nav .nav-cta {
  margin-left: 0.5rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-weight: 700;
  padding: 0.6em 1.3em;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition);
}
.main-nav .nav-cta:hover { background: var(--color-accent-dark); transform: translateY(-2px); }
.main-nav .nav-cta::after { display: none; }
/* Auf der Kontaktseite selbst: Button etwas dunkler als Hinweis "Sie sind hier" */
.main-nav .nav-cta[aria-current="page"] { background: var(--color-accent-dark); color: var(--color-white); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span { width: 26px; height: 2px; background: var(--color-ink); transition: transform var(--transition), opacity var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Titelbereich: Luftbild des Firmengeländes als Hintergrund.
   Rechts ist das Foto klar zu sehen, nach links geht es weich in den hellen
   Grund über. So bleibt der Text dunkel auf hell und alles wirkt freundlich.
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 72vh, 720px);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.hero > .container { position: relative; z-index: 1; }
/* Text bleibt links neben dem Foto, auch auf kleineren Desktop-Bildschirmen */
.hero-content { max-width: min(560px, 46vw); }
.hero-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
/* 24/7-Notdienst direkt im Titelbereich */
.hero-emergency { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 1.5rem 0 0; font-size: 1.02rem; color: var(--color-ink-soft); }
.hero-emergency svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--color-accent); }
.hero-emergency span { font-weight: 700; color: var(--color-ink); }
.hero-emergency a { font-weight: 700; color: var(--color-ink); white-space: nowrap; border-bottom: 1px solid var(--color-border); transition: border-color var(--transition); }
.hero-emergency a:hover { border-color: var(--color-accent); }
/* Hintergrundfoto: beginnt kurz vor der Seitenmitte und reicht bis an den rechten Rand.
   Links ausgerichtet, damit die Werkhalle rechts neben dem Text liegt. */
.hero-bg { position: absolute; top: 0; right: 0; bottom: 0; left: calc(50% - 120px); }
/* Weicher Übergang: das Foto wird nach links ausgeblendet, darunter liegt der helle Grund */
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 110px, rgba(0, 0, 0, 0.4) 200px, #000 330px);
  mask-image: linear-gradient(90deg, transparent 0, transparent 110px, rgba(0, 0, 0, 0.4) 200px, #000 330px);
}

.page-hero {
  padding: 5.5rem 0 3.5rem;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

/* ==========================================================================
   Sections
   ========================================================================== */
section { padding: 5.5rem 0; }
/* Sprungziele nicht unter dem fixierten Kopfbereich verstecken */
section[id] { scroll-margin-top: 84px; }
.section-alt { background: var(--color-bg-alt); }

.section-head { max-width: 680px; margin-bottom: 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Reveal-on-scroll (nur wenn JavaScript läuft, sonst bleibt alles sichtbar) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms ease; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- Grid layouts --- */
.grid { display: grid; gap: 1.8rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Fünf Leistungen auf der Startseite: oben drei Karten, darunter zwei breitere */
.grid-services { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-services > * { grid-column: span 2; }
.grid-services > :nth-child(n+4) { grid-column: span 3; }
.grid-split { align-items: center; gap: 3.5rem; }
/* Bild abwechselnd links (nur auf breiten Bildschirmen, auf dem Handy steht der Text immer zuerst) */
@media (min-width: 761px) {
  .grid-split.flip > .card-media { order: -1; }
}

/* Textabschnitt ohne Bild: Überschrift links, Text rechts */
.intro-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 3.5rem;
  align-items: start;
}
.intro-split-head h2 { margin-bottom: 0; }
/* Zahnleiste aus dem Logo als kleines Detail über der Überschrift */
.intro-split-head::before {
  content: "";
  display: block;
  width: 80px;
  height: 10px;
  margin-bottom: 1.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 4h4l1.5-4h3l1.5 4h6v6H0z' fill='%23A14248'/%3E%3C/svg%3E") repeat-x left bottom;
}

/* Leistungen als kompakte Liste: links Nummer und Überschrift, rechts der Text */
.service-row {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 3.5rem;
  padding: 2.75rem 0;
  border-top: 1px solid var(--color-border);
}
.service-row:first-child { border-top: none; padding-top: 0.5rem; }
.service-row:last-child { padding-bottom: 0.5rem; }
/* Kleines Stück Zahnleiste aus dem Logo am Anfang jeder Trennlinie */
.service-row + .service-row::before {
  content: "";
  position: absolute;
  left: 0; top: -6px;
  width: 48px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 4h4l1.5-4h3l1.5 4h6v6H0z' fill='%23A14248'/%3E%3C/svg%3E") repeat-x left bottom;
}
.service-row h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: 0; }
.service-row-body p:last-child { margin-bottom: 0; }
/* Diashow als eigener Block zwischen den Leistungen (volle Breite statt zwei Spalten) */
.service-row-gallery { display: block; }

/* Diashow: Bilder blenden sanft ineinander über */
/* Die Fotos sind 800 Pixel breit: etwas schmaler anzeigen, damit sie scharf bleiben */
.gallery-wrap { max-width: 800px; margin: 0 auto; }
.slideshow { position: relative; }
.slides {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-tint);
}
.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease, visibility 0s linear 900ms;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 900ms ease, visibility 0s; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3rem 1.5rem 1.25rem;
  background: linear-gradient(180deg, rgba(35, 39, 44, 0) 0%, rgba(35, 39, 44, 0.8) 100%);
  color: var(--color-white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px; height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: background var(--transition), color var(--transition);
}
.slide-btn:hover, .slide-btn:focus-visible { background: var(--color-accent); color: var(--color-white); }
.slide-btn svg { width: 22px; height: 22px; }
.slide-prev { left: 16px; }
.slide-next { right: 16px; }
.slide-controls { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.9rem; }
.slide-dots { display: flex; flex-wrap: wrap; justify-content: center; }
/* Große Klickfläche, kleiner sichtbarer Punkt */
.slide-dots button {
  position: relative;
  width: 28px; height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.slide-dots button::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #C9CFD6;
  transition: background var(--transition), transform var(--transition);
}
.slide-dots button:hover::before { background: var(--color-ink-soft); }
.slide-dots button[aria-current="true"]::before { background: var(--color-accent); transform: scale(1.25); }
.slide-pause {
  width: 36px; height: 36px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.slide-pause:hover, .slide-pause:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
.slide-pause svg { width: 14px; height: 14px; }
.slide-pause .icon-play { display: none; }
.slide-pause.is-paused .icon-play { display: block; }
.slide-pause.is-paused .icon-pause { display: none; }

.text-link {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color var(--transition);
}
.text-link:hover { color: var(--color-accent-dark); }

/* --- Cards --- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
.card-media { aspect-ratio: 4/3; overflow: hidden; background: var(--color-tint); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 1.5rem; }
/* Kleiner Hinweis unten rechts im Bild, z. B. "Symbolbild (KI-generiert)" */
.image-with-note { position: relative; }
.image-note {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--color-white);
  background: rgba(35, 39, 44, 0.6);
  border-top-left-radius: var(--radius);
}

/* Leistungs-Kacheln mit Symbol statt Foto */
.service-card { padding: 2rem 1.75rem; }
.service-card h3 { margin: 1.25rem 0 0.4rem; }
.service-card p { color: var(--color-ink-soft); margin: 0; }
.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-tint);
  color: var(--color-accent);
  transition: background var(--transition), color var(--transition);
}
.service-icon svg { width: 28px; height: 28px; }
.service-card:hover .service-icon { background: var(--color-accent); color: var(--color-white); }
.card-body h3 { margin-bottom: 0.4em; }
.card-body p { color: var(--color-ink-soft); margin-bottom: 0; }

/* --- Heller Platzhalter für Bilder, die noch geliefert werden --- */
.placeholder {
  position: relative;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  color: #9AA3AD;
  background:
    repeating-linear-gradient(135deg, rgba(35, 39, 44, 0.04) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, #F8F9FA 0%, var(--color-tint) 100%);
}
.card-media .placeholder { height: 100%; aspect-ratio: auto; }
.placeholder svg { width: 22%; height: auto; transition: transform 600ms ease; }
.placeholder:hover svg { transform: scale(1.06); }
/* Zahnleiste aus dem Logo als Detail am unteren Rand */
.placeholder::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 4h4l1.5-4h3l1.5 4h6v6H0z' fill='%23A14248'/%3E%3C/svg%3E") repeat-x left bottom;
}

/* --- Feature-Liste (Warum wir / Vorteile) --- */
.feature-list { display: grid; gap: 1.5rem; }
.feature-item { display: flex; gap: 1rem; align-items: flex-start; }
.feature-icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-tint);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-item h3 { font-size: 1.15rem; margin-bottom: 0.25em; }
.feature-item p { color: var(--color-ink-soft); margin: 0; }

/* --- Produkte (Leistungsseite) --- */
.product-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.product-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem 0.6rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}
.product-list li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }

/* --- Ausbildung (Über-uns-Seite) --- */
.job-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 1.75rem 0 1rem; }
.job-list li {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.job-area {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.job-list strong { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; line-height: 1.1; color: var(--color-ink); hyphens: auto; }

/* --- 24/7-Notdienst am Ende der Leistungsseite --- */
.emergency-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.25rem 2rem;
  align-items: center;
  padding: 2rem 2.25rem;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.emergency-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
}
.emergency-icon svg { width: 28px; height: 28px; }
.emergency-panel .eyebrow { margin-bottom: 0.4em; }
.emergency-panel h2 { margin-bottom: 0.3em; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.emergency-panel p:last-child { margin: 0; color: var(--color-ink-soft); }

/* --- Jobs & Ausbildung: Sprungknöpfe im Seitenkopf und Stellenanzeigen --- */
.page-hero-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.job-openings { display: grid; gap: 1rem; margin-top: 1.5rem; }
.job-card {
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.job-card h3 { margin: 0 0 0.35rem; }
.job-card p { margin: 0 0 1.1rem; color: var(--color-ink-soft); }
.job-card .job-meta {
  margin: 0 0 0.6rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* --- Maschinenpark (Leistungsseite) --- */
/* Eine durchgehende Liste ohne Gruppen, zweispaltig */
.machine-sheet {
  padding: 0.4rem 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.machine-list-all { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
.machine-list-all li:nth-child(-n+2) { border-top: none; }
.machine-note { margin: 1rem 0 0; font-size: 0.9rem; color: var(--color-ink-soft); }
/* Wie ein Datenblatt: Maschine links, Kennwert rechts. Bei wenig Platz rutscht der Wert in die nächste Zeile. */
.machine-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.1rem 1.25rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-border);
}
.m-name { flex: 1 1 6rem; }
.m-spec {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--color-accent);
  white-space: nowrap;
}
.m-spec abbr { text-decoration: none; cursor: help; }
/* Das Durchmesser-Zeichen sieht in der Überschriften-Schrift wie eine Null aus, deshalb hier die Textschrift */
.m-spec .dia { font-family: var(--font-body); font-weight: 500; font-size: 1.2em; line-height: 1; letter-spacing: 0; }

/* --- Chronik (Über-uns-Seite) --- */
.nowrap { white-space: nowrap; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem 1.75rem;
}
.tl-item { position: relative; padding-top: 1.9rem; }
/* Zeitleiste: Linie je Eintrag, reicht bis zum nächsten Eintrag der Reihe */
.tl-item::before {
  content: "";
  position: absolute;
  top: 5px; left: 0; right: -1.75rem;
  height: 2px;
  background: var(--color-border);
}
.tl-item:nth-child(4n)::before, .tl-item:last-child::before { right: 0; }
.tl-item::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px var(--color-surface);
  transition: transform var(--transition);
}
.tl-item:hover::after { transform: scale(1.3); }
.tl-year {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-ink);
}
.tl-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.tl-events li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.tl-ic {
  width: 19px; height: 19px;
  margin-top: 2px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Einträge einer Reihe blenden leicht nacheinander ein */
.js .tl-item.reveal:nth-child(4n+2) { transition-delay: 90ms; }
.js .tl-item.reveal:nth-child(4n+3) { transition-delay: 180ms; }
.js .tl-item.reveal:nth-child(4n+4) { transition-delay: 270ms; }

/* Chronik: drei Einträge je Reihe */
@media (max-width: 1080px) {
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tl-item:nth-child(4n)::before { right: -1.75rem; }
  .tl-item:nth-child(3n)::before, .tl-item:last-child::before { right: 0; }
}
/* Chronik: zwei Einträge je Reihe */
@media (max-width: 880px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .tl-item::before { right: -1.5rem; }
  .tl-item:nth-child(3n)::before, .tl-item:nth-child(4n)::before { right: -1.5rem; }
  .tl-item:nth-child(2n)::before, .tl-item:last-child::before { right: 0; }
  .js .tl-item.reveal:nth-child(n) { transition-delay: 0ms; }
  .js .tl-item.reveal:nth-child(2n) { transition-delay: 90ms; }
}

/* --- Stats --- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.stat-number { font-family: var(--font-head); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; color: var(--color-accent); }
.stat-label { color: var(--color-ink-soft); font-size: 0.95rem; }

/* --- Zuhause in Hamm (Elefant Romi) --- */
.romi-grid { grid-template-columns: 7fr 5fr; }
.romi-grid > * { min-width: 0; }
.romi-media { margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.romi-media img { width: 100%; height: auto; transition: transform 800ms ease; }
.romi-media:hover img { transform: scale(1.02); }
.romi-quote {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.3rem;
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  line-height: 1.15;
  color: var(--color-ink);
}

/* --- Zertifikate --- */
.cert-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.cert-card h3 { margin-bottom: 0.3em; }
.cert-meta { font-size: 0.9rem; color: var(--color-accent); font-weight: 700; margin-bottom: 0.5em; }
.cert-card p { color: var(--color-ink-soft); margin: 0; }

/* Vorschaubild des Dokuments, öffnet per Klick die große Ansicht */
.cert-thumb {
  position: relative;
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition);
}
.cert-thumb img { width: 100%; height: auto; }
.cert-thumb:hover, .cert-thumb:focus-visible { transform: translateY(-3px) rotate(-0.6deg); box-shadow: var(--shadow-lift); }
.cert-thumb:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.cert-thumb-zoom {
  position: absolute;
  right: 8px; bottom: 8px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.cert-thumb-zoom svg { width: 17px; height: 17px; }

/* Große Ansicht (Lightbox) */
.lightbox {
  padding: 0;
  border: none;
  border-radius: var(--radius);
  width: min(900px, 94vw);
  max-height: 92vh;
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  overflow: hidden;
}
.lightbox[open] { animation: lightbox-in 240ms ease; }
.lightbox::backdrop { background: rgba(35, 39, 44, 0.8); }
@keyframes lightbox-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.lightbox-inner { display: flex; flex-direction: column; max-height: 92vh; }
.lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.lightbox-title { font-size: 1.35rem; margin: 0; }
.lightbox-close {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.lightbox-close:hover { background: var(--color-bg-alt); }
.lightbox-close:focus { outline: none; }
.lightbox-close:focus-visible { background: var(--color-bg-alt); outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-pages {
  overflow-y: auto;
  padding: 1.25rem;
  background: var(--color-bg-alt);
  display: grid;
  gap: 1.25rem;
}
.lightbox-pages img { width: 100%; height: auto; background: var(--color-white); box-shadow: var(--shadow-soft); }
.lightbox-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}
.lightbox-foot a { color: var(--color-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* --- Zitate --- */
.quote {
  border-left: 4px solid var(--color-accent);
  padding-left: 1.5rem;
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-ink);
  max-width: 60ch;
}
.quote cite { display: block; margin-top: 0.75rem; font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; font-style: normal; color: var(--color-ink-soft); }

/* --- Kontakt --- */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.contact-info-list { display: grid; gap: 1.2rem; margin-top: 1.5rem; }
.contact-info-item { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-info-item svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--color-accent); margin-top: 3px; }
.contact-info-item a { white-space: nowrap; }
.contact-info-item a:hover { color: var(--color-accent); }

form.contact-form { display: grid; gap: 1.1rem; }
.contact-mail-box { display: grid; gap: 1.1rem; }
.contact-mail-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.form-row { display: grid; gap: 0.4rem; }
.form-row label { font-weight: 700; font-size: 0.95rem; }
.form-row input, .form-row textarea, .form-row select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8em 1em;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: border-color var(--transition);
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none;
  border-color: var(--color-accent);
}
.form-row textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 0.85rem; color: var(--color-ink-soft); }
/* Honeypot-Feld: unsichtbar für Menschen, aber für einfache Bots erreichbar */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { padding: 1em 1.2em; border-radius: var(--radius); font-weight: 700; display: none; }
.form-status.success { display: block; background: #E5F3E5; color: #2E5E2E; }
.form-status.error { display: block; background: var(--color-tint); color: var(--color-accent-dark); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: #23272C;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: #D5DAE0;
  padding: 3.5rem 0 2rem;
}
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; }
.footer-brand .logo-link img { height: 40px; }
.footer-brand p { color: #AEB5BD; margin-top: 1rem; max-width: 34ch; }
.footer-heading { font-family: var(--font-head); font-weight: 700; color: var(--color-white); margin-bottom: 1rem; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.9rem; }
.footer-nav li { margin-bottom: 0.6rem; }
.footer-nav a:hover { color: var(--color-white); }
.footer-contact li { margin-bottom: 0.6rem; }
.footer-contact a:hover { color: var(--color-white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.88rem;
  color: #8F97A0;
}
.footer-bottom a:hover { color: var(--color-white); }
.footer-bottom-links { display: flex; gap: 1.5rem; }

/* ==========================================================================
   Sonstige Seiten (Impressum, Datenschutz)
   ========================================================================== */
.legal-content h2 { margin-top: 2em; }
.legal-content p, .legal-content li { color: var(--color-ink-soft); }
.legal-content ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.legal-content a { color: var(--color-accent); text-decoration: underline; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  /* Notdienst: Anruf-Knopf unter den Text */
  .emergency-panel { grid-template-columns: auto minmax(0, 1fr); }
  .emergency-panel .btn { grid-column: 1 / -1; justify-self: start; }
  .grid-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-services > *, .grid-services > :nth-child(n+4) { grid-column: auto; }
  .grid-services > :last-child { grid-column: 1 / -1; }
  /* Titelbereich: Text oben, das Luftbild als breites Band darunter, oben weich eingeblendet */
  .hero { display: block; min-height: 0; padding-bottom: 0; }
  .hero-content { max-width: 640px; }
  .hero-bg { position: relative; top: auto; right: auto; bottom: auto; left: auto; height: clamp(240px, 58vw, 460px); margin-top: 2.75rem; }
  .hero-bg img {
    object-position: 42% 35%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
  }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Zertifikate auf Tablets untereinander, damit Vorschau und Text nebeneinander Platz haben */
  .cert-grid { grid-template-columns: 1fr; }
  .cert-card p { hyphens: auto; }
}

/* Klappmenü für kleinere Laptops, Tablets und Handys: Logo und Menü passen darunter nicht mehr nebeneinander */
@media (max-width: 1080px) {
  .site-header .container { height: 72px; }
  section[id] { scroll-margin-top: 72px; }
  .logo-link img { height: 42px; }
  /* Das Menü blendet sich unter dem Kopfbereich ein, statt seitlich hereinzufahren.
     So entsteht nie ein Überstand nach rechts, der die Seite verschieben könnte. */
  .main-nav {
    position: fixed;
    top: 72px; left: 0; right: 0; bottom: 0;
    background: var(--color-surface);
    padding: 2rem 24px 3rem;
    overflow-y: auto;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear 220ms;
  }
  .main-nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--transition), transform var(--transition), visibility 0s;
  }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav li { border-bottom: 1px solid var(--color-border); }
  .main-nav a { display: block; padding: 1rem 2px; font-size: 1.35rem; }
  .main-nav a::after { display: none; }
  .main-nav li:last-child { border-bottom: none; padding-top: 1.75rem; }
  .main-nav .nav-cta { margin-left: 0; text-align: center; padding: 0.9em 1.3em; font-size: 1.15rem; }
  .nav-toggle { display: flex; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  section { padding: 3.75rem 0; }
  /* Logo auf dem Handy so groß wie möglich, ohne den Menü-Knopf zu verdrängen */
  .logo-link img { height: auto; width: min(260px, calc(100vw - 120px)); }
  .grid-2, .grid-3, .grid-4, .grid-services, .romi-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .cert-card { grid-template-columns: 1fr; padding: 1.4rem; }
  .cert-thumb { width: 150px; }
  /* Auf dem Handy flachere Bildflächen und engere Abstände, damit weniger gescrollt werden muss */
  .card-media { aspect-ratio: 16/10; }
  .grid-split { gap: 1.75rem; }
  .intro-split { grid-template-columns: 1fr; gap: 1.25rem; }
  .service-row { grid-template-columns: 1fr; gap: 0.75rem; padding: 2rem 0; }
  /* Chronik: senkrechte Zeitleiste links */
  .timeline { position: relative; grid-template-columns: 1fr; gap: 1.9rem; padding-left: 1.6rem; }
  .timeline::before {
    content: "";
    position: absolute;
    top: 8px; bottom: 8px; left: 5px;
    width: 2px;
    background: var(--color-border);
  }
  .tl-item { padding-top: 0; }
  .tl-item::before { display: none; }
  .tl-item::after { top: 0.55rem; left: -1.6rem; }
  .tl-year { margin-bottom: 0.5rem; font-size: 2rem; }
  .tl-events li { font-size: 0.95rem; }
  .js .tl-item.reveal:nth-child(n) { transition-delay: 0ms; }
  /* Maschinenpark: einspaltig, die zweite Zeile bekommt wieder ihre Trennlinie */
  .machine-sheet { padding: 0.3rem 1.25rem; }
  .machine-list-all { grid-template-columns: 1fr; }
  .machine-list-all li:nth-child(2) { border-top: 1px solid var(--color-border); }
  .machine-list li { padding: 0.7rem 0; font-size: 0.95rem; }
  .m-spec { font-size: 1.1rem; }
  .emergency-panel { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; }
  .emergency-icon { width: 48px; height: 48px; }
  .emergency-icon svg { width: 24px; height: 24px; }
  .emergency-panel .btn { justify-self: stretch; justify-content: center; }
  .job-list { grid-template-columns: 1fr; gap: 0.7rem; }
  .job-list strong { font-size: 1.2rem; }
  .product-list li { padding: 0.5rem 0.85rem 0.5rem 0.75rem; font-size: 1rem; }
  /* Diashow auf dem Handy: etwas höheres Format, kleinere Pfeile */
  .slides { aspect-ratio: 4/3; }
  .slide-btn { width: 40px; height: 40px; }
  .slide-prev { left: 8px; }
  .slide-next { right: 8px; }
  .slide figcaption { font-size: 1rem; padding: 2.5rem 1rem 0.9rem; }
  /* Leistungs-Kacheln auf dem Handy kompakt: Symbol links, Text rechts */
  .service-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 1rem;
    align-items: start;
    padding: 1.25rem;
  }
  .service-icon { grid-row: span 2; width: 44px; height: 44px; }
  .service-icon svg { width: 22px; height: 22px; }
  .service-card h3 { margin: 0.15rem 0 0.25rem; font-size: 1.25rem; }
  .service-card p { font-size: 0.95rem; }
  .lightbox-title { font-size: 1.15rem; }
  .lightbox-pages { padding: 0.75rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* --- Dark-Mode: bewusst deaktiviert (Marke lebt von warmem, hellem Hintergrund) --- */