/* Ein zusammenhängendes Molekül der drei Marken. HTML bleibt die lesbare und bedienbare Grundlage. */
:root { --nv-flaeche: #f0f1f2; }
.logo-raum > #marken.leistungen { z-index: auto; }
.leistungen { padding: clamp(28px, 3vw, 46px) var(--rand) clamp(54px, 5vw, 78px); color: #e9e8e6; }
/* Schwarz mit weichem Vorlauf 70 % Bildschirmhöhe nach oben in die Gruppen-Sektion. Liegt unter der Punktebene:
   Der graue Bühnenschimmer läuft aus, die Moleküle bleiben in voller Stärke und werden nach unten dichter (Marcel 22.10.). */
.leistungen::before { content: ""; position: absolute; inset: -70svh 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #0000 0, #0005 21svh, #000b 43svh, #000 70svh, #000 100%); }
.leistungen-rahmen { max-width: var(--max); margin: 0 auto; }
.leistungen-intro { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.leistungen-auftakt { min-width: 0; }
.leistungen-etikett { margin: 0 0 16px; font: 500 10px/1.4 var(--sans); letter-spacing: .19em; text-transform: uppercase; color: #d4af7a; }
.leistungen h2 { margin: 0; font: 500 clamp(32px, 4.2vw, 64px)/1.08 var(--kopf); letter-spacing: -.045em; text-wrap: balance; }
.leistungen h2 span { display: inline-block; }
.leistungen-einordnung { margin: 20px 0 0; max-width: 580px; color: #b8bab9; font: 400 clamp(16px, 1.5vw, 21px)/1.5 var(--sans); }
.leistungen-projekt { display: inline-flex; min-height: 44px; gap: 26px; align-items: center; margin-top: 17px; padding: 6px 0; border-bottom: 1px solid #d4af7a88; color: #e9e8e6; text-decoration: none; font-size: 14px; }
.leistungen-projekt span { color: #d4af7a; transition: transform .35s; }
.leistungen-projekt:hover span { transform: translate(3px, -3px); }
.leistungen-projekt:focus-visible { outline: 2px solid #d4af7a; outline-offset: 6px; }
.leistungen-logo { display: grid; place-items: center; flex: 0 0 140px; width: 140px; height: 140px; margin-right: 25px; pointer-events: none; }
.leistungen-logo svg { display: block; width: auto; height: 86%; filter: drop-shadow(0 0 1px #fff5); }

/* Pro Marke ein vollständiger Molekülkörper mit drei klar zugeordneten Satelliten. */
.molekuel-netz { position: relative; margin: 44px 0 0; }
.molekuel-kanten { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.molekuel-kanten path, .molekuel-kanten line { fill: none; stroke: #d4af7a; stroke-width: 1; stroke-opacity: .42; vector-effect: non-scaling-stroke; }
.molekuel-netz[data-netz-kanten="bereit"] .molekuel-ersatzkanten { display: none; }
.molekuel-kanten [data-marke="bau"] { stroke: #b07a3e; }
.molekuel-kanten [data-marke="sanierung"] { stroke: #3d9be0; }
.molekuel-kanten [data-marke="energie"] { stroke: #f2b01e; }
.molekuel-kanten .molekuel-bindung { transition: stroke-opacity .25s, stroke-width .25s; }
.molekuel-kanten .molekuel-bindung--marken { stroke: #d4af7a; stroke-opacity: .36; stroke-dasharray: 2 5; }
.molekuel-kanten .molekuel-bindung.ist-aktiv { stroke-opacity: .8; stroke-width: 1.4; }
.molekuel-kanten .molekuel-impuls { stroke-opacity: 0; stroke-width: 2; stroke-dasharray: .08 .92; stroke-dashoffset: 1; }
.molekuel-kanten .molekuel-impuls.ist-impuls { animation: molekuel-signal .75s ease-out both; }
@keyframes molekuel-signal {
  0% { stroke-dashoffset: 1; stroke-opacity: 0; }
  20% { stroke-opacity: .9; }
  80% { stroke-opacity: .9; }
  100% { stroke-dashoffset: 0; stroke-opacity: 0; }
}
.molekuel-buehne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); list-style: none; margin: 0; padding: 0; }
.molekuel-gruppe { --markenfarbe: #d4af7a; position: relative; min-width: 0; scroll-margin-top: 110px; }
.molekuel-gruppe#marke-bau { --markenfarbe: #b07a3e; }
.molekuel-gruppe#marke-sanierung { --markenfarbe: #3d9be0; }
.molekuel-gruppe#marke-energie { --markenfarbe: #f2b01e; }
.molekuel-domain { position: relative; z-index: 2; margin: 0 0 30px; text-align: center; color: #e9e8e6; font: 500 clamp(17px, 1.65vw, 25px)/1.3 var(--kopf); letter-spacing: -.035em; }
.molekuel-szene { position: relative; height: 470px; }
.molekuel-ersatzkanten { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; fill: none; stroke: var(--markenfarbe); stroke-opacity: .4; pointer-events: none; }
.molekuel-ersatzkanten path { stroke-width: 1; vector-effect: non-scaling-stroke; }
.molekuel-kugel { position: absolute; display: block; border-radius: 50%; z-index: 2; }
.molekuel-kugel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 30% 24%, #8a9198 0%, #454e57 20%, #1e242a 55%, #07090b 100%); box-shadow: inset -4px -7px 12px #0008, inset 1px 1px 4px #fff3, 0 8px 20px #0006; }
.molekuel-kugel::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; border: 1px solid var(--markenfarbe); opacity: .35; pointer-events: none; }
.molekuel-haupt { left: 50%; top: 258px; width: clamp(132px, 13vw, 174px); height: clamp(132px, 13vw, 174px); translate: -50% -50%; }
/* Die gesamte Originalfläche einschließlich des transparenten N bleibt partikel-frei. */
.molekuel-logo { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; display: block; width: 36%; height: auto; aspect-ratio: 226 / 286; background: #000; border-radius: 15.5% / 12.25%; pointer-events: none; }
.molekuel-marke { position: absolute; z-index: 4; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: inherit; color: #e9e8e6; text-decoration: none; }
.molekuel-haupt > .molekuel-marke { font-size: 0; }
.molekuel-marke:focus-visible { outline: 2px solid var(--markenfarbe); outline-offset: 6px; }
.molekuel-haupt:has(a:hover)::after, .molekuel-haupt:has(a:focus-visible)::after { visibility: visible; opacity: .6; }
.molekuel-zweige { list-style: none; margin: 0; padding: 0; }
.molekuel-zweig { position: absolute; left: 0; width: 100%; height: 0; }
.molekuel-zweig:nth-child(1) { top: 44px; }
.molekuel-zweig:nth-child(2) { top: 128px; }
.molekuel-zweig:nth-child(3) { top: 402px; }
.molekuel-atom { width: 36px; height: 36px; left: 18%; top: 0; translate: -50% -50%; }
.molekuel-zweig:nth-child(2) .molekuel-atom { left: 82%; }
.molekuel-zweig:nth-child(3) .molekuel-atom { left: 50%; }
.molekuel-atom::before { background: radial-gradient(circle at 28% 23%, #fff2db 0%, var(--markenfarbe) 25%, #564831 65%, #15130f 100%); box-shadow: inset -2px -3px 4px #2a160780; }
.molekuel-text { position: absolute; z-index: 2; bottom: 35px; left: 0; width: 100%; text-align: center; color: #e9e8e6; font: 500 clamp(13px, 1.25vw, 18px)/1.4 var(--kopf); letter-spacing: -.035em; white-space: nowrap; overflow-wrap: normal; word-break: normal; hyphens: none; }
.molekuel-zweig:nth-child(3) .molekuel-text { top: 34px; bottom: auto; }
.molekuel-fuss { position: relative; z-index: 2; margin-top: 32px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--markenfarbe) 35%, transparent); }
.molekuel-website { position: relative; inset: auto; justify-content: space-between; width: fit-content; min-height: 44px; margin: 0; padding: 0 0 4px; border-radius: 0; font: 500 14px/1.4 var(--sans); color: #e9e8e6; transition: color .2s; }
.molekuel-website:hover { color: var(--markenfarbe); }
/* WebGL ersetzt ausschließlich die gemalten Kugeln. Logo und Links bleiben darüber. */
.molekuel--webgl .molekuel-kugel::before, .molekuel--webgl .molekuel-kugel::after { visibility: hidden; }
@media (max-width: 900px) {
  .leistungen { padding-block: 28px 58px; }
  .leistungen h2 { font-size: clamp(32px, 5vw, 46px); }
  .molekuel-netz { max-width: 520px; margin: 40px auto 0; }
  .molekuel-buehne { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-left: 24px; }
  .molekuel-domain { font-size: clamp(20px, 4.5vw, 26px); }
  .molekuel-haupt { width: 156px; height: 156px; }
  .molekuel-text { font-size: clamp(13px, 3.5vw, 18px); }
}
@media (max-width: 640px) {
  .leistungen { padding-block: 22px 38px; }
  .leistungen-etikett { font-size: 9px; letter-spacing: .12em; margin-bottom: 12px; }
  .leistungen h2 { font-size: clamp(30px, 7.5vw, 42px); }
  .leistungen-einordnung { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .leistungen-projekt span, .molekuel-kanten .molekuel-bindung, .molekuel-website { transition: none; }
  .molekuel-kanten .molekuel-impuls.ist-impuls { animation: none; }
}

/* Nur geometrischer Anker der gemeinsamen Leinwand; kein zusätzliches Mini-Logo im Netz. */
.leistungen .leistungen-logo { position: absolute; top: 0; right: 0; width: 1px; height: 1px; flex-basis: 1px; margin: 0; opacity: 0; }