/* ==========================================================================
   NMLSS — public-site redesign (Home, Charts, Chart Detail, Gas storage,
   News). Tokens and classes are namespaced "nm-" so nothing here leaks into
   /account or /admin, which use their own stylesheets.
   Loaded after /static/style.css in base.html — same-specificity rules
   below win by source order, so header/footer classes are restyled here
   without touching style.css (still used by login/error content blocks).
   ========================================================================== */

:root{
  --nm-bg:#F4EFE7;
  --nm-card:#ffffff;
  --nm-ink:#000000;
  --nm-ink-2:#31363b;
  --nm-muted:#596066;
  --nm-border:#e2d9cb;
  --nm-hairline:#ece5da;
  --nm-rule:#08090a;
  --nm-accent:#44a4a5;
  --nm-accent-text:#2f7f80;
  --nm-accent-text-hover:#1c6162;
  --nm-accent-light:#5cc0c1;
  --nm-accent-tint-border:rgba(68,164,165,.45);
  --nm-dark:#1b1a18;
  --nm-dark-2:#232120;
  --nm-dark-border:#38352f;
  --nm-dark-border-2:#4a463f;
  --nm-dark-text:#ffffff;
  --nm-dark-muted:#b3ada3;
  --nm-dark-dim:#948e84;
  --nm-positive:#157f4f;
  --nm-negative:#b42318;
  --nm-btn-ghost-border:#cbc0af;
  --nm-row-hover:#faf6f0;
  --nm-surface-hover:#e9e1d5;
  --nm-bar-track:#f2ece2;
  --nm-font:'Mulish',ui-sans-serif,system-ui,-apple-system,sans-serif;
}

.nm-page{background:var(--nm-bg);color:var(--nm-ink);font-family:var(--nm-font);-webkit-font-smoothing:antialiased}
.nm-page a{color:var(--nm-accent-text);text-decoration:none}
.nm-page a:hover{color:var(--nm-accent-text-hover)}
.nm-page ::selection{background:rgba(68,164,165,.24)}
.nm-page,.nm-page *{box-sizing:border-box}

/* ---- reveal-on-scroll -------------------------------------------------- */
@keyframes nm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes nm-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes nm-blip{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes nm-draw{from{stroke-dashoffset:var(--nm-len,2600)}to{stroke-dashoffset:0}}
@keyframes nm-fadein{from{opacity:0}to{opacity:1}}
@keyframes nm-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
[data-nm-reveal]{opacity:0}
[data-nm-reveal].nm-in{animation:nm-rise .7s cubic-bezier(.22,.61,.36,1) both}
@media (prefers-reduced-motion: reduce){
  [data-nm-reveal]{opacity:1;animation:none!important}
  .nm-marquee-track{animation:none!important}
  .nm-live-dot{animation:none!important}
  .nm-bar-fill{animation:none!important;transform:scaleX(1)!important}
}

/* ---- shared bits -------------------------------------------------------- */
.nm-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.nm-eyebrow{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--nm-accent-text);margin-bottom:16px}
.nm-eyebrow.nm-on-dark{color:var(--nm-accent-light)}
.nm-live-dot{width:6px;height:6px;border-radius:50%;background:var(--nm-accent);flex:none;animation:nm-blip 2.6s ease-in-out infinite}
.nm-h1{font-size:clamp(32px,4.6vw,57px);line-height:1.1;letter-spacing:-.02em;font-weight:800;margin:0 0 20px;text-wrap:pretty}
.nm-h2{font-size:clamp(30px,3.2vw,40px);line-height:1.15;letter-spacing:-.01em;font-weight:800;margin:0}
.nm-lead{font-size:17px;line-height:1.55;color:var(--nm-ink-2);margin:0}
.nm-section-rule{border-top:2px solid var(--nm-rule);padding-top:20px}
.nm-tnum{font-variant-numeric:tabular-nums}
.nm-pos{color:var(--nm-positive)}
.nm-neg{color:var(--nm-negative)}

