/* =========================================================================
   lp_nullgradnavigator — Seitenspezifische Styles
   Wird nach design-system/*.css geladen. Nur Layouts, die das Design-System
   nicht abdeckt, plus die wiederverwendeten Bestell-Modal-Bausteine.
   ========================================================================= */

/* Sprunglinks bündig unter sticky Nav */
html {
    scroll-padding-top: var(--header-h);
}

/* ── Produktlogo in der Navigation (Höhen-skaliert) ── */
#logo {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 3.5rem);
}

#logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(2rem, 5vw, 2.75rem);
    object-fit: contain;
    object-position: left center;
}

/* ── Hero-Highlight (Akzentwort in der H1) ── */
.ngn-accent {
    color: var(--brand-accent);
}

/* ── Kennzahlen-Banner unter dem Hero ── */
.ngn-stats {
    padding-block: var(--space-8);
    background-color: var(--surface-default);
    border-block-end: 1px solid var(--border-default);
}

.ngn-stats__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
    text-align: center;
}

.ngn-stat__value {
    display: block;
    font-size: var(--fs-48);
    font-weight: var(--fw-900);
    line-height: var(--lh-tight);
    color: var(--brand-blue);
}

.ngn-stat__label {
    display: block;
    max-width: 22rem;
    margin: var(--space-2) auto 0;
    color: var(--text-muted);
    font-size: var(--fs-16);
    line-height: var(--lh-snug);
    text-wrap: pretty;
}

@media (min-width: 48rem) {
    .ngn-stats__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ngn-stat + .ngn-stat {
        border-inline-start: 1px solid var(--border-default);
    }
}

/* ── Vorteile (Karten-Styling; Grid: benefits-wrapper-3 → 1 / 2 / 3 Spalten) ── */
.ngn-benefits {
    margin-block-start: var(--space-6);
}

.ngn-benefits .benefit {
    display: block;
    text-align: center;
    height: 100%;
    padding: var(--space-6) var(--space-5);
    background-color: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: transform var(--duration-1) var(--ease-out),
                box-shadow var(--duration-1) var(--ease-out);
}

.ngn-benefits .benefit:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}

.ngn-benefits .benefit figure {
    margin: 0 0 var(--space-3);
    justify-content: center;
}

.ngn-benefits .benefit img {
    width: 3rem;
    height: auto;
}

/* ── „Alles auf einen Blick“ — Produktabbildung ── */
.ngn-overview {
    padding-block: var(--space-section);
}

.ngn-overview__intro,
.ngn-shots__intro,
.video-section__intro {
    text-align: center;
    max-width: var(--container-2xl);
    margin-inline: auto;
    margin-block-end: var(--space-7);
}

.ngn-overview__intro .tagline,
.ngn-shots__intro .tagline,
.video-section__intro .tagline {
    font-size: var(--fs-18);
    color: var(--text-muted);
    margin-block-start: var(--space-3);
    text-wrap: pretty;
}

.ngn-overview__figure {
    margin: 0;
}

.ngn-overview__figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    background-color: var(--surface-default);
}

/* ── So funktioniert's — 7-Schritte-Flow ── */
.story-wrapper--steps {
    padding-block: var(--space-section);
    margin-block-end: 0;
}

.ngn-steps {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    position: relative;
}

.ngn-steps__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
    position: relative;
}

.ngn-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--brand-blue);
    color: var(--text-on-brand);
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    line-height: 1;
    z-index: 1;
}

.ngn-steps__item h3 {
    font-size: var(--fs-18);
    margin-block-end: var(--space-2);
    text-wrap: balance;
}

.ngn-steps__item p {
    color: var(--text-muted);
    font-size: var(--fs-16);
    line-height: var(--lh-normal);
    margin-block-end: 0;
    text-wrap: pretty;
}

/* Mobile: verbindende Linie zwischen den Schritt-Nummern */
@media (max-width: 47.999rem) {
    .ngn-steps__item:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 1.375rem;
        top: 2.75rem;
        bottom: calc(-1 * var(--space-6));
        width: 2px;
        background-color: var(--border-default);
        transform: translateX(-50%);
    }
}

