/* =========================================================
   CITTENZA BAU - Main Stylesheet
   Farben: Graphit #2D3436 | Deep-Slate #1E272E | Messing #BE9D5D
   Fonts: Space Grotesk (Ueberschriften, 300-700 variabel)
          Inter (Lauftext)
   ========================================================= */

/* === SELF-HOSTED FONTS (latin + latin-ext) === */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-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;
}
/* Inter deckt nur latin ab - fuer Deutsch reicht U+0000-00FF (Umlaute, ss) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-var.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;
}

/* === CUSTOM PROPERTIES === */
:root {
  --c-primary:    #2D3436;
  --c-primary-d:  #1E272E;
  --c-accent:     #BE9D5D;
  --c-accent-d:   #8F7138;
  --c-secondary:  #7A868A;
  --c-bg:         #F2F2F2;
  --c-text:       #22282A;
  --c-text-muted: #5C666A;
  --c-white:      #FFFFFF;
  --c-border:     rgba(45,52,54,.12);

  --font-head:  'Space Grotesk', sans-serif;
  --font-body:  'Inter', 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); }
/* War #EDEAE5 – ein Braunton aus der Bau-Vorlage und der einzige
   warme Ton der Seite. Jetzt eine Stufe tiefer als --c-bg. */
.section--muted  { background: #EDEAE5; }

/* ── 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,
    #F5C518 0px,
    #F5C518 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); }

.btn-accent {
  background: var(--c-accent);
  color: var(--c-primary-d);
  border-color: var(--c-accent);
}
.btn-accent:hover {
  background: #CBAE72;
  border-color: #CBAE72;
  box-shadow: 0 6px 20px rgba(190,157,93,.35);
}

.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--light: fuer Seiten, deren Inhalt direkt hell beginnt
   (Impressum, Datenschutz). Sonst stuende der weisse Header-Inhalt
   vor dem Scrollen unsichtbar auf hellem Grund. */
.header--light {
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
}
.header.scrolled .nav-link,
.header--light .nav-link { color: var(--c-primary); }
.header.scrolled .burger-line,
.header--light .burger-line { background: var(--c-primary); }
.header.scrolled .nav-link:hover,
.header--light .nav-link:hover { color: var(--c-accent-d); }

/* header--on-light (Startseite): Header liegt transparent ueber dem hellen
   Splitscreen-Hero. Navigation dunkel, Burger bleibt weiss – der zeigt sich
   nur mobil, und dort liegt der Header ueber dem dunklen Hero-Bild. */
.header--on-light .nav-link { color: var(--c-primary); }
.header--on-light .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;
  flex-shrink: 0;
  text-decoration: none;
}
/* Ein einziges Logo (goldener Schluessel + Wortmarke), gestapelt – funktioniert
   auf dem dunklen Hero wie auf dem hellen gescrollten Header. Kein Hell/Dunkel-
   Wechsel mehr. */
.logo-img {
  display: block;
  width: auto;
  height: 68px;
}

/* 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: calc(100dvh - var(--header-h)); overflow-y: auto; }

.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;
  overflow: hidden;
  background: var(--c-white);
  padding-top: var(--header-h);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100dvh - var(--header-h));
  position: relative;
  z-index: 1;
}

/* Linke Haelfte: Text auf hellem Grund mit dezentem Raster (.bg-grid) */
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem clamp(1.75rem, 4vw, 3.5rem);
  padding-left: max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem));
  position: relative;
  z-index: 1;
}

/* Dezentes Fensterraster wie im Anruf-Block, nur auf hellem Grund */
.bg-grid {
  background-image:
    linear-gradient(rgba(45,52,54,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,52,54,.045) 1px, transparent 1px);
  background-size: 27px 27px;
}

/* Rechte Haelfte: Video (Bild als Fallback), mit diagonalem Anschnitt links */
.hero-media {
  position: relative;
  overflow: hidden;
  background: var(--c-primary-d);
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Video erst ab Tablet – darunter zaehlt Ladezeit mehr als Bewegung */
.hero-video { display: none; z-index: 1; }
@media (min-width: 768px) {
  .hero-video { display: block; }
}

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

.hero-title {
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeInUp .8s ease .4s forwards;
}
.hero-title-accent { color: var(--c-accent-d); }

.hero-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--c-text-muted);
  max-width: 520px;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeInUp .8s ease .6s forwards;
}

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

/* Ghost-Button ist standardmaessig weiss (fuer dunklen Grund) – auf dem
   hellen Hero muss er dunkel werden, sonst ist er unsichtbar. */
.hero-content .btn-ghost {
  color: var(--c-primary);
  border-color: rgba(45,52,54,.3);
}
.hero-content .btn-ghost:hover {
  background: var(--c-primary);
  color: var(--c-white);
  border-color: var(--c-primary);
}

/* Mobil: klassischer Vollbild-Hero – Bild liegt hinter dem Text, dunkler
   Verlauf sorgt für Lesbarkeit. Kein Splitscreen, kein Video (Ladezeit). */