.nm-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:4px;font-size:15px;font-weight:600;font-family:var(--nm-font);cursor:pointer;border:none;line-height:1.2}
.nm-btn-fill{background:var(--nm-rule);color:#fff;box-shadow:0 2px 4px rgba(8,9,10,.05)}
.nm-btn-fill:hover{background:#000;color:#fff}
.nm-btn-ghost{border:1px solid var(--nm-rule);color:var(--nm-ink);background:transparent}
.nm-btn-ghost:hover{background:var(--nm-rule);color:#fff}
.nm-btn-sm{padding:9px 16px;font-size:14px;border-radius:4px}
/* Akzent-Vollton fuer die Kopfzeile: der schwarze nm-btn-fill wirkt dort
   oben rechts wie ein Fremdkoerper. */
.nm-btn-accent{background:var(--nm-accent);color:#06231f;font-weight:700}
.nm-btn-accent:hover{background:var(--nm-accent-text);color:#fff}
.nm-btn-on-dark{background:var(--nm-accent);color:#06231f;font-weight:700}
.nm-btn-on-dark:hover{background:var(--nm-accent-light);color:#06231f}
.nm-btn-ghost-on-dark{border:1px solid var(--nm-dark-border-2);color:#fff}
.nm-btn-ghost-on-dark:hover{background:#2a2724;color:#fff}

.nm-chip{display:inline-flex;align-items:center;font-size:14px;font-weight:600;border-radius:4px;padding:7px 13px;border:1px solid var(--nm-btn-ghost-border);color:var(--nm-ink)}
.nm-chip:hover{background:var(--nm-bg)}
.nm-chip.nm-chip-active{background:var(--nm-rule);color:#fff;border-color:var(--nm-rule)}

.nm-card{border:1px solid var(--nm-border);border-radius:16px;background:var(--nm-card);box-shadow:0 1px 2px rgba(60,45,25,.05)}
.nm-card-feature{border:1px solid var(--nm-border);border-radius:24px;background:var(--nm-card);box-shadow:0 6px 20px rgba(60,45,25,.07)}
.nm-card-hover:hover{border-color:var(--nm-accent)}
.nm-card-accent{border:1px solid var(--nm-accent-tint-border);border-radius:16px;background:var(--nm-card)}

.nm-dark-band{background:var(--nm-dark);color:#fff}
.nm-dark-panel{border-radius:16px;background:var(--nm-dark);padding:24px}
.nm-cta-band{border-radius:24px;background:var(--nm-dark);padding:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:40px;align-items:center}

.nm-kpi-label{font-size:13px;font-weight:600;color:var(--nm-muted)}
.nm-kpi-value{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:4px}

/* ---- header -------------------------------------------------------------*/
body:has(.nm-page) .topbar,
.nm-page .topbar{
  background:rgba(244,239,231,.93)!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--nm-border)!important;
  height:auto!important;padding:16px 24px!important;
  font-family:var(--nm-font);
}
.topbar{background:rgba(244,239,231,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--nm-border);height:auto;padding:16px 24px;font-family:var(--nm-font);max-width:1200px;margin:0 auto}
.brand{font-family:var(--nm-font);font-weight:800;font-size:18px;letter-spacing:.02em;color:var(--nm-ink);gap:9px}
.brand-mark{width:9px;height:9px;border-radius:2px;background:var(--nm-accent);flex:none}
.nav-links-center{gap:24px;font-size:14px;font-weight:500}
.nav-links-center a{color:var(--nm-ink)}
.nav-links-center a:hover{color:var(--nm-accent-text)}
.nav-links-right{gap:8px}
.nav-links-right a[style*="background:var(--accent)"]{background:var(--nm-rule)!important;color:#fff!important;border-radius:4px!important;font-weight:500!important;font-size:14px!important;padding:9px 16px!important}
.nav-links-right a[style*="background:var(--accent)"]:hover{background:#000!important}
.lang-toggle{border:1px solid var(--nm-btn-ghost-border);color:var(--nm-muted);border-radius:4px}
.lang-toggle:hover{border-color:var(--nm-accent);color:var(--nm-accent-text)}
.icon-btn{border:1px solid var(--nm-btn-ghost-border);border-radius:4px;color:var(--nm-ink)}
.icon-btn:hover{border-color:var(--nm-accent);color:var(--nm-accent-text)}
.mobile-menu{background:var(--nm-card);border-bottom:1px solid var(--nm-border);top:57px}
.mm-link{color:var(--nm-ink);border-bottom:1px solid var(--nm-border);font-family:var(--nm-font)}
.mm-link:hover{background:var(--nm-bg)}
.mm-lang{border:1px solid var(--nm-btn-ghost-border);color:var(--nm-muted)}
.menu-backdrop.open{top:57px}
.skip-link{font-family:var(--nm-font)}

/* ---- footer ---------------------------------------------------------- */
.site-footer{
  display:block!important;
  padding:0!important;
  border-top:1px solid var(--nm-border)!important;
  background:var(--nm-bg)!important;
}
.site-footer-inner{
  max-width:1200px;margin:0 auto;padding:32px 24px 48px;
  display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;
  font-family:var(--nm-font);color:var(--nm-muted);font-size:13px;
}
.site-footer a{color:var(--nm-ink);font-weight:500}
.site-footer a:hover{color:var(--nm-accent-text)}

body{background:var(--nm-bg)}

/* ---- hero ---------------------------------------------------------- */
.nm-hero{max-width:1200px;margin:0 auto;padding:64px 24px 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:56px;align-items:center}
.nm-hero-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;margin-top:8px}
.nm-assess-card{overflow:hidden}
.nm-assess-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--nm-border)}
.nm-assess-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:16px 24px;border-bottom:1px solid var(--nm-hairline)}
.nm-assess-row:last-of-type{border-bottom:none}
.nm-assess-row:hover{background:var(--nm-row-hover)}
.nm-assess-name{font-size:16px;font-weight:600}
.nm-assess-basis{font-size:13px;color:var(--nm-muted);margin-top:2px}
.nm-assess-value{font-size:18px;font-weight:600;letter-spacing:-.01em}
.nm-assess-unit{font-size:12px;font-weight:500;color:var(--nm-muted)}
.nm-assess-change{font-size:13px;font-weight:600;margin-top:2px}
.nm-assess-foot{display:block;text-align:center;padding:14px;border-top:1px solid var(--nm-border);font-size:14px;font-weight:600}
.nm-assess-foot:hover{background:var(--nm-surface-hover)}

/* ---- ticker ---------------------------------------------------------- */
.nm-ticker{border-top:1px solid var(--nm-border);border-bottom:1px solid var(--nm-border);background:#fff;overflow:hidden;padding:12px 0}
.nm-marquee-track{display:flex;width:max-content;animation:nm-marquee 52s linear infinite;font-size:14px}
.nm-marquee-group{display:flex;gap:40px;padding-right:40px;align-items:center}
.nm-ticker-item{display:flex;gap:9px;align-items:baseline}
.nm-ticker-name{font-weight:600}
.nm-ticker-val{color:var(--nm-ink-2)}

/* ---- coverage map band ------------------------------------------------ */
.nm-map-panel{border:1px solid var(--nm-dark-border);border-radius:24px;overflow:hidden;background:var(--nm-dark-2)}
.nm-stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--nm-dark-border);background:var(--nm-dark)}
.nm-stat-cell{padding:20px 24px;border-right:1px solid var(--nm-dark-border)}
.nm-stat-cell:last-child{border-right:none}
.nm-stat-cell .nm-kpi-label{color:var(--nm-dark-dim)}
.nm-stat-cell .nm-kpi-value{color:#fff}
.nm-stat-strip-light{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--nm-hairline)}
.nm-stat-strip-light .nm-stat-cell{border-right-color:var(--nm-hairline)}
.nm-stat-strip-light .nm-kpi-label{color:var(--nm-muted)}
.nm-stat-strip-light .nm-kpi-value{color:var(--nm-ink)}
@media (max-width:640px){
  /* 26.08.2026: bei ~390-430px Breite passten noch genau 2 Zellen pro
     Zeile (minmax 170px) - auf Wunsch jetzt komplett untereinander. */
  .nm-stat-strip,.nm-stat-strip-light{grid-template-columns:1fr}
  .nm-stat-cell{border-right:none!important;border-bottom:1px solid var(--nm-dark-border)}
  .nm-stat-strip-light .nm-stat-cell{border-bottom-color:var(--nm-hairline)}
  .nm-stat-cell:last-child{border-bottom:none}
}

/* ---- market coverage cards --------------------------------------------- */
.nm-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:24px}
.nm-mkt-card{padding:24px}
.nm-mkt-kicker{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--nm-muted)}
.nm-mkt-title{font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:12px 0 10px}
.nm-mkt-body{font-size:16px;line-height:1.55;color:var(--nm-ink-2);margin:0 0 20px;max-width:46ch}
.nm-mkt-list{border-top:1px solid var(--nm-border)}
.nm-mkt-list-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--nm-hairline)}
.nm-mkt-list-row:last-child{border-bottom:none}
.nm-mkt-list-name{font-size:15px;font-weight:600}
.nm-mkt-list-val{font-size:14px;color:var(--nm-ink-2);white-space:nowrap}
.nm-mkt-link{display:inline-block;margin-top:18px;font-size:14px;font-weight:600}

/* ---- methodology --------------------------------------------------- */
.nm-method-card{border-radius:16px;padding:24px;background:#fff;border:1px solid var(--nm-accent-tint-border);transition:border-color .2s var(--nm-ease),box-shadow .2s var(--nm-ease),transform .2s var(--nm-ease)}
.nm-page .nm-method-card.nm-card-hover:hover{border-color:var(--nm-accent);box-shadow:0 2px 6px rgba(60,45,25,.06),0 16px 36px rgba(60,45,25,.10);transform:translateY(-3px)}
.nm-method-num{font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--nm-accent-text)}

/* ---- news teaser cards ------------------------------------------------- */
.nm-news-card{padding:24px;color:var(--nm-ink);display:flex;flex-direction:column;gap:12px;min-height:190px}
.nm-news-kicker{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--nm-muted)}
.nm-news-title{font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.nm-news-read{margin-top:auto;font-size:14px;font-weight:600;color:var(--nm-accent-text)}

/* ---- roadmap ---------------------------------------------------------- */
.nm-roadmap-row{display:grid;grid-template-columns:88px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--nm-border)}
.nm-roadmap-row:last-child{border-bottom:none}
.nm-roadmap-status{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding-top:3px}
.nm-roadmap-status.nm-live{color:var(--nm-positive)}
.nm-roadmap-status.nm-next{color:var(--nm-muted)}
.nm-roadmap-title{font-size:17px;font-weight:700;margin-bottom:5px}
.nm-roadmap-desc{margin:0;font-size:15px;color:var(--nm-ink-2);line-height:1.55}

/* ---- filter card (all markets) ----------------------------------------- */
.nm-filter-card{padding:20px 24px;display:grid;gap:16px}
.nm-filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.nm-filter-label{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nm-muted);width:72px}
.nm-filter-divider{height:1px;background:var(--nm-hairline)}
.nm-filter-count{margin-left:auto;font-size:13px;color:var(--nm-muted)}

/* ---- tables ------------------------------------------------------------ */
.nm-table{overflow:hidden}
.nm-table-head{display:grid;gap:16px;padding:12px 24px;border-bottom:1px solid var(--nm-border);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nm-muted)}
.nm-table-row{display:grid;gap:16px;align-items:center;padding:14px 24px;border-bottom:1px solid var(--nm-hairline);color:var(--nm-ink)}
.nm-table-row:last-child{border-bottom:none}
.nm-table-row:hover{background:var(--nm-row-hover)}
.nm-cols-markets{grid-template-columns:minmax(220px,1.6fr) minmax(130px,1fr) 120px 92px 110px}
.nm-col-right{text-align:right}
.nm-table-foot{display:block;text-align:center;padding:14px;font-size:14px;font-weight:600}
.nm-table-foot:hover{background:var(--nm-row-hover)}
.nm-product-name{font-size:16px;font-weight:600}
.nm-product-basis{font-size:13.5px;color:var(--nm-muted)}
.nm-value{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.nm-value-unit{font-size:11.5px;font-weight:500;color:var(--nm-muted)}
.nm-change{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.nm-spark{display:flex;justify-content:flex-end}
.nm-spark path{stroke-dasharray:300;--nm-len:300;animation:nm-draw 1.4s cubic-bezier(.22,.61,.36,1) both}

/* ---- chart detail ------------------------------------------------------- */
.nm-breadcrumb{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600;color:var(--nm-muted);margin-bottom:20px;flex-wrap:wrap}
.nm-breadcrumb a{color:var(--nm-muted)}
.nm-breadcrumb .nm-current{color:var(--nm-ink)}
.nm-detail-value{font-size:clamp(34px,3.6vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1}
.nm-detail-unit{font-size:16px;font-weight:600;color:var(--nm-muted)}
.nm-detail-change-row{display:flex;gap:10px;align-items:baseline}
.nm-chart-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--nm-hairline);flex-wrap:wrap}
.nm-range-btn{font-size:13px;font-weight:700;border:1px solid var(--nm-btn-ghost-border);border-radius:4px;padding:7px 13px;cursor:pointer;font-family:var(--nm-font);background:#fff;color:var(--nm-ink)}
.nm-range-btn.nm-active{background:var(--nm-rule);color:#fff;border-color:var(--nm-rule)}
.nm-chart-stats{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}
.nm-chart-stats span{font-size:13px;color:var(--nm-muted)}
.nm-chart-stats strong{font-size:15px;color:var(--nm-ink);margin-left:5px}

/* ---- gas storage -------------------------------------------------------- */
.nm-country-cols{grid-template-columns:minmax(120px,180px) 62px minmax(160px,1fr) 84px 84px}
.nm-bar-track{display:block;height:8px;border-radius:4px;background:var(--nm-bar-track);overflow:hidden}
.nm-bar-fill{display:block;height:100%;border-radius:4px;background:var(--nm-accent);transform-origin:left;animation:nm-grow 1s cubic-bezier(.22,.61,.36,1) both}

/* ---- news page ---------------------------------------------------------- */
.nm-top-story{display:block;border:2px solid var(--nm-rule);border-radius:24px;padding:32px;color:var(--nm-ink);margin-bottom:32px}
.nm-top-story:hover{border-color:var(--nm-accent)}
.nm-top-badge{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nm-accent-text);background:rgba(68,164,165,.14);border-radius:4px;padding:5px 8px}
.nm-date-heading{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nm-rule);border-top:2px solid var(--nm-rule);padding-top:14px;margin:32px 0 4px}
.nm-date-heading:first-of-type{margin-top:0}
.nm-news-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;padding:20px 0;border-bottom:1px solid var(--nm-border);color:var(--nm-ink)}
.nm-news-row:hover{background:var(--nm-row-hover)}
.nm-news-row-kicker{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--nm-muted);margin-bottom:8px}
.nm-news-row-title{font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.01em;margin-bottom:8px}
.nm-news-row-summary{margin:0;font-size:15px;line-height:1.55;color:var(--nm-ink-2);max-width:60ch}
.nm-news-sidebar{display:grid;gap:24px}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:900px){
  .nm-hero{padding-top:40px}
}
@media (max-width:640px){
  .nm-wrap{padding:0 16px}
}

