/* ============================================================
   PROCA INNOVATIVBAU GmbH — Meisterbetrieb
   Fliesen · Naturstein · Objektbau
   Headings: Geist (self-hosted) · Body: Helvetica (system)
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face { font-family:'Geist'; src:url('../fonts/geist-500-latin.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Geist'; src:url('../fonts/geist-600-latin.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Geist'; src:url('../fonts/geist-700-latin.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- TOKENS ---------- */
:root {
  --ink: #14181a;            /* near-black */
  --ink-2: #20272b;
  --green: #2a4a38;          /* logo pine green */
  --green-deep: #1c3327;
  --green-dark: #12211a;     /* hero overlay tint */
  --gold: #b6924a;           /* logo gold */
  --gold-2: #cfae66;
  /* Für kleine Schrift auf hellem Papier: --gold liegt bei 2,58:1 und fällt
     unter WCAG AA. Diese Abstufung erreicht 4,79:1 auf #f3f1ea. */
  --gold-ink: #82662a;
  --cream: #f3f1ea;          /* light bg */
  --paper: #fbfaf6;
  --white: #ffffff;
  --line-light: rgba(255,255,255,.16);
  --line-dark: rgba(20,24,26,.12);
  --txt-on-dark: rgba(255,255,255,.78);

  --font-head: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --container: 1440px;
  --gutter: clamp(20px, 4vw, 64px);

  --menu-w: clamp(400px, 34vw, 560px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* expo-out feel */
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);     /* power4.inOut feel */
  --dur: .9s;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ink);
  overflow: hidden; /* scroll happens inside .page */
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.035em;   /* litere apropiate */
  line-height: 1.02;
  color: inherit;
}

/* ============================================================
   PAGE — the sliding scroll container (fixed-underlay pattern)
   ============================================================ */
.page {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow-y: auto;
  overflow-x: clip;
  background: var(--paper);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-inout), border-radius var(--dur) var(--ease-inout);
  will-change: transform;
  scroll-behavior: smooth;
}
body.menu-open .page {
  transform: translateX(calc(var(--menu-w) * -1 + 8px)) scale(.965);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.55);
}
/* dim + click-catcher above page content while menu is open */
.page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,14,12,0);
  pointer-events: none;
  transition: background var(--dur) var(--ease-inout);
  z-index: 90;
}
body.menu-open .page::after {
  background: rgba(10,14,12,.28);
  pointer-events: auto;
  cursor: w-resize;
}

/* ============================================================
   HEADER (sticky inside .page)
   ============================================================ */
.site-header {
  /* sticky, nicht fixed: .page hat will-change:transform — fixed würde
     dadurch am Container kleben und beim Scrollen verschwinden */
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 80;
  margin-bottom: -112px; /* Header überlagert den Hero wie zuvor */
  transition: background .45s ease, box-shadow .45s ease, backdrop-filter .45s ease;
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 112px;
}
.site-header.is-solid {
  background: rgba(18, 24, 20, .88);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}

/* brand */
/* Logo im Header ist bewusst größer als das Logo im Footer (84px) */
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand img { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 4px 18px rgba(0,0,0,.38); flex-shrink: 0; }
.brand .wordmark { display: flex; flex-direction: column; line-height: 1.1; color: #fff; }
.brand .wordmark b {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand .wordmark span {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-2);
}

/* header right */
.header-right { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.header-tel {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; font-size: 15px; font-weight: 500;
  opacity: .92; transition: opacity .25s;
}
.header-tel:hover { opacity: 1; }
.header-tel svg { width: 15px; height: 15px; fill: var(--gold-2); }

.btn-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--gold-2);
  padding: 13px 22px;
  border-radius: 999px;
  transition: transform .3s var(--ease-out), background .3s;
}
.btn-cta:hover { background: #ddbf7e; transform: translateY(-2px); }
.btn-cta svg { width: 13px; height: 13px; fill: currentColor; transition: transform .3s var(--ease-out); }
.btn-cta:hover svg { transform: translateX(3px); }

/* menu button */
.menu-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px;
  color: #fff;
  padding: 10px 6px 10px 14px;
}
.menu-btn .lines { position: relative; width: 26px; height: 12px; }
.menu-btn .lines span {
  position: absolute; left: 0; width: 100%; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .45s var(--ease-inout), top .45s var(--ease-inout), width .3s var(--ease-out);
}
.menu-btn .lines span:nth-child(1) { top: 1px; }
.menu-btn .lines span:nth-child(2) { top: 9px; }
.menu-btn:hover .lines span:nth-child(1) { width: 70%; }
.menu-btn:hover .lines span:nth-child(2) { width: 100%; }

/* ============================================================
   MENU UNDERLAY (fixed beneath the page, right side)
   ============================================================ */
.menu-underlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  background: var(--cream);
  visibility: hidden;
  transition: visibility 0s linear var(--dur);
}
body.menu-open .menu-underlay { visibility: visible; transition-delay: 0s; }

.menu-panel {
  width: var(--menu-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4vh, 44px) clamp(28px, 3vw, 56px);
  overflow-y: auto;
}

.menu-head {
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 44px;
}
.menu-close {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px;
  color: var(--ink);
  opacity: .8; transition: opacity .25s;
}
.menu-close:hover { opacity: 1; }
.menu-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; fill: none; transition: transform .5s var(--ease-inout); }
.menu-close:hover svg { transform: rotate(90deg); }

.menu-eyebrow {
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(20,24,26,.45);
  margin: clamp(12px, 4vh, 40px) 0 14px;
}

/* big links */
.menu-nav { flex: 1; }
.menu-nav ul { display: flex; flex-direction: column; }
.menu-nav li { overflow: hidden; }
.menu-link {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(34px, 3.6vw, 52px);
  letter-spacing: -0.04em;
  line-height: 1.22;
  color: var(--ink);
  padding: 2px 14px;
  margin-left: -14px;
  border-radius: 14px;
  transition: color .3s, background .3s, padding-left .45s var(--ease-out);
  /* stagger reveal */
  transform: translateY(110%);
  opacity: 0;
}
body.menu-open .menu-link {
  transform: translateY(0);
  opacity: 1;
  transition:
    transform .8s var(--ease-out) var(--d, 0s),
    opacity .6s ease var(--d, 0s),
    color .3s, background .3s, padding-left .45s var(--ease-out);
}
.menu-link:hover { color: var(--green); padding-left: 26px; }
/* hovering one link dims the siblings */
body.menu-open .menu-nav ul:hover .menu-link {
  opacity: .3;
  transition: opacity .35s ease, transform .8s var(--ease-out) var(--d, 0s), color .3s, background .3s, padding-left .45s var(--ease-out);
}
body.menu-open .menu-nav ul:hover .menu-link:hover { opacity: 1; }
.menu-link[aria-current="page"] {
  background: var(--green);
  color: var(--cream);
  padding-left: 22px;
}
.menu-link[aria-current="page"]:hover { color: #fff; }

.menu-link .tag {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(182,146,74,.5);
  border-radius: 999px;
  padding: 4px 10px;
  transform: translateY(-6px);
  white-space: nowrap;
}
.menu-link[aria-current="page"] .tag { color: var(--gold-2); border-color: rgba(207,174,102,.6); }

/* menu footer */
.menu-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}
.menu-foot h4 {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(20,24,26,.42);
  margin-bottom: 10px;
}
.menu-foot ul { display: grid; gap: 6px; }
.menu-foot a { font-size: 14.5px; color: var(--ink-2); transition: color .2s; }
.menu-foot a:hover { color: var(--green); }
.menu-foot .strong { font-weight: 700; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: #fff;
  overflow: clip;
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--ink); }
/* zwei Clips liegen übereinander und blenden ineinander über */
.hero-media .hv,
.hero-media img.fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s ease;
}
.hero-media .hv.is-on,
.hero-media img.fallback {
  opacity: 1;
  animation: heroZoom 24s var(--ease-out) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(78deg, rgba(10,18,13,.88) 0%, rgba(10,18,13,.55) 42%, rgba(10,18,13,.18) 72%, rgba(10,18,13,.35) 100%),
    linear-gradient(0deg, rgba(8,14,10,.82) 0%, rgba(8,14,10,.25) 26%, rgba(8,14,10,0) 48%);
}

.hero-inner {
  position: relative; z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 140px;
}
.hero-content { max-width: 1050px; }

.hero-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-2);
  border: 1px solid rgba(207,174,102,.38);
  background: rgba(10,18,13,.35);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 9px 18px;
  margin-bottom: 28px;
}
.hero-chip::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-2);
}

.hero h1 {
  font-size: clamp(46px, 7.2vw, 108px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: .98;
  margin-bottom: 30px;
  color: #fff;
}
.hero h1 .accent { color: var(--gold-2); }

/* line mask reveal */
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: inline-block; transform: translateY(115%); }
.is-loaded .hero h1 .line > span { animation: lineUp 1.1s var(--ease-out) forwards; }
.is-loaded .hero h1 .line:nth-child(2) > span { animation-delay: .1s; }
@keyframes lineUp { to { transform: translateY(0); } }

.hero-sub {
  max-width: 620px;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--txt-on-dark);
  margin-bottom: 40px;
  opacity: 0; transform: translateY(24px);
}
.is-loaded .hero-sub { animation: fadeUp 1s var(--ease-out) .45s forwards; }

