/* ==========================================================================
   BELHAG AG – Dunkles Premium-Design
   Vanilla CSS · keine Abhängigkeiten
   ==========================================================================
   Gestaltungsidee:
   – Mitternachtsblau + BELHAG-Blau (Markenfarben aus dem Logo), dunkle Akzente
   – Signatur: «Masslinien» – technische Bemassungslinien wie im Küchenplan
   – Helle Zwischensektionen für Rhythmus und Lesbarkeit
   ========================================================================== */

/* ---------- Design-Tokens ---------- */
:root {
  /* Farben – BELHAG-Markenfarben aus dem Logo */
  --ink:        #141619;   /* Anthrazit (Prototyp) */
  --coal:       #1C1F23;   /* Fläche dunkel */
  --umber:      #24282D;   /* Fläche erhöht */
  --line:       #363B41;   /* Linien auf dunkel */
  --blue:       #E8EAED;   /* Heller Akzent auf dunklen Flächen */
  --blue-deep:  #2A2E33;   /* Dunkler Akzent auf hellen Flächen */
  --blue-soft:  rgba(232, 234, 237, 0.22);
  --cream:      #F2F3F5;   /* Text auf dunkel / helle Fläche */
  --paper:      #F1F2F3;   /* helle Sektionen */
  --stone:      #A9AEB5;   /* gedämpfter Text auf dunkel */
  --earth:      #565B61;   /* gedämpfter Text auf hell */

  /* Typografie */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.9rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.75rem, 3.5vw, 2.75rem);
  --text-2xl: clamp(2.5rem, 6vw, 4.5rem);
  --text-hero: clamp(2.75rem, 8vw, 6.5rem);

  /* Layout */
  --max-w: 1280px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.9s;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Anker-Sprünge dürfen nicht unter dem fixierten Header landen */
/* Abstand beim Sprung auf eine Marke: muss die fixierte Kopfleiste freihalten.
   Mit dem groesseren Logo ist sie gescrollt rund 101 px, ungescrollt 112 px hoch. */
[id] { scroll-margin-top: 7.5rem; }

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--cream);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

::selection { background: var(--blue); color: var(--ink); }

/* Sichtbarer Tastaturfokus */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ---------- Typografie ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 340;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); font-weight: 380; }

/* Akzent über Farbe statt Kursive – Space Grotesk hat keinen echten Kursivschnitt */
em { font-style: normal; color: var(--blue); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.25rem;
}
.eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--blue);
}

.lead { font-size: var(--text-lg); line-height: 1.55; color: var(--stone); max-width: 42ch; }

/* ---------- Layout-Helfer ---------- */
.container { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad); }

.section { padding-block: var(--section-y); position: relative; }

.section--light {
  background: var(--paper);
  color: var(--ink);
}
.section--light .lead { color: var(--earth); }
.section--light .eyebrow { color: var(--blue-deep); }
.section--light .eyebrow::before { background: var(--blue-deep); }
/* Helle Sektionen: Akzente dunkel abbilden, sonst unlesbar */
.section--light em { color: var(--blue-deep); }
.section--light .link-arrow { color: var(--blue-deep); }
.section--light .timeline__step .step-mass { color: var(--blue-deep); }
/* Karten sind immer dunkel – Akzente dort hell lassen */
.card .link-arrow, .card em { color: var(--blue); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* ==========================================================================
   SIGNATUR: Masslinie – Bemassungslinie wie im Küchenplan
   Als Sektionstrenner: <div class="masslinie"><span>2400 mm · Massarbeit</span></div>
   ========================================================================== */
.masslinie {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.5rem;
  margin-inline: var(--pad);
}
.masslinie::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--line);
}
/* Endstriche wie bei technischer Bemassung */
.masslinie::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(50% - 6px);
  height: 13px;
  background:
    linear-gradient(var(--line), var(--line)) left center / 1px 13px no-repeat,
    linear-gradient(var(--line), var(--line)) right center / 1px 13px no-repeat;
}
.masslinie span {
  position: relative;
  z-index: 1;
  background: var(--ink);
  padding-inline: 1.25rem;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
}
.section--light .masslinie span { background: var(--paper); color: var(--blue-deep); }