/* ==========================================================================
   /charts re-theme — the page's existing markup (search, favourites,
   EUR/USD toggle, bunker & securities tabs, hide/minimize, sparklines)
   keeps its structure and JS; only the visual language changes here to
   match the redesign tokens above. Re-implementing that logic from scratch
   against the design-tool mockup would have meant dropping real,
   already-working functionality the mockup never modeled.
   ========================================================================== */
.nm-page .v2-layout{max-width:1200px;margin:0 auto;padding:0 24px 80px;font-family:var(--nm-font);gap:32px}
.nm-page .v2-ticker-bar{border-top:1px solid var(--nm-border);border-bottom:1px solid var(--nm-border);background:#fff;font-family:var(--nm-font)}
.nm-page .v2-live-dot{background:var(--nm-accent);animation:nm-blip 2.6s ease-in-out infinite}
.nm-page .v2-ticker-chg.up{color:var(--nm-positive)}
.nm-page .v2-ticker-chg.down{color:var(--nm-negative)}
.nm-page .v2-breadcrumb{color:var(--nm-muted);font-family:var(--nm-font)}
.nm-page .v2-breadcrumb a{color:var(--nm-muted)}
.nm-page .v2-breadcrumb a:hover{color:var(--nm-accent-text)}
.nm-page .v2-page-title{font-family:var(--nm-font);font-weight:800;letter-spacing:-.02em;color:var(--nm-ink)}
.nm-page .v2-page-subtitle{color:var(--nm-muted);font-family:var(--nm-font)}
.nm-page .v2-sidebar-link{font-family:var(--nm-font);color:var(--nm-ink-2);border-radius:4px}
.nm-page .v2-sidebar-link.active,.nm-page .v2-sidebar-link:hover{background:var(--nm-surface-hover);color:var(--nm-ink)}
.nm-page .v2-sidebar-label{color:var(--nm-muted);font-family:var(--nm-font)}
.nm-page .v2-tab-pills{gap:8px}
.nm-page .v2-tab-pill{font-family:var(--nm-font);font-weight:600;border:1px solid var(--nm-btn-ghost-border);border-radius:4px;color:var(--nm-ink);background:#fff}
.nm-page .v2-tab-pill.active{background:var(--nm-rule);border-color:var(--nm-rule);color:#fff}
.nm-page .v2-search-wrap{border:1px solid var(--nm-border);border-radius:4px;background:#fff}
.nm-page .v2-search-input{font-family:var(--nm-font);color:var(--nm-ink)}
.nm-page .v2-inner-tabs{gap:6px;border-bottom:1px solid var(--nm-border)}
.nm-page .v2-inner-tab-btn{font-family:var(--nm-font);font-weight:600;color:var(--nm-muted);border-radius:4px 4px 0 0}
.nm-page .v2-inner-tab-btn.active{color:var(--nm-ink);border-bottom:2px solid var(--nm-accent)}
.nm-page .v2-section-block{border:1px solid var(--nm-border);border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(60,45,25,.05)}
.nm-page .v2-section-header{border-bottom:1px solid var(--nm-border);font-family:var(--nm-font)}
.nm-page .v2-section-name{font-weight:700;color:var(--nm-ink)}
.nm-page .v2-section-count{color:var(--nm-muted)}
.nm-page .v2-price-table{font-family:var(--nm-font);width:100%;border-collapse:collapse}
.nm-page .v2-price-table thead th{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nm-muted);border-bottom:1px solid var(--nm-border);text-align:left;padding:12px 20px}
.nm-page .v2-price-table tbody tr{border-bottom:1px solid var(--nm-hairline)}
.nm-page .v2-price-table tbody tr:hover{background:var(--nm-row-hover)}
.nm-page .v2-price-table td{padding:12px 20px;color:var(--nm-ink)}
.nm-page .v2-col-product a{color:var(--nm-ink);font-weight:600}
.nm-page .v2-col-product a:hover{color:var(--nm-accent-text)}
.nm-page .v2-unit{color:var(--nm-muted);font-size:11.5px;font-weight:500}
.nm-page .v2-chg-pill.up{color:var(--nm-positive)}
.nm-page .v2-chg-pill.down{color:var(--nm-negative)}
.nm-page .v2-watch-btn{border:1px solid var(--nm-btn-ghost-border);border-radius:4px;color:var(--nm-muted)}
.nm-page .v2-watch-btn.active{background:var(--nm-accent);color:#06231f;border-color:var(--nm-accent)}
.nm-page .v2-cur-btn{font-family:var(--nm-font);font-weight:700;border:1px solid var(--nm-btn-ghost-border);border-radius:4px;color:var(--nm-ink);background:#fff}
.nm-page .v2-cur-btn.active{background:var(--nm-rule);border-color:var(--nm-rule);color:#fff}
.nm-page .v2-kpi,.nm-page .v2-mv-card{border:1px solid var(--nm-border);border-radius:16px;background:#fff;font-family:var(--nm-font)}
.nm-page .v2-kpi-k,.nm-page .v2-mv-h{color:var(--nm-muted)}
.nm-page .v2-kpi-v{color:var(--nm-ink)}
.nm-page .v2-kpi-v.up,.nm-page .v2-mv-chg.up,.nm-page .v2-mv-h.up{color:var(--nm-positive)}
.nm-page .v2-kpi-v.down,.nm-page .v2-mv-chg.down,.nm-page .v2-mv-h.down{color:var(--nm-negative)}
.nm-page .v2-mv-row{color:var(--nm-ink);border-bottom:1px solid var(--nm-hairline)}
.nm-page .v2-mv-row:hover{background:var(--nm-row-hover)}
.nm-page .v2-empty-state{border:1px dashed var(--nm-border);border-radius:16px;color:var(--nm-muted);font-family:var(--nm-font)}
.nm-page .v2-hidden-banner{
  background:var(--nm-dark);color:#fff;border-radius:12px;font-family:var(--nm-font);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 20px;margin-bottom:16px;font-size:14px;font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.nm-page .v2-hidden-banner #hidden-sections-count{color:rgba(255,255,255,.82);font-weight:600}
.nm-page #hidden-sections-reset{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:999px;
  font-family:var(--nm-font);font-size:13px;font-weight:700;
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);
  cursor:pointer;line-height:1.2;white-space:nowrap;flex:none;
  transition:background .18s var(--nm-ease),color .18s var(--nm-ease),
             border-color .18s var(--nm-ease),transform .18s var(--nm-ease);
}
.nm-page #hidden-sections-reset:hover{
  background:#fff;color:var(--nm-dark);border-color:#fff;transform:translateY(-1px);
}
.nm-page #hidden-sections-reset:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(92,192,193,.55),0 0 0 5px rgba(0,0,0,.5);
}
@media (max-width:520px){
  .nm-page .v2-hidden-banner{flex-direction:column;align-items:flex-start;gap:10px}
  .nm-page #hidden-sections-reset{width:100%;justify-content:center}
}
.nm-page .v2-disclaimer{color:var(--nm-muted);font-family:var(--nm-font)}
@media (max-width:900px){ .nm-page .v2-layout{grid-template-columns:1fr} }

/* ==========================================================================
   Chart-Detail (/product/...) re-theme — range switcher (7/30/90/365/max),
   EUR/USD toggle, sparkline and history table keep their existing JS;
   only the visual language changes.
   ========================================================================== */
.nm-page .pd-wrap{max-width:1200px;font-family:var(--nm-font);padding:32px 24px 80px}
.nm-page .pd-crumb{font-family:var(--nm-font);color:var(--nm-muted);font-size:13px;font-weight:600}
.nm-page .pd-crumb a{color:var(--nm-muted)}
.nm-page .pd-crumb a:hover{color:var(--nm-accent-text)}
.nm-page .pd-crumb b{color:var(--nm-ink)}
.nm-page .pd-hero{background:transparent;border:none;padding:0;margin-bottom:24px}
.nm-page .pd-hero::before{display:none}
.nm-page .pd-chip{font-family:var(--nm-font);color:var(--nm-accent-text);font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.nm-page .pd-dot{background:var(--nm-accent);box-shadow:none;animation:nm-blip 2.6s ease-in-out infinite}
.nm-page .pd-name{font-family:var(--nm-font);font-size:clamp(30px,3.4vw,42px);font-weight:800;letter-spacing:-.02em;color:var(--nm-ink)}
.nm-page .pd-big-price{font-family:var(--nm-font);font-size:clamp(34px,3.6vw,46px);font-weight:800;letter-spacing:-.03em;color:var(--nm-ink)}
.nm-page .pd-unit{font-family:var(--nm-font);color:var(--nm-muted);font-weight:600}
.nm-page .pd-chg{font-family:var(--nm-font);border-radius:4px;font-weight:700}
.nm-page .pd-chg.up{background:transparent;color:var(--nm-positive)}
.nm-page .pd-chg.down{background:transparent;color:var(--nm-negative)}
.nm-page .pd-chg.flat{background:transparent;color:var(--nm-muted)}
.nm-page .pd-meta{font-family:var(--nm-font);color:var(--nm-muted)}
.nm-page .pd-sw-btn{font-family:var(--nm-font);border:1px solid var(--nm-btn-ghost-border);border-radius:4px;color:var(--nm-ink)}
.nm-page .pd-sw-btn.on,.nm-page .pd-sw-btn:hover{background:var(--nm-rule);color:#fff;border-color:var(--nm-rule)}
.nm-page .pd-watch-btn{font-family:var(--nm-font);border:1px solid var(--nm-btn-ghost-border);border-radius:4px;color:var(--nm-ink)}
.nm-page .pd-watch-btn.on{background:var(--nm-accent);color:#06231f;border-color:var(--nm-accent)}
.nm-page .pd-desc{background:#fff;border:1px solid var(--nm-border);border-left:3px solid var(--nm-accent);color:var(--nm-ink-2);font-family:var(--nm-font);border-radius:0 16px 16px 0}
.nm-page .pd-card,.nm-page .pd-tbl-card,.nm-page .pd-facts,.nm-page .pd-news{background:#fff;border:1px solid var(--nm-border);border-radius:24px;box-shadow:0 6px 20px rgba(60,45,25,.07)}
.nm-page .pd-card-title,.nm-page .pd-tbl-head,.nm-page .pd-fh{font-family:var(--nm-font);color:var(--nm-muted)}
.nm-page .pd-tbl-head{border-bottom:1px solid var(--nm-hairline);border-radius:24px 24px 0 0}
.nm-page .pd-ranges{background:transparent;border:none;gap:6px;padding:0}
.nm-page .pd-ranges button{font-family:var(--nm-font);border:1px solid var(--nm-btn-ghost-border);border-radius:4px;color:var(--nm-ink);font-weight:700}
.nm-page .pd-ranges button.on{background:var(--nm-rule);color:#fff;border-color:var(--nm-rule)}
.nm-page .pd-table{font-family:var(--nm-font)}
.nm-page .pd-table th{color:var(--nm-muted);border-bottom:1px solid var(--nm-border)}
.nm-page .pd-table td{color:var(--nm-ink);border-bottom:1px solid var(--nm-hairline)}
.nm-page .pd-table tr:hover td{background:var(--nm-row-hover)}
.nm-page .pd-tc-date{color:var(--nm-ink);font-family:var(--nm-font);font-weight:600}
.nm-page .pd-fact{border-top:1px solid var(--nm-hairline)}
.nm-page .pd-fact .k{color:var(--nm-muted);font-family:var(--nm-font)}
.nm-page .pd-fact .v{font-family:var(--nm-font);color:var(--nm-ink)}
.nm-page .pd-spark{border-top:1px solid var(--nm-hairline)}
.nm-page .pd-news-h{border-bottom:1px solid var(--nm-hairline)}
.nm-page .pd-news-h .t{color:var(--nm-muted);font-family:var(--nm-font)}
.nm-page .pd-news-h .a{color:var(--nm-accent-text)}
.nm-page .pd-n-item{border-bottom:1px solid var(--nm-hairline)}
.nm-page .pd-n-item:hover{background:var(--nm-row-hover)}
.nm-page .pd-n-title{color:var(--nm-ink);font-family:var(--nm-font)}
.nm-page .pd-n-sum{color:var(--nm-ink-2);font-family:var(--nm-font)}
.nm-page .pd-n-tag.kw{background:rgba(68,164,165,.14);color:var(--nm-accent-text)}
.nm-page .pd-n-tag.cat{background:var(--nm-bg);color:var(--nm-muted);border:1px solid var(--nm-border)}
.nm-page .pd-n-legend{background:var(--nm-bg);color:var(--nm-muted);font-family:var(--nm-font)}
.nm-page .pd-disclaimer{color:var(--nm-muted);font-family:var(--nm-font)}
.nm-page .pd-source{border-radius:16px;background:var(--nm-dark);padding:24px;color:#fff;font-family:var(--nm-font)}
.nm-page .pd-source .k{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nm-accent-light);margin-bottom:10px}
.nm-page .pd-source p{font-size:14.5px;line-height:1.55;color:var(--nm-dark-muted);margin:0}

/* ==========================================================================
   Neuausrichtung 22.08.2026 — Startseite als Produktseite, Kontakt,
   Rechtstexte. Die Seite zeigt keine Live-Preise mehr (die liegen hinter dem
   Login), sondern Module, Screenshots und einen Weg zur Anfrage. Alles hier
   baut auf den Tokens oben auf, damit die Optik zum Rest der Seite passt.
   ========================================================================== */

/* ---- Produkt-Screenshot in einem Fensterrahmen -------------------------- */
.nm-shot{border:1px solid var(--nm-border);border-radius:16px;background:var(--nm-card);overflow:hidden;box-shadow:0 8px 28px rgba(60,45,25,.10)}
.nm-shot-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--nm-hairline);background:var(--nm-bg)}
.nm-shot-dots{display:flex;gap:5px;flex:none}
.nm-shot-dots i{width:9px;height:9px;border-radius:50%;background:var(--nm-border);display:block}
.nm-shot-path{font-size:12.5px;font-weight:600;color:var(--nm-muted);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm-shot img{display:block;width:100%;height:auto}
.nm-shot-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:230px;padding:32px 24px;text-align:center;background:repeating-linear-gradient(135deg,var(--nm-bg),var(--nm-bg) 10px,var(--nm-card) 10px,var(--nm-card) 20px)}
.nm-shot-empty strong{font-size:15px;font-weight:700;color:var(--nm-ink-2)}
.nm-shot-empty span{font-size:13.5px;color:var(--nm-muted);max-width:36ch;line-height:1.5}
.nm-shot-caption{font-size:13px;color:var(--nm-muted);margin:10px 2px 0;line-height:1.5}

/* ---- Modulblöcke (die vier Grundpfeiler) -------------------------------- */
.nm-module{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center;padding:56px 0;position:relative}
.nm-module::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,transparent,rgba(8,9,10,.14) 12%,rgba(8,9,10,.14) 88%,transparent)}
.nm-module:first-of-type::before{display:none}
.nm-module.nm-module-flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.nm-module.nm-module-flip .nm-module-media{order:-1}
.nm-module-num{display:none}
.nm-module-title{text-align:center}
.nm-module-body{text-align:justify;hyphens:auto}
.nm-module-title{font-size:clamp(24px,2.6vw,32px);line-height:1.18;letter-spacing:-.01em;font-weight:800;margin:0 0 12px}
.nm-module-body{font-size:16.5px;line-height:1.55;color:var(--nm-ink-2);margin:0 0 20px;max-width:46ch}
.nm-feature-list{list-style:none;margin:0 0 22px;padding:6px 20px;display:grid;gap:0;background:var(--nm-card);border:1px solid var(--nm-border);border-radius:14px;box-shadow:0 2px 6px rgba(60,45,25,.05),0 14px 32px rgba(60,45,25,.07)}
.nm-feature-list li{position:relative;padding:12px 0 12px 26px;font-size:15px;line-height:1.5;color:var(--nm-ink);border-bottom:1px solid var(--nm-hairline)}
.nm-feature-list li:last-child{border-bottom:none}
.nm-feature-list li::before{content:"";position:absolute;left:0;top:20px;width:12px;height:7px;border-left:2px solid var(--nm-accent);border-bottom:2px solid var(--nm-accent);transform:rotate(-45deg)}
.nm-module-note{font-size:13.5px;color:var(--nm-muted);margin:0}
@media (max-width:900px){
  .nm-module{grid-template-columns:1fr;gap:28px;padding:40px 0}
  .nm-module.nm-module-flip{grid-template-columns:1fr}
  .nm-module.nm-module-flip .nm-module-media{order:0}
}
@media (max-width:640px){
  /* 26.08.2026: Blocksatz erzeugt bei schmalen Spalten (lange deutsche
     Komposita, wenig Woerter pro Zeile) haessliche Luecken - auf schmalen
     Screens deshalb wieder linksbuendig. */
  .nm-module-body{text-align:left;hyphens:none}
}

/* ---- Zielgruppen-Karten -------------------------------------------------- */
.nm-audience{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.nm-audience-card{padding:26px;display:flex;flex-direction:column;gap:10px;background:var(--nm-bg)}
.nm-audience-role{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nm-accent-text)}
.nm-audience-title{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:0}
.nm-audience-body{font-size:15px;line-height:1.55;color:var(--nm-ink-2);margin:0}

.nm-praxis-card{padding:24px;background:var(--nm-bg);border-radius:16px}
.nm-page .nm-praxis-card.nm-card-hover:hover{border-color:var(--nm-accent);box-shadow:0 4px 10px rgba(30,20,10,.12),0 20px 44px rgba(30,20,10,.18)}

/* ---- Formular (Kontakt/Demo) -------------------------------------------- */
.nm-form{display:grid;gap:18px}
.nm-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.nm-field{display:flex;flex-direction:column;gap:6px}
.nm-field label{font-size:14px;font-weight:600;color:var(--nm-ink)}
.nm-field .nm-hint{font-size:13px;color:var(--nm-muted);font-weight:400}
.nm-input,.nm-select,.nm-textarea{font-family:var(--nm-font);font-size:15.5px;color:var(--nm-ink);background:var(--nm-card);border:1px solid var(--nm-border);border-radius:6px;padding:11px 13px;width:100%}
.nm-input:focus,.nm-select:focus,.nm-textarea:focus{outline:2px solid var(--nm-accent);outline-offset:1px;border-color:var(--nm-accent)}
.nm-textarea{min-height:150px;resize:vertical;line-height:1.55}
.nm-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.nm-check{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--nm-border);border-radius:8px;background:var(--nm-card);cursor:pointer;font-size:15px;line-height:1.4}
.nm-check:hover{border-color:var(--nm-accent)}
.nm-check input{margin-top:2px;width:17px;height:17px;accent-color:var(--nm-accent);flex:none}
.nm-consent{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.5;color:var(--nm-ink-2)}
.nm-consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--nm-accent);flex:none}
.nm-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nm-alert{border-radius:10px;padding:16px 18px;font-size:15px;line-height:1.55}
.nm-alert-error{border:1px solid rgba(180,35,24,.35);background:rgba(180,35,24,.06);color:#7d1a12}
.nm-alert-ok{border:1px solid var(--nm-accent-tint-border);background:rgba(68,164,165,.10);color:#1c5a5b}
.nm-alert ul{margin:8px 0 0;padding-left:20px}

/* ---- Rechtstexte --------------------------------------------------------- */
.nm-legal{max-width:78ch}
.nm-legal h2{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:36px 0 10px}
.nm-legal h3{font-size:17px;font-weight:700;margin:24px 0 8px}
.nm-legal p,.nm-legal li{font-size:16px;line-height:1.65;color:var(--nm-ink-2)}
.nm-legal p{margin:0 0 12px}
.nm-legal ul{margin:0 0 12px;padding-left:22px}
.nm-legal dl{display:grid;grid-template-columns:minmax(160px,auto) 1fr;gap:8px 24px;margin:0 0 16px}
.nm-legal dt{font-size:15px;font-weight:700;color:var(--nm-ink)}
.nm-legal dd{margin:0;font-size:16px;color:var(--nm-ink-2)}
.nm-todo{color:var(--nm-negative);font-weight:700}
@media (max-width:640px){.nm-legal dl{grid-template-columns:1fr;gap:2px 0}.nm-legal dd{margin-bottom:10px}}

/* Kontaktseite: Formular + Randspalte. Eigene Klasse statt Inline-Spalten,
   damit die Randspalte auf schmalen Displays unter das Formular rutscht
   statt neben ihm zusammengequetscht zu werden. */
.nm-contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
@media (max-width:900px){.nm-contact-grid{grid-template-columns:1fr;gap:32px}}

/* ==========================================================================
   Politur 23.08.2026 — Schaltflaechen, Kopfzeile, Abschnitts-Rhythmus,
   Bewegung. Steht am Dateiende und ueberschreibt die frueheren Regeln
   bewusst per Quellreihenfolge, damit oben nichts umgebaut werden muss.
   ========================================================================== */

:root{
  /* Primaerfarbe der Schaltflaechen: tiefes Petrol statt Schwarz. Weisser
     Text darauf ergibt 7,15:1 (WCAG AA braucht 4,5:1), der Hover-Ton 9,17:1.
     Das helle --nm-accent (#44a4a5) taugt NICHT als Flaeche unter weissem
     Text: nur 2,96:1. Es bleibt deshalb der Ton fuer dunkle Baender. */
  --nm-btn:#1c6162;
  --nm-btn-hover:#14504f;
  --nm-btn-ring:rgba(68,164,165,.45);
  --nm-ink-tint:rgba(8,9,10,.06);
  --nm-ink-tint-2:rgba(8,9,10,.11);
  --nm-ease:cubic-bezier(.16,1,.3,1);
  --nm-topbar-h:69px;
}

/* ---- Schaltflaechen ----------------------------------------------------- */
.nm-btn{
  position:relative;min-height:44px;              /* Touch-Mindestmass */
  border-radius:8px;letter-spacing:.005em;
  text-decoration:none;isolation:isolate;
  transition:background .18s var(--nm-ease), color .18s var(--nm-ease),
             border-color .18s var(--nm-ease), box-shadow .18s var(--nm-ease),
             transform .18s var(--nm-ease);
  will-change:transform;
}
.nm-btn:active{transform:translateY(0) scale(.985)}
.nm-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--nm-btn-ring),0 0 0 5px rgba(255,255,255,.9)}

.nm-page .nm-btn-fill,
.nm-page .nm-btn-accent{
  background:var(--nm-btn);color:#fff;border:1px solid var(--nm-btn);
  box-shadow:0 1px 2px rgba(8,9,10,.10),0 4px 12px rgba(28,97,98,.18);
}
.nm-page .nm-btn-fill:hover,
.nm-page .nm-btn-accent:hover{
  background:var(--nm-btn-hover);border-color:var(--nm-btn-hover);color:#fff;
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(8,9,10,.12),0 10px 24px rgba(28,97,98,.28);
}

.nm-page .nm-btn-ghost{
  background:transparent;color:var(--nm-ink);
  border:1.5px solid var(--nm-btn-ghost-border);box-shadow:none;
}
.nm-page .nm-btn-ghost:hover{
  background:var(--nm-ink-tint);border-color:var(--nm-btn);color:var(--nm-btn-hover);
  transform:translateY(-2px);
}

/* Auf dunklen Baendern: heller Akzent, dunkler Text (7,7:1). */
.nm-page .nm-btn-on-dark{
  background:var(--nm-accent-light);color:#06231f;border:1px solid var(--nm-accent-light);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.nm-page .nm-btn-on-dark:hover{
  background:#7ad3d4;border-color:#7ad3d4;color:#06231f;transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.nm-page .nm-btn-ghost-on-dark{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);
}
.nm-page .nm-btn-ghost-on-dark:hover{
  background:#fff;color:var(--nm-dark);border-color:#fff;transform:translateY(-2px);
}
.nm-page .nm-btn-on-dark:focus-visible,
.nm-page .nm-btn-ghost-on-dark:focus-visible{box-shadow:0 0 0 3px rgba(92,192,193,.55),0 0 0 5px rgba(0,0,0,.5)}

/* Textlinks mit Pfeil: der Pfeil wandert beim Hover mit. */
.nm-page .nm-mkt-link,.nm-page .nm-module-link{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;
  color:var(--nm-accent-text);transition:color .18s var(--nm-ease),gap .18s var(--nm-ease)
}
.nm-page .nm-mkt-link:hover,.nm-page .nm-module-link:hover{color:var(--nm-accent-text-hover);gap:12px}

/* ---- Kopfzeile: randlos ueber die volle Breite --------------------------- */
.nm-page .topbar{
  position:sticky;top:0;z-index:120;
  max-width:none;width:100%;margin:0;
  /* Balken geht bis an den Rand, der Inhalt bleibt auf 1200px zentriert. */
  padding:14px max(24px,calc((100% - 1200px) / 2))!important;
  background:rgba(244,239,231,.82);
  border-bottom:1px solid transparent;
  transition:background .25s var(--nm-ease), box-shadow .25s var(--nm-ease),
             padding .25s var(--nm-ease), border-color .25s var(--nm-ease);
}
.nm-page .topbar.nm-stuck{
  padding-top:9px!important;padding-bottom:9px!important;
  background:rgba(244,239,231,.97);
  border-bottom-color:var(--nm-border);
  box-shadow:0 6px 24px rgba(26,23,18,.09);
}
/* Ohne Rueckfallhoehe springt der Inhalt beim Umschalten. */
.nm-page main{scroll-margin-top:var(--nm-topbar-h)}
.nm-page section[id]{scroll-margin-top:calc(var(--nm-topbar-h) + 12px)}

/* Lesefortschritt: duenner Balken unter der Kopfzeile. */
.nm-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:130;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--nm-accent),var(--nm-accent-text));
  pointer-events:none;
}

