/* Engineering Büro: alles, was ueber den Baukasten (stil.css) hinausgeht.
   Wird NACH stil.css geladen. stil.css selbst bleibt die Baukasten-Fassung,
   dort sind nur :root und die Schriften angepasst.
   Leitgedanke der Gestaltung: die Seite sieht aus wie ein sauberer Plan.
   Weiss, feine graue Linien, das Orange aus dem Logo als einziger Akzent,
   dazu die abgeschraegte Ecke, die der Kunde auf seiner alten Seite an
   Kaesten und Knoepfen benutzt. */

:root{
  --nb-orange:#efac28;
  --nb-orange-tief:#d9960f;
  --nb-grau:#706f6f;
  --nb-grau-hell:#b2b2b2;
  --nb-ecke:22px;               /* abgeschraegte Ecke unten rechts */
}

/* Ueberschriften in der Hausschrift Roboto Slab, leicht wie auf der alten Seite */
h1,h2,h3,h4{font-family:"Roboto Slab",Georgia,serif;font-weight:400;color:var(--tinte);letter-spacing:-.005em}
h1{font-weight:400;font-size:clamp(31px,4.3vw,50px);line-height:1.14}
h2{font-size:clamp(25px,3.1vw,34px)}
h3{font-weight:500}
.abschnitt{padding:84px 0}
@media (max-width:700px){.abschnitt{padding:60px 0}}
h2.mittig{margin-bottom:12px}
h2.mittig::after{content:"";display:block;width:56px;height:3px;background:var(--nb-orange);margin:16px auto 0}

/* Orange ist hell: Schrift darauf ist dunkel, nie weiss (Kontrast 5,5:1
   statt 2:1). Schrift IN Orange auf Weiss nimmt die dunkle Fassung. */
