/* =========================================================
   ALUVITA - Main Stylesheet
   Farben: Anthrazit #1A1D21 | Bronze #C49A45 | Alu-Grau #6E7B82
   Font: Manrope (Ueberschriften + Text), 400-800 variabel
   ========================================================= */

/* === SELF-HOSTED FONTS (latin + latin-ext) === */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === CUSTOM PROPERTIES === */
:root {
  --c-primary:    #1A1D21;
  --c-primary-d:  #0F1215;
  --c-accent:     #C49A45;
  --c-accent-d:   #856620;
  --c-secondary:  #6E7B82;
  --c-bg:         #F2F3F4;
  --c-text:       #15181B;
  --c-text-muted: #5A6169;
  --c-white:      #FFFFFF;
  --c-border:     rgba(26,29,33,.12);

  --font-head:  'Manrope', sans-serif;
  --font-body:  'Manrope', sans-serif;

  --header-h:   84px;
  --radius:     3px;
  --radius-lg:  6px;
  --shadow-sm:  0 2px 8px rgba(0,0,0,.08);
  --shadow-md:  0 8px 24px rgba(0,0,0,.12);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.18);

  --transition: .3s ease;
  --transition-slow: .6s ease;
}

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* overflow-x: clip statt hidden – hidden macht aus dem Element einen
   Scroll-Container und schaltet damit position:sticky bei allen
   Nachfahren still ab (betrifft die Leistungs-Sektion). */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  font-size: 16px;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.65;
  overflow-x: clip;
  cursor: default;
}

h1, h2, h3, h4, h5, h6, p, li, span, div {
  cursor: default;
  user-select: none;
}

img, video { display: block; max-width: 100%; height: auto; }
main { overflow-x: clip; }
a { color: inherit; text-decoration: none; cursor: pointer; user-select: none; }
ul { list-style: none; }
address { font-style: normal; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* === TYPOGRAPHY === */
h1,h2,h3,h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
}

/* === LAYOUT UTILITIES === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 6rem 0;
}
.section--light  { background: var(--c-bg); }
.section--white  { background: var(--c-white); }
.section--dark   { background: var(--c-primary); }
/* Eine Stufe tiefer als --c-bg. Bewusst neutral, nicht beige – warme
   Flaechen wuerden mit dem Gold zu einer braunen Masse verschmelzen. */
.section--muted  { background: #EAECEE; }

/* ── Baustellenabsperrung Divider ───────────────────────────── */
.barrier-divider {
  width: 100%;
  background: var(--c-primary-d);
  padding: 10px 0 0;
  line-height: 0;
}

.barrier-lights-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 3rem;
  margin-bottom: 10px;
}

.barrier-light {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #FF8C00;
  box-shadow: 0 0 6px 2px rgba(255,140,0,.7);
  animation: barrier-blink 1.1s step-start infinite;
  flex-shrink: 0;
}

.barrier-light:nth-child(even) {
  animation-delay: .55s;
}

@keyframes barrier-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .08; }
}

.barrier-plank {
  width: 100%;
  height: 42px;
  background: repeating-linear-gradient(
    -45deg,
    #D9AC3F 0px,
    #D9AC3F 22px,
    #111 22px,
    #111 44px
  );
  border-top: 5px solid #2a2a2a;
  border-bottom: 5px solid #2a2a2a;
  margin-bottom: 5px;
}

.barrier-plank:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent-d);
  margin-bottom: .75rem;
}
/* Auf dunklem Grund darf das hellere Bronze stehen — dort trägt es genug Kontrast. */
.eyebrow--light { color: var(--c-accent); }

.section-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--c-primary);
  margin-bottom: 1rem;
}
.section-title--light { color: var(--c-white); }

.section-lead {
  font-size: 1.1rem;
  color: var(--c-text-muted);
  max-width: 580px;
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
}
.section-lead--light { color: rgba(255,255,255,.75); }

.body-text {
  font-size: 1rem;
  color: var(--c-text-muted);
  margin-bottom: 1rem;
}

/* === SVG ICONS === */
.icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: block;
}
.icon--lg { width: 32px; height: 32px; }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .75rem 1.75rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Alle Buttons sehen gleich aus – helle Flaeche, fast schwarze Schrift,
   Haarlinie und ein weicher Schatten. Kein Gold, weder als Flaeche noch als
   Kante: Gold mit weisser Schrift schafft nur 2,4:1, Gold mit dunkler Schrift
   wirkt plakativ, und drei verschiedene Button-Looks auf einer Seite wirken
   unruhig. Der Schatten sorgt dafuer, dass der Knopf auch auf weissem Grund
   (Chat-Panel, Anfrageformular) als Knopf lesbar bleibt. */
.btn-accent {
  background: var(--c-white);
  color: var(--c-primary-d);
  border-color: rgba(26,29,33,.14);
  box-shadow: 0 2px 6px rgba(15,18,21,.10);
}
.btn-accent:hover {
  background: #F2F3F4;
  border-color: rgba(26,29,33,.26);
  box-shadow: 0 6px 20px rgba(15,18,21,.20);
}

.btn-ghost {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255,255,255,.6);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--c-white);
}

.btn-outline-dark {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn-outline-dark:hover {
  background: var(--c-primary);
  color: var(--c-white);
}

.btn-large { padding: 1rem 2.25rem; font-size: 1.1rem; }

/* === HEADER === */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  transition: background var(--transition), box-shadow var(--transition);
}
.header.scrolled {
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
}
.header.scrolled .nav-link { color: var(--c-primary); }
.header.scrolled .burger-line   { background: var(--c-primary); }
.header.scrolled .nav-link:hover { color: var(--c-accent-d); }

.header-inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
  gap: 2rem;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
  text-decoration: none;
}
.logo img {
  width: auto;
  height: 64px;
  max-width: 290px;
  object-fit: contain;
  /* Das Logo ist Gold auf Transparenz und trägt auf hellem wie auf dunklem
     Grund – deshalb kein Filter, weder oben noch im gescrollten Header. */
}