.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; opacity: 0; transform: translateY(24px); }
.is-loaded .hero-actions { animation: fadeUp 1s var(--ease-out) .6s forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.btn-hero {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-head); font-weight: 600; font-size: 15.5px;
  padding: 17px 30px;
  border-radius: 999px;
  transition: transform .35s var(--ease-out), background .3s, border-color .3s, color .3s;
}
.btn-hero.primary { background: var(--gold-2); color: var(--ink); }
.btn-hero.primary:hover { background: #ddbf7e; transform: translateY(-3px); }
.btn-hero.primary svg { width: 14px; height: 14px; fill: currentColor; transition: transform .3s var(--ease-out); }
.btn-hero.primary:hover svg { transform: translateX(4px); }
.btn-hero.ghost { color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn-hero.ghost:hover { border-color: var(--gold-2); color: var(--gold-2); transform: translateY(-3px); }

/* trust band at hero bottom */
.hero-band {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line-light);
  background: rgba(8,14,10,.35);
  backdrop-filter: blur(8px);
  opacity: 0;
}
.is-loaded .hero-band { animation: fadeIn 1.2s ease .95s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.hero-band .cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero-band .cell {
  padding: 22px 28px;
  border-right: 1px solid var(--line-light);
}
.hero-band .cell:first-child { padding-left: 0; }
.hero-band .cell:last-child { border-right: 0; }
.hero-band b {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 22px);
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 2px;
}
.hero-band span { font-size: 13px; color: rgba(255,255,255,.6); }

/* scroll cue */
.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 118px;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,.55);
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  writing-mode: vertical-rl;
  opacity: 0;
}
.is-loaded .scroll-cue { animation: fadeIn 1s ease 1.3s forwards; }
.scroll-cue::after {
  content: '';
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, var(--gold-2), transparent);
  animation: cuePulse 2.2s var(--ease-inout) infinite;
}
@keyframes cuePulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ============================================================
   GENERIC SCROLL REVEAL
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(42px); transition: opacity .9s ease, transform 1s var(--ease-out); transition-delay: var(--rd, 0s); }
[data-reveal].in-view { opacity: 1; transform: none; }

/* ============================================================
   SECTION: LEISTUNGEN — hover list + sticky media
   ============================================================ */
.leistungen {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(90px, 12vw, 160px) 0 clamp(80px, 10vw, 140px);
  position: relative;
}
/* faint oversized index watermark */
.leistungen::before {
  content: 'LEISTUNGEN';
  position: absolute;
  top: 26px; right: -8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(70px, 11vw, 170px);
  letter-spacing: -0.05em;
  color: rgba(20,24,26,.035);
  pointer-events: none;
  white-space: nowrap;
}

.sec-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green);
  border: 1px solid rgba(42,74,56,.3);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 24px;
}
.sec-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

.sec-head {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 84px);
}
.sec-head h2 {
  font-size: clamp(38px, 5.4vw, 76px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.0;
}
.sec-head h2 .accent { color: var(--gold); }
.sec-intro {
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(20,24,26,.62);
  max-width: 44ch;
  padding-bottom: 8px;
}

/* layout: list + sticky media */
.svc-wrap {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(36px, 5vw, 84px);
  align-items: start;
}

/* rows */
.svc-list { border-top: 1px solid var(--line-dark); }
.svc-row { border-bottom: 1px solid var(--line-dark); }
.svc-row > a {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr 64px;
  align-items: center;
  gap: 22px;
  padding: clamp(26px, 3vw, 40px) 18px;
  border-radius: 18px;
  isolation: isolate;
}
/* sliding green fill */
.svc-row > a::before {
  content: '';
  position: absolute; inset: 6px -18px;
  background: var(--green-deep);
  border-radius: 18px;
  transform: scaleY(.6);
  opacity: 0;
  transition: opacity .45s ease, transform .55s var(--ease-out);
  z-index: -1;
}
.svc-row.is-active > a::before { opacity: 1; transform: scaleY(1); }

.svc-row .num {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em;
  color: rgba(20,24,26,.38);
  transition: color .4s;
}
.svc-row .txt h3 {
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  transition: color .4s, transform .55s var(--ease-out);
}
.svc-row .txt p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(20,24,26,.55);
  max-width: 52ch;
  margin-top: 8px;
  transition: color .4s;
}
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s var(--ease-out), opacity .45s ease .05s; }
.svc-tags span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-2);
  border: 1px solid rgba(207,174,102,.4);
  border-radius: 999px;
  padding: 5px 11px;
}
.svc-row .go {
  width: 54px; height: 54px;
  border: 1px solid rgba(20,24,26,.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .4s, border-color .4s, transform .55s var(--ease-out);
  transform: rotate(-45deg);
}
.svc-row .go svg { width: 18px; height: 18px; fill: rgba(20,24,26,.6); transition: fill .4s; }

.svc-row.is-active .num { color: var(--gold-2); }
.svc-row.is-active .txt h3 { color: var(--cream); transform: translateX(6px); }
.svc-row.is-active .txt p { color: rgba(243,241,234,.66); }
.svc-row.is-active .svc-tags { max-height: 40px; opacity: 1; }
.svc-row.is-active .go { background: var(--gold-2); border-color: var(--gold-2); transform: rotate(0deg); }
.svc-row.is-active .go svg { fill: var(--ink); }

/* Hinweis „Arbeiten ansehen“ — erscheint mit der aktiven Zeile */
.svc-open {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
  color: rgba(243,241,234,.72);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .55s var(--ease-out), opacity .45s ease .05s;
}
.svc-row.is-active .svc-open { max-height: 30px; opacity: 1; }
.svc-open b {
  font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-2);
  border: 1px solid rgba(207,174,102,.4);
  border-radius: 999px;
  padding: 4px 10px;
}
.svc-row.is-open .svc-open .open-txt { color: var(--gold-2); }

/* per-row mobile image (hidden on desktop) */
.svc-row .row-img { display: none; }

/* ---- ausklappbare Foto-Galerie je Gewerk ---- */
.svc-gal {
  margin: 0 -18px;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height .7s var(--ease-out), opacity .45s ease, visibility 0s linear .7s;
}
.svc-row.is-open .svc-gal {
  margin-top: -6px;
  max-height: 1600px;
  opacity: 1;
  visibility: visible;
  transition: max-height .8s var(--ease-out), opacity .5s ease .08s, visibility 0s;
}
/* das Panel schließt bündig an die grüne Zeilenfläche an */
.svc-row.is-open > a::before { border-radius: 18px 18px 0 0; }
.svc-gal-in {
  background: var(--green-deep);
  border-radius: 0 0 18px 18px;
  padding: 4px 26px 28px;
  margin-bottom: 18px;
}
.svc-gal-lead {
  font-size: 13.5px; line-height: 1.6;
  color: rgba(243,241,234,.55);
  margin-bottom: 16px;
  max-width: 52ch;
}
.svc-gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gal-item {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--ink-2);
  transition: transform .45s var(--ease-out), box-shadow .45s ease;
}
.gal-item img {
  display: block;
  width: 100%;
  height: auto;            /* sonst gewinnt das height-Attribut über aspect-ratio */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.gal-item figcaption {
  position: absolute; left: 10px; right: 10px; bottom: 9px;
  font-family: var(--font-head); font-weight: 600; font-size: 11.5px; line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 6px rgba(8,14,10,.9);
  z-index: 2;
}
.gal-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,14,10,.78) 0%, rgba(8,14,10,.15) 44%, transparent 62%);
  transition: opacity .4s ease;
  z-index: 1;
}
.gal-item:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(8,14,10,.75); }
.gal-item:hover img { transform: scale(1.07); }
.gal-item:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.svc-gal-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  font-family: var(--font-head); font-weight: 600; font-size: 14px;
  color: var(--gold-2);
  border-bottom: 1px solid rgba(207,174,102,.35);
  padding-bottom: 4px;
  transition: gap .3s var(--ease-out), border-color .3s;
}
.svc-gal-cta:hover { gap: 16px; border-color: var(--gold-2); }
.svc-gal-cta svg { width: 13px; height: 13px; fill: currentColor; }

/* geöffnete Zeile: Pfeil zeigt nach unten */
.svc-row.is-open .go { transform: rotate(90deg); }

/* sticky media panel */
.svc-media {
  position: sticky;
  top: 140px;
}
.svc-media .frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 34px 90px -34px rgba(18,33,26,.5);
}
.svc-media .frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .7s ease, transform 1.1s var(--ease-out);
}
.svc-media .frame img.is-show { opacity: 1; transform: scale(1); }
.svc-media .frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,18,13,.42), transparent 45%);
  pointer-events: none;
}
.svc-media .cap {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-weight: 600; font-size: 13.5px;
  color: #fff;
  background: rgba(10,18,13,.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 9px 16px;
}
.svc-media .cap::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); }

/* weitere Leistungen ohne eigene Bildstrecke */
.svc-more {
  margin-top: clamp(34px, 4vw, 54px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line-dark);
}
.svc-more h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}
.svc-more ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}
.svc-more li {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  color: rgba(20,24,26,.68);
  background: rgba(42,74,56,.06);
  border: 1px solid rgba(42,74,56,.16);
  border-radius: 999px;
  padding: 9px 17px;
}

/* bottom note / CTA line */
.svc-foot {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.svc-foot p { font-size: 15.5px; color: rgba(20,24,26,.6); }
.svc-foot .link-more {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px;
  color: var(--green);
  border-bottom: 2px solid rgba(42,74,56,.25);
  padding-bottom: 4px;
  transition: border-color .3s, gap .3s var(--ease-out);
}
.svc-foot .link-more:hover { border-color: var(--gold); gap: 16px; }
.svc-foot .link-more svg { width: 14px; height: 14px; fill: currentColor; }

/* ============================================================
   SECTION: PROJEKTE / REFERENZEN — Raster mit Aufklapp-Pfeil
   ============================================================ */
.refs {
  position: relative;
  padding: clamp(72px, 9vw, 128px) 0;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(42,74,56,.55) 0%, transparent 55%),
    var(--green-dark);
  color: var(--cream);
}
.refs-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 4vw, 46px);
}
.refs-head .sec-chip {
  color: var(--gold-2);
  border-color: rgba(207,174,102,.35);
}
.refs-head h2 {
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.0;
  color: #fff;
}
.refs-head h2 .accent { color: var(--gold-2); }
.refs-note {
  font-size: 14.5px; line-height: 1.65;
  color: rgba(243,241,234,.55);
  max-width: 34ch;
  padding-bottom: 8px;
}