/* ==========================================================================
   Header + Fullscreen-Navigation
   ========================================================================== */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem var(--pad);
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}
.site-header.is-scrolled {
  background: rgba(17, 19, 22, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 0.75rem;
}

.logo {
  z-index: 102;
  display: block;
}
/* Logo: auf dem Desktop doppelt so gross wie bisher (2.4rem -> 4.8rem),
   zum Handy hin so weit herunter, dass Logo, Sprachumschalter und
   Menue-Knopf auch auf 360 px nebeneinander Platz haben. */
.logo img { height: clamp(2.6rem, 1.83rem + 3.3vw, 4.8rem); width: auto; display: block; }

.header-cta { display: none; }
@media (min-width: 760px) {
  .header-cta {
    display: inline-block;
    margin-left: auto;
    margin-right: 1.5rem;
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    color: var(--stone);
    transition: color 0.3s ease;
  }
  .header-cta:hover { color: var(--blue); }
}

/* Burger */
.nav-toggle {
  z-index: 102;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle span {
  width: 2rem;
  height: 1.5px;
  background: var(--cream);
  transition: transform 0.45s var(--ease-out), opacity 0.3s ease, background 0.3s ease;
}
.nav-toggle:hover span { background: var(--blue); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Overlay-Navigation */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 101;
  background: var(--coal);
  display: grid;
  place-items: center;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-out), visibility 0s 0.7s;
}
body.nav-open .nav-overlay {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.7s var(--ease-out);
}
/* Header über das Overlay heben, sonst ist der Schliessen-Button verdeckt
   (z-index 102 der Kinder wirkt nur innerhalb des Header-Stacking-Contexts) */
body.nav-open .site-header {
  z-index: 102;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-overlay ul { text-align: center; }
.nav-overlay li { overflow: hidden; }
.nav-overlay a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.75rem);
  line-height: 1.35;
  color: var(--cream);
  transform: translateY(110%);
  transition: transform 0.7s var(--ease-out), color 0.3s ease;
}
body.nav-open .nav-overlay a { transform: translateY(0); }
body.nav-open .nav-overlay li:nth-child(2) a { transition-delay: 0.05s; }
body.nav-open .nav-overlay li:nth-child(3) a { transition-delay: 0.10s; }
body.nav-open .nav-overlay li:nth-child(4) a { transition-delay: 0.15s; }
body.nav-open .nav-overlay li:nth-child(5) a { transition-delay: 0.20s; }
body.nav-open .nav-overlay li:nth-child(6) a { transition-delay: 0.25s; }
.nav-overlay a:hover, .nav-overlay a[aria-current="page"] { color: var(--blue); }

.nav-overlay .nav-contact {
  margin-top: 2.5rem;
  font-size: var(--text-sm);
  color: var(--stone);
  text-align: center;
  letter-spacing: 0.05em;
}
.nav-overlay .nav-contact a { font-family: var(--font-body); font-size: var(--text-sm); transform: none; color: var(--blue); }

/* ==========================================================================
   Hero mit Ken-Burns-Effekt
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__media, .hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__media img { animation: kenburns 22s var(--ease-out) both; }
@keyframes kenburns {
  from { transform: scale(1.14) translateX(1.5%); }
  to   { transform: scale(1.0)  translateX(0); }
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(17,19,22,0.55) 0%, rgba(17,19,22,0.15) 40%, rgba(17,19,22,0.92) 100%);
}

.hero__title { max-width: 16ch; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span {
  display: inline-block;
  transform: translateY(115%);
  animation: rise 1.1s var(--ease-out) forwards;
}
.hero__title .line:nth-child(2) > span { animation-delay: 0.15s; }
.hero__title .line:nth-child(3) > span { animation-delay: 0.30s; }
@keyframes rise { to { transform: translateY(0); } }

.hero__sub {
  margin-top: 1.75rem;
  max-width: 46ch;
  color: var(--stone);
  font-size: var(--text-lg);
  opacity: 0;
  animation: fadeup 1s var(--ease-out) 0.7s forwards;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
  opacity: 0;
  animation: fadeup 1s var(--ease-out) 0.9s forwards;
}
@keyframes fadeup {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll-Indikator */
.hero__scroll {
  position: absolute;
  right: var(--pad);
  bottom: clamp(3rem, 8vh, 6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-xs);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--stone);
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(var(--blue), transparent);
  animation: scrollpulse 2.2s ease-in-out infinite;
}
@keyframes scrollpulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.5; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}
@media (max-width: 700px) { .hero__scroll { display: none; } }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.9rem;
  border: 1px solid var(--blue);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
  z-index: -1;
}
.btn:hover { color: var(--ink); }
.btn:hover::before { transform: translateY(0); }