/* Desktop nav */
.nav { margin-left: auto; }
.nav-list {
  display: flex;
  gap: .25rem;
}
.nav-link {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-white);
  padding: .5rem .75rem;
  border-radius: var(--radius);
  position: relative;
  transition: color var(--transition);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: .75rem; right: .75rem;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transition: transform var(--transition);
  transform-origin: left;
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }
.nav-link:hover { color: var(--c-accent); }

.header-cta { margin-left: 1rem; }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 4px;
}
.burger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.burger.open .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open .burger-line:nth-child(2) { opacity: 0; }
.burger.open .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav {
  background: var(--c-white);
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s ease;
}
.mobile-nav.open { max-height: 420px; }

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem 1.5rem;
  gap: .25rem;
}
.mobile-nav-link {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-primary);
  padding: .6rem 0;
  border-bottom: 1px solid var(--c-border);
  display: block;
  transition: color var(--transition);
}
.mobile-nav-link:hover { color: var(--c-accent-d); }
.mobile-cta { margin-top: .75rem; width: 100%; justify-content: center; }

/* === HERO === */
.hero {
  position: relative;
  height: 100dvh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  background: var(--c-primary-d);
}

.hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* Mobile: nur Mobile-Bild sichtbar, Video + Desktop-Poster versteckt */
.hero-poster--desktop,
.hero-video {
  display: none;
}
.hero-poster--mobile {
  display: block;
}

/* Desktop: Mobile-Bild weg, Video + Desktop-Poster sichtbar */
@media (min-width: 768px) {
  .hero-poster--mobile { display: none; }
  .hero-poster--desktop { display: block; z-index: 0; }
  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    160deg,
    rgba(15,18,21,.82) 0%,
    rgba(15,18,21,.60) 50%,
    rgba(110,123,130,.25) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 3;
  padding-top: var(--header-h);
  max-width: 780px;
}

.hero-eyebrow {
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 1.25rem;
  opacity: 0;
  animation: fadeInUp .8s ease .2s forwards;
}

.hero-title {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 800;
  color: var(--c-white);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeInUp .8s ease .4s forwards;
}
.hero-title-accent { color: var(--c-accent); }

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--c-white);
  max-width: 560px;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeInUp .8s ease .6s forwards;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  opacity: 0;
  animation: fadeInUp .8s ease .8s forwards;
}

/* Hero scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero-scroll-dot {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 50%;
  position: relative;
  animation: bounce 2s ease infinite;
}
.hero-scroll-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-60%) rotate(45deg);
  width: 7px; height: 7px;
  border-right: 2px solid rgba(255,255,255,.7);
  border-bottom: 2px solid rgba(255,255,255,.7);
}

/* === ÜBER UNS === */
.ueber-uns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.ueber-uns-img-wrap {
  position: relative;
}
.ueber-uns-img-wrap img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.ueber-uns-badge {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background: var(--c-primary-d);
  color: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  min-width: 110px;
}
.badge-number {
  display: block;
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-accent);
}
.badge-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .9;
  margin-top: .25rem;
}

.ueber-uns-text .section-title { margin-top: .5rem; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2rem;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  flex: 1 1 140px;
  box-shadow: var(--shadow-sm);
}
.trust-icon { color: var(--c-accent); }
.trust-body { display: flex; flex-direction: column; gap: .15rem; }
.trust-body strong { font-size: .9rem; font-weight: 600; color: var(--c-primary); }
.trust-body span   { font-size: .8rem; color: var(--c-text-muted); }

/* === LEISTUNGEN (Sticky-Scroll) ===
   Grundgeruest kommt aus css/sticky-scroll.css. Hier steht nur, was
   fuer diese Seite dazukommt: dunkle Glas-Buehne statt heller Flaeche,
   Bildblock links, Leiste rechts mit Nummer UND Leistungsname.
   Die Kachel-Optik von vorher ist ersatzlos entfallen. */
.leistungen-pin {
  /* Tokens des Bausteins auf die Fensterbau-Palette umgestellt */
  --wz-pin-ink:     var(--c-primary);
  --wz-pin-muted:   var(--c-text-muted);
  --wz-pin-faint:   rgba(26,29,33,.32);
  --wz-pin-accent:  var(--c-accent);
  --wz-pin-surface: var(--c-bg);
  --wz-pin-max:     1200px;
  --wz-pin-ease:    cubic-bezier(.22,.61,.36,1);
  --wz-pin-step:    78vh;

  background: var(--c-bg);
}

/* Buehne: dieselbe helle Flaeche wie die Sektion darueber, nur mit
   einem Hauch Akzent oben rechts. Kein Punktraster – das Bild traegt
   die Sektion, der Grund haelt sich raus. */
.leistungen-pin .wz-pin__stage {
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(196,154,69,.16) 0%, transparent 65%),
    linear-gradient(180deg, #FFFFFF 0%, var(--c-bg) 45%, var(--c-bg) 100%);
}
.leistungen-pin .wz-pin__inner { position: relative; z-index: 1; }

/* Die angepinnte Buehne steht 100vh hoch unter dem fixierten Kopf –
   ohne diesen Freiraum rutscht das Label darunter. */
.leistungen-pin.is-live .wz-pin__stage { padding-top: var(--header-h); }

/* Bei reduzierter Bewegung setzt der Baustein die Buehne auf
   position: static – hier wieder relative, damit spaetere Ebenen
   sich an der Buehne ausrichten und nicht am Viewport. */
.leistungen-pin.is-static .wz-pin__stage {
  position: relative;
  overflow: hidden;
}

.leistungen-pin .wz-pin__label {
  font-family: var(--font-head);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--c-text-muted);
}

/* Ein Eintrag ist eine einzige grosse Bildflaeche. Titel steht im Bild,
   Beschreibung und Button kommen erst beim Darauffahren dazu. */
.leistungen-pin .wz-pin__item { display: block; }

