/* ==========================================================================
   Bewerberseiten auf Basis Nepulus 9 · 27.10.2026
   Gilt nur innerhalb von <main class="n9">. Kopf, Navigation und Fuß bleiben
   die der Website (style-ds.css). Farben aus dem Corporate Design:
   Dunkelblau als Grund, Cyan für die Hauptaktion, Gold für Hover und Kicker.
   ========================================================================== */
.n9{--n9-navy:#082B46;--n9-navy-tief:#061F33;--n9-navy-mitte:#0B3A57;--n9-cyan:#18b7c9;--n9-cyan-dunkel:#087d8f;
  --n9-gold:#B9975A;--n9-gold-hover:#D8BE7C;--n9-gold-weich:rgba(216,190,124,.16);--n9-gold-rand:rgba(216,190,124,.68);
  --n9-tinte:#0f2233;--n9-text:#3c5063;--n9-leise:#5b7085;--n9-papier:#F6F4EF;--n9-linie:#E3E8EE;
  --n9-titel:'Manrope',Arial,sans-serif;--n9-raster:min(1180px,calc(100% - 40px));
  color:var(--n9-tinte);font-size:17px;line-height:1.7}
.n9 *{box-sizing:border-box}
.n9 .n9-w{width:var(--n9-raster);margin:0 auto}
.n9 h1,.n9 h2,.n9 h3{font-family:var(--n9-titel);color:var(--n9-navy);letter-spacing:-.015em;text-wrap:pretty;margin:0}
.n9 h2{font-size:clamp(28px,3.4vw,44px);line-height:1.12;font-weight:800}
.n9 h3{font-size:20px;line-height:1.3;font-weight:700}
.n9 p{margin:0;text-wrap:pretty}
.n9 .n9-kicker{display:block;font:700 13px/1.2 var(--n9-titel);letter-spacing:.16em;text-transform:uppercase;color:var(--n9-gold);margin:0 0 16px}
.n9 .n9-lead{font-size:19px;line-height:1.7;color:var(--n9-text);margin-top:20px}
.n9 section{padding:104px 0;scroll-margin-top:var(--nav,80px)}
.n9 .n9-kopf{margin-bottom:52px}

/* Schaltflächen: Cyan = Hauptaktion, umrandet = Nebenaktion, Gold beim Überfahren */
.n9 .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:10px;
  font:700 15px/1 var(--n9-titel);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .16s,border-color .16s,color .16s,box-shadow .16s}