.btn--solid { background: var(--blue); color: var(--ink); }
.btn--solid::before { background: var(--cream); }
.btn--solid:hover { border-color: var(--cream); }

.btn--ghost { border-color: var(--line); color: var(--stone); }
.btn--ghost:hover { border-color: var(--blue); }

.section--light .btn { color: var(--ink); border-color: var(--blue-deep); }
.section--light .btn:hover { color: var(--paper); }
.section--light .btn::before { background: var(--ink); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}
.link-arrow::after { content: "→"; transition: transform 0.3s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(6px); }

/* ==========================================================================
   Scroll-Reveal (per IntersectionObserver, siehe main.js)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }

/* ==========================================================================
   Leistungs-Karten
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.card {
  position: relative;
  background: var(--coal);
  border: 1px solid var(--line);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.5s var(--ease-out), border-color 0.4s ease, background 0.4s ease;
}
.card:hover {
  transform: translateY(-8px);
  border-color: var(--blue);
  background: var(--umber);
}
.card__num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--blue);
}
/* Karten sind immer dunkel – Farbe darf nicht aus section--light geerbt werden */
.card h3 { font-size: 1.5rem; color: var(--cream); }
.card p { color: var(--stone); font-size: var(--text-sm); line-height: 1.7; flex-grow: 1; }
.card .link-arrow { margin-top: 0.5rem; }

/* ==========================================================================
   Vorher/Nachher-Slider
   Aufbau: .ba | .ba__after (img) | .ba__before (div mit img, wird geclippt)
   ========================================================================== */
.ba {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  --pos: 50%;
}
.ba img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__after { position: absolute; inset: 0; }
.ba__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 1px;
  background: var(--blue);
  pointer-events: none;
}
.ba__handle::after {
  content: "◂ ▸";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--blue);
  color: var(--blue);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}
.ba__label {
  position: absolute;
  top: 1rem;
  padding: 0.35rem 0.8rem;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(17,19,22,0.75);
  color: var(--cream);
  border: 1px solid var(--line);
  pointer-events: none;
}
.ba__label--before { left: 1rem; }
.ba__label--after  { right: 1rem; }

/* ==========================================================================
   Referenzen-Galerie + Filter + Lightbox
   ========================================================================== */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block: 2.5rem 2rem;
}
.filterbar button {
  padding: 0.6rem 1.3rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--stone);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.filterbar button:hover { border-color: var(--blue); color: var(--cream); }
.filterbar button.is-active { background: var(--blue); border-color: var(--blue); color: var(--ink); }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
}
.gallery__item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out);
}
.gallery__item.is-hidden { display: none; }
/* Wrapper, wenn Galerie-Kacheln als Link dienen (z.B. Teaser auf der Startseite) */
.gallery__link { display: block; }
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out), filter 0.5s ease;
}
.gallery__item:hover img { transform: scale(1.06); filter: brightness(0.65); }
.gallery__item figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.5rem 1.25rem;
  /* Verlauf ist immer dunkel – Textfarbe nicht aus section--light erben */
  color: var(--cream);
  background: linear-gradient(transparent, rgba(17,19,22,0.9));
  transform: translateY(30%);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
}
.gallery__item:hover figcaption { transform: translateY(0); opacity: 1; }
.gallery__item figcaption b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
.gallery__item figcaption span { font-size: var(--text-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(17, 19, 22, 0.94);
  display: none;
  place-items: center;
  padding: var(--pad);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-height: 82vh; max-width: 100%; border: 1px solid var(--line); }
.lightbox__caption { margin-top: 1rem; text-align: center; color: var(--stone); font-size: var(--text-sm); }
.lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  background: none;
  border: 0;
  color: var(--cream);
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}
.lightbox__close:hover { color: var(--blue); transform: rotate(90deg); }