.leistungen-pin .wz-pin__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  /* Hoehe an der Fensterhoehe statt am Seitenverhaeltnis – die Buehne
     ist genau 100vh hoch, auf niedrigen Laptops muss das Bild mit. */
  height: clamp(320px, 62vh, 620px);
}
.leistungen-pin .wz-pin__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--wz-pin-ease);
}
.leistungen-pin .wz-pin__media:hover img { transform: scale(1.04); }

/* Verlauf von unten, damit die Schrift auf jedem Motiv sitzt.
   Beim Darauffahren wird er kraeftiger, sonst konkurriert der
   Beschreibungstext mit dem Bild. */
.leistungen-pin .wz-pin__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: linear-gradient(to top,
    rgba(15,18,21,.80) 0%,
    rgba(15,18,21,.34) 42%,
    rgba(15,18,21,0)   80%);
  transition: background .45s var(--wz-pin-ease);
}
.leistungen-pin .wz-pin__media:hover .wz-pin__overlay {
  background: linear-gradient(to top,
    rgba(15,18,21,.94) 0%,
    rgba(15,18,21,.70) 50%,
    rgba(15,18,21,.28) 100%);
}

.leistungen-pin .wz-pin__num {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(255,255,255,.6);
  margin-bottom: .6rem;
  font-variant-numeric: tabular-nums;
  transition: color .35s var(--wz-pin-ease);
}
.leistungen-pin .wz-pin__media:hover .wz-pin__num { color: var(--c-accent); }

.leistungen-pin .wz-pin__title {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--c-white);
  margin-bottom: 0;
}

/* Aufklappteil. Grid-Trick statt max-height: die Zeile faehrt von 0fr
   auf 1fr, dadurch stimmt die Hoehe unabhaengig von der Textlaenge. */
.leistungen-pin .wz-pin__reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .45s var(--wz-pin-ease),
              opacity .35s var(--wz-pin-ease);
}
.leistungen-pin .wz-pin__reveal > * { min-height: 0; overflow: hidden; }
.leistungen-pin .wz-pin__media:hover .wz-pin__reveal,
.leistungen-pin .wz-pin__media:focus-within .wz-pin__reveal {
  grid-template-rows: 1fr;
  opacity: 1;
}
/* Der Abstand zum Titel sitzt INNEN am Text, nicht am Grid-Kind:
   dessen Innenabstand wuerde die 0fr-Zeile aufhalten (border-box) und
   im geschlossenen Zustand bliebe ein Streifen stehen. */
.leistungen-pin .wz-pin__text {
  padding-top: 1.1rem;
  font-size: clamp(.98rem, 1.1vw, 1.08rem);
  color: rgba(255,255,255,.85);
  max-width: 52ch;
  margin-bottom: 1.5rem;
}

.leistungen-pin .wz-pin__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.leistungen-pin .wz-pin__link {
  font-size: .92rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(255,255,255,.35);
  transition: color var(--transition), border-color var(--transition);
}
.leistungen-pin .wz-pin__link:hover { color: var(--c-white); border-bottom-color: var(--c-white); }

/* Leiste rechts: Nummer plus Leistungsname.
   Am rechten Bildschirmrand klebt die fixierte Telefon-/Mail-Spalte
   (.floating-contact, 52 px, vertikal mittig) – genau auf Hoehe der
   Leiste. Sobald der Aussenrand des Containers dafuer nicht reicht,
   rueckt die Leiste um die Differenz nach links. */
.leistungen-pin.is-live {
  --rail-shift: max(0px, calc(76px - (100vw - min(100vw, var(--wz-pin-max))) / 2));
}
.leistungen-pin.is-live .wz-pin__rail {
  right: var(--rail-shift);
  gap: 1.15rem;
  width: 11.5rem;
}
.leistungen-pin.is-live .wz-pin__rail li {
  gap: .7rem;
  font-family: var(--font-head);
  font-size: .78rem;
  letter-spacing: .1em;
  white-space: nowrap;
}
.leistungen-pin.is-live .wz-pin__rail li::after { order: -1; width: 20px; }
.leistungen-pin.is-live .wz-pin__rail li.is-current::after { width: 34px; }
.leistungen-pin.is-live .wz-pin__rail-num { font-variant-numeric: tabular-nums; }
.leistungen-pin.is-live .wz-pin__rail-name {
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  font-size: .82rem;
}

/* Platz fuer die Leiste, damit sie nicht auf dem Text liegt */
@media (min-width: 992px) {
  .leistungen-pin.is-live .wz-pin__items,
  .leistungen-pin.is-live .wz-pin__label {
    padding-right: calc(12.5rem + var(--rail-shift));
  }
}

/* Ohne Hover (Touch) und auf schmalen Fenstern gibt es nichts zum
   Darauffahren – dort steht der Text von Anfang an offen. */
@media (hover: none), (max-width: 991px) {
  .leistungen-pin .wz-pin__reveal {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .leistungen-pin .wz-pin__overlay {
    background: linear-gradient(to top,
      rgba(15,18,21,.94) 0%,
      rgba(15,18,21,.70) 50%,
      rgba(15,18,21,.28) 100%);
  }
}

@media (max-width: 991px) {
  .leistungen-pin .wz-pin__media { height: clamp(400px, 66vh, 560px); }
  .leistungen-pin .wz-pin__text { margin-bottom: 1.25rem; }
}
@media (max-width: 600px) {
  .leistungen-pin .wz-pin__title { font-size: 1.75rem; }
  .leistungen-pin .wz-pin__text { font-size: .95rem; }
  .leistungen-pin .wz-pin__actions { gap: .75rem 1rem; }
}

.cta-bar-text {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: .02em;
}

/* === VORTEILE === */
.vorteile { text-align: center; }

.vorteile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.vorteil-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.vorteil-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.vorteil-icon {
  margin: 0 auto 1.25rem;
  width: 48px;
  height: 48px;
  background: rgba(196,154,69,.1);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
}
.vorteil-title {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: .6rem;
  letter-spacing: .02em;
}
.vorteil-text {
  font-size: .9rem;
  color: var(--c-text-muted);
  line-height: 1.6;
}

/* === FAQ === */
.faq-wrap { max-width: 1100px; margin: 0 auto; text-align: center; }

.faq-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3rem;
  margin-top: 3rem;
  text-align: left;
}