/* ---- Abschnitts-Rhythmus ------------------------------------------------- */
.nm-band{position:relative}
.nm-band-sand{background:var(--nm-bg)}
.nm-band-paper{background:var(--nm-card);border-top:1px solid var(--nm-border);border-bottom:1px solid var(--nm-border)}
.nm-band-dark{background:var(--nm-dark);color:#fff}
.nm-band-dark .nm-h2,.nm-band-dark h3{color:#fff}
/* Weicher Uebergang an der Oberkante heller Baender - eine harte Linie wirkt
   billig, ein 1px-Rand plus Verlauf trennt sauber. */
.nm-band-paper::before,.nm-band-sand::before{
  content:"";position:absolute;inset:0 0 auto 0;height:80px;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,10,.028),transparent)
}
.nm-band-dark::before{
  content:"";position:absolute;inset:0 0 auto 0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.35),transparent)
}
.nm-band-inner{max-width:1200px;margin:0 auto;padding:96px 24px}
.nm-band-inner-tight{max-width:1200px;margin:0 auto;padding:72px 24px}
@media (max-width:768px){.nm-band-inner{padding:64px 20px}.nm-band-inner-tight{padding:52px 20px}}

/* Der Hero bekommt einen leisen Farbschimmer, damit die Seite nicht flach
   startet - reine Deko, deshalb pointer-events:none und sehr niedrig dosiert. */