@media (max-width: 860px) {
  html .hero,
  html body:has(.topbar) .hero { min-height: 88dvh; padding-top: 0; }
  .hero-inner {
    display: block;
    position: relative;
    min-height: 88dvh;
  }
  .hero-media {
    position: absolute;
    inset: 0;
    clip-path: none;
  }
  /* Verlauf über dem Bild: unten dicht für den Text, oben klar fürs Motiv */
  .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
      180deg,
      rgba(21,25,28,.55) 0%,
      rgba(21,25,28,.40) 35%,
      rgba(21,25,28,.86) 100%
    );
  }
  .hero-content {
    position: relative;
    z-index: 3;
    min-height: 88dvh;
    justify-content: flex-end;
    padding: calc(var(--header-h) + var(--topbar-h, 0px) + 2.75rem) 1.5rem 3rem;
    background-image: none; /* .bg-grid aus – Linien auf dunklem Bild sinnlos */
  }
  .hero-eyebrow { color: var(--c-accent); }
  .hero-title { color: var(--c-white); text-shadow: 0 2px 16px rgba(21,25,28,.5); }
  .hero-title-accent { color: var(--c-accent); }
  .hero-subtitle { color: rgba(255,255,255,.9); text-shadow: 0 1px 10px rgba(21,25,28,.6); }
  /* Ghost-Button auf dunklem Grund wieder hell */
  .hero-content .btn-ghost {
    color: var(--c-white);
    border-color: rgba(255,255,255,.6);
  }
  .hero-content .btn-ghost:hover {
    background: rgba(255,255,255,.12);
    color: var(--c-white);
    border-color: var(--c-white);
  }
}

/* === LEISTUNGEN (Raster-Galerie) === */
.leistungen-section { padding: clamp(3.5rem,6vw,5.5rem) 0 0; }
.leistungen-head { text-align: center; margin-bottom: 3rem; }

.services-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}

/* Eine Kachel: Bild mit Verlauf, Nummer oben, Titel unten; Text + Button
   klappen beim Darauffahren auf. Auf Touch/mobil stehen sie dauerhaft. */
.service-item {
  position: relative;
  display: block;
  cursor: default;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  color: var(--c-white);
}
.service-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,1,.3,1);
}
.service-item:hover img { transform: scale(1.08); }

.service-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
  background: linear-gradient(0deg,
    rgba(30,39,46,.88) 0%,
    rgba(30,39,46,.35) 55%,
    rgba(30,39,46,.05) 100%);
  transition: background .4s ease;
}
.service-item:hover .service-overlay { background: rgba(30,39,46,.78); }

.service-num {
  position: absolute;
  top: 1rem;
  left: 1.4rem;
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(190,157,93,.55);
}
.service-title {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c-white);
  margin-bottom: .5rem;
  letter-spacing: -.01em;
}
.service-desc {
  font-size: .9rem;
  color: rgba(255,255,255,.82);
  line-height: 1.55;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, margin .4s ease;
}
.service-item:hover .service-desc { max-height: 160px; margin-bottom: 1rem; }

.service-cta-btn {
  align-self: flex-start;
  display: inline-block;
  padding: .5rem 1.1rem;
  background: var(--c-accent);
  color: var(--c-primary-d);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.service-item:hover .service-cta-btn { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .services-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services-gallery { grid-template-columns: 1fr; }
}
/* Ohne Hover (Touch): Beschreibung + Button dauerhaft offen */
@media (hover: none) {
  .service-desc { max-height: 160px; margin-bottom: 1rem; }
  .service-cta-btn { opacity: 1; transform: none; }
}

/* === Ü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-accent);
  color: var(--c-primary-d);
  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;
}
.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-item .icon { width: 22px; height: 22px; color: var(--c-accent); flex-shrink: 0; }
.trust-body { display: flex; flex-direction: column; gap: .1rem; }
.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(45,52,54,.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(176,121,60,.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(21,25,28,.80) 0%,
    rgba(21,25,28,.34) 42%,
    rgba(21,25,28,0)   80%);
  transition: background .45s var(--wz-pin-ease);
}
.leistungen-pin .wz-pin__media:hover .wz-pin__overlay {
  background: linear-gradient(to top,
    rgba(21,25,28,.94) 0%,
    rgba(21,25,28,.70) 50%,
    rgba(21,25,28,.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(21,25,28,.94) 0%,
      rgba(21,25,28,.70) 50%,
      rgba(21,25,28,.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 (Endlos-Streifen) === */
/* Bewusst kein Kaesten-Raster: der Streifen laeuft langsam nach rechts
   (js/main.js -> initVorteile), die Karten sind flach und lehnen sich an
   die Ziffer statt an einen Schatten. */
.vorteile { text-align: center; }

.vorteile-marquee { margin-top: 3rem; }

.vorteile-track-outer {
  overflow: hidden;
  /* Laeuft an den Raendern aus statt hart abzuschneiden – damit sieht man,
     dass es weitergeht, ohne Pfeile oder Punkte zu brauchen. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.vorteile-track {
  display: flex;
  gap: 1.25rem;
  padding: .5rem 1.25rem;
  /* laeuft per rAF durch (js/main.js), deshalb KEIN transition –
     das wuerde jede Einzelbewegung nachziehen und ruckeln */
  will-change: transform;
}

.vorteil-card {
  position: relative;
  flex: 0 0 clamp(270px, 27vw, 350px);
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 2rem 1.75rem 1.75rem;
  text-align: left;
  transition: border-color var(--transition), background var(--transition);
}
.vorteil-card:hover { border-color: rgba(190,157,93,.45); }

/* Messing-Kante oben, laeuft erst beim Darauffahren ein */
.vorteil-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.vorteil-card:hover::before { transform: scaleX(1); }

/* Grosse Ziffer als ruhiger Rhythmus statt Rasterlinien */
.vorteil-num {
  position: absolute;
  top: .5rem;
  right: 1rem;
  font-family: var(--font-head);
  font-size: 4.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--c-accent);
  opacity: .12;
  pointer-events: none;
}