.faq-show-more-wrap {
  display: none;
  justify-content: center;
  margin-top: 1.5rem;
}

.faq-item {
  border-bottom: 1px solid var(--c-border);
}
.faq-item:first-child { border-top: 1px solid var(--c-border); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 0;
  gap: 1rem;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: .01em;
  text-align: left;
  transition: color var(--transition);
}
.faq-q:hover { color: var(--c-accent-d); }
.faq-q[aria-expanded="true"] { color: var(--c-accent-d); }

/* Animated chevron via CSS */
.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}
.faq-chevron::before,
.faq-chevron::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition);
}
.faq-chevron::before { transform: translate(-100%, -50%) rotate(0deg); }
.faq-chevron::after  { transform: translate(0, -50%) rotate(0deg); }

/* Vertical bar (forms + sign) */
.faq-q[aria-expanded="false"] .faq-chevron::before { transform: translate(-100%, -50%); }
.faq-q[aria-expanded="false"] .faq-chevron::after  { transform: translate(0, -50%) rotate(90deg); }
.faq-q[aria-expanded="true"]  .faq-chevron::before { transform: translate(-100%, -50%); }
.faq-q[aria-expanded="true"]  .faq-chevron::after  { transform: translate(0, -50%) rotate(0deg); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.faq-a.open {
  max-height: 400px;
}
.faq-a p {
  padding-bottom: 1.25rem;
  color: var(--c-text-muted);
  font-size: .975rem;
  line-height: 1.7;
}

/* === KARRIERE STELLENANGEBOTE === */
.karriere-stellen {
  background: var(--c-bg);
  padding: 5rem 0;
}
.karriere-stellen-title {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: var(--c-primary);
  text-align: center;
  margin-bottom: 3rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.karriere-stellen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.karriere-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--c-accent);
  transition: transform var(--transition), box-shadow var(--transition);
}
.karriere-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.karriere-card-icon {
  color: var(--c-accent);
  margin-bottom: 1rem;
}
.karriere-card h3 {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .5rem;
}
.karriere-card p {
  font-size: .95rem;
  color: var(--c-text-muted);
  line-height: 1.55;
}
@media (max-width: 900px) {
  .karriere-stellen-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .karriere-stellen-grid { grid-template-columns: 1fr; }
}

/* === KONTAKT === */
.kontakt .section-lead { margin-bottom: 3.5rem; margin-left: 0; }

.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.kontakt-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.kontakt-icon {
  width: 44px;
  height: 44px;
  background: rgba(196,154,69,.15);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
  flex-shrink: 0;
  margin-top: .1rem;
}
.kontakt-detail { display: flex; flex-direction: column; gap: .25rem; }
.kontakt-detail strong { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }

.kontakt-link {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-white);
  transition: color var(--transition);
}
.kontakt-link:hover { color: var(--c-accent-d); }

.kontakt-address {
  font-size: 1rem;
  color: rgba(255,255,255,.8);
  line-height: 1.6;
}

.kontakt-cta { margin-top: 2rem; }

.kontakt-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.kontakt-map iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
}

/* === FLOATING CONTACT BUTTONS === */
.floating-contact {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 998;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.floating-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--c-white);
  color: var(--c-primary-d);
  border-radius: 3px 0 0 4px;
  transition: background var(--transition), transform var(--transition);
  box-shadow: -2px 2px 12px rgba(15,18,21,.18);
}
.floating-btn:hover {
  background: #F2F3F4;
  transform: translateX(-4px);
}
.floating-btn .icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* === REVIEWS CAROUSEL === */
.reviews {
  overflow: hidden;
}
.reviews .container {
  text-align: center;
}
.reviews-carousel-wrap {
  margin-top: 2.5rem;
}
.reviews-track-outer {
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.reviews-track {
  display: flex;
  gap: 1.5rem;
  /* laeuft per rAF durch (js/main.js), deshalb KEIN transition –
     das wuerde jede Einzelbewegung nachziehen und ruckeln */
  will-change: transform;
}
.review-card {
  flex: 0 0 calc(33.333% - 1rem);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.review-stars {
  color: var(--c-accent);
  font-size: 1.2rem;
  letter-spacing: 2px;
}
.review-text {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--c-text);
  flex: 1;
}
.review-author {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-top: .75rem;
  border-top: 1px solid var(--c-border);
}
.review-author strong {
  font-size: .95rem;
  color: var(--c-text);
}
.review-author span {
  font-size: .82rem;
  color: var(--c-text-muted);
}
.reviews-dots {
  display: none;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.75rem;
}
.reviews-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-border);
  cursor: pointer;
  transition: background var(--transition);
  border: none;
}
.reviews-dot.active {
  background: var(--c-accent);
}
@media (max-width: 860px) {
  .review-card { flex: 0 0 calc(50% - .75rem); }
}
@media (max-width: 600px) {
  .review-card { flex: 0 0 90%; }
  .floating-contact { display: none; }
}

/* === PROJEKT CTA ===
   Anruf-Band zwischen Referenzen und Über uns. Links die Argumente,
   rechts eine Glasflaeche mit Nummer und Rueckruf-Button. */
.projekt-cta {
  position: relative;
  overflow: hidden;
  background: var(--c-primary);
  padding: clamp(3.25rem, 6vw, 5.25rem) 0;
}