@media (min-width: 48rem) {
    .ngn-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .ngn-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-7) var(--space-6);
    }

    .ngn-steps__item {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: var(--space-3);
    }
}

/* ── Funktionen — Screenshot-Galerie (2 × 2) ── */
.ngn-shots-section {
    padding-block: var(--space-section);
}

.ngn-shots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.ngn-shot figure {
    margin: 0;
}

/* Die Screenshots sind randlos auf das Geräte-Mockup zugeschnitten
   (kein Rahmen, kein Leerraum). Sie haben je nach Inhalt leicht
   unterschiedliche Höhen; mit einer einheitlichen Kachelhöhe und
   object-fit: contain bleiben alle gleich hoch (Bildunterschriften
   fluchten), nichts wird beschnitten. Die schmale Letterbox oben/unten
   wird transparent gelassen und nimmt damit nahtlos die Sektionsfarbe an.
   aspect-ratio = Verhältnis des höchsten Screenshots (neuer-einsatz). */
.ngn-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 800 / 636;
    object-fit: contain;
    object-position: center;
}

.ngn-shot figcaption {
    margin-block-start: var(--space-3);
    text-align: center;
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}

@media (min-width: 48rem) {
    .ngn-shots {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-7);
    }
}

/* ── Demo-Video ── */
.video-section {
    padding-block: var(--space-section);
}

.video-section__embed {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 56rem;
    margin-inline: auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-3);
}

.video-section__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-section__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    max-width: 56rem;
    margin-inline: auto;
    background-color: var(--surface-sunken);
    border: 2px dashed var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.video-section__placeholder p {
    margin: 0;
}

/* ── Preis ── */
.price-section {
    padding-block: var(--space-section);
}

.price-section > .container > h2,
.price-section > .container > .price-intro {
    text-align: center;
}

.price-intro {
    color: var(--text-muted);
    max-width: 42rem;
    margin-inline: auto;
    margin-block-end: var(--space-8);
}

.ngn-price {
    display: flex;
    justify-content: center;
}

.price-card {
    width: min(28rem, 100%);
    background-color: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.price-card--highlighted {
    border-color: var(--brand-blue);
    border-width: 2px;
}

.price-card--base > .btn {
    margin-block-start: auto;
}

.price-card__tier {
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    text-transform: uppercase;
    margin-block-end: var(--space-1);
}

.price-card__amount {
    font-size: var(--fs-48);
    font-weight: var(--fw-900);
    color: var(--text-strong);
    line-height: var(--lh-tight);
}

.price-card__amount small {
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    text-transform: none;
}

.price-card__range {
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    margin-block-start: var(--space-2);
}

.price-card__setup {
    font-size: var(--fs-12);
    color: var(--text-muted);
    margin-block-start: var(--space-2);
}

.price-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.price-card__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--fs-16);
    line-height: var(--lh-snug);
}

.price-card__features li::before {
    content: "";
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    background-image: url("assets/img/icons/check.svg");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 0.1em;
}

.price-disclaimer {
    text-align: center;
    max-width: 42rem;
    margin-inline: auto;
    margin-block-start: var(--space-6);
    color: var(--text-muted);
    font-size: var(--fs-14);
}

/* ── Kontakt-Sektion (Brand-Hintergrund + helle Formularkarte) ── */
.ngn-contact {
    padding-block: var(--space-section);
}

.ngn-contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    align-items: start;
}

.ngn-contact__info p {
    color: var(--text-on-brand);
    opacity: 0.92;
    text-wrap: pretty;
}

