/* ============================================================
NC Local Pages – Frontend (feste Landingpage-Struktur)
Ab v2.0.0. Gescopt unter .nclp-lp. Farben = CSS-Variablen aus
dem Backend-Theme (NCLP_Settings). Schriften erben bewusst vom
aktiven Theme (KEINE Google Fonts): font-family:inherit überall.
Animationen nur über transform/opacity, prefers-reduced-motion
wird respektiert.
============================================================ */
/* Full-Bleed: LP spannt über die volle Viewport-Breite, egal in
welchem Theme-Content-Container sie steckt. */
.nclp-lp {
/* Bewusst spaeter auf 100dvw korrigiert: 100vw schliesst die vertikale
Scrollbar mit ein und erzeugt auf Desktop-Windows horizontalen
Seiten-Scroll. */
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
font-family: inherit;
/* Wie die Schriftart wird jetzt auch die GROESSE geerbt: 1em ist das, was
das Theme fuer den Fliesstext vorgibt. Alle Kindelemente rechnen relativ
dazu. Vorher standen hier feste Pixelwerte, ausgelegt auf eine 16px-Basis
- auf einem Theme mit groesserem Fliesstext (northern-concepts.de: 24px)
wirkte die Landingpage dadurch spuerbar kleiner als der Rest der Seite. */
font-size: calc(1em * var(--nclp-font-scale, 1));
color: var(--nclp-text);
background: var(--nclp-bg);
line-height: 1.6;
overflow-x: hidden;
}
@supports (width: 100dvw) {
.nclp-lp {
width: 100dvw;
max-width: 100dvw;
margin-left: calc(50% - 50dvw);
margin-right: calc(50% - 50dvw);
}
}
.nclp-lp *, .nclp-lp *::before, .nclp-lp *::after { box-sizing: border-box; }
.nclp-lp h1, .nclp-lp h2, .nclp-lp h3 { font-family: inherit; }
.nclp-lp :focus-visible {
outline: 3px solid var(--nclp-accent);
outline-offset: 3px;
border-radius: 4px;
}
/* ── Reveal-Animationen ── */
/* Progressive Enhancement: Inhalt ist sichtbar, solange das Skript ihn nicht
ausdruecklich fuer eine Animation vormerkt (.nclp-anim). Ohne JS - oder bei
verzoegertem JS, z. B. WP Rocket "Delay JavaScript execution" - bleibt die
Seite damit vollstaendig lesbar. Vorher war der Inhalt per opacity:0
unsichtbar und wurde erst durch den IntersectionObserver eingeblendet. */
.nclp-reveal { transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.nclp-reveal.nclp-anim:not(.nclp-in) { opacity: 0; transform: translateY(26px); }
.nclp-reveal.nclp-in { opacity: 1; transform: none; }
.nclp-reveal-stagger > * { transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); }
.nclp-reveal-stagger.nclp-anim:not(.nclp-in) > * { opacity: 0; transform: translateY(20px); }
.nclp-reveal-stagger.nclp-in > *:nth-child(1){opacity:1;transform:none;transition-delay:.05s}
.nclp-reveal-stagger.nclp-in > *:nth-child(2){opacity:1;transform:none;transition-delay:.12s}
.nclp-reveal-stagger.nclp-in > *:nth-child(3){opacity:1;transform:none;transition-delay:.19s}
.nclp-reveal-stagger.nclp-in > *:nth-child(4){opacity:1;transform:none;transition-delay:.26s}
.nclp-reveal-stagger.nclp-in > *:nth-child(5){opacity:1;transform:none;transition-delay:.33s}
.nclp-reveal-stagger.nclp-in > *:nth-child(6){opacity:1;transform:none;transition-delay:.40s}
@media (prefers-reduced-motion: reduce) {
.nclp-lp *, .nclp-lp *::before, .nclp-lp *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
.nclp-reveal, .nclp-reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}
/* ── Buttons (≥44px Touch-Target) ── */
.nclp-btn,
.nclp-btn:visited {
color: var(--nclp-btn-text) !important;
}
.nclp-btn:hover, .nclp-btn:focus, .nclp-btn:active {
color: var(--nclp-btn-text-hover) !important;
}
.nclp-btn {
display: inline-flex; align-items: center; min-height: 44px;
background: var(--nclp-accent);
padding: 12px 22px; border-radius: var(--nclp-radius-btn);
font-weight: 600; font-size: 0.94em; text-decoration: none; border: none; cursor: pointer;
transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, opacity .2s;
}
.nclp-btn:hover { opacity: .92; transform: translateY(-2px); box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--nclp-accent) 50%, transparent); }
.nclp-btn--lg { padding: 15px 34px; font-size: 1em; }
.nclp-btn--xl { padding: 17px 42px; font-size: 1em; }
/* ── Sektionen ── */
.nclp-section { padding: 88px 5vw; border-top: 1px solid var(--nclp-border); }
.nclp-section--dark { background: var(--nclp-bg); }
.nclp-section--medium { background: var(--nclp-bg-section); }
.nclp-section--light { background: var(--nclp-bg-light); border-top: 1px solid var(--nclp-border-light); }
.nclp-inner { max-width: 1100px; margin: 0 auto; }
.nclp-inner--narrow { max-width: 760px; margin: 0 auto; }
.nclp-h1 { font-size: calc(clamp(2rem,5.5vw,3.75rem) * var(--nclp-font-scale, 1)); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--nclp-heading); margin: 0 0 22px; }
.nclp-h2 { font-size: calc(clamp(1.5rem,3.4vw,2.375rem) * var(--nclp-font-scale, 1)); font-weight: 700; color: var(--nclp-heading); letter-spacing: -.02em; line-height: 1.2; margin: 0 0 44px; text-align: center; }
.nclp-h2--light { color: var(--nclp-text-light); }
.nclp-h2-left { font-size: calc(clamp(1.625rem,3.4vw,2.5rem) * var(--nclp-font-scale, 1)); font-weight: 700; color: var(--nclp-heading); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 22px; }
.nclp-lead { font-size: clamp(1em,2vw,1.25em); color: var(--nclp-text-muted); line-height: 1.7; margin: 0 auto 36px; max-width: 600px; }
.nclp-body-text { font-size: 1em; color: var(--nclp-text-muted); line-height: 1.8; }
/* ── Hero ── */
.nclp-hero { position: relative; padding: 96px 5vw 80px; text-align: center; overflow: hidden; background: var(--nclp-bg); }
.nclp-hero__grad { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% -10%, color-mix(in srgb, var(--nclp-accent) 14%, transparent) 0%, transparent 70%); }
.nclp-hero__inner { max-width: 800px; margin: 0 auto; position: relative; }
.nclp-hero__logo-wrap { margin: 0 0 28px; }
.nclp-hero__logo { max-height: 64px; width: auto; display: inline-block; }
.nclp-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--nclp-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--nclp-accent) 30%, transparent); color: var(--nclp-accent-muted); padding: 6px 16px; border-radius: 100px; font-size: 0.82em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 26px; }
.nclp-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--nclp-accent); display: inline-block; }
.nclp-accent { color: var(--nclp-accent-muted); }
.nclp-hero__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.nclp-cta-sub { color: var(--nclp-text-muted); font-size: 0.82em; }
.nclp-hero-badge { margin: 0; display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 10px 18px; border-radius: 100px; background: color-mix(in srgb, var(--nclp-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--nclp-accent) 20%, transparent); }
.nclp-hero-badge__stars { color: var(--nclp-accent-muted); font-size: 0.82em; letter-spacing: 1px; }
.nclp-hero-badge__text { font-size: 0.82em; color: var(--nclp-text-muted); }
.nclp-stats { display: flex; gap: clamp(24px,5vw,64px); justify-content: center; margin: 46px 0 0; padding-top: 38px; border-top: 1px solid var(--nclp-border); flex-wrap: wrap; }
/* column-reverse: im Markup steht (Label) vor (Wert), weil eine
Definitionsliste nur so vorgelesen werden kann. Angezeigt wird der Wert
trotzdem oben. */
.nclp-stat { text-align: center; display: flex; flex-direction: column-reverse; }
.nclp-stat__value { font-size: calc(clamp(1.75rem,4vw,2.5rem) * var(--nclp-font-scale, 1)); font-weight: 800; color: var(--nclp-accent); line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.nclp-stat__label { font-size: 0.82em; color: var(--nclp-text-muted); margin-top: 6px; }
/* ── Problem-Karten ── */
/*
* Listenpunkte der Struktur-Listen abschalten - und zwar auf dem , nicht
* nur auf dem .
*
* Das NC-Theme enthaelt eine nackte Regel `li { list-style: outside }`.
* `outside` ist die Kurzform: sie setzt list-style-TYPE stillschweigend auf
* den Ausgangswert `disc` zurueck - direkt auf dem - . Die Angabe
* `list-style: none` der Container unten wirkt aber nur ueber Vererbung, und
* Vererbung verliert immer gegen eine direkt gesetzte Deklaration. Ergebnis
* waren Aufzaehlungspunkte links neben den Karten (list-style-position:
* outside bei padding-left: 0 setzt sie ausserhalb ab).
*
* Betroffen waren nur die Listen, deren
- auf `display: list-item` steht.
* .nclp-area-chip und .nclp-step entgingen dem zufaellig, weil sie selbst
* `display: flex` setzen - kein Flex-Element erzeugt einen Marker. Sie stehen
* hier trotzdem mit drin, damit die Regel nicht davon abhaengt.
*
* Bewusst auf die eigenen Struktur-Klassen begrenzt: Echte Aufzaehlungen im
* Fliesstext oder in FAQ-Antworten sollen ihre Punkte behalten.
*/
.nclp-lp .nclp-card-grid > li,
.nclp-lp .nclp-features-grid > li,
.nclp-lp .nclp-testimonial-grid > li,
.nclp-lp .nclp-area-chips > li,
.nclp-lp .nclp-steps > li,
.nclp-hub .nclp-hub-list > li {
list-style: none;
}
.nclp-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.nclp-problem-card { position: relative; background: var(--nclp-bg-card); border: 1px solid var(--nclp-border); border-radius: var(--nclp-radius-card); padding: 32px 28px; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.nclp-problem-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); }
.nclp-problem-card__text { color: var(--nclp-text-muted); line-height: 1.75; font-size: 0.94em; margin: 0; }
.nclp-icon-wrap { width: 50px; height: 50px; border-radius: 13px; margin-bottom: 18px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--nclp-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--nclp-accent) 20%, transparent); color: var(--nclp-accent); }
/* ── Solution / Lokal zweispaltig ── */
.nclp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,80px); align-items: center; }
.nclp-solution-label { font-size: 0.75em; color: var(--nclp-accent-muted); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 14px; }
.nclp-solution__img { width: 100%; height: auto; border-radius: var(--nclp-radius-card); display: block; border: 1px solid var(--nclp-border); }
/* ── Lokal-Kontext ── */
.nclp-local__text { text-align: center; }
.nclp-area-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 26px 0 0; padding: 0; }
.nclp-area-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 100px; background: color-mix(in srgb, var(--nclp-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--nclp-accent) 22%, transparent); color: var(--nclp-text); font-size: 0.88em; }
.nclp-area-chip__pin { display: inline-flex; color: var(--nclp-accent-muted); }
.nclp-area-chip__pin svg { width: 16px; height: 16px; }
/* ── So läuft's (Steps) ── */
.nclp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 24px; }
.nclp-step { display: flex; gap: 16px; align-items: flex-start; }
.nclp-step__num { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #000; background: var(--nclp-accent); }
.nclp-step__title { font-size: 1.06em; font-weight: 700; color: var(--nclp-heading); margin: 4px 0 6px; }
.nclp-step__text { font-size: 0.88em; color: var(--nclp-text-muted); line-height: 1.7; margin: 0; }
/* ── Features ── */
.nclp-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 2px; background: var(--nclp-border); border-radius: var(--nclp-radius-card); overflow: hidden; list-style: none; margin: 0; padding: 0; }
.nclp-feature-card { background: var(--nclp-bg-card); padding: 34px 30px; transition: background .25s; }
.nclp-feature-card:hover { background: color-mix(in srgb, var(--nclp-accent) 5%, var(--nclp-bg-card)); }
.nclp-feature-card__title { font-size: 1.06em; font-weight: 700; color: var(--nclp-heading); margin: 0 0 8px; }
.nclp-feature-card__text { font-size: 0.88em; color: var(--nclp-text-muted); line-height: 1.7; margin: 0; }
/* ── Testimonials (heller Bereich) ── */
.nclp-testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.nclp-testimonial-card { position: relative; background: var(--nclp-bg-light-card); border: 1px solid var(--nclp-border-light); border-radius: var(--nclp-radius-card); padding: 30px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.nclp-testimonial-card::before { content:''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--nclp-accent); }
.nclp-testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px -8px rgba(0,0,0,.12); }
.nclp-testimonial-card__stars { display: flex; gap: 3px; color: var(--nclp-accent-muted); font-size: 0.88em; }
.nclp-testimonial-card__quote { color: var(--nclp-text-light); line-height: 1.75; font-size: 0.94em; font-style: italic; margin: 0; flex: 1; border: 0; padding: 0; }
.nclp-testimonial-card__author { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--nclp-border-light); }
.nclp-avatar { width: 2.75em; height: 2.75em; min-width: 2.75em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.94em; color: var(--nclp-accent-muted); background: color-mix(in srgb, var(--nclp-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--nclp-accent) 25%, transparent); }
.nclp-author-name { display: block; font-weight: 600; color: var(--nclp-text-light); font-size: 0.88em; }
.nclp-author-role { display: block; color: var(--nclp-text-muted-light); font-size: 0.75em; }
.nclp-author-company { display: block; color: var(--nclp-text-muted-light); font-size: 0.7em; margin-top: 1px; }
/* ── FAQ (natives details/summary, voll crawlbar) ── */
.nclp-faq { display: flex; flex-direction: column; gap: 8px; }
.nclp-faq-item { background: var(--nclp-bg-card); border: 1px solid var(--nclp-border); border-radius: var(--nclp-radius-card); overflow: hidden; }
.nclp-faq-item[open] { border-color: color-mix(in srgb, var(--nclp-accent) 40%, transparent); }
.nclp-faq-q { list-style: none; cursor: pointer; padding: 16px 22px; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; font-size: 0.94em; color: var(--nclp-heading); }
.nclp-faq-q::-webkit-details-marker { display: none; }
.nclp-faq-ico { color: var(--nclp-accent-muted); font-size: 1.4em; font-weight: 300; flex-shrink: 0; transition: transform .25s; }
.nclp-faq-item[open] .nclp-faq-ico { transform: rotate(45deg); }
.nclp-faq-a { padding: 0 22px 18px; font-size: 0.88em; color: var(--nclp-text-muted); line-height: 1.8; }
.nclp-faq-a p { margin: 0 0 8px; }
/* ── Abschluss-CTA + Autor ── */
.nclp-cta-section { position: relative; background: var(--nclp-bg); padding: 110px 5vw 120px; border-top: 1px solid var(--nclp-border); overflow: hidden; }
.nclp-cta-glow { position: absolute; bottom: -200px; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--nclp-accent) 14%, transparent) 0%, transparent 70%); }
.nclp-author-cta { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px,5vw,72px); align-items: center; max-width: 900px; margin: 0 auto; position: relative; }
.nclp-author-photo { width: clamp(140px,20vw,190px); height: clamp(140px,20vw,190px); border-radius: 50%; object-fit: cover; border: 3px solid color-mix(in srgb, var(--nclp-accent) 40%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--nclp-accent) 10%, transparent); }
.nclp-cta-h2 { font-size: calc(clamp(1.875rem,4.5vw,3.25rem) * var(--nclp-font-scale, 1)); font-weight: 800; color: var(--nclp-heading); letter-spacing: -.02em; margin: 0 0 18px; line-height: 1.1; }
.nclp-author-quote { font-size: clamp(1em,2vw,1.19em); color: var(--nclp-text-muted); line-height: 1.8; font-style: italic; margin: 18px 0; }
.nclp-author-divider { width: 40px; height: 3px; background: var(--nclp-accent); border-radius: 2px; margin: 14px 0; }
.nclp-author-name2 { font-weight: 700; font-size: 1.06em; color: var(--nclp-heading); margin: 0; }
.nclp-author-role2 { font-size: 0.82em; color: var(--nclp-text-muted); margin: 4px 0 0; }
.nclp-cta-btnwrap { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* ── Hub-Shortcode ── */
.nclp-hub-group { margin-bottom: 28px; }
.nclp-hub-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.nclp-hub-list a { text-decoration: none; }
/* ── Responsive ── */
@media (max-width: 760px) {
.nclp-two-col { grid-template-columns: 1fr; }
.nclp-author-cta { grid-template-columns: 1fr; text-align: center; }
.nclp-author-photo { margin: 0 auto; }
.nclp-author-divider { margin: 14px auto; }
.nclp-cta-btnwrap { align-items: center; }
}
@media (max-width: 600px) {
.nclp-section { padding: 60px 5vw; }
.nclp-hero { padding: 80px 5vw 64px; }
.nclp-cta-section { padding: 72px 5vw 90px; }
}