/* ==========================================================================
   Zahlen / Counter
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2rem;
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 5rem);
  color: var(--blue);
  line-height: 1;
}
.stat > span {
  display: block;
  margin-top: 0.75rem;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}
.section--light .stat > span { color: var(--earth); }

/* ==========================================================================
   Prozess-Timeline
   ========================================================================== */
.timeline { position: relative; margin-top: 3.5rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: calc(1.25rem - 0.5px);
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--line);
}
.timeline__step {
  position: relative;
  padding-left: 4rem;
  padding-bottom: 3rem;
}
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step::before {
  content: "";
  position: absolute;
  left: calc(1.25rem - 6px);
  top: 0.5rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--blue);
  background: var(--ink);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.timeline__step.is-visible::before {
  background: var(--blue);
  box-shadow: 0 0 0 6px var(--blue-soft);
}
.timeline__step .step-mass {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
}
.timeline__step h3 { margin-block: 0.35rem 0.6rem; font-size: 1.5rem; }
.timeline__step p { color: var(--stone); max-width: 54ch; }
.section--light .timeline::before { background: #D8DADD; }
.section--light .timeline__step::before { background: var(--paper); }
.section--light .timeline__step.is-visible::before { background: var(--blue-deep); }
.section--light .timeline__step p { color: var(--earth); }

/* ==========================================================================
   Team
   ========================================================================== */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.team figure { position: relative; }
.team img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.6s ease;
  border: 1px solid var(--line);
}
.team figure:hover img { filter: grayscale(0); }
.team figcaption { padding-top: 1rem; }
.team figcaption b { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; display: block; }
.team figcaption span { font-size: var(--text-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue); }
.team figcaption p { margin-top: 0.5rem; font-size: var(--text-sm); color: var(--stone); }
.section--light .team figcaption p { color: var(--earth); }

/* ==========================================================================
   Formulare (Schaden melden / Kontakt / Wizard)
   ========================================================================== */
.form { display: grid; gap: 1.25rem; max-width: 40rem; }
.form label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.5rem;
}
.form input, .form select, .form textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: var(--coal);
  border: 1px solid var(--line);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--text-md);
  transition: border-color 0.3s ease;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--blue);
}
.form textarea { min-height: 8rem; resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; }

/* Wizard */
.wizard__step { display: none; }
.wizard__step.is-active { display: block; animation: fadeup 0.5s var(--ease-out); }
.wizard__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
  margin-block: 1.5rem;
}
.wizard__options button {
  padding: 1.5rem 1.25rem;
  background: var(--coal);
  border: 1px solid var(--line);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--text-md);
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
}
.wizard__options button:hover { border-color: var(--blue); transform: translateY(-3px); }
.wizard__options button.is-selected { background: var(--blue); color: var(--ink); border-color: var(--blue); }
.wizard__progress {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.wizard__progress i {
  flex: 1;
  height: 2px;
  background: var(--line);
  transition: background 0.4s ease;
}
.wizard__progress i.is-done { background: var(--blue); }
.wizard__nav { display: flex; gap: 1rem; margin-top: 2rem; }

/* ==========================================================================
   Sticky-CTA
   ========================================================================== */
.sticky-cta {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  background: var(--blue);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  transform: translateY(150%);
  transition: transform 0.5s var(--ease-out), background 0.3s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta:hover { background: var(--cream); }

/* Mehrere Sticky-CTAs übereinander (Startseite: Schaden melden + Projekt starten) */
.sticky-cta-stack {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  transform: translateY(calc(100% + 2rem));
  transition: transform 0.5s var(--ease-out);
}
.sticky-cta-stack.is-visible { transform: translateY(0); }
.sticky-cta-stack .sticky-cta {
  position: static;
  justify-content: center;
  transform: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sticky-cta--dark {
  background: rgba(28, 31, 35, 0.85);
  color: var(--cream);
  border: 1px solid var(--blue);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sticky-cta--dark:hover { background: var(--blue); color: var(--ink); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 4rem 2.5rem;
  background: var(--coal);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2.5rem;
}
.site-footer h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
}
.site-footer a, .site-footer p { color: var(--stone); font-size: var(--text-sm); line-height: 2; }
.site-footer a:hover { color: var(--cream); }
.footer-bottom {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--text-xs);
  color: var(--stone);
}
.footer-bottom a:hover { color: var(--blue); }

/* ==========================================================================
   Seitenkopf für Unterseiten
   ========================================================================== */
.page-head {
  min-height: 55svh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 3.5rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-head img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  animation: kenburns 18s var(--ease-out) both;
}
.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(17,19,22,0.5), rgba(17,19,22,0.9));
}

