/* netzwerkfaehig 2026-10-28 (Markus: "links neben dem ebalan logo den schriftzug 'Deutschlandweit für Sie im Einsatz', damit das auf jeder seite steht"):
   Schriftzug in der Kopfleiste LINKS vom Logo, im freien schwarzen Bereich vor der roten Linie (Theme: 18,75 % der Breite), rechtsbuendig an der Linie.
   Am Handy (< 768 px) sind links nur 73 px frei, darum dort unter dem Logo. Schrift wie das Menue: Oswald, Grossbuchstaben, weiss.
   Das Theme setzt "header ::before" (rote Linie) auf JEDEN Nachfahren, darum hier ausdruecklich abgeschaltet. Eigenstaendige Datei, kein Webpack-Build noetig (Include Header.ss).
   2026-10-29 (Wunsch EBALAN ueber Markus "Navi Leiste ca. 10% hoeher"): Kopfleiste 120 -> 132 px. Die Hoehe steckt im Theme an mehreren Stellen (header, rote Linie header :before,
   body padding-top, Marvins Seiten --hdr fuer Sticky-Elemente, Sprungziel #uff) - alle haengen jetzt an --nf-hdr. Schriftzug jetzt zwei Aussagen (Einsatzgebiet + Slogan).
   Markus 29.10. 15:20 "das muss breiter werden, je Slogan max 2 Zeilen": laengste Zeile "In Deutschland und der Schweiz" (30 Zeichen, ca. 0,5 em je Zeichen in Oswald) muss in den Platz vor der Linie
   passen -> Schrift ab 1300 px aus der Breite gerechnet ((18,75vw - 40px) / 15), 768-1299 px (Desktop-Menue ausgeblendet) rechts neben dem Logo, < 768 px unter dem Logo. */
:root { --nf-hdr: 132px; }
html body header, html body header :before { height: var(--nf-hdr); }
html body { padding-top: var(--nf-hdr); }
body.nf-sp, body.nf-fs, body.nf-rh { --hdr: var(--nf-hdr); }
#uff { scroll-margin-top: calc(var(--nf-hdr) + 20px); }

.nf-claim {
  position: absolute; left: 0; top: 0; width: 18.75%; height: var(--nf-hdr); z-index: 8; margin: 0; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  padding: 0 clamp(14px, 1.5vw, 28px) 0 10px;
  color: #fff; font-family: Oswald, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.2; font-size: clamp(.8rem, calc((18.75vw - 40px) / 15), 1.15rem); text-align: right; pointer-events: none;
}
.nf-claim span { display: block; white-space: nowrap; }
.nf-claim__slogan { margin-top: .5em; }
.nf-claim::before, .nf-claim span::before { content: none; display: none; }
/* Tablet/kleiner Desktop: das Theme blendet das Menue aus (< 1300 px), rechts vom Logo ist frei bis zum MENU-Knopf (70 px + 20 px Rand) */
@media (768px <= width < 1300px) {
  .nf-claim { left: calc(20% + 266px); width: auto; right: 110px; padding: 0; align-items: flex-start; text-align: left; font-size: .95rem; }
}
@media (width < 768px) {
  .nf-claim { left: 20%; width: auto; height: auto; top: 66px; padding: 0 0 0 30px; align-items: flex-start; text-align: left; font-size: .68rem; line-height: 1.15; }  /* Logo endet bei 59 px */
  .nf-claim__slogan { margin-top: .35em; }
}
/* Marvins Fugen-Design (Seite 31, Entwurf): dort liegt die rote Linie am 1240er-Container, der Schriftzug folgt ihr; der Platz ist schmal, dort duerfen die Zeilen umbrechen */
body.nf-fs .nf-claim { width: max(16px, calc((100vw - 1240px) / 2 + 16px)); font-size: .72rem; }
body.nf-fs .nf-claim span { white-space: normal; }

/* 30.10.2026: achter Menuepunkt "Referenzen" (Seite 32) -> Menue zwischen 1300 und 1699 px zu breit, KONTAKT-Knopf bei 1300-1440 px rechts abgeschnitten
   (Messung: rechter Rand 1469/1482/1497 px bei 1300/1366/1440). Abstaende, Einzug und Schrift in diesem Bereich verdichten; ab 1700 px Theme unveraendert. */
@media (1300px <= width < 1700px) {
  html body header .header-content .desktop-nav { gap: 10px; padding-left: 12px; }
  html body header .header-content .desktop-nav .nav-link { font-size: .92rem; }
  html body header .header-content .desktop-nav .nav-link.contakt-link { margin-left: 10px; padding: 6px 20px 9px; font-size: 1.05rem; }
}
@media (1300px <= width < 1440px) {   /* 30.10.: zweite Stufe - bei 1300/1366 px lag KONTAKT noch genau am rechten Rand */
  html body header .header-content .desktop-nav { gap: 7px; padding-left: 8px; }
  html body header .header-content .desktop-nav .nav-link { font-size: .86rem; }
  html body header .header-content .desktop-nav .nav-link.contakt-link { margin-left: 8px; padding: 6px 15px 9px; font-size: 1rem; }
}

