/*
Theme Name: Nicolay
Theme URI: https://nicolay-partner.de
Description: Dunkel Editorial — V2 Kinematisch
Version: 2.0.0
Author: paper-agent
*/

/* ==========================================================================
   FONTS — self-hosted, seit 28.08.2026
   Vorher stand hier ein @import von fonts.googleapis.com. Das war doppelt
   falsch: technisch die teuerste Variante (der Browser muss erst diese Datei
   laden und auswerten, bevor er die Google-CSS anfordert und daraus die
   Schriftdateien, drei Runden hintereinander, gemessene 750 ms), und
   rechtlich ein Verstoss gegen die eigene Vorgabe in techstack.md,
   Schriften self-hosted auszuliefern. Die woff2-Dateien liegen seit dem
   20.06.2026 ungenutzt in assets/fonts/.
   Zur Laufzeit laedt der Besucher jetzt nichts mehr von Google.

   Vorhanden: Spectral 400/400 kursiv/500/600/700/800, Hanken Grotesk 400/500/600/700.
   Damit ist jeder im Design verwendete Schnitt als Datei da, es wird nichts
   vom Browser nachgeahmt.

   Woher die Dateien kommen: npm-Paket @fontsource/spectral bzw.
   @fontsource/hanken-grotesk, Ordner files/. Die bereits vorhandenen Dateien
   stammen aus derselben Quelle, geprueft ueber Pruefsummen. Fehlt spaeter ein
   Schnitt, von dort nachladen, nicht von Google.
   ========================================================================== */
@font-face {
  font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/spectral-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/spectral-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/spectral-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/spectral-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family:'Spectral'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/spectral-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family:'Spectral'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/spectral-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2');
}

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
  --bg:#0c0c0d; --bg2:#08080a; --panel:#141416;
  --fg:#f3f1ec; --fg2:#cfcdc7;
  --muted:#a8a6a0; --muted-b:#b3b1ab; --muted2:#8f8d87; --muted-p:#9a9893; --muted-q:#807e78; --muted-r:#7a7872; --muted3:#6a6863; --faint:#5c5a55;
  --accent:#b08d57; --accent2:#c9a877;
  --hatch1:#19191b; --hatch2:#1a1a1c; --hatch3:#222224;
  --cta-h1:#161618; --cta-h2:#111113;
  --numeral:#1f1f22; --numeral2:#26262a;
  --line-soft:rgba(255,255,255,.07); --line-06:rgba(255,255,255,.06); --line-04:rgba(255,255,255,.04);
  --line-08:rgba(255,255,255,.08); --line:rgba(255,255,255,.1); --line-12:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.14); --line-16:rgba(255,255,255,.16); --line-22:rgba(255,255,255,.22); --line-32:rgba(255,255,255,.32);
  --inv-bg:#efeae1; --inv-fg:#1a1916; --inv-muted:#56514a; --inv-muted2:#6a655d; --inv-accent:#9a7b46;
  --inv-line:rgba(26,25,22,.15); --inv-line2:rgba(26,25,22,.2);

  --header-bg:rgba(12,12,13,.82);
  --shadow:0 24px 55px -30px rgba(0,0,0,.82);
  /* Flaeche der Kontaktkarte und Schleier ueber Verlaeufen.
     Muss je Modus umschalten, sonst steht im hellen Modus ein grauer Block da. */
  --card-bg:rgba(12,12,13,.6);
  --scrim:rgba(12,12,13,.55);
}

/* --------------------------------------------------------------------------
   LIGHT MODE — activated via [data-theme="light"] on <html>
   Swaps dark ↔ light palette. Accent stays warm gold throughout.
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --bg:#f5f2ec; --bg2:#efeae1; --panel:#e8e3da;
  --fg:#1a1916; --fg2:#2e2c28;
  --muted:#6a655d; --muted-b:#56514a; --muted2:#7a756d; --muted-p:#8a857d; --muted-q:#9a958d; --muted-r:#a5a09a; --muted3:#b5b0a8; --faint:#c5c0b8;
  --accent:#9a7b46; --accent2:#b08d57;
  --hatch1:#e8e3da; --hatch2:#e5e0d7; --hatch3:#ddd8cf;
  --cta-h1:#ece7de; --cta-h2:#f0ebe2;
  --numeral:#e0dbd2; --numeral2:#d8d3ca;
  --line-soft:rgba(26,25,22,.08); --line-06:rgba(26,25,22,.06); --line-04:rgba(26,25,22,.04);
  --line-08:rgba(26,25,22,.08); --line:rgba(26,25,22,.12); --line-12:rgba(26,25,22,.12);
  --line-strong:rgba(26,25,22,.16); --line-16:rgba(26,25,22,.16); --line-22:rgba(26,25,22,.22); --line-32:rgba(26,25,22,.32);
  --inv-bg:#0c0c0d; --inv-fg:#f3f1ec; --inv-muted:#b3b1ab; --inv-muted2:#a8a6a0; --inv-accent:#c9a877;
  --inv-line:rgba(255,255,255,.1); --inv-line2:rgba(255,255,255,.15);
  --header-bg:rgba(245,242,236,.88);
  --shadow:0 24px 55px -30px rgba(0,0,0,.12);
  --card-bg:rgba(255,255,255,.62);
  --scrim:rgba(245,242,236,.55);
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--fg);
  font-family:'Hanken Grotesk', sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection { background:var(--accent); color:var(--bg); }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
summary { list-style:none; cursor:pointer; }
summary::-webkit-details-marker { display:none; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.np-wrap {
  max-width:1240px;
  margin:0 auto;
  padding-left:36px;
  padding-right:36px;
}
.np-wrap--wide {
  max-width:1320px;
  margin:0 auto;
  padding-left:40px;
  padding-right:40px;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.np-section {
  border-bottom:1px solid var(--line-soft);
}
.np-section--light {
  background:var(--inv-bg);
  color:var(--inv-fg);
  padding:110px 0;
}
.np-section__header {
  display:flex;
  justify-content:space-between;
  align-items:end;
  flex-wrap:wrap;
  gap:20px;
  margin-bottom:64px;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.np-utility {
  background:var(--bg2);
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
  color:var(--muted2);
}
.np-utility__inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  /* Nur oben und unten setzen. Die Kurzschreibweise "10px 0" hat frueher die
     36px Innenabstand von .np-wrap ueberschrieben, dadurch stand der Text der
     Leiste 36px weiter aussen als der Header darunter. */
  padding-top:10px;
  padding-bottom:10px;
}
.np-utility__links {
  display:flex;
  align-items:center;
  gap:22px;
}
.np-utility__inner a {
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:color .25s;
}
.np-utility__inner a:hover { color:var(--fg); }
.np-utility__icon {
  flex:none;
  opacity:.55;
  transition:opacity .25s;
}
.np-utility__inner a:hover .np-utility__icon { opacity:1; }

.np-header {
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line-soft);
}
/* Startseite: der Kopf liegt ueber dem Hero, ohne eigene Flaeche.
   Bis 28.08.2026 stand hier position:absolute. Dadurch scrollte der Kopf
   auf der Startseite weg, waehrend er auf allen anderen Seiten stehen
   blieb. fixed statt absolute: der Hero beginnt weiterhin ganz oben,
   weil beide Angaben das Element aus dem Fluss nehmen, aber der Kopf
   bleibt jetzt sichtbar. */
.np-header--overlay {
  position:fixed;
  top:0; left:0; right:0;
  background:transparent;
  border:none;
  transition:background .3s, border-color .3s;
}
/* Sobald der Hero durchgescrollt ist, bekommt der Kopf seine Flaeche.
   Ohne das staende die Navigation unlesbar auf dem Inhalt.
   --header-bg war fuer genau diesen Zweck schon angelegt. */
.np-header--overlay.np-header--scrolled {
  background:var(--header-bg);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
/* Angemeldete Redakteure haben die WordPress-Leiste ueber der Seite.
   Ein fixierter Kopf muss darunter beginnen, sonst verschwindet er dahinter. */
body.admin-bar .np-header--overlay { top:32px; }
@media (max-width:782px) {
  body.admin-bar .np-header--overlay { top:46px; }
}
.np-header__inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:28px;
  padding-bottom:28px;
}
.np-header--overlay .np-header__inner { padding-top:28px; padding-bottom:28px; }
.np-header--sub .np-header__inner { padding-top:20px; padding-bottom:20px; }

.np-header__brand {
  display:flex;
  flex-direction:column;
  line-height:1;
}
.np-header__name {
  font-family:'Spectral', serif;
  font-weight:700;
  font-size:23px;
  letter-spacing:.01em;
}
.np-header__subtitle {
  font-size:10px;
  letter-spacing:.32em;
  color:var(--muted);
  margin-top:5px;
}
.np-header__cta,
.np-nav a.np-header__cta {
  background:var(--fg);
  color:var(--bg);
  padding:12px 22px;
  font-size:12px;
  letter-spacing:.12em;
  font-weight:600;
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  transition:background .3s;
}
.np-header__cta:hover,
.np-nav a.np-header__cta:hover { background:var(--accent); color:var(--bg); }

.np-nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg2);
}
.np-nav a { color:var(--muted-b); transition:color .25s; }
.np-nav a:hover { color:var(--fg); }
.np-nav a.is-active {
  color:var(--fg);
  border-bottom:1px solid var(--accent);
  padding-bottom:3px;
}

/* Desktop dropdown nav */
.np-nav__dropdown {
  position:relative;
}
.np-nav__dropdown > a {
  display:inline-block;
}
.np-nav__dropdown-menu {
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  padding-top:14px;
  min-width:220px;
  z-index:1001;
}
.np-nav__dropdown-menu::before {
  content:'';
  display:block;
  position:absolute;
  top:0; left:0; right:0;
  height:14px;
}
.np-nav__dropdown:hover .np-nav__dropdown-menu {
  display:block;
}
.np-nav__dropdown-menu a {
  display:block;
  padding:10px 20px;
  background:var(--panel);
  border-bottom:1px solid var(--line-soft);
  font-size:12px;
  letter-spacing:.05em;
  text-transform:none;
  color:var(--muted-b);
  white-space:nowrap;
  transition:background .2s, color .2s;
}
.np-nav__dropdown-menu a:first-child {
  border-radius:6px 6px 0 0;
}
.np-nav__dropdown-menu a:last-child {
  border-radius:0 0 6px 6px;
  border-bottom:none;
}
.np-nav__dropdown-menu a:hover {
  background:var(--hatch3);
  color:var(--fg);
}

/* ==========================================================================
   CORNER TICKS
   ========================================================================== */
.np-corner { position:absolute; width:20px; height:20px; }
.np-corner--tl {
  top:24px; left:24px;
  border-top:1px solid var(--accent);
  border-left:1px solid var(--accent);
}
.np-corner--tr {
  top:24px; right:24px;
  border-top:1px solid var(--accent);
  border-right:1px solid var(--accent);
}
.np-corner--bl {
  bottom:24px; left:24px;
  border-bottom:1px solid var(--accent);
  border-left:1px solid var(--accent);
}
.np-corner--br {
  bottom:24px; right:24px;
  border-bottom:1px solid var(--accent);
  border-right:1px solid var(--accent);
}
/* cinematic hero uses a slightly deeper offset for its corner ticks */
.np-hero--cinematic .np-corner--tl { top:108px; left:40px; }
.np-hero--cinematic .np-corner--br { bottom:40px; right:40px; }

/* ==========================================================================
   HERO — CINEMATIC (Homepage)
   Source: Dunkel Editorial - Variante 2 (Kinematisch).dc.html #top
   ========================================================================== */
.np-hero--cinematic {
  position:relative;
  height:100vh;
  min-height:720px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}
.np-hero--cinematic__img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.np-hero--cinematic__bg-fallback {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg, var(--hatch1) 0 22px, var(--panel) 22px 44px);
}
.np-hero--cinematic__overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(12,12,13,.74) 0%, rgba(12,12,13,.26) 38%, rgba(12,12,13,.5) 72%, #0c0c0d 100%);
}
.np-hero--cinematic__content {
  position:relative;
  padding-bottom:64px;
  width:100%;
}
.np-hero--cinematic__eyebrow {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:30px;
}
.np-hero--cinematic__bottom {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-top:32px;
  flex-wrap:wrap;
}
.np-hero--cinematic__sub {
  font-size:19px;
  line-height:1.6;
  color:var(--fg2);
  max-width:520px;
}
.np-hero--cinematic h1 {
  font-family:'Spectral', serif;
  font-weight:800;
  font-size:104px;
  line-height:.98;
  letter-spacing:-.02em;
  max-width:1050px;
  margin-bottom:34px;
}
.np-hero--cinematic h1 em {
  font-weight:400;
  font-style:italic;
  color:var(--accent2);
}

/* ==========================================================================
   HERO — SPLIT (Gewerbe / Über uns subpages)
   Source: Leistung-Gewerbeversicherung.dc.html hero
   ========================================================================== */
.np-hero--split {
  display:grid;
  grid-template-columns:1.06fr .94fr;
  border-bottom:1px solid var(--line-soft);
}
.np-hero--split__text {
  padding:92px 60px 92px 36px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.np-hero--split__eyebrow {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:32px;
}
.np-hero--split__image {
  position:relative;
  border-left:1px solid var(--line-soft);
  min-height:600px;
  background:repeating-linear-gradient(135deg, var(--hatch1) 0 18px, var(--panel) 18px 36px);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.np-hero--split__image img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.np-hero--split__caption {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:30px;
  background:linear-gradient(0deg, rgba(12,12,13,.9), transparent);
}
.np-hero--split__caption-name {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:20px;
}
.np-hero--split__caption-role {
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--muted-p);
  text-transform:uppercase;
  margin-top:4px;
}
.np-hero--split h1 {
  font-family:'Spectral', serif;
  font-weight:800;
  font-size:74px;
  line-height:1.02;
  letter-spacing:-.015em;
  margin-bottom:30px;
}
.np-hero--split h1 em {
  font-weight:400;
  font-style:italic;
  color:var(--accent2);
}
.np-hero--split p {
  font-size:18.5px;
  line-height:1.62;
  color:var(--muted);
  max-width:490px;
  margin-bottom:44px;
}
/* Über-uns variant: mirrored ratio, slightly tighter padding (source: Ueber-uns.dc.html) */
.np-hero--split--wide { grid-template-columns:1.08fr .92fr; }
.np-hero--split--wide .np-hero--split__text { padding:96px 60px 96px 36px; }
.np-hero--split--wide h1 { font-size:70px; line-height:1.04; }

/* ==========================================================================
   HERO — IMAGE (Beamte subpage)
   Source: Zielgruppe-Beamte.dc.html hero
   ========================================================================== */
.np-hero--image {
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  color:var(--fg);
}
.np-hero--image__bg {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg, var(--hatch1) 0 20px, var(--panel) 20px 40px);
}
.np-hero--image__bg img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.np-hero--image__overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, var(--bg) 32%, rgba(12,12,13,.7) 62%, rgba(12,12,13,.35) 100%);
}
.np-hero--image__content {
  position:relative;
  max-width:1240px;
  margin:0 auto;
  padding:104px 36px;
  min-height:560px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.np-hero--image__eyebrow {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:32px;
}
.np-hero--image h1 {
  font-family:'Spectral', serif;
  font-weight:800;
  font-size:76px;
  line-height:1.0;
  letter-spacing:-.015em;
  max-width:900px;
  margin-bottom:30px;
}
.np-hero--image h1 em {
  font-weight:400;
  font-style:italic;
  color:var(--accent2);
}
.np-hero--image p {
  font-size:18.5px;
  line-height:1.62;
  color:var(--fg2);
  max-width:560px;
  margin-bottom:44px;
}

/* ==========================================================================
   HERO — shared
   ========================================================================== */
.np-hero__actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

/* ==========================================================================
   LABELS
   ========================================================================== */
.np-label {
  font-size:11.5px;
  letter-spacing:.2em;
  color:var(--accent);
  text-transform:uppercase;
}
.np-label--with-line {
  display:flex;
  align-items:center;
  gap:14px;
}
.np-label__line {
  width:48px;
  height:1px;
  background:var(--accent);
  display:inline-block;
}
.np-label--inv { color:var(--inv-accent); }
.np-label--plain { display:inline; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.np-btn {
  background:var(--fg);
  color:var(--bg);
  padding:17px 32px;
  font-size:12.5px;
  letter-spacing:.12em;
  font-weight:600;
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  display:inline-block;
  transition:background .3s, transform .25s;
}
.np-btn:hover {
  background:var(--accent);
  transform:translateY(-2px);
}
.np-btn--outline {
  background:transparent;
  border:1px solid var(--line-32);
  color:var(--fg);
  padding:16px 30px;
  transition:border-color .3s, background .3s;
}
.np-btn--outline:hover {
  border-color:var(--fg);
  background:rgba(255,255,255,.06);
}
.np-btn--outline-bright { border-color:rgba(255,255,255,.5); }
.np-btn--outline-bright:hover { border-color:#fff; }

.np-section--light .np-btn {
  background:var(--inv-fg);
  color:var(--inv-bg);
}
.np-section--light .np-btn:hover { background:var(--inv-accent); }
.np-section--light .np-btn--outline {
  border-color:var(--inv-line2);
  color:var(--inv-fg);
  background:transparent;
}
.np-section--light .np-btn--outline:hover {
  border-color:var(--inv-fg);
  background:rgba(26,25,22,.05);
}

/* ==========================================================================
   METRICS
   ========================================================================== */
.np-metrics {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.np-metrics__item {
  padding:32px 40px;
  border-right:1px solid var(--line-soft);
}
.np-metrics__item:last-child { border-right:none; }
.np-metrics__num {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:34px;
}
.np-metrics__num span { color:var(--accent); }
.np-metrics__label {
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted2);
  margin-top:5px;
  text-transform:uppercase;
}

/* ==========================================================================
   PROMISE
   ========================================================================== */
.np-promise {
  max-width:1080px !important;
  margin:0 auto;
  padding:130px 40px;
  text-align:center;
}
.np-promise .np-label { justify-content:center; }
.np-promise h2 {
  font-family:'Spectral', serif;
  font-weight:700;
  font-size:50px;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:28px 0 0;
}
.np-promise h2 em { font-style:italic; color:var(--accent2); }
.np-promise__columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  max-width:840px;
  margin:48px auto 0;
  text-align:left;
}
.np-promise__columns p {
  font-size:17px;
  line-height:1.7;
  color:var(--muted);
}
.np-promise__columns strong { color:var(--fg); font-weight:600; }

/* ==========================================================================
   PILLARS HEADER
   ========================================================================== */
.np-pillars-header {
  display:flex;
  justify-content:space-between;
  align-items:end;
  flex-wrap:wrap;
  gap:20px;
  padding-top:80px;
  padding-bottom:36px;
}
.np-pillars-header h2 {
  font-family:'Spectral', serif;
  font-weight:700;
  font-size:44px;
  letter-spacing:-.01em;
  margin-top:18px;
}
.np-pillars-header p {
  font-size:15px;
  color:var(--muted2);
  max-width:340px;
  line-height:1.6;
}

/* ==========================================================================
   PILLARS ROW
   ========================================================================== */
.np-pillars__row {
  display:grid;
  grid-template-columns:.34fr 1fr;
  align-items:start;
  border-top:1px solid var(--line);
}
.np-pillars__row--reverse { grid-template-columns:1fr .34fr; }
.np-pillars__row--dark { background:var(--panel); }

.np-pillars__info {
  padding:56px 40px;
  border-right:1px solid var(--line);
}
.np-pillars__row--reverse .np-pillars__info {
  border-right:none;
  border-left:none;
  order:2;
}
.np-pillars__row--reverse .np-pillars__links { border-right:1px solid var(--line); order:1; }

.np-pillars__numeral {
  font-family:'Spectral', serif;
  font-weight:800;
  font-size:88px;
  line-height:.9;
  color:var(--numeral);
}
.np-pillars__numeral--light { color:var(--numeral2); }
.np-pillars__info .np-label { margin-top:14px; display:block; }
.np-pillars__info h3 {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:30px;
  margin:14px 0 16px;
}
.np-pillars__info p {
  font-size:15px;
  line-height:1.62;
  color:var(--muted2);
  max-width:300px;
}

/* ==========================================================================
   SERVICES GRID (Pillar I)
   ========================================================================== */
.np-pillars__services {
  padding:56px 40px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 48px;
}
.np-pillars__service {
  font-size:15.5px;
  padding:15px 0;
  border-top:1px solid var(--line-08);
  transition:color .25s;
  cursor:default;
}
.np-pillars__service:hover { color:var(--accent2); }
.np-pillars__service--last { border-bottom:1px solid var(--line-08); }

/* ==========================================================================
   ARROW LINKS (Pillar II — Beamte)
   ========================================================================== */
.np-pillars__links {
  padding:56px 40px;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--line);
}
.np-pillars__link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:16.5px;
  padding:18px 0;
  border-top:1px solid var(--line-08);
  transition:padding .25s;
}
.np-pillars__link:hover { padding-left:8px; }
.np-pillars__link--last { border-bottom:1px solid var(--line-08); }
.np-pillars__arrow { color:var(--accent); }
.np-pillars__quote {
  font-family:'Spectral', serif;
  font-style:italic;
  font-size:18px;
  color:var(--muted);
  margin-top:28px;
  max-width:460px;
}