/* ==========================================================================
   Schaden-Wizard – Glas-Optik
   ========================================================================== */
.section--glow { overflow: hidden; }
.section--glow .container { position: relative; z-index: 1; }
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.glow--1 { width: 34rem; height: 34rem; top: -6rem; right: -8rem; background: radial-gradient(closest-side, rgba(236, 238, 240, 0.16), transparent 72%); }
.glow--2 { width: 26rem; height: 26rem; bottom: -4rem; left: -7rem; background: radial-gradient(closest-side, rgba(232, 234, 237, 0.3), transparent 72%); }

.glass-card {
  margin-top: 3rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 1.25rem;
  background: linear-gradient(150deg, rgba(232, 234, 237, 0.10), rgba(242, 243, 245, 0.04) 40%, rgba(0, 74, 173, 0.10));
  border: 1px solid rgba(242, 243, 245, 0.14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(242, 243, 245, 0.12);
}
.glass-card .wizard__progress i { background: rgba(242, 243, 245, 0.15); }
.glass-card .wizard__progress i.is-done { background: var(--blue); }
.glass-card .btn { border-radius: 0.65rem; }

.sw__step { display: none; }
.sw__step.is-active { display: block; animation: fadeup 0.5s var(--ease-out); }
.sw__step:focus { outline: none; }
.sw__title { font-size: 1.4rem; }
.sw__nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
  margin-block: 1.75rem 0.5rem;
}
.tiles[hidden] { display: none; }
.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.3rem 1.2rem;
  background: rgba(242, 243, 245, 0.05);
  border: 1px solid rgba(242, 243, 245, 0.13);
  border-radius: 1rem;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.35s var(--ease-out), border-color 0.3s ease, background 0.3s ease;
}
.tile:hover { transform: translateY(-4px); border-color: var(--blue); background: rgba(232, 234, 237, 0.10); }
.tile.is-selected {
  border-color: var(--blue);
  background: rgba(232, 234, 237, 0.16);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.tile__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 0.85rem;
  background: rgba(232, 234, 237, 0.14);
  border: 1px solid rgba(232, 234, 237, 0.22);
  color: var(--blue);
}
.tile__icon svg { width: 1.5rem; height: 1.5rem; }

.upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1.5px dashed rgba(242, 243, 245, 0.28);
  border-radius: 1rem;
  background: rgba(242, 243, 245, 0.04);
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.upload:hover, .upload:focus-within { border-color: var(--blue); background: rgba(232, 234, 237, 0.08); }
.upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload__text { display: grid; gap: 0.15rem; min-width: 0; }
.upload__text b { font-size: var(--text-sm); font-weight: 600; color: var(--cream); }
.upload__text span { font-size: var(--text-xs); color: var(--stone); overflow-wrap: anywhere; }

.agree { display: flex; align-items: flex-start; gap: 0.8rem; }
.agree input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--blue);
}
.agree span { font-size: var(--text-sm); color: var(--stone); }
.agree a { color: var(--blue); text-decoration: underline; }

/* Upload/Agree sind <label>-Elemente – generische .form-Label-Stile neutralisieren */
.form .upload, .form .agree {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: var(--text-md);
  color: var(--cream);
  margin-bottom: 0;
}

