/* IBG Tag und Nacht (Variante D) – helle Flächen, Wechsel, Kopf.
   Grundlage ist nachtlicht.css (Variante B, dunkel). Diese Datei legt darüber:
   1 Flächen-Tokens: hell (aus „Präzision“: #fff, #f5f5f7, #1d1d1f, Grautreppe, Haarlinien, Orange nur als Akzent) und dunkel.
   2 Welche Abschnitte hell oder dunkel sind. Regel: dunkel, wo Bilder tragen, hell, wo Text trägt. Wechsel nur als ganze
     Fläche über die volle Breite, als harte Kante, an Sinngrenzen.
   3 Bausteine über Variablen, damit eine dunkle Fläche in einer hellen (und umgekehrt) von selbst stimmt.
   4 Kopf, der der Fläche darunter folgt. 5 Bewegung: Licht auf dunklen Flächen (B), Feder auf hellen (A). */

/* ═════════════ 1 Tokens ═════════════ */
:root {
  --tag: #fff; --tag-nebel: #f5f5f7; --tag-tinte: #1d1d1f; --tag-tinte-2: #424245; --tag-grau: #6e6e73; --tag-blass: #86868b;
  --tag-linie: #d2d2d7; --tag-linie-2: #e8e8ed;
  --akzent: #d35615; --akzent-text: #c24a10; --akzent-tief: #a93f0c; --fehler-tag: #b3261e;
  /* Feder aus „Präzision“: gedämpfte Schwingung */
  --feder: linear(0, 0.0567, 0.1899, 0.3556, 0.5237, 0.6756, 0.8019, 0.8993, 0.969, 1.0146, 1.0407, 1.0524, 1.0539, 1.0492, 1.0412, 1.0321, 1.0231, 1.0153, 1.0089, 1.0041, 1.0008, 0.9987, 0.9975, 0.9971, 0.9971, 0.9975, 0.9979, 0.9984, 0.9989, 0.9993, 1);
  --feder-sanft: linear(0, 0.0534, 0.1757, 0.3248, 0.4744, 0.6097, 0.7238, 0.8149, 0.8841, 0.9343, 0.969, 0.9915, 1.0049, 1.012, 1.0148, 1.015, 1.0136, 1.0115, 1.0092, 1.007, 1.0051, 1.0035, 1.0023, 1.0014, 1.0007, 1.0003, 1, 0.9999, 0.9998, 0.9998, 1);
  --ease-aus-weich: cubic-bezier(.16, 1, .3, 1);

  /* Bausteine, dunkel (Werte wie in B) */
  --knopf-voll: var(--text); --knopf-voll-text: #000; --knopf-voll-hover: #fff;
  --knopf-voll-schein: 0 0 0 1px #fff, 0 10px 50px -6px rgb(var(--glut) / .55);
  --rand-hover: rgba(255, 255, 255, .45);
  --punkt-ring: rgb(var(--glut) / .12); --punkt-schein: 0 0 12px 2px rgb(var(--glut) / .55);
  --punkt-aus: #2c2c30; --led-aus: #3a3a3e;
  --linie-schein: 0 0 14px rgb(var(--glut) / .55);
  --strecke: linear-gradient(90deg, rgb(var(--glut) / .95), rgb(var(--warm) / .95));
  --bild-rand: rgba(255, 255, 255, .07); --bild-an: brightness(.92) saturate(1);
  --hover-flaeche: rgba(255, 255, 255, .06);
  --empfehlung: invert(1) grayscale(1) brightness(.82); --empfehlung-an: invert(1) grayscale(1) brightness(1);
  --fehler: var(--licht);
  --auswahl: rgb(var(--glut) / .35); --auswahl-text: #fff;
  --viz-aus: #2c2c31; --viz-linie: #3c3c41; --viz-strich: #5a5a60; --viz-strich-an: #8e8e94;
  --viz-licht: #fff4e8; --viz-punkt-an: #fff1e2; --viz-schein: drop-shadow(0 0 3px rgb(var(--glut) / .55));
  --balken: linear-gradient(90deg, rgb(var(--glut) / .55), var(--licht) 70%, rgb(var(--warm))); --balken-schein: 0 0 14px rgb(var(--glut) / .45);
  --zeit-ring: #000;
  --flaeche: #000; --halo: 1;
}

