/* ==========================================================================
   B.o.Safety.Solutions | Website Stylesheet
   Designrichtung angelehnt an mraElectric.Com: dunkle Navybasis, blauer
   Akzent, grosse fette Headlines, Glaskarten, Pillbuttons.
   Alle Farben, Radien und Abstaende liegen als Variablen vor.
   ========================================================================== */

:root {
  /* Farbwelt */
  --bg: #0a1720;
  --bg-2: #0d1f2b;
  --bg-3: #12293a;
  --blue: #2f7fce;          /* Akzent, hier zentral tauschbar */
  --blue-soft: #5aa0e6;
  --blue-deep: #1b5c9c;
  --signal: #ffc12e;        /* Signalgelb, nur sparsam fuer Arbeitsschutzbezug */
  --white: #ffffff;
  --text: #e7eef4;
  --muted: #9fb3c3;
  --line: rgba(255, 255, 255, 0.10);
  --card: rgba(255, 255, 255, 0.045);
  --card-hover: rgba(255, 255, 255, 0.075);

  /* Form */
  --radius-l: 28px;
  --radius-m: 18px;
  --radius-s: 12px;
  --pill: 999px;
  --maxw: 1180px;
  --gutter: 24px;

  /* Typografie */
  --font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  --h1: clamp(2.6rem, 6vw, 4.6rem);
  --h2: clamp(2rem, 4.4vw, 3.4rem);
  --h3: clamp(1.15rem, 2vw, 1.4rem);
  --lead: clamp(1rem, 1.5vw, 1.15rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.6em;
  color: var(--white);
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Bausteine ---------------------------------------------------- */

.eyebrow {
  display: block;
  color: var(--blue-soft);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.lead {
  font-size: var(--lead);
  color: var(--muted);
  max-width: 62ch;
}

.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: var(--blue);
  color: var(--white);
  border: 0;
  border-radius: var(--pill);
  padding: 1.05em 2.4em;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.25s, background 0.25s, box-shadow 0.25s;
  box-shadow: 0 10px 30px rgba(47, 127, 206, 0.28);
}
.btn:hover { background: var(--blue-soft); transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--white); }
.btn--light { background: var(--white); color: #103352; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.btn--light:hover { background: #eaf2fb; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--blue-soft);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.link-more span { transition: transform 0.25s; }
.link-more:hover span { transform: translateX(5px); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 2.4rem 2rem;
  backdrop-filter: blur(6px);
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
}
.card:hover { background: var(--card-hover); transform: translateY(-4px); border-color: rgba(90, 160, 230, 0.4); }

/* Ganze Kachel anklickbar: der Textlink legt eine unsichtbare Flaeche darueber.
   Der sichtbare Link bleibt fuer Tastatur und Vorlesesoftware der Anker. */
.card--link { position: relative; cursor: pointer; }
.card--link .link-more--cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card--link:hover .link-more { color: var(--white); }
.card--link:hover .link-more span { transform: translateX(5px); }
.card--link:focus-within { border-color: rgba(90, 160, 230, 0.6); }
.card--link .link-more--cover:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.card h3 { margin-bottom: 0.5em; }
.card p { color: var(--muted); font-size: 0.98rem; }

.icon {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 1.4rem;
  color: var(--blue);
}
.icon svg { width: 100%; height: 100%; display: block; }

/* Sektionen */
section { position: relative; padding: clamp(5rem, 10vw, 8.5rem) 0; }

.divider {
  width: 1px;
  height: 90px;
  margin: 0 auto;
  background: linear-gradient(to bottom, transparent, var(--blue-soft));
}

.section--dark { background: var(--bg); }
.section--grad {
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(47, 127, 206, 0.20), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg-3) 100%);
}
.section--grad-up {
  background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 45%, var(--bg) 100%);
}