.knopf{color:#33312f;border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.knopf:hover{background:var(--nb-orange-tief);border-color:var(--nb-orange-tief);color:#262423}
.knopf-umriss{color:var(--tinte);border-color:var(--nb-grau);clip-path:none}
.knopf-umriss:hover{background:var(--nb-grau);border-color:var(--nb-grau);color:#fff}
.knopf-weiss{color:var(--tinte)}
.knopf-weiss:hover{background:var(--nb-orange);border-color:var(--nb-orange);color:#33312f}
.knopf-umriss-weiss{clip-path:none}
.knopf-umriss-weiss:hover{color:var(--tinte)}
.vorzeile,.weiter{color:var(--waerme-tief)}
.hauptmenue a:not(.knopf):hover{color:var(--waerme-tief)}
.schritt-zahl{background:var(--nb-grau);color:#fff}
.ablauf-nb{--glut-a:#f6c763;--glut-b:#d18f0c}
.schritte.nb-drei{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.schritte.nb-drei{grid-template-columns:1fr}
  .ablauf.nb-drei .schritt::before,.ablauf.nb-drei .schritt::after{display:block;top:auto;bottom:-20px;
    left:50%;right:auto;width:3px;height:20px;margin-top:0;margin-left:-1.5px}
  .ablauf.nb-drei .schritt::after{background-image:linear-gradient(180deg in oklab,var(--glut-a),var(--glut-b));
    transform:scaleY(0);transform-origin:top center}
  .laeuft.nb-drei .schritt::after{animation-name:strecke-fuellen-hoch}
  html:not(.js) .ablauf.nb-drei .schritt::after{transform:scaleY(1)}
  .ablauf.nb-drei .schritt:last-child::before,.ablauf.nb-drei .schritt:last-child::after{display:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){.ablauf.nb-drei .schritt::after{transform:scaleY(1)}}
.karte-kopf h3{min-height:50px}

/* Kopfzeile: das Logo ist fast quadratisch */
.kopf-innen{min-height:84px}
.marke img{width:auto;height:60px}
.hauptmenue{font-weight:600;gap:24px}
.fuss-logo{width:150px;height:auto}
.kachel:hover{box-shadow:0 10px 28px rgba(var(--schatten),.16)}

/* Dunkle Flaechen tragen das Grau aus dem Logo, mit Kante in Orange */
.abschnitt-akzent{background:var(--nb-grau);border-top:5px solid var(--nb-orange)}
.abschnitt-akzent .breit-text{color:#f4f3f3}
.fusszeile{background:#676666}
.fuss-sozial{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px}
.fuss-sozial a{font-weight:600}

/* Erreichbarkeits-Band: hell in der Firmenfarbe */
.band{background:var(--akzent-blass);color:var(--tinte);padding:20px 0;border-top:1px solid #f3e2bd;border-bottom:1px solid #f3e2bd}
.band a{color:var(--tinte)}
.band a:hover{color:var(--waerme-tief)}
.band .ico{color:var(--nb-orange-tief)}

/* ================================================================
   Kopf der Startseite: Text links, 3D-Modell rechts
   ================================================================ */
.nb-held{position:relative;padding:44px 0 56px;background-color:#fff;overflow:hidden}
.nb-held>.innen{max-width:1320px}
.nb-held-raster{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:36px;align-items:center}
.nb-held-text{position:relative;z-index:2}
.nb-held-text p:not(.vorzeile){font-size:18px;color:var(--nebentext);max-width:560px}
.nb-held-text h1{margin-bottom:20px}

.nb-modell{position:relative;min-width:0}
.nb-modell-flaeche{position:relative;aspect-ratio:10/9;width:100%;overflow:hidden}
.nb-modell-flaeche canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  touch-action:pan-y;cursor:grab;opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
.nb-modell-flaeche canvas:active{cursor:grabbing}
.modell-laeuft .nb-modell-flaeche canvas{opacity:1}
/* Das Standbild steht, solange das Modell nicht laeuft: ohne JavaScript und
   ohne WebGL. Mit JavaScript bleibt es unsichtbar, sonst blitzt vor dem
   Zeichnen das fertige Bild auf. */
.nb-modell-standbild{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
html.js .nb-modell-standbild{opacity:0}
html.js .modell-ohne-webgl .nb-modell-standbild{opacity:1}

/* Beschriftungen am Modell, wie Positionsnummern auf einem Plan. Das Skript
   setzt die Lage per transform, die Schilder selbst haengen oben links. */
.nb-schild{position:absolute;left:0;top:0;pointer-events:none;white-space:nowrap;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--nb-grau);
  opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
.nb-schild-geschoss{margin:-7px 0 0 -58px;width:50px;text-align:right}
.nb-schild-technik{margin:-34px 0 0 10px;background:#fff;border:1px solid var(--linie-kraeftig);padding:3px 8px;
  color:var(--tinte);letter-spacing:.03em;text-transform:none;font-size:12px}
.nb-schild-technik i{position:absolute;left:-11px;bottom:-11px;width:12px;height:12px;
  border-left:1px solid var(--nb-grau);border-bottom:1px solid var(--nb-grau);transform:skewX(-35deg);transform-origin:bottom left}
.modell-fertig[data-ansicht="explosion"] .nb-schild,
.modell-fertig[data-ansicht="iso"] .nb-schild-geschoss{opacity:1}
.nb-modell.gedreht .nb-schild-technik{opacity:0}

.nb-modell-kopf{position:absolute;left:0;top:0;right:0;display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin:0;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--nb-grau);pointer-events:none}
.nb-ansichtsname{border-left:3px solid var(--nb-orange);padding-left:10px}
.nb-dreh-hinweis{display:inline-flex;align-items:center;gap:7px;letter-spacing:.04em;text-transform:none;font-weight:400;
  opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
.modell-fertig .nb-dreh-hinweis{opacity:1}
.nb-modell.gedreht .nb-dreh-hinweis{opacity:0}

/* Bildunterschrift zum Ablauf (was waechst gerade ins Haus). Steht nur,
   solange der Auftritt laeuft; danach uebernehmen die Schilder am Modell. */
.nb-schritt{position:absolute;left:0;bottom:6px;max-width:min(100%,430px);display:flex;flex-direction:column;gap:2px;
  background:#fff;border:1px solid var(--linie-kraeftig);border-left:4px solid var(--gw,var(--nb-grau));padding:8px 12px;
  font-size:13px;line-height:1.35;color:var(--nebentext);pointer-events:none;opacity:0;visibility:hidden;
  transition:opacity var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.nb-schritt b{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--tinte);font-variant-numeric:tabular-nums}
.modell-laeuft:not(.modell-fertig) .nb-schritt[data-gewerk]{opacity:1;visibility:visible}
.nb-schritt[data-gewerk="lueftung"]{--gw:#efac28}
.nb-schritt[data-gewerk="heizung"]{--gw:#d9694f}
.nb-schritt[data-gewerk="kaelte"]{--gw:#5b9fd0}
.nb-schritt[data-gewerk="sanitaer"]{--gw:#76b285}

.nb-modell-leiste{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 18px;margin-top:8px}
.nb-ansichten,.nb-gewerke{display:flex;flex-wrap:wrap;gap:0}
.nb-modell-leiste button{font:inherit;font-size:13.5px;font-weight:600;line-height:1;color:var(--tinte);background:#fff;
  border:1px solid var(--linie-kraeftig);padding:10px 14px;cursor:pointer;margin-left:-1px;
  transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.nb-modell-leiste button:first-child{margin-left:0}
.nb-modell-leiste button:hover{background:var(--grau)}
.nb-ansichten button[aria-pressed="true"]{background:var(--nb-grau);border-color:var(--nb-grau);color:#fff;position:relative;z-index:1}
.nb-gewerk{display:inline-flex;align-items:center;gap:8px}
.nb-gewerk i{width:11px;height:11px;border-radius:50%;background:var(--gw);box-shadow:inset 0 0 0 1px var(--gw-kante);flex:none}
.nb-gewerk[aria-pressed="false"]{color:#8d8c8c}
.nb-gewerk[aria-pressed="false"] i{background:#fff;box-shadow:inset 0 0 0 1.5px #b2b2b2}
.nb-gewerk-lueftung{--gw:#efac28;--gw-kante:#a9700a}
.nb-gewerk-heizung{--gw:#d9694f;--gw-kante:#9c3d28}
.nb-gewerk-kaelte{--gw:#5b9fd0;--gw-kante:#2f6c99}
.nb-gewerk-sanitaer{--gw:#76b285;--gw-kante:#3f7a4f}
.nb-plankopf{margin:12px 0 0;font-size:13px;color:var(--nebentext);border-top:1px solid var(--linie);padding-top:10px}

/* Kennzahlen: gehoeren zum Kopf (selber Abschnitt, 40 Pixel darunter) */
.nb-kennzahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;border:1px solid var(--linie-kraeftig);background:#fff}
.nb-kennzahl{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:24px 14px 22px;
  border-left:1px solid var(--linie)}
.nb-kennzahl:first-child{border-left:0}
.nb-kennzahl-wert{font-family:"Roboto Slab",Georgia,serif;font-size:clamp(24px,2.6vw,34px);font-weight:400;line-height:1.2;color:var(--tinte);
  font-variant-numeric:tabular-nums;white-space:nowrap;border-bottom:3px solid var(--nb-orange);padding-bottom:8px;margin-bottom:10px}
.nb-zaehl{display:inline-block;text-align:right;font-variant-numeric:tabular-nums}
.nb-kennzahl-wert{position:relative}
.nb-vorzeichen{position:absolute;right:100%;margin-right:.28em}
.nb-kennzahl-text{font-size:14.5px;color:var(--nebentext);line-height:1.4}

/* ================================================================
   Zeichnungen in den Leistungs-Kacheln
   ================================================================ */
.zeichnung{display:block;width:100%;height:100%}
.z-papier{fill:#fafafa}
.z-gitter{fill:none;stroke:#ecebeb;stroke-width:1}
.zl{fill:none;stroke:var(--nb-grau);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zl-fein{stroke:#a3a2a2;stroke-width:1.5}
.zl-raster{stroke:#dcdada;stroke-width:1}
.zl-strich{stroke:#8f8e8e}
.zl-akzent{stroke:var(--nb-orange-tief);stroke-width:2.4}
.zl-dick{stroke-width:4}
.zl-ring{stroke:var(--nb-orange-tief);stroke-width:2}
.zl-weiss{stroke:#fff;stroke-width:3.4}
.zf{fill:var(--nb-orange)}
.zf-hell{fill:#fbe3ae}
.zf-grau{fill:#e3e2e2}
/* Die Linien zeichnen sich, sobald die Kachel ins Bild kommt. Nur mit
   JavaScript und ohne "Bewegung reduzieren" (Klasse .anim vom Einblender). */
.anim .kachel .zl{stroke-dasharray:1;stroke-dashoffset:1}
.anim .kachel .zf{opacity:0}
.anim .kachel.sichtbar .zl{animation:nb-zeichnen calc(var(--dur-takt) * 1.5) var(--ease-in-out) forwards}
.anim .kachel.sichtbar .zl-akzent,.anim .kachel.sichtbar .zl-ring{animation-duration:calc(var(--dur-takt) * 2.1)}
.anim .kachel.sichtbar .zf{animation:nb-fuellen var(--dur-3) var(--ease-out) forwards;animation-delay:calc(var(--dur-takt) * 1.2)}
@keyframes nb-zeichnen{to{stroke-dashoffset:0}}
@keyframes nb-fuellen{to{opacity:1}}
.kachel-bildrahmen{border-bottom:1px solid var(--linie)}
.kachel{border-radius:0;border-color:var(--linie-kraeftig)}
.kachel-bildrahmen{border-radius:0}
.kachel-still:hover{border-color:var(--linie-kraeftig)}
.staerke,.schritt{border-radius:0;border-color:var(--linie-kraeftig)}

/* Lebendiges Schema: die Medien fliessen, sobald alles gezeichnet ist.
   Nur mit Bewegung; ohne bleibt die ruhige Zeichnung. */
.zfluss{display:none;fill:none;stroke:var(--nb-orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:3 11}
.zfluss-rueck{stroke:#8fb9d8}
.anim .kachel .zfluss{display:block;opacity:0}
.anim .kachel.sichtbar .zfluss{animation:nb-fuellen var(--dur-3) var(--ease-out) calc(var(--dur-takt) * 2.4) forwards,
  nb-stroemen calc(var(--dur-takt) * .9) linear infinite}
@keyframes nb-stroemen{to{stroke-dashoffset:-14}}

/* Generalplaner-Kasten unter den Kacheln */
.nb-gp{margin:28px auto 0;max-width:1060px;background:#fff;border:1px solid var(--linie-kraeftig);border-left:5px solid var(--nb-orange);
  padding:24px 30px 22px}
.nb-gp p{margin:0;color:var(--nebentext)}
.nb-gp .ico{color:var(--nb-orange-tief)}

/* Kompetenzen: zwei Kaesten nebeneinander, gleich hoch */
.nb-zweikasten{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin-top:36px}
.nb-kasten{background:var(--grau);border:1px solid var(--linie-kraeftig);padding:28px 30px;display:flex;flex-direction:column}
.nb-kasten .ico{color:var(--nb-orange-tief)}
.nb-umfeld{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;flex:1}
.nb-umfeld li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--linie-kraeftig);padding:14px 16px;font-weight:600;font-size:15.5px;line-height:1.3}
.nb-umfeld .ico{color:var(--nb-grau)}
.nb-kern{margin-top:10px}
.hakenliste .ico{color:var(--nb-orange-tief)}

/* ================================================================
   Reinraum im Schnitt (Druckkaskade)
   ================================================================ */
.nb-reinraum{margin-top:24px;background:#fff;border:1px solid var(--linie-kraeftig);border-left:5px solid var(--nb-orange);padding:28px 30px 26px}
.nb-reinraum .karte-kopf .ico{color:var(--nb-orange-tief)}
.rr-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:34px;align-items:stretch;margin-top:6px}
.rr-text{display:flex;flex-direction:column;align-items:flex-start}
.rr-text p{color:var(--nebentext);margin-bottom:14px}
.rr-status{min-height:7.9em;font-size:15px;border-left:3px solid var(--nb-orange);padding-left:12px;color:var(--tinte) !important}
.rr-knopf{margin-top:auto;font-family:inherit;cursor:pointer;background-color:#fff}
html:not(.js) .rr-knopf{display:none}
.rr-legende{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:18px 0 0;padding:0;font-size:13.5px;color:var(--nebentext)}
.rr-legende li{display:inline-flex;align-items:center;gap:7px}
.rr-legende i{display:block;width:18px;height:0;border-top:3px dashed var(--nb-orange-tief)}
.rr-legende .rr-l-ab{border-top-color:var(--nb-grau)}
.rr-legende .rr-l-p{width:7px;height:7px;border:0;border-radius:50%;background:#8d8c8c}
.rr-bild{display:flex;flex-direction:column;min-width:0}
.rr-flaeche{position:relative;border:1px solid var(--linie-kraeftig);aspect-ratio:760/460;overflow:hidden;background:#fafafa}
.rr-zeichnung{position:absolute;inset:0}
.rr-bild .nb-plankopf{border-top:0;padding-top:0}
.rr-schnitt{fill:url(#rr-schraff)}
.rr-filter{fill:url(#rr-schraff)}
.rr-tuer{fill:#8d8c8c;stroke:var(--nb-grau);stroke-width:1.5;transform-box:fill-box;transform-origin:50% 0;
  transition:transform var(--dur-3) var(--ease-in-out),opacity var(--dur-3) var(--ease-in-out)}
.tuer-offen .rr-tuer-innen{transform:scaleY(.06);opacity:.55}
.rr-partikel{fill:#8d8c8c}
.rr-partikel-schleuse{transition:transform calc(var(--dur-takt) * 1.4) var(--ease-out),opacity calc(var(--dur-takt) * 1.4) var(--ease-out)}
.tuer-offen .rr-partikel-schleuse{transform:translateX(-14px);opacity:.35}
.rr-fluss{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:5 9}
.rr-fluss-zu,.rr-fluss-ueber,.rr-fluss-offen{stroke:var(--nb-orange-tief)}
.rr-fluss-ab{stroke:var(--nb-grau)}
.rr-fluss-offen{stroke-width:3;opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
.nb-reinraum.tuer-offen .rr-fluss-offen{opacity:1}
.rr-schloss{opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.tuer-offen .rr-schloss{opacity:1}
.rr-schloss circle{fill:#fff;stroke:var(--nb-grau);stroke-width:1.5}
.rr-schloss rect{fill:var(--nb-grau)}
.rr-schloss path{fill:none;stroke:var(--nb-grau);stroke-width:2}
/* Beschriftungen: HTML ueber der Zeichnung, damit sie am Handy lesbar bleiben */
.rr-schild{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;
  font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--nb-grau);background:#fafafa;padding:1px 6px;line-height:1.3}
.rr-hoch{writing-mode:vertical-rl;padding:6px 1px}
.rr-raum{display:flex;flex-direction:column;align-items:center;gap:1px;background:#fff;border:1px solid var(--linie-kraeftig);padding:5px 10px 6px}
.rr-raum b{font-family:"Roboto Slab",Georgia,serif;font-weight:500;font-size:14px;letter-spacing:0;color:var(--tinte)}
.rr-pa{font-style:normal;font-size:13px;font-variant-numeric:tabular-nums;color:var(--waerme-tief);transition:opacity var(--dur-2) var(--ease-out)}
.tuer-offen .rr-raum-schleuse .rr-pa{opacity:.25}
/* Auftritt: erst zeichnet sich der Schnitt, dann beginnt die Luft zu stroemen */
.anim .nb-reinraum .zl{stroke-dasharray:1;stroke-dashoffset:1}
.anim .nb-reinraum .zf,.anim .nb-reinraum .rr-schnitt,.anim .nb-reinraum .rr-filter,.anim .nb-reinraum .rr-tuer,
.anim .nb-reinraum .rr-partikel,.anim .nb-reinraum .rr-schild,.anim .nb-reinraum .rr-fluss:not(.rr-fluss-offen){opacity:0}
.anim .nb-reinraum.sichtbar .zl{animation:nb-zeichnen calc(var(--dur-takt) * 1.6) var(--ease-in-out) forwards}
.anim .nb-reinraum.sichtbar .zf,.anim .nb-reinraum.sichtbar .rr-schnitt,.anim .nb-reinraum.sichtbar .rr-filter,
.anim .nb-reinraum.sichtbar .rr-tuer,.anim .nb-reinraum.sichtbar .rr-schild{animation:nb-fuellen var(--dur-3) var(--ease-out) calc(var(--dur-takt) * 1.2) backwards;opacity:1}
.anim .nb-reinraum.sichtbar.tuer-offen .rr-tuer-innen{opacity:.55}
.anim .nb-reinraum.sichtbar.tuer-offen .rr-raum-schleuse .rr-pa{opacity:.25}
.anim .nb-reinraum.sichtbar .rr-partikel{animation:nb-fuellen var(--dur-3) var(--ease-out) calc(var(--dur-takt) * 1.5) forwards,
  rr-schweben calc(var(--dur-takt) * (5 + var(--i))) var(--ease-in-out) calc(var(--dur-takt) * var(--i) * -1) infinite alternate}
.anim .nb-reinraum.sichtbar .rr-fluss:not(.rr-fluss-offen){animation:nb-fuellen var(--dur-3) var(--ease-out) calc(var(--dur-takt) * 1.8) forwards,
  nb-stroemen calc(var(--dur-takt) * .8) linear infinite}
.anim .nb-reinraum.sichtbar .rr-fluss-offen{animation:nb-stroemen calc(var(--dur-takt) * .45) linear infinite}
@keyframes rr-schweben{to{translate:5px -7px}}
@media (max-width:900px){
  .rr-raster{grid-template-columns:1fr;gap:20px}
  .rr-bild{order:-1}
  /* Handy: Zeichnung, dann gleich Zustand und Knopf, die Erklaerung danach */
  .rr-status{min-height:6.4em;order:1}
  .rr-knopf{margin-top:0;margin-bottom:20px;order:2}
  .rr-text p:not(.rr-status){order:3}
  .rr-legende{order:4;margin-top:4px}
}
@media (max-width:600px){
  .nb-reinraum{padding:22px 16px 20px}
  .rr-neben,.rr-duenn,.rr-mensch{display:none}
  .rr-flaeche{margin:0 -8px}
  .rr-fluss{stroke-width:3;stroke-dasharray:6 10}
  .rr-partikel{r:3.4px}
  .rr-status{min-height:8em}
  .rr-schild{font-size:10.5px}
  .rr-raum{padding:3px 5px 4px}
  .rr-raum b{font-size:11.5px}
  .rr-pa{font-size:11px}
}

/* Referenzen: 3 x 3 */
.nb-referenzen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;align-items:stretch}
.nb-referenz{background:#fff;border:1px solid var(--linie-kraeftig);display:flex;flex-direction:column;padding:0 0 18px}
.nb-referenz-bild{display:block;aspect-ratio:3/2;overflow:hidden;border-bottom:1px solid var(--linie);background:#fafafa}
.nb-referenz-bild img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease-out)}
.nb-referenz:hover .nb-referenz-bild img{transform:scale(1.04)}
.nb-referenz h3{font-size:18px;margin:20px 20px 6px;min-height:44px;display:flex;align-items:flex-start}
.nb-referenz p{margin:0 20px;color:var(--nebentext);font-size:15px}

/* Kundenband auf Weiss */
.nb-kunden{padding:64px 0}
.nb-kunden .marken-band::before{background:linear-gradient(to right in oklab,#fff,rgba(255,255,255,0))}
.nb-kunden .marken-band::after{background:linear-gradient(to left in oklab,#fff,rgba(255,255,255,0))}
.nb-kunden .marken-lauf{animation-duration:calc(var(--dur-takt) * 46)}

/* Ueber uns */
.nb-ueber{display:grid;grid-template-columns:1fr 1.08fr;gap:44px;align-items:stretch}
.nb-ueber-text{display:flex;flex-direction:column;justify-content:center}
.nb-ueber-text .hakenliste{margin-top:6px}
.nb-ueber-bild{position:relative;min-height:320px;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)}
.nb-ueber-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nb-personen{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;align-items:stretch}
.nb-person{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:start;background:var(--grau);border:1px solid var(--linie-kraeftig);padding:20px}
.nb-person img{width:150px;height:150px;object-fit:cover}
.nb-person h3{margin-bottom:2px}
.nb-person-rolle{font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--waerme-tief);margin-bottom:8px}
.nb-person-text p{font-size:15px;color:var(--nebentext);margin-bottom:8px}
.nb-person-text a{font-weight:600;font-size:15px;color:var(--tinte)}
.nb-zitat{margin:44px auto 0;max-width:820px;text-align:center;border-top:1px solid var(--linie);padding-top:34px}
.nb-zitat p{font-family:"Roboto Slab",Georgia,serif;font-weight:300;font-size:clamp(20px,2.3vw,26px);line-height:1.5;color:var(--tinte);margin-bottom:10px}
.nb-zitat cite{font-style:normal;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--waerme-tief)}

/* Partnerschaft */
.nb-partner{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.nb-partner-bild{background:#fff;border:1px solid #ecd9ac;padding:10px}
.nb-partner-bild img{width:100%;height:auto}
.nb-partner-text p{color:var(--nebentext)}

/* Offene Stellen: 3 x 2 */
.nb-stellen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px;align-items:stretch}
.nb-stelle{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-decoration:none;
  background:#fff;border:1px solid var(--linie-kraeftig);border-left:4px solid var(--nb-orange);padding:18px 18px 16px 20px;
  transition:background var(--dur-1),transform var(--dur-1)}
.nb-stelle:hover{background:var(--akzent-blass);transform:translateY(-2px)}
.nb-stelle-titel{font-family:"Roboto Slab",Georgia,serif;font-weight:500;font-size:17px;line-height:1.3;min-height:45px;display:flex;align-items:center}
.nb-stelle-zusatz{grid-column:1;font-size:14px;color:var(--nebentext)}
.nb-stelle .ico{grid-column:2;grid-row:1 / span 2;color:var(--nb-orange-tief)}

.formular-kasten,.formular-bildrahmen{border-radius:0}
.kartenfeld{border-radius:0;border:1px solid var(--linie-kraeftig)}
.formular-kasten input,.formular-kasten select,.formular-kasten textarea{border-radius:0}

/* ================================================================
   Schmalere Bildschirme
   ================================================================ */
@media (max-width:1100px){
  .hauptmenue{gap:16px;font-size:15px}
  .nb-held-raster{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px}
  .nb-schild-technik{display:none}
}
@media (max-width:900px){
  .nb-held{padding:28px 0 44px}
  .nb-held-raster{grid-template-columns:1fr;gap:26px}
  .nb-modell-flaeche{aspect-ratio:1/1}
  .nb-stellen{grid-template-columns:1fr 1fr}
  .nb-referenzen{gap:16px}
  .nb-referenz h3{font-size:16px;margin:18px 14px 6px;min-height:62px}
  .nb-referenz p{margin:0 14px;font-size:14px}
  .nb-ueber,.nb-partner{grid-template-columns:1fr;gap:28px}
  .nb-ueber-bild{aspect-ratio:3/2;min-height:0}
  .nb-personen{grid-template-columns:1fr}
}
@media (max-width:700px){
  .nb-kennzahlen{grid-template-columns:1fr 1fr}
  .nb-kennzahl:nth-child(3){border-left:0}
  .nb-kennzahl:nth-child(n+3){border-top:1px solid var(--linie)}
  .nb-zweikasten{grid-template-columns:1fr}
  .nb-modell-leiste{justify-content:flex-start}
  .nb-modell-leiste button{padding:10px 11px;font-size:13px}
  .nb-dreh-hinweis{font-size:11.5px}
  .nb-schild-geschoss{margin-left:-46px;width:40px;font-size:10px}
}
@media (max-width:700px){
  .nb-referenzen{grid-template-columns:1fr;gap:20px}
  .nb-referenz h3{min-height:0;font-size:18px}
}
@media (max-width:600px){
  .nb-stellen{grid-template-columns:1fr}
  .nb-stelle-titel{min-height:0}
  .nb-person{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px}
  .nb-person img{width:96px;height:96px}
  .nb-kasten{padding:22px 18px}
  .nb-umfeld{grid-template-columns:1fr}
  .nb-gp{padding:20px 20px 22px}
}
@media (max-width:420px){
  .rr-raum{padding:2px 2px 3px;gap:0}
  .rr-raum b{font-size:9.5px}
  .rr-pa{font-size:9.5px}
}
@media (max-width:380px){
  .nb-ansichten button{padding:10px 8px;font-size:12.5px}
  .nb-gewerk{padding:10px 8px !important;font-size:12.5px !important;gap:6px}
}

/* Fusszeile und Schlussaufruf: helle Schrift mit genug Kontrast auf dem Grau */
.fusszeile{background:#5f5e5e}
.fusszeile h3,.fusszeile h3 *{color:#fff}
.fusszeile p,.fusszeile a,.fuss-unten,.fuss-hinweis{color:#f0efef}
.abschnitt-akzent{background:#676666}
.abschnitt-akzent h2{color:#fff}
.knopf-umriss-weiss{color:#fff}

/* Handy: das Modell rueckt direkt unter die Ueberschrift, vor den Fliesstext.
   Der Wow-Effekt gehoert in den ersten Bildschirm, nicht dahinter. */
@media (max-width:900px){
  .nb-held-raster{gap:16px}
  .nb-held-text{display:contents}
  .nb-held-text .vorzeile{order:1;margin-bottom:0}
  .nb-held-text h1{order:2;margin-bottom:0}
  .nb-modell{order:3}
  .nb-held-text p:not(.vorzeile){order:4;margin-bottom:0}
  .nb-held-text .knopfreihe{order:5;margin-top:6px}
}

@media (max-width:420px){
  .nb-person{grid-template-columns:minmax(0,1fr);gap:18px}
  .nb-person img{width:120px;height:120px}
}

/* ================================================================
   Referenzseiten (17.09.2026): Uebersicht und eine Seite je Projekt
   ================================================================ */
a.nb-referenz{color:inherit;text-decoration:none}
a.nb-referenz:hover{border-color:var(--nb-orange-tief)}
.nb-referenz .weiter{margin:14px 20px 0;padding-top:0;font-size:14.5px}
.nb-referenz p{margin-bottom:0}
.nb-ref-liste .nb-referenzen{margin-top:0}
.nb-ref-kopf .bildrahmen{border-radius:0;border:1px solid var(--linie-kraeftig);background:#fafafa;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--nb-ecke)),calc(100% - var(--nb-ecke)) 100%,0 100%)}
.nb-ref-kopf .bildrahmen img{position:absolute;inset:0}
.nb-ref-kopf h1{font-size:clamp(28px,3.4vw,42px)}
.nb-ref-daten{margin:6px 0 22px;border-top:1px solid var(--linie-kraeftig)}
.nb-ref-daten>div{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--linie)}
.nb-ref-daten dt{font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--nebentext);padding-top:2px}
.nb-ref-daten dd{margin:0;font-variant-numeric:tabular-nums}
.nb-kennzahlen-drei{grid-template-columns:repeat(3,1fr)}
.nb-ref-kasten{background:#fff;border:1px solid var(--linie-kraeftig);padding:28px 30px 24px;display:flex;flex-direction:column}
.nb-ref-kasten .karte-kopf h2{font-size:24px;margin:0}
.nb-ref-kasten .karte-kopf .ico{color:var(--nb-orange-tief)}
.zweispalter-breit:has(>.nb-ref-kasten){grid-template-columns:1fr 1fr;gap:24px}
.nb-ref-merkmale{text-align:center;color:var(--nebentext);max-width:820px;margin:0 auto}
.nb-ref-fakten{display:grid;gap:24px;margin-top:36px;align-items:stretch}
.nb-ref-fakten-1{grid-template-columns:1fr;max-width:860px;margin-left:auto;margin-right:auto}
.nb-ref-fakten-2{grid-template-columns:1fr 1fr}
.nb-ref-fakten-3{grid-template-columns:repeat(3,1fr)}
.nb-ref-fakt{background:#fff;border:1px solid var(--linie-kraeftig);border-top:3px solid var(--nb-orange);padding:22px 26px 24px}
.nb-ref-fakt .karte-kopf .ico{color:var(--nb-orange-tief)}
.nb-ref-fakt ul{list-style:none;margin:0;padding:0}
.nb-ref-fakt li{position:relative;padding:9px 0 9px 20px;border-bottom:1px solid var(--linie);font-size:15.5px;font-variant-numeric:tabular-nums}
.nb-ref-fakt li:last-child{border-bottom:0}
.nb-ref-fakt li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;background:var(--nb-orange)}
.nb-ref-fakten-1 ul{columns:2;column-gap:40px}
.nb-ref-fakten-1 li{break-inside:avoid}
.nb-ref-alle{margin-top:32px}
@media (max-width:1000px){
  .nb-ref-fakten-3{grid-template-columns:1fr}
}
@media (max-width:900px){
  .zweispalter-breit:has(>.nb-ref-kasten){grid-template-columns:1fr}
  .nb-ref-fakten-2{grid-template-columns:1fr}
  .nb-ref-fakten-1 ul{columns:1}
  .nb-ref-kopf .bildrahmen{aspect-ratio:3/2}
}
@media (max-width:700px){
  .nb-ref-daten>div{grid-template-columns:1fr;gap:2px}
  .nb-kennzahlen-drei{grid-template-columns:1fr}
  .nb-kennzahlen-drei .nb-kennzahl{border-left:0;border-top:1px solid var(--linie)}
  .nb-kennzahlen-drei .nb-kennzahl:first-child{border-top:0}
  .nb-ref-kasten{padding:22px 20px 18px}
  .nb-ref-fakt{padding:18px 18px 20px}
}
@media (max-width:360px){
  .nb-ref-kasten{padding:20px 14px 16px}
  .nb-ref-fakt{padding:16px 14px 18px}
  .nb-ref-kasten .hakenliste li{gap:8px;font-size:15px}
  .nb-ref-fakt li{font-size:15px;padding-left:16px}
}