/* Raster */
.refs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.refs-grid .ref-card.is-extra { display: none; }
.refs-grid.show-all .ref-card.is-extra { display: block; animation: refIn .55s var(--ease-out) both; }
.refs-grid.show-all .ref-card.cta.is-extra { display: flex; }
@keyframes refIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.ref-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-2);
}

/* Aufklapp-Schalter */
.refs-more { display: flex; justify-content: center; margin-top: clamp(26px, 3.4vw, 42px); }
.refs-toggle {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  color: var(--cream);
  background: transparent;
  border: 1px solid rgba(243,241,234,.22);
  border-radius: 999px;
  padding: 12px 14px 12px 26px;
  cursor: pointer;
  transition: border-color .35s ease, background .35s ease, color .35s ease;
}
.refs-toggle:hover { border-color: var(--gold-2); color: #fff; background: rgba(207,174,102,.1); }
.refs-toggle:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.refs-toggle .chev {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold-2);
  transition: transform .5s var(--ease-out);
}
.refs-toggle .chev svg { width: 18px; height: 18px; fill: var(--ink); }
.refs-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.ref-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out);
}
.ref-card:hover img { transform: scale(1.06); }
.ref-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,14,10,.85) 0%, rgba(8,14,10,.25) 42%, rgba(8,14,10,.06) 65%);
  z-index: 1;
}
/* gold sweep border on hover */
.ref-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 22px;
  border: 1px solid rgba(207,174,102,0);
  transition: border-color .5s ease;
  z-index: 3;
  pointer-events: none;
}
.ref-card:hover::before { border-color: rgba(207,174,102,.55); }

.ref-bv {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .08em;
  color: var(--gold-2);
  background: rgba(8,14,10,.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(207,174,102,.3);
  border-radius: 999px;
  padding: 7px 13px;
}
.ref-info {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2;
}
.ref-info h3 {
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 10px;
}
.ref-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.ref-meta span {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(243,241,234,.85);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 6px 12px;
}
.ref-meta span.gold { color: var(--ink); background: var(--gold-2); }

/* CTA end card */
.ref-card.cta {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
  text-align: center;
}
.ref-card.cta::after { display: none; }
.ref-card.cta .inner { padding: 30px; }
.ref-card.cta h3 {
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 18px;
}
.ref-card.cta h3 .accent { color: var(--gold-2); }
.ref-card.cta .btn-hero { margin-inline: auto; }

/* ============================================================
   SECTION: UNTERNEHMEN — story + quote + count-up stats
   ============================================================ */
.unternehmen {
  background: var(--paper);
  padding: clamp(90px, 12vw, 160px) 0 clamp(70px, 9vw, 120px);
  position: relative;
  overflow: clip;
}
.unt-grid {
  display: grid;
  grid-template-columns: clamp(230px, 25vw, 310px) 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin-bottom: clamp(56px, 8vw, 100px);
}

/* portrait (bewusst zurückhaltend) + Zitat darunter */
.unt-media { position: relative; max-width: 100%; }
.unt-media .photo {
  position: relative;
  max-width: 240px;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 36px 90px -34px rgba(18,33,26,.45);
}
.unt-media .photo img { width: 100%; height: 100%; object-fit: cover; }
.unt-media .photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,18,13,.72) 0%, rgba(10,18,13,.28) 26%, transparent 48%);
}
.unt-media .who {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  color: #fff;
  text-shadow: 0 1px 8px rgba(8,14,10,.8);
}
.unt-media .who b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; }
.unt-media .who span { font-size: 10.5px; color: var(--gold-2); letter-spacing: .08em; text-transform: uppercase; }

.quote-card {
  /* unter dem Foto, linksbündig */
  position: relative;
  margin: 18px 0 0;
  width: 100%;
  background: var(--green-deep);
  color: var(--cream);
  border-radius: 18px;
  padding: 20px 22px 18px;
  box-shadow: 0 24px 60px -22px rgba(18,33,26,.5);
}
.quote-card .qm {
  font-family: var(--font-head);
  font-size: 54px; font-weight: 700; line-height: .6;
  color: var(--gold-2);
  display: block;
  margin-bottom: 14px;
}
.quote-card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(243,241,234,.9);
}
.quote-card span {
  display: block;
  margin-top: 12px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-2);
}

/* story */
.unt-body .sec-chip { margin-bottom: 20px; }
.unt-body h2 {
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin-bottom: 26px;
}
.unt-body h2 .accent { color: var(--gold); }
.unt-body p {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(20,24,26,.66);
  max-width: 60ch;
  margin-bottom: 16px;
}
.unt-partner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-dark);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(20,24,26,.45);
}
.unt-partner b {
  font-family: var(--font-head);
  color: var(--green);
  letter-spacing: .02em;
  font-size: 14px;
  text-transform: none;
}
.unt-partner .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

/* count-up stats */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-dark);
}
.stat-cell {
  padding: clamp(26px, 3.4vw, 44px) 26px 0 0;
  border-right: 1px solid var(--line-dark);
  padding-left: 26px;
}
.stat-cell:first-child { padding-left: 0; }
.stat-cell:last-child { border-right: 0; }
.stat-cell .n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(44px, 5.4vw, 84px);
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ink);
  display: flex; align-items: baseline;
}
.stat-cell .n .suf { color: var(--gold); font-size: .55em; margin-left: 3px; font-weight: 600; }
.stat-cell .n .pre { color: var(--gold); font-size: .34em; margin-right: 7px; font-weight: 600; }
.stat-cell .l {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  color: rgba(20,24,26,.55);
}

/* ============================================================
   SECTION: MASSIVHÄUSER — full-bleed banner + panel (Privat)
   ============================================================ */
.massiv {
  position: relative;
  min-height: 66svh;
  display: flex;
  align-items: center;
  overflow: clip;
  color: var(--cream);
}
.massiv .bg {
  position: absolute; inset: -7% 0;
  z-index: 0;
}
.massiv .bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.massiv::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(94deg, rgba(8,14,10,.88) 0%, rgba(8,14,10,.62) 42%, rgba(8,14,10,.12) 75%, rgba(8,14,10,.3) 100%),
    linear-gradient(0deg, rgba(8,14,10,.55) 0%, transparent 30%);
  z-index: 1;
}
.massiv .container { position: relative; z-index: 2; }
.massiv-panel { max-width: 620px; padding: clamp(50px, 7vh, 84px) 0; }
.massiv-panel .sec-chip {
  color: var(--gold-2);
  border-color: rgba(207,174,102,.4);
  background: rgba(8,14,10,.35);
  backdrop-filter: blur(6px);
}
.massiv-panel h2 {
  font-size: clamp(36px, 4.8vw, 68px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.0;
  color: #fff;
  margin: 22px 0 22px;
}
.massiv-panel h2 .accent { color: var(--gold-2); }
.massiv-panel > p {
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(243,241,234,.82);
  margin-bottom: 28px;
  max-width: 56ch;
}
.massiv-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 26px;
  margin-bottom: 34px;
}
.massiv-checks li {
  display: flex; align-items: center; gap: 11px;
  font-size: 14.5px; font-weight: 500;
  color: rgba(243,241,234,.92);
}
.massiv-checks .tick {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(207,174,102,.16);
  border: 1px solid rgba(207,174,102,.45);
  display: flex; align-items: center; justify-content: center;
}
.massiv-checks .tick svg { width: 12px; height: 12px; stroke: var(--gold-2); stroke-width: 2.6; fill: none; }
.massiv-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.massiv-note {
  margin-top: 18px;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(243,241,234,.5);
}

/* ============================================================
   SECTION: KONTAKT + FOOTER
   ============================================================ */
.kontakt {
  background:
    radial-gradient(110% 80% at 12% 0%, rgba(42,74,56,.5) 0%, transparent 55%),
    var(--ink);
  color: var(--cream);
  padding: clamp(90px, 12vw, 150px) 0 0;
}
.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
  padding-bottom: clamp(70px, 9vw, 110px);
}
.kontakt-info .sec-chip { color: var(--gold-2); border-color: rgba(207,174,102,.35); }
.kontakt-info h2 {
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: #fff;
  margin: 20px 0 18px;
}
.kontakt-info h2 .accent { color: var(--gold-2); }
.kontakt-info > p { color: rgba(243,241,234,.66); max-width: 46ch; margin-bottom: 34px; }

.person-cards { display: grid; gap: 14px; margin-bottom: 30px; }
.person {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(243,241,234,.1);
  border-radius: 16px;
  padding: 16px 18px;
  transition: border-color .3s, background .3s, transform .35s var(--ease-out);
}
.person:hover { border-color: rgba(207,174,102,.45); background: rgba(255,255,255,.07); transform: translateX(4px); }
.person .avatar {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--green);
  color: var(--gold-2);
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.person .p-info { flex: 1; min-width: 0; }
.person .p-info b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; color: #fff; letter-spacing: -0.01em; }
.person .p-info span { font-size: 12px; color: rgba(243,241,234,.5); letter-spacing: .06em; text-transform: uppercase; }
.person .p-tel { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--gold-2); white-space: nowrap; }

.kontakt-lines { display: grid; gap: 10px; }
.kontakt-lines a {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 15px; color: rgba(243,241,234,.85);
  transition: color .25s;
  width: fit-content;
}
.kontakt-lines a:hover { color: var(--gold-2); }
.kontakt-lines svg { width: 16px; height: 16px; fill: var(--gold-2); flex-shrink: 0; }