.ngn-contact__channels {
    list-style: none;
    margin: var(--space-6) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ngn-contact__channels li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ngn-contact__channels span {
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
}

.ngn-contact__channels a {
    color: var(--text-on-brand);
    font-size: var(--fs-18);
    font-weight: var(--fw-bold);
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.ngn-contact__publisher {
    font-size: var(--fs-14);
    color: var(--text-on-brand);
    opacity: 0.78;
}

.ngn-contact__form-card {
    background-color: var(--surface-default);
    color: var(--text-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    padding: var(--space-6);
}

.ngn-contact__legal {
    grid-column: 1 / -1;
    margin-block: var(--space-1) 0;
    font-size: var(--fs-12);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

@media (min-width: 64rem) {
    .ngn-contact__grid {
        grid-template-columns: 0.9fr 1.1fr;
        gap: var(--space-8);
    }
}

/* =========================================================================
   Bestell-Modal — wiederverwendete Bausteine (Modal, Wizard, Plan-Picker,
   Bestellübersicht). Übernommen aus dem etablierten LP-Pattern.
   ========================================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.55);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 300;
    padding: var(--space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    position: relative;
    flex-shrink: 0;
    background: var(--surface-raised);
    color: var(--text-default);
    padding: calc(var(--space-6) + var(--space-2)) var(--space-6) var(--space-6);
    width: min(34rem, 100%);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    animation: fadeIn 0.2s ease;
    box-sizing: border-box;
    margin: auto;
}

.modal-content .modal-header {
    margin-block-end: var(--space-5);
}

.modal-content .modal-header h3 {
    font-size: var(--fs-24);
    font-weight: var(--fw-bold);
    margin: 0;
}

.modal-content .lp-form--hero {
    color: var(--text-default);
    min-width: 0;
}

.modal-content .order-wizard__viewport {
    min-height: 0;
}

.modal-content .order-wizard__back {
    color: var(--text-link);
    text-decoration-color: color-mix(in srgb, var(--text-link) 55%, transparent);
}

.modal-content .order-wizard__back:hover,
.modal-content .order-wizard__back:focus-visible {
    color: var(--text-link-hover);
    text-decoration-color: currentColor;
}

.close-btn {
    position: absolute;
    top: calc(var(--space-3) - 0.12em);
    right: var(--space-3);
    z-index: 2;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: var(--fs-24);
    line-height: 1;
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-sm);
    transition: color var(--duration-1) var(--ease-out);
}

.close-btn:hover,
.close-btn:focus-visible {
    color: var(--text-default);
}

.close-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

/* ── Formular im Modal ── */
.lp-form--hero {
    gap: var(--space-3) var(--space-4);
}

.lp-form--hero .form-group.form-md-6 {
    grid-column: span 6;
}

.lp-form--hero .form-group label {
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lp-form--hero .form-group label.plan-picker__option,
.lp-form--hero .form-group label.checkbox-label {
    text-transform: none;
    font-size: var(--fs-14);
    font-weight: var(--fw-regular);
    letter-spacing: 0;
}

.lp-form--hero .form-group input:not([type="checkbox"], [type="radio"]),
.lp-form--hero .form-group select {
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-16);
    box-shadow: none;
}

.lp-form--hero .form-status {
    margin-block: 0;
}

/* ── Bestell-Wizard ── */
.order-wizard__chrome {
    margin-block-end: var(--space-3);
}

.order-wizard__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.order-wizard__step-title {
    display: block;
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-block-end: 0;
}

.order-wizard__progress {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.order-wizard__progress-item {
    display: block;
    line-height: 0;
}

.order-wizard__progress-item::before {
    content: "";
    display: block;
    width: 1.25rem;
    height: 2px;
    border-radius: var(--radius-pill);
    background-color: var(--border-default);
    transition: width var(--duration-2) var(--ease-out),
                background-color var(--duration-2) var(--ease-out);
}

.order-wizard__progress-item.is-active::before {
    width: 1.75rem;
    background-color: color-mix(in srgb, var(--brand-blue) 55%, var(--border-default));
}

.order-wizard__progress-item.is-done::before {
    background-color: color-mix(in srgb, var(--brand-blue) 35%, var(--border-default));
}

.order-wizard__viewport {
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-3) var(--space-4);
    align-content: start;
}

.order-wizard__step-fields {
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-3) var(--space-4);
}

.order-wizard__step-fields[hidden],
.order-wizard__panel[hidden] {
    display: none;
}

.order-wizard__step-fields > .form-group,
.order-wizard__panel > .form-group,
.order-wizard__panel > .plan-picker-group,
.order-wizard__panel > .order-summary {
    grid-column: span 12;
}

.order-wizard__step-fields > .form-group.form-md-6,
.order-wizard__panel > .form-group.form-md-6 {
    grid-column: span 6;
}

@media (max-width: 47.999rem) {
    .order-wizard__step-fields > .form-group.form-md-6,
    .order-wizard__panel > .form-group.form-md-6 {
        grid-column: span 12;
    }
}

.hero-form-panel {
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-3) var(--space-4);
}

.hero-form-panel[hidden] {
    display: none;
}

.hero-form-panel > .form-group,
.hero-form-panel > .plan-picker-group {
    grid-column: span 12;
}

.hero-form-actions {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
}

.hero-form-actions [hidden] {
    display: none;
}

.order-wizard__back {
    align-self: flex-start;
    padding: var(--space-1) 0;
    font-family: var(--font-sans);
    font-size: var(--fs-14);
    color: var(--text-link);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.order-wizard__back:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ── Lizenz-Auswahl (eine Karte) ── */
.plan-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.plan-picker__option {
    display: block;
    margin: 0;
    cursor: pointer;
}

.plan-picker__option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.plan-picker__card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-4);
    align-items: center;
    padding: var(--space-5);
    background-color: var(--surface-default);
    border: 2px solid var(--brand-blue);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--brand-blue) 8%, var(--surface-default));
    box-shadow: var(--shadow-2);
}