/* Fensterraster – ruhige Struktur, laeuft nach rechts aus. */
.projekt-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 92px 92px;
  -webkit-mask-image: linear-gradient(100deg, #000 0 40%, transparent 75%);
          mask-image: linear-gradient(100deg, #000 0 40%, transparent 75%);
  pointer-events: none;
}

/* Warmer Akzentschimmer hinter der Kontaktflaeche. */
.projekt-cta::after {
  content: "";
  position: absolute;
  top: -35%;
  right: -12%;
  width: 55vw;
  height: 170%;
  background: radial-gradient(closest-side, rgba(196,154,69,.42), transparent 72%);
  pointer-events: none;
}

.projekt-cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  text-align: left;
}

.projekt-cta .eyebrow { color: var(--c-accent); }

.projekt-cta-headline {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  color: var(--c-white);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: none;
  margin-bottom: 1rem;
}

.projekt-cta-lead {
  color: rgba(255,255,255,.72);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 46ch;
  margin-bottom: 1.75rem;
}

.projekt-cta-points { display: flex; flex-direction: column; gap: .7rem; }
.projekt-cta-points li {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: rgba(255,255,255,.9);
  font-size: .97rem;
  line-height: 1.5;
}
.projekt-cta-points .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--c-accent);
}

/* Kontaktflaeche */
.projekt-cta-panel {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  text-align: center;
  animation: cta-glow 6s ease-in-out infinite;
}

/* Der Schein liegt HINTER der Karte: box-shadow zeichnet ausserhalb der
   Box, nie darin – deshalb kein Schleier ueber Nummer und Button. */
@keyframes cta-glow {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(196,154,69,0); }
  50%      { box-shadow: var(--shadow-lg), 0 0 70px 12px rgba(196,154,69,.42); }
}
@media (prefers-reduced-motion: reduce) {
  .projekt-cta-panel { animation: none; }
}

.projekt-cta-panel-label {
  display: block;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 1rem;
}

.projekt-cta-phone {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--c-white);
}
.projekt-cta-phone-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-white);
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition),
              transform var(--transition);
}
.projekt-cta-phone-num {
  border-bottom: 2px solid transparent;
  padding-bottom: .08em;
  transition: border-color var(--transition);
}
.projekt-cta-phone:hover .projekt-cta-phone-icon {
  background: var(--c-white);
  color: var(--c-primary);
  transform: translateY(-2px);
}
.projekt-cta-phone:hover .projekt-cta-phone-num { border-bottom-color: rgba(255,255,255,.55); }

.projekt-cta-hours {
  font-size: .88rem;
  color: rgba(255,255,255,.6);
  margin: .75rem 0 1.5rem;
}

.projekt-cta-btn { width: 100%; justify-content: center; }

.projekt-cta-note {
  margin-top: 1rem;
  font-size: .88rem;
  color: rgba(255,255,255,.55);
}
.projekt-cta-note a {
  color: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(255,255,255,.3);
  transition: border-color var(--transition), color var(--transition);
}
.projekt-cta-note a:hover { color: var(--c-white); border-bottom-color: var(--c-white); }

@media (max-width: 900px) {
  .projekt-cta-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .projekt-cta-lead { max-width: none; }
  .projekt-cta::after { top: auto; bottom: -30%; right: -30%; width: 90vw; height: 70%; }
}
@media (max-width: 600px) {
  .projekt-cta-phone { gap: .6rem; font-size: 1.45rem; }
  .projekt-cta-phone-icon { width: 38px; height: 38px; }
  .projekt-cta-panel { padding: 1.5rem 1.25rem; }
}

/* === FOOTER === */
.footer { background: var(--c-primary-d); }

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 3rem;
  padding: 4rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer-logo-img {
  width: auto;
  height: 40px;
  max-width: 200px;
  opacity: .95;
}
.footer-tagline {
  font-size: .875rem;
  color: rgba(255,255,255,.5);
  margin-top: 1rem;
  line-height: 1.7;
}

.footer-col-title {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 1.25rem;
}

.footer-nav ul,
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.footer-nav a,
.footer-contact-list a,
.footer-contact-list li {
  font-size: .9rem;
  color: rgba(255,255,255,.7);
  transition: color var(--transition);
}
.footer-nav a:hover,
.footer-contact-list a:hover { color: var(--c-accent); }

.footer-cta { margin-top: 1.5rem; }

.footer-bottom { padding: 1.5rem 0; }
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-copy {
  font-size: .8rem;
  color: rgba(255,255,255,.7);
}
.footer-legal {
  display: flex;
  gap: 1.5rem;
}
.footer-legal a {
  font-size: .8rem;
  color: rgba(255,255,255,.75);
  transition: color var(--transition);
}
.footer-legal a:hover { color: var(--c-accent); }

/* === COOKIE BANNER === */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--c-white);
  border-top: 3px solid var(--c-accent);
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  z-index: 9990;
  transform: translateY(100%);
  transition: transform .5s ease;
}
.cookie-banner.visible { transform: translateY(0); }

.cookie-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.cookie-content p {
  flex: 1;
  font-size: .875rem;
  color: var(--c-text-muted);
}
.cookie-content a {
  color: var(--c-accent-d);
  text-decoration: underline;
}
.cookie-buttons { display: flex; gap: .75rem; flex-shrink: 0; }

/* === ABSENCE POPUP === */
.absence-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 9980;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.absence-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.absence-popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.9);
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 90%;
  text-align: center;
  z-index: 9985;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.absence-popup.active {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%,-50%) scale(1);
}

.absence-close {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 1.5rem;
  color: var(--c-text-muted);
  line-height: 1;
  padding: .25rem .5rem;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
}
.absence-close:hover { color: var(--c-primary); background: var(--c-bg); }