/* ---------- Bildbausteine ------------------------------------------------
   Alle Bilder liegen als Platzhalter in assets/img/platzhalter.
   Zum Austauschen einfach die Dateipfade auf die echten Fotos zeigen lassen.
   ------------------------------------------------------------------------ */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: #101f2a;
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--43 { aspect-ratio: 4 / 3; }
.media--32 { aspect-ratio: 3 / 2; }
.media--169 { aspect-ratio: 16 / 9; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.6rem);
  align-items: center;
}
.split--flip .split__media { order: 2; }

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Bildband ueber die volle Breite */
.band {
  position: relative;
  min-height: clamp(300px, 40vw, 520px);
  display: grid;
  align-items: center;
  background-color: #101f2a;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 20, 28, 0.90) 0%, rgba(8, 20, 28, 0.60) 46%, rgba(8, 20, 28, 0.18) 100%);
}
.band .wrap { position: relative; }
.band__text { max-width: 46ch; }
.band h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.band p { color: #cfe0ee; }

@media (min-width: 900px) {
  .band { background-attachment: fixed; }
}

/* Hinweisfahne auf Platzhaltern, vor dem Livegang entfernen */
.ph-note {
  position: absolute;
  z-index: 2;
  top: 0.9rem; left: 0.9rem;
  background: rgba(8, 20, 28, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--pill);
  padding: 0.3em 0.9em;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}

/* ---------- Kopfbereich ------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem clamp(1.2rem, 4vw, 3.2rem);
  transition: background 0.35s, padding 0.35s, box-shadow 0.35s;
}
.header.is-stuck {
  background: rgba(8, 20, 28, 0.92);
  backdrop-filter: blur(14px);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.logo { display: flex; align-items: center; gap: 0.75rem; }
.logo__mark {
  display: block;
  width: 54px;
  flex: none;
  color: var(--blue);
}
.logo__mark img, .logo__mark svg { width: 100%; height: auto; display: block; }
.footer .logo__mark { width: 74px; }
.logo__text { line-height: 1.15; }
.logo__name {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--white);
}
.logo__claim {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.62rem;
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue-soft);
}

.header__right { display: flex; align-items: center; gap: 1.6rem; }
.header__tel {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  white-space: nowrap;
}
.header__mail {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.header__mail:hover { color: var(--white); }
.hero__eyebrow {
  display: block;
  margin-bottom: 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.header__tel:hover { color: var(--blue-soft); }

.burger {
  width: 52px; height: 40px;
  display: grid;
  place-content: center;
  gap: 7px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  width: 34px; height: 3px;
  background: var(--white);
  border-radius: 3px;
  transition: transform 0.32s, opacity 0.2s;
}
.burger.is-open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ---------- Menueoverlay -------------------------------------------------
   Spaltenraster statt langer Liste: je Leistungsbereich eine Spalte,
   darunter eine Zeile mit den kleinen Seiten und den Kontaktdaten.
   ------------------------------------------------------------------------ */

.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: 7rem clamp(1.2rem, 4vw, 3.2rem) 3rem;
  overflow-y: auto;
  background: rgba(7, 18, 26, 0.975);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
.menu.is-open { opacity: 1; visibility: visible; }

.menu__grid {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
}

.menu__col {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s, transform 0.5s;
}
.menu.is-open .menu__col { opacity: 1; transform: none; }
.menu.is-open .menu__col:nth-child(1) { transition-delay: 0.10s; }
.menu.is-open .menu__col:nth-child(2) { transition-delay: 0.16s; }
.menu.is-open .menu__col:nth-child(3) { transition-delay: 0.22s; }
.menu.is-open .menu__col:nth-child(4) { transition-delay: 0.28s; }

.menu__main {
  display: block;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s, border-color 0.25s;
}
.menu__main:hover { color: var(--blue-soft); border-color: rgba(90, 160, 230, 0.5); }

.menu__list { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.menu__list li { margin-bottom: 0.55rem; }
.menu__list a {
  display: inline-block;
  font-size: 0.98rem;
  color: var(--muted);
  transition: color 0.2s, transform 0.2s;
}
.menu__list a:hover { color: var(--white); transform: translateX(4px); }

.menu__foot {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  opacity: 0;
  transition: opacity 0.5s 0.34s;
}
.menu.is-open .menu__foot { opacity: 1; }

.menu__meta { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; }
.menu__meta a {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  transition: color 0.2s;
}
.menu__meta a:hover { color: var(--blue-soft); }

.menu__contact { display: flex; flex-wrap: wrap; gap: 0.4rem 1.8rem; font-size: 0.92rem; color: var(--muted); }
.menu__contact a { color: var(--blue-soft); }
.menu__contact a:hover { color: var(--white); }

@media (max-width: 900px) {
  .menu { justify-content: flex-start; }
  .menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .menu { padding-top: 6rem; gap: 2rem; }
  .menu__grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .menu__main { font-size: 1.2rem; padding-bottom: 0.6rem; }
  .menu__list { margin-top: 0.7rem; }
  .menu__list li { margin-bottom: 0.4rem; }
  .menu__foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- Hero -------------------------------------------------------- */

.hero {
  position: relative;
  background-color: #071219;
  min-height: 100vh;
  display: grid;
  align-items: end;
  padding: 9rem 0 5rem;
  overflow: hidden;
  isolation: isolate;
}
.hero--sub { min-height: 74vh; align-items: center; padding-top: 11rem; }

/* Herobereich: unten liegt Foto oder Video, darueber die Verlaeufe, die die
   Schrift lesbar halten. Das Foto wird im HTML gesetzt, damit der Pfad
   relativ zur Seite und nicht relativ zur CSS gilt.
   Bildvorschlag: 2400 x 1400 px, ruhige Bildstimmung. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: #071219;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Bild abdunkeln, damit die Schrift ruhig darauf steht.
     Heller wird es mit einem hoeheren Wert bei brightness. */
  filter: brightness(var(--hero-dim, 0.62)) contrast(1.06) saturate(0.92);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(100deg, rgba(6, 15, 21, 0.92) 0%, rgba(6, 15, 21, 0.66) 48%, rgba(8, 30, 50, 0.42) 100%),
    linear-gradient(180deg, rgba(6, 15, 21, 0.55) 0%, transparent 34%, rgba(6, 15, 21, 0.45) 100%),
    radial-gradient(1000px 620px at 82% 16%, rgba(47, 127, 206, 0.20), transparent 64%);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}
/* Hintergrundvideo im Hero. Liegt unter den Verläufen, läuft stumm in
   Endlosschleife. Auf dem Poster liegt das erste Bild, bis das Video da ist. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #071219;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(900px 620px at 70% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(900px 620px at 70% 30%, #000 20%, transparent 78%);
}
.hero__content { max-width: 780px; }
.hero h1 { margin-bottom: 1.2rem; max-width: 18ch; }
.hero .lead { max-width: 46ch; font-size: clamp(1.02rem, 1.6vw, 1.22rem); color: #cfe0ee; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }
.hero--sub .hero__content { max-width: 880px; }
.hero--sub h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); max-width: 26ch; }
.hero--sub .lead { max-width: 60ch; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2.6rem 3.6rem;
  margin-top: 4rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line);
}
.fact strong {
  display: block;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.fact span { font-size: 0.9rem; color: var(--muted); }

/* ---------- Raster ------------------------------------------------------ */

.grid { display: grid; gap: 1.4rem; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Fuenf gleich grosse Leistungskarten: drei oben, zwei mittig darunter. */
.grid--services { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--services > * { grid-column: span 2; }
.grid--services > :nth-child(4) { grid-column: 2 / span 2; }
.grid--services .card--wide { grid-column: 1 / -1; }

/* Arbeitsschutz bleibt dezent betont */
.card--accent {
  background: linear-gradient(150deg, rgba(47, 127, 206, 0.16), rgba(255, 255, 255, 0.04));
  border-color: rgba(90, 160, 230, 0.38);
}

.card--wide {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.6rem;
  align-items: center;
  padding: 3rem;
  background: linear-gradient(120deg, rgba(47, 127, 206, 0.18), rgba(255, 255, 255, 0.04));
  border-color: rgba(90, 160, 230, 0.32);
}
.card--wide h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; }
.card--wide .badge { margin-bottom: 1rem; }

.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0a1720;
  background: var(--signal);
  border-radius: var(--pill);
  padding: 0.4em 0.9em;
}

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ticks li {
  position: relative;
  padding-left: 2rem;
  font-size: 0.97rem;
  color: var(--text);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--blue-soft);
  border-bottom: 2px solid var(--blue-soft);
  transform: rotate(-45deg);
}
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 2.4rem; }