.sw__error {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(252, 165, 165, 0.4);
  border-radius: 0.65rem;
  background: rgba(252, 165, 165, 0.08);
  color: #FCA5A5;
  font-size: var(--text-sm);
}
.sw__error a { color: inherit; text-decoration: underline; }

.sw__success { display: block; animation: fadeup 0.5s var(--ease-out); }
.sw__success[hidden] { display: none; }
.sw__success:focus { outline: none; }
.sw__success-icon { width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; }
.sw__success-icon svg { width: 2rem; height: 2rem; }
.sw__success p { color: var(--stone); max-width: 52ch; }

/* Eingabefelder in der Glaskarte halbtransparent */
.glass-card .form input:not([type="file"]):not([type="checkbox"]),
.glass-card .form select,
.glass-card .form textarea {
  background: rgba(17, 19, 22, 0.45);
  border-color: rgba(242, 243, 245, 0.16);
  border-radius: 0.65rem;
}

/* Karte (Kontaktseite) – Satellit, immer sichtbar */
.map { padding: 0; overflow: hidden; }
.map iframe { display: block; width: 100%; aspect-ratio: 21 / 9; border: 0; }
@media (max-width: 700px) {
  .map iframe { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Reduzierte Bewegung – Barrierefreiheit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__title .line > span { transform: none; }
  .hero__sub, .hero__actions { opacity: 1; }
}

/* ---------- Sprachumschalter ---------- */
.langswitch {
  z-index: 102;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
  margin-right: 1.1rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(17, 19, 22, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (min-width: 760px) {
  .langswitch { margin-left: 0; margin-right: 1.4rem; }
}
.langswitch a {
  display: block;
  padding: 0.32rem 0.55rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--stone);
  transition: color 0.25s ease, background 0.25s ease;
}
.langswitch a:hover,
.langswitch a:focus-visible { color: var(--cream); }
.langswitch a[aria-current="true"] {
  background: var(--blue);
  color: var(--ink);
}

/* Vier Sprachen: auf schmalen Geräten kompakter, damit der Kopf nicht überläuft */
@media (max-width: 430px) {
  .langswitch { gap: 0.04rem; padding: 0.15rem; margin-right: 0.7rem; }
  .langswitch a { padding: 0.3rem 0.42rem; font-size: 0.66rem; letter-spacing: 0.05em; }
}

/* ==========================================================================
   «So arbeiten wir» – Sticky Scroll (Startseite, alle Sprachen)
   Links bleibt die Einleitung stehen, rechts zieht der Ablauf vorbei. Die
   Linie füllt sich dabei wie ein Massband, die Punkte leuchten in dem
   Moment auf, in dem die Linie sie erreicht, und der aktuelle Schritt ist
   hervorgehoben. Gesteuert von main-a7.js über die Variable --fortschritt
   und die Klassen is-visible und is-active.
   Nur zweispaltig: einspaltig würde die stehende Einleitung die Schritte
   verdecken. Deshalb ist der Spaltenwechsel hier fest an 960 px gebunden,
   damit Layout und Sticky nie auseinanderlaufen.
   ========================================================================== */
.prozess .timeline::before {
  background: linear-gradient(to bottom,
    var(--blue) calc(var(--fortschritt, 0) * 100%),
    var(--line) calc(var(--fortschritt, 0) * 100%));
}

@media (max-width: 959px) {
  .prozess > .grid-2 { grid-template-columns: 1fr; }
}

@media (min-width: 960px) {
  .prozess > .grid-2 { grid-template-columns: 1fr 1fr; }
  .prozess__intro { position: sticky; top: 8rem; }
  .prozess .timeline__step {
    padding-bottom: clamp(4.5rem, 12vh, 8rem);
    opacity: 0.35;
    transition: opacity 0.5s ease;
  }
  .prozess .timeline__step:last-child { padding-bottom: 0; }
  .prozess .timeline__step.is-active { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .prozess .timeline__step { opacity: 1; transition: none; }
}

/* ==========================================================================
   Jobs – Stelleninserat und Online-Bewerbung (jobs.html)
   Muster wie bei Elektro-Blitz, auf die BELHAG-Farben übertragen. Das
   Inserat steht in einer hellen Sektion (langer Text liest sich dort
   besser), das Formular in einer dunklen – wie alle BELHAG-Formulare.
   ========================================================================== */
.job {
  border: 1px solid var(--line);
  background: var(--coal);
  padding: clamp(1.75rem, 4vw, 3rem);
  max-width: 54rem;
}
.job h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
.job__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0 1.75rem;
}
.tag {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.job__frage {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--cream);
  margin-bottom: 0.9rem;
}
.job p { color: var(--stone); line-height: 1.75; max-width: 62ch; }
.job h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 2.25rem 0 1rem;
}

.checklist { display: grid; gap: 0.85rem; }
.checklist li {
  position: relative;
  padding-left: 2.1rem;
  line-height: 1.55;
  color: var(--stone);
  break-inside: avoid;
}
/* Häkchen aus zwei Rändern – in der Akzentfarbe */
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.5em;
  width: 1rem;
  height: 0.5rem;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}