/* form card */
.form-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: 24px;
  padding: clamp(26px, 3vw, 42px);
  box-shadow: 0 40px 100px -36px rgba(0,0,0,.6);
}
.form-card h3 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.form-card .fc-sub { font-size: 13.5px; color: rgba(20,24,26,.55); margin-bottom: 26px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-family: var(--font-head); font-weight: 600; font-size: 12.5px; letter-spacing: .02em;
  color: rgba(20,24,26,.75);
  margin-bottom: 7px;
}
.field label .req { color: var(--gold); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: #fff;
  border: 1px solid rgba(20,24,26,.16);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color .25s, box-shadow .25s;
  appearance: none;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(20,24,26,.35); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(42,74,56,.15);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232a4a38' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}
.consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; color: rgba(20,24,26,.6);
  margin: 4px 0 20px;
}
.consent input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--green); }
.consent a { color: var(--green); text-decoration: underline; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form-ok {
  background: rgba(42,74,56,.1);
  border: 1px solid rgba(42,74,56,.3);
  color: var(--green);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px; font-weight: 600;
  margin-bottom: 16px;
}
/* Fehlermeldung des Kontaktformulars — gleiche Form wie .form-ok,
   Rot auf 4,6:1 gegen das Papier (WCAG AA). */
.form-err {
  background: rgba(140,38,28,.09);
  border: 1px solid rgba(140,38,28,.32);
  color: #8c261c;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px; font-weight: 600;
  line-height: 1.5;
  margin-bottom: 16px;
}
.form-err a { color: inherit; text-decoration: underline; }

.form-card .btn-cta { width: 100%; justify-content: center; padding: 16px 22px; font-size: 15px; }

/* footer */
.site-footer {
  border-top: 1px solid rgba(243,241,234,.1);
  padding: clamp(44px, 6vw, 64px) 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
  padding-bottom: 44px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.footer-wordmark { display: flex; flex-direction: column; gap: 5px; line-height: 1.1; }
.footer-wordmark b {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.footer-wordmark > span {
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-2);
}
.footer-brand p { font-size: 13.5px; line-height: 1.7; color: rgba(243,241,234,.5); max-width: 30ch; }
.footer-col h4 {
  font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 16px;
}
.footer-col ul { display: grid; gap: 9px; }
.footer-col a, .footer-col li { font-size: 14px; color: rgba(243,241,234,.66); transition: color .25s; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(243,241,234,.08);
  padding: 20px 0 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.footer-bottom p { font-size: 12.5px; color: rgba(243,241,234,.4); }
.footer-bottom .legal { display: flex; gap: 20px; }
.footer-bottom .legal a { font-size: 12.5px; color: rgba(243,241,234,.55); }
.footer-bottom .legal a:hover { color: var(--gold-2); }

@media (max-width: 1080px) {
  .refs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .refs-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .refs-note { max-width: 46ch; padding-bottom: 0; }
  .refs-toggle { width: 100%; justify-content: space-between; }

  /* unternehmen mobile */
  .unt-grid { grid-template-columns: 1fr; gap: 34px; }
  .unt-media { max-width: 100%; margin-bottom: 0; }
  .quote-card { right: auto; bottom: auto; width: min(340px, 100%); }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat-cell { border-right: 0; padding-left: 0; border-bottom: 1px solid var(--line-dark); padding-bottom: 22px; }
  .stat-cell:nth-child(odd) { border-right: 1px solid var(--line-dark); padding-right: 18px; }
  .stat-cell:nth-child(even) { padding-left: 18px; }

  /* massivhaus + kontakt mobile */
  .massiv { min-height: auto; }
  .massiv-checks { grid-template-columns: 1fr; }
  .kontakt-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero h1 .line > span, .hero-sub, .hero-actions, .hero-band, .scroll-cue, .menu-link, [data-reveal] { transform: none !important; opacity: 1 !important; }
  .page { scroll-behavior: auto; }
}

@media (max-width: 1080px) {
  .sec-head { grid-template-columns: 1fr; gap: 18px; }
  .svc-wrap { grid-template-columns: 1fr; }
  .svc-media { display: none; }
  .svc-row > a { grid-template-columns: 54px 1fr 48px; gap: 14px; }
  .svc-row .go { width: 44px; height: 44px; }
  /* show image inside expanded row on smaller screens */
  .svc-row .row-img {
    display: block;
    grid-column: 1 / -1;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    border-radius: 14px;
    transition: max-height .7s var(--ease-out), opacity .5s ease .08s;
  }
  .svc-row .row-img img { display: block; width: 100%; max-width: 360px; height: auto; margin-inline: auto; border-radius: 14px; }
  .svc-row.is-active .row-img { max-height: 640px; opacity: 1; }
  /* bei geöffneter Galerie ersetzt diese das Einzelbild */
  .svc-row.is-open .row-img { max-height: 0; opacity: 0; }
  .svc-gal-in { padding: 4px 18px 24px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .header-tel { display: none; }
  .hero-band .cells { grid-template-columns: repeat(2, 1fr); }
  .hero-band .cell:nth-child(2) { border-right: 0; }
  .hero-band .cell { padding: 16px 22px; }
  .hero-band .cell:nth-child(odd) { padding-left: 0; }
}
@media (max-width: 760px) {
  :root { --menu-w: min(88vw, 420px); }
  body.menu-open .page {
    transform: translateX(calc(var(--menu-w) * -1 + 6px)) scale(.94);
    border-radius: 20px;
  }
  .site-header { margin-bottom: -84px; }
  .site-header .bar { height: 84px; gap: 12px; }
  .brand { gap: 11px; }
  .brand img { width: 66px; height: 66px; }
  .brand .wordmark b { font-size: 13px; letter-spacing: -0.01em; }
  .brand .wordmark span { font-size: 8.5px; letter-spacing: .14em; }
  .btn-cta { display: none; }
  .menu-btn { font-size: 13.5px; padding: 10px 2px 10px 8px; gap: 9px; }
  .menu-btn .lines { width: 22px; }
  .hero-chip { max-width: 100%; font-size: 10.5px; letter-spacing: .13em; padding: 8px 14px; margin-bottom: 22px; }
  .hero-inner { padding-top: 104px; align-items: flex-end; }
  .hero-content { padding-bottom: 34px; }
  .hero h1 { font-size: clamp(40px, 11.5vw, 64px); margin-bottom: 22px; }
  .hero-sub { font-size: 15.5px; margin-bottom: 28px; }
  .btn-hero { padding: 15px 24px; font-size: 14.5px; }
  .hero-band .cells { grid-template-columns: 1fr 1fr; }
  .scroll-cue { display: none; }
  .menu-link { font-size: clamp(30px, 8.4vw, 38px); }
  .menu-foot { grid-template-columns: 1fr; gap: 18px; }
  .refs-grid { grid-template-columns: 1fr; }
  .svc-gal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gal-item figcaption { font-size: 10.5px; }
}

/* ==========================================================================
   PROJEKT-SEITEN (projekt-*.html) — eigenständige Scroll-Seiten
   Der One-Pager scrollt in .page (body overflow:hidden) — Projektseiten
   scrollen normal: body.pj hebt die Sperre auf.
   ========================================================================== */
body.pj { overflow-y: auto; overflow-x: clip; height: auto; min-height: 100%; background: var(--cream); }

.pj-header { position: sticky; top: 0; z-index: 60; background: rgba(243,241,234,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-dark); }
.pj-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.pj-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
/* Das Logo hat einen weißen, undurchsichtigen Hintergrund. Auf dem dunklen Kopf der
   Startseite fällt das nicht auf, weil .brand img rund beschnitten wird. Auf dem hellen
   Kopf der Unterseiten stand das Logo bis dahin in einem sichtbaren weißen Kasten. */
.pj-brand img { width: 50px; height: 50px; border-radius: 50%; }
.pj-brand b { font-family: var(--font-head); font-size: 13.5px; letter-spacing: .06em; }
.pj-back { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--green); text-decoration: none; border: 1px solid rgba(42,74,56,.3); border-radius: 999px; padding: 9px 17px; transition: background .25s, color .25s; }
.pj-back:hover { background: var(--green); color: #fff; }
.pj-back svg { width: 14px; height: 14px; fill: currentColor; transform: rotate(180deg); }

/* ---- Hero: cinematic, Parallax-Bild, Facts-Band ---- */
.pj-hero { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: clip; background: var(--green-dark); }
.pj-hero-media { position: absolute; inset: -12% 0; will-change: transform; }
.pj-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Der Verlauf ist nicht Dekoration: über hellen Motiven (Marmorboden, weiße
   Fassade) blieb die goldene Zeile sonst bei 1,4:1 stehen. Unten deutlich
   dichter, damit Weiß und Gold auf jedem Hero lesbar bleiben. */
.pj-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,16,12,.97) 0%, rgba(10,16,12,.88) 30%, rgba(10,16,12,.62) 52%, rgba(10,16,12,.3) 75%, rgba(10,16,12,.18) 100%); }
.pj-hero .container { position: relative; z-index: 2; padding-bottom: clamp(90px, 12vh, 150px); padding-top: 140px; }
.pj-overline { display: flex; align-items: center; gap: 14px; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 18px; }
.pj-overline::before { content: ""; width: 44px; height: 1px; background: var(--gold-2); }
.pj-hero h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(34px, 6vw, 76px); letter-spacing: -.03em; line-height: .98; color: #fff; margin: 0 0 22px; max-width: 900px; }
.pj-hero h1 .accent { color: var(--gold-2); }
.pj-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-chip { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); background: rgba(8,14,10,.55); border: 1px solid rgba(207,174,102,.3); border-radius: 999px; padding: 7px 14px; backdrop-filter: blur(6px); }
.pj-cue { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); font-family: var(--font-head); font-weight: 600; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pj-cue::after { content: ""; display: block; width: 1px; height: 26px; margin: 8px auto 0; background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent); animation: pj-drop 1.8s var(--ease-inout) infinite; }
@keyframes pj-drop { 0% { transform: scaleY(0); transform-origin: top } 45% { transform: scaleY(1); transform-origin: top } 55% { transform: scaleY(1); transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }

.pj-facts { position: relative; z-index: 3; background: var(--green-dark); border-top: 1px solid var(--line-light); }
/* minmax(0,1fr) statt 1fr: eine 1fr-Spur hat min-width:auto, ein langes Wort
   wie „Neueindeckung“ zieht sie sonst über die Containerbreite hinaus und der
   Text wird auf 360px vom overflow-x:hidden des body abgeschnitten. */
.pj-facts .cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pj-facts .cell { padding: 20px 22px; border-right: 1px solid var(--line-light); border-top: 1px solid var(--line-light); min-width: 0; }
/* hyphens statt hartem Umbruch: „Mehr-familien-haus“ statt „Mehrfamilien|haus“ */
.pj-facts .cell b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 17px; color: #fff;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.pj-facts .cell span { font-size: 13px; color: var(--txt-on-dark); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
/* Auf schmalen Geräten reicht die Spaltenbreite für „Neueindeckung“ bei 17px
   nicht — lieber etwas kleiner setzen als das Wort mitten durchbrechen. */
@media (max-width: 420px) {
  .pj-facts .cell { padding: 18px 16px; }
  .pj-facts .cell b { font-size: 15px; }
  .pj-facts .cell span { font-size: 12.5px; }
}
@media (min-width: 761px) { .pj-facts .cells { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pj-facts .cell { border-top: 0; } .pj-facts .cell:last-child { border-right: 0; } }

/* ---- Layout: sticky Phasen-Rail + Inhalt ---- */
.pj-body { display: grid; gap: 0; }
@media (min-width: 981px) { .pj-body { grid-template-columns: 240px 1fr; gap: clamp(24px, 4vw, 72px); } }
.pj-rail { display: none; }
@media (min-width: 981px) {
  .pj-rail { display: block; }
  .pj-rail-inner { position: sticky; top: 104px; padding: 34px 0 60px; }
  .pj-rail .rail-title { font-family: var(--font-head); font-weight: 700; font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: rgba(20,24,26,.4); margin-bottom: 18px; }
  .pj-rail a { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; text-decoration: none; border-left: 2px solid transparent; padding-left: 14px; margin-left: -16px; transition: border-color .3s, background .3s; }
  .pj-rail a .n { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: rgba(20,24,26,.35); transition: color .3s; }
  .pj-rail a .t { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: rgba(20,24,26,.55); transition: color .3s; }
  .pj-rail a.on { border-left-color: var(--gold); }
  .pj-rail a.on .n { color: var(--gold); }
  .pj-rail a.on .t { color: var(--ink); }
  .pj-rail a:hover .t { color: var(--green); }
}
/* Mobile: horizontale Phasen-Chips, sticky unter dem Header */
.pj-railbar { position: sticky; top: 72px; z-index: 50; background: rgba(243,241,234,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-dark); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pj-railbar::-webkit-scrollbar { display: none; }
.pj-railbar .row { display: flex; gap: 6px; padding: 10px var(--gutter); width: max-content; }
.pj-railbar a { flex: 0 0 auto; font-family: var(--font-head); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; color: rgba(20,24,26,.6); text-decoration: none; border: 1px solid rgba(20,24,26,.16); border-radius: 999px; padding: 7px 13px; transition: all .25s; }
.pj-railbar a.on { background: var(--green); border-color: var(--green); color: #fff; }
@media (min-width: 981px) { .pj-railbar { display: none; } }

/* ---- Intro ---- */
.pj-intro { padding: clamp(40px, 6vw, 72px) 0 6px; }
.pj-intro p { max-width: 68ch; font-size: clamp(16.5px, 1.55vw, 19.5px); line-height: 1.72; color: rgba(20,24,26,.72); margin: 0 0 14px; }
.pj-intro p b { color: var(--ink); }

/* ---- Phasen: Ghost-Nummer + Bento-Grid ---- */
.phase { position: relative; padding: clamp(34px, 5vw, 58px) 0; scroll-margin-top: 120px; }
.phase-head { position: relative; margin-bottom: 8px; padding-top: 12px; }
.phase-head .ghost { position: absolute; top: -18px; left: -8px; z-index: 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(84px, 11vw, 150px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(182,146,74,.28); pointer-events: none; user-select: none; }
.phase-head .kicker { position: relative; z-index: 1; display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.phase-head h2 { position: relative; z-index: 1; font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -.025em; color: var(--ink); margin: 0; }
.phase-lead { max-width: 62ch; color: rgba(20,24,26,.66); margin: 12px 0 28px; font-size: 16px; line-height: 1.7; }

.bento { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 761px) { .bento { grid-template-columns: repeat(12, 1fr); gap: 14px; } }
.bt { position: relative; border-radius: 16px; overflow: hidden; background: #d9d5c9; cursor: zoom-in; border: 0; padding: 0; display: block; width: 100%; grid-column: span 2; }
@media (min-width: 761px) {
  .bt { grid-column: span 4; }
  .bt.w7 { grid-column: span 7; }
  .bt.w5 { grid-column: span 5; }
  .bt.w6 { grid-column: span 6; }
  .bt.w8 { grid-column: span 8; }
  .bt.w12 { grid-column: span 12; }
}
.bt img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; transition: transform .8s var(--ease-out); }
.bt.w7 img, .bt.w8 img { aspect-ratio: 16/10; }
.bt.w12 img { aspect-ratio: 21/9; }
.bt:hover img { transform: scale(1.05); }
.bt figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 34px 15px 12px; background: linear-gradient(to top, rgba(8,14,10,.78), transparent); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: .02em; text-align: left; }
.bt figcaption::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--gold-2); flex: 0 0 auto; }
.bt .zoom { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; background: rgba(8,14,10,.5); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.bt:hover .zoom, .bt:focus-visible .zoom { opacity: 1; }
.bt .zoom svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2; }

/* ---- Vorher/Nachher-Slider ---- */
.ba { position: relative; border-radius: 20px; overflow: hidden; touch-action: pan-y; user-select: none; background: #111; }
.ba img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; pointer-events: none; }
.ba .after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--ba, 50%)); }
.ba .after img { width: 100%; height: 100%; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--ba, 50%); width: 2px; background: var(--gold-2); transform: translateX(-1px); pointer-events: none; }
.ba-handle::after { content: "◂ ▸"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; background: var(--gold); color: #12211a; font-size: 13px; letter-spacing: 1px; font-family: var(--font-head); font-weight: 700; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.ba-tag { position: absolute; top: 14px; z-index: 2; font-family: var(--font-head); font-weight: 700; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #fff; background: rgba(8,14,10,.6); backdrop-filter: blur(6px); border-radius: 999px; padding: 7px 13px; pointer-events: none; }
.ba-tag.l { left: 14px; }
.ba-tag.r { right: 14px; color: var(--gold-2); border: 1px solid rgba(207,174,102,.4); }

/* ---- Ticker ---- */
.pj-ticker { overflow: clip; border-block: 1px solid var(--line-dark); padding: 16px 0; margin-top: clamp(30px, 5vw, 54px); }
.pj-ticker .row { display: flex; gap: 44px; width: max-content; animation: pj-tick 32s linear infinite; }
.pj-ticker span { font-family: var(--font-head); font-weight: 700; font-size: clamp(15px, 1.8vw, 20px); letter-spacing: .14em; text-transform: uppercase; color: rgba(20,24,26,.32); white-space: nowrap; }
.pj-ticker span i { font-style: normal; color: var(--gold); }
@keyframes pj-tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pj-ticker .row { animation: none; } .pj-cue::after { animation: none; } }