/* Helle Fläche */
.flaeche-hell,
.editor-styles-wrapper {
  color-scheme: light;
  --nacht: #fff; --nacht-1: #f5f5f7; --nacht-2: #e8e8ed;
  --linie: #e8e8ed; --linie-2: #d2d2d7;
  --text: #1d1d1f; --text-2: #424245; --text-3: #6e6e73; --text-aus: #8e8e93;
  --licht: #c24a10; --glut: 211 86 21; --warm: 224 122 62;
  --knopf-voll: #c24a10; --knopf-voll-text: #fff; --knopf-voll-hover: #a93f0c; --knopf-voll-schein: none;
  --rand-hover: rgba(0, 0, 0, .42);
  --punkt-ring: rgb(211 86 21 / .14); --punkt-schein: 0 0 0 0 transparent;
  --punkt-aus: #d2d2d7; --led-aus: rgba(255, 255, 255, .45);
  --linie-schein: none;
  --strecke: linear-gradient(90deg, #d35615, #e07a3e);
  --bild-rand: rgba(0, 0, 0, .06); --bild-an: none;
  --hover-flaeche: rgba(0, 0, 0, .04);
  --empfehlung: grayscale(1); --empfehlung-an: grayscale(1);
  --fehler: #b3261e;
  --auswahl: rgba(211, 86, 21, .18); --auswahl-text: inherit;
  --viz-aus: #e1e1e6; --viz-linie: #d2d2d7; --viz-strich: #a1a1a6; --viz-strich-an: #1d1d1f;
  --viz-licht: #c24a10; --viz-punkt-an: #1d1d1f; --viz-schein: none;
  --balken: linear-gradient(90deg, #e8935c, #c24a10); --balken-schein: none;
  --zeit-ring: #fff;
  --flaeche: #fff; --halo: 0;
  background: var(--nacht); color: var(--text);
}

/* Dunkle Fläche: Startseite, Projekte, Projektarchiv, Bereiche und Teamseiten als Ganzes; auf hellen Seiten nur der Schluss
   (Fotostrecke, Weitere, Blättern, Aufruf, Team). Von dort an bleibt es dunkel bis zum Fuß */
.flaeche-dunkel,
.flaeche-hell :is(.nl-aufruf, #team, .nl-bilder, .nl-nachweis, .nl-weitere, .nl-blaettern, .nl-filter, .nl-projekte__liste, .nl-grafik-band),
.editor-styles-wrapper :is(.nl-buehne, .nl-intro, .nl-leistungen, .nl-flutlicht, .nl-projekte, .nl-aufruf, #team, .nl-bilder, .nl-nachweis, .nl-weitere, .nl-blaettern, .nl-filter, .nl-projekte__liste, .nl-grafik-band, .nl-person, .nl-fuss) {
  color-scheme: dark;
  --nacht: #000; --nacht-1: #0b0b0c; --nacht-2: #161618;
  --linie: rgba(255, 255, 255, .11); --linie-2: rgba(255, 255, 255, .22);
  --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #86868b; --text-aus: #5f5f64;
  --licht: #ff8a3d; --glut: 255 138 61; --warm: 255 228 200;
  --knopf-voll: #f5f5f7; --knopf-voll-text: #000; --knopf-voll-hover: #fff; --knopf-voll-schein: 0 0 0 1px #fff, 0 10px 50px -6px rgb(255 138 61 / .55);
  --rand-hover: rgba(255, 255, 255, .45);
  --punkt-ring: rgb(255 138 61 / .12); --punkt-schein: 0 0 12px 2px rgb(255 138 61 / .55);
  --punkt-aus: #2c2c30; --led-aus: #3a3a3e;
  --linie-schein: 0 0 14px rgb(255 138 61 / .55);
  --strecke: linear-gradient(90deg, rgb(255 138 61 / .95), rgb(255 228 200 / .95));
  --bild-rand: rgba(255, 255, 255, .07); --bild-an: brightness(.92) saturate(1);
  --hover-flaeche: rgba(255, 255, 255, .06);
  --empfehlung: invert(1) grayscale(1) brightness(.82); --empfehlung-an: invert(1) grayscale(1) brightness(1);
  --fehler: #ff8a3d;
  --auswahl: rgb(255 138 61 / .35); --auswahl-text: #fff;
  --viz-aus: #2c2c31; --viz-linie: #3c3c41; --viz-strich: #5a5a60; --viz-strich-an: #8e8e94;
  --viz-licht: #fff4e8; --viz-punkt-an: #fff1e2; --viz-schein: drop-shadow(0 0 3px rgb(255 138 61 / .55));
  --balken: linear-gradient(90deg, rgb(255 138 61 / .55), #ff8a3d 70%, rgb(255 228 200)); --balken-schein: 0 0 14px rgb(255 138 61 / .45);
  --zeit-ring: #000;
  --flaeche: #000; --halo: 1;
  color: var(--text);
}
/* Hintergrund nur für ganze Abschnitte; der Filter behält sein Glas */
.flaeche-dunkel,
.flaeche-hell :is(.nl-aufruf, #team, .nl-bilder, .nl-nachweis, .nl-weitere, .nl-blaettern, .nl-projekte__liste, .nl-grafik-band),
.editor-styles-wrapper :is(.nl-buehne, .nl-intro, .nl-leistungen, .nl-flutlicht, .nl-projekte, .nl-aufruf, #team, .nl-bilder, .nl-nachweis, .nl-weitere, .nl-blaettern, .nl-projekte__liste, .nl-grafik-band, .nl-person, .nl-fuss) { background: var(--nacht); }
.flaeche-hell .nl-filter { background: #000; }
.flaeche-hell .nl-filter.ist-angeheftet { background: rgba(0, 0, 0, .86); }
/* Jede Fläche schließt die Außenabstände ihrer Kinder ein. Sonst zeigt ein Absatz am Rand (Fotonachweis) zwischen zwei dunklen
   Flächen einen Streifen vom hellen Grund der Seite. */
.nl-aufruf, .nl-projektbild, .nl-bilder, .nl-nachweis, .nl-weitere, .nl-blaettern, .nl-filter, .nl-projekte__liste, .nl-grafik-band,
.nl-intro, .nl-leistungen, .nl-eckdaten, .nl-projektkopf { display: flow-root; }
/* Auf einer dunklen Startseite: Büro und Leistungen hell, die Bühne bleibt schwarz */
.nl-haupt { background: var(--nacht); }

::selection { background: var(--auswahl); color: var(--auswahl-text); }
:focus-visible { outline-color: var(--licht); }

/* ═════════════ 3 Bausteine über Variablen ═════════════ */
.t-kicker::before, .led, .is-style-kicker::before { box-shadow: 0 0 0 3px var(--punkt-ring), var(--punkt-schein); }
.knopf:hover { border-color: var(--rand-hover); }
.knopf--licht, .wp-block-button__link, .wpcf7 input.wpcf7-submit { background: var(--knopf-voll); border-color: var(--knopf-voll); color: var(--knopf-voll-text); }
.knopf--licht:hover, .wp-block-button__link:hover, .wpcf7 input.wpcf7-submit:hover:not(:disabled) { background: var(--knopf-voll-hover); border-color: var(--knopf-voll-hover); color: var(--knopf-voll-text); box-shadow: var(--knopf-voll-schein); }
.is-style-licht .wp-block-button__link::before { box-shadow: 0 0 0 3px var(--punkt-ring), var(--punkt-schein); }
.is-style-linie .wp-block-button__link { background: transparent; color: var(--text); border-color: var(--linie-2); }
.is-style-linie .wp-block-button__link:hover { background: transparent; color: var(--text); border-color: var(--rand-hover); box-shadow: none; }
.nl-suchfeld .wp-block-search__button:hover, .nl-aufklapper summary:hover { border-color: var(--rand-hover); }

/* Helle Fläche: Knöpfe wie in „Präzision“, die Lichtpunkte sind weiß auf Orange */
.flaeche-hell .is-style-licht .wp-block-button__link::before { background: #fff; }
.flaeche-hell :is(.nl-aufruf, #team) .is-style-licht .wp-block-button__link::before { background: var(--licht); }

.bild::after, .nl-bilderfolge > .wp-block-image::after { border-color: var(--bild-rand); }
.js .ist-an.bild img, .js .ist-an .bild img, .js .nl-bilderfolge > .wp-block-image.ist-an img, .js .nl-bild-licht.ist-an img { filter: var(--bild-an); }

/* Leistungsphasen */
.nl-phasen::after { background: var(--strecke); box-shadow: var(--linie-schein); }
.nl-phasen li::before { background: var(--nacht); }
.nl-phasen.ist-an li::before { box-shadow: 0 0 0 5px var(--punkt-ring), var(--punkt-schein); }
@media (max-width: 760px) { .nl-phasen::after { background: var(--strecke); } }

/* Lichtband */
.nl-band__zeile > a::before { box-shadow: var(--linie-schein); }

/* Gewerke, Leistungen, Listen */
.gewerk h3 i, .nl-leistung__punkte li::before { background: var(--punkt-aus); }
.gewerke.ist-an .gewerk--an h3 i { background: var(--licht); box-shadow: 0 0 0 4px var(--punkt-ring), var(--punkt-schein); }
.nl-leistung__raster.ist-an .nl-leistung__punkte li::before { background: var(--licht); box-shadow: var(--punkt-schein); }
.is-style-leuchten li::before, .nl-projekt__text ul li::before, .nl-aufklapper li::before { box-shadow: var(--punkt-schein); }
.nl-aufklapper summary::before { background: var(--punkt-aus); }
.nl-aufklapper[open] summary::before { background: var(--licht); box-shadow: 0 0 0 3px var(--punkt-ring), var(--punkt-schein); }

/* Empfehlungen: auf Hell dunkle Logos, auf Dunkel helle */
.empfehlung img { filter: var(--empfehlung); }
.empfehlung a:hover img, .empfehlung a:focus-visible img { filter: var(--empfehlung-an); }

/* Formular (Contact Form 7) */
.wpcf7 .einwilligung input::after { box-shadow: var(--punkt-schein); }
.wpcf7 .formular__fuss .knopf-led { background: var(--led-aus); }
.wpcf7 .formular.ist-bereit .knopf-led { background: var(--licht); box-shadow: 0 0 0 3px var(--punkt-ring), var(--punkt-schein); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--fehler); }
.wpcf7 .feld .wpcf7-not-valid { border-bottom-color: var(--fehler); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-color: var(--fehler); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--rand-hover); }

/* Datengrafiken: Licht auf Dunkel, Tinte und Orange auf Hell */
.viz-schaft, .viz-achse { stroke: var(--viz-linie); }
.viz-kopf, .viz-steig-kopf { fill: var(--viz-aus); }
.ist-an .viz-kopf, .ist-an .viz-steig-kopf { fill: var(--viz-licht); }
.viz-steig { stroke: var(--viz-strich); }
.viz-punkt { fill: var(--viz-aus); }
.ist-an .viz-punkt { fill: var(--viz-licht); }
.nl-mengen__spur i { background: var(--viz-aus); }
.ist-an .nl-mengen__spur i { background: var(--balken); box-shadow: var(--balken-schein); }
.nl-mengen .ist-summe .nl-mengen__spur i { border-left-color: var(--flaeche); }
.nl-punkte__feld circle { fill: var(--viz-aus); }
.ist-an .nl-punkte__feld circle { fill: var(--viz-punkt-an); }
.ist-an .nl-punkte__feld g { filter: var(--viz-schein); }
.nl-schanze__turm { stroke: var(--viz-linie); }
.nl-schanze__linie { stroke: var(--viz-strich); }
.ist-an .nl-schanze__linie { stroke: var(--viz-strich-an); }
.nl-schanze__punkt, .nl-schanze__klein { fill: var(--viz-aus); }
.ist-an .nl-schanze__punkt, .ist-an .nl-schanze__klein { fill: var(--viz-licht); }
.nl-zeit__licht { background: var(--balken); box-shadow: var(--balken-schein); }
.nl-zeit__punkte li::before { background: var(--viz-aus); box-shadow: 0 0 0 3px var(--zeit-ring); }
.ist-an .nl-zeit__punkte li::before { background: var(--viz-licht); box-shadow: 0 0 0 3px var(--zeit-ring), var(--punkt-schein); }
/* Auf Hell kein Glimmen um die Lichtpunkte: die Halos bleiben aus */
.ist-an .viz-halo, .ist-an .viz-steig-halo, .ist-an .viz-punkt-halo, .ist-an .nl-schanze__halo { opacity: var(--halo); }

/* ═════════════ Helle Flächen: was über Variablen nicht reicht ═════════════ */
/* Bildbänder auf hellen Seiten (Kopfbild, Leistungsbild): harte Kante statt Verlauf ins Schwarz, Bild in voller Helligkeit */
.flaeche-hell .wp-block-image.nl-kopfbild { background: var(--tag-nebel); }
.flaeche-hell .wp-block-image.nl-kopfbild::after, .flaeche-hell .nl-leistung__bild::before { display: none; }
.flaeche-hell .nl-leistung__bild { background: var(--tag-nebel); }

/* Projektseite: hell von oben bis „Beteiligte“. Das Projektbild steht gerahmt auf Hell wie in „Präzision“ (Satzbreite, runde
   Ecken), nicht als dunkles Band. Kleine Bilder (unter 900 px) stehen in ihrer eigenen Größe mittig im gleichen Rahmen auf
   hellem Grau, wie ein Passepartout, nie hochgerechnet. */
.nl-projektanfang { display: block; }
.nl-projektkopf .t-mega { max-width: 16ch; }
.nl-projektkopf .pfad a { color: var(--licht); }
.nl-projektkopf .pfad a:hover { color: var(--akzent-tief); text-decoration: underline; text-underline-offset: 3px; }
.nl-projektkopf { padding-bottom: var(--wp--preset--spacing--50); }
.nl-projektbild .bild { position: relative; height: clamp(420px, 72vh, 820px); border-radius: 24px; overflow: hidden; background: var(--tag-nebel); }
.nl-projektbild .bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.nl-projektbild.ist-klein .bild { height: clamp(360px, 56vh, 620px); display: grid; place-items: center; padding: var(--wp--preset--spacing--40); }
.nl-projektbild.ist-klein .bild img { position: static; width: auto; height: auto; max-width: min(100%, 777px); max-height: 100%; border-radius: 6px; }
@media (max-width: 760px) {
  .nl-projektbild .bild { height: min(64vh, 560px); min-height: 360px; border-radius: 16px; }
  .nl-projektbild .bild img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .nl-projektbild.ist-klein .bild { height: auto; min-height: 0; padding: var(--wp--preset--spacing--30); }
  .nl-projektbild.ist-klein .bild img { width: 100%; max-height: none; }
}
.nl-eckdaten .eckdaten { border-top: 0; }

/* Datengrafik, die Licht zeigt (Flutlicht): als eigene dunkle Fläche direkt vor den Bildern derselben Anlage */
.nl-grafik-band .nl-grafik { margin-top: 0; padding-top: 0; border-top: 0; }
.nl-grafik-band + .nl-bilder { padding-top: 0; }

/* Kontakt: Formularfelder wie in „Präzision“ (Rahmen, Fokusring), Hinweise in Rot */
.flaeche-hell .wpcf7 .feld input, .flaeche-hell .wpcf7 .feld textarea {
  padding: 14px 16px; border: 1px solid var(--tag-linie); border-radius: 14px; background: #fff; font-size: 17px;
  transition: border-color .2s ease, box-shadow .3s var(--ease-aus-weich);
}
.flaeche-hell .wpcf7 .feld textarea { min-height: 176px; height: 176px; }
.flaeche-hell .wpcf7 .feld input:focus, .flaeche-hell .wpcf7 .feld textarea:focus { border-color: var(--akzent-text); box-shadow: 0 0 0 4px rgba(211, 86, 21, .15); }
.flaeche-hell .wpcf7 .feld .wpcf7-not-valid { border-color: var(--fehler-tag); }
.flaeche-hell .wpcf7 .feld .wpcf7-not-valid:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .14); }
.flaeche-hell .wpcf7 .feld__licht { display: none; }
.flaeche-hell .wpcf7 .feld label { color: var(--text-2); font-size: 14px; font-weight: 500; }
.flaeche-hell .wpcf7 .einwilligung input { border-color: var(--tag-blass); border-radius: 7px; background: #fff; width: 22px; height: 22px; }
.flaeche-hell .wpcf7 .einwilligung input:checked { background: var(--akzent-text); border-color: var(--akzent-text); }
.flaeche-hell .wpcf7 .einwilligung input::after { background: #fff; }
.flaeche-hell .wpcf7 .einwilligung a { color: var(--akzent-text); text-decoration: underline; text-underline-offset: .16em; }
.flaeche-hell .wpcf7 input.wpcf7-submit:disabled { opacity: .5; }

/* Helle Karte wie in „Präzision“: grau gestellt, orange Marke mit Puls, Schild hell */
.karte--tag { background: #ececee; border-block-color: var(--tag-linie-2); }
.karte--tag .karte__innen img { filter: grayscale(1) contrast(1.04) brightness(1.03); }
/* Die Kacheln aus Stufe 1 tragen schon eine Marke (50 % | 55,6 %); die orange Marke liegt genau darauf */
.karte__ort { position: absolute; left: 50%; top: 55.6%; width: 0; height: 0; }
.karte__pin { position: absolute; left: -15px; bottom: -2px; width: 30px; height: 40px; max-width: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .25)); }
.karte__puls { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: rgba(211, 86, 21, .35); animation: karte-puls 2.8s var(--ease-aus-weich) infinite; }
@keyframes karte-puls { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
.karte--tag .karte__marke { top: 55.6%; margin: -58px 0 0 22px; background: rgba(255, 255, 255, .94); border: 0; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); color: var(--tag-tinte); border-radius: 12px; }
.karte--tag .karte__marke span { color: var(--tag-grau); }
.karte--tag .karte__quelle { background: rgba(255, 255, 255, .86); color: var(--tag-tinte-2); }
.karte--tag .karte__quelle:hover { color: var(--tag-tinte); }
@media (max-width: 760px) { .karte--tag .karte__marke { margin: -112px 0 0 -62px; } }

/* Lesetext und Angaben: Links in Akzentfarbe */
.flaeche-hell .nl-lesetext a:hover { color: var(--akzent-tief); }

/* ═════════════ 4 Kopf: folgt der Fläche darunter ═════════════ */
.nl-logo { position: relative; }
.nl-logo__tag { display: none; height: 40px; width: auto; }
.nl-kopf { transition: background .35s ease, border-color .35s ease, -webkit-backdrop-filter .35s, backdrop-filter .35s; }
.nl-kopf .nl-nav a, .nl-kopf .nl-suchknopf, .nl-kopf .nl-menueknopf { transition: color .35s ease, border-color .35s ease, background .35s ease; }
.nl-kopf--hell {
  color-scheme: light;
  --text: #1d1d1f; --text-2: #424245; --text-3: #6e6e73; --linie: rgba(0, 0, 0, .08); --linie-2: #d2d2d7;
  --licht: #c24a10; --glut: 211 86 21; --rand-hover: rgba(0, 0, 0, .42); --hover-flaeche: rgba(0, 0, 0, .04); --punkt-aus: #d2d2d7;
}
/* Heller Kopf hat immer sein Glas (wie „Präzision“): am Seitenanfang auf Weiß unsichtbar, beim Scrollen über Bildern lesbar */
.nl-kopf--hell, .nl-kopf--hell.ist-gescrollt { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); }
.nl-kopf--hell.ist-gescrollt { border-bottom-color: rgba(0, 0, 0, .08); }
.nl-kopf--hell .nl-logo img[data-logo="nacht"] { display: none; }
.nl-kopf--hell .nl-logo__tag { display: block; }
.nl-kopf--hell .nl-nav a[aria-current="page"]::after { box-shadow: none; }
.nl-kopf--hell .nl-nav a.nl-nav__kontakt { background: var(--akzent-text); border-color: var(--akzent-text); color: #fff; }
.nl-kopf--hell .nl-nav a.nl-nav__kontakt:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }
.nl-kopf--hell .nl-nav__unter ul { background: rgba(255, 255, 255, .96); border-color: rgba(0, 0, 0, .08); box-shadow: 0 10px 34px rgba(0, 0, 0, .1); }
.nl-kopf--hell .nl-nav__unter a::before { background: var(--punkt-aus); }
.nl-kopf--hell .nl-nav__unter a:hover, .nl-kopf--hell .nl-nav__unter a:focus-visible { background: var(--hover-flaeche); }
.nl-kopf--hell .nl-nav__unter a:hover::before, .nl-kopf--hell .nl-nav__unter a:focus-visible::before { background: var(--licht); box-shadow: none; }
.nl-kopf--hell .nl-suche { background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .06); }
.nl-kopf--hell .nl-suche .knopf { border-color: var(--linie-2); color: var(--text); }
/* Das Handy-Menü ist dunkel wie der Fuß; ist es offen, wird der Kopf mit dunkel */
.ist-menue-offen .nl-kopf--hell {
  color-scheme: dark; --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #86868b; --linie: rgba(255, 255, 255, .11); --linie-2: rgba(255, 255, 255, .22); --licht: #ff8a3d;
}
.ist-menue-offen .nl-kopf--hell .nl-logo img[data-logo="nacht"] { display: block; }
.ist-menue-offen .nl-kopf--hell .nl-logo__tag { display: none; }
.ist-menue-offen .nl-kopf--hell, .ist-menue-offen .nl-kopf--hell.ist-gescrollt {
  background: #000; border-bottom-color: rgba(255, 255, 255, .11); -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ═════════════ 5 Bewegung auf hellen Flächen: federndes Einblenden wie in „Präzision“ ═════════════ */
.js .zeigen { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--ease-aus-weich), transform 1.25s var(--feder); transition-delay: calc(var(--zi, 0) * 70ms); }
.js .zeigen.ist-da { opacity: 1; transform: none; }
/* Bilder auf hellen Seiten gleiten in Position statt aus dem Dunkel anzugehen */
.js .flaeche-hell .wp-block-image.nl-kopfbild img, .js .flaeche-hell .nl-leistung__bild img, .js .flaeche-hell .nl-projektbild img { filter: none; opacity: 0; transform: translate3d(0, 24px, 0) scale(1.06); transition: opacity 1s var(--ease-aus-weich), transform 1.6s var(--feder); }
.js .flaeche-hell .wp-block-image.nl-kopfbild.ist-an img, .js .flaeche-hell .nl-leistung__bild.ist-an img, .js .flaeche-hell .nl-projektbild.ist-an img { opacity: 1; transform: none; filter: none; }
.alles-an .zeigen { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .zeigen, .js .flaeche-hell .wp-block-image.nl-kopfbild img, .js .flaeche-hell .nl-leistung__bild img, .js .flaeche-hell .nl-projektbild img { opacity: 1 !important; transform: none !important; }
  .karte__puls { animation: none; opacity: 0; }
}