/* ==========================================================================
   PRIVATE BAR
   ========================================================================== */
.np-pillars__private {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  padding:30px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line-soft);
}
.np-pillars__private-left {
  display:flex;
  align-items:baseline;
  gap:18px;
  flex-wrap:wrap;
}
.np-pillars__private-left .np-label { font-size:11.5px; white-space:nowrap; }
.np-pillars__private-list { font-size:15px; color:var(--muted); }
.np-pillars__private-link {
  font-size:12px;
  letter-spacing:.12em;
  color:var(--fg);
  border-bottom:1px solid var(--accent);
  padding-bottom:3px;
  text-transform:uppercase;
  transition:color .25s;
}
.np-pillars__private-link:hover { color:var(--accent); }

/* ==========================================================================
   PROCESS / APPROACH STEPS (light section)
   ========================================================================== */
.np-process {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--inv-line);
}
.np-process__step { padding:44px; }
.np-process__step:first-child { padding-left:0; border-right:1px solid var(--inv-line); }
.np-process__step:nth-child(2) { border-right:1px solid var(--inv-line); }
.np-process__step:last-child { padding-right:0; }
.np-process__num {
  font-family:'Spectral', serif;
  font-weight:700;
  font-size:56px;
  line-height:1;
  margin-bottom:24px;
  color:var(--inv-fg);
}
.np-process__step--accent .np-process__num { color:var(--inv-accent); }
.np-process__step h3 {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:25px;
  margin-bottom:12px;
}
.np-process__step p {
  font-size:15.5px;
  line-height:1.64;
  color:var(--inv-muted);
}

/* ==========================================================================
   INHABER
   ========================================================================== */
.np-inhaber {
  display:grid;
  grid-template-columns:1.08fr .92fr;
  border-bottom:1px solid var(--line-soft);
}
.np-inhaber__image {
  position:relative;
  border-left:1px solid var(--line-soft);
  min-height:600px;
  overflow:hidden;
  background:repeating-linear-gradient(135deg, var(--hatch1) 0 18px, var(--panel) 18px 36px);
  box-shadow:var(--shadow);
}
.np-inhaber__image img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.np-inhaber__text {
  padding:104px 64px 104px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.np-inhaber__text .np-label { display:block; }
.np-inhaber__text h2 {
  font-family:'Spectral', serif;
  font-weight:700;
  font-size:46px;
  line-height:1.08;
  letter-spacing:-.01em;
  margin:20px 0 28px;
  max-width:540px;
}
.np-inhaber__text p {
  font-size:17.5px;
  line-height:1.66;
  color:var(--muted);
  margin-bottom:22px;
  max-width:560px;
}
.np-inhaber__text strong { color:var(--fg); font-weight:600; }
.np-inhaber__caption {
  position:absolute;
  left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(12,12,13,.9), transparent);
  padding:30px;
}
.np-inhaber__caption-name {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:20px;
}
.np-inhaber__caption-role {
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--muted-p);
  margin-top:4px;
  text-transform:uppercase;
}
/* modifier: mirrored layout (image first, text second) */
.np-inhaber--reverse { grid-template-columns:.92fr 1.08fr; }
.np-inhaber--reverse .np-inhaber__image { border-left:none; border-right:1px solid var(--line-soft); order:1; }
.np-inhaber--reverse .np-inhaber__text { order:2; padding:104px 40px 104px 64px; }

/* ==========================================================================
   TESTIMONIALS (homepage — 3-col)
   ========================================================================== */
.np-testimonials { padding-top:96px; padding-bottom:64px; }
.np-testimonials__header {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:56px;
  flex-wrap:wrap;
  gap:16px;
}
.np-testimonials__header h2 {
  font-family:'Spectral', serif;
  font-weight:700;
  font-size:44px;
  letter-spacing:-.01em;
  margin-top:18px;
}
.np-testimonials__rating {
  display:flex;
  align-items:center;
  gap:12px;
}
.np-testimonials__stars {
  color:var(--accent);
  letter-spacing:3px;
  font-size:15px;
}
.np-testimonials__rating span:last-child {
  font-size:14px;
  color:var(--muted);
}
.np-testimonials__rating strong { color:var(--fg); font-weight:600; }

.np-testimonials__grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--line);
}
.np-testimonials__item { padding:40px; }
.np-testimonials__item:first-child { padding-left:0; border-right:1px solid var(--line); }
.np-testimonials__item:nth-child(2) { border-right:1px solid var(--line); }
.np-testimonials__item:last-child { padding-right:0; }
.np-testimonials__item-stars {
  color:var(--accent);
  letter-spacing:2px;
  margin-bottom:22px;
  font-size:13px;
}
.np-testimonials__item blockquote {
  font-family:'Spectral', serif;
  font-size:20px;
  line-height:1.5;
  margin-bottom:30px;
}
.np-testimonials__author {
  display:flex;
  align-items:center;
  gap:14px;
}
.np-testimonials__avatar {
  width:46px;
  height:46px;
  background:repeating-linear-gradient(135deg, var(--hatch3) 0 8px, var(--hatch2) 8px 16px);
  flex:none;
}
.np-testimonials__name { font-size:14px; font-weight:600; }
.np-testimonials__location {
  font-size:12.5px;
  color:var(--muted2);
  letter-spacing:.04em;
}

/* ==========================================================================
   TESTIMONIAL (subpage — single centered)
   ========================================================================== */