.nm-hero-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.nm-hero-glow::after{
  content:"";position:absolute;width:820px;height:620px;top:-320px;right:-160px;
  border-radius:50%;filter:blur(90px);
  background:radial-gradient(ellipse,rgba(68,164,165,.20),transparent 68%)
}
.nm-hero-glow::before{
  content:"";position:absolute;width:520px;height:520px;bottom:-300px;left:-180px;
  border-radius:50%;filter:blur(90px);
  background:radial-gradient(ellipse,rgba(183,121,31,.10),transparent 70%)
}
.nm-band>.nm-band-inner,.nm-band>.nm-band-inner-tight,.nm-band>.nm-wrap{position:relative;z-index:1}

/* ---- Karten: spuerbare, aber ruhige Hover-Reaktion ----------------------- */
.nm-page .nm-card{transition:border-color .2s var(--nm-ease),box-shadow .2s var(--nm-ease),transform .2s var(--nm-ease)}
.nm-page .nm-card-hover:hover{
  border-color:var(--nm-accent-tint-border);
  box-shadow:0 2px 6px rgba(60,45,25,.06),0 16px 36px rgba(60,45,25,.10);
  transform:translateY(-3px)
}
.nm-page .nm-shot{transition:box-shadow .25s var(--nm-ease),transform .25s var(--nm-ease)}
.nm-page .nm-shot:hover{box-shadow:0 12px 40px rgba(60,45,25,.16);transform:translateY(-3px)}