/* «Wir bieten» zweispaltig wie im gedruckten Inserat; Reihenfolge spaltenweise */
@media (min-width: 720px) {
  .checklist--zwei { display: block; columns: 2; column-gap: 2.5rem; }
  .checklist--zwei li { margin-bottom: 0.85rem; }
}

.job__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.job__aktion p { font-size: var(--text-sm); flex: 1 1 18rem; }
.job__aktion a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
/* Telefonnummer und Mailadresse nie mitten im Wort umbrechen */
.job__aktion a:not(.btn), .form-hinweis a, .form-note a { white-space: nowrap; }

/* Helle Sektion */
.section--light .job { background: #fff; border-color: #E1E3E6; }
.section--light .job h2, .section--light .job__frage { color: var(--ink); }
.section--light .job p, .section--light .job h3, .section--light .checklist li { color: var(--earth); }
.section--light .tag { color: var(--blue-deep); border-color: #D8DADD; }
.section--light .checklist li::before { border-color: var(--blue-deep); }
.section--light .job__aktion { border-top-color: #E1E3E6; }

/* ---------- Rückmeldung unter dem Bewerbungsformular ---------- */
.form-note {
  padding: 0.9rem 1.1rem;
  border-radius: 0.65rem;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.form-note[hidden] { display: none; }
.form-note a { color: inherit; text-decoration: underline; }
.form-note--ok  { border: 1px solid rgba(134, 239, 172, 0.45); background: rgba(134, 239, 172, 0.08); color: #86EFAC; }
.form-note--err { border: 1px solid rgba(252, 165, 165, 0.4);  background: rgba(252, 165, 165, 0.08); color: #FCA5A5; }
.form-hinweis { font-size: var(--text-sm); color: var(--stone); }
.form-hinweis a { color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; }

/* ==========================================================================
   Menü mit sieben Punkten (Jobs, seit 29.10.2026)
   1. Die gestaffelte Einblendung reichte nur bis zum sechsten Punkt.
   2. Das Menü war fest mittig ausgerichtet und nicht scrollbar. Auf einem
      Handy quer (rund 375 px hoch) wurde es schon mit sechs Punkten oben und
      unten abgeschnitten. Jetzt zentriert es sich über automatische Ränder:
      Ist genug Platz, steht es exakt in der Mitte wie bisher; ist es höher
      als der Bildschirm, beginnt es unter der Kopfleiste und lässt sich
      scrollen, statt zu verschwinden.
   ========================================================================== */
body.nav-open .nav-overlay li:nth-child(7) a { transition-delay: 0.30s; }

.nav-overlay {
  place-items: normal;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-overlay > div {
  margin: auto;
  padding-block: 7.5rem;   /* mindestens so viel wie die Kopfleiste hoch ist (bis 112 px) */
}
/* Schrift wächst mit der Breite UND ist durch die Höhe begrenzt – sonst passt
   das Menü auf flachen Laptop-Bildschirmen (z. B. 1280 x 720) nicht mehr
   zwischen Kopfleiste und Unterkante */
.nav-overlay a { font-size: clamp(2rem, min(6vw, 5.6vh), 3.75rem); }