.np-testimonial {
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:var(--panel);
}
.np-testimonial__inner {
  padding:72px 0;
  text-align:center;
  max-width:1000px;
  margin:0 auto;
}
.np-testimonial__stars {
  color:var(--accent);
  letter-spacing:3px;
  font-size:15px;
  margin-bottom:28px;
}
.np-testimonial__quote {
  font-family:'Spectral', serif;
  font-weight:400;
  font-style:italic;
  font-size:26px;
  line-height:1.45;
  max-width:720px;
  margin:0 auto 28px;
  color:var(--fg2);
}
.np-testimonial__quote em { color:var(--accent2); }
.np-testimonial__attribution {
  font-size:14px;
  color:var(--muted2);
  font-style:normal;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.np-cta-final {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:72px;
  align-items:center;
  padding-top:120px;
  padding-bottom:120px;
}
.np-cta-final--hatched {
  position:relative;
  overflow:hidden;
}
.np-cta-final--hatched__bg {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg, var(--cta-h1) 0 20px, var(--cta-h2) 20px 40px);
}
.np-cta-final--hatched__overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, var(--bg), var(--scrim), var(--bg));
}
.np-cta-final--hatched .np-cta-final {
  position:relative;
  z-index:2;
}
.np-cta-final__left h2 {
  font-family:'Spectral', serif;
  font-weight:800;
  font-size:64px;
  line-height:1.02;
  letter-spacing:-.02em;
  margin:22px 0 26px;
}
.np-cta-final__left p {
  font-size:18.5px;
  line-height:1.62;
  color:var(--fg2);
  max-width:480px;
  margin-bottom:42px;
}
.np-cta-final__actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.np-cta-final__card {
  border:1px solid var(--line-strong);
  padding:8px;
  background:var(--card-bg);
}
.np-cta-final__card-inner {
  border:1px solid var(--line-08);
  padding:36px;
}
.np-cta-final__card-title {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:22px;
  margin-bottom:26px;
}
.np-cta-final__row {
  display:flex;
  justify-content:space-between;
  padding:16px 0;
  border-top:1px solid var(--line-08);
}
.np-cta-final__row-label {
  color:var(--muted2);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.np-cta-final__row-value { font-size:15px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.np-footer {
  background:var(--bg2);
  border-top:1px solid var(--line-soft);
  /* Abstand nach oben, seit 28.08.2026. Vorher stiess der Inhalt auf fast
     jeder Seite direkt an den Footer, gemessen ein bis 28 Pixel. Am
     deutlichsten auf /ratgeber/, wo der Kasten in der Seitenspalte eine
     sichtbare Kante hat und ohne Luft am Footer klebte.
     Der Abstand steht hier und nicht in den einzelnen Vorlagen, damit es
     keine Seite gibt, die man dabei vergessen kann. */
  padding-top:56px;
}
@media (max-width:768px) {
  .np-footer { padding-top:40px; }
}
.np-footer__trust {
  display:flex;
  align-items:center;
  gap:14px 30px;
  flex-wrap:wrap;
  padding:22px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--muted3);
}
.np-footer__trust-stars { color:var(--accent); letter-spacing:1px; }
.np-footer__trust-item a {
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
.np-footer__trust-item a:hover { color:var(--accent); }
.np-footer__trust-item {
  font-size:14px;
  color:var(--muted2);
  display:flex;
  align-items:center;
  gap:9px;
}
.np-footer__trust-item::before {
  content:"";
  width:5px;
  height:5px;
  background:var(--accent);
  display:inline-block;
}

/* =====================================================================
   FORMULARE, 17.09.2026
   Kontakt- und Rueckrufformular. Bewusst ohne Rundungen und ohne
   Schattierungen, damit sie zum Rest der Seite passen und nicht wie ein
   eingesetztes Plugin wirken.
   ================================================================== */

.np-form { margin-top:36px; }

.np-form__reihe {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 24px;
}
@media (max-width:700px) {
  .np-form__reihe { grid-template-columns:1fr; }
}

.np-form__feld { margin-bottom:20px; }
.np-form__feld--schmal { max-width:340px; }

.np-form__feld label,
.np-form__zustimmung label {
  display:block;
  font-size:13px;
  letter-spacing:.02em;
  color:var(--muted2);
  margin-bottom:8px;
}
.np-form__optional {
  color:var(--muted3);
  font-size:12px;
  letter-spacing:0;
}

.np-form input[type="text"],
.np-form input[type="email"],
.np-form input[type="tel"],
.np-form input[type="date"],
.np-form select,
.np-form textarea {
  width:100%;
  background:transparent;
  border:1px solid var(--line-16);
  color:inherit;
  font-family:inherit;
  font-size:15px;
  line-height:1.5;
  padding:13px 14px;
  border-radius:0;
  transition:border-color .15s ease;
}
.np-form textarea { resize:vertical; min-height:150px; }

.np-form input:focus,
.np-form select:focus,
.np-form textarea:focus {
  outline:none;
  border-color:var(--accent);
}

/* Das Auswahlfeld erbt sonst die Systemfarben und wird im dunklen Layout
   unlesbar. Deshalb die Optionen ausdruecklich setzen, je Modus einmal.
   Ohne die zweite Regel klappt im hellen Modus eine schwarze Liste auf. */
.np-form select option { background:#14161a; color:#fff; }
:root[data-theme="light"] .np-form select option { background:#fff; color:#1f1d1a; }

.np-form__feld--fehler input,
.np-form__feld--fehler textarea { border-color:#c4614f; }

.np-form__fehler {
  display:block;
  margin-top:7px;
  font-size:13px;
  color:#e08b7a;
}

.np-form__notiz {
  margin-top:10px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted3);
}
.np-form__notiz--oben { margin:0 0 18px; }

/* Rueckrufformular im Buchungspanel auf /erstgespraech/, 18.09.2026.
   Es sitzt in derselben Huelle, in der vorher Calendly stand, damit sich
   an Breite und Platzierung nichts aendert.

   ACHTUNG, der Grund fuer die vielen Einzelregeln: das Panel ist hell, das
   Formular ist fuer den dunklen Seitenhintergrund gebaut. Ohne die Regeln
   hier stehen helle Beschriftungen auf weissem Grund und die Feldrahmen
   verschwinden. Beim ersten Versuch war genau das der Fall. */
.np-booking--formular { padding:28px; }
.np-booking--formular .np-form { margin-top:20px; }
.np-booking--formular .np-form__reihe { grid-template-columns:1fr; gap:0; }
.np-booking--formular .np-form__feld { margin-bottom:16px; }
.np-booking--formular .np-form__feld--schmal { max-width:none; }
.np-booking--formular .np-form__zustimmung { margin-bottom:20px; }
.np-booking--formular .np-btn--lg { width:100%; }

/* Farben umdrehen, weil der Untergrund hell ist. */
.np-booking--formular .np-form__feld label,
.np-booking--formular .np-form__zustimmung label { color:#5d5951; }
.np-booking--formular .np-form__optional { color:#8a867e; }
.np-booking--formular .np-form input,
.np-booking--formular .np-form select,
.np-booking--formular .np-form textarea {
  color:#141414;
  border-color:rgba(20,20,20,.22);
  background:#fff;
}
.np-booking--formular .np-form input:focus,
.np-booking--formular .np-form select:focus,
.np-booking--formular .np-form textarea:focus { border-color:#141414; }
.np-booking--formular .np-form select option { background:#fff; color:#141414; }
.np-booking--formular .np-form__notiz { color:#8a867e; }
.np-booking--formular .np-form__zustimmung a { color:#141414; }
.np-booking--formular .np-btn { background:#141414; color:#fff; border-color:#141414; }
.np-booking--formular .np-btn:hover { background:var(--accent,#c8a86b); border-color:var(--accent,#c8a86b); color:#141414; }
.np-booking--formular .np-form__danke { border-color:rgba(20,20,20,.18); }
.np-booking--formular .np-form__danke-titel { color:#141414; }
.np-booking--formular .np-form__danke p { color:#5d5951; }
.np-booking--formular .np-form__danke a { color:#141414; }

@media (max-width:520px) { .np-booking--formular { padding:20px; } }

/* Wunschtermin, 18.09.2026. Abgesetzt vom Rest, weil es ein eigenes Thema
   ist und optional bleibt. Faellt weg, sobald Calendly uebernimmt. */
.np-form__gruppe {
  border:0;
  border-top:1px solid var(--line-soft);
  padding:24px 0 0;
  margin:6px 0 24px;
}
.np-form__gruppe legend {
  padding:0;
  font-family:'Spectral', serif;
  font-size:17px;
  font-weight:600;
  color:var(--fg);
  margin-bottom:6px;
}

/* Der Datumswaehler bringt in Chrome ein eigenes Symbol mit, das im dunklen
   Layout fast schwarz auf schwarz steht. Aufhellen statt ausblenden, damit
   erkennbar bleibt, dass sich hier ein Kalender oeffnet. */
.np-form input[type="date"] { min-height:49px; }
.np-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter:invert(1) opacity(.55);
  cursor:pointer;
}
.np-form input[type="date"]::-webkit-calendar-picker-indicator:hover { filter:invert(1) opacity(1); }
:root[data-theme="light"] .np-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter:opacity(.55);
}

.np-form__zustimmung {
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin:6px 0 26px;
}
.np-form__zustimmung input[type="checkbox"] {
  margin-top:3px;
  width:17px;
  height:17px;
  flex:0 0 auto;
  accent-color:var(--accent);
}
.np-form__zustimmung label { margin-bottom:0; line-height:1.6; }
.np-form__zustimmung a { color:inherit; text-decoration:underline; text-underline-offset:3px; }

.np-form__hinweis {
  border-left:2px solid #c4614f;
  padding:13px 16px;
  margin-bottom:26px;
  font-size:14px;
  color:var(--muted2);
  background:rgba(196,97,79,.07);
}

/* Der Honigtopf. Nicht display:none, das erkennen manche Bots als Falle.
   Stattdessen aus dem sichtbaren Bereich geschoben. */
.np-form__topf {
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.np-form__danke {
  border:1px solid var(--line-16);
  border-left:2px solid var(--accent);
  padding:30px 32px;
  margin-top:36px;
}
.np-form__danke-mark { color:var(--accent); margin-bottom:12px; }
.np-form__danke-titel {
  font-family:'Spectral', serif;
  font-size:20px;
  font-weight:600;
  margin:0 0 8px;
}
.np-form__danke p { color:var(--muted2); line-height:1.7; }
.np-form__danke a { color:var(--accent); }

/* Newsletter im Footer */
/* 18.09.2026 korrigiert. Vorher trug das Formular selbst den Rahmen und die
   Zustimmungszeile lag mit darin. Der Kasten reichte dadurch unter den Knopf
   und alles wirkte verrutscht. Jetzt traegt die Zeile mit Feld und Knopf den
   Rahmen, die Zustimmung steht frei darunter. */
.np-footer__newsletter-form {
  display:block;
  border:none;
  min-width:0;
  width:100%;
  max-width:480px;
  position:relative;
}
.np-footer__newsletter-row {
  display:flex;
  border:1px solid var(--line-16);
}
.np-footer__newsletter-ok {
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:12px;
}
.np-footer__newsletter-ok input[type="checkbox"] {
  margin-top:3px;
  width:15px;
  height:15px;
  flex:0 0 auto;
  accent-color:var(--accent);
}
.np-footer__newsletter-ok label {
  font-size:12px;
  line-height:1.6;
  color:var(--muted3);
}
.np-footer__newsletter-ok a { color:inherit; text-decoration:underline; text-underline-offset:2px; }

.np-footer__newsletter-meldung {
  margin-top:14px;
  font-size:13.5px;
  line-height:1.6;
  max-width:460px;
}
.np-footer__newsletter-meldung--gut { color:var(--accent); }
.np-footer__newsletter-meldung--schlecht { color:#e08b7a; }

@media (max-width:520px) {
  .np-footer__newsletter-row { flex-direction:column; }
  .np-footer__newsletter-btn { width:100%; padding:13px 20px; }
  .np-footer__newsletter-input { border-bottom:1px solid var(--line-16); }
}

/* Herkunftshinweis unter den Kundenstimmen, 09.09.2026.
   Bewusst klein und ruhig: Pflichtangabe, kein Verkaufselement. */
.np-testimonials__quelle {
  margin-top:28px;
  max-width:760px;
  font-size:12.5px;
  line-height:1.65;
  color:var(--muted3);
}
.np-testimonials__quelle a {
  color:var(--muted2);
  text-decoration:underline;
  text-underline-offset:3px;
}
.np-testimonials__quelle a:hover { color:var(--accent); }

/* Statusinformation nach VersVermV, 08.09.2026.
   Sitzt direkt unter der Trust-Leiste, bewusst ruhig gehalten:
   Pflichtangabe, kein Werbeelement. */
.np-footer__status {
  padding:16px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
  line-height:1.6;
  color:var(--muted3);
  max-width:760px;
}

.np-footer__newsletter {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px 32px;
  padding:48px 0;
  border-bottom:1px solid var(--line-soft);
  flex-wrap:wrap;
}
.np-footer__newsletter-label {
  font-size:11.5px;
  letter-spacing:.2em;
  color:var(--accent);
  text-transform:uppercase;
  margin-bottom:12px;
}
.np-footer__newsletter-headline {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:26px;
  line-height:1.15;
  margin-top:8px;
  max-width:500px;
}
/* Die Regeln fuer das Newsletter-Formular stehen gebuendelt weiter oben,
   siehe Korrektur vom 18.09.2026. Hier bewusst nichts mehr. */
.np-footer__newsletter-input {
  flex:1 1 auto;
  min-width:0;
  background:transparent;
  border:none;
  outline:none;
  padding:14px 20px;
  font-size:15px;
  color:var(--fg);
  font-family:inherit;
}
.np-footer__newsletter-input::placeholder { color:var(--muted3); }
.np-footer__newsletter-btn {
  flex:0 0 auto;
  white-space:nowrap;
  background:var(--fg);
  color:var(--bg);
  border:none;
  padding:14px 24px;
  font-size:12px;
  letter-spacing:.1em;
  font-weight:600;
  text-transform:uppercase;
  cursor:pointer;
}
.np-footer__newsletter-btn:hover { background:var(--accent); }

.np-footer__columns {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:48px;
  padding:64px 0 32px;
}
.np-footer__col--brand {}
.np-footer__brand-name {
  font-family:'Spectral', serif;
  font-weight:700;
  font-size:24px;
}
.np-footer__brand-desc {
  font-size:14px;
  line-height:1.65;
  margin-top:16px;
  max-width:300px;
  color:var(--muted2);
}
.np-footer__contact {
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted-b);
  margin-top:20px;
}
.np-footer__social {
  display:flex;
  gap:12px;
  margin-top:20px;
}
.np-footer__social a {
  border:1px solid var(--line-16);
  padding:8px 16px;
  font-size:13px;
  color:var(--fg2);
  transition:border-color .25s, color .25s;
}
.np-footer__social a:hover { border-color:var(--accent); color:var(--fg); }

.np-footer__col-label {
  font-size:11px;
  letter-spacing:.18em;
  color:var(--muted3);
  margin-bottom:18px;
  text-transform:uppercase;
}
.np-footer__col-links {
  display:flex;
  flex-direction:column;
  gap:11px;
  font-size:14.5px;
  color:var(--muted-b);
}
.np-footer__col-links a { width:fit-content; transition:color .25s; }
.np-footer__col-links a:hover { color:var(--fg); }

.np-footer__bottom {
  padding:22px 0;
  border-top:1px solid var(--line-soft);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--faint);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.np-footer__bottom a { transition:color .25s; }
.np-footer__bottom a:hover { color:var(--fg); }
.np-footer__bottom-links { display:flex; gap:22px; flex-wrap:wrap; }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.np-breadcrumb {
  padding:14px 0;
  font-size:13px;
  color:var(--muted2);
  letter-spacing:.02em;
}
.np-breadcrumb a { color:var(--muted2); transition:color .25s; }
.np-breadcrumb a:hover { color:var(--fg); }
.np-breadcrumb__sep { margin:0 8px; color:var(--muted3); }
.np-breadcrumb__current { color:var(--fg2); }

/* ==========================================================================
   EDITORIAL
   ========================================================================== */
.np-editorial { padding:80px 36px; }
.np-editorial__label { flex-shrink:0; }
.np-editorial__columns {
  display:grid;
  grid-template-columns:.38fr 1fr;
  gap:64px;
  align-items:start;
}
.np-editorial__right h2 {
  font-family:'Spectral', serif;
  font-weight:700;
  font-size:38px;
  line-height:1.1;
  margin-bottom:20px;
}
.np-editorial__right p {
  font-size:17px;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:16px;
}
.np-editorial__right strong { color:var(--fg); font-weight:600; }

/* ==========================================================================
   COVERAGE GRID (Gewerbe)
   ========================================================================== */
.np-grid--coverage {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
}
.np-grid--coverage__item {
  padding:34px 28px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .25s;
}
.np-grid--coverage__item:hover { background:var(--panel); }
.np-grid--coverage__num {
  font-family:'Spectral', serif;
  font-size:15px;
  color:var(--accent);
  margin-bottom:22px;
}
.np-grid--coverage__title {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:20px;
  margin-bottom:10px;
}
.np-grid--coverage__text {
  font-size:14px;
  line-height:1.6;
  color:var(--muted2);
}

/* ==========================================================================
   VALUES GRID (Über uns) — same structure as coverage, 2 columns
   ========================================================================== */
.np-grid--values {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
}
.np-grid--values__item {
  padding:48px 44px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .25s;
}
.np-grid--values__item:hover { background:var(--panel); }
.np-grid--values__num {
  font-family:'Spectral', serif;
  font-weight:800;
  font-size:40px;
  color:var(--numeral2);
  margin-bottom:20px;
}
.np-grid--values__title {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:25px;
  margin-bottom:12px;
}
.np-grid--values__text {
  font-size:15.5px;
  line-height:1.66;
  color:var(--muted2);
  max-width:440px;
}

/* ==========================================================================
   TAGS
   ========================================================================== */
.np-tags {
  display:flex;
  align-items:center;
  gap:24px;
  padding:32px 0;
  border-top:1px solid var(--line-soft);
  flex-wrap:wrap;
}
.np-tags__left {
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--accent);
  text-transform:uppercase;
  flex-shrink:0;
}
.np-tags__right {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.np-tags__item {
  border:1px solid var(--line-16);
  padding:8px 16px;
  font-size:13px;
  color:var(--fg2);
  transition:border-color .25s, color .25s;
}
.np-tags__item:hover { border-color:var(--accent); color:var(--fg); }

/* ==========================================================================
   FAQ (Gewerbe)
   ========================================================================== */
.np-faq details {
  border-bottom:1px solid var(--line-soft);
}
.np-faq details:first-child { border-top:1px solid var(--line); }
.np-faq summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:22px 0;
  cursor:pointer;
  list-style:none;
  font-size:17px;
  color:var(--fg2);
  transition:color .25s;
}
.np-faq summary::-webkit-details-marker { display:none; }
.np-faq summary:hover { color:var(--fg); }
.np-faq__question {
  font-family:'Spectral', serif;
  font-weight:500;
}
.np-faq__icon {
  font-size:20px;
  color:var(--accent);
  transition:transform .3s;
  line-height:1;
  flex-shrink:0;
}
.np-faq details[open] .np-faq__icon { transform:rotate(45deg); }
.np-faq__answer {
  padding:0 0 24px;
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
  max-width:640px;
}

/* ==========================================================================
   LEGAL CONTENT (Impressum, Datenschutz)
   ========================================================================== */
.np-legal-content h1 {
  font-family:'Spectral',serif;
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:700;
  margin-bottom:48px;
}
.np-legal-content h2 {
  font-family:'Spectral',serif;
  font-size:1.25rem;
  font-weight:600;
  margin-top:40px;
  margin-bottom:12px;
  color:var(--fg);
}
.np-legal-content h3 {
  font-family:'Hanken Grotesk',sans-serif;
  font-size:1rem;
  font-weight:600;
  margin-top:24px;
  margin-bottom:8px;
  color:var(--fg2);
}
.np-legal-content p {
  font-size:16px;
  line-height:1.75;
  color:var(--muted);
  margin-bottom:16px;
}
.np-legal-content a {
  color:var(--accent2);
  text-decoration:underline;
  text-underline-offset:3px;
}
.np-legal-content a:hover {
  color:var(--accent);
}

/* ==========================================================================
   COMPARISON TABLE (Beamte)
   ========================================================================== */
.np-comparison__header {
  display:grid;
  /* Muss mit .np-comparison__row uebereinstimmen, sonst stehen die
     Spaltenueberschriften nicht ueber ihren Spalten. */
  grid-template-columns:1fr 1fr 1fr;
  border-bottom:1px solid var(--line);
  border-top:2px solid var(--fg);
  padding:16px 0;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--muted2);
  text-transform:uppercase;
}
.np-section--light .np-comparison__header {
  border-top:2px solid var(--inv-fg);
  border-bottom:1px solid var(--inv-line2);
  color:var(--inv-muted2);
}
.np-comparison__row {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  border-bottom:1px solid var(--line-soft);
  padding:18px 0;
  font-size:15px;
  align-items:baseline;
}
.np-section--light .np-comparison__row { border-bottom:1px solid var(--inv-line2); }
.np-comparison__row-label {
  font-family:'Spectral', serif;
  color:var(--muted);
}
.np-comparison__row-standard { color:var(--muted2); }
.np-comparison__row-nicolay { color:var(--fg); font-weight:600; }
.np-section--light .np-comparison__row-label { color:var(--inv-fg); }
.np-section--light .np-comparison__row-standard { color:var(--inv-muted2); }
.np-section--light .np-comparison__row-nicolay { color:var(--inv-accent); }

/* ==========================================================================
   TOPICS (Beamte — DU/PKV split)
   ========================================================================== */
.np-topics {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.np-topics__block { padding:56px 48px; }
.np-topics__block--panel {
  background:var(--panel);
  border-left:1px solid var(--line);
}
.np-topics__numeral {
  font-family:'Spectral', serif;
  font-weight:800;
  font-size:64px;
  line-height:.9;
  color:var(--numeral);
  margin-bottom:22px;
}
.np-topics__block--panel .np-topics__numeral { color:var(--numeral2); }
.np-topics__heading {}
.np-topics__title {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:28px;
  margin:12px 0 16px;
}
.np-topics__text {
  font-size:15px;
  line-height:1.62;
  color:var(--muted2);
  max-width:360px;
  margin-bottom:28px;
}
.np-topics__list {
  display:flex;
  flex-direction:column;
}
.np-topics__list-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 0;
  border-top:1px solid var(--line-08);
  font-size:15.5px;
  transition:padding .25s;
}
.np-topics__list-item:hover { padding-left:6px; }
.np-topics__list-item--last { border-bottom:1px solid var(--line-08); }
.np-topics__arrow { color:var(--accent); }

/* ==========================================================================
   TIMELINE (Über uns)
   ========================================================================== */
.np-timeline {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:2px solid var(--inv-fg);
}
.np-timeline__item {
  padding:36px 32px 40px;
  border-right:1px solid var(--inv-line);
}
.np-timeline__item:first-child { padding-left:0; }
.np-timeline__item:last-child { padding-right:0; border-right:none; }
.np-timeline__year {
  font-family:'Spectral', serif;
  font-weight:700;
  font-size:34px;
  color:var(--inv-accent);
  margin-bottom:16px;
}
.np-timeline__year--current { color:var(--inv-fg); }
.np-timeline__text {
  font-size:14.5px;
  line-height:1.6;
  color:var(--inv-muted);
}
/* dark-mode variant of the timeline block (e.g. block-library "Ablauf B" numbering) */
.np-timeline--dark {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line-strong);
}
.np-timeline--dark .np-timeline__item { border-right:1px solid var(--line); }
.np-timeline--dark .np-timeline__year { color:var(--accent); }
.np-timeline--dark .np-timeline__year--current { color:var(--fg); }
.np-timeline--dark .np-timeline__text { color:var(--muted2); }

/* ==========================================================================
   TEAM GRID (Über uns)
   ========================================================================== */
.np-team {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.np-team__member {
  border-right:1px solid var(--line-soft);
}
.np-team__member:last-child { border-right:none; }
.np-team__photo {
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--panel);
}
.np-team__photo img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.np-team__info { padding:20px 24px; }
.np-team__name {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:18px;
}
.np-team__role {
  font-size:13px;
  color:var(--muted2);
  margin-top:4px;
}

/* ==========================================================================
   UTILITY
   ========================================================================== */
.np-img-hover img { transition:transform .6s cubic-bezier(.2,.6,.2,1); }
.np-img-hover:hover img { transform:scale(1.05); }

/* ==========================================================================
   THEME TOGGLE — sticky bottom-right pill
   ========================================================================== */
.np-theme-toggle {
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:90;
  background:#f3f1ec;
  color:#1a1916;
  border:none;
  border-radius:24px;
  cursor:pointer;
  padding:10px 18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Hanken Grotesk', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  transition:transform .25s, box-shadow .25s;
}
.np-theme-toggle:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 28px rgba(0,0,0,.35);
}
[data-theme="light"] .np-theme-toggle {
  background:#1a1916;
  color:#f3f1ec;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
}
[data-theme="light"] .np-theme-toggle:hover {
  box-shadow:0 6px 28px rgba(0,0,0,.2);
}
.np-theme-toggle__icon {
  font-size:15px;
  line-height:1;
}
.np-theme-toggle__icon--sun { display:inline; }
.np-theme-toggle__icon--moon { display:none; }
[data-theme="light"] .np-theme-toggle__icon--sun { display:none; }
[data-theme="light"] .np-theme-toggle__icon--moon { display:inline; }
.np-theme-toggle__label--dark { display:inline; }
.np-theme-toggle__label--light { display:none; }
[data-theme="light"] .np-theme-toggle__label--dark { display:none; }
[data-theme="light"] .np-theme-toggle__label--light { display:inline; }

/* ==========================================================================
   MOBILE HEADER ACTIONS (CTA-mini + hamburger)
   ========================================================================== */
.np-header__mobile-actions {
  display:none;
  align-items:center;
  gap:16px;
}
.np-header__cta-mini {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--accent);
  color:var(--bg);
  padding:9px 14px;
  font-size:11px;
  letter-spacing:.1em;
  font-weight:600;
  text-transform:uppercase;
  transition:background .3s;
  white-space:nowrap;
}
.np-header__cta-mini svg {
  flex-shrink:0;
}
.np-header__cta-mini:hover { background:var(--accent2); }

/* ==========================================================================
   MOBILE NAV
   ========================================================================== */
.np-nav-toggle {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  color:var(--fg);
  position:relative;
  width:28px;
  height:20px;
}
.np-nav-toggle span {
  display:block;
  width:100%;
  height:2px;
  background:var(--fg);
  transition:transform .3s, opacity .3s;
  position:absolute;
  left:0;
}
.np-nav-toggle span:nth-child(1) { top:0; }
.np-nav-toggle span:nth-child(2) { top:50%; transform:translateY(-50%); }
.np-nav-toggle span:nth-child(3) { bottom:0; }
.np-nav-toggle.is-active span:nth-child(1) { top:50%; transform:translateY(-50%) rotate(45deg); }
.np-nav-toggle.is-active span:nth-child(2) { opacity:0; }
.np-nav-toggle.is-active span:nth-child(3) { bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg); }

.np-nav-mobile {
  display:none;
}
.np-nav-mobile.is-active {
  display:flex;
  flex-direction:column;
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--bg);
  padding:0;
  overflow-x:hidden;
  overflow-y:auto;
}

/* Mobile nav header with brand + close button */
.np-nav-mobile__header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 36px;
  border-bottom:1px solid var(--line-soft);
}
.np-nav-mobile__brand {
  display:flex;
  flex-direction:column;
}
.np-nav-mobile__close {
  background:none;
  border:1px solid var(--line);
  cursor:pointer;
  color:var(--muted-b);
  padding:10px;
  transition:color .25s, border-color .25s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.np-nav-mobile__close:hover {
  color:var(--fg);
  border-color:var(--line-22);
}

/* Mobile nav links */
.np-nav-mobile__links {
  display:flex;
  flex-direction:column;
  padding:32px 36px 0;
  gap:0;
}
.np-nav-mobile__links a {
  font-size:16px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-b);
  transition:color .25s;
  padding:18px 0;
  border-bottom:1px solid var(--line-soft);
}
.np-nav-mobile__links > a:last-child { border-bottom:none; }
.np-nav-mobile__links a:hover { color:var(--fg); }

/* Mobile nav groups (accordion-style) */
.np-nav-mobile__group {
  border-bottom:1px solid var(--line-soft);
}
.np-nav-mobile__group-title {
  display:block;
  padding:16px 0;
  font-family:'Spectral',serif;
  font-size:1.25rem;
  color:var(--fg2);
  transition:color .25s;
}
.np-nav-mobile__group-title:hover { color:var(--fg); }
.np-nav-mobile__sublinks {
  padding:0 0 12px 16px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.np-nav-mobile__sublinks a {
  padding:8px 0;
  font-size:0.85rem;
  color:var(--muted);
  border-bottom:none !important;
  letter-spacing:.02em;
}
.np-nav-mobile__sublinks a:hover { color:var(--accent2); }

/* Mobile nav CTA */
.np-nav-mobile__cta {
  margin:32px 36px 0;
  text-align:center;
  box-sizing:border-box;
  max-width:calc(100% - 72px);
}

/* Mobile nav footer with contact info */
.np-nav-mobile__footer {
  margin-top:auto;
  padding:32px 36px;
  border-top:1px solid var(--line-soft);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.np-nav-mobile__tagline {
  font-family:'Spectral', serif;
  font-size:15px;
  font-style:italic;
  color:var(--muted2);
  line-height:1.5;
}
.np-nav-mobile__contact {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.np-nav-mobile__contact a {
  font-size:13px;
  letter-spacing:.04em;
  color:var(--accent);
  transition:color .25s;
}
.np-nav-mobile__contact a:hover { color:var(--accent2); }
.np-nav-mobile__location {
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted3);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes omReveal {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:no-preference) {
  section > div {
    animation:omReveal .75s cubic-bezier(.2,.6,.2,1) both;
    animation-timeline:view();
    animation-range:entry 0% cover 20%;
  }
}
@keyframes omGrowLine {
  from { transform:scaleX(0); }
  to   { transform:scaleX(1); }
}
@media (prefers-reduced-motion:no-preference) {
  .np-label__line {
    transform-origin:left center;
    animation:omGrowLine .9s cubic-bezier(.2,.6,.2,1) both;
    animation-timeline:view();
    animation-range:entry 0% cover 16%;
  }
}

/* ==========================================================================
   RESPONSIVE — 1100px
   ========================================================================== */
@media (max-width: 1100px) {
  .np-hero--cinematic h1 { font-size:72px; }
  .np-hero--split h1, .np-hero--split--wide h1 { font-size:56px; }
  .np-hero--image h1 { font-size:56px; }
  .np-cta-final__left h2 { font-size:52px; }
  .np-inhaber__text h2 { font-size:38px; }
  .np-promise h2 { font-size:40px; }
  .np-pillars-header h2,
  .np-testimonials__header h2,
  .np-editorial__right h2 { font-size:36px; }

  .np-metrics { grid-template-columns:repeat(2, 1fr); }
  .np-metrics__item:nth-child(2) { border-right:none; }

  .np-pillars__row,
  .np-pillars__row--reverse { grid-template-columns:1fr; }
  .np-pillars__row--reverse .np-pillars__info,
  .np-pillars__row--reverse .np-pillars__links { order:initial; border-right:none; border-left:none; }
  .np-pillars__numeral { font-size:64px; }
  .np-pillars__services { grid-template-columns:1fr 1fr; padding:40px 36px; }

  .np-process { grid-template-columns:1fr; }
  .np-process__step { border-right:none !important; padding:32px 0 !important; border-bottom:1px solid var(--inv-line); }
  .np-process__step:last-child { border-bottom:none; }

  .np-inhaber,
  .np-inhaber--reverse,
  .np-hero--split,
  .np-hero--split--wide { grid-template-columns:1fr; }
  .np-inhaber__image,
  .np-inhaber--reverse .np-inhaber__image,
  .np-hero--split__image { min-height:420px; border-left:none; border-top:1px solid var(--line-soft); order:initial; }
  .np-inhaber__text,
  .np-inhaber--reverse .np-inhaber__text,
  .np-hero--split__text { padding:64px 36px; order:initial; }

  .np-testimonials__grid,
  .np-grid--coverage,
  .np-timeline,
  .np-team { grid-template-columns:repeat(2, 1fr); }
  .np-testimonials__item:nth-child(2) { border-right:none; }
  .np-grid--coverage__item:nth-child(2n) { border-right:none; }
  .np-timeline__item:nth-child(2) { border-right:none; padding-right:0; }
  .np-team__member:nth-child(2) { border-right:none; }

  .np-topics { grid-template-columns:1fr; }
  .np-topics__block--panel { border-left:none; border-top:1px solid var(--line); }

  .np-cta-final { grid-template-columns:1fr; gap:48px; padding-top:80px; padding-bottom:80px; }

  .np-footer__columns { grid-template-columns:1fr 1fr; gap:40px 32px; }
}

/* ==========================================================================
   RESPONSIVE — 768px
   ========================================================================== */
@media (max-width: 768px) {
  .np-wrap { padding-left:20px; padding-right:20px; }
  .np-wrap--wide { padding-left:20px; padding-right:20px; }

  /* Auf schmalen Schirmen ist fuer den Zusatztext kein Platz. Telefon und
     E-Mail bleiben, weil sie der eigentliche Zweck der Leiste sind. */
  .np-utility__text { display:none; }
  .np-utility__inner { justify-content:center; }
  .np-utility__links { gap:18px; font-size:12px; }

  .np-hero--cinematic { min-height:620px; }
  .np-hero--cinematic h1 { font-size:44px; margin-bottom:22px; }
  .np-hero--cinematic__sub { font-size:16px; max-width:100%; }
  .np-hero--cinematic__bottom { flex-direction:column; align-items:flex-start; gap:24px; }

  .np-hero--split h1, .np-hero--split--wide h1,
  .np-hero--image h1 { font-size:38px; }
  .np-hero--split__text, .np-hero--split--wide .np-hero--split__text,
  .np-hero--image__content { padding:56px 20px; min-height:auto; }
  .np-hero--image__content { padding:56px 20px; }

  .np-cta-final__left h2 { font-size:38px; }
  .np-cta-final__left p { font-size:16px; }
  .np-inhaber__text h2 { font-size:30px; }
  .np-section--light { padding:72px 0; }
  .np-promise { padding:72px 20px; }
  .np-promise h2 { font-size:30px; }
  .np-promise__columns { grid-template-columns:1fr; gap:28px; }

  .np-pillars-header,
  .np-testimonials__header,
  .np-footer__newsletter { flex-direction:column; align-items:flex-start; }
  .np-pillars-header h2,
  .np-testimonials__header h2,
  .np-editorial__right h2 { font-size:28px; }

  .np-metrics { grid-template-columns:1fr 1fr; }
  .np-metrics__item { padding:24px 20px; }

  .np-pillars__info,
  .np-pillars__services,
  .np-pillars__links { padding:36px 20px; }
  .np-pillars__numeral { font-size:48px; }

  .np-testimonials__grid,
  .np-grid--coverage,
  .np-grid--values,
  .np-timeline,
  .np-team,
  .np-topics,
  .np-comparison__header,
  .np-comparison__row { grid-template-columns:1fr; }
  .np-testimonials__item,
  .np-grid--coverage__item,
  .np-grid--values__item,
  .np-timeline__item,
  .np-team__member { border-right:none !important; border-left:none !important; padding-left:0 !important; padding-right:0 !important; }
  .np-comparison__row-standard,
  .np-comparison__row-nicolay { margin-top:4px; }

  .np-editorial__columns { grid-template-columns:1fr; gap:24px; }

  .np-cta-final { padding-top:56px; padding-bottom:56px; }
  .np-cta-final__card-inner { padding:24px; }

  .np-footer__columns { grid-template-columns:1fr; gap:36px; padding:48px 0 24px; }
  .np-footer__newsletter-form { min-width:0; width:100%; }
  .np-footer__bottom { flex-direction:column; align-items:flex-start; gap:12px; }

  .np-nav { display:none; }
  .np-header__mobile-actions { display:flex; }
  .np-nav-toggle { display:block; }
  .np-header__inner { padding-top:16px; padding-bottom:16px; }
  .np-header--overlay .np-header__inner { padding-top:16px; padding-bottom:16px; }
  .np-header__name { font-size:20px; }
  .np-header__subtitle { font-size:9px; letter-spacing:.25em; }
}

/* ==========================================================================
   RESPONSIVE — 480px
   ========================================================================== */
@media (max-width: 480px) {
  .np-wrap, .np-wrap--wide { padding-left:20px; padding-right:20px; }

  .np-hero--cinematic h1 { font-size:34px; }
  .np-hero--cinematic__sub { font-size:14.5px; }
  .np-hero--split h1, .np-hero--split--wide h1,
  .np-hero--image h1 { font-size:30px; }
  .np-hero--split p, .np-hero--image p { font-size:16px; }

  .np-section--light { padding:56px 0; }
  .np-promise h2 { font-size:24px; }
  .np-cta-final__left h2 { font-size:30px; }
  .np-inhaber__text h2 { font-size:26px; }

  .np-pillars-header h2,
  .np-testimonials__header h2,
  .np-editorial__right h2 { font-size:24px; }
  .np-pillars__numeral { font-size:36px; }
  .np-pillars__services { grid-template-columns:1fr; }

  .np-metrics { grid-template-columns:1fr; }
  .np-metrics__item { border-right:none; border-bottom:1px solid var(--line-soft); }
  .np-metrics__item:last-child { border-bottom:none; }

  .np-btn, .np-btn--outline { width:100%; text-align:center; padding:15px 20px; }
  .np-hero__actions, .np-cta-final__actions { flex-direction:column; }

  .np-footer__newsletter-headline { font-size:20px; }
  .np-footer__trust { flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ============================================================
   TERMINBUCHUNG  (Seite Erstgespraech)
   Buchung steht im Hero. Calendly laedt erst nach Klick,
   davor eine reine CSS-Vorschau ohne externe Requests.
   ============================================================ */
.np-hero--booking{padding-top:48px;padding-bottom:72px}
.np-booking-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:start}
.np-booking-hero__text h1{margin:12px 0 20px}
.np-booking-hero__lead{font-size:1.125rem;line-height:1.65;opacity:.85;margin:0 0 28px}
.np-booking-hero__points{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px}
.np-booking-hero__points li{position:relative;padding-left:30px;line-height:1.5;opacity:.9}
.np-booking-hero__points li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:7px;
  border-left:2px solid var(--accent,#c8a86b);border-bottom:2px solid var(--accent,#c8a86b);transform:rotate(-45deg)}
.np-booking-hero__alt{font-size:.95rem;opacity:.7;margin:0 0 32px}
.np-booking-hero__alt a{color:var(--accent,#c8a86b);text-decoration:underline}
.np-booking-hero__portrait{display:flex;align-items:center;gap:16px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}
.np-booking-hero__portrait img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.np-booking-hero__portrait span{font-size:.95rem;opacity:.8}

.np-booking{position:relative;border:1px solid rgba(255,255,255,.14);border-radius:10px;overflow:hidden;background:#fff}
.np-booking__gate{position:relative}

/* --- CSS-Vorschau: sieht aus wie der Kalender, laedt aber nichts --- */
.np-booking__preview{padding:28px 32px;filter:blur(1.5px);opacity:.5;user-select:none;pointer-events:none}
.np-booking__preview-head{border-bottom:1px solid #e5e3de;padding-bottom:16px;margin-bottom:20px}
.np-booking__preview-title{display:block;font-family:var(--font-serif,serif);font-size:1.35rem;color:#1b1b1b}
.np-booking__preview-sub{display:block;font-size:.85rem;color:#8a867e;margin-top:4px}
.np-booking__preview-month{text-align:center;font-weight:600;color:#1b1b1b;margin-bottom:14px}
.np-booking__preview-dow,.np-booking__preview-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.np-booking__preview-dow span{font-size:.7rem;color:#8a867e;padding-bottom:6px}
.np-booking__preview-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#b9b5ad;border-radius:50%}
.np-booking__preview-day.is-free{background:#e8eef7;color:#2b5ca8;font-weight:600}
.np-booking__preview-slots{display:flex;gap:8px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.np-booking__preview-slots span{border:1px solid #2b5ca8;color:#2b5ca8;border-radius:4px;padding:8px 18px;font-size:.8rem}

/* --- Overlay mit dem eigentlichen Button --- */
.np-booking__overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:32px;background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.95) 55%)}
.np-booking__title{font-family:var(--font-serif,serif);font-size:1.6rem;color:#141414;margin:0 0 10px}
.np-booking__note{font-size:.85rem;line-height:1.55;color:#5d5951;max-width:380px;margin:0 0 22px}
.np-booking__note a{color:#141414;text-decoration:underline}
.np-booking__hint{font-size:.8rem;color:#8a867e;margin:16px 0 0}
.np-btn--lg{font-size:.95rem;padding:18px 34px}
.np-booking__overlay .np-btn{background:#141414;color:#fff;border-color:#141414}
.np-booking__overlay .np-btn:hover{background:var(--accent,#c8a86b);border-color:var(--accent,#c8a86b);color:#141414}
.np-booking__overlay .np-btn[disabled]{opacity:.6;cursor:wait}

@media (max-width:1024px){
  .np-booking-hero{grid-template-columns:1fr;gap:40px}
  .np-booking-hero__panel{order:-1}
  .np-booking__preview{padding:20px}
}
@media (max-width:520px){
  .np-booking__title{font-size:1.3rem}
  .np-booking__preview-slots span{padding:6px 12px}
}


/* ==========================================================================
   RATGEBER / BLOG
   Archiv, Artikel, Lesefortschritt, CTAs.
   Nutzt die vorhandenen Tokens, funktioniert in Dark und Light.
   ========================================================================== */

/* ---------- Archiv: Intro ---------- */
.np-blog-intro{padding:56px 0 40px}
.np-blog-intro__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:48px;align-items:end;margin-top:16px}
.np-blog-intro h1{font-family:'Spectral',serif;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.08;letter-spacing:-.01em}
.np-blog-intro p{color:var(--muted);font-size:1.05rem;line-height:1.65;max-width:52ch}

/* ---------- Archiv: Featured ---------- */
.np-blog-featured{padding-bottom:72px}
.np-blog-featured__grid{display:grid;grid-template-columns:1.55fr 1fr;gap:32px}
.np-blog-featured__primary{display:block;text-decoration:none;color:inherit;border:1px solid var(--line-08);background:var(--panel);transition:border-color .25s}
.np-blog-featured__primary:hover{border-color:var(--accent)}
.np-blog-featured__img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--hatch1)}
.np-blog-featured__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.np-blog-featured__primary:hover .np-blog-featured__img img{transform:scale(1.04)}
.np-blog-featured__badge{position:absolute;top:16px;left:16px;background:var(--accent);color:#141210;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;font-weight:600}
.np-blog-featured__meta{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--muted2);
  letter-spacing:.08em;text-transform:uppercase;padding:24px 28px 0}
.np-blog-featured__cat{color:var(--accent)}
.np-blog-featured__dot{width:3px;height:3px;border-radius:50%;background:var(--muted3);display:inline-block}
.np-blog-featured__primary h2{font-family:'Spectral',serif;font-size:1.85rem;line-height:1.22;padding:12px 28px 0}
.np-blog-featured__primary p{color:var(--muted);line-height:1.6;padding:14px 28px 0}
.np-blog-featured__more{display:inline-block;padding:20px 28px 28px;color:var(--accent);font-size:.85rem;letter-spacing:.06em}
.np-blog-featured__secondary{display:grid;gap:24px;align-content:start}
.np-blog-featured__card{display:grid;grid-template-columns:132px 1fr;gap:20px;text-decoration:none;color:inherit;
  align-items:center;padding-bottom:24px;border-bottom:1px solid var(--line-08)}
.np-blog-featured__card--border:last-child{border-bottom:none;padding-bottom:0}
.np-blog-featured__card-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--hatch1)}
.np-blog-featured__card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.np-blog-featured__card:hover .np-blog-featured__card-thumb img{transform:scale(1.05)}
.np-blog-featured__meta--sm{padding:0;font-size:.7rem}
.np-blog-featured__card h3{font-family:'Spectral',serif;font-size:1.05rem;line-height:1.35;margin-top:8px;transition:color .2s}
.np-blog-featured__card:hover h3{color:var(--accent)}

/* ---------- Archiv: Grid + Sidebar ---------- */
/* padding-bottom seit 28.08.2026: der Bereich hatte gar keinen unteren
   Abstand, dadurch endete die Seitenspalte auf /ratgeber/ genau an der
   Footer-Kante. */
.np-blog-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start;padding-bottom:72px}
.np-blog-grid__header{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:20px;border-bottom:1px solid var(--line-12);margin-bottom:36px}
.np-blog-grid__header h2{font-family:'Spectral',serif;font-size:1.6rem}
.np-blog-grid__page{font-size:.8rem;color:var(--muted2);letter-spacing:.06em}
.np-blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 32px}
.np-blog-grid__item{text-decoration:none;color:inherit;display:block}
.np-blog-grid__img{aspect-ratio:16/10;overflow:hidden;background:var(--hatch1);margin-bottom:18px}
.np-blog-grid__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.np-blog-grid__item:hover .np-blog-grid__img img{transform:scale(1.05)}
.np-blog-grid__meta{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted2);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.np-blog-grid__cat{color:var(--accent)}
.np-blog-grid__item h3{font-family:'Spectral',serif;font-size:1.25rem;line-height:1.3;transition:color .2s}
.np-blog-grid__item:hover h3{color:var(--accent)}
.np-blog-grid__item p{color:var(--muted);font-size:.92rem;line-height:1.6;margin-top:10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.np-blog-pagination{display:flex;gap:8px;margin-top:56px;padding-top:32px;border-top:1px solid var(--line-08)}
.np-blog-pagination__link,.np-blog-pagination__current{min-width:42px;height:42px;display:inline-flex;
  align-items:center;justify-content:center;font-size:.9rem;border:1px solid var(--line-12);text-decoration:none;color:var(--fg2)}
.np-blog-pagination__link:hover{border-color:var(--accent);color:var(--accent)}
.np-blog-pagination__current{background:var(--accent);border-color:var(--accent);color:#141210;font-weight:600}

.np-blog-sidebar{position:sticky;top:104px;display:grid;gap:36px}
.np-blog-sidebar__section{border-top:1px solid var(--line-12);padding-top:22px}
.np-blog-sidebar__title{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);margin-bottom:16px}
.np-blog-sidebar__search{display:flex}
.np-blog-sidebar__search input{flex:1;min-width:0;background:transparent;border:1px solid var(--line-16);
  color:var(--fg);padding:12px 14px;font:inherit;font-size:.9rem}
.np-blog-sidebar__search input:focus{outline:none;border-color:var(--accent)}
.np-blog-sidebar__search button{background:var(--accent);color:#141210;border:none;padding:0 18px;cursor:pointer;font:inherit;font-size:.85rem}
.np-blog-sidebar__cat{display:flex;justify-content:space-between;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--line-06);text-decoration:none;color:var(--fg2);font-size:.95rem;transition:color .2s}
.np-blog-sidebar__cat:hover{color:var(--accent)}
.np-blog-sidebar__cat-count{color:var(--muted3);font-size:.8rem}
.np-blog-sidebar__popular-list{display:grid;gap:18px}
.np-blog-sidebar__popular{display:grid;grid-template-columns:64px 1fr;gap:14px;text-decoration:none;color:inherit;align-items:center}
.np-blog-sidebar__popular-thumb{aspect-ratio:1;overflow:hidden;background:var(--hatch1)}
.np-blog-sidebar__popular-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.np-blog-sidebar__popular-title{font-size:.9rem;line-height:1.35;transition:color .2s}
.np-blog-sidebar__popular:hover .np-blog-sidebar__popular-title{color:var(--accent)}
.np-blog-sidebar__popular-date{font-size:.72rem;color:var(--muted3);margin-top:5px}
.np-blog-sidebar__tags{display:flex;flex-wrap:wrap;gap:8px}
.np-blog-sidebar__tag{border:1px solid var(--line-12);padding:6px 12px;font-size:.78rem;
  text-decoration:none;color:var(--muted-b);transition:.2s}
.np-blog-sidebar__tag:hover{border-color:var(--accent);color:var(--accent)}
.np-blog-sidebar__cta{background:var(--panel);border:1px solid var(--line-12);padding:28px}
.np-blog-sidebar__cta-title{font-family:'Spectral',serif;font-size:1.2rem;line-height:1.3;margin-bottom:10px}
.np-blog-sidebar__cta p{color:var(--muted);font-size:.88rem;line-height:1.6;margin-bottom:18px}

/* ---------- Artikel: Kopf ---------- */
.np-article-header{padding:48px 0 0}
.np-article-header__inner{max-width:820px;margin:0 auto;padding:0 36px;text-align:center}
.np-article-header__meta{display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:22px}
.np-article-header__cat{color:var(--accent);text-decoration:none}
.np-article-header__dot{width:3px;height:3px;border-radius:50%;background:var(--muted3)}
.np-article-header__title{font-family:'Spectral',serif;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.12;letter-spacing:-.01em}
.np-article-header__excerpt{color:var(--muted);font-size:1.15rem;line-height:1.6;margin-top:20px}
.np-article-header__author{display:flex;align-items:center;justify-content:center;gap:14px;margin:32px 0 40px}
.np-article-header__avatar img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 22%;display:block}
.np-article-header__author-info{text-align:left}
.np-article-header__author-name{font-size:.92rem;font-weight:600}
.np-article-header__author-role{font-size:.78rem;color:var(--muted2)}
.np-article-header__hero{aspect-ratio:21/9;overflow:hidden;background:var(--hatch1)}
.np-article-header__hero img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Artikel: Layout ---------- */
.np-article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;align-items:start;padding-top:8px}
.np-article__body{max-width:70ch}

/* Fliesstext: ruhige Zeilenlaenge, grosszuegige Zeilenhoehe */
.np-prose{font-size:1.12rem;line-height:1.78;color:var(--fg2)}
.np-prose > * + *{margin-top:1.35em}
.np-prose h2{font-family:'Spectral',serif;font-size:1.85rem;line-height:1.25;color:var(--fg);
  margin-top:2.4em;padding-top:.6em;border-top:1px solid var(--line-08);scroll-margin-top:110px}
.np-prose h3{font-family:'Spectral',serif;font-size:1.35rem;line-height:1.3;color:var(--fg);margin-top:1.9em;scroll-margin-top:110px}
.np-prose p{margin-top:1.15em}
.np-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.np-prose strong{color:var(--fg);font-weight:600}
.np-prose ul,.np-prose ol{padding-left:1.3em;display:grid;gap:.6em}
.np-prose li{padding-left:.3em}
.np-prose li::marker{color:var(--accent)}
.np-prose blockquote{border-left:2px solid var(--accent);padding:4px 0 4px 26px;
  font-family:'Spectral',serif;font-size:1.28rem;line-height:1.5;color:var(--fg)}
.np-prose img{width:100%;height:auto;display:block}
.np-prose figcaption{font-size:.82rem;color:var(--muted2);margin-top:10px}
.np-prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.np-prose th,.np-prose td{border-bottom:1px solid var(--line-08);padding:12px 10px;text-align:left}
.np-prose th{color:var(--fg);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}

.np-article__tags{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;
  margin-top:56px;padding-top:26px;border-top:1px solid var(--line-12)}
.np-article__tags-list{display:flex;flex-wrap:wrap;gap:8px}
.np-article__tag{border:1px solid var(--line-12);padding:6px 12px;font-size:.78rem;text-decoration:none;color:var(--muted-b)}
.np-article__tag:hover{border-color:var(--accent);color:var(--accent)}
.np-article__share{display:flex;align-items:center;gap:14px;font-size:.85rem}
.np-article__share-label{color:var(--muted2);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}
.np-article__share a{color:var(--fg2);text-decoration:none;border-bottom:1px solid var(--line-22)}
.np-article__share a:hover{color:var(--accent);border-color:var(--accent)}

.np-article__author-box{display:grid;grid-template-columns:76px 1fr;gap:22px;align-items:start;
  margin-top:44px;padding:28px;background:var(--panel);border:1px solid var(--line-08)}
.np-article__author-box-avatar img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:50% 22%;display:block}
.np-article__author-box-label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2)}
.np-article__author-box-name{font-family:'Spectral',serif;font-size:1.2rem;margin:5px 0 8px}
.np-article__author-box-desc{color:var(--muted);font-size:.92rem;line-height:1.6}

/* ---------- Artikel: Sidebar mit Inhaltsverzeichnis ---------- */
.np-article__sidebar{position:sticky;top:104px;display:grid;gap:34px}
.np-article__sidebar-section{border-top:1px solid var(--line-12);padding-top:20px}
.np-article__sidebar-title{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);margin-bottom:14px}
.np-article__sidebar-toc{display:grid;gap:2px;max-height:52vh;overflow-y:auto}
.np-article__sidebar-toc-link{display:block;font-size:.88rem;line-height:1.45;color:var(--muted);
  text-decoration:none;padding:7px 0 7px 14px;border-left:2px solid var(--line-08);transition:.2s}
.np-article__sidebar-toc-link:hover{color:var(--fg);border-color:var(--line-32)}
.np-article__sidebar-toc-link.is-active{color:var(--accent);border-color:var(--accent)}
.np-article__sidebar-toc-placeholder{font-size:.85rem;color:var(--muted3)}
.np-article__sidebar-related{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;
  text-decoration:none;color:inherit;padding:10px 0;border-bottom:1px solid var(--line-06)}
.np-article__sidebar-related:last-child{border-bottom:none}
.np-article__sidebar-related-thumb{aspect-ratio:1;overflow:hidden;background:var(--hatch1)}
.np-article__sidebar-related-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.np-article__sidebar-related-title{font-size:.86rem;line-height:1.35;transition:color .2s}
.np-article__sidebar-related:hover .np-article__sidebar-related-title{color:var(--accent)}
.np-article__sidebar-related-meta{font-size:.7rem;color:var(--muted3);margin-top:4px}
.np-article__sidebar-cta{background:var(--accent);color:#141210;padding:26px}
.np-article__sidebar-cta-title{font-family:'Spectral',serif;font-size:1.15rem;line-height:1.3}
.np-article__sidebar-cta-text{font-size:.85rem;line-height:1.55;margin:9px 0 18px;opacity:.85}
.np-article__sidebar-cta .np-btn{background:#141210;color:#f3f1ec;border-color:#141210;width:100%;text-align:center}
.np-article__sidebar-cta .np-btn:hover{background:#000;border-color:#000}

/* ---------- Lesefortschritt ---------- */
.np-reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:9999;transition:width .1s linear}

/* ---------- CTA mitten im Artikel (nach dem 3. Abschnitt) ---------- */
.np-inline-cta{border:1px solid var(--line-16);border-left:3px solid var(--accent);
  background:var(--panel);padding:26px 28px;display:grid;gap:14px;margin-top:2.2em!important}
.np-inline-cta__title{font-family:'Spectral',serif;font-size:1.25rem;line-height:1.3;color:var(--fg)}
.np-inline-cta__text{font-size:.95rem;line-height:1.6;color:var(--muted)}
.np-inline-cta .np-btn{justify-self:start}

/* ---------- CTA-Band am Artikelende ---------- */
.np-article-cta{background:var(--panel);border-top:1px solid var(--line-12);border-bottom:1px solid var(--line-12);padding:72px 0}
.np-article-cta__inner{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.np-article-cta h2{font-family:'Spectral',serif;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.2}
.np-article-cta p{color:var(--muted);line-height:1.65;margin-top:12px;max-width:56ch}
.np-article-cta__actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Weiterlesen ---------- */
.np-article-related{padding:72px 0}
.np-article-related__header{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:20px;border-bottom:1px solid var(--line-12);margin-bottom:36px}
.np-article-related__heading{font-family:'Spectral',serif;font-size:1.6rem}
.np-article-related__all{color:var(--accent);text-decoration:none;font-size:.88rem}
.np-article-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.np-article-related__item{text-decoration:none;color:inherit}
.np-article-related__thumb{aspect-ratio:16/10;overflow:hidden;background:var(--hatch1);margin-bottom:16px}
.np-article-related__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s}
.np-article-related__item:hover .np-article-related__thumb img{transform:scale(1.05)}
.np-article-related__cat{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.np-article-related__title{font-family:'Spectral',serif;font-size:1.15rem;line-height:1.3;transition:color .2s}
.np-article-related__item:hover .np-article-related__title{color:var(--accent)}

/* ---------- Mobiler Dauer-CTA ---------- */
.np-mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:900;display:none;
  background:var(--header-bg);backdrop-filter:blur(12px);border-top:1px solid var(--line-16);padding:12px 16px}
.np-mobile-cta .np-btn{width:100%;text-align:center}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .np-article{grid-template-columns:1fr;gap:48px}
  .np-article__sidebar{position:static;grid-template-columns:1fr 1fr;display:grid;gap:28px}
  .np-blog-main{grid-template-columns:1fr;gap:56px}
  .np-blog-sidebar{position:static;grid-template-columns:repeat(2,1fr);gap:32px}
  .np-blog-featured__grid{grid-template-columns:1fr}
  .np-article-related__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .np-blog-intro__row{grid-template-columns:1fr;gap:20px}
  .np-blog-grid{grid-template-columns:1fr;gap:36px}
  .np-blog-sidebar,.np-article__sidebar{grid-template-columns:1fr}
  .np-article-related__grid{grid-template-columns:1fr}
  .np-article-cta__inner{grid-template-columns:1fr;gap:26px}
  .np-article-header__inner{padding:0 24px}
  .np-article-header__hero{aspect-ratio:16/10}
  .np-prose{font-size:1.05rem}
  .np-blog-featured__card{grid-template-columns:96px 1fr;gap:14px}
  .np-mobile-cta{display:block}
  body.single-post{padding-bottom:74px}
}

/* Leere Sidebar-Abschnitte nicht als Ueberschrift ohne Inhalt stehen lassen */
.np-article__sidebar-section:not(:has(a)):not(:has(#np-toc a)):has(.np-article__sidebar-title + :empty){display:none}


/* ==========================================================================
   MEGA-MENUE
   ========================================================================== */
.np-nav__mega{position:static}
.np-nav__mega-trigger{position:relative}
.np-nav__mega-trigger[data-active="1"]{color:var(--accent)}
.np-nav__mega-trigger::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:var(--accent);transform:scaleX(0);transition:transform .25s}
.np-nav__mega:hover .np-nav__mega-trigger::after,
.np-nav__mega:focus-within .np-nav__mega-trigger::after{transform:scaleX(1)}

.np-nav__mega-panel{position:absolute;left:0;right:0;top:100%;background:var(--bg2);
  border-top:1px solid var(--line-08);border-bottom:1px solid var(--line-12);
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:120}
.np-nav__mega:hover .np-nav__mega-panel,
.np-nav__mega:focus-within .np-nav__mega-panel{opacity:1;visibility:visible;transform:translateY(0)}
.np-nav__mega-inner{max-width:1320px;margin:0 auto;padding:44px 40px 48px;
  display:grid;grid-template-columns:1.15fr .85fr .85fr .95fr;gap:48px}
.np-nav__mega-col{display:grid;gap:2px;align-content:start}
.np-nav__mega-head{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted2);padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid var(--line-08)}
.np-nav__mega-head--sub{margin-top:24px}
.np-nav__mega-col > a{display:block;padding:9px 0;font-size:.94rem;color:var(--fg2);
  text-decoration:none;border:none;transition:color .18s,padding-left .18s}
.np-nav__mega-col > a:hover{color:var(--accent);padding-left:5px}
.np-nav__mega-all{margin-top:10px;padding-top:14px!important;border-top:1px solid var(--line-06)!important;
  color:var(--accent)!important;font-size:.85rem!important}

/* Hervorgehobene Fokusprodukte */
.np-nav__mega-feature{display:block;padding:16px 18px!important;margin-bottom:10px;
  border:1px solid var(--line-08)!important;background:var(--panel);transition:border-color .2s,transform .2s}
.np-nav__mega-feature:hover{border-color:var(--accent)!important;transform:translateY(-2px);padding-left:18px!important}
.np-nav__mega-feature-title{display:block;font-family:'Spectral',serif;font-size:1.15rem;color:var(--fg);margin-bottom:6px}
.np-nav__mega-feature:hover .np-nav__mega-feature-title{color:var(--accent)}
.np-nav__mega-feature-desc{display:block;font-size:.82rem;line-height:1.5;color:var(--muted)}

/* Teaser rechts */
.np-nav__mega-aside{background:var(--panel);border:1px solid var(--line-08);padding:28px}
.np-nav__mega-aside-label{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.np-nav__mega-aside-title{font-family:'Spectral',serif;font-size:1.3rem;line-height:1.25;margin-bottom:10px}
.np-nav__mega-aside p{font-size:.86rem;line-height:1.6;color:var(--muted);margin-bottom:20px}
.np-nav__mega-aside .np-btn{width:100%;text-align:center}
.np-nav__mega-aside-links{display:flex;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-08)}
.np-nav__mega-aside-links a{font-size:.85rem;color:var(--muted-b);text-decoration:none;border-bottom:1px solid var(--line-16)}
.np-nav__mega-aside-links a:hover{color:var(--accent);border-color:var(--accent)}

@media (max-width:1180px){
  .np-nav__mega-inner{grid-template-columns:1fr 1fr;gap:36px;padding:32px 32px 36px}
  .np-nav__mega-aside{grid-column:1 / -1}
}


/* ==========================================================================
   GLOSSAR
   ========================================================================== */
.np-glossar-intro{padding:56px 0 32px}
.np-glossar-intro__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:48px;align-items:end;margin-top:16px}
.np-glossar-intro h1{font-family:'Spectral',serif;font-size:clamp(2.2rem,4.6vw,3.3rem);line-height:1.1;letter-spacing:-.01em}
.np-glossar-intro p{color:var(--muted);font-size:1.03rem;line-height:1.65}

.np-glossar-tools{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
  margin-top:40px;padding:22px 0;border-top:1px solid var(--line-12);border-bottom:1px solid var(--line-12)}
.np-glossar-search{flex:1;min-width:260px;max-width:420px}
.np-glossar-search input{width:100%;background:transparent;border:1px solid var(--line-16);
  color:var(--fg);padding:13px 16px;font:inherit;font-size:.95rem}
.np-glossar-search input::placeholder{color:var(--muted3)}
.np-glossar-search input:focus{outline:none;border-color:var(--accent)}
.np-glossar-az{display:flex;flex-wrap:wrap;gap:3px}
.np-glossar-az a,.np-glossar-az span{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.82rem;text-decoration:none}
.np-glossar-az a{color:var(--fg2);border:1px solid var(--line-12);transition:.18s}
.np-glossar-az a:hover{border-color:var(--accent);color:var(--accent)}
.np-glossar-az span{color:var(--faint);border:1px solid transparent}
.np-glossar-empty{margin-top:24px;color:var(--muted);font-size:.95rem}

.np-glossar__block{margin-bottom:56px}
.np-glossar__letter{font-family:'Spectral',serif;font-size:2rem;color:var(--accent);
  padding-bottom:14px;border-bottom:1px solid var(--line-12);margin-bottom:28px;scroll-margin-top:110px}
.np-glossar__list{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px}
.np-glossar__item{border-left:2px solid var(--line-12);padding:2px 0 2px 22px;transition:border-color .2s}
.np-glossar__item:hover{border-left-color:var(--accent)}
.np-glossar__term{font-family:'Spectral',serif;font-size:1.2rem;line-height:1.3;color:var(--fg)}
.np-glossar__group{display:inline-block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted2);margin-top:7px}
.np-glossar__text{color:var(--muted);font-size:.95rem;line-height:1.65;margin-top:10px}
.np-glossar__link{display:inline-block;margin-top:12px;font-size:.85rem;color:var(--accent);text-decoration:none}
.np-glossar__link:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .np-glossar-intro__row{grid-template-columns:1fr;gap:18px}
  .np-glossar__list{grid-template-columns:1fr;gap:26px}
}

/* Mega-Menue erbt sonst die Versalien der Hauptnavigation, im Fliesstext falsch */
.np-nav__mega-panel a,
.np-nav__mega-panel p,
.np-nav__mega-feature-title,
.np-nav__mega-feature-desc,
.np-nav__mega-aside-title{text-transform:none;letter-spacing:normal}
.np-nav__mega-col > a{font-size:.92rem;line-height:1.35}
.np-nav__mega-head{text-transform:uppercase;letter-spacing:.18em}
.np-nav__mega-aside-label{text-transform:uppercase;letter-spacing:.18em}
.np-nav__mega-aside .np-btn{text-transform:uppercase;letter-spacing:.1em;font-size:.78rem}

/* Glossar-Kacheln sind jetzt Links auf eigene Begriffsseiten */
a.np-glossar__item{display:block;text-decoration:none;color:inherit}
a.np-glossar__item:hover .np-glossar__term{color:var(--accent)}
.np-glossar__more{display:inline-block;margin-top:12px;font-size:.82rem;color:var(--accent);opacity:0;transform:translateX(-4px);transition:.22s}
a.np-glossar__item:hover .np-glossar__more{opacity:1;transform:translateX(0)}

/* ==========================================================================
   EINZELNER GLOSSARBEGRIFF
   ========================================================================== */
.np-term{padding:48px 0 72px}
.np-term__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start}
.np-term__title{font-family:'Spectral',serif;font-size:clamp(2.1rem,4.5vw,3.1rem);line-height:1.1;margin:14px 0 22px}
.np-term__definition{font-size:1.22rem;line-height:1.65;color:var(--fg2);padding-left:22px;border-left:2px solid var(--accent)}
.np-term__body{margin-top:32px}
.np-term__service{display:block;margin-top:36px;padding:22px 26px;background:var(--panel);
  border:1px solid var(--line-12);text-decoration:none;transition:border-color .2s,transform .2s}
.np-term__service:hover{border-color:var(--accent);transform:translateY(-2px)}
.np-term__service-label{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted2);margin-bottom:8px}
.np-term__service-title{display:block;font-family:'Spectral',serif;font-size:1.2rem;color:var(--accent)}
.np-term__back{display:inline-block;margin-top:36px;font-size:.9rem;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line-16)}
.np-term__back:hover{color:var(--accent);border-color:var(--accent)}

.np-term__aside{position:sticky;top:104px;display:grid;gap:32px}
.np-term__aside-section{border-top:1px solid var(--line-12);padding-top:20px}
.np-term__aside-title{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);margin-bottom:14px}
.np-term__aside-list{display:grid}
.np-term__aside-list a{display:block;padding:10px 0;font-size:.92rem;color:var(--fg2);
  text-decoration:none;border-bottom:1px solid var(--line-06);transition:color .18s,padding-left .18s}
.np-term__aside-list a:last-child{border-bottom:none}
.np-term__aside-list a:hover{color:var(--accent);padding-left:5px}
.np-term__aside-cta{background:var(--accent);color:#141210;padding:26px}
.np-term__aside-cta-title{font-family:'Spectral',serif;font-size:1.15rem;line-height:1.3}
.np-term__aside-cta p{font-size:.85rem;line-height:1.55;margin:9px 0 18px;opacity:.85}
.np-term__aside-cta .np-btn{background:#141210;color:#f3f1ec;border-color:#141210;width:100%;text-align:center}

@media (max-width:1080px){
  .np-term__grid{grid-template-columns:1fr;gap:44px}
  .np-term__aside{position:static;grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .np-term__aside{grid-template-columns:1fr}
  .np-term__definition{font-size:1.08rem}
}


/* ==========================================================================
   STANDORTE
   ========================================================================== */
.np-standort__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-08);
  border:1px solid var(--line-08)}
.np-standort__fact{background:var(--bg);padding:26px 28px}
.np-standort__fact-label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);margin-bottom:10px}
.np-standort__fact-value{font-size:1rem;line-height:1.5;color:var(--fg2)}
.np-standort__body{max-width:70ch}

.np-standort__services{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px}
.np-standort__services a{display:block;padding:24px 26px;background:var(--inv-bg);border:1px solid var(--inv-line);
  text-decoration:none;transition:border-color .2s,transform .2s}
.np-standort__services a:hover{border-color:var(--inv-accent);transform:translateY(-2px)}
.np-standort__service-title{display:block;font-family:'Spectral',serif;font-size:1.2rem;color:var(--inv-fg);margin-bottom:8px}
.np-standort__service-text{display:block;font-size:.9rem;line-height:1.55;color:var(--inv-muted)}

.np-standort__others{border-top:1px solid var(--line-12);padding-top:26px}
.np-standort__others-label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);margin-bottom:14px}
.np-standort__others-list{display:flex;flex-wrap:wrap;gap:10px}
.np-standort__others-list a{border:1px solid var(--line-12);padding:8px 15px;font-size:.85rem;
  color:var(--muted-b);text-decoration:none;transition:.2s}
.np-standort__others-list a:hover{border-color:var(--accent);color:var(--accent)}

.np-standort__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.np-standort__card{display:block;padding:28px;border:1px solid var(--line-08);background:var(--panel);
  text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.np-standort__card:hover{border-color:var(--accent);transform:translateY(-3px)}
.np-standort__card-city{display:block;font-family:'Spectral',serif;font-size:1.5rem;color:var(--fg)}
.np-standort__card-region{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted2);margin-top:6px}
.np-standort__card-text{display:block;font-size:.9rem;line-height:1.6;color:var(--muted);margin-top:14px}
.np-standort__card-more{display:block;margin-top:16px;font-size:.82rem;color:var(--accent)}

/* Dezente Standortleiste im Footer */
.np-footer__locations{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;
  padding:20px 0;border-top:1px solid var(--line-06)}
.np-footer__locations-label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted3)}
.np-footer__locations-list{display:flex;flex-wrap:wrap;gap:8px 16px}
.np-footer__locations-list a{font-size:.82rem;color:var(--muted2);text-decoration:none;transition:color .18s}
.np-footer__locations-list a:hover{color:var(--accent)}
.np-footer__locations-all{color:var(--muted-b)!important}

@media (max-width:900px){
  .np-standort__facts{grid-template-columns:1fr}
  .np-standort__services{grid-template-columns:1fr}
  .np-standort__grid{grid-template-columns:1fr}
}


/* ==========================================================================
   KORREKTUREN
   ========================================================================== */

/* Kacheln in hellen Sektionen nutzten die dunklen Tokens.
   Beim Hover wurde der Hintergrund dunkel, die Schrift blieb dunkel: unlesbar. */
.np-section--light .np-grid--coverage,
.np-section--light .np-grid--values,
.np-section--light .np-timeline,
.np-section--light .np-team{border-color:var(--inv-line)}
.np-section--light .np-grid--coverage__item,
.np-section--light .np-grid--values__item,
.np-section--light .np-timeline__item,
.np-section--light .np-team__member{border-color:var(--inv-line)}
.np-section--light .np-grid--coverage__item:hover{background:rgba(26,25,22,.05)}
.np-section--light .np-grid--coverage__title,
.np-section--light .np-grid--values__title{color:var(--inv-fg)}
.np-section--light .np-grid--coverage__text,
.np-section--light .np-grid--values__text{color:var(--inv-muted)}
.np-section--light .np-grid--coverage__num{color:var(--inv-accent)}
.np-section--light .np-grid--coverage__text a{color:var(--inv-fg)!important;text-decoration:underline;text-underline-offset:3px}
.np-section--light .np-grid--coverage__text a:hover{color:var(--inv-accent)!important}

/* Abstaende: .np-section bringt selbst keins mit */
.np-standort__facts{margin:56px 0}
.np-standort__body{padding:8px 0 56px}
.np-standort__others{padding:32px 0 64px}
.np-standort__grid{padding:8px 0 72px}

/* Faktenzeile ruhiger und mit Akzentkante */
.np-standort__facts{border:1px solid var(--line-08);background:var(--panel);
  grid-template-columns:repeat(3,1fr);gap:0}
.np-standort__fact{background:transparent;border-right:1px solid var(--line-08);padding:30px 32px}
.np-standort__fact:last-child{border-right:none}
.np-standort__fact-label{display:flex;align-items:center;gap:9px}
.np-standort__fact-label::before{content:"";width:14px;height:1px;background:var(--accent);flex:none}
.np-standort__fact-value{margin-top:12px;font-family:'Spectral',serif;font-size:1.12rem;color:var(--fg)}

/* ==========================================================================
   SEO-TEXTBEREICH
   ========================================================================== */
.np-seo{padding:80px 0;border-top:1px solid var(--line-08)}
.np-seo__title{font-family:'Spectral',serif;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.2;margin:14px 0 28px}
.np-seo__body{max-width:74ch;font-size:1.02rem;line-height:1.8;color:var(--muted-b)}
.np-seo__body h2{font-size:1.5rem;margin-top:2em;border-top:none;padding-top:0}
.np-seo__body h3{font-size:1.2rem}
.np-seo--empty{padding:28px 0}
.np-seo__hint{font-size:.85rem;line-height:1.6;color:var(--muted2);
  border:1px dashed var(--line-22);padding:16px 20px}
.np-seo__hint a{color:var(--accent);margin-left:6px}

/* ==========================================================================
   LEAD-MAGNET-SEITEN
   ========================================================================== */
.np-lm{padding:56px 0 80px}
.np-lm__grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:64px;align-items:start}
.np-lm__title{font-family:'Spectral',serif;font-size:clamp(2rem,4.2vw,3rem);line-height:1.12;margin:14px 0 20px}
.np-lm__lead{font-size:1.14rem;line-height:1.65;color:var(--muted);margin-bottom:30px}
.np-lm__bullets{list-style:none;padding:0;display:grid;gap:14px;margin-bottom:32px}
.np-lm__bullets li{position:relative;padding-left:30px;line-height:1.55;color:var(--fg2)}
.np-lm__bullets li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:7px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.np-lm__body{margin-bottom:32px}
.np-lm__trust{display:flex;flex-wrap:wrap;gap:10px 22px;padding-top:24px;border-top:1px solid var(--line-08)}
.np-lm__trust span{font-size:.8rem;color:var(--muted2);position:relative;padding-left:14px}
.np-lm__trust span::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;background:var(--accent)}

.np-lm__panel{position:sticky;top:104px}
.np-lm__cover{border:1px solid var(--line-12);background:var(--panel);padding:24px;margin-bottom:-1px}
.np-lm__cover img{width:100%;height:auto;display:block;box-shadow:var(--shadow)}
.np-lm__form{border:1px solid var(--line-12);background:var(--panel);padding:32px}
.np-lm__form-title{font-family:'Spectral',serif;font-size:1.4rem;color:var(--fg)}
.np-lm__form-format{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:8px 0 22px}
.np-lm__form-hint{font-size:.88rem;line-height:1.6;color:var(--muted);margin-bottom:18px}
.np-lm__form-hint code{background:var(--hatch3);padding:2px 6px;font-size:.85em}
.np-lm__privacy{font-size:.78rem;line-height:1.55;color:var(--muted3);margin-top:20px}
.np-lm__privacy a{color:var(--muted-b);text-decoration:underline}

.np-lm__grid-archive{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-bottom:72px}
.np-lm__card{display:block;border:1px solid var(--line-08);background:var(--panel);
  text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.np-lm__card:hover{border-color:var(--accent);transform:translateY(-3px)}
.np-lm__card-cover{display:block;padding:24px 24px 0}
.np-lm__card-cover img{width:100%;height:auto;display:block}
.np-lm__card-body{display:block;padding:24px}
.np-lm__card-format{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.np-lm__card-title{display:block;font-family:'Spectral',serif;font-size:1.25rem;line-height:1.3}
.np-lm__card-text{display:block;font-size:.9rem;line-height:1.6;color:var(--muted);margin-top:10px}
.np-lm__card-more{display:block;font-size:.82rem;color:var(--accent);margin-top:16px}

@media (max-width:1080px){
  .np-lm__grid{grid-template-columns:1fr;gap:44px}
  .np-lm__panel{position:static}
  .np-lm__grid-archive{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .np-standort__facts{grid-template-columns:1fr}
  .np-standort__fact{border-right:none;border-bottom:1px solid var(--line-08)}
  .np-standort__fact:last-child{border-bottom:none}
  .np-lm__grid-archive{grid-template-columns:1fr}
}

/* Korrektur: margin ohne auto hebt die Zentrierung von .np-wrap auf */
.np-standort__facts{margin:56px auto}
.np-standort__body{max-width:1240px;margin:0 auto;padding:8px 36px 56px}
.np-standort__body .np-prose{max-width:70ch}
@media (max-width:720px){ .np-standort__body{padding:8px 24px 44px} }

/* ==========================================================================
   FELDGESTEUERTE ABSCHNITTE (template-parts/sections/)
   Ergaenzt 26.08.2026. Die Abschnitte werden aus WordPress-Feldern gebaut,
   die Anzahl der Elemente steht deshalb nicht mehr fest. Alles hier drin
   muss mit einer beliebigen Anzahl zurechtkommen.
   ========================================================================== */

/* --- Vertikaler Rhythmus ---------------------------------------------------
   .np-section selbst bringt keine Polsterung mit, die kam bisher immer von
   innen liegenden Bausteinen wie .np-editorial. Feldgesteuerte Abschnitte
   brauchen sie explizit, sonst kleben sie aneinander. */
.np-section--block {
  padding:110px 0;
}
.np-section--block > .np-wrap > .np-section__header:last-child {
  margin-bottom:0;
}
@media (max-width:900px) {
  .np-section--block { padding:72px 0; }
}

/* --- Kopfbereich ohne Bild -------------------------------------------------
   Ohne Bild bleibt in der zweispaltigen Anlage die rechte Haelfte leer.
   Dann laeuft der Hero einspaltig und der Text bekommt mehr Luft. */
.np-hero--split.np-hero--single {
  grid-template-columns:1fr;
}
.np-hero--single .np-hero--split__text {
  padding:104px 36px 96px;
  max-width:1000px;
}
.np-hero--single .np-hero--split p {
  max-width:62ch;
}

/* --- Zwei echte Textspalten ------------------------------------------------
   .np-editorial__columns ist ein .38fr/1fr Raster fuer Label plus Text.
   Fuer zwei gleichwertige Textspalten braucht es eine eigene Variante,
   sonst reissen unterschiedlich lange Absaetze Loecher ins Layout. */
.np-editorial__columns--text {
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:56px;
}
.np-editorial__columns--text.is-single {
  grid-template-columns:minmax(0, 1fr);
  max-width:72ch;
}
.np-editorial__columns--text p:last-child {
  margin-bottom:0;
}
@media (max-width:900px) {
  .np-editorial__columns--text { grid-template-columns:minmax(0, 1fr); gap:28px; }
}

/* --- Raster mit beliebig vielen Elementen ----------------------------------
   Das feste Vierspalten-Raster laesst bei sechs Eintraegen zwei leere,
   umrandete Zellen stehen. Als Flex-Layout fuellt die letzte Reihe sich
   selbst auf, egal wie viele Elemente es sind. */
.np-grid--coverage.np-grid--auto {
  display:flex;
  flex-wrap:wrap;
}
.np-grid--coverage.np-grid--auto > .np-grid--coverage__item {
  flex:1 1 clamp(240px, 24%, 340px);
  min-width:240px;
}
@media (max-width:640px) {
  .np-grid--coverage.np-grid--auto > .np-grid--coverage__item {
    flex:1 1 100%;
  }
}

/* --- Ablauf mit beliebig vielen Schritten ---------------------------------- */
.np-process.np-process--auto {
  display:flex;
  flex-wrap:wrap;
}
.np-process.np-process--auto > .np-process__step {
  flex:1 1 clamp(260px, 30%, 420px);
  min-width:260px;
  padding:44px 40px;
  border-right:1px solid var(--inv-line);
}
.np-process.np-process--auto > .np-process__step:first-child { padding-left:0; }
.np-process.np-process--auto > .np-process__step:last-child {
  border-right:0;
  padding-right:0;
}
@media (max-width:900px) {
  .np-process.np-process--auto > .np-process__step {
    flex:1 1 100%;
    padding:32px 0;
    border-right:0;
    border-bottom:1px solid var(--inv-line);
  }
  .np-process.np-process--auto > .np-process__step:last-child { border-bottom:0; }
}

/* --- Fliesstext in freien Abschnitten -------------------------------------- */
.np-section--block .np-prose {
  max-width:72ch;
}

/* --- FAQ-Antworten ---------------------------------------------------------
   Die Antwort ist jetzt ein Container mit Absaetzen statt eines einzelnen <p>. */
.np-faq__answer > p {
  margin:0 0 14px;
}
.np-faq__answer > p:last-child {
  margin-bottom:0;
}

/* Spaltenzahl je nach Anzahl der Elemente, gesetzt von np_grid_class() */
.np-grid--coverage.np-grid--auto.np-grid--cols-1 > .np-grid--coverage__item { flex-basis:100%; }
.np-grid--coverage.np-grid--auto.np-grid--cols-2 > .np-grid--coverage__item { flex-basis:calc(50% - 1px); }
.np-grid--coverage.np-grid--auto.np-grid--cols-3 > .np-grid--coverage__item { flex-basis:calc(33.333% - 1px); }
.np-grid--coverage.np-grid--auto.np-grid--cols-4 > .np-grid--coverage__item { flex-basis:calc(25% - 1px); }
@media (max-width:1000px) {
  .np-grid--coverage.np-grid--auto > .np-grid--coverage__item { flex-basis:calc(50% - 1px); }
}
@media (max-width:640px) {
  .np-grid--coverage.np-grid--auto > .np-grid--coverage__item { flex-basis:100%; }
}

/* Gleicher vertikaler Rhythmus wie bei den uebrigen Abschnitten.
   .np-editorial bringt von Haus aus 80px mit, die feldgesteuerten Abschnitte
   arbeiten mit 110px. Ohne Angleichung wirken Einordnung und FAQ gedraengter
   als alles dazwischen. */
.np-section--flow > .np-editorial {
  padding:110px 36px;
}
@media (max-width:768px) {
  .np-section--flow > .np-editorial { padding:72px 20px; }
}

/* ==========================================================================
   BILDBAND
   Breites Bild zur Auflockerung, optional mit Zitat darauf.
   ========================================================================== */
.np-band {
  position:relative;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.np-band__media {
  position:relative;
  height:clamp(320px, 42vw, 560px);
  overflow:hidden;
  background:var(--panel);
}
.np-band__media img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.np-band__overlay {
  position:absolute;
  inset:auto 0 0 0;
  padding:clamp(28px, 5vw, 72px);
  background:linear-gradient(to top, rgba(10,11,12,.88) 0%, rgba(10,11,12,.55) 55%, rgba(10,11,12,0) 100%);
  color:#f4f2ee;
}
.np-band__text {
  max-width:56ch;
  margin:0;
  font-family:'Spectral', serif;
  font-weight:500;
  font-size:clamp(1.25rem, 2.4vw, 1.9rem);
  line-height:1.35;
}
.np-band__source {
  margin-top:14px;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(244,242,238,.72);
}

/* ==========================================================================
   MOBILE-KORREKTUREN 26.08.2026
   ========================================================================== */

/* .np-editorial ist selbst das .np-wrap-Element. Die Kurzschreibweise
   padding:80px 0 hat die seitliche Polsterung von .np-wrap ueberschrieben.
   Auf dem Desktop faellt das nicht auf, weil die Breite ohnehin begrenzt ist,
   auf dem Handy klebte der Text am Displayrand. */
@media (max-width:768px) {
  .np-editorial { padding-left:20px; padding-right:20px; }
}

/* Gestapelte Rasterelemente: auf schmalen Displays nimmt das Theme den
   Elementen bewusst die Innenpolsterung, damit der Text an den uebrigen
   Texten der Seite ausgerichtet ist. Dann darf aber die Aussenlinie des
   Rasters nicht direkt daneben stehen. */
@media (max-width:768px) {
  .np-grid--coverage {
    border-left:none;
    border-top:none;
  }
  .np-grid--coverage__item:first-child {
    border-top:1px solid var(--line);
  }
  .np-section--light .np-grid--coverage__item:first-child {
    border-top:1px solid var(--inv-line);
  }
}

/* Langer Textbereich: auf grossen Bildschirmen stand die Textspalte links
   und rechts blieb die halbe Seite leer. Jetzt sitzt der ganze Block mittig.

   Wichtig: die Begrenzung gehoert an den gemeinsamen Container, nicht an die
   einzelnen Elemente. Die Einheit ch bezieht sich auf die Schrift des jeweiligen
   Elements, und weil Label, Ueberschrift und Fliesstext drei verschiedene
   Schriftgroessen haben, ergaben 78ch drei verschiedene Breiten und damit drei
   verschiedene linke Kanten. */
.np-seo__inner {
  max-width:50rem;
  margin-left:auto;
  margin-right:auto;
}
.np-seo__body {
  max-width:none;
}

/* FAQ: die Hoehe wird per JavaScript animiert, das Element muss dafuer
   ueberlaufsicher sein. Ohne JavaScript bleibt das Standardverhalten. */
.np-faq__answer {
  overflow:hidden;
}
.np-faq summary {
  user-select:none;
}
.np-faq__icon {
  transition:transform .32s cubic-bezier(.2,.6,.2,1);
}

/* Verlinkte Zeilen in der Kontaktkarte. Sollen wie Text wirken und erst
   beim Darueberfahren als Link zu erkennen sein. */
.np-cta-final__link {
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.np-cta-final__link:hover,
.np-cta-final__link:focus-visible {
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.np-cta-final__link:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ==========================================================================
   DARSTELLUNGSVARIANTEN
   Damit Landingpages nicht alle gleich aussehen.
   ========================================================================== */

/* --- Kopfbereich: zentriert --- */
.np-hero--zentriert {
  border-bottom:1px solid var(--line-soft);
  text-align:center;
  padding:120px 0 108px;
}
.np-hero--zentriert .np-label { justify-content:center; }
.np-hero--zentriert h1 {
  font-family:'Spectral', serif;
  font-weight:800;
  font-size:clamp(2.4rem, 5.2vw, 4.2rem);
  line-height:1.04;
  letter-spacing:-.02em;
  margin:20px auto 22px;
  max-width:18ch;
}
.np-hero--zentriert p {
  font-size:1.18rem;
  line-height:1.65;
  color:var(--fg2);
  max-width:60ch;
  margin:0 auto 36px;
}
.np-hero--zentriert .np-hero__actions { justify-content:center; }

/* --- Kopfbereich: schlicht --- */
.np-hero--schlicht {
  border-bottom:1px solid var(--line-soft);
  padding:96px 0 84px;
}
.np-hero--schlicht h1 {
  font-family:'Spectral', serif;
  font-weight:800;
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  line-height:1.06;
  letter-spacing:-.02em;
  margin:18px 0 20px;
  max-width:20ch;
}
.np-hero--schlicht p {
  font-size:1.12rem;
  line-height:1.66;
  color:var(--fg2);
  max-width:58ch;
  margin-bottom:32px;
}

@media (max-width:768px) {
  .np-hero--zentriert { padding:76px 0 68px; }
  .np-hero--schlicht  { padding:64px 0 56px; }
}

/* --- Sammlung als Liste --- */
.np-liste {
  border-top:1px solid var(--line);
}
.np-liste__item {
  display:grid;
  grid-template-columns:64px 1fr;
  gap:0 28px;
  align-items:start;
  padding:28px 0;
  border-bottom:1px solid var(--line-soft);
}
.np-liste__num {
  font-family:'Spectral', serif;
  font-size:15px;
  color:var(--accent);
  padding-top:6px;
}
.np-liste__title {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:22px;
  margin-bottom:8px;
}
.np-liste__text {
  font-size:15.5px;
  line-height:1.68;
  color:var(--muted);
  max-width:74ch;
}
.np-section--light .np-liste { border-top-color:var(--inv-line2); }
.np-section--light .np-liste__item { border-bottom-color:var(--inv-line); }
.np-section--light .np-liste__num { color:var(--inv-accent); }
.np-section--light .np-liste__text { color:var(--inv-muted); }

@media (max-width:640px) {
  .np-liste__item { grid-template-columns:1fr; gap:6px; }
  .np-liste__num { padding-top:0; }
}

/* --- Sammlung als Karten --- */
.np-karten {
  display:grid;
  gap:18px;
}
.np-karten--cols-1 { grid-template-columns:1fr; }
.np-karten--cols-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.np-karten--cols-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.np-karten--cols-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.np-karten__item {
  border:1px solid var(--line);
  background:var(--card-bg);
  padding:30px 26px;
  transition:border-color .25s, transform .25s;
}
.np-karten__item:hover {
  border-color:var(--line-strong);
  transform:translateY(-3px);
}
.np-karten__num {
  font-family:'Spectral', serif;
  font-size:15px;
  color:var(--accent);
  margin-bottom:18px;
}
.np-karten__title {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:20px;
  margin-bottom:10px;
}
.np-karten__text {
  font-size:14.5px;
  line-height:1.65;
  color:var(--muted2);
}
.np-section--light .np-karten__item { border-color:var(--inv-line2); background:rgba(255,255,255,.04); }
.np-section--light .np-karten__num { color:var(--inv-accent); }
.np-section--light .np-karten__text { color:var(--inv-muted); }

@media (max-width:1000px) {
  .np-karten--cols-3, .np-karten--cols-4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px) {
  .np-karten { grid-template-columns:1fr !important; }
}

/* ==========================================================================
   LANGE KOMPOSITA IN KACHELN
   „Berufsunfaehigkeitsversicherung" passt in keine Rasterspalte. Ohne
   Trennung laeuft das Wort aus der Kachel heraus. Silbentrennung braucht
   lang="de" am <html>, das setzt WordPress ueber language_attributes().
   ========================================================================== */
.np-grid--coverage__title,
.np-grid--values__title,
.np-karten__title,
.np-liste__title,
.np-topics__title,
.np-team__name {
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
}

/* ==========================================================================
   404, SEITE NICHT GEFUNDEN
   Angelegt 28.08.2026 zusammen mit 404.php.
   ========================================================================== */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.np-404{padding:76px 0 68px}
.np-404__inner{max-width:64ch}
.np-404__code{font-family:'Spectral',serif;font-size:clamp(64px,11vw,132px);line-height:.9;
  color:var(--numeral);letter-spacing:-.03em;margin-bottom:18px}
.np-404__title{font-family:'Spectral',serif;font-size:clamp(30px,4.4vw,46px);line-height:1.12;
  color:var(--fg);margin:0 0 18px}
.np-404__text{font-size:1.02rem;line-height:1.7;color:var(--muted);margin:0 0 30px}

.np-404__search{display:flex;gap:12px;flex-wrap:wrap}
.np-404__search-input{flex:1 1 240px;min-width:0;background:var(--panel);color:var(--fg);
  border:1px solid var(--line-12);padding:14px 16px;font-size:.95rem;font-family:inherit;
  transition:border-color .25s}
.np-404__search-input::placeholder{color:var(--muted3)}
.np-404__search-input:focus{outline:none;border-color:var(--accent)}
.np-404__search-btn{flex:none;background:var(--accent);color:#0c0c0d;border:1px solid var(--accent);
  padding:14px 26px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-family:inherit;cursor:pointer;transition:background .25s,color .25s}
.np-404__search-btn:hover{background:transparent;color:var(--accent)}

.np-404__heading{font-family:'Spectral',serif;font-size:clamp(24px,3vw,32px);color:var(--fg);
  margin:10px 0 30px}
.np-404__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:64px}
.np-404__card{display:block;padding:26px;border:1px solid var(--line-08);background:var(--panel);
  transition:border-color .25s,transform .25s}
.np-404__card:hover{border-color:var(--accent);transform:translateY(-3px)}
.np-404__card-title{display:block;font-family:'Spectral',serif;font-size:1.25rem;color:var(--fg);
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.np-404__card-text{display:block;font-size:.9rem;line-height:1.6;color:var(--muted);margin-top:10px}
.np-404__card-more{display:block;margin-top:16px;font-size:.82rem;color:var(--accent)}

@media (max-width:900px){ .np-404__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .np-404{padding:48px 0 44px}
  .np-404__grid{grid-template-columns:1fr}
  .np-404__search-btn{flex:1 1 100%}
}

/* ==========================================================================
   SQUEEZE, ablenkungsfreies Layout fuer Downloadseiten und Danke-Seiten
   ========================================================================== */
.np-squeeze-header{border-bottom:1px solid var(--line-soft);background:var(--bg)}
.np-squeeze-header__inner{display:flex;justify-content:center;align-items:center;
  padding-top:26px;padding-bottom:26px}
.np-squeeze-header__brand{display:flex;flex-direction:column;align-items:center;line-height:1;
  text-align:center}
.np-squeeze-header__name{font-family:'Spectral',serif;font-size:1.5rem;color:var(--fg);
  letter-spacing:.01em}
.np-squeeze-header__subtitle{margin-top:9px;font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted2)}

.np-squeeze-footer{border-top:1px solid var(--line-soft);margin-top:88px}
.np-squeeze-footer__inner{display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px;font-size:.84rem;color:var(--muted2)}
.np-squeeze-footer__links{display:flex;gap:22px}
.np-squeeze-footer__links a{transition:color .25s}
.np-squeeze-footer__links a:hover{color:var(--fg)}
@media (max-width:640px){
  .np-squeeze-footer__inner{justify-content:center;text-align:center}
}

/* ==========================================================================
   DANKE-SEITEN
   ========================================================================== */
.np-danke{padding:96px 0 24px}
.np-danke__inner{max-width:58ch;margin:0 auto;text-align:center}
.np-danke__mark{width:62px;height:62px;margin:0 auto 26px;border-radius:50%;
  border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;
  color:var(--accent)}
.np-danke__title{font-family:'Spectral',serif;font-size:clamp(30px,4.4vw,46px);line-height:1.14;
  color:var(--fg);margin:0 0 20px}
.np-danke__text{font-size:1.05rem;line-height:1.75;color:var(--muted);margin:0 0 16px}
.np-danke__note{margin-top:34px;padding-top:26px;border-top:1px solid var(--line-08);
  font-size:.9rem;line-height:1.7;color:var(--muted2)}
.np-danke__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
/* Der Strich vor dem Label sitzt nur links und wirkt in einem zentrierten
   Block schief. Auf der Danke-Seite deshalb ohne. */
.np-danke .np-label__line{display:none}
.np-danke .np-label{margin-bottom:16px}

/* ==========================================================================
   STANDORT, ergaenzte Sektionen (28.08.2026)
   ========================================================================== */
.np-standort__branchen{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.np-standort__branche{border:1px solid var(--line-12);padding:9px 16px;font-size:.88rem;
  color:var(--fg2);background:var(--panel)}

.np-standort__anfahrt{display:grid;grid-template-columns:1.1fr .9fr;gap:1px;
  background:var(--line-08);border:1px solid var(--line-08)}
.np-standort__anfahrt-block{background:var(--bg);padding:34px 36px}
.np-standort__anfahrt-label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted2);margin-bottom:14px}
.np-standort__anfahrt-title{font-family:'Spectral',serif;font-size:1.5rem;color:var(--fg);
  margin:0 0 14px}
.np-standort__anfahrt-text{font-size:.95rem;line-height:1.7;color:var(--muted);margin:0 0 20px}
.np-standort__anfahrt-adresse{font-size:.95rem;line-height:1.8;color:var(--fg2);margin-bottom:20px}
.np-standort__anfahrt-link{display:inline-flex;align-items:center;gap:9px;font-size:.88rem;
  color:var(--accent);border-bottom:1px solid transparent;transition:border-color .25s}
.np-standort__anfahrt-link:hover{border-color:var(--accent)}
@media (max-width:900px){ .np-standort__anfahrt{grid-template-columns:1fr} }

/* ==========================================================================
   LEADMAGNET, Aufbau nach dem Vorbild schaefer-soine.de (28.08.2026)
   ========================================================================== */
.np-lm__cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:34px 0 8px}
.np-lm__cta-note{font-size:.84rem;color:var(--muted2)}
.np-lm__open{cursor:pointer;font-family:inherit}

.np-lm__cover--leer{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  aspect-ratio:3/4;padding:30px;background:var(--panel);border:1px solid var(--line-12)}
.np-lm__cover-format{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.np-lm__cover-title{font-family:'Spectral',serif;font-size:1.6rem;line-height:1.2;color:var(--fg);
  hyphens:auto;-webkit-hyphens:auto}
.np-lm__cover-hint{font-size:.78rem;color:var(--muted3)}

.np-lm__wen{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--inv-line);
  border:1px solid var(--inv-line);margin-top:32px}
.np-lm__wen-item{background:var(--inv-bg);padding:32px 30px}
.np-lm__wen-num{font-family:'Spectral',serif;font-size:2.4rem;line-height:1;color:var(--inv-accent);
  margin-bottom:16px}
.np-lm__wen-text{font-size:1rem;line-height:1.6;color:var(--inv-muted)}

.np-lm__autoren{display:grid;grid-template-columns:.42fr 1fr;gap:56px;align-items:center}
.np-lm__autoren-bild{position:relative}
.np-lm__autoren-bild img{width:100%;height:auto;display:block}
.np-lm__autoren-text h2{font-family:'Spectral',serif;font-size:clamp(26px,3.2vw,36px);
  color:var(--fg);margin:10px 0 18px}
.np-lm__autoren-text p{font-size:1.02rem;line-height:1.75;color:var(--muted)}

.np-lm__schluss{padding:88px 0;border-top:1px solid var(--line-08);background:var(--bg2)}
.np-lm__schluss-inner{text-align:center;max-width:56ch;margin:0 auto}
.np-lm__schluss-inner h2{font-family:'Spectral',serif;font-size:clamp(28px,4vw,42px);line-height:1.15;
  color:var(--fg);margin:0 0 16px}
.np-lm__schluss-inner p{font-size:1.02rem;line-height:1.7;color:var(--muted);margin:0 0 30px}
.np-lm__schluss-inner .np-btn{cursor:pointer;font-family:inherit}

@media (max-width:900px){
  .np-lm__wen{grid-template-columns:1fr}
  .np-lm__autoren{grid-template-columns:1fr;gap:34px}
  .np-lm__autoren-bild{max-width:320px}
}

/* ==========================================================================
   DIALOG
   ========================================================================== */
body.np-dialog-offen{overflow:hidden}
.np-dialog{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px}
.np-dialog[hidden]{display:none}
.np-dialog__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(3px)}
.np-dialog__box{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 48px);
  overflow-y:auto;background:var(--bg);border:1px solid var(--line-16);padding:44px 44px 40px;
  box-shadow:var(--shadow)}
.np-dialog__close{position:absolute;top:16px;right:16px;background:none;border:none;padding:8px;
  color:var(--muted2);cursor:pointer;transition:color .25s}
.np-dialog__close:hover{color:var(--fg)}
.np-dialog__kicker{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin-bottom:12px}
.np-dialog__title{font-family:'Spectral',serif;font-size:1.7rem;line-height:1.2;color:var(--fg);
  margin:0 0 12px}
.np-dialog__text{font-size:.94rem;line-height:1.6;color:var(--muted);margin:0 0 28px}

/* WPForms an das Theme angleichen.
   Die Selektoren sind absichtlich so lang. Das Plugin liefert Regeln der Form
   "div.wpforms-container-full .wpforms-form input[type=text]" aus, die eine
   hoehere Spezifitaet haben als eine einfache Klasse. Kuerzere Selektoren
   greifen hier nicht, die Felder bleiben dann weiss. */
/* WPForms benutzt in der modernen Darstellung eigene CSS-Variablen und setzt
   Farben ueber diese. Der saubere Weg ist deshalb, die Variablen zu
   ueberschreiben statt gegen die Plugin-Regeln anzuschreiben. */
.np-dialog div.wpforms-container-full{
  margin:0;
  --wpforms-field-background-color:var(--panel) !important;
  --wpforms-field-border-color:var(--line-12) !important;
  --wpforms-field-border-radius:0px !important;
  --wpforms-field-border-size:1px !important;
  --wpforms-field-text-color:var(--fg) !important;
  --wpforms-field-menu-color:var(--panel) !important;
  --wpforms-field-size-input-height:50px !important;
  --wpforms-field-size-font-size:15px !important;
  --wpforms-field-size-padding-h:15px !important;
  --wpforms-label-color:var(--fg2) !important;
  --wpforms-label-sublabel-color:var(--muted3) !important;
  --wpforms-label-error-color:#e0836b !important;
  --wpforms-button-background-color:var(--accent) !important;
  --wpforms-button-border-color:var(--accent) !important;
  --wpforms-button-text-color:#0c0c0d !important;
  --wpforms-button-border-radius:0px !important;
  --wpforms-button-size-height:52px !important;
  --wpforms-button-size-font-size:13px !important;
  --wpforms-button-size-padding-h:30px !important;
  --wpforms-page-break-color:var(--accent) !important;
}
.np-dialog div.wpforms-container-full .wpforms-form .wpforms-field{padding:0 0 18px}
.np-dialog div.wpforms-container-full .wpforms-form .wpforms-field-label{
  font-size:.8rem;letter-spacing:.05em;color:var(--fg2);font-weight:500;margin-bottom:8px}
.np-dialog div.wpforms-container-full .wpforms-form .wpforms-field-sublabel{
  font-size:.72rem;color:var(--muted3);margin-top:5px}
.np-dialog div.wpforms-container-full .wpforms-form input[type=text],
.np-dialog div.wpforms-container-full .wpforms-form input[type=email],
.np-dialog div.wpforms-container-full .wpforms-form input[type=tel],
.np-dialog div.wpforms-container-full .wpforms-form input[type=url],
.np-dialog div.wpforms-container-full .wpforms-form select,
.np-dialog div.wpforms-container-full .wpforms-form textarea{
  width:100%;background:var(--panel);color:var(--fg);border:1px solid var(--line-12);
  padding:13px 15px;font-size:.95rem;font-family:inherit;border-radius:0;
  box-shadow:none;transition:border-color .25s}
.np-dialog div.wpforms-container-full .wpforms-form input:focus,
.np-dialog div.wpforms-container-full .wpforms-form textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:none}
.np-dialog div.wpforms-container-full .wpforms-form input::placeholder,
.np-dialog div.wpforms-container-full .wpforms-form textarea::placeholder{color:var(--muted3)}
.np-dialog div.wpforms-container-full .wpforms-form .wpforms-field-checkbox label,
.np-dialog div.wpforms-container-full .wpforms-form ul li label{
  font-size:.84rem;line-height:1.55;color:var(--muted);font-weight:400}
.np-dialog div.wpforms-container-full .wpforms-form .wpforms-field-checkbox input[type=checkbox]{
  accent-color:var(--accent);width:16px;height:16px;margin-right:9px}
.np-dialog div.wpforms-container-full .wpforms-form button[type=submit]{
  background:var(--accent);color:#0c0c0d;border:1px solid var(--accent);
  padding:15px 30px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-family:inherit;font-weight:500;cursor:pointer;width:100%;border-radius:0;
  transition:background .25s,color .25s}
.np-dialog div.wpforms-container-full .wpforms-form button[type=submit]:hover{
  background:transparent;color:var(--accent)}
.np-dialog div.wpforms-container-full .wpforms-form label.wpforms-error{
  color:#e0836b;font-size:.8rem;margin-top:6px}
.np-dialog div.wpforms-container-full .wpforms-form .wpforms-required-label{color:var(--accent)}
.np-dialog div.wpforms-container-full .wpforms-form .wpforms-field-description{
  font-size:.8rem;color:var(--muted2)}

@media (max-width:640px){
  .np-dialog{padding:12px}
  .np-dialog__box{padding:36px 24px 30px}
}

/* ==========================================================================
   KOPFBEREICH AUF UNTERSEITEN (28.08.2026)
   Die kinematische Variante war fuer die Startseite gebaut, volle Fensterhoehe
   und ein dunkles Video. Auf einer Produktseite mit hellem Foto schiebt das die
   Ueberschrift unter die Falz und der Text wird unleserlich.
   ========================================================================== */
.np-hero--cinematic--kompakt {
  height:auto;
  min-height:0;
  padding-top:190px;
  padding-bottom:64px;
}
/* Kraeftigerer Verlauf: die Stockfotos sind deutlich heller als das Hero-Video. */
.np-hero--cinematic--kompakt .np-hero--cinematic__overlay {
  background:linear-gradient(180deg, rgba(12,12,13,.86) 0%, rgba(12,12,13,.62) 45%, rgba(12,12,13,.78) 78%, #0c0c0d 100%);
}
.np-hero--cinematic--kompakt h1 { font-size:clamp(34px,4.6vw,58px); margin-bottom:18px; }
.np-hero--cinematic--kompakt .np-hero--cinematic__sub { font-size:17px; }
.np-hero--cinematic--kompakt .np-corner--tl { top:150px; }

@media (max-width:768px) {
  .np-hero--cinematic--kompakt { padding-top:130px; padding-bottom:48px; }
  .np-hero--cinematic--kompakt .np-corner--tl { top:100px; }
}

/* Saeulen-Kacheln der Startseite sind seit 28.08.2026 Links. */
a.np-pillars__service { text-decoration:none; transition:color .25s, background .25s; }
a.np-pillars__service:hover { color:var(--accent); background:var(--hatch1); }

/* ==========================================================================
   COOKIE-BANNER (CookieYes)
   Angepasst 28.08.2026. Vorher stand da ein weisser Kasten mit runden Ecken
   und blauen Schaltflaechen, komplett neben dem Rest der Seite.

   Warum ueberall !important: das Plugin schreibt seine Farben als
   style-Attribut direkt in die Elemente. Ohne !important gewinnt es.
   Deshalb sind hier nur die Eigenschaften mit !important versehen, die das
   Plugin tatsaechlich inline setzt, alles uebrige steht normal.

   Alle Farben kommen aus den Design-Tokens. Dadurch macht der Banner den
   Hell-Dunkel-Umschalter der Seite automatisch mit.
   ========================================================================== */

/* --- Grundflaechen ------------------------------------------------------ */
.cky-consent-container .cky-consent-bar,
.cky-modal .cky-preference-center {
  background-color:var(--bg2) !important;
  border:1px solid var(--line) !important;
  border-radius:0 !important;
  box-shadow:var(--shadow);
  font-family:'Hanken Grotesk', sans-serif;
}
.cky-consent-container { border-radius:0; }
.cky-overlay { background:rgba(0,0,0,.55); }

/* --- Ueberschriften: Serif wie im Rest der Seite ------------------------- */
.cky-title,
.cky-preference-title {
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:19px;
  letter-spacing:-.01em;
  color:var(--fg) !important;
}

/* --- Fliesstext --------------------------------------------------------- */
.cky-notice-des,
.cky-notice-des p,
.cky-preference-content-wrapper,
.cky-preference-content-wrapper p,
.cky-accordion-header-des,
.cky-accordion-header-des p,
.cky-gpc-wrapper .cky-gpc-desc {
  color:var(--muted-b) !important;
  font-size:14px;
  line-height:1.65;
}

/* --- Schaltflaechen: Form und Rhythmus der np-btn ------------------------ */
.cky-btn {
  border-radius:0 !important;
  font-family:'Hanken Grotesk', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:14px 26px;
  transition:background .3s, color .3s, border-color .3s;
}
/* Zustimmen ist die eine primaere Handlung, wie der helle Knopf der Seite. */
.cky-btn-accept {
  background-color:var(--fg) !important;
  color:var(--bg) !important;
  border:1px solid var(--fg) !important;
}
.cky-btn-accept:hover { background-color:var(--accent) !important; border-color:var(--accent) !important; }

/* Ablehnen und Einstellungen gleichrangig daneben, als Umriss.
   Bewusst gleich stark wie Zustimmen, ein versteckter Ablehnen-Knopf
   waere angreifbar. */
.cky-btn-reject,
.cky-btn-customize,
.cky-btn-preferences {
  background-color:transparent !important;
  color:var(--fg) !important;
  border:1px solid var(--line-32) !important;
}
.cky-btn-reject:hover,
.cky-btn-customize:hover,
.cky-btn-preferences:hover { border-color:var(--fg) !important; background-color:var(--hatch1) !important; }

/* --- Detailansicht ------------------------------------------------------ */
.cky-accordion-btn {
  font-family:'Hanken Grotesk', sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--fg) !important;
}
.cky-always-active { color:var(--accent) !important; font-size:12px; letter-spacing:.06em; }
.cky-audit-table {
  background-color:var(--panel) !important;
  color:var(--fg2) !important;
  border:1px solid var(--line) !important;
  border-radius:0 !important;
}
.cky-accordion { border-bottom:1px solid var(--line-08); }
.cky-preference-header { border-bottom:1px solid var(--line-08); }
.cky-footer-wrapper { border-top:1px solid var(--line-08); }
.cky-switch input[type="checkbox"] { accent-color:var(--accent); }

/* --- Verweise ----------------------------------------------------------- */
.cky-consent-container a,
.cky-preference-center a { color:var(--accent); text-underline-offset:3px; }

/* --- Der kleine Knopf zum Wiederaufrufen, unten links -------------------- */
.cky-btn-revisit-wrapper {
  background-color:var(--accent) !important;
  border-radius:0 !important;
}
.cky-btn-revisit-wrapper:hover { background-color:var(--accent2) !important; }

/* --- Schliessen-Kreuz --------------------------------------------------- */
.cky-btn-close { filter:none; opacity:.7; }
.cky-btn-close:hover { opacity:1; }
[data-theme="light"] .cky-btn-close img { filter:none; }
.cky-btn-close img { filter:invert(1); }
[data-theme="light"] .cky-btn-close img { filter:invert(0); }

/* --- Auf schmalen Bildschirmen nicht die halbe Seite belegen ------------- */
@media (max-width:640px) {
  .cky-consent-container .cky-consent-bar { padding:20px 18px !important; }
  .cky-btn { width:100%; text-align:center; }
}