/* ---- Videos ---- */
.pj-videos { background: var(--green-dark); padding: clamp(48px, 7vw, 84px) 0; }
.pj-videos .vh { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.pj-videos h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -.025em; color: #fff; margin: 0; }
.pj-videos h2 .accent { color: var(--gold-2); }
.pj-videos .rec { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--txt-on-dark); }
.pj-videos .rec::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #e5484d; animation: pj-rec 1.6s ease infinite; }
@keyframes pj-rec { 50% { opacity: .25; } }
.vid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 300px)); gap: 18px; }
.vid-card { position: relative; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--line-light); }
.vid-card video { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; background: #000; }
.vid-card figcaption { padding: 12px 15px; color: var(--txt-on-dark); font-family: var(--font-head); font-weight: 600; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .pj-videos .rec::before { animation: none; } }

/* ---- CTA + Footer ---- */
.pj-cta { padding: clamp(48px, 7vw, 84px) 0; }
.pj-cta .box { position: relative; overflow: clip; background: var(--green); border-radius: 24px; padding: clamp(32px, 5vw, 60px); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.pj-cta .box::before { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 999px; border: 1px solid rgba(207,174,102,.25); }
.pj-cta .box::after { content: ""; position: absolute; right: -20px; top: -100px; width: 260px; height: 260px; border-radius: 999px; border: 1px solid rgba(207,174,102,.15); }
.pj-cta h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(25px, 3.2vw, 42px); letter-spacing: -.02em; margin: 0; max-width: 560px; }
.pj-cta h2 .accent { color: var(--gold-2); }
.btn-gold { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; padding: 17px 30px; border-radius: 999px; background: var(--gold); color: #12211a; text-decoration: none; transition: transform .35s var(--ease-out), background .3s; position: relative; z-index: 1; }
.btn-gold:hover { background: var(--gold-2); transform: translateY(-2px); }
.btn-gold svg { width: 18px; height: 18px; fill: currentColor; }
.pj-footer { border-top: 1px solid var(--line-dark); padding: 26px 0; color: rgba(20,24,26,.66); font-size: 14px; }
.pj-footer .container { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
.pj-footer a { color: var(--green); text-decoration: none; font-family: var(--font-head); font-weight: 600; }
.pj-footer a:hover { color: var(--gold); }

/* ---- Lightbox mit Navigation ---- */
.lb { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(10,16,12,.95); }
.lb[hidden] { display: none; }
.lb img { max-width: min(100%, 1200px); max-height: 80vh; object-fit: contain; border-radius: 12px; }
.lb-cap { margin-top: 12px; color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; text-align: center; }
.lb-count { position: absolute; top: 22px; left: 24px; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: rgba(255,255,255,.65); }
.lb-close { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; display: grid; place-items: center; font-size: 26px; line-height: 1; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; cursor: pointer; }
.lb-close:hover { background: rgba(255,255,255,.2); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; cursor: pointer; transition: background .25s; }
.lb-nav:hover { background: var(--gold); border-color: var(--gold); color: #12211a; }
.lb-nav.prev { left: 14px; }
.lb-nav.next { right: 14px; }
.lb-nav svg { width: 20px; height: 20px; fill: currentColor; }
.lb-nav.prev svg { transform: rotate(180deg); }

/* ---- Reveals (Stagger via --d) ---- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out) var(--d, 0s), transform .7s var(--ease-out) var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }
/* ==========================================================================
   KONTAKT V2 — weißes Panel mit Formular links + dunkler Info-Karte rechts
   ========================================================================== */
.kx-card { background: var(--paper); color: var(--ink); border-radius: 26px; padding: clamp(24px, 3.4vw, 48px); display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(26px, 4vw, 56px); box-shadow: 0 40px 100px -36px rgba(0,0,0,.6); }
.kx-form h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.03em; color: var(--ink); margin: 0 0 8px; }
.kx-form h2 .accent { color: var(--gold); }
.kx-sub { font-size: 15px; color: rgba(20,24,26,.6); margin: 0 0 26px; max-width: 52ch; }
.kx-form .req { color: #e5484d; }
.kx-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 15px; padding: 15px 30px; border-radius: 999px; background: var(--green-deep); color: #fff; border: 0; cursor: pointer; transition: background .3s, transform .3s var(--ease-out); }
.kx-btn:hover { background: var(--green); transform: translateY(-2px); }
.kx-btn svg { width: 17px; height: 17px; fill: currentColor; }

.kx-panel { background: linear-gradient(165deg, var(--green) 0%, var(--green-dark) 80%); color: var(--cream); border-radius: 20px; padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 28px; align-self: stretch; }
.kx-panel h3 { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: #fff; margin: 0 0 10px; }
.kx-panel p { margin: 0 0 6px; font-size: 14.5px; color: rgba(243,241,234,.78); line-height: 1.65; }
.kx-panel p b { color: rgba(243,241,234,.95); font-weight: 600; }
.kx-panel a { color: var(--gold-2); transition: color .25s; }
.kx-panel a:hover { color: #fff; }

.kx-pers { display: flex; flex-direction: column; gap: 12px; }
.kx-pers a { display: flex; align-items: center; gap: 12px; color: inherit; background: rgba(255,255,255,.05); border: 1px solid rgba(243,241,234,.12); border-radius: 14px; padding: 12px 14px; transition: border-color .3s, background .3s; }
.kx-pers a:hover { background: rgba(255,255,255,.09); border-color: rgba(207,174,102,.45); color: inherit; }
.kx-pers .av { width: 38px; height: 38px; border-radius: 999px; background: var(--gold); color: #12211a; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.kx-pers b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: #fff; }
.kx-pers .role { font-size: 12px; color: rgba(243,241,234,.55); }
.kx-pers .tel { margin-left: auto; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--gold-2); white-space: nowrap; }

@media (max-width: 900px) { .kx-card { grid-template-columns: 1fr; } }
/* ---- Kontakt: illustrierte Karte im Info-Panel ---- */
.kx-map { position: relative; flex: 1; min-height: 200px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(243,241,234,.14); }
.kx-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kx-map-label { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); background: #fff; color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: .02em; padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 14px rgba(20,24,26,.25); white-space: nowrap; }
.kx-map-tag { position: absolute; left: 10px; bottom: 10px; background: rgba(18,33,26,.82); backdrop-filter: blur(6px); color: var(--cream); font-family: var(--font-head); font-weight: 600; font-size: 11px; letter-spacing: .04em; padding: 6px 11px; border-radius: 999px; }
/* ==========================================================================
   KUNDENSTIMMEN — horizontale Karten, echte Google-Rezensionen + Video-Karte
   ========================================================================== */
.stimmen { background: var(--cream); padding: clamp(70px, 9vw, 130px) 0; }
.stimmen .sec-head-st { max-width: 900px; margin-bottom: clamp(30px, 4vw, 50px); }
.stimmen h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 4.4vw, 58px); letter-spacing: -.04em; line-height: 1.04; color: var(--ink); margin: 0; }
.stimmen h2 .accent { color: var(--gold); }

.tst-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 6px 22px; margin: 0 -6px; scrollbar-width: thin; scrollbar-color: rgba(20,24,26,.25) transparent; }
.tst-track::-webkit-scrollbar { height: 8px; }
.tst-track::-webkit-scrollbar-thumb { background: rgba(20,24,26,.18); border-radius: 999px; }

.tst-card { flex: 0 0 330px; scroll-snap-align: start; display: flex; flex-direction: column; min-height: 430px; background: #fff; border: 1px solid rgba(20,24,26,.07); border-radius: 20px; padding: 26px 26px 24px; box-shadow: 0 18px 44px -30px rgba(20,24,26,.35); }
.tst-card .qm { font-family: Georgia, 'Times New Roman', serif; font-size: 52px; line-height: .6; color: var(--gold); height: 26px; }
.tst-card p { flex: 1; font-size: 14.5px; line-height: 1.7; color: rgba(20,24,26,.72); margin: 14px 0 20px; }
.tst-card .who { border-top: 1px solid rgba(20,24,26,.08); padding-top: 16px; }
.tst-card .who b { display: block; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 600; font-size: 19px; letter-spacing: .01em; color: var(--ink); }
.tst-card .who span { font-size: 12.5px; color: rgba(20,24,26,.45); }

.tst-video { position: relative; flex: 0 0 330px; scroll-snap-align: start; min-height: 430px; border-radius: 20px; overflow: hidden; background: #000; }
.tst-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tst-video .vplay { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; border: 0; background: linear-gradient(to top, rgba(8,14,10,.65), rgba(8,14,10,.08) 55%); cursor: pointer; transition: opacity .35s; }
.tst-video .vplay .tri { width: 68px; height: 68px; border-radius: 999px; background: var(--gold); display: grid; place-items: center; box-shadow: 0 14px 40px rgba(0,0,0,.45); transition: transform .3s var(--ease-out), background .3s; }
.tst-video .vplay:hover .tri { transform: scale(1.08); background: var(--gold-2); }
.tst-video .vplay .tri svg { width: 24px; height: 24px; fill: #12211a; margin-left: 4px; }
.tst-video .vplay.is-hidden { opacity: 0; pointer-events: none; }
.tst-video .vtag { position: absolute; left: 14px; bottom: 14px; z-index: 3; background: rgba(18,33,26,.8); backdrop-filter: blur(6px); color: var(--cream); font-family: var(--font-head); font-weight: 600; font-size: 11.5px; letter-spacing: .05em; padding: 7px 12px; border-radius: 999px; pointer-events: none; }
/* ---- Signatur-Schrift (Kundenstimmen) ---- */
@font-face { font-family: 'Great Vibes'; src: url('../fonts/great-vibes-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
.tst-card .who b { font-family: 'Great Vibes', Georgia, cursive; font-style: normal; font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: .01em; }

/* ---- Google-Icon in den Rezensionskarten ---- */
.gsrc { display: inline-flex; align-items: center; gap: 7px; }
.gicon { width: 14px; height: 14px; flex: 0 0 auto; }

/* ---- Ansprechpartner: echte Porträts statt Initialen ---- */
.kx-pers img.av { object-fit: cover; display: block; border: 2px solid rgba(207,174,102,.55); background: #0d1712; }

/* ---- Sektions-Überschriften: leichter & enger ---- */
.sec-head h2, .refs-head h2, .unt-body h2, .massiv-panel h2, .stimmen h2, .kx-form h2,
.phase-head h2, .pj-videos h2, .pj-cta h2 {
  font-weight: 500;
  letter-spacing: -.048em;
}
/* ---- Signatur: Priestacy ---- */
@font-face { font-family: 'Priestacy'; src: url('../fonts/priestacy.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
.tst-card .who b { font-family: 'Priestacy', 'Great Vibes', cursive; font-size: 26px; line-height: 1.5; padding-top: 6px; }

/* ---- 5 Sterne statt Datum ---- */
.stars { display: inline-flex; gap: 2.5px; }
.stars .star { width: 14.5px; height: 14.5px; fill: var(--gold); }

/* ---- H1 leichter ---- */
.hero h1, .pj-hero h1 { font-weight: 500; letter-spacing: -.045em; }

/* ---- Kundenstimmen: Endlos-Marquee + weiche Kante rechts ---- */
.tst-wrap { position: relative; overflow-x: auto; scrollbar-width: none; }
.tst-wrap::-webkit-scrollbar { display: none; }
.tst-wrap:has(.is-anim) { overflow: hidden; }
.tst-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: clamp(60px, 12vw, 170px); background: linear-gradient(to left, var(--cream) 12%, transparent); z-index: 2; pointer-events: none; }
.tst-track { padding: 6px 0 10px; margin: 0; }
.tst-track.is-anim { animation: tst-marq 60s linear infinite; }
.tst-track.is-anim:hover, .tst-track.is-anim.is-paused { animation-play-state: paused; }
@keyframes tst-marq { to { transform: translateX(calc(-50% - 9px)); } }
@media (prefers-reduced-motion: reduce) { .tst-track.is-anim { animation: none; } }
/* Marquee: der Track selbst scrollt nicht mehr — der Wrap übernimmt das */
.tst-track { display: flex; gap: 18px; width: max-content; overflow: visible; scroll-snap-type: none; }
/* ---------- Video-Kacheln in den Leistungs-Galerien ---------- */
/* Nur ::before verwenden — ::after trägt bereits den Verlauf hinter der
   Bildunterschrift; eine .is-video-Regel darauf würde ihn ersetzen. */
.gal-item.is-video::before{content:'';position:absolute;z-index:3;top:50%;left:50%;
  width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.92) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23111'/%3E%3C/svg%3E") center/20px no-repeat;
  box-shadow:0 4px 16px rgba(8,14,10,.45);transition:transform .25s}
.gal-item.is-video:hover::before{transform:scale(1.1)}
.gal-item.is-video{cursor:pointer}
.lb-video{display:block;max-width:100%;max-height:80vh;margin:0 auto;border-radius:6px;background:#000}

/* =====================================================================
   LEISTUNGSSEITEN  (dach / fassade / fliesen / rohbau / massivhaus /
   trockenbau) — baut auf dem pj-* System der Projektseiten auf.
   ===================================================================== */

/* ---- Sprungnavigation, klebt unter dem Kopf ---- */
/* Der Seitenkopf klebt selbst mit top:0 — die Sprungleiste muss darunter
   einrasten, sonst liegen beide übereinander. 73px = 72px Kopf + 1px Trennlinie. */
.svc-jump{position:sticky;top:73px;z-index:55;background:rgba(243,241,234,.95);
  border-bottom:1px solid var(--line-dark);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.svc-jump::-webkit-scrollbar{display:none}
.svc-jump .row{display:flex;gap:2px;padding:0 var(--gutter);width:max-content;min-width:100%}
.svc-jump a{position:relative;flex:0 0 auto;padding:15px 16px;font-family:var(--font-head);font-weight:600;
  font-size:13px;letter-spacing:.02em;color:rgba(20,24,26,.66);text-decoration:none;transition:color .25s}
.svc-jump a::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.svc-jump a:hover{color:var(--ink)}
.svc-jump a.on{color:var(--ink)}
.svc-jump a.on::after{transform:scaleX(1)}

/* Eigener Name statt ".in" — die Einblendung benutzt ".in" als Status-Klasse. */
.svc-cols{display:grid}
@media (min-width:981px){.svc-scope .svc-cols,.svc-faq .svc-cols{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}

/* ---- Einleitung ---- */
.svc-lead{padding:clamp(46px,6.5vw,86px) 0 0}
.svc-lead .svc-cols{gap:clamp(20px,3vw,54px)}
@media (min-width:981px){.svc-lead .svc-cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}}
.svc-lead h2{font-family:var(--font-head);font-weight:700;font-size:clamp(24px,3.2vw,40px);
  letter-spacing:-.028em;line-height:1.1;margin:0 0 18px;color:var(--ink)}
.svc-lead p{max-width:64ch;font-size:clamp(16px,1.5vw,18.5px);line-height:1.75;color:rgba(20,24,26,.72);margin:0 0 14px}
.svc-lead p b{color:var(--ink);font-weight:600}
/* rechte Spalte: harte Zahlen, bewusst nüchtern gesetzt */
.svc-side{border-top:2px solid var(--ink);padding-top:18px}
.svc-side dl{margin:0;display:grid;gap:0}
.svc-side dt{font-family:var(--font-head);font-weight:600;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(20,24,26,.63);padding-top:14px}
.svc-side dd{margin:2px 0 0;padding-bottom:14px;border-bottom:1px solid var(--line-dark);
  font-family:var(--font-head);font-weight:600;font-size:16.5px;color:var(--ink)}
.svc-side dd:last-of-type{border-bottom:0}

/* ---- Leistungsumfang: linke Spalte bleibt stehen, rechts die Liste ---- */
.svc-scope{padding:clamp(46px,6.5vw,90px) 0}
.svc-scope .svc-cols{gap:clamp(22px,3vw,60px)}
.svc-scope .stick{align-self:start}
@media (min-width:981px){.svc-scope .stick{position:sticky;top:96px}}
.svc-kicker{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 12px}
.svc-scope h2,.svc-steps h2,.svc-gal-sec h2,.svc-faq h2,.svc-cross h2{
  font-family:var(--font-head);font-weight:700;font-size:clamp(26px,3.6vw,46px);
  letter-spacing:-.03em;line-height:1.05;margin:0 0 16px;color:var(--ink)}
.svc-scope .note{font-size:15px;line-height:1.7;color:rgba(20,24,26,.62);max-width:38ch;margin:0}
.scope-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.scope-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--line-dark)}
/* Jede Zelle bekommt ihren Platz ausdrücklich zugewiesen. Ein Sammelselektor
   auf span würde auch die Ziffer erfassen und die Zeile durcheinanderbringen. */
.scope-list .n{grid-column:1;grid-row:1;font-family:var(--font-head);font-weight:600;font-size:12px;
  letter-spacing:.08em;color:var(--gold-ink);padding-top:3px}
.scope-list b{grid-column:2;grid-row:1;font-family:var(--font-head);font-weight:600;
  font-size:clamp(16.5px,1.7vw,19px);color:var(--ink);letter-spacing:-.012em}
.scope-list li>span:last-child{grid-column:2;grid-row:2;font-size:15px;line-height:1.65;color:rgba(20,24,26,.66)}
@media (max-width:640px){.scope-list li{grid-template-columns:34px minmax(0,1fr)}}

/* ---- Ablauf ---- */
.svc-steps{background:var(--green-dark);color:#fff;padding:clamp(48px,7vw,92px) 0}
.svc-steps h2{color:#fff}
.svc-steps .svc-kicker{color:var(--gold-2)}
.svc-steps .head{max-width:60ch;margin-bottom:clamp(26px,4vw,46px)}
.svc-steps .head p{font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.7;color:var(--txt-on-dark);margin:0}
.steps{display:grid;gap:1px;background:var(--line-light);border:1px solid var(--line-light);border-radius:18px;overflow:hidden}
@media (min-width:761px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1181px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{background:var(--green-dark);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:9px}
.step .no{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.1em;color:var(--gold-2)}
.step h3{font-family:var(--font-head);font-weight:600;font-size:18.5px;letter-spacing:-.015em;margin:0;color:#fff}
.step p{font-size:14.5px;line-height:1.65;color:var(--txt-on-dark);margin:0}

/* ---- Galerie-Abschnitt ---- */
.svc-gal-sec{padding:clamp(46px,6.5vw,90px) 0}
.svc-gal-sec .head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  flex-wrap:wrap;margin-bottom:clamp(20px,3vw,34px)}
.svc-gal-sec .head p{max-width:52ch;font-size:15.5px;line-height:1.7;color:rgba(20,24,26,.66);margin:0}
.svc-count{font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(20,24,26,.63);white-space:nowrap}
/* Videokachel im Bento */
.bt.is-clip{cursor:pointer}
.bt.is-clip::before{content:"";position:absolute;z-index:3;top:50%;left:50%;width:52px;height:52px;
  margin:-26px 0 0 -26px;border-radius:50%;pointer-events:none;box-shadow:0 4px 18px rgba(8,14,10,.45);
  background:rgba(255,255,255,.93) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23111'/%3E%3C/svg%3E") center/22px no-repeat;
  transition:transform .25s}
.bt.is-clip:hover::before{transform:scale(1.1)}

/* ---- Videos: Querformat statt Hochformat ---- */
.vid-card.land video{aspect-ratio:16/9}
.vid-grid.wide{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* ---- Referenzen ---- */
.svc-refs{background:var(--cream);padding:clamp(46px,6.5vw,90px) 0}
.ref-links{display:grid;gap:14px}
@media (min-width:761px){.ref-links{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
.ref-link{position:relative;display:block;text-decoration:none;border-radius:18px;overflow:hidden;
  background:var(--ink-2);min-height:200px}
.ref-link img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;
  transition:transform .8s var(--ease-out);opacity:.72}
.ref-link:hover img{transform:scale(1.05)}
.ref-link .cap{position:relative;z-index:2;padding:clamp(20px,2.4vw,28px);
  min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(to top,rgba(8,14,10,.86) 12%,rgba(8,14,10,.15) 62%,transparent)}
.ref-link .k{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-2);margin:0 0 6px}
.ref-link h3{font-family:var(--font-head);font-weight:600;font-size:20px;letter-spacing:-.02em;color:#fff;margin:0}
/* Bauvorhaben-Liste — trockene Aufzählung, wie im Angebot */
.bv-list{list-style:none;margin:22px 0 0;padding:0;columns:2;column-gap:34px}
@media (max-width:640px){.bv-list{columns:1}}
.bv-list li{break-inside:avoid;padding:9px 0;border-bottom:1px solid var(--line-dark);
  font-size:14.5px;color:rgba(20,24,26,.72);display:flex;gap:10px}
.bv-list li b{font-family:var(--font-head);font-weight:600;color:var(--ink);flex:0 0 auto}

/* ---- FAQ ---- */
.svc-faq{padding:clamp(46px,6.5vw,90px) 0}
.svc-faq .svc-cols{gap:clamp(20px,3vw,54px)}
.faq{border-top:1px solid var(--line-dark)}
.faq details{border-bottom:1px solid var(--line-dark)}
.faq summary{list-style:none;cursor:pointer;padding:19px 44px 19px 0;position:relative;
  font-family:var(--font-head);font-weight:600;font-size:clamp(16px,1.6vw,18px);
  letter-spacing:-.012em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(45deg);transition:transform .3s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.faq p{margin:0 0 19px;padding-right:44px;font-size:15.5px;line-height:1.72;color:rgba(20,24,26,.7)}

/* ---- Andere Gewerke ---- */
.svc-cross{background:var(--green-dark);color:#fff;padding:clamp(46px,6.5vw,88px) 0}
.svc-cross h2{color:#fff}
.svc-cross .svc-kicker{color:var(--gold-2)}
.cross-grid{display:grid;gap:1px;background:var(--line-light);border:1px solid var(--line-light);
  border-radius:18px;overflow:hidden;margin-top:clamp(20px,3vw,32px)}
@media (min-width:641px){.cross-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1101px){.cross-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.cross{background:var(--green-dark);padding:clamp(20px,2.4vw,26px);text-decoration:none;display:block;
  transition:background .3s}
.cross:hover{background:var(--green)}
.cross .no{font-family:var(--font-head);font-weight:600;font-size:11.5px;letter-spacing:.1em;color:var(--gold-2)}
.cross h3{font-family:var(--font-head);font-weight:600;font-size:17px;letter-spacing:-.015em;
  margin:8px 0 6px;color:#fff}
.cross p{font-size:13.5px;line-height:1.6;color:var(--txt-on-dark);margin:0}
.cross .arw{display:inline-block;margin-top:12px;color:var(--gold-2);font-size:15px}

/* ---- Kontaktzeile mit echten Ansprechpartnern ---- */
.svc-people{display:grid;gap:14px;margin-top:26px}
@media (min-width:641px){.svc-people{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Eigener Name: ".person" ist auf der Startseite bereits eine Flex-Karte mit
   Avatar — der Sammelname würde die Zeilen hier nebeneinander legen. */
.svc-person{display:block;border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:18px 20px}
.svc-person .r{font-family:var(--font-head);font-weight:600;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-2);margin:0 0 5px}
.svc-person b{display:block;font-family:var(--font-head);font-weight:600;font-size:17px;color:#fff;margin-bottom:4px}
.svc-person a{color:rgba(255,255,255,.86);text-decoration:none;font-size:15px;border-bottom:1px solid rgba(255,255,255,.3)}
.svc-person a:hover{color:#fff;border-color:var(--gold-2)}

/* Skip-Link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold);color:#111;
  padding:10px 16px;font-family:var(--font-head);font-weight:600;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* Kopf (72px) und Sprungleiste (52px) kleben oben — ohne diesen Abstand
   landet die Abschnittsüberschrift beim Sprung dahinter. */
.svc-lead,.svc-scope,.svc-steps,.svc-gal-sec,.pj-videos,.svc-refs,.svc-faq,.pj-cta{scroll-margin-top:132px}

/* ---- Link von der Startseiten-Galerie auf die jeweilige Leistungsseite ---- */
.svc-gal-more{display:inline-flex;align-items:center;gap:9px;margin:16px 0 0;
  font-family:var(--font-head);font-weight:600;font-size:14.5px;letter-spacing:-.01em;
  color:var(--gold-2);text-decoration:none;padding-bottom:5px;
  border-bottom:1px solid rgba(207,174,102,.4);transition:border-color .25s,gap .25s}
.svc-gal-more:hover{border-color:var(--gold-2);gap:13px}
.svc-gal-more svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}

/* ---- Gewerke als aufklappbare Liste im Hauptmenü ----
   Ausgeklappt schöben die sechs Einträge alles darunter aus dem Bild — deshalb
   liegen sie hinter einem Pfeil neben „Leistungen“. */
.menu-row{display:flex;align-items:center;gap:6px}
.menu-row .menu-link{flex:0 1 auto}

.menu-toggle{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(20,24,26,.16);border-radius:999px;background:transparent;
  color:rgba(20,24,26,.55);cursor:pointer;padding:0;
  transition:color .25s,border-color .25s,background .25s,transform .35s var(--ease-out)}
.menu-toggle svg{width:19px;height:19px;display:block;transition:transform .35s var(--ease-out)}
.menu-toggle:hover{color:var(--ink);border-color:rgba(20,24,26,.34);background:rgba(20,24,26,.04)}
.menu-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.menu-toggle[aria-expanded="true"]{color:var(--ink);border-color:var(--gold);background:rgba(182,146,74,.1)}
.menu-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

/* 0fr -> 1fr blendet auf die tatsächliche Höhe auf, ohne sie zu kennen.
   visibility:hidden ist dabei nicht kosmetisch: ohne sie blieben die sechs
   Links auch zugeklappt in der Tabulatorreihenfolge und im Screenreader.
   Die Verzögerung lässt die Aufklapp-Animation vorher zu Ende laufen. */
.menu-sublist{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;
  transition:grid-template-rows .42s var(--ease-out),opacity .3s ease,
             margin .42s var(--ease-out),visibility 0s linear .42s}
.menu-sublist>ul{overflow:hidden;min-height:0;list-style:none;margin:0;padding:0}
.menu-item.is-open .menu-sublist{grid-template-rows:1fr;opacity:1;visibility:visible;margin:6px 0 10px;
  transition:grid-template-rows .42s var(--ease-out),opacity .3s ease,
             margin .42s var(--ease-out),visibility 0s}
.menu-item.is-open .menu-sublist>ul{padding-left:4px;border-left:1px solid rgba(20,24,26,.14)}

.menu-sub{display:flex;align-items:baseline;gap:12px;padding:8px 0 8px 14px;text-decoration:none;
  font-family:var(--font-head);font-weight:500;font-size:16px;letter-spacing:-.01em;
  color:rgba(20,24,26,.66);
  opacity:0;transform:translateX(-8px);
  transition:color .25s,padding-left .25s,opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.menu-item.is-open .menu-sub{opacity:1;transform:none;transition-delay:var(--s,0s)}
.menu-sub span{font-size:11.5px;letter-spacing:.1em;color:var(--gold-ink);flex:0 0 auto}
.menu-sub:hover{color:var(--ink);padding-left:20px}
.menu-sub:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .menu-sublist,.menu-sub,.menu-toggle svg{transition:none}
}

/* nur für Screenreader */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   RECHTSSEITEN — Impressum, Datenschutz, 404
   Bewusst kein Design über dem Text: Fließsatz, klare Hierarchie,
   Zeilenlänge auf rund 75 Zeichen begrenzt. Rechtstexte werden
   gelesen, nicht überflogen.
   ============================================================ */
.lg{padding:clamp(44px,7vw,88px) 0 clamp(64px,9vw,112px)}
.lg .container{max-width:880px}
.lg-eyebrow{font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:14px}
.lg h1{font-size:clamp(30px,5vw,44px);margin-bottom:12px}
.lg-stand{font-size:14px;color:rgba(20,24,26,.62);padding-bottom:20px;
  margin-bottom:clamp(26px,4vw,40px);border-bottom:2px solid var(--green)}
.lg h2{font-size:clamp(19px,2.4vw,23px);margin:42px 0 12px;scroll-margin-top:92px}
.lg h2:first-of-type{margin-top:0}
.lg h3{font-family:var(--font-head);font-weight:600;font-size:16px;letter-spacing:-.01em;margin:24px 0 8px}
.lg p,.lg li,.lg dd{font-size:15.5px;line-height:1.75;color:var(--ink-2)}
.lg p{margin-bottom:12px}
.lg ul{margin:0 0 14px}
.lg ul li{position:relative;padding-left:19px;margin-bottom:6px}
.lg ul li::before{content:"";position:absolute;left:1px;top:12px;width:8px;height:1.5px;background:var(--gold-ink)}
.lg a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.lg a:hover{color:var(--gold-ink)}
.lg address{font-style:normal}
.lg dl{margin:0 0 16px}
.lg dt{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--ink);margin-top:12px}
.lg dd{margin:2px 0 0}
@media (min-width:640px){
  .lg dl{display:grid;grid-template-columns:240px 1fr;gap:0 28px;align-items:baseline}
  .lg dt{margin-top:9px}
  .lg dd{margin-top:9px}
}
/* Offene Punkte sichtbar markiert — sie dürfen nicht live gehen */
.lg-todo{background:#fdf0c9;box-shadow:0 0 0 1px #d6b143;border-radius:3px;padding:1px 7px;
  font-family:var(--font-head);font-weight:600;font-size:13px;color:#6d5310;white-space:nowrap}
.lg-note{background:var(--paper);border:1px solid var(--line-dark);border-left:3px solid var(--green);
  padding:16px 20px;margin:18px 0}
.lg-note p:last-child{margin-bottom:0}
.lg-toc{margin:0 0 clamp(30px,4vw,44px);padding:18px 20px;background:var(--paper);border:1px solid var(--line-dark)}
.lg-toc h2{font-size:13px!important;font-family:var(--font-head);letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 10px!important;color:rgba(20,24,26,.55)}
.lg-toc ol{margin:0;padding-left:20px}
.lg-toc li{font-size:14.5px;margin-bottom:4px}
.lg-toc a{color:var(--green)}

/* ---- 404 ---- */
.nf{min-height:66svh;display:grid;align-content:center;padding:clamp(70px,10vw,120px) 0}
.nf-code{font-family:var(--font-head);font-weight:700;font-size:clamp(72px,15vw,164px);
  line-height:.85;letter-spacing:-.055em;color:var(--green);margin-bottom:18px}
.nf h1{font-size:clamp(24px,3.6vw,34px);margin-bottom:14px;max-width:16ch}
.nf p{font-size:16px;line-height:1.7;color:var(--ink-2);max-width:52ch;margin-bottom:26px}
.nf-links{display:flex;flex-wrap:wrap;gap:10px}
.nf-links a{display:inline-flex;align-items:center;min-height:44px;padding:11px 20px;
  font-family:var(--font-head);font-weight:600;font-size:14.5px;
  border:1px solid rgba(42,74,56,.3);border-radius:999px;color:var(--green);
  transition:background .25s,color .25s,border-color .25s}
.nf-links a:hover{background:var(--green);border-color:var(--green);color:#fff}
.nf-links a.primary{background:var(--green);border-color:var(--green);color:#fff}
.nf-links a.primary:hover{background:var(--green-deep);border-color:var(--green-deep)}