.vorteil-icon {
  width: 26px;
  height: 26px;
  margin-bottom: 1.1rem;
  color: var(--c-accent);
}
.vorteil-title {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: .55rem;
  letter-spacing: -.01em;
}
.vorteil-text {
  font-size: .9rem;
  color: var(--c-text-muted);
  line-height: 1.65;
}

/* Ohne Bewegung steigt initMarquee aus – dann muss der Streifen
   umbrechen, sonst bleiben die hinteren Karten unerreichbar. */
@media (prefers-reduced-motion: reduce) {
  .vorteile-track {
    flex-wrap: wrap;
    justify-content: center;
    transform: none !important;
  }
  .vorteile-track-outer {
    -webkit-mask-image: none;
            mask-image: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }
}

/* === 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;
  /* minmax(0,1fr): iframe (width="620") und lange Mailadresse duerfen die
     Spalte nicht aufziehen – sonst laeuft mobil alles rechts raus */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem;
  align-items: center;
}
.kontakt-info, .kontakt-map { min-width: 0; }
.kontakt-map iframe { display: block; max-width: 100%; }
.kontakt-link { overflow-wrap: anywhere; }

.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(176,121,60,.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-accent);
  color: var(--c-primary-d);
  border-radius: 3px 0 0 4px;
  transition: background var(--transition), transform var(--transition);
  box-shadow: -2px 2px 12px rgba(0,0,0,.2);
}
.floating-btn:hover {
  background: var(--c-accent-d);
  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(176,121,60,.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: #E3C39B; }

.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: #E3C39B;
}

/* 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(176,121,60,0); }
  50%      { box-shadow: var(--shadow-lg), 0 0 70px 12px rgba(176,121,60,.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-primary-d);
  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 {
  display: block;
  width: auto;
  height: 66px;
  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: #7A4A00;
  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; }
  .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; }

  .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: minmax(0, 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; }

  .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);
    align-items: stretch;
    gap: .6rem;
  }
  .trust-item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .45rem;
    padding: .9rem .8rem;
    height: 100%;
  }
  .trust-item .icon { width: 24px; height: 24px; }
  .trust-body { gap: .2rem; }
  .trust-body strong { font-size: .82rem; line-height: 1.25; }
  .trust-body span   { font-size: .72rem; line-height: 1.3; }
}

/* ===== 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(176,121,60,.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-accent);
  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: var(--c-accent-d); }

/* 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(176,121,60,.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(176,121,60,.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(176,121,60,.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: rgba(255,255,255,.92);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 0 1rem;
  text-align: center;
  transition: background var(--transition);
}
.topbar:hover { background: var(--c-primary); }
.topbar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}
.topbar-arrow { font-weight: 700; color: var(--c-accent); }

/* 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 { 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-accent-d);
  color: var(--c-white);
  transition: background var(--transition);
}
.header-call:hover { background: var(--c-accent); }
.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; } }

/* Auf schmalen Displays wird das Lockup kleiner, damit neben dem Burger
   noch Luft bleibt (38px Hoehe = ~247px Breite, das waere zu viel). */
@media (max-width: 600px) { .logo-img { height: 64px; } }
@media (max-width: 340px) { .logo-img { height: 56px; } }

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

/* ============================================================
   CITTENZA BAU — 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;
}

/* Space Grotesk endet bei 700 – weiter oben stehen noch 800er, die hier
   bewusst ueberschrieben werden. Ohne das synthetisiert der Browser fett
   und die Ueberschriften werden matschig. Nicht "aufraeumen". */
h1, h2, h3, h4,
.hero-title,
.section-title {
  font-weight: 700;
  letter-spacing: -.015em;
}

.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.
   ============================================================ */