.absence-icon  { font-size: 3rem; margin-bottom: .75rem; }
.absence-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-primary);
  margin-bottom: .75rem;
}
.absence-text {
  font-size: .95rem;
  color: var(--c-text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.65;
}

/* === ANIMATIONS === */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

.animate-slide-left,
.animate-slide-right,
.animate-fade-up {
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
}
.animate-slide-left  { transform: translateX(-30px); }
.animate-slide-right { transform: translateX(30px); }
.animate-fade-up     { transform: translateY(32px); }

@media (max-width: 767px) {
  .animate-slide-left,
  .animate-slide-right { transform: translateY(20px); }
}

.animate-slide-left.in-view,
.animate-slide-right.in-view,
.animate-fade-up.in-view {
  opacity: 1;
  transform: translate(0);
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .ueber-uns-grid   { gap: 3rem; }
  .vorteile-grid    { grid-template-columns: repeat(2, 1fr); }
  .footer-inner     { grid-template-columns: 1fr 1fr; }
  .footer-brand     { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav, .header-cta { display: none; }
  .burger { display: flex; }
  .logo img { height: 50px; max-width: 220px; }

  .ueber-uns-grid  { grid-template-columns: 1fr; }
  .ueber-uns-badge { right: 1rem; bottom: -1rem; }

  .faq-columns { grid-template-columns: 1fr; }

  .kontakt-grid { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.25rem; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { padding: 1.25rem 1.25rem; }
}

@media (max-width: 640px) {
  .section { padding: 4rem 0; }

  .hero-title { font-size: 2.6rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .vorteile-grid { grid-template-columns: 1fr; }
  .faq-show-more-wrap { display: flex; }
  .faq-item.faq-hide-mobile { display: none; }
  .faq-item.faq-hide-mobile.faq-revealed { display: block; }
  .faq-col--secondary { display: none; }
  .faq-col--secondary.faq-revealed { display: block; }

  .cookie-content { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .cookie-buttons { width: 100%; }
  .cookie-buttons .btn { flex: 1; justify-content: center; }

  .leistungen-cta-bar { flex-direction: column; text-align: center; }
  .kontakt-cta { width: 100%; justify-content: center; }

  .ueber-uns-badge { right: .5rem; bottom: -1rem; }
  .trust-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
  }
  .trust-item {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    padding: .7rem .75rem;
  }
  .trust-body strong { font-size: .8rem; }
  .trust-body span   { font-size: .72rem; }
}

/* ===== SERVICE DETAIL PAGES ===== */

.sp-hero {
  position: relative;
  height: 62vh;
  min-height: 380px;
  max-height: 620px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin-top: var(--header-h);
}

.sp-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.sp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15,27,38,.92) 0%,
    rgba(15,27,38,.55) 45%,
    rgba(15,27,38,.15) 100%
  );
  z-index: 1;
}

.sp-hero-content {
  position: relative;
  z-index: 2;
  padding: 2.5rem 0 3rem;
  width: 100%;
}

.sp-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 1.5rem;
  transition: color .2s ease, gap .2s ease;
  cursor: pointer;
}

.sp-back:hover { color: var(--c-accent-d); gap: .8rem; }

.sp-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 800;
  color: var(--c-white);
  text-transform: uppercase;
  line-height: 1.0;
}

/* body */
.sp-body {
  background: var(--c-bg);
  padding: 5rem 0 6rem;
}

.sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem 5rem;
  align-items: start;
}

.sp-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.sp-bullets li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--c-white);
  border-left: 4px solid var(--c-accent);
  padding: .75rem 1.1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-sm);
  cursor: default;
}

.sp-bullets li::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}

.sp-detail h2 {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--c-primary);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.sp-detail p {
  font-size: .975rem;
  line-height: 1.85;
  color: var(--c-text-muted);
  margin-bottom: 1rem;
  cursor: default;
}

/* CTA */
.sp-cta {
  background: var(--c-primary);
  padding: 5.5rem 0;
  text-align: center;
}

.sp-cta-inner { max-width: 640px; margin: 0 auto; }

.sp-cta h2 {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--c-white);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: .75rem;
  cursor: default;
}

.sp-cta p {
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  cursor: default;
}

.sp-cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .sp-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sp-number { font-size: 4rem; }
}

@media (max-width: 640px) {
  .sp-hero { height: 55vh; }
  .sp-body { padding: 3.5rem 0 4rem; }
  .sp-cta { padding: 4rem 0; }
  .sp-cta-actions { flex-direction: column; align-items: center; }
  .sp-cta-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   ANFRAGE-FORMULAR
   ============================================================ */
.anfrage-form {
  max-width: 760px;
  margin: 2.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.form-field label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text);
}
.form-field label span { color: var(--c-accent-d); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(196,154,69,.15);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(61,55,51,.45); }

/* Feldfehler erst nach dem Absendeversuch zeigen, nicht beim Tippen. */
.anfrage-form.was-validated input:invalid,
.anfrage-form.was-validated select:invalid,
.anfrage-form.was-validated textarea:invalid {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .93rem;
  color: var(--c-text-muted);
  cursor: pointer;
}
.form-check input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  flex-shrink: 0;
  accent-color: var(--c-accent);
}
.form-check a { text-decoration: underline; }
.anfrage-form.was-validated .form-check input:invalid { outline: 2px solid #C0392B; }

.form-hint { font-size: .85rem; color: var(--c-text-muted); }
.anfrage-form .btn { align-self: flex-start; }

.form-status {
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  font-size: .95rem;
}
.form-status--ok   { background: rgba(110,123,130,.12); color: var(--c-secondary); }
.form-status--fail { background: rgba(192,57,43,.10); color: #C0392B; }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .anfrage-form .btn { align-self: stretch; justify-content: center; }
}

/* ============================================================
   CHAT-WIDGET
   ============================================================ */
.chatbot {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
}

.chatbot-btn {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-primary-d);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  /* Startet unsichtbar, wird per JS nach 10 s eingeblendet. */
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1), background var(--transition);
}
.chatbot.is-visible .chatbot-btn { opacity: 1; transform: scale(1); pointer-events: auto; }
.chatbot-btn:hover { background: #F2F3F4; }

/* Schlichter gruener Punkt, bewusst ohne Pulsring. */
.chatbot-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2ECC71;
  display: inline-block;
  flex-shrink: 0;
}
.chatbot-dot--badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 13px;
  height: 13px;
  border: 2px solid var(--c-white);
}

