/* ==========================================================================================================================
   nf-start-marvin.css - netzwerkfaehig 2026-10-20/23: Marvins Entwurf Startseite (PR #10, entwurf/startseite/index.html, 05.11.2026).
   Erzeugt mit build/css-port/css-port.py (Regel fuer Regel: Praefix ".nf-start ", Deklarationen wortgleich). Nur auf Seiten mit Seitenklasse nf-start 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-start; body -> .nf-start .TextBaseElement-content; * -> .nf-start *; .hdr/.ftr/.hero (Kopf, Fuss, sein #s0) entfallen.
   Vollstaendiges Protokoll: build/css-port/css-port.log im Kundenrepo.
   ========================================================================================================================== */

/* ======================================================= (A) Theme-Wrapper neutralisieren - Startseite (Kopie von block-a-pf.css mit Praefix .nf-start, 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-start .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-start .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-start .TextBaseElement-content { text-wrap: initial; }
/* Tailwind-Reset innerhalb seiner Abschnitte zuruecknehmen (Browser-Standard wie in seiner Datei) */
.nf-start .TextBaseElement-content :where(*) { margin: revert; padding: revert; }
.nf-start .TextBaseElement-content :where(h1, h2, h3, h4, h5, h6) { font-family: revert; font-size: revert; font-weight: revert; line-height: revert; }
.nf-start .TextBaseElement-content :where(p) { font-family: revert; font-size: revert; font-weight: revert; }
.nf-start .TextBaseElement-content :where(ul, ol, menu) { list-style: revert; }
.nf-start .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-start .TextBaseElement-content :where(small) { font-size: revert; }
.nf-start .TextBaseElement-content :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; top: revert; bottom: revert; }
.nf-start .TextBaseElement-content :where(b, strong) { font-weight: revert; }
.nf-start .TextBaseElement-content :where(code, kbd, pre, samp) { font-family: revert; font-size: revert; }
.nf-start .TextBaseElement-content :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.nf-start .TextBaseElement-content :where(img, video) { height: revert; max-width: revert; }
.nf-start .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-start .TextBaseElement-content :where(button, select) { text-transform: revert; }
.nf-start .TextBaseElement-content :where(summary) { display: revert; }
.nf-start .TextBaseElement-content :where(table) { border-collapse: revert; border-color: revert; text-indent: revert; }
.nf-start .TextBaseElement-content :where(hr) { border-top-width: revert; color: revert; height: revert; }
.nf-start .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-start .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-start { --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-start * { box-sizing:border-box }
.nf-start { scroll-behavior:auto }
.nf-start .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-start .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-start .hero .btn, .nf-start a.more, .nf-start 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-start .hero { position:relative;background:var(--black);color:#fff;overflow:hidden;min-height:calc(100vh - var(--hdr));display:flex;align-items:flex-start }
.nf-start .hero .bg { position:absolute;inset:0 }
.nf-start .hero .bg img { width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block }
.nf-start .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-start .hero .wrap { position:relative;width:100%;padding-bottom:64px;padding-top:calc((100vh - var(--hdr)) * 0.34);min-height:calc(100vh - var(--hdr)) }
.nf-start .hero .box { position:relative;max-width:560px }
.nf-start .hero .box::before { content:"";position:absolute;left:0;top:-200vh;bottom:0;width:3px;background:var(--red);z-index:1 }
.nf-start .hero h1 { margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1.14;letter-spacing:.005em }
.nf-start .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-start .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-start .hero .btn.o { background:transparent;border:1px solid #fff }
@media (max-width:720px) {
  .nf-start .hero .wrap { padding-top:70px }
  .nf-start .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-start .hero .wrap { padding-top:calc((100vh - var(--hdr)) * 0.34) }
  .nf-start .hero .box { max-width:none;width:calc((100vw - 1240px)/2 + 64px);margin-left:calc((1240px - 100vw)/2 - 16px);padding-left:48px }
  .nf-start .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-start .hero .box::before { left:auto;right:64px }
  .nf-start .hero h1 .l1 { margin-left:-48px;padding:26px 36px 24px 48px;font-size:clamp(30px,2.9vw,46px) }
  .nf-start .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-start .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-start .kpi { background:#fff;border-top:1px solid var(--hair) }
.nf-start .kpi .wrap { padding-top:44px;padding-bottom:52px }
.nf-start .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-start .kpi .row4 { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair) }
.nf-start .kpi .k { padding:28px 28px 28px 0;border-right:1px solid var(--hair);min-width:0 }
.nf-start .kpi .k+.k { padding-left:28px }
.nf-start .kpi .k:last-child { border-right:0 }
.nf-start .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-start .kpi .n small { display:block;font-size:12px;color:var(--muted);letter-spacing:.1em;margin:8px 0 0;text-transform:uppercase }
.nf-start .kpi p { margin:10px 0 0;font-size:13px;color:var(--muted);line-height:1.55;max-width:34ch }
.nf-start .kpi sup { color:var(--red) }
@media (max-width:980px) {
  .nf-start .kpi .row4 { grid-template-columns:1fr 1fr }
  .nf-start .kpi .k:nth-child(2) { border-right:0;padding-right:0 }
  .nf-start .kpi .k:nth-child(3) { padding-left:0;border-top:1px solid var(--hair) }
  .nf-start .kpi .k:nth-child(4) { border-top:1px solid var(--hair) }
}
@media (max-width:560px) {
  .nf-start .kpi .row4 { grid-template-columns:1fr }
  .nf-start .kpi .k { border-right:0;padding-left:0!important }
  .nf-start .kpi .k+.k { border-top:1px solid var(--hair) }
}
/* Rote Linie am Abschnittsbeginn – gleiche Kante wie Kopfleiste und Hero */
.nf-start .sec { position:relative }
.nf-start .sec > section > .wrap { position:relative }
.nf-start .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-start #railwrap { position:relative;height:0;overflow:visible }
.nf-start #rail { position:absolute;left:max(16px,calc((100% - 1240px)/2 + 16px));top:0;width:3px;height:0;pointer-events:none;z-index:40 }
.nf-start #rail i { position:absolute;left:0;width:3px;background:var(--red);display:block }
.nf-start .sec > section > .wrap::before, .nf-start .hero .box::before { display:none!important }
/* Überschriften-Regel: Schlussteil rot (Regelwerk) */
.nf-start .sec h2 em, .nf-start .sec .big em { font-style:normal;color:var(--red) }
/* Abschnitt 2 Finale: dunkles Band{margin:96px calc(50% - 50vw) -110px;width:100vw;background:#0b0b0b;color:#fff;overflow:hidden}
/* 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-start .hero h1 .l1 { margin-left:calc(-1 * max(16px,(100vw - 1240px)/2 + 16px));padding:22px 36px 20px max(16px,calc((100vw - 1240px)/2 + 16px + 32px));width:max-content;max-width:calc(560px + max(16px,(100vw - 1240px)/2 + 16px));box-sizing:border-box }
.nf-start .hero h1 .l2 { margin:24px 0 0 32px;line-height:1.25 }
.nf-start .hero .box { max-width:560px }
@media (min-width:1830px) {
  .nf-start .hero .box { max-width:none;width:calc((100vw - 1240px)/2 + 80px);margin-left:calc((1240px - 100vw)/2 - 16px);padding-left:48px }
  .nf-start .hero h1 .l1 { min-width:min-content }
  .nf-start .hero h1 .l1 { margin-left:-48px;padding:26px 36px 24px 48px;max-width:none;width:auto;font-size:clamp(30px,2.9vw,46px) }
  .nf-start .hero h1 .l2 { margin-left:0;padding-right:60px }
}
@media (max-width:720px) {
  .nf-start .hero h1 .l1 { max-width:none;width:auto;padding-right:28px }
}
/* Abschnitt 2 – Drei Projekte. Baustein „Projektkarte mit Kennzahl“ 1:1 wie Schleifen & Polieren #s3 .cards/.card (7fr Bild / 5fr Text, abwechselnd, senkrecht zentriert; Kennzahl, Datenzeile, H3, Absätze). Kennzahl = beschichtete Fläche. Texte 1:1 Dokument 29 */
.nf-start #s3 > section { background:#fff;color:#111;padding-block:84px 80px }
.nf-start #s3 h2 { font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,46px);line-height:1.25;margin:0 0 40px;text-wrap:balance }
.nf-start #s3 h2 em { font-style:normal;color:var(--red) }
.nf-start #s3 .cards { display:block;margin:0 }
.nf-start #s3 .card { display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center;border-top:1px solid var(--hair);padding:56px 0;min-width:0 }
.nf-start #s3 .card:nth-child(even) { grid-template-columns:5fr 7fr }
.nf-start #s3 .card:nth-child(even) .ph { order:2 }
.nf-start #s3 .card:nth-child(even) .txt { order:1 }
.nf-start #s3 .ph { margin:0;min-width:0 }
.nf-start #s3 .ph img { width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:#dedcd7 }
.nf-start #s3 .ph figcaption { font-size:12.5px;color:var(--muted);margin-top:10px }
.nf-start #s3 .txt { min-width:0;display:flex;flex-direction:column;gap:14px;max-width:52ch }
.nf-start #s3 .big { display:flex;align-items:baseline;gap:12px;padding:0 0 6px;border-bottom:2px solid var(--red);align-self:flex-start }
.nf-start #s3 .big .n { font-family:var(--display);font-weight:400;font-size:clamp(44px,4.6vw,64px);line-height:1;color:var(--red);letter-spacing:.01em;font-variant-numeric:tabular-nums }
.nf-start #s3 .big .l { font-family:var(--display);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted) }
.nf-start #s3 .data { display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums }
.nf-start #s3 .data b { color:#111;font-weight:600 }
.nf-start #s3 h3 { margin:4px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.25;text-wrap:balance }
.nf-start #s3 .txt p { margin:0;font-size:15px;line-height:1.7;color:#1a1a1a;hyphens:auto }
.nf-start #s3 .txt p+p { margin-top:12px }
.nf-start #s3 .txt p b { color:#111;font-weight:600 }
@media (max-width:900px) {
  .nf-start #s3 .card, .nf-start #s3 .card:nth-child(even) { grid-template-columns:1fr;gap:22px;padding:40px 0 }
  .nf-start #s3 .card:nth-child(even) .ph { order:1 }
  .nf-start #s3 .card:nth-child(even) .txt { order:2 }
  .nf-start #s3 .txt { max-width:none }
}
/* Abschnitt 11 – Anfrage: kurzes Formular der Unterseiten (Arbeitssicherheit 14 / POWERFLEX 10), Entscheidung EBALAN 03.11.2026: kurzes Formular auf allen Seiten */
.nf-start #s5 .ang10 { background:#f6f5f2;color:#111;padding:84px 0 110px;scroll-margin-top:calc(var(--hdr) + 20px) }
.nf-start #s5 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-start #s5 h2 em { font-style:normal;color:var(--red) }
.nf-start #s5 .grid { display:grid;grid-template-columns:7fr 4fr;gap:72px;align-items:start }
.nf-start #s5 form { display:grid;grid-template-columns:1fr 1fr;gap:28px 32px }
.nf-start #s5 .f { display:flex;flex-direction:column;gap:6px;min-width:0 }
.nf-start #s5 .f.full { grid-column:1/-1 }
.nf-start #s5 label { font-family:var(--display);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#1a1a1a }
.nf-start #s5 label i { font-style:normal;color:var(--red) }
.nf-start #s5 label small { text-transform:none;letter-spacing:0;font-family:var(--body);font-size:11.5px;color:#6f6c67;margin-left:8px }
.nf-start #s5 .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-start #s5 .in:focus { border-bottom-color:var(--red) }
.nf-start #s5 .up { border:1px dashed #bdbab4;padding:22px;display:flex;gap:22px;align-items:center;background:#fff }
.nf-start #s5 .up .t { font-family:var(--display);font-size:15px;letter-spacing:.03em }
.nf-start #s5 .up .s { font-size:13px;color:#1a1a1a;margin-top:4px }
.nf-start #s5 .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-start #s5 .chk { display:flex;flex-direction:row;gap:12px;align-items:flex-start;font-size:13px;color:#1a1a1a }
.nf-start #s5 .chk .box { width:18px;height:18px;border:1px solid #bdbab4;background:#fff;flex:none;margin-top:2px }
.nf-start #s5 .req { font-size:12px;color:#1a1a1a;grid-column:1/-1;margin:-10px 0 0 }
.nf-start #s5 .req i { font-style:normal;color:var(--red) }
.nf-start #s5 .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-start #s5 .side p { margin:0 0 18px;color:#1a1a1a;font-size:15.5px;line-height:1.7 }
.nf-start #s5 .side p.hi { color:#111 }
.nf-start #s5 .side .k { font-family:var(--display);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#1a1a1a;margin:32px 0 8px }
.nf-start #s5 .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-start #s5 .side .mail { font-family:var(--display);font-size:20px;line-height:1.3;color:#111;display:block;margin-top:6px;text-decoration:none }
.nf-start #s5 .side .mail b { color:var(--red);font-weight:400 }
@media (max-width:900px) {
  .nf-start #s5 .grid { grid-template-columns:1fr;gap:44px }
}
@media (max-width:600px) {
  .nf-start #s5 form { grid-template-columns:1fr }
  .nf-start #s5 .f.full, .nf-start #s5 .req { grid-column:1 }
  .nf-start #s5 .up { flex-direction:column;align-items:flex-start }
  .nf-start #s5 .up .b { margin-left:0 }
}
.nf-start #s4 .two { display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start }
.nf-start #s4 .pic { margin:0;position:sticky;top:calc(var(--hdr) + 32px);min-width:0 }
.nf-start #s4 .pic img { width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover }
.nf-start #s4 .pic figcaption { margin:10px 0 0;font-family:var(--display);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#9a9893 }
@media (max-width:980px) {
  .nf-start #s4 .two { grid-template-columns:1fr;gap:36px }
  .nf-start #s4 .pic { position:static }
  .nf-start #s4 .pic img { aspect-ratio:3/2 }
}
.nf-start #s4 .two { margin-top:48px }
.nf-start #s4 .two { grid-template-columns:1fr 1fr;gap:64px;margin-top:48px }
.nf-start #s4 .txt { order:1 }
.nf-start #s4 .pic { order:2 }
@media (max-width:980px) {
  .nf-start #s4 .two { grid-template-columns:1fr;gap:36px }
  .nf-start #s4 .pic { order:2 }
}
.nf-start #s3 .big .l { white-space:nowrap }
/* Startseite – Titel wächst auf breiten Bildschirmen mit (weniger Beschnitt des 3:2-Fotos): mind. Bildschirmhöhe, aber nie weniger als 56 % der Breite */
/* Startseite – Leistungszeile über dem Kasten (Element der Pfadzeile, Regelwerk 1) */
.nf-start .hero .crumb { margin:-53px 0 14px 32px;font-family:var(--display);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:500;line-height:1.5 }
@media (min-width:1830px) {
  .nf-start .hero .crumb { margin-left:0 }
}
@media (max-width:720px) {
  .nf-start .hero .crumb { margin-left:0;font-size:12px }
}
/* 1 Hier läuft Ihr Geschäft – Magazinaufbau: Überzeile, H2, Einleitung → Panorama im Container → drei Aussagen mit großen Ziffern → Leitabsatz mit Knopf */
.nf-start #s1 section { padding:160px 0 72px }
.nf-start #s1 .kick { position:relative;margin:0 0 14px;padding-left:18px;font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#6f6c67 }
.nf-start #s1 .kick::before { content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--red) }
.nf-start #s1 h2 { font-family:var(--display);font-weight:400;font-size:clamp(34px,4.8vw,54px);line-height:1.25;margin:0 0 28px;max-width:22ch;color:#111 }
.nf-start #s1 .lead { margin:0;max-width:68ch;font-size:16px;line-height:1.7;color:#1a1a1a }
.nf-start #s1 .pano { margin:64px 0 0 }
.nf-start #s1 .pano img { width:100%;height:auto;display:block;aspect-ratio:21/9;object-fit:cover;object-position:50% 58% }
.nf-start #s1 .pano figcaption { margin:10px 0 0;font-size:12.5px;color:#6f6c67 }
.nf-start #s1 .three { list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:48px }
.nf-start #s1 .three li { padding-top:22px;border-top:1px solid var(--hair);position:relative }
.nf-start #s1 .three li::before { content:"";position:absolute;left:0;top:-1px;width:40px;height:2px;background:var(--red) }
.nf-start #s1 .three .k { display:block;font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.24em;color:#6f6c67;margin:0 0 18px }
.nf-start #s1 .three h3 { font-family:var(--display);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.25;margin:0 0 14px;color:#111;max-width:18ch }
.nf-start #s1 .three p { margin:0;font-size:15.5px;line-height:1.75;color:#1a1a1a;max-width:34ch }
.nf-start #s1 .close { margin-top:64px;display:grid;grid-template-columns:1fr;gap:28px;justify-items:start;border-top:1px solid var(--hair);padding-top:48px }
.nf-start #s1 .close p { margin:0;font-family:var(--body);font-size:17px;line-height:1.7;color:#1a1a1a;max-width:min(68ch,calc(50% - 32px)) }
.nf-start #s1 .close .btns { justify-self:start }
.nf-start #s1 .btn { display:inline-block;background:var(--red);color:#fff;font-family:var(--display);font-weight:500;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;padding:14px 28px;text-decoration:none }
@media (max-width:900px) {
  .nf-start #s1 .three { grid-template-columns:1fr;gap:44px }
  .nf-start #s1 .pano img { aspect-ratio:3/2 }
  .nf-start #s1 .close p { max-width:none }
}
/* 2 Vier Leistungen: vier Bildkacheln hell im Container, Foto 3:2, darunter Themenwort (rot), Satz, Absatz, Pfeil-Link */
.nf-start #s2 section { padding:84px 0 80px }
.nf-start #s2 .kick { position:relative;margin:0 0 14px;padding-left:18px;font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#6f6c67 }
.nf-start #s2 .kick::before { content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--red) }
.nf-start #s2 h2 { font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,46px);line-height:1.25;margin:0 0 64px;max-width:30ch }
.nf-start #s2 .grid4 { display:grid;grid-template-columns:1fr 1fr;gap:72px 48px }
.nf-start #s2 .t { display:block;color:inherit;text-decoration:none }
.nf-start #s2 .t figure { margin:0 0 26px;overflow:hidden;background:#f0efec }
.nf-start #s2 .t figure img { width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1) }
.nf-start #s2 .t:hover figure img { transform:scale(1.03) }
.nf-start #s2 .t.ph figure { aspect-ratio:3/2;display:flex;align-items:center;justify-content:center }
.nf-start #s2 .t.ph .note { font-family:var(--display);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#6f6c67 }
.nf-start #s2 .w { display:block;font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:0 0 12px }
.nf-start #s2 .t h3 { font-family:var(--display);font-weight:400;font-size:clamp(22px,2.1vw,30px);line-height:1.25;margin:0 0 12px;color:#111;max-width:22ch }
.nf-start #s2 .t p { margin:0 0 18px;font-size:15.5px;line-height:1.7;color:#1a1a1a;max-width:52ch }
.nf-start #s2 .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 }
.nf-start #s2 .more i { display:inline-flex }
.nf-start #s2 .more svg { width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:square }
@media (max-width:900px) {
  .nf-start #s2 .grid4 { grid-template-columns:1fr;gap:48px }
}
/* 4 Wir wissen, was Sie uns anvertrauen: Bild + Text 1:1, danach Namensreihe */
.nf-start #s4 section { padding:84px 0 80px }
.nf-start #s4 .kick { position:relative;margin:0 0 14px;padding-left:18px;font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#6f6c67 }
.nf-start #s4 .kick::before { content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--red) }
.nf-start #s4 h2 { font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,46px);line-height:1.25;margin:0 0 64px;max-width:30ch }
.nf-start #s4 .two { display:grid;grid-template-columns:1fr 1fr;gap:28px 64px;max-width:1100px;margin-top:0 }
.nf-start #s4 .two p { margin:0;font-size:15.5px;line-height:1.7;color:#1a1a1a }
.nf-start #s4 .ref { --bh:min(calc(100vw * 1411 / 2098),calc(100vh - 80px),940px);--iw:calc(var(--bh) * 2098 / 1411);position:relative;margin:64px calc(50% - 50vw) -80px;width:100vw;height:var(--bh);min-height:520px;background:#15171b;color:#fff;overflow:hidden;display:flex;align-items:center }
.nf-start #s4 .ref .ph { position:absolute;inset:0 }
.nf-start #s4 .ref .ph img { width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block }
@media (min-aspect-ratio:14/10) and (min-width:1100px) {
  .nf-start #s4 .ref { background:linear-gradient(180deg,#040509 0,#0c0f17 45%,#181c25 100%) }
  .nf-start #s4 .ref .ph img { position:absolute;right:0;top:0;height:100%;width:var(--iw);object-fit:cover;object-position:50% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 200px);mask-image:linear-gradient(90deg,transparent 0,#000 200px) }
}
.nf-start #s4 .ref .ph::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,23,27,.86) 0,rgba(21,23,27,.6) 28%,rgba(21,23,27,.12) 52%,rgba(21,23,27,0) 68%) }
.nf-start #s4 .ref .in { position:relative;width:100%;max-width:1240px;margin:0 auto;padding:72px 16px 64px;display:flex;flex-direction:column;gap:30px }
.nf-start #s4 .ref .k { position:relative;font-family:var(--display);font-size:22px;font-weight:400;line-height:1.25;margin:0;padding-left:22px;max-width:24ch;color:#fff }
.nf-start #s4 .ref .k::before { content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--red) }
.nf-start #s4 .ref .names { display:flex;align-items:center;gap:0 18px;max-width:900px }
.nf-start #s4 .ref .arr { width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;cursor:pointer;color:#fff }
.nf-start #s4 .ref .arr svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:square }
.nf-start #s4 .ref .arr:hover { color:var(--red) }
.nf-start #s4 .ref ul { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,auto);justify-content:start;flex:1 1 0;min-width:0;transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .42s ease }
.nf-start #s4 .ref ul.out { transition-duration:.26s;transform:translateX(-36px);opacity:0 }
.nf-start #s4 .ref ul.pre { transition:none;transform:translateX(36px);opacity:0 }
.nf-start #s4 .ref li.show { opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1) }
.nf-start #s4 .ref.on li.show { opacity:1;transform:none }
.nf-start #s4 .ref.on li.show:nth-child(6n/**/+2) { transition-delay:.08s }
.nf-start #s4 .ref.on li.show:nth-child(6n/**/+3) { transition-delay:.16s }
.nf-start #s4 .ref.on li.show:nth-child(6n/**/+4) { transition-delay:.24s }
.nf-start #s4 .ref.on li.show:nth-child(6n/**/+5) { transition-delay:.32s }
.nf-start #s4 .ref.on li.show:nth-child(6n) { transition-delay:.4s }
.nf-start #s4 .ref.on.paged li.show { transition-delay:0s;transition-duration:.2s }
.nf-start #s4 .ref li { font-family:var(--display);font-weight:500;font-size:23px;letter-spacing:.07em;text-transform:uppercase;color:#fff;padding:4px 24px;border-left:1px solid rgba(255,255,255,.3);white-space:nowrap;display:none }
.nf-start #s4 .ref li.show { display:block }
.nf-start #s4 .ref li.first { border-left:0;padding-left:0 }
.nf-start #s4 .ref li:hover { color:var(--red) }
.nf-start #s4 .ref .dots { display:flex;gap:10px;margin:-14px 0 0 46px }
.nf-start #s4 .ref .dots span { width:26px;height:2px;background:rgba(255,255,255,.3);cursor:pointer }
.nf-start #s4 .ref .dots span.on { background:var(--red) }
.nf-start #s4 .ref .refk { margin-top:18px;display:flex;flex-direction:column;align-items:flex-start }
.nf-start #s4 .ref .refk .pre, .nf-start #s4 .ref .refk .post { font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#fff }
.nf-start #s4 .ref .refk .num { font-family:var(--display);font-weight:400;font-size:clamp(56px,6.4vw,96px);line-height:1;letter-spacing:.06em;color:#fff;margin:6px 0 10px }
.nf-start #s4 .ref .refk p { margin:22px 0 0;font-size:15px;line-height:1.7;color:#cfcbc4;max-width:40ch }
.nf-start #s4 .ref .cap { position:absolute;right:16px;bottom:16px;font-family:var(--display);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7;color:rgba(255,255,255,.8);text-align:right;margin:0 }
@media (max-width:1000px) {
  .nf-start #s4 .ref ul { grid-template-columns:repeat(3,auto) }
  .nf-start #s4 .ref li.show:nth-of-type(n/**/+4) { display:none }
}
@media (max-width:900px) {
  .nf-start #s4 .two { grid-template-columns:1fr;gap:20px }
}
@media (max-width:760px) {
  .nf-start #s4 .ref li { font-size:17px;padding:4px 14px }
  .nf-start #s4 .ref .names { gap:0 8px }
  .nf-start #s4 .ref { height:auto;min-height:0;align-items:flex-start }
  .nf-start #s4 .ref .ph::after { background:linear-gradient(0deg,rgba(21,23,27,.3) 0,rgba(21,23,27,.85) 100%) }
  .nf-start #s4 .ref .in { padding-bottom:40vw }
  .nf-start #s4 .ref .cap { display:none }
  .nf-start #s4 .ref .names { max-width:none }
}
@media (max-width:900px) {
  .nf-start #s4 .two { grid-template-columns:1fr;gap:36px }
}
/* 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-start .hero h1 .l1 { min-width:min(900px,56vw)!important;padding-right:64px!important;text-wrap:balance }
}

/* ======================================================= (B) Anpassungen an das Theme - Startseite neues Design (Marvin PR #10, 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-start { --hdr: var(--nf-hdr, 132px); }
/* Ankerziele landen nicht unter der festen Kopfleiste */
.nf-start .TextBaseElement-content [id], .nf-start #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-start { 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-start header::before, body.nf-start header ::before { left: max(16px, calc((100% - 1240px) / 2 + 16px)); width: 3px; background: #ff0000; }
body.nf-start #main::before { display: none; }
/* Abschnitt s5: 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-start #s5 .nf-formular { min-width: 0; width: 100%; }
/* Seine Rasterregel der Attrappe (#s5 form{display:grid}) traf auch das echte Formular 25 -> fuer das eingebettete Formular aufheben; Feldaufteilung macht nf-blocks.js (anfrageKlein) */
.nf-start #s5 .nf-formular form { display: block; }
/* Titel #s0 ist Marvins .hero als Block (statt Theme-Hero) - beginnt direkt unter der festen Kopfleiste */
.nf-start .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-start .TextBaseElement.nf-m-s0 { z-index: 13; }