/* Partnerflaeche */
.partners {
  background: var(--white);
  border-radius: var(--radius-l);
  padding: 3rem clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: center;
  margin-top: 3rem;
}
.partners__slot {
  height: 62px;
  border-radius: var(--radius-s);
  border: 1px dashed #c7d3de;
  display: grid;
  place-content: center;
  color: #8b9aa8;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Logowand fuer Kunden und Partner */
.logos {
  background: var(--white);
  border-radius: var(--radius-l);
  padding: 2.6rem clamp(1.4rem, 4vw, 3.2rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.4rem 2rem;
  align-items: center;
  margin-top: 3rem;
}
.logos__item {
  display: grid;
  place-content: center;
  height: 62px;
  padding: 0 0.4rem;
}
.logos__item img {
  max-height: 62px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.logos__item:hover img { transform: scale(1.05); }

/* Schmales Referenzband direkt unter dem Hero */
/* Referenzband, innerhalb eines Abschnitts verwendet */
.refbar { margin-top: clamp(3rem, 6vw, 4.6rem); }
/* Ganz oben im Abschnitt braucht es keinen Abstand nach oben, dafuer einen darunter */
.refbar--top { margin-top: 0; margin-bottom: clamp(1rem, 3vw, 2rem); }
.refbar__label {
  margin-bottom: 1.4rem;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}
.logos--slim {
  margin-top: 0;
  padding: 1.7rem clamp(1.2rem, 3vw, 2.6rem);
  gap: 1.6rem 1.2rem;
}
.logos--slim .logos__item { height: 46px; }
.logos--slim .logos__item img { max-height: 46px; }
.refbar__more { margin-top: 1.5rem; text-align: center; }
.logos--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem 1.4rem; }

/* Stellenkarten auf der Karriereseite */
.jobs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 3rem;
}
.job {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 2.2rem 2rem;
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
}
.job:hover {
  background: var(--card-hover);
  transform: translateY(-4px);
  border-color: rgba(90, 160, 230, 0.4);
}
.job__tag {
  align-self: flex-start;
  margin-bottom: 1.1rem;
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  background: rgba(47, 127, 206, 0.16);
  border: 1px solid rgba(90, 160, 230, 0.34);
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.job h3 { margin-bottom: 0.5em; font-size: 1.28rem; }
.job > p { color: var(--muted); font-size: 0.99rem; }
.job__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.4rem 0 0.4rem;
}
.job__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.85rem;
  white-space: nowrap;
}
.job__chip svg { width: 15px; height: 15px; flex: none; color: var(--blue); }
.job__h4 {
  margin: 1.8rem 0 0.9rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.job__foot { margin-top: auto; padding-top: 1.8rem; }
.job__foot .btn { width: auto; }

/* Partnerkarten mit Logo, Name und kurzer Einordnung */
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 3rem;
}
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 2rem 1.8rem;
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
}
.pcard:hover {
  background: var(--card-hover);
  transform: translateY(-4px);
  border-color: rgba(90, 160, 230, 0.4);
}
.pcard__logo {
  display: grid;
  place-content: center;
  height: 84px;
  margin-bottom: 1.4rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-s);
  background: var(--white);
}
.pcard__logo img { max-height: 58px; max-width: 100%; width: auto; object-fit: contain; }
.pcard h3 { margin-bottom: 0.45em; font-size: 1.12rem; }
.pcard p { color: var(--muted); font-size: 0.98rem; }
.pcard__link { margin-top: auto; padding-top: 1.4rem; }

