/* ==========================================================================================================================
   nf-sa-marvin.css - netzwerkfaehig 2026-10-20/23: Marvins Entwurf Schwerlastanker entfernen (PR #18, entwurf/schwerlastanker-entfernen/index.html, 05.11.2026).
   Erzeugt mit build/css-port/css-port.py (Regel fuer Regel: Praefix ".nf-sa ", Deklarationen wortgleich). Nur auf Seiten mit Seitenklasse nf-sa geladen
   (PageController::NF_SEITENKLASSEN, Layout/ElementalPage.ss), nach nf-blocks.css. Aufbau: (A) Theme-Wrapper neutralisieren -> (M) Marvins Regeln ->
   (B) Anpassungen an das Theme -> (C) Responsiv. Der Theme-Hero (HeroImageBaseElement) wird von keiner Regel dieser Datei beruehrt.
   Praefix-Ausnahmen: :root/html -> .nf-sa; body -> .nf-sa .TextBaseElement-content; * -> .nf-sa *; .hdr/.ftr/.hero (Kopf, Fuss, sein #s0) entfallen.
   Vollstaendiges Protokoll: build/css-port/css-port.log im Kundenrepo.
   ========================================================================================================================== */

/* ======================================================= (A) Theme-Wrapper neutralisieren - Schwerlastanker entfernen (Kopie von block-a-pf.css mit Praefix .nf-sa, 05.11.2026) =======================================================
   Steht VOR Marvins Regeln mit gleicher oder geringerer Spezifitaet (:where() = 0): wo seine Regeln dieselbe Eigenschaft setzen, gewinnen sie.
   Grund: das Theme (app.min.css) legt um jeden Inhaltsblock .TextBaseElement (Rand 12,5 %, 70 px Abstand, max. 2000 px, AOS-Einblendung) und
   setzt einen Tailwind-Reset (margin/padding 0 fuer alles, ul li mit Aufzaehlungsbild 20 px/36 px, h1-h6/p font-size:inherit, a underline ...).
   Marvins Datei hat keinen Reset - dort gilt der Browser-Standard. "revert" = Browser-Standard (UA-Wert), also exakt sein Zustand. */
/* Block ohne Theme-Rand, -Abstand und -Deckel; position/z-index/#fff bleiben (deckt die feste rote Theme-Linie #main::before unterhalb des Heros ab wie auf den Live-Seiten) */
.nf-sa .TextBaseElement { margin: 0; padding: 0; max-width: none; }
/* AOS-Einblendung aus: seine Abschnitte stehen sofort, keine transform-Huelle um sticky-Elemente und 100vw-Ausbrueche */
.nf-sa .TextBaseElement[data-aos] { opacity: 1; transform: none; transition: none; }
/* Theme body{text-wrap:balance} wuerde in alle Absaetze erben; seine Datei balanciert nur einzelne Ueberschriften selbst */
.nf-sa .TextBaseElement-content { text-wrap: initial; }
/* Tailwind-Reset innerhalb seiner Abschnitte zuruecknehmen (Browser-Standard wie in seiner Datei) */
.nf-sa .TextBaseElement-content :where(*) { margin: revert; padding: revert; }
.nf-sa .TextBaseElement-content :where(h1, h2, h3, h4, h5, h6) { font-family: revert; font-size: revert; font-weight: revert; line-height: revert; }
.nf-sa .TextBaseElement-content :where(p) { font-family: revert; font-size: revert; font-weight: revert; }
.nf-sa .TextBaseElement-content :where(ul, ol, menu) { list-style: revert; }
.nf-sa .TextBaseElement-content :where(ul li) { background-image: revert; background-position: revert; background-repeat: revert; font-size: revert; line-height: revert; list-style-type: revert; }
.nf-sa .TextBaseElement-content :where(small) { font-size: revert; }
.nf-sa .TextBaseElement-content :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; top: revert; bottom: revert; }
.nf-sa .TextBaseElement-content :where(b, strong) { font-weight: revert; }
.nf-sa .TextBaseElement-content :where(code, kbd, pre, samp) { font-family: revert; font-size: revert; }
.nf-sa .TextBaseElement-content :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.nf-sa .TextBaseElement-content :where(img, video) { height: revert; max-width: revert; }
.nf-sa .TextBaseElement-content :where(button, input, select, textarea, optgroup) { color: revert; font-family: revert; font-size: revert; font-weight: revert; line-height: revert; letter-spacing: revert; font-feature-settings: revert; font-variation-settings: revert; }
.nf-sa .TextBaseElement-content :where(button, select) { text-transform: revert; }
.nf-sa .TextBaseElement-content :where(summary) { display: revert; }
.nf-sa .TextBaseElement-content :where(table) { border-collapse: revert; border-color: revert; text-indent: revert; }
.nf-sa .TextBaseElement-content :where(hr) { border-top-width: revert; color: revert; height: revert; }
.nf-sa .TextBaseElement-content :where(textarea) { resize: revert; }
/* Links: in Marvins Abschnitten gibt es keine <a> (Knoepfe und "Mehr"-Zeilen sind <span>). Werden sie beim Port zu Ankerlinks (#s7, #s5, #s4, #anfrage),
   sehen sie aus wie seine Spans: Farbe erben, keine Unterstreichung (Theme .typography a unterstreicht). */
.nf-sa .TextBaseElement-content :where(a) { color: inherit; text-decoration: none; }