.n9 .btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.n9 .btn-primary{background:var(--n9-cyan);border-color:var(--n9-cyan);color:#06243a}
.n9 .btn-primary:hover,.n9 .btn-primary:focus-visible{background:var(--n9-gold-hover);border-color:var(--n9-gold-hover);color:#06243a;box-shadow:0 0 0 4px var(--n9-gold-weich)}
.n9 .btn-on-dark{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.n9 .btn-on-dark:hover,.n9 .btn-on-dark:focus-visible{border-color:var(--n9-gold-hover);background:var(--n9-gold-weich);color:#fff}
.n9 .btn-outline{background:#fff;border-color:#C9D3DC;color:var(--n9-navy)}
.n9 .btn-outline:hover,.n9 .btn-outline:focus-visible{border-color:var(--n9-gold-rand);background:var(--n9-gold-weich);color:var(--n9-navy)}
.n9 a:focus-visible,.n9 button:focus-visible{outline:2px solid var(--n9-gold-hover);outline-offset:3px}
.n9 .n9-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* 1 · Kopfbereich: Nutzen zuerst, dann Person */
.n9 .n9-hero{background:radial-gradient(900px 520px at 80% 10%,rgba(24,183,201,.16),transparent 62%),linear-gradient(180deg,var(--n9-navy-tief),var(--n9-navy));
  color:#fff;padding:calc(var(--nav,72px) + 88px) 0 0;overflow:hidden}
.n9 .n9-hero h1{color:#fff;font-size:clamp(36px,5vw,66px);line-height:1.04;font-weight:800;letter-spacing:-.025em}
.n9 .n9-hero-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end;margin-top:40px}
.n9 .n9-hero-text{padding-bottom:88px}
.n9 .n9-hero .n9-lead{color:rgba(255,255,255,.86);margin-top:0}
.n9 .n9-hero .n9-lead b{color:#fff}
.n9 .n9-hero .n9-kicker{color:var(--n9-gold-hover)}
.n9 .n9-portrait{position:relative;margin:0}
.n9 .n9-portrait img{display:block;width:100%;height:auto;aspect-ratio:646/610;object-fit:cover;border-radius:22px 22px 0 0}
.n9 .n9-portrait figcaption{position:absolute;left:20px;bottom:20px;background:rgba(6,31,51,.92);border:1px solid rgba(24,183,201,.35);border-radius:12px;padding:12px 16px;font-size:14px;line-height:1.4}
.n9 .n9-portrait figcaption b{display:block;font-family:var(--n9-titel);color:#fff}
.n9 .n9-portrait figcaption span{color:var(--n9-cyan)}

/* 2 · Belege direkt hinter dem Kopf */
.n9 .n9-belege{background:#fff;padding:0;border-bottom:1px solid var(--n9-linie)}
.n9 .n9-zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
.n9 .n9-zahlen li{padding:34px 28px 34px 0;border-right:1px solid var(--n9-linie);margin-right:28px}
.n9 .n9-zahlen li:last-child{border-right:0;margin-right:0}
.n9 .n9-zahlen b{display:block;font:800 clamp(30px,3.2vw,42px)/1 var(--n9-titel);color:var(--n9-navy);letter-spacing:-.02em}
.n9 .n9-zahlen span{display:block;margin-top:10px;font-size:15px;line-height:1.5;color:var(--n9-leise)}
.n9 .n9-referenzen{background:var(--n9-papier)}
.n9 .n9-ref-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;border-top:2px solid var(--n9-navy)}
.n9 .n9-ref-liste li{border-bottom:1px solid #DCD8CE}
.n9 .n9-ref-liste a{display:flex;align-items:baseline;gap:14px;padding:22px 0;text-decoration:none;color:var(--n9-tinte)}
.n9 .n9-ref-liste a .nr{font:800 14px var(--n9-titel);color:var(--n9-gold);min-width:26px}
.n9 .n9-ref-liste a b{display:block;font:700 18px/1.3 var(--n9-titel);color:var(--n9-navy)}
.n9 .n9-ref-liste a span{display:block;font-size:15px;line-height:1.5;color:var(--n9-leise);margin-top:4px}
.n9 .n9-ref-liste a:hover b,.n9 .n9-ref-liste a:focus-visible b{color:var(--n9-cyan-dunkel)}
.n9 .n9-ref-liste a:hover,.n9 .n9-ref-liste a:focus-visible{background:var(--n9-gold-weich)}

/* 3 · Nutzen als nummerierte Liste mit Zwischenzeilen, keine Kachelwand */
.n9 .n9-nutzen-liste{list-style:none;margin:0;padding:0;counter-reset:n}
.n9 .n9-nutzen-liste li{display:grid;grid-template-columns:120px minmax(0,4fr) minmax(0,7fr);gap:32px;padding:34px 0;border-top:1px solid var(--n9-linie);counter-increment:n}
.n9 .n9-nutzen-liste li:last-child{border-bottom:1px solid var(--n9-linie)}
.n9 .n9-nutzen-liste li::before{content:counter(n,decimal-leading-zero);font:800 44px/1 var(--n9-titel);color:var(--n9-cyan);letter-spacing:-.03em}
.n9 .n9-nutzen-liste h3{font-size:22px}
.n9 .n9-nutzen-liste p{color:var(--n9-text)}

/* Film-Abschnitt */
.n9 .n9-film{background:var(--n9-navy);color:#fff}
.n9 .n9-film h2{color:#fff}
.n9 .n9-film .n9-lead{color:rgba(255,255,255,.82)}
.n9 .n9-film-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.n9 .n9-film video{display:block;width:100%;height:auto;border-radius:16px;background:#000;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.n9 .n9-film figcaption{margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.66)}

/* 4 · Nepulus 9 als System dahinter */
.n9 .n9-system{background:#fff}
.n9 .n9-system-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.n9 .n9-fakten{list-style:none;margin:28px 0 0;padding:0}
.n9 .n9-fakten li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--n9-linie);color:var(--n9-text)}
.n9 .n9-fakten li b{color:var(--n9-navy)}
.n9 .n9-fakten svg{width:22px;height:22px;margin-top:3px;fill:none;stroke:var(--n9-cyan-dunkel);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.n9 .n9-bilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0}
.n9 .n9-bilder figure{margin:0}
.n9 .n9-bilder figure:first-child{grid-column:1 / -1}
.n9 .n9-bilder img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--n9-linie);box-shadow:0 12px 30px rgba(8,43,70,.10)}
.n9 .n9-bilder figcaption{margin-top:8px;font-size:14px;color:var(--n9-leise)}
.n9 .n9-hinweis{margin-top:14px;font-size:14px;color:var(--n9-leise)}

/* 5 · Erfahrung */
.n9 .n9-erfahrung{background:var(--n9-papier)}
.n9 .n9-auftraege{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--n9-navy)}
.n9 .n9-auftraege li{padding:28px 32px 30px 0;border-right:1px solid #DCD8CE;margin-right:32px}
.n9 .n9-auftraege li:last-child{border-right:0;margin-right:0}
.n9 .n9-auftraege b{display:block;font:800 30px/1.1 var(--n9-titel);color:var(--n9-navy)}
.n9 .n9-auftraege span{display:block;margin-top:12px;color:var(--n9-text);font-size:16px;line-height:1.6}
.n9 .n9-auftraege em{display:block;margin-top:10px;font-style:normal;font-size:13.5px;color:var(--n9-gold);font-weight:700;letter-spacing:.04em}
.n9 .n9-staerken{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 48px;margin-top:64px}
.n9 .n9-staerken h3{font-size:18px;padding-top:16px;border-top:3px solid var(--n9-cyan);display:inline-block}
.n9 .n9-staerken p{margin-top:10px;color:var(--n9-text);font-size:16px}

/* 6 · Erste Schritte */
.n9 .n9-schritte{background:#fff}
.n9 .n9-weg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.n9 .n9-weg li{padding:0 26px 0 0;position:relative}
.n9 .n9-weg li::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--n9-cyan),rgba(24,183,201,.25));margin:0 0 22px}
.n9 .n9-weg .s{display:block;font:800 13px var(--n9-titel);letter-spacing:.14em;text-transform:uppercase;color:var(--n9-gold);margin-bottom:8px}
.n9 .n9-weg h3{font-size:18px}
.n9 .n9-weg p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--n9-text)}

/* 7 · Unterlagen */
.n9 .n9-unterlagen{background:var(--n9-navy-tief);color:#fff}
.n9 .n9-unterlagen h2{color:#fff}
.n9 .n9-unterlagen .n9-lead{color:rgba(255,255,255,.8)}
.n9 .n9-dl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid rgba(255,255,255,.18)}
.n9 .n9-dl li{border-bottom:1px solid rgba(255,255,255,.14)}
.n9 .n9-dl a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:16px;align-items:center;padding:22px 6px;color:#fff;text-decoration:none}
.n9 .n9-dl a svg{width:24px;height:24px;fill:none;stroke:var(--n9-cyan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.n9 .n9-dl a b{display:block;font:700 17px/1.3 var(--n9-titel)}
.n9 .n9-dl a span{display:block;font-size:14px;color:rgba(255,255,255,.66);margin-top:3px}
.n9 .n9-dl a i{font-style:normal;font:700 12px var(--n9-titel);letter-spacing:.1em;color:var(--n9-gold-hover)}
.n9 .n9-dl a:hover,.n9 .n9-dl a:focus-visible{background:rgba(216,190,124,.10)}
.n9 .n9-dl a:hover b,.n9 .n9-dl a:focus-visible b{color:var(--n9-gold-hover)}

/* 8 · Kontakt */
.n9 .n9-kontakt{background:#fff}
.n9 .n9-kontakt-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.n9 .n9-kontakt-wege{list-style:none;margin:0;padding:0;border-top:2px solid var(--n9-navy)}
.n9 .n9-kontakt-wege li{border-bottom:1px solid var(--n9-linie)}
.n9 .n9-kontakt-wege a{display:flex;justify-content:space-between;gap:16px;padding:20px 4px;text-decoration:none;color:var(--n9-navy);font:700 18px var(--n9-titel)}
.n9 .n9-kontakt-wege a span{font:500 15px var(--n9-titel);color:var(--n9-leise)}
.n9 .n9-kontakt-wege a:hover,.n9 .n9-kontakt-wege a:focus-visible{background:var(--n9-gold-weich)}

/* Breiten */
@media (max-width:1100px){
  .n9 .n9-weg{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}
  .n9 .n9-ref-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .n9 section{padding:76px 0}
  .n9 .n9-hero{padding-top:calc(var(--nav,64px) + 44px)}
  .n9 .n9-hero-raster,.n9 .n9-film-raster,.n9 .n9-system-raster,.n9 .n9-kontakt-raster{grid-template-columns:1fr;gap:40px}
  .n9 .n9-hero-text{padding-bottom:0}
  .n9 .n9-portrait{max-width:440px}
  .n9 .n9-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .n9 .n9-zahlen li:nth-child(2){border-right:0;margin-right:0}
  .n9 .n9-nutzen-liste li{grid-template-columns:72px minmax(0,1fr);gap:8px 20px}
  .n9 .n9-nutzen-liste li::before{grid-row:1 / span 2;font-size:34px}
  .n9 .n9-auftraege,.n9 .n9-staerken{grid-template-columns:1fr}
  .n9 .n9-auftraege li{border-right:0;margin-right:0;border-bottom:1px solid #DCD8CE;padding-right:0}
  .n9 .n9-dl{grid-template-columns:1fr}
}
@media (max-width:640px){
  .n9{font-size:16px}
  .n9 .n9-w{width:calc(100% - 32px)}
  .n9 .n9-weg,.n9 .n9-ref-liste{grid-template-columns:1fr}
  .n9 .n9-zahlen li{padding:24px 14px 24px 0;margin-right:14px}
  .n9 .n9-bilder{grid-template-columns:1fr}
  .n9 .n9-links .btn{width:100%}
  .n9 .n9-dl a{grid-template-columns:26px minmax(0,1fr)}
  .n9 .n9-dl a i{grid-column:2}
}
@media print{.n9 .n9-film{display:none}.n9 section{padding:32px 0}}

/* 28.10.2026 · Stationen: Erfahrung, die heute trägt */
.n9 .n9-heute{background:#fff}
.n9 .n9-stationen{list-style:none;margin:0;padding:0;border-top:2px solid var(--n9-navy)}
.n9 .n9-stationen li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;padding:30px 0;border-bottom:1px solid var(--n9-linie)}
.n9 .n9-st-kopf b{display:block;font:800 20px/1.3 var(--n9-titel);color:var(--n9-navy)}
.n9 .n9-st-kopf span{display:block;margin-top:6px;font:700 13px/1.4 var(--n9-titel);letter-spacing:.06em;text-transform:uppercase;color:var(--n9-gold)}
.n9 .n9-stationen p{color:var(--n9-text)}
.n9 .n9-st-nutzen{margin-top:14px;padding-left:16px;border-left:3px solid var(--n9-cyan);color:var(--n9-tinte)}
.n9 .n9-st-nutzen b{color:var(--n9-navy)}
@media (max-width:900px){.n9 .n9-stationen li{grid-template-columns:1fr;gap:12px}}

/* 28.10.2026 Christian: Inhalt links und rechts bündig unter der Navigation – gleiche Breiten wie .nav-inner (style-ds.css) */
@media(min-width:1200px){.n9{--n9-raster:min(1280px,calc(100% - 56px))}}
@media(min-width:1600px){.n9{--n9-raster:min(1440px,calc(100% - 80px))}}

/* 28.10.2026 Christian: Bürovideo als Banner oben im Kopfbereich (wie vor dem Neubau, Paket UPLOAD_2026-10-23_Video1_Banner) */
.n9 .n9-hero{position:relative;overflow:hidden}
.n9 .n9-kopf-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;z-index:0;pointer-events:none}
.n9 .n9-hero>.n9-w{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.n9 .n9-kopf-film{display:none}}

/* 28.10.2026 Christian: KEINE horizontalen Trennlinien („ich sagte viele Male NEIN“) – alle Ober- und Unterkanten-Linien entfernt, Abstände bleiben */
.n9 .n9-belege,.n9 .n9-ref-liste,.n9 .n9-ref-liste li,.n9 .n9-nutzen-liste li,.n9 .n9-nutzen-liste li:last-child,.n9 .n9-fakten li,.n9 .n9-auftraege,.n9 .n9-auftraege li,
.n9 .n9-dl,.n9 .n9-dl li,.n9 .n9-kontakt-wege,.n9 .n9-kontakt-wege li,.n9 .n9-stationen,.n9 .n9-stationen li,.n9 .n9-staerken h3{border-top:0!important;border-bottom:0!important}
.n9 .n9-weg li::before{display:none}