/* Ablauf */
.steps { counter-reset: s; display: grid; gap: 1.4rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { padding: 2rem 1.6rem; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--card); }
.step::before {
  counter-increment: s;
  content: "0" counter(s);
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blue-soft);
  margin-bottom: 0.8rem;
}
.step h3 { font-size: 1.05rem; }
.step p { font-size: 0.92rem; color: var(--muted); margin: 0; }

/* CTA Band */
.cta-band {
  background: linear-gradient(120deg, var(--blue-deep), var(--blue));
  border-radius: var(--radius-l);
  padding: clamp(2.4rem, 5vw, 3.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 0.3em; }
.cta-band p { color: rgba(255, 255, 255, 0.88); margin: 0; max-width: 46ch; }

/* ---------- Kontakt ----------------------------------------------------- */

/* Kontakt: reine Markenflaeche ohne Bild. */
.contact {
  background-color: var(--blue-deep);
  background-image:
    radial-gradient(900px 520px at 78% 10%, rgba(255, 255, 255, 0.14), transparent 62%),
    linear-gradient(180deg, #14487c 0%, var(--blue-deep) 42%, var(--blue) 100%);
}
.contact h2, .contact .eyebrow { color: var(--white); }
.contact .eyebrow { color: rgba(255, 255, 255, 0.82); }
.contact__cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.6rem; margin-top: 3rem; }

.form {
  background: #0d1c26;
  border-radius: var(--radius-l);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form input, .form textarea, .form select {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--pill);
  color: var(--white);
  font: inherit;
  font-size: 0.95rem;
  padding: 1em 1.4em;
  margin-bottom: 1rem;
}
.form textarea { border-radius: var(--radius-m); min-height: 150px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: #7b8fa0; }
.form input:focus, .form textarea:focus, .form select:focus {
  outline: 2px solid var(--blue-soft);
  outline-offset: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.form select { color: #7b8fa0; }
.form__check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.4rem;
}
.form__check input { width: 18px; height: 18px; flex: none; margin: 0.2em 0 0; border-radius: 4px; }
.form__check a { color: var(--blue-soft); text-decoration: underline; }
.form__submit { display: flex; justify-content: flex-end; }
.form__note { font-size: 0.8rem; color: #7b8fa0; margin-top: 1rem; }

.infos { display: grid; gap: 1rem; align-content: start; }
.info {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-m);
  padding: 1.4rem 1.6rem;
  color: var(--white);
}
.info__icon { display: block; width: 30px; height: 30px; flex: none; color: var(--white); }
.info__icon svg { width: 100%; height: 100%; display: block; }
.info a { text-decoration: none; }
.info a:hover { text-decoration: underline; }
.info strong { display: block; font-size: 0.95rem; }
.info span { font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); }

/* ---------- Footer ------------------------------------------------------ */

.footer { background: #081420; padding: 5rem 0 2.2rem; }
.footer__grid {
  display: grid;
  grid-template-columns: 330px 1fr 1.05fr 1fr 1.08fr;
  gap: 3rem 2rem;
  align-items: start;
}
.footer .logo { margin-bottom: 1rem; }
.footer .logo__claim { white-space: nowrap; }
.footer__claim {
  max-width: 32ch;
  margin-bottom: 1.8rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--muted);
}

.footer__adr {
  margin-bottom: 1.1rem;
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted);
}
.footer__line { margin-top: 0.5rem; font-size: 0.95rem; }
.footer__line a { color: var(--muted); white-space: nowrap; transition: color 0.2s ease; }
.footer__line a:hover { color: var(--white); }

.footer__h {
  margin-bottom: 1.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.footer__h a { color: var(--white); }
.footer__h a:hover { color: var(--blue); }
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li + li { margin-top: 0.62rem; }
.footer__col li a {
  font-size: 0.95rem;
  color: var(--muted);
  transition: color 0.2s ease;
}
.footer__col li a:hover { color: var(--white); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 3.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.footer__copy { font-size: 0.85rem; color: #6d8190; }
.footer__meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; }
.footer__meta a { font-size: 0.85rem; color: #6d8190; }
.footer__meta a:hover { color: var(--white); }

@media (max-width: 1180px) {
  .footer__grid { grid-template-columns: 300px repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.6rem 2rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__claim { max-width: none; }
}

@media (max-width: 560px) {
  .footer { padding: 3.6rem 0 2rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer__bar { justify-content: flex-start; }
}

/* ---------- Bewegung ------------------------------------------------------
   Die Klasse .js setzt ein Inlineskript im Kopfbereich, bevor die Seite
   gezeichnet wird. Ohne JavaScript bleibt alles sichtbar.
   Richtung und Verzoegerung vergibt das Skript ueber data-anim und --d.
   ------------------------------------------------------------------------ */

html.js .reveal {
  opacity: 0;
  transform: translate3d(0, 38px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
html.js .reveal[data-anim="left"]  { transform: translate3d(-54px, 0, 0); }
html.js .reveal[data-anim="right"] { transform: translate3d(54px, 0, 0); }
html.js .reveal[data-anim="zoom"]  { transform: scale(0.94); }
html.js .reveal[data-anim="rise"]  { transform: translate3d(0, 64px, 0) scale(0.97); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* Bilder schieben sich beim Erscheinen aus dem Rahmen heraus in Position */
html.js .media.reveal img,
html.js .split__media.reveal img {
  transform: scale(1.14);
  transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--d, 0ms);
}
html.js .media.reveal.is-in img,
html.js .split__media.reveal.is-in img { transform: scale(1); }

/* Karten kommen leicht versetzt und mit einem Hauch Tiefe */
html.js .grid .reveal,
html.js .steps .reveal { transform: translate3d(0, 46px, 0) scale(0.985); }
html.js .grid .reveal.is-in,
html.js .steps .reveal.is-in { transform: none; }

/* Herobereich faehrt beim Laden gestaffelt ein */
@keyframes heroIn {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to   { opacity: 1; transform: none; }
}
html.js .hero__content > * {
  opacity: 0;
  animation: heroIn 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
html.js .hero__content > *:nth-child(1) { animation-delay: 0.15s; }
html.js .hero__content > *:nth-child(2) { animation-delay: 0.30s; }
html.js .hero__content > *:nth-child(3) { animation-delay: 0.45s; }
html.js .hero__content > *:nth-child(4) { animation-delay: 0.60s; }

/* Herobild wandert beim Scrollen langsamer als der Inhalt */
.hero__photo, .hero__video { will-change: transform; }

/* Bildbaender: der Text laeuft dem Bild entgegen */
html.js .band__text.reveal { transform: translate3d(-48px, 0, 0); }
html.js .band__text.reveal.is-in { transform: none; }

/* Zahlen der Ablaufschritte zaehlen sich hoch */
html.js .step.reveal::before { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .6s .2s, transform .6s .2s; }
html.js .step.reveal.is-in::before { opacity: 1; transform: none; }

/* Trennlinie waechst */
html.js .divider { transform: scaleY(0); transform-origin: top; transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1); }
html.js .divider.is-in { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .grid .reveal,
  html.js .steps .reveal,
  html.js .band__text.reveal,
  html.js .hero__content > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  html.js .media.reveal img { transform: none !important; }
  html.js .divider { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsiv --------------------------------------------------- */

@media (max-width: 1040px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--services > *, .grid--services > :nth-child(4) { grid-column: auto; }
  .grid--services > :nth-child(5) { grid-column: span 2; }
  .grid--services .card--wide { grid-column: span 2; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__cols { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  .header__mail { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .logo__mark { width: 34px; height: 34px; }
  .logo__name { font-size: 0.95rem; }
  .logo__claim { font-size: 0.54rem; letter-spacing: 0.16em; }
  .header__tel, .header__mail { display: none; }
  .grid--3, .grid--2, .grid--services, .steps { grid-template-columns: 1fr; }
  .grid--services > *, .grid--services > :nth-child(4), .grid--services > :nth-child(5),
  .grid--services .card--wide { grid-column: auto; }
  .card--wide { grid-template-columns: 1fr; padding: 2rem 1.6rem; }
  .ticks--2 { grid-template-columns: 1fr; }
  .split, .gallery { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .band { background-attachment: scroll; }
  .band::before { background: linear-gradient(180deg, rgba(8, 20, 28, 0.86), rgba(8, 20, 28, 0.94)); }
  .partners { grid-template-columns: repeat(2, 1fr); padding: 2rem 1.4rem; }
  .logos { grid-template-columns: repeat(2, 1fr); padding: 1.8rem 1.2rem; gap: 1.8rem 1.2rem; }
  .logos--5 { grid-template-columns: repeat(2, 1fr); }
  .logos--slim { padding: 1.4rem 1rem; gap: 1.4rem 1rem; }
  .pgrid { grid-template-columns: 1fr; }
  .jobs { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .hero { min-height: 92vh; }
  .hero__content { max-width: none; }
  .hero__facts { gap: 1.8rem 2.4rem; }
  .cta-band { flex-direction: column; align-items: flex-start; }
}

/* ---------- Brotkrumen ---------------------------------------------------
   Sitzen im Herobereich anstelle des Eyebrows, dadurch keine zusaetzliche
   Leiste unter dem Bild.
   ------------------------------------------------------------------------ */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.1rem;
  margin-bottom: 1.3rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(231, 238, 244, 0.55);
}
.crumbs a { color: var(--blue-soft); transition: color 0.2s; }
.crumbs a:hover { color: var(--white); }
.crumbs span:not(.crumbs__sep) { color: rgba(231, 238, 244, 0.75); }
.crumbs__sep { margin: 0 0.55em; color: rgba(255, 255, 255, 0.3); }

@media (max-width: 520px) {
  .crumbs { font-size: 0.72rem; letter-spacing: 0.06em; }
  .crumbs__sep { margin: 0 0.35em; }
}

/* ---------- Fragen und Antworten ----------------------------------------- */

.faqs { max-width: 900px; margin-left: auto; margin-right: auto; }
.faq {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  margin-bottom: 0.9rem;
  transition: background 0.25s, border-color 0.25s;
}
.faq[open] { background: var(--card-hover); border-color: rgba(90, 160, 230, 0.35); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 3.4rem 1.25rem 1.6rem;
  position: relative;
  font-weight: 700;
  color: var(--white);
  font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.6rem; top: 1.55rem;
  width: 11px; height: 11px;
  border-right: 2px solid var(--blue-soft);
  border-bottom: 2px solid var(--blue-soft);
  transform: rotate(45deg);
  transition: transform 0.25s;
}
.faq[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.faq summary:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 2px; }
.faq__a { padding: 0 1.6rem 1.5rem; color: var(--muted); font-size: 0.98rem; }
.faq__a p { max-width: 74ch; }

/* ---------- Scrollgebundene Bewegung -------------------------------------
   Moderne Browser koennen Animationen an den Scrollfortschritt koppeln.
   Wo das geht, setzt das Skript die Klasse .sda und die Bewegung folgt dem
   Scrollrad, laeuft also beim Zurueckscrollen auch wieder zurueck.
   Alle anderen Browser behalten das einmalige Einblenden von oben.
   ------------------------------------------------------------------------ */

.progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue), var(--blue-soft));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

@keyframes progressGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@supports (animation-timeline: scroll()) {
  .progress {
    animation: progressGrow linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes sdaUp    { from { opacity: 0; transform: translate3d(0, 46px, 0); }        to { opacity: 1; transform: none; } }
@keyframes sdaLeft  { from { opacity: 0; transform: translate3d(-64px, 0, 0); }       to { opacity: 1; transform: none; } }
@keyframes sdaRight { from { opacity: 0; transform: translate3d(64px, 0, 0); }        to { opacity: 1; transform: none; } }
@keyframes sdaZoom  { from { opacity: 0; transform: scale(0.93); }                    to { opacity: 1; transform: none; } }
@keyframes sdaRise  { from { opacity: 0; transform: translate3d(0, 74px, 0) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes sdaGrow  { from { transform: scaleY(0); }                                  to { transform: scaleY(1); } }

/* Bild wandert innerhalb seines Rahmens, solange der Abschnitt sichtbar ist */
@keyframes sdaDrift { from { transform: scale(1.16) translate3d(0, -3.5%, 0); } to { transform: scale(1.16) translate3d(0, 3.5%, 0); } }

/* Bildband: Text laeuft dem Hintergrund entgegen */
@keyframes sdaBand { from { transform: translate3d(-46px, 0, 0); } to { transform: translate3d(34px, 0, 0); } }

html.sda .reveal {
  opacity: 0;
  animation: sdaUp linear both;
  animation-timeline: view();
  animation-range: entry 8% cover 34%;
  transition: none;
}
html.sda .reveal[data-anim="left"]  { animation-name: sdaLeft; }
html.sda .reveal[data-anim="right"] { animation-name: sdaRight; }
html.sda .reveal[data-anim="zoom"]  { animation-name: sdaZoom; }
html.sda .reveal[data-anim="rise"]  { animation-name: sdaRise; }

html.sda .divider {
  transform: scaleY(0);
  animation: sdaGrow linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 26%;
  transition: none;
}

html.sda .media img,
html.sda .split__media img {
  animation: sdaDrift linear both;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
  transition: none;
}

html.sda .band__text {
  animation: sdaBand linear both;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;
}
html.sda .band__text.reveal { opacity: 1; }
html.sda .band__text .reveal { animation: sdaUp linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }

/* Karten in einem Raster kommen weiterhin leicht versetzt, aber scrollgebunden */
html.sda .grid .reveal,
html.sda .steps .reveal { animation-name: sdaRise; }

/* ---------- Schmale Bildschirme: keine seitliche Bewegung ----------------
   Die Einblendung von links und rechts schiebt Elemente kurzzeitig ueber den
   Rand hinaus. Auf dem Handy wird daraus eine Querscrollleiste, deshalb
   bewegt sich dort alles nur noch nach oben. */

@media (max-width: 860px) {
  html.js .reveal[data-anim="left"],
  html.js .reveal[data-anim="right"]  { transform: translate3d(0, 44px, 0); }
  html.sda .reveal[data-anim="left"],
  html.sda .reveal[data-anim="right"] { animation-name: sdaUp; }
  html.sda .band__media, html.sda .band { animation-name: none; }
}

/* ---------- Lange Woerter ------------------------------------------------
   Zusammengesetzte Woerter wie Brandschutzbeauftragter passen auf schmalen
   Bildschirmen nicht in eine Zeile. Sie duerfen deshalb getrennt werden. */

h1, h2, h3, .logo__name { overflow-wrap: break-word; }

@media (max-width: 720px) {
  h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }
}