) */
h1 em {
font-style: normal;
background: linear-gradient(120deg, var(--sky), var(--violet));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Gradient-Text generisch */
.nm-grad {
background: linear-gradient(120deg, var(--sky), var(--violet));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Gedämpfter Intro-/Subtext auf dunklem Grund (Navy-Bänder) */
.nm-on-navy-muted,
.nm-on-navy-muted .elementor-heading-title,
.nm-on-navy-muted p {
color: #aac3e8;
}
/* ===== 8) FAKTEN / HINWEIS-BOX ===== */
.nm-factbox {
background: var(--bg-alt);
border: 1px solid var(--line);
border-left: 4px solid var(--sky);
border-radius: 12px;
padding: 20px 22px;
}
.nm-factbox strong {
color: var(--navy);
}
.nm-factbox-violet {
border-left-color: var(--violet);
}
.nm-factlist p {
padding: 7px 0;
border-bottom: 1px dashed var(--line);
font-size: 0.9rem;
margin: 0;
}
.nm-factlist p:last-child {
border-bottom: none;
}
.nm-factlist strong {
color: var(--navy);
}
/* ===== 9) TRUST-LEISTE ===== */
.nm-trust img {
opacity: 0.85;
transition: opacity 0.15s;
}
.nm-trust img:hover {
opacity: 1;
}
/* Trust-Bar (Inline-Badge) */
.nm-trustbar {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-size: 0.85rem;
font-weight: 500;
color: var(--navy);
}
.nm-trustbar b {
color: #001860;
font-weight: 600;
}
/* ===== 10) WOOCOMMERCE ===== */
.e-loop-item,
.e-loop-item > .e-con {
height: 100%;
}
.e-loop-item .elementor-widget-woocommerce-product-add-to-cart {
margin-top: auto;
}
.e-loop-item:has(.woocommerce-Price-amount) > .e-con,
.e-loop-item:has(.woocommerce-Price-amount) > .e-con > .e-con-inner {
display: flex;
flex-direction: column;
height: 100%;
}
.e-loop-item:has(.woocommerce-Price-amount)
> .e-con
> .elementor-element:last-child,
.e-loop-item:has(.woocommerce-Price-amount)
> .e-con
> .e-con-inner
> .elementor-element:last-child {
margin-top: auto;
}
.e-loop-item:has(.woocommerce-Price-amount)
.elementor-widget-woocommerce-product-title {
min-height: 66px;
display: flex;
align-items: flex-start;
}
.e-loop-item .onsale,
.woocommerce span.onsale {
position: absolute;
top: 16px;
right: 16px;
left: auto;
bottom: auto;
z-index: 5;
margin: 0;
min-width: 0;
min-height: 0;
width: auto;
height: auto;
padding: 16px !important;
border-radius: 999px;
background: var(--violet);
color: #fff;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 0.82rem;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
text-shadow: none;
box-shadow: var(--shadow-badge);
}
.elementor-pagination,
.woocommerce-pagination {
margin-top: 48px;
}
/* ===== 11) TRENNER ===== */
.elementor-widget-divider.nm-divider .elementor-divider-separator {
border-block-start: 1px solid var(--line) !important;
}
.elementor-widget-divider.nm-divider .elementor-divider {
padding-block-start: 0 !important;
padding-block-end: 0 !important;
}
/* ===== 12) ICON-LISTE ===== */
.elementor-widget-icon-list.nm-iconlist .elementor-icon-list-icon i,
.elementor-widget-icon-list.nm-iconlist .elementor-icon-list-icon svg {
color: var(--sky);
fill: var(--sky);
font-size: 18px;
width: 18px;
height: 18px;
}
.nm-iconlist .elementor-icon-list-text {
color: var(--body);
font-size: 0.95rem;
line-height: 1.5;
min-width: 0;
overflow-wrap: anywhere;
}
.nm-iconlist .elementor-icon-list-item {
align-items: flex-start;
}
.nm-iconlist .elementor-icon-list-item:not(:last-child) {
margin-bottom: 10px;
}
/* Vorher-/Problem-Liste: X in gedämpftem Grau statt Sky */
.elementor-widget-icon-list.nm-iconlist.nm-iconlist-x
.elementor-icon-list-icon
i,
.elementor-widget-icon-list.nm-iconlist.nm-iconlist-x
.elementor-icon-list-icon
svg {
color: var(--body);
fill: var(--body);
}
/* ===== 13) HELFER ===== */
.nm-center {
text-align: center;
}
/* Element unten in der Flex-Karte verankern */
.nm-pin-bottom {
margin-top: auto;
}
/* Reihe mit gleich hohen Karten */
.nm-equal {
align-items: stretch;
}
.nm-equal > .e-con,
.nm-equal > .e-con > .e-con-inner,
.nm-equal > .e-con > .e-con-inner > .e-con {
height: 100%;
}
/* ===== 14) DISCLOSURE ===== */
.nm-disclosure {
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 20px 24px;
font-size: 0.82rem;
color: var(--body);
line-height: 1.6;
}
/* ===== 15) ABLAUF — PROZESS-SCHRITTE ===== */
.nm-steps {
position: relative;
}
/* Verlaufslinie auf der Row, hinter den Badges */
.nm-steps::after {
content: "";
position: absolute;
top: 47px;
left: 12.5%;
right: 12.5%;
height: 3px;
background: linear-gradient(90deg, var(--sky), var(--cyan));
border-radius: 2px;
transform: translateY(-50%);
z-index: 0;
}
@media (max-width: 767px) {
.nm-steps::after {
display: none;
}
}
/* Badge: gefüllter Sky-Kreis, weiße Zahl */
.nm-step-badge {
display: flex;
width: 54px;
min-height: 54px;
justify-content: center;
align-items: center;
margin: 0 auto;
border: 6px solid var(--e-global-color-6c7dd7d);
border-radius: 50%;
background-color: var(--e-global-color-secondary);
box-shadow: 0 6px 16px rgba(46, 163, 242, 0.3);
position: relative;
z-index: 1;
}
.nm-step-badge .elementor-widget-heading {
width: auto;
}
.nm-step-badge .elementor-heading-title {
color: #fff;
font-family: "Montserrat", sans-serif;
font-weight: 700;
line-height: 1;
margin: 0;
text-align: center;
}
/* alle Headings in den Steps zentriert (Titel, „2 Wochen") */
.nm-steps .nm-step .elementor-heading-title {
text-align: center;
}
/* ===== 16) GESAMT-/ERGEBNIS-BOX ===== */
.nm-summary {
position: relative;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: 22px 28px;
text-align: center;
color: var(--body);
overflow: hidden;
}
.nm-summary::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4px;
background: linear-gradient(180deg, var(--sky), var(--cyan));
}
.nm-summary strong {
color: var(--navy);
}
/* ===== 17) ROI-/ERGEBNIS-BAND (NAVY) ===== */
.nm-roi {
position: relative;
overflow: hidden;
background: var(--navy);
border-radius: var(--radius-lg);
padding: 40px 32px;
text-align: center;
color: #cdd9f2;
}
.nm-roi::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at 80% 15%,
rgba(46, 163, 242, 0.25),
transparent 55%
);
pointer-events: none;
}
.nm-roi > * {
position: relative;
z-index: 1;
}
/* ROI-Zahl als Heading */
.elementor-widget-heading.nm-roi-value .elementor-heading-title {
color: var(--cyan);
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: clamp(1.8rem, 4vw, 2.6rem);
line-height: 1.1;
}
.elementor-widget-heading.nm-roi-label .elementor-heading-title {
color: #cfe0f5;
}
/* ROI-Zahl als Elementor-Counter */
.nm-roi-counter .elementor-counter-number-wrapper {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
line-height: 1.1;
}
.nm-roi-counter .elementor-counter-number,
.nm-roi-counter .elementor-counter-number-prefix,
.nm-roi-counter .elementor-counter-number-suffix {
font-weight: 800;
background: linear-gradient(120deg, var(--cyan), var(--sky));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.nm-roi-counter .elementor-counter-title {
color: #cfe0f5;
font-size: 0.9rem;
margin-top: 4px;
}
/* Trennlinie + fette Teile im Band */
.nm-roi .elementor-divider-separator {
border-block-start: 1px solid rgba(255, 255, 255, 0.18) !important;
}
.nm-roi strong {
color: #fff;
}
/* ===== 18) FAQ — NESTED ACCORDION ===== */
/* Elementors eigene Title-Border/Radius stilllegen */
.nm-faq {
--n-accordion-border-width: 0px;
--n-accordion-border-radius: 0px;
}
/* Abstand zwischen den Items */
.nm-faq .e-n-accordion-item {
margin-bottom: 12px;
}
/* Kopfzeile: Layout (Icon rechts) + Border + Radius oben + Hintergrund (geschlossen = bg-alt) */
.nm-faq .e-n-accordion-item .e-n-accordion-item-title {
display: flex !important;
align-items: center;
justify-content: flex-start; /* nicht space-between */
border: 2px solid var(--line);
border-bottom-width: 0; /* keine Naht-Doppellinie */
border-radius: 20px 20px 0 0;
background: var(--bg-alt);
}
/* Kopfzeile-Titel (links) — füllt den Platz, drückt Icon nach rechts */
.nm-faq .e-n-accordion-item-title-text {
order: 1;
flex: 1 1 auto;
text-align: left;
font-family: "Inter", sans-serif;
font-weight: 600;
color: var(--navy);
}
/* +/- Icon (rechts), Farbe Sky */
.nm-faq .e-n-accordion-item-title-icon {
order: 2;
flex: 0 0 auto;
margin-left: 12px;
margin-right: 0;
color: var(--sky) !important;
}
.nm-faq .e-n-accordion-item-title-icon svg {
fill: var(--sky) !important;
width: 16px;
height: 16px;
}
/* Inhalt: Border 0/2/2/2 + Radius unten (0/0/20/20) */
.nm-faq .e-n-accordion-item > .e-con {
border: solid var(--line);
border-width: 0 2px 2px 2px;
border-radius: 0 0 20px 20px;
}
/* Antworttext = globaler Body-Stil, fett = Navy */
.nm-faq .e-n-accordion-item > .e-con,
.nm-faq .e-n-accordion-item > .e-con p {
color: var(--e-global-color-text);
font-family: var(--e-global-typography-text-font-family);
font-size: var(--e-global-typography-text-font-size);
font-weight: var(--e-global-typography-text-font-weight);
line-height: var(--e-global-typography-text-line-height);
}
.nm-faq .e-n-accordion-item > .e-con strong {
color: var(--navy);
}
/* geschlossene Items rundum schließen (volle Border + 20px) */
.nm-faq .e-n-accordion-item:not([open]) .e-n-accordion-item-title {
border-bottom-width: 2px;
border-radius: 20px;
}
/* geöffnet: Titel UND Inhalt weiß */
.nm-faq .e-n-accordion-item[open] .e-n-accordion-item-title,
.nm-faq .e-n-accordion-item[open] > .e-con {
background: var(--bg);
}
/* ===== 19) CASE-STUDY — KENNZAHLEN-BLOCK ===== */
.nm-case-nums,
.nm-case-nums p {
font-family: "JetBrains Mono", monospace;
font-size: 0.8rem;
color: var(--navy);
line-height: 1.9;
margin: 16px 0;
}
.nm-case-nums b {
color: var(--violet);
}
/* ===== 20) GRÜNDER-BLOCK & ZITAT-BOX ===== */
/* Check-Liste mit Sky-Häkchen */
.nm-checks {
list-style: none;
margin: 18px 0;
padding: 0;
}
.nm-checks li {
padding-left: 26px;
position: relative;
margin-bottom: 10px;
font-size: 0.95rem;
}
.nm-checks li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--sky);
font-weight: 700;
}
.nm-checks b {
color: var(--navy);
}
/* Zitat-Box — Basis: Cyan-Kante (Standard) */
.nm-quote {
border-left: 4px solid var(--cyan);
padding: 14px 20px;
background: var(--bg-soft);
border-radius: 10px 12px 12px 10px;
font-style: italic;
color: var(--navy);
font-weight: 600;
margin-top: 18px;
}
/* Modifier: Violet-Kante */
.nm-quote-violet {
border-left-color: var(--violet);
}
/* ===== 21) PARTNER-LOGO, PARTNER-LOOP & TRUST-CAROUSEL ===== */
/* Logo in der Karte — kein Schatten, einheitliche Höhe */
.nm-partner-logo {
height: 96px;
display: flex;
align-items: center;
}
.nm-partner-logo img {
max-height: 100%;
max-width: 140px;
object-fit: contain;
box-shadow: none;
}
/* Loop — gleich hohe Karten */
.nm-partner-loop .e-loop-item,
.nm-partner-loop .e-loop-item > .e-con,
.nm-partner-loop .e-loop-item > .e-con > .e-con-inner {
height: 100%;
}
/* Trust-Carousel — Logos größer als in den Partner-Karten */
.nm-trust-logo {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.nm-trust-logo img {
max-height: 80px !important;
height: 80px !important; /* erzwingt die Höhe */
width: auto !important;
max-width: 220px !important;
object-fit: contain;
box-shadow: none !important;
}
/* ===== 22) HERO-RIDGE ===== */
.nm-hero {
position: relative;
overflow: hidden;
}
.nm-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L240,46 L420,86 L680,18 L920,72 L1180,30 L1440,80 L1440,0 L0,0 Z' fill='%23ffffff' opacity='0.5'/%3E%3C/svg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
}
.nm-hero > * {
position: relative;
z-index: 1;
}
/* ===== 23) ANBIETER-VERGLEICH (nm-cmp) =====
Standard = .nm-cmp (Kriterium + 2 Anbieter)
3-Anbieter = .nm-cmp.nm-cmp-3 (Kriterium + 3 Anbieter)
------------------------------------------------------------ */
/* Scroll-Wrapper (horizontales Scrollen auf Mobil) */
.nm-cmp-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: none;
margin: 0;
}
/* Container */
.nm-cmp {
min-width: 640px;
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
background: #fff;
font-family: "Inter", system-ui, sans-serif;
}
/* Raster: Standard = Kriterium + 2 Anbieter */
.nm-cmp-head,
.nm-cmp-row {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
align-items: stretch;
}
/* 3-Anbieter-Variante: Kriterium + 3 Anbieter */
.nm-cmp.nm-cmp-3 {
min-width: 760px;
}
.nm-cmp-3 .nm-cmp-head,
.nm-cmp-3 .nm-cmp-row {
grid-template-columns: 1.05fr 1fr 1fr 1fr;
}
/* Kopfzeile */
.nm-cmp-head {
background: var(--bg-soft);
}
.nm-cmp-head .nm-cmp-col {
padding: 18px 20px;
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 1.1rem;
color: var(--navy);
}
.nm-cmp-head .nm-cmp-crit {
font-family: "JetBrains Mono", monospace;
font-weight: 500;
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--body);
}
/* Zeilen */
.nm-cmp-row {
border-top: 1px solid var(--line);
}
/* Kriterium-Spalte (links) */
.nm-cmp-crit {
padding: 16px 20px;
font-family: "JetBrains Mono", monospace;
font-weight: 500;
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--body);
display: flex;
align-items: center;
}
/* Daten-Zellen */
.nm-cmp-cell {
padding: 16px 20px;
font-size: 0.92rem;
color: var(--ink);
}
.nm-cmp-cell .sub {
display: block;
font-size: 0.8rem;
color: var(--body);
margin-top: 2px;
}
.nm-cmp-cell .note {
display: inline-block;
font-family: "JetBrains Mono", monospace;
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--violet);
margin-top: 4px;
}
/* Hervorgehobene Heim-Spalte (dezent) */
.nm-cmp-p {
background: rgba(46, 163, 242, 0.06);
}
/* Häkchen / Kreuz */
.nm-chk {
color: var(--sky);
font-weight: 700;
margin-right: 6px;
}
.nm-no {
color: #b91c1c;
font-weight: 700;
margin-right: 6px;
}
/* Fazit + NM-Box */
.nm-verdict {
max-width: none;
margin: 0;
}
.nm-verdict p {
font-size: 0.96rem;
color: var(--body);
}
.nm-verdict b {
color: var(--navy);
}
.nm-verdict-nm {
background: var(--bg-soft);
border-left: 3px solid var(--cyan);
padding: 14px 18px;
border-radius: 10px;
color: var(--ink);
}
/* Mobil */
@media (max-width: 640px) {
.nm-cmp-crit,
.nm-cmp-cell {
padding: 13px 14px;
font-size: 0.86rem;
}
.nm-cmp-head .nm-cmp-col {
padding: 14px;
}
.nm-cmp.nm-cmp-3 {
min-width: 680px;
}
}
/* ===== 24) SCHMERZPUNKTE — FOOT ===== */
.nm-pain-foot,
.nm-pain-foot .elementor-heading-title {
text-align: center;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 1.05rem;
color: var(--navy);
margin-top: 34px;
}
/* ===== 25) BERATER — PORTRAIT (4:5) ===== */
.nm-portrait img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center top; /* Gesicht oben halten, nicht abschneiden */
border-radius: var(--radius-lg);
box-shadow: var(--shadow-media);
}
/* ===== 26) BERATER — ROLLE / POSITIONIERUNG ===== */
.nm-role,
.nm-role .elementor-heading-title {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 1.05rem;
color: var(--sky-text);
margin-bottom: 18px;
}
/* ===== 27) VORHER / NACHHER ===== */
.nm-vn {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--line);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-card);
background: #fff;
}
.nm-vn-head {
padding: 18px 24px;
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 10px;
}
.nm-vn-before .nm-vn-head {
background: #eef1f5;
color: var(--body);
}
.nm-vn-after .nm-vn-head {
background: rgba(46, 163, 242, 0.1);
color: var(--navy);
}
.nm-vn-col {
display: flex;
flex-direction: column;
}
.nm-vn-after {
background: rgba(46, 163, 242, 0.05);
}
.nm-vn-before {
border-right: 1px solid var(--line);
}
.nm-vn-row {
padding: 16px 24px;
font-size: 0.94rem;
border-top: 1px solid var(--line);
min-height: 62px;
display: flex;
align-items: center;
gap: 10px;
}
.nm-vn-before .nm-vn-row {
color: var(--body);
}
.nm-vn-after .nm-vn-row {
color: var(--ink);
}
.nm-vn-row .mk {
flex-shrink: 0;
font-weight: 700;
}
.nm-vn-before .mk {
color: #94a3b8;
}
.nm-vn-after .mk {
color: var(--sky);
}
@media (max-width: 767px) {
.nm-vn {
grid-template-columns: 1fr;
}
.nm-vn-before {
border-right: none;
border-bottom: 2px solid var(--line);
}
}
.nm-vn-intro,
.nm-vn-intro .elementor-heading-title {
margin-top: 60px;
margin-bottom: 20px;
text-align: center;
font-family: "Montserrat", sans-serif;
font-weight: 700;
color: var(--navy);
}
/* ===== 28) TARIFE — Elementor Price Table (nur CI: Schrift/Farbe/Button) ===== */
/* Basis — alle Tarif-Karten (Rahmen, Radius, Hintergrund, saubere Ecken) */
.nm-tier .elementor-price-table {
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: #fff;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
/* Gleiche Breite + Höhe */
.nm-tier.elementor-widget-price-table {
flex: 1 1 0 !important;
align-self: stretch !important;
}
.nm-tier .elementor-price-table__footer {
margin-top: auto;
}
/* Header-Hintergrund transparent (kein grauer Balken) */
.nm-tier .elementor-price-table__header {
background-color: transparent !important;
background-image: none !important;
}
/* Titel wie H3 — Montserrat, Navy */
.nm-tier .elementor-price-table__heading {
font-family: "Montserrat", sans-serif !important;
font-weight: 700 !important;
font-size: 1.15rem !important;
color: var(--navy) !important;
}
.nm-tier .elementor-price-table__subheading {
color: var(--body) !important;
font-size: 0.92rem !important;
}
/* Preis — Schrift & Größe */
.nm-tier .elementor-price-table__integer-part {
font-family: "Montserrat", sans-serif;
font-weight: 800;
font-size: 2.6rem;
color: var(--ink);
}
.nm-tier .elementor-price-table__currency {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 1.1rem;
vertical-align: super;
color: var(--ink);
}
.nm-tier .elementor-price-table__after-price,
.nm-tier .elementor-price-table__period {
color: var(--body);
}
/* Häkchen — Sky */
.nm-tier .elementor-price-table__features-list li i,
.nm-tier .elementor-price-table__features-list li svg {
color: var(--sky);
fill: var(--sky);
}
/* "ab"-Präfix (nur Karten mit .nm-price-ab) */
.nm-price-ab .elementor-price-table__integer-part::before {
content: "ab ";
font-size: 0.34em;
font-weight: 700;
vertical-align: super;
letter-spacing: 0.03em;
margin-right: 0.12em;
}
/* HERVORGEHOBENE KARTE (Beliebteste) */
/* Border + Schatten beide aufs Widget (außen, kein overflow → sauber) */
.nm-tier-feat.elementor-widget-price-table {
border: 3px solid var(--violet) !important;
border-radius: var(--radius-md) !important;
box-shadow: 0 18px 50px rgba(186, 104, 253, 0.22) !important;
}
/* innere Tabelle: KEIN Border, nur Radius + overflow fürs Ribbon */
.nm-tier-feat .elementor-price-table {
border: none !important;
border-radius: calc(var(--radius-md) - 2px) !important;
overflow: hidden;
}
/* Ribbon in CI-Violet */
.nm-tier-feat .elementor-ribbon-inner {
background-color: var(--violet) !important;
background-image: none !important;
color: #fff !important;
font-family: "JetBrains Mono", monospace;
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Violet-Button in der hervorgehobenen Karte */
.nm-tier-feat .elementor-price-table__button {
background-color: var(--violet);
color: #fff;
border: none;
box-shadow: var(--shadow-btn);
}
.nm-tier-feat .elementor-price-table__button:hover {
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(186, 104, 253, 0.5);
}
/* ===== 29) HELFER — FOR-WHOM / BILD-SCHATTEN AUS ===== */
.nm-for-whom {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0;
color: #1273b8; /* Sky-Text, Link-/Label-sicher */
margin-bottom: 10px;
}
/* Bild-Schatten gezielt entfernen */
.nm-no-shadow img,
.nm-no-shadow.elementor-widget-image img {
box-shadow: none !important;
}
/* ===== 30) KI-KENNZEICHNUNG (Art. 50 EU AI Act) — oben rechts (EU-Empfehlung) =====
Anker = das Bild-WIDGET selbst. Bei diesem Elementor-Markup liegt das ![]()
direkt im Widget-div (KEIN .elementor-widget-container), darum hängt das
Badge am Widget. display:inline-block lässt das Widget auf die Bildgröße
schrumpfen, damit das Badge exakt an der oberen rechten Bildecke klebt.
------------------------------------------------------------
Anwendung (Widget → Erweitert → CSS-Klassen):
nm-card-media nm-ai → Card-Bild, 16px, "AI GENERATED"
nm-photo nm-ai → Hero/Case, 18px, "AI GENERATED"
nm-portrait nm-ai → Portrait, 20px, "AI GENERATED"
nm-portrait nm-ai nm-ai-modified → Portrait, "AI MODIFIED" (grau)
Hinweis: nm-ai ist Pflicht (erzeugt das Badge); nm-ai-modified ist nur
die Text-/Farbvariante.
------------------------------------------------------------ */
/* Anker */
.elementor-widget-image.nm-ai {
position: relative;
display: inline-block; /* Widget schrumpft auf Bildbreite → Badge sitzt an der Bildkante */
max-width: 100%;
line-height: 0; /* kein Descender-Spalt unter dem Bild */
}
/* Badge */
.elementor-widget-image.nm-ai::after {
content: "AI GENERATED";
position: absolute;
top: 0;
right: 0;
z-index: 5;
font-family: "JetBrains Mono", monospace;
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 1;
color: #fff;
background: rgba(0, 24, 96, 0.78); /* Navy, halbtransparent */
backdrop-filter: blur(4px);
padding: 4px 9px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 0 var(--nm-ai-r, var(--radius-md)) 0 8px; /* oben-rechts = Bild-Radius */
pointer-events: none;
}
/* Text-Variante: AI MODIFIED (grau) */
.elementor-widget-image.nm-ai-modified::after {
content: "AI MODIFIED";
background: rgba(71, 85, 105, 0.8); /* Slate zur Abgrenzung */
}
/* Radius-Overrides je Bildtyp */
.elementor-widget-image.nm-photo.nm-ai {
--nm-ai-r: 18px;
}
.elementor-widget-image.nm-portrait.nm-ai {
--nm-ai-r: var(--radius-lg);
}
.elementor-widget-image.nm-radius-lg.nm-ai {
--nm-ai-r: var(--radius-lg);
}
/* ===== 31) BREADCRUMB (nm-breadcrumb) =====
Markup:
Varianten: .nm-breadcrumb-dark → Navy-Hero (Standard in den Mockups)
.nm-breadcrumb-light → heller Hintergrund
Elementor Global Colors mit Hex-Fallback:
bfb38a1 = #9FD0FB (Link hell/Sky) · aa74370 = Hover/aktiv
------------------------------------------------------------ */
/* Basis */
.nm-breadcrumb {
font-size: 0.84rem;
}
.nm-breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
margin: 0;
padding: 0;
}
.nm-breadcrumb li {
display: flex;
align-items: center;
}
.nm-breadcrumb li + li::before {
content: "›";
margin: 0 8px;
opacity: 0.6;
font-weight: 600;
}
.nm-breadcrumb a {
text-decoration: none;
transition: color 0.15s;
}
.nm-breadcrumb a:hover {
text-decoration: underline;
}
.nm-breadcrumb [aria-current="page"] {
font-weight: 600;
}
.nm-breadcrumb :focus-visible {
outline: 3px solid var(--violet);
outline-offset: 3px;
border-radius: 4px;
}
/* Dunkle Variante — Navy-Hero */
.nm-breadcrumb-dark a {
color: var(--e-global-color-bfb38a1, #9fd0fb);
}
.nm-breadcrumb-dark a:hover {
color: var(--e-global-color-aa74370, #ffffff);
}
.nm-breadcrumb-dark li + li::before {
color: var(--e-global-color-bfb38a1, #9fd0fb);
}
.nm-breadcrumb-dark [aria-current="page"] {
color: var(--e-global-color-aa74370, #ffffff);
}
/* Helle Variante — heller Hintergrund */
.nm-breadcrumb-light a {
color: var(--sky-text);
}
.nm-breadcrumb-light a:hover {
color: var(--violet);
}
.nm-breadcrumb-light li + li::before {
color: var(--body);
}
.nm-breadcrumb-light [aria-current="page"] {
color: var(--navy);
}
/* --- Rank Math Breadcrumb (Elementor "Breadcrumbs"-Widget) ---
Widget bekommt Klasse nm-breadcrumb + nm-breadcrumb-dark/-light.
Ersetzt den " | "-Trenner durch "›" und setzt die Farben. */
.nm-breadcrumb .rank-math-breadcrumb p {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 0.84rem;
}
.nm-breadcrumb .rank-math-breadcrumb a {
text-decoration: none;
transition: color 0.15s;
}
.nm-breadcrumb .rank-math-breadcrumb a:hover {
text-decoration: underline;
}
.nm-breadcrumb .rank-math-breadcrumb .last {
font-weight: 600;
}
/* Trenner | -> › (Original-Text ausblenden, Zeichen per ::after) */
.nm-breadcrumb .rank-math-breadcrumb .separator {
font-size: 0;
margin: 0 8px;
}
.nm-breadcrumb .rank-math-breadcrumb .separator::after {
content: "›";
font-size: 0.84rem;
font-weight: 600;
opacity: 0.6;
}
/* Farben — dunkel (Navy-Hero) */
.nm-breadcrumb-dark .rank-math-breadcrumb a {
color: var(--e-global-color-bfb38a1, #9fd0fb);
}
.nm-breadcrumb-dark .rank-math-breadcrumb a:hover {
color: var(--e-global-color-aa74370, #ffffff);
}
.nm-breadcrumb-dark .rank-math-breadcrumb .separator::after {
color: var(--e-global-color-bfb38a1, #9fd0fb);
}
.nm-breadcrumb-dark .rank-math-breadcrumb .last {
color: var(--e-global-color-aa74370, #ffffff);
}
/* Farben — hell */
.nm-breadcrumb-light .rank-math-breadcrumb a {
color: var(--sky-text);
}
.nm-breadcrumb-light .rank-math-breadcrumb a:hover {
color: var(--violet);
}
.nm-breadcrumb-light .rank-math-breadcrumb .separator::after {
color: var(--body);
}
.nm-breadcrumb-light .rank-math-breadcrumb .last {
color: var(--navy);
}
/* Rechtsbündig (Rank Math nutzt als Flex-Zeile) */
.nm-breadcrumb-right .rank-math-breadcrumb p {
justify-content: flex-end;
text-align: right;
}
.nm-breadcrumb-right ol {
justify-content: flex-end;
} /* falls eigenes nm-breadcrumb-Markup */
/* Schwebende Breadcrumb, bündig zur Content-Kante (= H1-Kante).
HINWEIS: Bezugspunkt für 'left' ist der volle Hero-.e-con (position:relative).
(100% - content-max)/2 trifft exakt die linke Kante von .e-con-inner,
in dem auch die H1 sitzt → KEIN zusätzliches +24px (das schob 24px zu weit rein).
Auf schmalen Screens greift der 24px-Floor.
ALTERNATIVE (wartbarer): Klasse 'nm-breadcrumb-abs' am Widget weglassen —
die Breadcrumb fließt dann als erstes Element in .e-con-inner automatisch
bündig über der H1, ganz ohne absolute Positionierung/calc(). */
.elementor-widget.nm-breadcrumb-abs {
position: absolute !important;
top: 20px;
left: max(24px, calc((100% - var(--content-max)) / 2));
right: auto;
z-index: 2;
width: auto !important;
}
/* ===== 32) HERO-LEAD / SUBTITLE unter H1 =====
Anwendung (Widget → Erweitert → CSS-Klassen):
nm-lead → Standard (heller Hintergrund)
nm-lead nm-lead-navy → auf Navy-Hero (heller Text)
nm-lead nm-lead-center → zentriert
Wirkt auf Text-Editor (p) UND Überschrift-Widget (.elementor-heading-title)
------------------------------------------------------------ */
.nm-lead,
.nm-lead p,
.nm-lead .elementor-heading-title {
font-family: "Inter", system-ui, sans-serif;
font-size: clamp(1.05rem, 1.4vw, 1.18rem);
font-weight: 400;
line-height: 1.65;
color: var(--body);
max-width: 60ch; /* angenehme Lesebreite */
margin-top: 14px;
}
.nm-lead-center,
.nm-lead-center p,
.nm-lead-center .elementor-heading-title {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.nm-lead-navy,
.nm-lead-navy p,
.nm-lead-navy .elementor-heading-title {
color: #cfe0f5;
}
/* ===== 33) FEATURED-BEITRAG (nm-feature) — Elementor Loop =====
Zweispaltige „hervorgehobener Beitrag"-Karte für den Loop Grid
(Query: Sticky/Neuester, 1 Beitrag). Klassen an die Container/Widgets:
Äußerer Container ........ nm-feature
Bild-Container/-Widget ... nm-feature-img
Text-Container ........... nm-feature-body
Tag-/Kategorie-Label ..... nm-feature-tag
Titel-Überschrift ........ nm-feature-title
Auszug-Text .............. nm-feature-text
Meta-Zeile (Autor·Datum) . nm-feature-meta
"Beitrag lesen"-Link ..... nm-feature-link
------------------------------------------------------------ */
/* Rahmen-Karte (Border/Radius/Schatten bleiben aussen) */
.nm-feature {
padding: 0 !important;
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden; /* rundet Bildecken sauber */
background: #fff;
box-shadow: var(--shadow-card);
}
/* Zwei-Spalten-Raster — ohne :has(), über Elementor-Klassen
Boxed-Container -> Raster auf .e-con-inner
Full-Container -> Raster auf .nm-feature selbst */
.nm-feature.e-con-boxed > .e-con-inner,
.nm-feature.e-con-full {
display: grid !important;
grid-template-columns: 1.15fr 1fr;
gap: 0 !important;
align-items: stretch; /* Bildspalte = Höhe der Textspalte */
padding: 0 !important;
width: 100%;
}
@media (max-width: 980px) {
.nm-feature.e-con-boxed > .e-con-inner,
.nm-feature.e-con-full {
grid-template-columns: 1fr;
}
}
/* Bildseite — funktioniert mit Bild-Widget ODER Container-Hintergrundbild */
.nm-feature-img {
position: relative;
min-height: 280px;
overflow: hidden;
padding: 0 !important;
background: linear-gradient(135deg, var(--navy), var(--sky));
}
.nm-feature-img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Fotos: randlos füllen */
box-shadow: none !important;
}
/* Modifier für Logos/Grafiken: komplett zeigen statt beschneiden */
.nm-feature-img-contain img {
object-fit: contain !important;
padding: 36px;
}
@media (max-width: 980px) {
.nm-feature-img {
min-height: 200px;
}
}
/* Textseite */
.nm-feature-body {
padding: 34px 38px !important;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
}
/* Tag / Kategorie-Label */
.nm-feature-tag,
.nm-feature-tag .elementor-heading-title {
display: inline-block;
width: max-content;
background: rgba(46, 163, 242, 0.12);
color: var(--sky-text);
border: 1px solid rgba(46, 163, 242, 0.28);
padding: 5px 12px;
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 0.74rem;
}
/* Titel */
.nm-feature-title .elementor-heading-title,
.nm-feature-body h2 {
font-family: "Montserrat", sans-serif;
font-size: 1.5rem;
font-weight: 800;
color: var(--navy);
line-height: 1.2;
margin: 0;
}
.nm-feature-title a {
color: var(--navy);
text-decoration: none;
}
.nm-feature-title a:hover {
color: var(--sky-text);
}
/* Auszug */
.nm-feature-text,
.nm-feature-text p,
.nm-feature-body p {
font-size: 0.96rem;
color: var(--body);
margin: 0;
}
/* Meta-Zeile */
.nm-feature-meta,
.nm-feature-meta .elementor-heading-title {
display: flex;
gap: 14px;
align-items: center;
color: #64748b;
font-size: 0.84rem;
}
/* "Beitrag lesen"-Link */
.nm-feature-link a,
a.nm-feature-link {
font-family: "Montserrat", sans-serif;
font-weight: 700;
color: var(--sky-text);
text-decoration: none;
font-size: 0.92rem;
width: max-content;
}
.nm-feature-link a:hover,
a.nm-feature-link:hover {
color: var(--violet);
}
/* ===== 34) KATEGORIE-NAVIGATION SIDEBAR (nm-catnav) =====
Ausgabe des Shortcodes [nmit_category_nav].
Vertikale Themen-Liste mit Zähler + aktivem Zustand.
------------------------------------------------------------ */
.nm-catnav {
display: flex;
flex-direction: column;
gap: 2px;
}
.nm-catnav-link {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 8px;
color: var(--body);
text-decoration: none;
font-size: 0.92rem;
transition:
background 0.15s,
color 0.15s;
}
.nm-catnav-link:hover {
background: var(--bg-alt);
color: var(--navy);
}
.nm-catnav-link.active {
background: var(--bg-soft);
color: var(--navy);
font-weight: 600;
}
.nm-catnav-cnt {
flex: 0 0 auto;
font-size: 0.78rem;
color: #64748b;
}
/* ===== 35) BLOG-SUCHE (nm-search) =====
Ausgabe des Shortcodes [nmit_blog_search].
form.nm-search + !important, um Theme-/Elementor-Button-Defaults
(Violet, runde Ecken, Umbruch) sicher zu überschreiben.
------------------------------------------------------------ */
form.nm-search {
display: flex !important;
flex-wrap: nowrap; /* Button bleibt neben dem Feld */
align-items: stretch;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: #fff;
}
form.nm-search .nm-search-input {
flex: 1 1 auto;
min-width: 0;
margin: 0;
border: none;
background: transparent;
padding: 11px 14px;
font-family: "Inter", system-ui, sans-serif;
font-size: 0.9rem;
color: var(--navy);
outline: none;
box-shadow: none;
}
form.nm-search .nm-search-input::placeholder {
color: #94a3b8;
}
form.nm-search .nm-search-btn {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
margin: 0 !important;
border: none !important;
border-radius: 0 !important; /* keine runden Ecken vom Theme */
background: var(--navy) !important; /* statt globalem Violet */
color: #fff !important;
padding: 0 16px !important;
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
box-shadow: none !important;
transform: none !important;
transition: background 0.15s;
}
form.nm-search .nm-search-btn:hover {
background: #0a2a8a !important;
}
/* Lupe: Griff nach unten-rechts drehen */
form.nm-search .nm-search-ico {
display: inline-block;
transform: rotate(45deg);
}
form.nm-search :focus-visible {
outline: 3px solid var(--violet);
outline-offset: -3px;
}
/* ===== 36) SORTLEISTE + SELECT (nm-sortbar / nm-select) =====
nm-sortbar = Zeile (Anzahl links, Select rechts) — optional
nm-select = Styling des [nmit_sort_select]-Dropdowns
------------------------------------------------------------ */
.nm-sortbar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 22px;
}
.nm-sortbar .nm-sortbar-count {
font-size: 0.88rem;
color: #64748b;
}
/* Select — eigenes Chevron statt System-Pfeil */
select.nm-select {
font-family: "Inter", system-ui, sans-serif;
font-size: 0.88rem;
color: var(--navy);
padding: 9px 38px 9px 14px;
border: 1px solid var(--line);
border-radius: 9px;
background-color: #fff;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23001860' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
}
select.nm-select:hover {
border-color: var(--sky);
}
select.nm-select:focus-visible {
outline: 3px solid var(--violet);
outline-offset: 2px;
}
/* ===== Kontakt-Zeilen (nm-contact) ===== */
.nm-contact{display:flex;flex-direction:column;gap:14px}
.nm-contact a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.98rem}
.nm-contact a:hover{color:var(--sky-text)}
.nm-contact .ai{width:44px;height:44px;border-radius:11px;background:var(--bg-soft);
display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;color:var(--sky)}
.nm-contact small{display:block;font-weight:400;color:var(--body);font-size:.84rem}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-display: auto;
src: url('https://newmountains.it/wp-content/uploads/2026/06/montserrat-v31-latin-600.woff2') format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: auto;
src: url('https://newmountains.it/wp-content/uploads/2026/06/montserrat-v31-latin-700.woff2') format('woff2');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-display: auto;
src: url('https://newmountains.it/wp-content/uploads/2026/06/montserrat-v31-latin-800.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: auto;
src: url('https://newmountains.it/wp-content/uploads/2026/06/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: auto;
src: url('https://newmountains.it/wp-content/uploads/2026/06/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: auto;
src: url('https://newmountains.it/wp-content/uploads/2026/06/inter-v20-latin-600.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: auto;
src: url('https://newmountains.it/wp-content/uploads/2026/06/jetbrains-mono-v24-latin-500.woff2') format('woff2');
}
/* End Custom Fonts CSS */