.chatbot-panel {
  width: 320px;
  max-width: calc(100vw - 2.5rem);
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.1rem 1.15rem 1.15rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.chatbot.is-open .chatbot-panel { opacity: 1; transform: translateY(0); }

.chatbot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
}
.chatbot-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--c-secondary);
}
.chatbot-close {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--c-text-muted);
  opacity: .5;
  padding: .1rem .25rem;
}
.chatbot-close:hover { opacity: 1; }

.chatbot-text {
  font-size: .93rem;
  line-height: 1.5;
  color: var(--c-text-muted);
  background: var(--c-bg);
  border-radius: var(--radius);
  padding: .7rem .85rem;
  margin-bottom: .9rem;
}

.chatbot-form { display: flex; flex-direction: column; gap: .6rem; }
.chatbot-form input[type="text"],
.chatbot-form input[type="tel"],
.chatbot-form textarea {
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: .65rem .8rem;
  width: 100%;
}
.chatbot-form textarea { resize: vertical; min-height: 74px; }
.chatbot-form input:focus,
.chatbot-form textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(196,154,69,.15);
}
.chatbot-form.was-validated input:invalid,
.chatbot-form.was-validated textarea:invalid { border-color: #C0392B; }

.chatbot-check {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--c-text-muted);
  cursor: pointer;
}
.chatbot-check input {
  width: 1rem;
  height: 1rem;
  margin-top: .12rem;
  flex-shrink: 0;
  accent-color: var(--c-accent);
}
.chatbot-form.was-validated .chatbot-check input:invalid { outline: 2px solid #C0392B; }

.chatbot-send { justify-content: center; width: 100%; font-size: .92rem; padding: .7rem 1rem; }
.chatbot-feedback { font-size: .85rem; color: var(--c-secondary); }
.chatbot-feedback--fail { color: #C0392B; }

/* ============================================================
   EXIT-POPUP
   ============================================================ */
.exit-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(15,27,38,.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity .3s ease;
}
.exit-overlay.is-open { opacity: 1; }

.exit-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.25rem 2rem 2rem;
  transform: translateY(14px) scale(.98);
  transition: transform .3s ease;
}
.exit-overlay.is-open .exit-modal { transform: translateY(0) scale(1); }

.exit-close {
  position: absolute;
  top: .7rem;
  right: .9rem;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--c-text-muted);
  opacity: .5;
  padding: .2rem;
}
.exit-close:hover { opacity: 1; }

.exit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  border-left: 3px solid var(--c-accent-d);
  background: rgba(196,154,69,.12);
  color: var(--c-accent-d);
  margin-bottom: 1.1rem;
}
.exit-icon .icon { width: 26px; height: 26px; }

.exit-title {
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  color: var(--c-text);
  margin-bottom: .7rem;
}
.exit-lead {
  font-size: .97rem;
  line-height: 1.55;
  color: var(--c-text-muted);
  margin-bottom: 1.4rem;
}

.exit-form { display: flex; flex-direction: column; gap: .7rem; }
.exit-form input {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  width: 100%;
}
.exit-form input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(196,154,69,.15);
}
.exit-form.was-validated input:invalid { border-color: #C0392B; }
.exit-send { justify-content: center; width: 100%; }
.exit-feedback { font-size: .9rem; color: var(--c-secondary); }
.exit-feedback--fail { color: #C0392B; }

@media (max-width: 480px) {
  .chatbot { right: 1rem; bottom: 1rem; }
  .exit-modal { padding: 2rem 1.35rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot-btn, .chatbot-panel, .exit-overlay, .exit-modal { transition: opacity .2s ease; transform: none; }
}

/* ============================================================
   FIX: hidden-Attribut schlaegt Layout-Klassen
   Ohne diese Regeln gewinnt "display:flex" gegen [hidden] — das
   Overlay bleibt dann unsichtbar ueber der Seite liegen und
   schluckt saemtliche Klicks.
   ============================================================ */
.exit-overlay[hidden],
.chatbot-teaser[hidden],
.chatbot-panel[hidden] { display: none !important; }

/* Nur der sichtbare Teil faengt Klicks ab. */
.exit-overlay:not(.is-open) { pointer-events: none; }
.exit-overlay.is-open { pointer-events: auto; }

/* ============================================================
   CHAT-TEASER (kleine Sprechblase vor dem Oeffnen)
   ============================================================ */
.chatbot-teaser {
  position: relative;
  max-width: 250px;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: .85rem 2rem .85rem 1rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.chatbot.is-visible .chatbot-teaser { opacity: 1; transform: translateY(0); }
.chatbot-teaser::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: var(--c-white);
  transform: rotate(45deg);
}
.chatbot-teaser-text {
  font-size: .97rem;
  line-height: 1.4;
  color: var(--c-text);
  margin-top: .25rem;
}
.chatbot-teaser-close {
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--c-text-muted);
  opacity: .45;
  padding: .2rem;
}
.chatbot-teaser-close:hover { opacity: 1; }

/* ============================================================
   TOPBAR — duenne Hinweiszeile ueber dem Header
   ============================================================ */
:root { --topbar-h: 34px; }

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--c-primary-d);
  color: var(--c-white);
  border-bottom: 1px solid rgba(255,255,255,.14);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 0 1rem;
  text-align: center;
  transition: background var(--transition);
}
.topbar:hover { background: #15181C; }
.topbar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  flex-shrink: 0;
}
.topbar-arrow { font-weight: 700; }

/* Header rutscht unter die Topbar, Ankersprunge beruecksichtigen beide.
   Nur auf Seiten MIT Topbar – vorher galt der Versatz global und auf allen
   Unterseiten klaffte oben ein 34-px-Streifen ueber dem Header. */
body:has(.topbar) .header { top: var(--topbar-h); }
html:has(.topbar) { scroll-padding-top: calc(var(--header-h) + var(--topbar-h)); }
body:has(.topbar) .hero-content { padding-top: calc(var(--header-h) + var(--topbar-h)); }