/* ======================================================= (M) Marvins Regeln, praefixiert ======================================================= */
/* Gesamtseite: Kopfleiste wie ebalan.de (haftend), Hero in Schwarz mit rotem Titelkasten, danach die Abschnitte 1–9 (je eigener Stilbereich #sN). Eine Spalte (1240 px) für alles – die rote Linie sitzt immer an deren linker Kante. */
.nf-sa { --hdr:80px;--bg:#fff;--fg:#111;--muted:#6f6c67;--hair:#e4e2de;--red:#ff0000;--black:#0b0b0b;--display:"Oswald","Arial Narrow",Arial,sans-serif;--body:"Montserrat",Arial,sans-serif;color-scheme:light }
.nf-sa * { box-sizing:border-box }
.nf-sa { scroll-behavior:auto }
.nf-sa .TextBaseElement-content { margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased }
.nf-sa .wrap { max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px)) }
/* Kopfleiste */
.nf-sa .hero .btn, .nf-sa a.more, .nf-sa a.go { text-decoration:none }
/* Hero – wie das Original: roter Balken läuft von der Kopfleiste durchgehend bis unter den Textblock; roter Titelkasten bleibt am linken Bildschirmrand angeschlagen und reicht ein Stück über den Balken hinaus. */
.nf-sa .hero { position:relative;background:var(--black);color:#fff;overflow:hidden;min-height:calc(min(100vh,1200px) - var(--hdr));display:flex;align-items:flex-start }
.nf-sa .hero .bg { position:absolute;inset:0 }
.nf-sa .hero .bg img { width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block }
.nf-sa .hero .bg::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.55) 26%,rgba(0,0,0,.05) 58%),linear-gradient(0deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 40%) }
.nf-sa .hero .wrap { position:relative;width:100%;padding-bottom:64px;padding-top:calc((min(100vh,1200px) - var(--hdr)) * 0.34);min-height:calc(min(100vh,1200px) - var(--hdr)) }
.nf-sa .hero .box { position:relative;max-width:560px }
.nf-sa .hero .box::before { content:"";position:absolute;left:0;top:-200vh;bottom:0;width:3px;background:var(--red);z-index:1 }
.nf-sa .hero h1 { margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1.14;letter-spacing:.005em }
.nf-sa .hero h1 .l1 { display:block;background:var(--red);color:#fff;font-size:clamp(28px,3.4vw,44px);padding:22px 28px 20px;text-wrap:balance }
/* Grundkonzept Titel Hauptseiten (EBALAN 03.11.2026): Kasten vom linken Fensterrand über den roten Faden hinaus, auf jeder Bildschirmgröße; keine Subline, kein Knopf, kein Hinweis; Zeile 2 bündig mit dem Kastentext */
.nf-sa .hero h1 .l2 { display:block;font-size:clamp(16px,1.5vw,20px);font-weight:400;letter-spacing:.06em;color:#ddd;margin:20px 0 0 28px }
.nf-sa .hero .btn.o { background:transparent;border:1px solid #fff }
@media (max-width:720px) {
  .nf-sa .hero .wrap { padding-top:70px }
  .nf-sa .hero .box::before { display:none }
}
/* Breite Bildschirme: Textblock links vom Balken, Kasten vom Bildschirmrand bis 64 px über den Balken hinaus (Referenz Schleifen & Polieren; Kastenbreite EBALAN 23.10.2026) */
@media (min-width:1830px) {
  .nf-sa .hero .wrap { padding-top:calc((min(100vh,1200px) - var(--hdr)) * 0.34) }
  .nf-sa .hero .box { max-width:none;width:calc((var(--vw,100vw) - 1240px)/2 + 64px);margin-left:calc((1240px - var(--vw,100vw))/2 - 16px);padding-left:48px }
  .nf-sa .hero h1 .l1 { min-width:min-content }
  /* Regel 03.11.2026: der rote Kasten wird nie schmaler als sein längstes Wort („Bodenbeschichtung“ lief bei 1830–2000 px aus dem Kasten) */
  .nf-sa .hero .box::before { left:auto;right:64px }
  .nf-sa .hero h1 .l1 { margin-left:-48px;padding:26px 36px 24px 48px;font-size:clamp(30px,2.9vw,46px) }
  .nf-sa .hero h1 .l2 { margin-left:0;padding-right:60px }
  /* Zeile 2 und Subline dürfen über den roten Faden hinauslaufen (Faden pausiert dort automatisch) */
  .nf-sa .hero h1 .l2 { width:620px;max-width:none;padding-right:0 }
}
/* Kennzahlenband – weiß, zwischen Abschnitt 1 und 2 als Brücke zu den Projektgeschichten */
.nf-sa .kpi { background:#fff;border-top:1px solid var(--hair) }
.nf-sa .kpi .wrap { padding-top:44px;padding-bottom:52px }
.nf-sa .kpi .k0 { grid-column:1/-1;font-family:var(--display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 18px }
.nf-sa .kpi .row4 { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair) }
.nf-sa .kpi .k { padding:28px 28px 28px 0;border-right:1px solid var(--hair);min-width:0 }
.nf-sa .kpi .k+.k { padding-left:28px }
.nf-sa .kpi .k:last-child { border-right:0 }
.nf-sa .kpi .n { font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,42px);line-height:1;color:var(--red);font-variant-numeric:tabular-nums }
.nf-sa .kpi .n small { display:block;font-size:12px;color:var(--muted);letter-spacing:.1em;margin:8px 0 0;text-transform:uppercase }
.nf-sa .kpi p { margin:10px 0 0;font-size:13px;color:var(--muted);line-height:1.55;max-width:34ch }
.nf-sa .kpi sup { color:var(--red) }
@media (max-width:980px) {
  .nf-sa .kpi .row4 { grid-template-columns:1fr 1fr }
  .nf-sa .kpi .k:nth-child(2) { border-right:0;padding-right:0 }
  .nf-sa .kpi .k:nth-child(3) { padding-left:0;border-top:1px solid var(--hair) }
  .nf-sa .kpi .k:nth-child(4) { border-top:1px solid var(--hair) }
}
@media (max-width:560px) {
  .nf-sa .kpi .row4 { grid-template-columns:1fr }
  .nf-sa .kpi .k { border-right:0;padding-left:0!important }
  .nf-sa .kpi .k+.k { border-top:1px solid var(--hair) }
}
/* Rote Linie am Abschnittsbeginn – gleiche Kante wie Kopfleiste und Hero */
.nf-sa .sec { position:relative }
.nf-sa .sec > section > .wrap { position:relative }
.nf-sa .sec > section > .wrap::before { content:"";position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:-78px;width:3px;height:56px;background:var(--red) }
/* Fuß */
/* Durchlaufender roter Faden (wie Unterseite Rutschhemmung): ein Element über die ganze Seite an der linken Spaltenkante, wächst mit dem Scrollen und pausiert, wo Schrift oder Bedienelemente auf der Kante stehen (per Skript aus den Textblöcken berechnet). Die abschnittsweisen Linienstücke entfallen. */
.nf-sa #railwrap { position:relative;height:0;overflow:visible }
.nf-sa #rail { position:absolute;left:max(16px,calc((100% - 1240px)/2 + 16px));top:0;width:3px;height:0;pointer-events:none;z-index:40 }
.nf-sa #rail i { position:absolute;left:0;width:3px;background:var(--red);display:block }
.nf-sa .sec > section > .wrap::before, .nf-sa .hero .box::before { display:none!important }
/* Abschnitt 1 – Schadensbilder: Baustein „Einstieg Zweispalter + Kachelreihe mit Mausbewegung“ (Hauptseite 1, Kachelvariante){background:#fff;color:#111}
/* Abschnitt 1 – Foto-Bühne ohne Scroll-Zwang (EBALAN 23.10.2026): eine Bildschirmhöhe, links die fünf Schadensbilder als Liste; das aktive ist ausgeklappt, Überfahren/Antippen wechselt{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px;max-width:1100px;margin-bottom:96px}

/* Überschriften-Regel: Schlussteil rot (Regelwerk) */
.nf-sa .sec h2 em, .nf-sa .sec .big em { font-style:normal;color:var(--red) }
/* Abschnitt 2 Finale: dunkles Band{margin:96px calc(50% - var(--vw,var(--vw,100vw))/2) -110px;width:var(--vw,100vw);background:#0b0b0b;color:#fff;overflow:hidden} abwechselnd, senkrecht zentriert; Kennzahl, Datenzeile, H3{background:#fff;color:#111;padding-block:84px 80px} Foto-Bühne über volle Fensterbreite, Ziffer, senkrechtes Wort, aktive Kachel öffnet){background:#fff;color:#111;padding-block:84px 80px}

/* Abschnitt 4 – Planung und Untergrund. Überzeile → H2 → Einleitung (ein Absatz, links die vier Schritte als Liste, aktiver Schritt ausgeklappt{background:#fff;color:#111;padding-block:84px 0}

/* Abschnitt 5 – Systemauswahl. Baustein „Auswahl mit Detailblock“ wie Fugensanierung 4 / Schleifen & Polieren 3, hier rein typografisch (keine Systemgrafiken vorhanden): vier Systeme als Reiter (Name Oswald + Kennwort), Punkt auf der Linie, darunter Detailblock 5fr/7fr – links die Szene als Leitsatz (Oswald){background:#fff;color:#111;padding-block:84px 80px}
/* Variante Bühne: großes Muster läuft bis an den linken Fensterrand und kreuzt den roten Faden (wie der Titelkasten){margin-left:calc(-1 * max(16px,(var(--vw,100vw) - 1240px)/2 + 16px));width:calc(100% + max(16px,(var(--vw,100vw) - 1240px)/2 + 16px));aspect-ratio:auto;height:clamp(360px,34vw,560px)}
/* Abschnitt 6 – Zusätzliche Anforderungen. Neuer Baustein „Bildkacheln (Verweis-Raster)“ (EBALAN 03.11.2026): fünf Themen gleichrangig als Fotokacheln über die volle Fensterbreite, 2 + 3; Foto blendet beim Hereinscrollen ein, Zoom beim Überfahren, Absatz klappt auf; Text linksbündig, Oswald{background:#fff;color:#111;padding-block:84px 0}
/* Randkacheln sind um den Randabstand breiter, damit alle Textzonen gleich breit sind (Text bleibt am roten Faden{min-height:min(min(62vh,744px),620px)}

/* Abschnitt 7 – Ausführungsvarianten. Reiter je Systemgruppe (typografisch wie Auswahl: Oswald, aktiv schwarz mit rotem Strich); darunter Bühne wie Abschnitt 5: links das Muster der aktiven Zeile (Objektfoto, läuft bis an den linken Fensterrand, kreuzt den roten Faden), rechts die Datentabelle der Gruppe – Zeile unter dem Zeiger wechselt das Muster. Systemkürzel Oswald rot, Werte Montserrat Tabellenziffern. Handy: Reiter wischbar, Muster über volle Breite{background:#fff;color:#111;padding-block:84px 80px}

/* Abschnitt 8 – Fugen und Anschlüsse. Kopf (Überzeile → H2 → Einleitung einspaltig); darunter 1:1 an der Mittellinie: links Liste der fünf Punkte (Ziffer/Titel/Haarlinie wie Foto-Bühne, aktiver Punkt ausgeklappt mit Text und Link, Überfahren/Antippen wechselt){background:#fff;color:#111;padding-block:84px 80px}

/* Abschnitt 9 – Ausführung und Wiederinbetriebnahme. Kopf (H2 → Einleitung einspaltig), Foto in Containerbreite mit Bildzeile, Titel Oswald Medium Versalien 22 px, Text; aktive Zeile beim Scrollen rot mit Balken links){background:#fff;color:#111;padding-block:84px 80px}
/* Zeitbegriffe als Zeitleiste im dunklen Band (Baustein Rutschhemmung 5: #0B0B0B, 56/64; Linie mit Marken{margin:96px 0 0;background:linear-gradient(180deg,#2a2e33 0,#121315 18%,#050506 45%,#000 100%);color:#fff;padding:56px 0 64px;position:relative}

/* Band Zeitbegriffe: links Negativzeichnung (rote Linien auf Schwarz, Baustein „Technische Negativzeichnung“ Fugensanierung 2), rechts senkrechte Zeitleiste; beim Erreichen läuft die Linie{padding:72px 0 72px;overflow:hidden}
/* Technische Negativzeichnung (Baustein Fugensanierung 2{min-width:0;margin-right:calc(-1 * max(16px,(var(--vw,100vw) - 1240px)/2))}
/* Band Zeitbegriffe, Fassung 03.11.2026: Zeichnung in voller Breite, darunter die fünf Zeitbegriffe in einer Reihe; rote Linie läuft waagerecht{display:grid;grid-template-columns:1fr;gap:56px}

/* Abschnitt 10 – Kosten und Angebotsgrundlage: Kopf, Leitabsatz, Faktorenband 3×2 (Baustein Arbeitssicherheit 7 / FTS-AMR 8, hier mit Erläuterungszeile){background:#fff;color:#111;padding-block:84px 80px}

/* Abschnitt 11 – Anfrage: kurzes Formular der Unterseiten (Arbeitssicherheit 14 / POWERFLEX 10){background:#f6f5f2;color:#111;padding:84px 0 110px;scroll-margin-top:calc(var(--hdr) + 20px)}
/* Abschnitt 12 – FAQ: Baustein Fugensanierung 12 (Akkordeon, Ziffer rot, Plus/Minus){background:#fff;color:#111;padding-block:84px 90px;box-shadow:inset 0 1px 0 var(--hair)}

/* Grundkonzept Titel Hauptseiten (EBALAN 03.11.2026): Kasten vom linken Fensterrand über den roten Faden hinaus, auf jeder Bildschirmgröße; keine Subline, kein Knopf, kein Hinweis; Zeile 2 bündig mit dem Kastentext */
.nf-sa .hero h1 .l1 { margin-left:calc(-1 * max(16px,(var(--vw,100vw) - 1240px)/2 + 16px));padding:22px 36px 20px max(16px,calc((var(--vw,100vw) - 1240px)/2 + 16px + 32px));width:max-content;max-width:calc(560px + max(16px,(var(--vw,100vw) - 1240px)/2 + 16px));box-sizing:border-box }
.nf-sa .hero h1 .l2 { margin:24px 0 0 32px;line-height:1.25 }
.nf-sa .hero .box { max-width:560px }
@media (min-width:1830px) {
  .nf-sa .hero .box { max-width:none;width:calc((var(--vw,100vw) - 1240px)/2 + 80px);margin-left:calc((1240px - var(--vw,100vw))/2 - 16px);padding-left:48px }
  .nf-sa .hero h1 .l1 { min-width:min-content }
  .nf-sa .hero h1 .l1 { margin-left:-48px;padding:26px 36px 24px 48px;max-width:none;width:auto;font-size:clamp(30px,2.9vw,46px) }
  .nf-sa .hero h1 .l2 { margin-left:0;padding-right:60px }
}
@media (max-width:720px) {
  .nf-sa .hero h1 .l1 { max-width:none;width:auto;padding-right:28px }
}
/* Foto-Bühne auf breiten Bildschirmen: Foto in voller Höhe rechts, nichts beschnitten (Regelwerk 7, EBALAN 05.11.2026) */
/* Titelkasten ab 1830 px höchstens zwei Zeilen (EBALAN 05.11.2026: „der rote Balken ist sehr dick“) – Mindestbreite statt fester Schmalbreite, Text ausgeglichen */
@media (min-width:1830px) {
  html body .nf-sa .hero h1 .l1 { min-width:min(900px,56vw)!important;padding-right:64px!important;text-wrap:balance }
}
/* ===== Vinylsysteme Abschnitt 1 – Fläche für Fläche: Auftakt (Überzeile, Leitsatz, Knopf; aus dem Titel nach Regelwerk v1.5 verschoben), Kopf H2 54 px + Einleitung, Fotoband 21:9, Namensreihe ===== */
/* Abschnitt 1 Ende – Referenzblock 5j (Fassung b: H3 mit roter Pointe + roter Knopf), Skript und Maße aus Startseite 4 */
/* Kopfleiste: kein seitliches Scrollen bei 1024 px und unter 400 px (Prüfung 05.11.2026 – betraf alle Entwürfe) */
/* ===== Abschnitt 2 – Was vorher geklärt wird: Kopf (Überzeile → H2 → Einleitung), Fotoband 21:9 im Container mit nummerierten Markierungen + Faktorenband (Baustein Polymerfuge 9: Überfahren/Antippen färbt Markierung und Begriff gemeinsam rot), danach zwei gleichrangige Absätze zweispaltig (nach einem Medium, Regel 1b) ===== */
/* Abschnitt 2 Fassung 3 (EBALAN 05.11.2026: „auf dem Bild digital einrahmen und eine Verbindung zu den unteren Punkten“): Eckrahmen im Foto, Verbindungslinie zum Begriff im Faktorenband; Begriffe von links nach rechts in Bildreihenfolge */
/* Abschnitt 2: aktiver Rahmen als Lichtkegel – Umgebung abgedunkelt, Rahmenfläche bleibt hell (EBALAN 05.11.2026, Frage Deckkraft) */
/* ===== Abschnitt 3 – Eignung und Alternativen: Kopf mit roter Pointe, Einleitung zwei Absätze 1:1, Faktorenband 3×2 (Baustein Bodenbeschichtung 10 / Arbeitssicherheit 7, Begriffe wörtlich aus den Absätzen), Weiche 1:1 (links Leitabsatz, rechts zwei große Textlinks auf die Hauptseiten) ===== */
/* Abschnitt 3 Fassung 2 (EBALAN 05.11.2026: Faktorenband „überhaupt nicht schön“): dunkles Band 5h über die volle Breite – links vier Fälle (Ziffer Oswald Light, Begriff weiß, Bedeutung aus dem Text), rechts Detailfoto K7-15 in voller Höhe; beim Erreichen läuft die rote Linie, Ziffern zünden nacheinander rot */
/* Weiche: Absatz in Fließtext statt Oswald (EBALAN 05.11.2026: „Text darunter ist dick“ – Regel 1b, kein großer Satz als Textspalte) */
/* ===== Abschnitt 4 – Die entscheidenden Stellen (Fassung 2, EBALAN 05.11.2026 „absolutes Weltklasse“): Kopf + Einleitung (Absatz 1) → Fotoband 21:9 im Container mit drei Hinweisen (Begriffe aus Absatz 1, nur das Profil rot) → dunkles Band 5h mit Absatz 2, technischer Negativzeichnung 5i (Axonometrie einer Plattenfläche; einziges rotes Element: die Plattenkante = Ränder) mit sechs Callouts aus Absatz 2, Schlusszeile Absatz 3 ===== */
/* ===== Abschnitt 5 – Lose oder verklebt: Kopf + Einleitung, zwei gleichrangige Systemkarten 1:1 (dunkles Produktfoto 4:3 mit Detailkreis „Lupe“ nach 5i, darunter Systemkennung, H3-Zusatz und Absatz), Schlussabsatz ===== */
/* Abschnitt 5 Fassung 2 (EBALAN 05.11.2026: Konzept aus Abschnitt 2 übernehmen): Entnahmebereich als Eckrahmen im Produktfoto, zwei Tangentenlinien zum Detailkreis (Regel 5i Detailkreis); beim Erreichen zeichnen sich Rahmen und Linien ein, dann leuchtet F7-15, danach K7-15 rot auf (Lichtkegel wie Abschnitt 2); Überfahren einer Karte = diese Karte */
/* Abschnitt 5 Fassung 3 (EBALAN 05.11.2026): Detail als Rechteck mit Eckwinkeln statt Kreis, Verbindung als eine Leitlinie mit Punkt am Rahmen (Callout wie Bodenbeschichtung 9 / Polymerfuge 9) */
/* Abschnitt 5: Abstand Foto → Systemkennung gestrafft (Gegenprüfung 05.11.2026) */
/* Abschnitt 5 Variante „immer rot“ (Ansicht EBALAN 05.11.2026): Rahmen, Schild, Leitlinie, Punkt, Eckwinkel und Etikett dauerhaft rot, keine Abdunklung, Kennung bleibt schwarz */
/* ===== Abschnitt 6a – Kfz-Werkstatt: Kopf mit roter Pointe + Einleitung (Absatz 1), Fotoband über die volle Fensterbreite 21:9 (Regel 1b: Medien in Containerbreite oder volle Fensterbreite), danach zwei gleichrangige Absätze 1:1, Textlink zur Werkstatt-Unterseite (noch nicht klickbar) ===== */
/* Pfeil-Links nach Regelwerk 1 (Prüfung 05.11.2026, Vergleich Startseite 2 / Bodenbeschichtung 6): Oswald Medium Versalien 12,5 px, .1em, #111, Pfeil 16 px, nie unterstrichen, Rot nur beim Überfahren */
html body .nf-sa .sec .more { display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:500;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#111;text-decoration:none;border:0;padding:0;transition:color .3s }
html body .nf-sa .sec .more i { display:inline-flex }
html body .nf-sa .sec .more svg { width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:square;transition:transform .3s }
html body .nf-sa .sec a.more:hover { color:var(--red) }
html body .nf-sa .sec a.more:hover svg { transform:translateX(4px) }
/* roter Pfeil-Link für Verweis auf eine eigene Unterseite (wie Fugensanierung „Industrieböden für FTS und AMR ansehen“) */
html body .nf-sa .sec .more.red { color:var(--red) }
/* ===== Abschnitt 6b – Halle, Lager, Produktion: Kopf + Einleitung, zwei gleichrangige Einsatzbereiche 1:1 an der Mittellinie (Haarlinie oben, beim Erreichen läuft der rote Strich einmal über die Breite); je Bereich Etikett, H3 (Live-Zwischenüberschrift), Absatz – ohne Foto, bis Hallen-/Produktionsfotos vorliegen (Regel 1c: kein Foto doppelt) ===== */
/* ===== Abschnitt 7 – Platte für Platte: Kopf + Einleitung (zwei Absätze 1:1), dunkles Band 5h mit Plattenfeld in der Draufsicht (Austausch einer Platte in drei Schritten, Schrittleiste darunter zündet mit), zwei Systemspalten F7-15/K7-15 wie Abschnitt 6b, Schlussabsatz ===== */
/* Abschnitt 7 Fassung 2 (EBALAN 05.11.2026 „auf einem Originalbild“): Austausch auf der Originalaufnahme – die Platte wird rot umrandet, hebt sich mit Schatten heraus (darunter dunkle Aussparung) und setzt sich als neue Platte wieder ein; keine Schäden ins Foto gezeichnet */
/* Abschnitt 7 Fassung 3 (EBALAN 05.11.2026: Herausziehen „nicht so schön“): Platte wird rot umrandet und leicht abgedunkelt (01), eine rote Linie fährt einmal über die Platte und legt dahinter die neue, etwas hellere Platte frei (02–03) */
/* Abschnitt 7 Fassung 4 (EBALAN 05.11.2026 „das Raster zeigen, auf Herausnehmen und Ersetzen zeigen – absolut High End“): Originalaufnahme, Fugenraster zeichnet sich als feine Lichtlinien nach, eine Platte erhält Eckwinkel; zwei Callouts mit Leitlinie, Punkt und Etikett: 01 Herausnehmen, 02 Ersetzen – keine Bildmanipulation */
/* Abschnitt 7: Band hell statt dunkel (EBALAN 05.11.2026 „besser auf weißem Hintergrund“) – Foto im Container wie Abschnitt 2 */
/* Abschnitt 7: Fugenraster exakt auf den Fugen der Aufnahme (Linien per Bildanalyse auf die Fugenmitte gelegt, Abweichung < 3 px), Etiketten kleiner (EBALAN 05.11.2026) */
/* Abschnitt 7: erst Originalfarbe, dann leicht abgedunkelt (Fugen leuchten), ab Schritt 01 Lichtkegel – alles außer der markierten Platte noch etwas dunkler (wie Abschnitt 2) */
/* Abschnitt 7 Ablauf neu (EBALAN 05.11.2026): 1 Originalfarbe → 2 abdunkeln → 3 erst dann fahren die Fugenlinien ein → 4 Platte markiert, Lichtkegel, 01 Herausnehmen → 02 Ersetzen */
/* Systemspalten Abschnitt 6b/7: Kennung groß schwarz wie Abschnitt 5 statt kleiner roter Etiketten (Regel „Rot nur als Signal“: zwei rote Etiketten zeigen auf nichts) */
/* ===== Abschnitt 8 – Was den Aufwand bestimmt: Kopf + Einleitung (Absatz 1), dunkles Band 5h wie Abschnitt 3 (sechs Faktoren in zwei Spalten, Begriffe und Erläuterungen wörtlich aus Absatz 2–3, Foto Plattenecke rechts), danach Absatz 2 und 3 nebeneinander (nach einem Medium), Schlussblock Absatz 4 + roter Knopf ===== */
/* Abschnitt 8 Fassung 2 (EBALAN 05.11.2026: dunkles Band „sieht aus wie der andere Abschnitt“): Faktorenband 3×2 auf Weiß – Baustein Bodenbeschichtung 10 „Kosten und Angebotsgrundlage“ (Haarlinien, Ziffer, Begriff, Erläuterungszeile); Überfahren: roter Strich oben, Ziffer rot */
/* Abschnitt 8: Absätze 2–3 direkt unter die Einleitung (EBALAN 05.11.2026), eine Spalte (Regel 1b: ohne Medium dazwischen keine zwei Spalten), danach Faktorenband, Schluss + Knopf */
/* ===== Abschnitt 9 Anfrage – Kurzformular 1:1 wie Bodenbeschichtung 11 (Regelwerk 1-0) ===== */
/* Abschnitt 11 – Anfrage: kurzes Formular der Unterseiten (Arbeitssicherheit 14 / POWERFLEX 10), Entscheidung EBALAN 03.11.2026: kurzes Formular auf allen Seiten */
/* ===== Abschnitt 10 FAQ – Akkordeon 1:1 wie Bodenbeschichtung 12, 12 Fragen aus dem Wortlaut ===== */
/* Abschnitt 12 – FAQ: Baustein Fugensanierung 12 (Akkordeon, Ziffer rot, Plus/Minus), Kopf links haftend; Farben nach Regelwerk */
/* Strichstärke einheitlich 3 px wie roter Faden (Regelwerk 1-0, EBALAN 05.11.2026) */
/* Pfeil-Links immer rot (EBALAN 05.11.2026 „Verlinkungen müssen rot sein“, Regelwerk 1) */
html body .nf-sa .sec .more, html body .nf-sa .sec a.more { color:var(--red) }
html body .nf-sa .sec a.more:hover { color:#c00000 }
/* ===== Abschnitt 2b – Schwerlast (neu 05.11.2026, Text EBALAN): Kopf mit roter Pointe + Text links, rechts schematische Platte (Schrägansicht): Platte → Raster erscheint → roter Lastpfeil setzt auf → Last verteilt sich als Welle über das Raster (Zellen färben sich von innen nach außen, schwächer werdend); bei jedem Erreichen neu ===== */
@keyframes rp2b { 0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(6)} }
/* Abschnitt 2b Fassung 2 (EBALAN 05.11.2026 „Originalbild“): Originalaufnahme K7-15 (zwei verschweißte Platten), Raster legt sich perspektivisch auf die Plattenfläche, Lastpfeil setzt auf, Last verteilt sich über das Raster und über die Naht hinweg (Zellen färben sich von innen nach außen, schwächer werdend) */
/* 2b v4: Schatten der Last */
/* 2b v2: schräger Lastpfeil, Lastwellen (Prinzip POWERFLEX s4) */
@keyframes v2b { 0%{transform:translateY(-40px)}28%{transform:translateY(0)}62%{transform:translateY(0)}100%{transform:translateY(-40px)} }
@keyframes s2bst { 0%,22%{transform:scale(.2);opacity:0}32%{transform:scale(.6);opacity:1}62%{transform:scale(1);opacity:.8}100%{transform:scale(1.1);opacity:0} }
@keyframes w2b { 0%{opacity:0}6%{opacity:1}38%{opacity:0}100%{opacity:0} }
/* ===== Regelprüfung 05.11.2026 abends – Korrekturen ohne Rückfrage ===== */
/* Regel 1c/1a: Abschnittsabstände 84 px oben / 80 px unten */
/* Regel 5h: dunkles Band 72 px oben / 72 px unten, Abstand davor 64–84 px */
/* Regel 1b: Bild + Text 1 : 1 an der Mittellinie, Text oben bündig */
/* Regel 1b: einspaltige Einleitung über einem 1 : 1-Raster endet vor der Mittellinie */
/* Regel 1: Montserrat nur 400/500/600 */
/* ===== Entscheidungen EBALAN 05.11.2026 23:04 ===== */
/* 5: Beschriftungen in Grafiken einheitlich Oswald 15 px, normale Schreibweise (Regel 1c) */
/* 6: Faktorenband 1:1 nach Baustein Bodenbeschichtung 10 */
/* s6: Link direkt im Kopf unter Überschrift und Einleitung (EBALAN 05.11.2026) */
/* s2b Kennzahl „bis 45 t“ – Baustein Projektkarte mit Kennzahl (Fugensanierung 8), Unterlinie 3 px nach Regel Strichstärke */
/* ===== Werkstattboden: Unterseite hell (Muster C), Titel mit Pfadzeile (Regelwerk 1) ===== */
html body .nf-sa .hero .crumb { margin:0 0 18px;font-family:var(--display);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#bdbab4;line-height:1.4 }
html body .nf-sa .hero .crumb b { color:#fff;font-weight:500 }
html body .nf-sa .hero h1 .l1 { font-size:clamp(26px,2.1vw,40px) }
@media (min-width:1830px) {
  html body .nf-sa .hero h1 .l1 { font-size:clamp(30px,2.5vw,48px) }
}
html body .nf-sa .hero .credit { position:absolute;right:max(16px,calc((var(--vw,100vw) - 1240px)/2 + 16px));bottom:22px;margin:0;font-family:var(--display);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8);z-index:2 }
/* Werkstattboden 1: erster Abschnitt nach dem Titel (Regel 1a) */
/* ===== Werkstattboden 2 · Vom Pkw bis zum Nutzfahrzeug: Bild + Text 1:1 (1b) mit Kennzahl (Projektkarte, Fugensanierung 8) ===== */
/* ===== Werkstattboden 3 · Rund um Hebebühne und Grube: Fotoband mit Hinweismarken (Baustein Vinylsysteme 4) ===== */
/* 3: nur die Hebebühne – Spotlight, Eckmarken, Etikett (Wunsch EBALAN 06.11.2026) */
/* ===== Werkstattboden 4 · Motoröl, Bremsflüssigkeit, Kühlmittel: Stoffreihe mit Tropfen + Gegenüberstellung ===== */
@keyframes dr4 { 0%{transform:translateY(-26px);opacity:0}35%{opacity:1}80%{transform:translateY(2px)}100%{transform:none;opacity:1} }
/* 3 Vollbild-Band wie Referenzblock Vinylsysteme 1 (Wunsch EBALAN 06.11.2026): Foto über die volle Breite, links abgedunkelt mit Text, nur die Hebebühne markiert */
/* 3: Überschrift und Einleitung ebenfalls im Vollbild (Wunsch EBALAN 06.11.2026) */
/* 4: Bild + Text 1:1 mit Öl-Foto (Wunsch EBALAN 06.11.2026) */
/* ===== Werkstattboden 5 · Arbeitsplatz für Arbeitsplatz: schematischer Grundriss, Arbeitsplätze werden nacheinander erneuert ===== */
/* 5 isometrisch, Endbild selbsterklärend (EBALAN 06.11.2026: „auch ohne Animation erkennbar“) */
/* 5 ohne Fahrzeuge: AP3 halb verlegt = Arbeit läuft (EBALAN 06.11.2026) */
/* ===== Werkstattboden 6 · Platte ersetzen: Fotoband 21:9 volle Breite, beschädigte Platte markiert (Prinzip Vinylsysteme 7), Endbild selbsterklärend ===== */
/* 6: alle Absätze zusammen unter der Überschrift, Bild am Ende (Wunsch EBALAN 06.11.2026, wie Vinylsysteme 8) */
/* ===== Werkstattboden 7 · Platten oder Beschichtung: Gegenüberstellung zweier Wege ===== */
/* 7: je Weg ein Produktfoto (Wunsch EBALAN 06.11.2026) */
/* ===== Werkstattboden 8 · Was den Aufwand bestimmt: Faktorenband (Baustein Vinylsysteme 8 / Bodenbeschichtung 10) ===== */
/* ===== Werkstattboden 9 · Anfrage: Kurzformular 1:1 (Regelwerk 1-0) ===== */
/* ===== Werkstattboden 10 · FAQ (Baustein Vinylsysteme 10) ===== */
html body .nf-sa .hero .crumb { white-space:nowrap }
html body .nf-sa .hero .crumb a { color:inherit;text-decoration:none }
html body .nf-sa .hero .bg img { object-position:45% 70% }
@media (min-width:901px) {
  html body .nf-sa #s0 .bg { background:#0b0b0b }
  html body .nf-sa #s0 .bg img { position:absolute;top:0;right:0;left:auto;width:max(80%,calc((min(100vh,1200px) - var(--hdr,80px))*4/3));max-width:100%;height:100%;object-fit:cover;object-position:45% 75%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 160px,rgba(0,0,0,.8) 300px,#000 420px);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 160px,rgba(0,0,0,.8) 300px,#000 420px) }
}
html body .nf-sa #s0 .bg::after { background:linear-gradient(90deg,rgba(11,11,11,.8) 0,rgba(11,11,11,.55) 26%,rgba(11,11,11,.05) 58%),linear-gradient(0deg,#0b0b0b 0,rgba(11,11,11,.6) 14%,rgba(11,11,11,0) 42%) }
@media (max-width:720px) {
  html body .nf-sa .hero .crumb { font-size:12px;letter-spacing:.12em;white-space:nowrap }
  html body .nf-sa .hero .credit { left:24px;right:16px;text-align:right;font-size:11px;line-height:1.5 }
}
/* ===== Gemeinsame Bausteine dunkle Abschnitte (Muster B) ===== */
.nf-sa .dk > section { background:#0b0b0b;color:#fff;padding-block:120px 112px }
.nf-sa .dk .kicker, .nf-sa .kicker { position:relative;margin:0 0 14px;padding-left:18px;font-family:var(--display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#6f6c67;line-height:1.4 }
.nf-sa .dk .kicker { color:#bbb }
.nf-sa .kicker::before { content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--red) }
.nf-sa .dk h2, .nf-sa .lt h2 { margin:0;font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,46px);line-height:1.25;max-width:22ch;text-wrap:balance }
.nf-sa .dk h2 { color:#fff }
.nf-sa .dk h2 em, .nf-sa .lt h2 em { font-style:normal;color:var(--red) }
.nf-sa .dk h3, .nf-sa .lt h3 { margin:0 0 16px;font-family:var(--display);font-weight:400;font-size:28px;line-height:1.25;text-wrap:balance }
.nf-sa .dk h3 { color:#fff }
.nf-sa .dk p { color:#cfcbc4;font-size:16px;line-height:1.7;margin:0 0 20px;hyphens:auto }
.nf-sa .dk .lead, .nf-sa .lt .lead { margin:28px 0 0;max-width:min(68ch,calc(50% - 32px));font-size:16px }
.nf-sa .dk .lead { color:#fff }
.nf-sa .dk .two, .nf-sa .lt .two { display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:28px }
.nf-sa .dk .two p, .nf-sa .lt .two p { margin:0;font-size:16px }
.nf-sa .btn { display:inline-block;margin-top:40px;font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:13.5px;letter-spacing:.06em;padding:14px 28px;background:var(--red);color:#fff;text-decoration:none;white-space:nowrap;transition:background .3s }
.nf-sa .btn:hover { background:#c00000 }
.nf-sa .dk .bz { margin:12px 0 0;font-family:var(--display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8d8a85 }
.nf-sa .dk figure { margin:0 }
.nf-sa .dk .fr { position:relative;overflow:hidden;background:#151515 }
.nf-sa .dk .fr img { display:block;width:100%;height:100%;object-fit:cover }
.nf-sa .dk .tag { position:absolute;left:0;bottom:0;padding:9px 14px;font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:#0b0b0b;color:#fff }
.nf-sa .dk .tag b { color:var(--red);font-weight:400;margin-right:8px }
.nf-sa a.more { display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);text-decoration:none;transition:color .3s }
.nf-sa a.more:hover { color:#c00000 }
.nf-sa a.more svg { width:16px;height:16px;transition:transform .3s }
.nf-sa a.more:hover svg { transform:translateX(4px) }
.nf-sa .rv { opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease }
.nf-sa .rv.on { opacity:1;transform:none }
/* Manifest */
.nf-sa #s0b > section { min-height:calc(min(100vh,1200px) - var(--hdr,80px));display:flex;align-items:center;padding-block:120px }
.nf-sa #s0b section > .wrap { width:100% }
.nf-sa #s0b h2 { font-size:clamp(34px,4.8vw,54px);max-width:18ch }
.nf-sa #s0b .two { margin-top:36px }
@media (max-width:900px) {
  .nf-sa .dk .lead, .nf-sa .lt .lead { max-width:none }
  .nf-sa .dk > section { padding-block:88px 80px }
  .nf-sa .dk .two, .nf-sa .lt .two { grid-template-columns:1fr;gap:16px }
  .nf-sa #s0b > section { min-height:0;padding-block:96px 80px }
}
/* Regelwerk 1d (08.11.2026): zwei kurze/ungleiche Absätze einspaltig */
html body .nf-sa .two.solo { display:block!important;max-width:min(68ch,calc(50% - 32px))!important;column-count:1!important }
html body .nf-sa .two.solo > * { max-width:none!important }
html body .nf-sa .two.solo > * + * { margin-top:20px!important }
@media (max-width:900px) {
  html body .nf-sa .two.solo { max-width:none!important }
}
.nf-sa #s1 > section { padding-top:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);padding-top:120px }
.nf-sa #s1 .vf { display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:64px;align-items:start }
.nf-sa #s1 .fr { aspect-ratio:4/5 }
.nf-sa #s1 article .bz { margin:12px 0 24px auto;width:fit-content;text-align:right }
@media (max-width:900px) {
  .nf-sa #s1 .vf { grid-template-columns:1fr;gap:56px;margin-top:40px }
  .nf-sa #s1 .fr { aspect-ratio:4/3 }
}
.nf-sa #s1 .fr { aspect-ratio:3/4 }
.nf-sa #s2 > section { padding-top:0 }
.nf-sa #s2 .band { position:relative;margin:0 calc(50% - var(--vw,var(--vw,100vw))/2);height:min(calc(min(100vh,1200px) - var(--hdr,80px)),920px);min-height:620px;overflow:hidden;background:#0b0b0b }
.nf-sa #s2 .band img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62% }
.nf-sa #s2 .band::before { content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,11,11,.8) 0,rgba(11,11,11,.55) 28%,rgba(11,11,11,0) 52%),linear-gradient(180deg,rgba(11,11,11,.55) 0,rgba(11,11,11,0) 42%),linear-gradient(0deg,rgba(11,11,11,.9) 0,rgba(11,11,11,0) 22%) }
.nf-sa #s2 .ov { position:absolute;z-index:2;left:0;right:0;top:120px }
.nf-sa #s2 .band h2 { max-width:15ch }
.nf-sa #s2 .kz { display:flex;flex-direction:column;gap:10px;margin-top:48px }
.nf-sa #s2 .kz .n { font-family:var(--display);font-weight:400;font-size:clamp(56px,6vw,88px);line-height:1;color:var(--red) }
.nf-sa #s2 .kz .l { font-family:var(--display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#bbb }
.nf-sa #s2 .cap { position:absolute;z-index:2;right:max(16px,calc((var(--vw,var(--vw,100vw)) - 1240px)/2 + 16px));bottom:20px;font-family:var(--display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#bbb }
.nf-sa #s2 .two { margin-top:48px }
@media (max-width:900px) {
  .nf-sa #s2 .band { display:flex;flex-direction:column;height:auto;min-height:0 }
  .nf-sa #s2 .band::before { display:none }
  .nf-sa #s2 .ov { position:relative;top:auto;order:-1;padding:80px 0 32px }
  .nf-sa #s2 .band img { position:relative;height:62vw }
  .nf-sa #s2 .cap { position:relative;right:auto;bottom:auto;padding:10px 16px 0;color:#8d8a85 }
  .nf-sa #s2 .two { margin-top:48px }
}
/* breite Bildschirme: Foto vollständig rechts, links Schwarz (wie Hallenboden 5) */
@media (min-width:901px) {
  .nf-sa #s2 .band img { left:auto;right:0;width:max(78%,calc(min(min(100vh,1200px) - var(--hdr,80px),920px)*4/3));height:100%;max-width:100%;object-fit:cover;object-position:50% 88%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 320px);mask-image:linear-gradient(90deg,transparent 0,#000 320px) }
  .nf-sa #s2 .band::before { background:linear-gradient(90deg,rgba(11,11,11,.7) 0,rgba(11,11,11,.35) 30%,rgba(11,11,11,0) 50%),linear-gradient(180deg,rgba(11,11,11,.45) 0,rgba(11,11,11,0) 38%),linear-gradient(0deg,rgba(11,11,11,.85) 0,rgba(11,11,11,0) 18%) }
}
.nf-sa #s3 > section { background:linear-gradient(180deg,#0b0b0b 0,#141413 100%) }
.nf-sa #s3 .mat { margin-top:64px;border-bottom:1px solid rgba(255,255,255,.18) }
.nf-sa #s3 .m { display:grid;grid-template-columns:1fr 1fr;gap:0 64px;border-top:1px solid rgba(255,255,255,.18);padding:32px 0 20px }
.nf-sa #s3 .m .hd { display:block }
.nf-sa #s3 .m .no { display:block;margin-bottom:10px;font-family:var(--display);font-size:15px;letter-spacing:.08em;color:var(--red) }
.nf-sa #s3 .m h3 { margin:0 }
.nf-sa #s3 .m p { margin:0 }
.nf-sa #s3 .gn { display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:96px;align-items:start }
.nf-sa #s3 .pair { display:grid;grid-template-columns:1fr 1fr;gap:4px }
.nf-sa #s3 .pair .fr { aspect-ratio:3/4 }
.nf-sa #s3 .pair .bz { grid-column:1/-1;justify-self:end;text-align:right }
@media (max-width:900px) {
  .nf-sa #s3 .mat { margin-top:40px }
  .nf-sa #s3 .m { grid-template-columns:1fr;gap:12px }
  .nf-sa #s3 .gn { grid-template-columns:1fr;gap:32px;margin-top:64px }
}
/* Zwischen-Überzeilen-Stil (Regelwerk: Ziffern grau mit rotem Strich) */
.nf-sa #s3 .m .no { position:relative;padding-left:18px;font-size:13px;letter-spacing:.16em;color:#bbb }
.nf-sa #s3 .m .no::before { content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--red) }
.nf-sa #s3 .pair .bz { width:fit-content }
.nf-sa #s4 > section { background:#141413 }
.nf-sa #s4 .sp { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-top:28px }
.nf-sa #s4 .sp .lead { margin:0 0 20px;max-width:none }
.nf-sa #s4 .end { margin:28px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.18) }
.nf-sa #s4 .fr { aspect-ratio:3/4 }
.nf-sa #s4 .bz.r { text-align:right }
@media (max-width:900px) {
  .nf-sa #s4 .sp { grid-template-columns:1fr;gap:40px }
  .nf-sa #s4 .bz.r { text-align:left }
}
.nf-sa #s5 > section { background:#fff;color:#111;padding-block:84px 80px }
.nf-sa .lt h2 { color:#111 }
.nf-sa .lt h2 { max-width:24ch }
.nf-sa #s5 .one { margin-top:28px;max-width:68ch }
.nf-sa #s5 .one p { font-size:16px;line-height:1.7;color:#1a1a1a;hyphens:auto;margin:0 0 20px }
.nf-sa #s5 .one p:last-child { margin-bottom:0 }
.nf-sa #s6 .ang10 { background:#f6f5f2;color:#111;padding:84px 0 110px;scroll-margin-top:calc(var(--hdr) + 20px) }
.nf-sa #s6 h2 { font-family:var(--display);font-weight:400;font-size:clamp(32px,3.4vw,52px);line-height:1.25;margin:0 0 44px;text-wrap:balance;max-width:22ch;color:#111 }
.nf-sa #s6 h2 em { font-style:normal;color:var(--red) }
.nf-sa #s6 .grid { display:grid;grid-template-columns:7fr 4fr;gap:72px;align-items:start }
.nf-sa #s6 form { display:grid;grid-template-columns:1fr 1fr;gap:28px 32px }
.nf-sa #s6 .f { display:flex;flex-direction:column;gap:6px;min-width:0 }
.nf-sa #s6 .f.full { grid-column:1/-1 }
.nf-sa #s6 label { font-family:var(--display);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#1a1a1a }
.nf-sa #s6 label i { font-style:normal;color:var(--red) }
.nf-sa #s6 label small { text-transform:none;letter-spacing:0;font-family:var(--body);font-size:11.5px;color:#6f6c67;margin-left:8px }
.nf-sa #s6 .in { border:0;border-bottom:1px solid #bdbab4;background:transparent;padding:10px 0;font:inherit;font-size:15.5px;color:#111;outline:0;width:100% }
.nf-sa #s6 .in:focus { border-bottom-color:var(--red) }
.nf-sa #s6 .up { border:1px dashed #bdbab4;padding:22px;display:flex;gap:22px;align-items:center;background:#fff }
.nf-sa #s6 .up .t { font-family:var(--display);font-size:15px;letter-spacing:.03em }
.nf-sa #s6 .up .s { font-size:13px;color:#1a1a1a;margin-top:4px }
.nf-sa #s6 .up .b { margin-left:auto;border:1px solid #111;padding:9px 16px;font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap }
.nf-sa #s6 .chk { display:flex;flex-direction:row;gap:12px;align-items:flex-start;font-size:13px;color:#1a1a1a }
.nf-sa #s6 .chk .box { width:18px;height:18px;border:1px solid #bdbab4;background:#fff;flex:none;margin-top:2px }
.nf-sa #s6 .req { font-size:12px;color:#1a1a1a;grid-column:1/-1;margin:-10px 0 0 }
.nf-sa #s6 .req i { font-style:normal;color:var(--red) }
.nf-sa #s6 .btn { display:inline-block;font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:0;font-size:14px;padding:16px 40px;background:var(--red);color:#fff;justify-self:start;cursor:pointer;white-space:nowrap }
.nf-sa #s6 .side p { margin:0 0 18px;color:#1a1a1a;font-size:15.5px;line-height:1.7 }
.nf-sa #s6 .side p.hi { color:#111 }
.nf-sa #s6 .side .k { font-family:var(--display);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#1a1a1a;margin:32px 0 8px }
.nf-sa #s6 .side .big { font-family:var(--display);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.2;color:#111;display:block;text-decoration:none }
.nf-sa #s6 .side .mail { font-family:var(--display);font-size:20px;line-height:1.3;color:#111;display:block;margin-top:6px;text-decoration:none }
.nf-sa #s6 .side .mail b { color:var(--red);font-weight:400 }
@media (max-width:900px) {
  .nf-sa #s6 .grid { grid-template-columns:1fr;gap:44px }
}
@media (max-width:600px) {
  .nf-sa #s6 form { grid-template-columns:1fr }
  .nf-sa #s6 .f.full, .nf-sa #s6 .req { grid-column:1 }
  .nf-sa #s6 .up { flex-direction:column;align-items:flex-start }
  .nf-sa #s6 .up .b { margin-left:0 }
}
html body .nf-sa #s6 h2 em, html body .nf-sa #s11 h2 em { display:block }
.nf-sa #s6 .kicker { position:relative;margin:0 0 14px;padding-left:18px;font-family:var(--display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#6f6c67;line-height:1.4 }
.nf-sa #s6 .kicker::before { content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--red) }
.nf-sa #s7 > section { background:#fff;color:#111;padding-block:84px 90px;box-shadow:inset 0 1px 0 var(--hair) }
.nf-sa #s7 .grid { display:grid;grid-template-columns:4fr 8fr;gap:64px;align-items:start }
.nf-sa #s7 .head { position:sticky;top:120px }
.nf-sa #s7 h2 { font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,46px);line-height:1.25;margin:0;text-wrap:balance }
.nf-sa #s7 .list { border-top:1px solid var(--hair) }
.nf-sa #s7 details { border-bottom:1px solid var(--hair) }
.nf-sa #s7 summary { list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr 28px;gap:0 16px;align-items:baseline;padding:22px 0 }
.nf-sa #s7 summary::-webkit-details-marker { display:none }
.nf-sa #s7 summary .n { font-family:var(--display);font-size:14px;letter-spacing:.08em;color:var(--red);font-variant-numeric:tabular-nums }
.nf-sa #s7 summary .q { font-family:var(--display);font-weight:400;font-size:clamp(18px,1.9vw,22px);line-height:1.25;color:#111;transition:color .2s }
.nf-sa #s7 summary:hover .q { color:var(--red) }
.nf-sa #s7 summary .pm { position:relative;width:16px;height:16px;align-self:center;justify-self:end }
.nf-sa #s7 summary .pm::before, .nf-sa #s7 summary .pm::after { content:"";position:absolute;left:0;top:7px;width:16px;height:1.5px;background:#111;transition:transform .25s }
.nf-sa #s7 summary .pm::after { transform:rotate(90deg) }
.nf-sa #s7 details[open] summary .pm::after { transform:rotate(0) }
.nf-sa #s7 details[open] summary .q { color:var(--red) }
.nf-sa #s7 .a { padding:0 44px 28px 60px }
.nf-sa #s7 .a p { margin:0;color:#1a1a1a;font-size:15px;line-height:1.7;max-width:66ch }
@media (max-width:900px) {
  .nf-sa #s7 .grid { grid-template-columns:1fr;gap:28px }
  .nf-sa #s7 .head { position:static }
  .nf-sa #s7 summary { grid-template-columns:34px 1fr 22px }
  .nf-sa #s7 .a { padding:0 0 26px 0 }
}
.nf-sa #s7 h2 em { font-style:normal;color:var(--red) }
html body .nf-sa #s7 h2 em, html body .nf-sa #s7 h2 em { display:block }
.nf-sa #s7 .kicker { position:relative;margin:0 0 14px;padding-left:18px;font-family:var(--display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#6f6c67;line-height:1.4 }
.nf-sa #s7 .kicker::before { content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--red) }
.nf-sa #s6 .kicker { margin-bottom:14px }
.nf-sa #s7 .head .kicker { margin-bottom:14px }
.nf-sa #s7 .a .more { display:inline-flex;margin:4px 0 8px }

/* ======================================================= (B) Anpassungen an das Theme - Schwerlastanker entfernen neues Design (Marvin PR #18, 05.11.2026; Muster = block-b-sp.css) =======================================================
   Nur mit technischem Grund. Kopfleiste (Hoehe --nf-hdr, Satz vor dem Logo, Wortmarke) steht zentral in nf-header.css unter body.nf-kopf-neu - hier nichts dazu. */
/* Feste Theme-Kopfleiste: Hoehe aus nf-header.css (--nf-hdr); sein Entwurf rechnet mit --hdr:80px ("alles Haftende rechnet mit var(--hdr)") */
.nf-sa { --hdr: var(--nf-hdr, 132px); }
/* Ankerziele landen nicht unter der festen Kopfleiste */
.nf-sa .TextBaseElement-content [id], .nf-sa #anfrage { scroll-margin-top: calc(var(--hdr) + 20px); }
/* Theme body{overflow-x:hidden} + html{overflow-x:clip} machen body zum Scroll-Container, position:sticky haftet sonst nicht. Klasse am body setzt Page.ss. */
body.nf-sa { overflow-x: clip; }
/* Rote Linie der Kopfleiste geht nahtlos in den roten Faden ueber (Spaltenkante, 3 px #ff0000): Lage zentral (nf-header.css), Breite/Farbe auf Marvins Seiten hier */
body.nf-sa header::before, body.nf-sa header ::before { left: max(16px, calc((100% - 1240px) / 2 + 16px)); width: 3px; background: #ff0000; }
body.nf-sa #main::before { display: none; }
/* Abschnitt s6: das echte Formular 25 (PageController::NfInhalt -> div.nf-formular) steht in Marvins linker Spalte an der Stelle seiner Attrappe; seine section#anfrage traegt die Sprungmarke */
.nf-sa #s6 .nf-formular { min-width: 0; width: 100%; }
/* Seine Rasterregel der Attrappe (#s6 form{display:grid}) traf auch das echte Formular 25 -> fuer das eingebettete Formular aufheben; Feldaufteilung macht nf-blocks.js (anfrageKlein) */
.nf-sa #s6 .nf-formular form { display: block; }
/* Titel #s0 ist Marvins .hero als Block (statt Theme-Hero) - beginnt direkt unter der festen Kopfleiste */
.nf-sa .nf-m-s0 .hero { margin: 0; }
/* #railwrap steckt im ersten Block (TextBaseElement z-index 12 aus dem Theme, jeder spaetere Block ebenso) -> erster Block eine Stufe hoeher, damit der Faden ueber den Abschnitten liegt */
.nf-sa .TextBaseElement.nf-m-s0 { z-index: 13; }