/* ===== Neue Kopfleiste auf allen Seiten (05.11.2026, Markus "wir nehmen meine Variante, aber die muss Smartphone tauglich sein"; Vorlage = Vorschau Bodenbeschichtung bb8) =====
   Nur unter body.nf-kopf-neu (PageController::NfKopfNeu: Schalter NF_KOPF_NEU, Vorschau-Cookie oder Marvins Entwurfsseiten). Ohne die Klasse bleibt alles wie oben (132 px, zwei Aussagen).
   - 80 px hoch, Wortmarke 170 px, rote Linie an der Inhaltskante max(16px, (100% - 1240px) / 2 + 16px) (Live-Seiten: Theme-Linie #main::before; Marvins Seiten: header::before in ihrer CSS)
   - ab 768 px: "Ausfuehrung in Deutschland / und der Schweiz." als erstes Flex-Element 16 px rechts der Linie, Logo direkt dahinter, Schrift wie .desktop-nav .nav-link
   - 1700-1859 px: Menue-Abstaende verdichtet (Messung 05.11.: sonst KONTAKT am rechten Rand, "UEBER UNS" zweizeilig)
   - Handy (< 768 px): Kopfleiste 104 px, Logo und MENU oben in 80 px wie bisher, darunter der Satz in einer Zeile rechts der Linie */
html body.nf-kopf-neu { --nf-hdr: 80px; }
body.nf-kopf-neu .nf-claim { display: none; }
html body.nf-kopf-neu #main::before { left: max(16px, calc((100% - 1240px) / 2 + 16px)); }
/* Theme zeichnet die senkrechte Linie der Kopfleiste ueber ein festes ::before an JEDEM Nachfahren (left 18.75 %) -> alle an die Inhaltskante; die Aufklapp-Bruecke des Menues (nf-dd__panel) bleibt am Panel */
html body.nf-kopf-neu header::before, html body.nf-kopf-neu header ::before { left: max(16px, calc((100% - 1240px) / 2 + 16px)); }
html body.nf-kopf-neu header .nf-dd__panel::before { left: 0; }
body.nf-kopf-neu .nf-claim-bb { margin: 0; color: #fff; font-family: Oswald, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: normal; z-index: 8; }
body.nf-kopf-neu .nf-claim-bb::before, body.nf-kopf-neu .nf-claim-bb span::before { content: none; display: none; }
@media (width >= 768px) {
  html body.nf-kopf-neu header .logo { padding-top: 15px; }
  html body.nf-kopf-neu header .logo img { width: 170px; height: auto; }
  body.nf-kopf-neu header { justify-content: flex-start; }
  body.nf-kopf-neu header .header-content { width: auto; flex: 1 1 auto; min-width: 0; }
  body.nf-kopf-neu .nf-claim-bb { display: block; position: relative; flex: 0 0 auto; align-self: center; margin-left: calc(max(16px, (100% - 1240px) / 2 + 16px) + 3px + 16px);
    font-size: 1rem; line-height: 1.25; }
  body.nf-kopf-neu .nf-claim-bb span { display: block; white-space: nowrap; }
}
@media (1300px <= width < 1700px) { body.nf-kopf-neu .nf-claim-bb { font-size: .92rem; } }
@media (1300px <= width < 1440px) { body.nf-kopf-neu .nf-claim-bb { font-size: .86rem; } }
@media (1700px <= width < 1860px) {
  html body.nf-kopf-neu header .header-content .desktop-nav { gap: 13px; padding-left: 12px; }
  html body.nf-kopf-neu header .header-content .desktop-nav .nav-link.contakt-link { margin-left: 18px; }
}
@media (width < 768px) {
  html body.nf-kopf-neu { --nf-hdr: 104px; }
  html body.nf-kopf-neu header .logo { padding-top: 26px; }
  body.nf-kopf-neu header .header-content { height: 80px; align-self: flex-start; }
  body.nf-kopf-neu header .header-content::after { top: calc(var(--nf-hdr) - 4px); }   /* waagerechte Linie an die Unterkante der 104 px, unter den Satz */
  body.nf-kopf-neu .nf-claim-bb { display: block; position: absolute; top: 80px; left: calc(max(16px, (100% - 1240px) / 2 + 16px) + 3px + 16px); right: 16px;
    font-size: .75rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.nf-kopf-neu .nf-claim-bb span { display: inline; }
}