/* ---- Bewegung ------------------------------------------------------------ */
@keyframes nm-in-up{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes nm-in-left{from{opacity:0;transform:translate3d(-28px,0,0)}to{opacity:1;transform:none}}
@keyframes nm-in-right{from{opacity:0;transform:translate3d(28px,0,0)}to{opacity:1;transform:none}}
@keyframes nm-in-scale{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes nm-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

[data-nm-reveal],[data-nm-item]{opacity:0}
[data-nm-reveal].nm-in,[data-nm-item].nm-in{animation:nm-in-up .62s var(--nm-ease) both}
[data-nm-reveal="left"].nm-in{animation-name:nm-in-left}
[data-nm-reveal="right"].nm-in{animation-name:nm-in-right}
[data-nm-reveal="scale"].nm-in{animation-name:nm-in-scale}

/* Die Trennlinie ueber jeder Abschnittsueberschrift zeichnet sich mit. */
.nm-section-rule{position:relative;border-top:none;padding-top:22px}
.nm-section-rule::before{
  content:none
}
.nm-band-dark .nm-section-rule::before{background:var(--nm-accent-light)}
.nm-section-rule.nm-in::before{animation:nm-line .8s var(--nm-ease) .12s both}

/* Modul-Sektion (Startseite): Eyebrow/Titel/Lead mittig, passend zum
   zentrierten Modul-Titel-Stil darunter (statt isoliert linksbuendig). */
.nm-module-intro{text-align:center}
.nm-module-intro .nm-eyebrow{justify-content:center}

@media (prefers-reduced-motion: reduce){
  [data-nm-reveal],[data-nm-item]{opacity:1!important;animation:none!important;transform:none!important}
  .nm-section-rule::before{transform:scaleX(1)!important;animation:none!important}
  .nm-page .nm-btn:hover,.nm-page .nm-card-hover:hover,.nm-page .nm-shot:hover{transform:none!important}
  .nm-progress{display:none}
  .nm-parallax{transform:none!important}
}

/* Sanftes Scrollen fuer die Ankerlinks der Kopfzeile. Nur wenn der Nutzer
   Bewegung nicht abbestellt hat - sonst ist der Sprung das Richtige. */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
/* Bilder duerfen ihre Attribut-Masse nur zur Platzreservierung nutzen,
   dargestellt wird immer auf Containerbreite. */
.nm-shot img{display:block;width:100%;height:auto}

/* Der Kopfbereich gibt dem Produktbild etwas mehr Raum als dem Text - das
   Bild ist das Argument, der Text die Erklaerung. Unter 1024 px stapeln
   beide wie gehabt. */
@media (min-width:1024px){
  .nm-page .nm-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:64px;padding-top:76px;padding-bottom:64px}
}

/* Kennzahlen im Kopfbereich: die Beschriftungen sind unterschiedlich lang,
   eine bricht um. Ohne Mindesthoehe stehen die Zahlen dann auf verschiedenen
   Linien und die Reihe wirkt schief. */
.nm-page .nm-hero-kpis{align-items:start}
.nm-page .nm-hero-kpis .nm-kpi-label{min-height:2.6em;line-height:1.3}