.plan-picker__option input:focus-visible + .plan-picker__card {
    box-shadow: var(--focus-ring);
}

.plan-picker__name {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--fs-21);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    line-height: var(--lh-tight);
}

.plan-picker__price {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--fs-20);
    font-weight: var(--fw-900);
    color: var(--text-strong);
    line-height: var(--lh-tight);
    text-align: end;
    white-space: nowrap;
}

.plan-picker__price small {
    font-size: var(--fs-12);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    text-transform: none;
}

.plan-picker__range {
    grid-column: 1 / -1;
    font-size: var(--fs-14);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}

@media (max-width: 47.999rem) {
    .plan-picker__card {
        grid-template-columns: 1fr;
    }

    .plan-picker__price {
        grid-column: 1;
        grid-row: auto;
        text-align: start;
    }
}

.plan-picker-group.has-error .plan-picker__card,
.plan-picker-group.is-invalid .plan-picker__card {
    border-color: var(--state-danger-fg);
}

.plan-picker-group .field-error {
    margin-block-start: var(--space-2);
}

/* ── Bestellübersicht (§ 312j BGB) ── */
.order-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    background-color: color-mix(in srgb, var(--brand-blue) 5%, var(--surface-default));
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.order-summary__heading {
    margin: 0;
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-strong);
}

.order-summary__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.order-summary__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
}

.order-summary__item-label {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--text-strong);
}

.order-summary__item-detail {
    font-size: var(--fs-12);
    font-weight: var(--fw-regular);
}

.order-summary__item-price {
    flex-shrink: 0;
    font-size: var(--fs-16);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    text-align: end;
    white-space: nowrap;
}

.order-summary__item-price small {
    display: block;
    font-size: var(--fs-12);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
}

/* Bei einer einzigen Position dupliziert der Summen-Block die Positionsliste. */
.order-summary__totals {
    display: none;
}

.order-summary__note,
.order-summary__empty {
    margin: 0;
    font-size: var(--fs-12);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}

/* Partner-Hinweis im Footer („Ein Angebot von …") */
.footer-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
}

.footer-partner__logo {
    height: 28px;
    width: auto;
    background-color: var(--neutral-0);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

@media (prefers-color-scheme: dark) {
    /* Header-Logo: dunkle Farben wären auf --surface-default unleserlich */
    #logo img {
        filter: brightness(0) invert(1);
    }

    /* Kennzahlen: --brand-blue auf dunklem Hintergrund unleserlich */
    .ngn-stat__value {
        color: var(--text-link);
    }

    /* Vorteils-Karten: leichter Anheben für bessere Abgrenzung auf Mobile */
    .ngn-benefits .benefit {
        background-color: var(--surface-raised);
    }

    /* Vorteils-Icons: SVG-Fill #104171 auf dunkler Karte unleserlich */
    .ngn-benefits .benefit img {
        filter: brightness(0) invert(1);
        opacity: 0.9;
    }

    .price-card {
        background-color: var(--surface-raised);
    }

    /* Check-Icons in der Preis-Karte */
    .price-card__features li::before {
        filter: brightness(0) invert(1);
        opacity: 0.85;
    }
}