@media (max-width: 600px) {
  :root { --topbar-h: 30px; }
  .topbar { font-size: .72rem; gap: .35rem; }
  .topbar-arrow { display: none; }
}

/* ============================================================
   HEADER — Anruf-Button mit Nummer statt Angebots-CTA
   ============================================================ */
.header-call {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-left: 1rem;
  padding: .55rem 1.15rem;
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-primary-d);
  border: 1px solid rgba(26,29,33,.14);
  box-shadow: 0 2px 6px rgba(15,18,21,.10);
  transition: background var(--transition), border-color var(--transition);
}
.header-call:hover { background: #F2F3F4; border-color: rgba(26,29,33,.26); }
.header-call .icon { width: 22px; height: 22px; flex-shrink: 0; }
.header-call-text { display: flex; flex-direction: column; line-height: 1.15; }
.header-call-text strong {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.header-call-num { font-size: .82rem; opacity: .9; }

@media (max-width: 860px) { .header-call { display: none; } }

/* ============================================================
   ANFRAGE — Kopf zentriert wie in den uebrigen Sektionen,
   Formularfelder bleiben linksbuendig
   ============================================================ */
.anfrage-wrap { text-align: center; }
.anfrage-wrap .anfrage-form { text-align: left; }

/* ============================================================
   ALUVITA — ruhigere Typografie
   Die Vorlage setzt Versalien auf fast jedes Element. Das traegt
   bei einem Bauunternehmen, wirkt beim Fensterbau aber laut.
   Versalien bleiben nur bei kleinen Labels (Eyebrow, Badges), wo
   sie mit Sperrung elegant sind.
   ============================================================ */
.btn,
.nav-link,
.mobile-nav-link,
.hero-title,
.section-title,
.header-call-text strong,
.footer-col-title,
.vorteil-title,
.faq-q {
  text-transform: none;
}

/* Manrope laeuft variabel bis 800. 700 statt 800 fuer die Ueberschriften —
   Manrope 800 traegt sehr dick auf, 700 bleibt kraeftig und ruhig. */
h1, h2, h3, h4,
.hero-title,
.section-title {
  font-weight: 700;
  letter-spacing: -.02em;
}

.btn,
.nav-link,
.mobile-nav-link {
  font-weight: 600;
  letter-spacing: .01em;
}

/* Etwas mehr Luft und weichere Kanten passen zum ruhigeren Auftritt. */
.hero-subtitle,
.section-lead { line-height: 1.7; }

/* ============================================================
   NACHTRAEGE
   ============================================================ */

/* Die Anruf-Sektion ist weiter oben neu aufgebaut – Hintergrund und
   Typografie kommen von dort, hier steht nichts mehr dagegen. */

/* Auch diese Ueberschriften liefen noch in Versalien. */
.leistung-cta-title,
.sp-cta-inner h2 { text-transform: none; }

/* Rufnummer im Kopf darf nicht umbrechen. */
.header-call { white-space: nowrap; }
.header-call-num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ============================================================
   CTA-SEKTION der Leistungsseiten
   Vorher: Überschrift, ein Satz, zwei Buttons – zu dünn für den
   wichtigsten Abschluss der Seite. Jetzt zweispaltig: links die
   Argumente, rechts eine Kontaktkarte mit gut sichtbarer Nummer.
   ============================================================ */
.sp-cta { text-align: left; }

.sp-cta-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}

.sp-cta-text h2 { margin-bottom: 1rem; }
.sp-cta-text > p {
  color: rgba(255,255,255,.75);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 46ch;
}

.sp-cta-points { display: flex; flex-direction: column; gap: .85rem; }
.sp-cta-points li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: rgba(255,255,255,.9);
  font-size: .97rem;
  line-height: 1.5;
}
.sp-cta-points .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: .15rem;
  color: var(--c-accent);
}

/* Kontaktkarte */
.sp-cta-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.sp-cta-card-label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: .6rem;
}
.sp-cta-phone {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--c-primary);
  margin-bottom: .4rem;
}
.sp-cta-phone:hover { color: var(--c-accent-d); }
.sp-cta-hours {
  font-size: .88rem;
  color: var(--c-text-muted);
  margin-bottom: 1.5rem;
}
.sp-cta-btn { width: 100%; justify-content: center; }

.sp-cta-meta {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-border);
  font-size: .88rem;
  color: var(--c-text-muted);
}
.sp-cta-meta a:hover { color: var(--c-accent-d); }

@media (max-width: 900px) {
  .sp-cta-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .sp-cta-text > p { max-width: none; }
}

/* ============================================================
   HERO mit Gebäudemotiv
   Das alte Overlay war für ein dunkles Video gebaut und legt sich
   flächig über das Bild. Hier stattdessen ein seitlicher Verlauf:
   links dunkel für den Text, rechts klar, damit Haus und
   Verglasung sichtbar bleiben.
   ============================================================ */
@media (min-width: 768px) {
  .hero-overlay {
    background: linear-gradient(
      100deg,
      rgba(15,18,21,.94) 0%,
      rgba(15,18,21,.88) 30%,
      rgba(15,18,21,.72) 50%,
      rgba(15,18,21,.38) 72%,
      rgba(15,18,21,.14) 100%
    );
  }
  /* Nach rechts versetzt: links liegt ohnehin der dunkle Verlauf,
     so bleibt mehr von Fassade und Verglasung im Bild. */
  .hero-poster--desktop { object-position: 64% 45%; }
}

/* Mobil liegt der Text über der vollen Breite – dort braucht es
   durchgehend Deckung, sonst wird die Headline unlesbar. */
@media (max-width: 767px) {
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(15,18,21,.88) 0%,
      rgba(15,18,21,.78) 45%,
      rgba(15,18,21,.86) 100%
    );
  }
}

/* Etwas Tiefe unter der Headline, damit sie sich vom Glas absetzt. */
.hero-title,
.hero-subtitle { text-shadow: 0 2px 18px rgba(15,18,21,.45); }