/* =============================================================
   index-new.css  –  Landing page, 1:1 transcription of the
   reference design (v0-rundfunkbeitrag-redesign.vercel.app).
   All values in px (reference base: 16px / Inter).
   Shared header classes (.kopfzeile*) are also used by _Layout.
   ============================================================= */

/* ── Font (self-hosted, GDPR-safe) ─────────────────────────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    --brand: #FFCC00;
    --brand-dark: #E6B800;
    --gray-900: #111827;
    --gray-800: #1f2937;
    --gray-700: #374151;
    --gray-600: #4B5563;
    --gray-500: #6B7280;
    --gray-400: #9CA3AF;
    --gray-300: #D1D5DB;
    --gray-200: #E5E7EB;
    --gray-100: #F3F4F6;
    --gray-50: #F9FAFB;
    --white: #ffffff;
    --green-500: #22C55E;
    --green-100: #DCFCE7;
    --green-700: #15803D;
    --yellow-400: #FACC15;
    /* shadcn (slate) tokens used by calendar/carousel controls */
    --sc-primary: #0f172a;
    --sc-primary-fg: #f8fafc;
    --sc-accent: #f1f5f9;
    --sc-muted-fg: #64748b;
    --sc-border: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);
    --ease: cubic-bezier(.4,0,.2,1);
}

/* ── Global compat (kept for pages that share this stylesheet) */
html {
    font-size: 14px;
}

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    background-color: transparent;
}

/* ── HEADER (kopfzeile) – verbatim reference module CSS ────── */
.kopfzeile {
    z-index: 50;
    background: linear-gradient(#fc0 0%, #fdb913 100%);
    border-top: 3px solid #000;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.kopfzeile-container {
    align-items: center;
    max-width: 1280px;
    margin: auto;
    padding: 24px;
    display: flex;
}

.kopfzeile-logo {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.1));
    width: 100%;
    height: auto;
    transition: transform .2s, filter .2s;
}

    .kopfzeile-logo:hover {
        filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
        transform: scale(1.02);
    }

@media (min-width: 768px) {
    .kopfzeile-logo {
        width: 55%;
    }
}

@media (min-width: 1024px) {
    .kopfzeile-container {
        padding: 32px;
    }
}

/* ── Page scope: element resets (Tailwind preflight subset) ── */
.ni-page,
.ni-page * ,
.ni-page *::before,
.ni-page *::after {
    box-sizing: border-box;
}

.ni-page {
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-900);
    -webkit-font-smoothing: antialiased;
}

    /* Zero-specificity resets (Tailwind-preflight subset): any single-class
       rule below can override these regardless of file order. */
    .ni-page :where(h1, h2, h3, p, ul) {
        margin: 0;
        padding: 0;
    }

    .ni-page :where(h1, h2, h3, h4, h5, h6) {
        font-size: inherit;
        font-weight: inherit;
    }

    .ni-page :where(ul) {
        list-style: none;
    }

    .ni-page :where(a) {
        color: inherit;
        text-decoration: none;
    }

    .ni-page :where(button) {
        font: inherit;
        color: inherit;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
    }

    .ni-page :where(svg) {
        display: block;
        flex-shrink: 0;
    }

    .ni-page :where(img) {
        display: block;
        vertical-align: middle;
    }

.seiten-wrapper {
    background-color: #fff;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Content container + vertical section rhythm ───────────── */
/* No overflow-x:hidden here: it would force overflow-y:auto and clip the
   calendar popovers behind an inner scrollbar. .seiten-wrapper clips instead. */
.inhalts-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 16px;
}

@media (max-width: 768px) {
    .inhalts-container {
        padding: 16px 12px;
    }
}

.ni-stack > * + * {
    margin-top: 64px;
}

/* ── HERO layout ────────────────────────────────────────────── */
.ni-hero {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 1024px) {
    .ni-hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
}

.ni-hero-left {
    display: flex;
    flex-direction: column;
    order: 2;
}

@media (min-width: 1024px) {
    .ni-hero-left {
        order: 1;
    }
}

.ni-hero-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 1;
    min-width: 0;
}

@media (min-width: 1024px) {
    .ni-hero-right {
        order: 2;
    }
}

/* Desktop headline block */
.ni-hero-headline {
    display: none;
    margin-bottom: 24px;
}

@media (min-width: 1024px) {
    .ni-hero-headline {
        display: block;
    }
}

/* Badge pill (Online Service) */
.ni-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--brand);
    color: var(--gray-900);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 9999px;
    margin-bottom: 24px;
    width: fit-content;
}

    .ni-badge svg {
        width: 14px;
        height: 14px;
    }

.ni-hero-h1 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 12px;
}

@media (min-width: 640px) {
    .ni-hero-h1 {
        font-size: 30px;
        line-height: 36px;
    }
}

@media (min-width: 768px) {
    .ni-hero-h1 {
        font-size: 36px;
        line-height: 40px;
    }
}

.ni-hero-sub {
    color: var(--gray-500);
}

/* ── Phone mockup (desktop only) ───────────────────────────── */
.ni-phone-wrap {
    display: none;
}

@media (min-width: 1024px) {
    .ni-phone-wrap {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        padding: 24px 0;
        position: relative;
        overflow: visible;
    }
}

.ni-phone-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.ni-phone-device {
    position: relative;
    width: 260px;
    border-radius: 44px;
    background-color: #1a1a1a;
    padding: 10px;
    z-index: 10;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1), inset 0 0 0 2px rgba(255,255,255,0.05);
}

.ni-phone-screen {
    position: relative;
    border-radius: 34px;
    overflow: hidden;
    background: linear-gradient(to bottom, #FFCC00, #FFD54F);
    aspect-ratio: 9 / 19.5;
}

.ni-phone-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px 4px;
}

.ni-phone-time {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-900);
}

.ni-phone-icons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ni-phone-bars {
    display: flex;
    gap: 2px;
    align-items: flex-end;
}

.ni-phone-bar {
    background-color: var(--gray-900);
    border-radius: 2px;
    width: 3px;
}

    .ni-phone-bar:nth-child(1) { height: 4px; }
    .ni-phone-bar:nth-child(2) { height: 6px; }
    .ni-phone-bar:nth-child(3) { height: 8px; }
    .ni-phone-bar:nth-child(4) { height: 10px; }

.ni-phone-battery {
    width: 20px;
    height: 10px;
    background-color: var(--gray-900);
    border-radius: 2px;
    margin-left: 4px;
    position: relative;
}

.ni-phone-battery-nub {
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 4px;
    background-color: var(--gray-900);
    border-radius: 0 2px 2px 0;
}

.ni-phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 28px;
    background-color: #000;
    border-radius: 9999px;
}

.ni-phone-content {
    padding: 24px 16px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ni-phone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ni-phone-title {
    font-weight: 700;
    color: var(--gray-900);
    font-size: 14px;
    line-height: 20px;
}

.ni-phone-check {
    width: 24px;
    height: 24px;
    background-color: rgba(255,255,255,.3);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ni-phone-check svg {
        width: 14px;
        height: 14px;
        color: var(--gray-900);
    }

.ni-phone-status {
    background-color: var(--green-500);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 9999px;
    width: fit-content;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ni-phone-pulse {
    width: 6px;
    height: 6px;
    background-color: var(--white);
    border-radius: 9999px;
    animation: ni-pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

@keyframes ni-pulse {
    50% { opacity: .5; }
}

.ni-phone-card {
    background-color: var(--white);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow-lg);
    margin-bottom: 12px;
}

.ni-phone-addr-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-100);
}

    /* second address row sits AFTER the arrow, so match via the arrow */
    .ni-phone-arrow + .ni-phone-addr-row {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--gray-100);
    }

.ni-phone-addr-icon {
    width: 32px;
    height: 32px;
    background-color: var(--gray-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ni-phone-addr-icon.yellow {
        background-color: var(--brand);
    }

    .ni-phone-addr-icon svg {
        width: 16px;
        height: 16px;
        color: var(--gray-400);
    }

    .ni-phone-addr-icon.yellow svg {
        color: var(--gray-900);
    }

.ni-phone-addr-label {
    font-size: 9px;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: .025em;
}

    .ni-phone-addr-label.yellow {
        color: var(--brand);
        font-weight: 500;
    }

.ni-phone-addr-text {
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-600);
}

    .ni-phone-addr-text.bold {
        font-weight: 600;
        color: var(--gray-900);
    }

.ni-phone-arrow {
    display: flex;
    justify-content: center;
    margin: -4px 0;
}

.ni-phone-arrow-circle {
    width: 24px;
    height: 24px;
    background-color: var(--brand);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ni-phone-arrow-circle svg {
        width: 12px;
        height: 12px;
        color: var(--gray-900);
        transform: rotate(90deg);
    }

.ni-phone-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.ni-phone-stat {
    background-color: var(--white);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow-sm);
}

.ni-phone-stat-num {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: var(--gray-900);
}

.ni-phone-stat-lbl {
    font-size: 9px;
    color: var(--gray-500);
}

.ni-phone-deliveries {
    background-color: var(--white);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--shadow-sm);
    flex: 1;
}

.ni-phone-del-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

    .ni-phone-del-header svg {
        width: 14px;
        height: 14px;
        color: var(--green-500);
    }

.ni-phone-del-title {
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-900);
}

.ni-phone-del-rows > * + * {
    margin-top: 6px;
}

.ni-phone-del-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ni-phone-del-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ni-phone-del-icon {
    width: 20px;
    height: 20px;
    background-color: rgba(255,204,0,.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ni-phone-del-icon svg {
        width: 12px;
        height: 12px;
        color: var(--brand);
    }

.ni-phone-del-text {
    font-size: 10px;
    color: var(--gray-600);
}

.ni-phone-del-date {
    font-size: 8px;
    color: var(--gray-400);
}

.ni-phone-home-indicator {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.ni-phone-home-bar {
    width: 112px;
    height: 4px;
    background-color: rgba(17,24,39,.2);
    border-radius: 9999px;
}

/* ── Letter card (desktop only) ────────────────────────────── */
.ni-letter-wrap {
    display: none;
}

@media (min-width: 1024px) {
    .ni-letter-wrap {
        display: block;
        position: relative;
        transform: rotate(-12deg);
        z-index: 0;
        margin-left: -100px;
        margin-top: 80px;
        box-shadow: 0 30px 60px rgba(0,0,0,0.18);
    }
}

.ni-letter {
    width: 440px;
    height: 224px;
    background-color: var(--white);
    border-radius: 4px;
    position: relative;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-xl);
}

.ni-letter-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, #fff, rgba(249,250,251,.2), rgba(243,244,246,.1));
    border-radius: 4px;
}

.ni-letter-sender {
    position: absolute;
    top: 24px;
    left: 32px;
    font-size: 16px;
    color: var(--gray-600);
    line-height: 1.625;
}

.ni-letter-sender-name {
    font-weight: 500;
}

.ni-letter-stamp {
    position: absolute;
    top: 12px;
    right: 16px;
}

    .ni-letter-stamp img {
        width: 96px;
        height: 96px;
        object-fit: contain;
    }

.ni-letter-tag {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background-color: var(--brand);
    padding: 10px 20px;
    border-radius: 4px;
    transform: rotate(2deg);
    box-shadow: var(--shadow-md);
}

.ni-letter-tag-text {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: .1em;
}

/* ── Mobile hero head + mobile letter ──────────────────────────
   Hidden on ALL viewports: on mobile the page starts directly with
   "Auftrag konfigurieren" (matches the reference). Markup stays in
   the DOM so the page keeps its h1 for SEO. */
.ni-hero-mobile-head {
    display: none;
    margin-bottom: 24px;
}

.ni-hero-mobile-head .ni-badge {
    margin-bottom: 16px;
}

.ni-hero-mobile-h1 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.ni-hero-mobile-sub {
    color: var(--gray-500);
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px;
}

.ni-letter-mobile-wrap {
    position: relative;
    padding: 16px 0;
    display: flex;
    justify-content: center;
}

.ni-letter-mobile {
    position: relative;
    width: 320px;
    height: 180px;
    background-color: #FAFAF8;
    transform: rotate(-2deg);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
    border: 1px solid #e5e5e0;
    border-radius: 4px;
}

.ni-letter-mobile-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, #fff, #FAFAF8, #F5F5F0);
    border-radius: 4px;
}

.ni-letter-mobile-topline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(209,213,219,.5), transparent);
}

.ni-letter-mobile-sender {
    position: absolute;
    top: 16px;
    left: 20px;
    font-size: 11px;
    color: var(--gray-600);
    line-height: 1.625;
    font-family: Georgia, serif;
}

.ni-letter-mobile-stamp {
    position: absolute;
    top: 12px;
    right: 16px;
}

    .ni-letter-mobile-stamp img {
        width: 56px;
        height: 56px;
        object-fit: contain;
    }

.ni-letter-mobile-receiver {
    position: absolute;
    bottom: 48px;
    right: 20px;
    font-size: 12px;
    color: var(--gray-800);
    line-height: 1.625;
    text-align: right;
    font-family: Georgia, serif;
}

.ni-letter-mobile-receiver-name {
    font-weight: 500;
}

.ni-letter-mobile-tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background-color: var(--brand);
    padding: 6px 12px;
    border-radius: 4px;
    transform: rotate(-2deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ni-letter-mobile-tag-text {
    font-size: 10px;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: .05em;
}

/* ── Config widget ─────────────────────────────────────────── */
.ni-config-heading {
    margin-bottom: 24px;
}

@media (min-width: 1024px) {
    .ni-config-heading {
        margin-bottom: 32px;
    }
}

.ni-config-heading h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

@media (min-width: 1024px) {
    .ni-config-heading h2 {
        font-size: 24px;
        line-height: 32px;
    }
}

.ni-config-heading p {
    color: var(--gray-400);
    font-size: 14px;
    line-height: 20px;
}

.ni-config-steps > * + * {
    margin-top: 24px;
}

.ni-step-card {
    background-color: var(--gray-50);
    border-radius: 16px;
    padding: 20px;
    min-width: 0;
}

.ni-step-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ni-step-number {
    width: 24px;
    height: 24px;
    background-color: var(--brand);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-900);
    flex-shrink: 0;
}

.ni-step-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--gray-900);
}

/* Toggle buttons – 2-col grid (Art / Startdatum) */
.ni-toggle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
}

    .ni-toggle-grid > .ni-toggle-wrap {
        min-width: 0;
    }

/* Toggle buttons – wrapping pills (Grund) */
.ni-toggle-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.ni-toggle-wrap {
    position: relative;
    min-width: 0;
}

    .ni-toggle-wrap > span {
        display: block;
        width: 100%;
    }

    .ni-toggle-wrap input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    .ni-toggle-wrap label {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        cursor: pointer;
        transition: all .15s var(--ease);
        background-color: rgba(255,255,255,.5);
        color: var(--gray-500);
        white-space: nowrap;
        user-select: none;
        -webkit-user-select: none;
        margin: 0;
    }

/* grid buttons center their content */
.ni-toggle-grid .ni-toggle-wrap label {
    justify-content: center;
    width: 100%;
}

/* Grund pills: py-2.5 px-5, content left-aligned */
.ni-toggle-flex .ni-toggle-wrap label {
    padding: 10px 20px;
}

.ni-toggle-wrap label:hover {
    background-color: var(--white);
}

.ni-toggle-wrap input[type="radio"]:checked + label {
    background-color: var(--white);
    color: var(--gray-900);
    box-shadow: 0 0 0 2px var(--brand), var(--shadow-sm);
}

/* Check icon inside label – hidden until checked */
.ni-check-ic {
    display: none;
    width: 16px;
    height: 16px;
    color: var(--brand);
}

.ni-toggle-wrap input[type="radio"]:checked + label .ni-check-ic {
    display: inline-flex;
}

    .ni-toggle-wrap input[type="radio"]:checked + label .ni-check-ic svg,
    .ni-check-ic svg {
        width: 16px;
        height: 16px;
    }


/* ── Mobile: Grund pills stay on one row, tighter card rhythm ─ */
@media (max-width: 640px) {
    /* less vertical space between the step cards */
    .ni-config-steps > * + * {
        margin-top: 12px;
    }

    .ni-step-card {
        padding: 16px;
    }

    .ni-step-header {
        margin-bottom: 12px;
    }

    /* never wrap to a second row – pills size to their own text */
    .ni-toggle-flex {
        flex-wrap: nowrap;
        gap: 6px;
    }

        /* grow to share the whole row – no dead space on the right */
        .ni-toggle-flex > .ni-toggle-wrap {
            flex: 1 1 auto;
            min-width: 0;
        }

        .ni-toggle-flex .ni-toggle-wrap label {
            justify-content: center;
            width: 100%;
            padding: 10px 8px;
            gap: 4px;
            font-size: 13px;
        }

        /* smaller check so the selected pill does not outgrow the row */
        .ni-toggle-flex .ni-check-ic,
        .ni-toggle-flex .ni-check-ic svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

    .ni-toggle-grid {
        gap: 6px;
    }

        .ni-toggle-grid .ni-toggle-wrap label {
            padding: 12px 8px;
        }

    /* tighter vertical rhythm so the CTA stays above the fold */
    .ni-config-heading {
        margin-bottom: 16px;
    }

    .ni-date-field {
        margin-top: 10px;
    }

    .ni-cta-area {
        margin-top: 20px;
    }
}

/* short phone viewports (e.g. 360x740) - compress so the CTA fits */
@media (max-width: 640px) and (max-height: 800px) {
    .ni-config-heading {
        margin-bottom: 12px;
    }

    .ni-config-steps > * + * {
        margin-top: 10px;
    }

    .ni-step-card {
        padding: 12px 14px;
    }

    .ni-step-header {
        margin-bottom: 10px;
    }

    .ni-date-field {
        margin-top: 8px;
    }

    .ni-date-trigger {
        padding: 10px 14px;
    }

    .ni-date-note {
        margin-top: 6px;
    }

    .ni-cta-area {
        margin-top: 16px;
    }

    .ni-cta-btn {
        height: 50px;
    }
}

/* iPhone SE class (<=700px tall) - reclaim vertical space */
@media (max-width: 640px) and (max-height: 700px) {
    /* the sticky yellow header eats ~100px; halve it */
    .kopfzeile-container {
        padding: 10px 16px;
    }

    .kopfzeile-logo {
        width: 72%;
        max-width: 260px;
    }

    .inhalts-container {
        padding: 10px 12px;
    }

    .ni-config-heading {
        margin-bottom: 10px;
    }

        .ni-config-heading h2 {
            font-size: 18px;
            line-height: 24px;
            margin-bottom: 4px;
        }

        .ni-config-heading p {
            font-size: 13px;
            line-height: 18px;
        }

    .ni-config-steps > * + * {
        margin-top: 8px;
    }

    .ni-step-card {
        padding: 10px 12px;
    }

    .ni-step-header {
        margin-bottom: 8px;
    }

    .ni-date-trigger {
        padding: 9px 12px;
    }

    .ni-cta-area {
        margin-top: 12px;
    }

    .ni-cta-btn {
        height: 48px;
    }

    .ni-cta-ssl {
        margin-top: 8px;
    }
}

/* very narrow phones (≤360px) – shave the pills a little further */
@media (max-width: 380px) {
    .ni-toggle-flex .ni-toggle-wrap label {
        padding: 10px 6px;
        font-size: 12px;
    }

    .ni-toggle-grid .ni-toggle-wrap label {
        padding: 12px 6px;
        font-size: 13px;
    }
}
/* ── Date field (trigger + hidden select + calendar popover) ─ */
.ni-date-field {
    margin-top: 12px;
    position: relative;
}

    .ni-date-field select {
        display: none;
    }

.ni-date-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 12px;
    background-color: var(--white);
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    box-shadow: 0 0 0 1px var(--gray-200), var(--shadow-sm);
    transition: box-shadow .15s var(--ease);
}

    .ni-date-trigger:hover {
        box-shadow: 0 0 0 1px var(--gray-300), var(--shadow-sm);
    }

.ni-date-trigger-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-500);
    min-width: 0;
}

    .ni-date-trigger-left svg {
        width: 16px;
        height: 16px;
        color: var(--gray-400);
    }

.ni-date-value.has-value {
    font-weight: 500;
    color: var(--gray-900);
}

.ni-date-chev {
    width: 16px;
    height: 16px;
    color: var(--gray-300);
}

.ni-date-note {
    font-size: 12px;
    line-height: 16px;
    color: var(--gray-400);
    margin-top: 8px;
}

/* Calendar popover (shadcn Calendar transcription) */
.ni-cal-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    background-color: var(--white);
    border: 1px solid var(--sc-border);
    border-radius: 6px;
    box-shadow: var(--shadow-md);
    padding: 12px;
    width: 306px;
    max-width: calc(100vw - 32px);
    animation: ni-pop-in .15s var(--ease);
}

    .ni-cal-pop.pos-top {
        top: auto;
        bottom: calc(100% + 4px);
    }

    .ni-cal-pop[hidden] {
        display: none;
    }

@keyframes ni-pop-in {
    from {
        opacity: 0;
        transform: scale(.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ni-cal-header {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.ni-cal-caption {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--gray-900);
    user-select: none;
}

.ni-cal-nav {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--gray-900);
    transition: background-color .15s var(--ease);
}

    .ni-cal-nav:hover {
        background-color: var(--sc-accent);
    }

    .ni-cal-nav.prev { left: 0; }
    .ni-cal-nav.next { right: 0; }

    .ni-cal-nav[disabled] {
        opacity: .5;
        pointer-events: none;
    }

    .ni-cal-nav svg {
        width: 16px;
        height: 16px;
    }

.ni-cal-weekdays {
    display: flex;
}

.ni-cal-weekday {
    flex: 1;
    text-align: center;
    font-size: 12.8px;
    font-weight: 400;
    color: var(--sc-muted-fg);
    user-select: none;
}

.ni-cal-week {
    display: flex;
    width: 100%;
    margin-top: 8px;
}

.ni-cal-day {
    width: 40px;
    height: 40px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--gray-900);
    border-radius: 6px;
    user-select: none;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}

    .ni-cal-day:hover:not([disabled]):not(.selected) {
        background-color: var(--sc-accent);
    }

    .ni-cal-day[disabled] {
        color: var(--sc-muted-fg);
        opacity: .5;
        cursor: default;
    }

    .ni-cal-day.outside {
        color: var(--sc-muted-fg);
        opacity: .5;
    }

    .ni-cal-day.today:not(.selected) {
        background-color: var(--sc-accent);
    }

    .ni-cal-day.selected {
        background-color: var(--sc-primary);
        color: var(--sc-primary-fg);
    }

.ni-cal-empty {
    width: 40px;
    height: 40px;
    flex: 1;
}

/* ── Error / danger panel ──────────────────────────────────── */
.ni-danger {
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 20px;
    color: #DC2626;
}

/* ── CTA button ────────────────────────────────────────────── */
.ni-cta-area {
    margin-top: 32px;
}

/*@media (max-width: 768px) {
    .ni-cta-area {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin-top: 0;
        padding: 12px 16px 20px 16px;
        background-color: #ffffff;
        border-top: 1px solid #e5e7eb;
        z-index: 100;
    }
}*/

.ni-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
    height: 56px;
    padding: 8px 16px;
    background-color: var(--brand);
    color: var(--gray-900);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    border-radius: 16px;
    box-shadow: 0 10px 15px -3px rgba(254,240,138,.5), 0 4px 6px -4px rgba(254,240,138,.5);
    transition: background-color .15s var(--ease);
}

    .ni-cta-btn:hover {
        background-color: var(--brand-dark);
    }

    .ni-cta-btn svg {
        margin-left: 8px;
        width: 20px;
        height: 20px;
    }

.ni-cta-ssl {
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    color: var(--gray-400);
    margin-top: 12px;
}

.ni-price-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-500);
    margin-top: 16px;
}

/* ── SECTION – Yellow benefits bento ───────────────────────── */
.ni-vorteile-section {
    background-color: var(--brand);
    padding: 80px 0;
}

@media (min-width: 768px) {
    .ni-vorteile-section {
        padding: 112px 0;
    }
}

.ni-vorteile-inner {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 16px;
}

.ni-section-head {
    text-align: center;
    margin-bottom: 64px;
}

.ni-section-badge-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--gray-900);
    color: var(--white);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 9999px;
    margin-bottom: 24px;
}

    .ni-section-badge-dark svg {
        width: 16px;
        height: 16px;
    }

.ni-section-h2 {
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 16px;
    letter-spacing: -.025em;
}

@media (min-width: 768px) {
    .ni-section-h2 {
        font-size: 48px;
        line-height: 1;
    }
}

.ni-section-sub {
    color: rgba(17,24,39,.6);
    font-size: 18px;
    line-height: 28px;
    max-width: 672px;
    margin: 0 auto;
}

.ni-bento-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .ni-bento-grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

.ni-bento-card {
    background-color: var(--white);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-lg);
    transition: box-shadow .15s var(--ease);
}

    .ni-bento-card:hover {
        box-shadow: var(--shadow-xl);
    }

.ni-bento-card-large {
    padding: 32px;
}

.ni-bento-card-6r {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .ni-bento-card-6 {
        grid-column: span 6;
    }

    .ni-bento-card-4 {
        grid-column: span 4;
    }

    .ni-bento-card-6r {
        grid-column: span 6;
    }
}

.ni-bento-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.ni-bento-icon {
    width: 56px;
    height: 56px;
    background-color: var(--brand);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ni-bento-icon svg {
        width: 28px;
        height: 28px;
        color: var(--gray-900);
    }

.ni-bento-excl {
    background-color: var(--green-100);
    color: var(--green-700);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 9999px;
}

.ni-bento-h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 12px;
}

.ni-bento-p {
    color: var(--gray-600);
    line-height: 1.625;
}

.ni-bento-p-lead {
    margin-bottom: 24px;
}

.ni-bento-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
}

.ni-bento-check-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--gray-500);
}

    .ni-bento-check-item svg {
        width: 16px;
        height: 16px;
        color: var(--green-500);
    }

/* right stack rows */
.ni-bento-card-row {
    background-color: var(--white);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-lg);
    transition: box-shadow .15s var(--ease);
    display: flex;
    align-items: center;
    gap: 24px;
}

    .ni-bento-card-row:hover {
        box-shadow: var(--shadow-xl);
    }

.ni-bento-icon-row {
    width: 56px;
    height: 56px;
    background-color: var(--brand);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ni-bento-icon-row svg {
        width: 28px;
        height: 28px;
        color: var(--gray-900);
    }

.ni-bento-h3-sm {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.ni-bento-icon-sm {
    width: 48px;
    height: 48px;
    background-color: var(--brand);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

    .ni-bento-icon-sm svg {
        width: 24px;
        height: 24px;
        color: var(--gray-900);
    }

.ni-bento-h3-xs {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.ni-bento-p-sm {
    font-size: 14px;
    line-height: 20px;
}

/* Dark CTA banner inside yellow section */
.ni-cta-banner {
    background-color: var(--gray-900);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

@media (min-width: 768px) {
    .ni-cta-banner {
        flex-direction: row;
        padding: 32px;
    }
}

.ni-cta-banner-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ni-cta-banner-icon {
    display: none;
    width: 64px;
    height: 64px;
    background-color: var(--brand);
    border-radius: 16px;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .ni-cta-banner-icon {
        display: flex;
    }
}

.ni-cta-banner-icon svg {
    width: 32px;
    height: 32px;
    color: var(--gray-900);
}

.ni-cta-banner-text {
    text-align: center;
}

@media (min-width: 768px) {
    .ni-cta-banner-text {
        text-align: left;
    }
}

.ni-cta-banner-text h3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .ni-cta-banner-text h3 {
        font-size: 24px;
        line-height: 32px;
    }
}

.ni-cta-banner-text p {
    color: var(--gray-400);
}

.ni-cta-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background-color: var(--brand);
    color: var(--gray-900);
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    padding: 8px 40px;
    height: 56px;
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}

    .ni-cta-banner-btn:hover {
        background-color: var(--brand-dark);
        box-shadow: var(--shadow-xl);
    }

    .ni-cta-banner-btn svg {
        margin-left: 8px;
        width: 20px;
        height: 20px;
    }

/* ── SECTION – Warum (gradient cards) ──────────────────────── */
.vorteile-sektion {
    background: linear-gradient(90deg, #EFF6FF, #F0FDF4);
    border-radius: 12px;
    padding: 32px;
}

.sektion-titel {
    text-align: center;
    margin-bottom: 32px;
}

    .sektion-titel h3 {
        color: var(--gray-900);
        font-size: 24px;
        font-weight: 700;
    }

    .sektion-titel p {
        color: var(--gray-600);
        margin-top: 8px;
    }

.vorteile-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 24px;
}

@media (min-width: 1024px) {
    .vorteile-raster {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
}

.vorteile-karte {
    text-align: center;
    background-color: var(--white);
    border-radius: 8px;
    padding: 16px;
    transition: box-shadow .3s;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

    .vorteile-karte:hover {
        box-shadow: var(--shadow-md);
    }

.vorteile-icon-container {
    background-color: var(--gray-100);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
}

.vorteile-icon {
    color: #CA8A04;
    width: 32px;
    height: 32px;
}

.vorteile-karten-titel {
    color: var(--gray-900);
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: 600;
}

.vorteile-karten-text {
    color: var(--gray-600);
    font-size: 14px;
}

/* ── Disclaimer box ────────────────────────────────────────── */
.ni-disclaimer {
    margin-left: auto;
    margin-right: auto;
    max-width: 768px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    background-color: var(--gray-50);
    padding: 20px 24px;
}

    .ni-disclaimer p {
        text-align: center;
        font-size: 14px;
        line-height: 1.625;
        color: var(--gray-500);
        text-wrap: pretty;
    }

/* ── White cards (testimonials + FAQ) ──────────────────────── */
.ni-white-card {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}

.ni-white-card-inner {
    padding: 16px;
}

@media (min-width: 640px) {
    .ni-white-card-inner {
        padding: 32px;
    }
}

/* ── Testimonials carousel ─────────────────────────────────── */
.ni-carousel {
    position: relative;
}

.ni-carousel-viewport {
    overflow: hidden;
}

.ni-carousel-track {
    display: flex;
    transition: transform .3s ease-in-out;
}

.ni-carousel-slide {
    width: 100%;
    flex-shrink: 0;
    padding: 0 8px;
}

.ni-review-card {
    background-color: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 8px;
    height: 100%;
    padding: 24px;
}

.ni-stars {
    display: flex;
    color: var(--yellow-400);
    margin-bottom: 16px;
}

    .ni-stars svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

.ni-quote-ic {
    width: 24px;
    height: 24px;
    color: var(--gray-300);
    margin-bottom: 12px;
}

.ni-review-text {
    color: var(--gray-700);
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 16px;
}

.ni-reviewer {
    display: flex;
    align-items: center;
}

.ni-reviewer-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
}

    .ni-reviewer-avatar.blue {
        background-color: #DBEAFE;
        color: #2563EB;
    }

    .ni-reviewer-avatar.green {
        background-color: var(--green-100);
        color: #16A34A;
    }

    .ni-reviewer-avatar.purple {
        background-color: #F3E8FF;
        color: #9333EA;
    }

.ni-reviewer-name {
    font-weight: 600;
    color: var(--gray-900);
    font-size: 14px;
    line-height: 20px;
}

.ni-reviewer-location {
    color: var(--gray-500);
    font-size: 12px;
    line-height: 16px;
}

.ni-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--sc-border);
    background-color: rgba(255,255,255,.7);
    transition: background-color .15s var(--ease);
}

    .ni-carousel-btn:hover {
        background-color: var(--white);
    }

    .ni-carousel-btn.prev { left: 0; }
    .ni-carousel-btn.next { right: 0; }

    .ni-carousel-btn svg {
        width: 16px;
        height: 16px;
    }

/* ── FAQ ───────────────────────────────────────────────────── */
.ni-faq-card {
    scroll-margin-top: 96px;
}

.ni-faq-list {
    max-width: 768px;
    margin: 0 auto;
}

    .ni-faq-list > * + * {
        margin-top: 16px;
    }

.ni-faq-item {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.ni-faq-btn {
    text-align: left;
    color: var(--gray-800);
    width: 100%;
    padding: 16px 24px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .ni-faq-btn:hover {
        background-color: var(--gray-50);
    }

.ni-faq-chevron {
    width: 24px;
    height: 24px;
    flex-shrink: 1;
    transition: transform .3s;
}

.ni-faq-item.open .ni-faq-chevron {
    transform: rotate(180deg);
}

.ni-faq-answer {
    display: none;
    color: var(--gray-600);
    border-top: 1px solid var(--gray-100);
    padding: 0 24px 16px;
    font-size: 14px;
}

.ni-faq-item.open .ni-faq-answer {
    display: block;
}

.ni-faq-answer-inner {
    padding-top: 16px;
}

/* rich answer (Welche Sendungen) */
.ni-faq-cols {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

@media (min-width: 640px) {
    .ni-faq-cols {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

.ni-faq-col {
    border-radius: 12px;
    background-color: var(--gray-50);
    padding: 16px;
}

.ni-faq-col-title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.ni-faq-col ul > * + * {
    margin-top: 6px;
}

.ni-faq-col li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    color: var(--gray-600);
}

.ni-faq-bullet {
    margin-top: 6px;
    width: 4px;
    height: 4px;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: var(--gray-400);
}

.ni-faq-footnote {
    font-size: 12px;
    line-height: 16px;
    color: var(--gray-400);
    margin-top: 16px;
}

.ni-faq-contact {
    max-width: 768px;
    margin: 32px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--gray-100);
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: var(--gray-500);
    text-wrap: pretty;
}

    .ni-faq-contact a {
        font-weight: 500;
        color: var(--gray-900);
        text-decoration: underline;
    }

/* ── Final dark CTA section ────────────────────────────────── */
.ni-final-cta {
    overflow: hidden;
    border-radius: 24px;
    background-color: var(--gray-900);
    box-shadow: var(--shadow-xl);
}

.ni-final-cta-inner {
    padding: 32px;
}

@media (min-width: 640px) {
    .ni-final-cta-inner {
        padding: 48px;
    }
}

.ni-final-cta-row {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1024px) {
    .ni-final-cta-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 48px;
    }
}

.ni-final-cta-text {
    max-width: none;
}

@media (min-width: 1024px) {
    .ni-final-cta-text {
        max-width: 576px;
    }
}

.ni-final-cta-text h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--white);
    text-wrap: balance;
}

@media (min-width: 640px) {
    .ni-final-cta-text h3 {
        font-size: 30px;
        line-height: 36px;
    }
}

.ni-final-cta-text p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.625;
    color: var(--gray-400);
    text-wrap: pretty;
}

.ni-final-cta-action {
    flex-shrink: 0;
}

.ni-final-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
    background-color: var(--brand);
    color: var(--gray-900);
    font-weight: 700;
    padding: 8px 24px;
    height: 56px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 16px;
    box-shadow: 0 10px 15px -3px rgba(234,179,8,.2), 0 4px 6px -4px rgba(234,179,8,.2);
    transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}

@media (min-width: 640px) {
    .ni-final-cta-btn {
        padding: 8px 40px;
        font-size: 16px;
        line-height: 24px;
    }
}

@media (min-width: 1024px) {
    .ni-final-cta-btn {
        width: auto;
    }
}

.ni-final-cta-btn:hover {
    background-color: var(--brand-dark);
    box-shadow: 0 20px 25px -5px rgba(234,179,8,.2), 0 8px 10px -6px rgba(234,179,8,.2);
}

.ni-final-cta-btn svg {
    margin-left: 8px;
    width: 20px;
    height: 20px;
}

.ni-final-cta-features {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 24px;
}

.ni-final-cta-feature {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .ni-final-cta-feature svg {
        width: 16px;
        height: 16px;
        color: var(--brand);
    }

    .ni-final-cta-feature span {
        font-size: 14px;
        line-height: 20px;
        color: var(--gray-300);
    }

/* ── FOOTER ────────────────────────────────────────────────── */
.fusszeile {
    background-color: var(--white);
    border-top: 1px solid var(--gray-200);
    margin-top: 200px;
    padding: 24px 0;
}

.fusszeile-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

.fusszeile-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--gray-600);
}

    .fusszeile-links li {
        display: flex;
        align-items: center;
    }
    .fusszeile-links li a {
         color: var(--gray-900);

    }
    .fusszeile-links a:hover {
        color: var(--gray-900);
        text-decoration: none;
    }

    .fusszeile-links span {
        margin-left: 16px;
        color: var(--gray-300);
    }

.fusszeile-copyright {
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    color: var(--gray-500);
    margin-top: 16px;
    text-wrap: pretty;
}

.fusszeile-marken {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-100);
}

    .fusszeile-marken p {
        margin: 0 auto;
        max-width: 768px;
        text-align: center;
        font-size: 11px;
        line-height: 1.625;
        color: var(--gray-400);
        text-wrap: pretty;
    }

/* ── Bootstrap conflict overrides (other pages share header) ─ */
.seiten-wrapper .container {
    max-width: none;
    width: 100%;
    padding: 0;
}

body.ni-page {
    margin: 0;
    padding: 0;
}

/* =============================================================
   LEGAL PAGES (Impressum / Datenschutz / AGB / Widerrufsbelehrung)
   1:1 transcription of the reference legal-page template.
   ============================================================= */
.ni-legal-page {
    min-height: 100vh;
    background-color: var(--gray-50);
    display: flex;
    flex-direction: column;
}

.ni-legal-header {
    background: linear-gradient(#fc0, #fdb913);
    border-top: 3px solid #000;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-sm);
}

.ni-legal-header-inner {
    max-width: 896px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ni-legal-logo {
    height: 40px;
    width: auto;
}

.ni-legal-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--gray-900);
    transition: background-color .15s var(--ease);
}

    .ni-legal-back:hover {
        background-color: rgba(254,240,138,.5);
    }

    .ni-legal-back svg {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }

.ni-legal-main {
    width: 100%;
    max-width: 896px;
    margin: 0 auto;
    padding: 48px 24px;
    flex: 1;
}

.ni-legal-h1 {
    font-size: 30px;
    line-height: 36px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

    .ni-legal-h1.no-sub {
        margin-bottom: 32px;
    }

.ni-legal-sub {
    color: var(--gray-500);
    margin-bottom: 32px;
}

.ni-legal-cards > * + * {
    margin-top: 24px;
}

/* Card */
.ni-lcard {
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
}

    .ni-lcard.gray {
        background-color: var(--gray-50);
    }

    .ni-lcard.yellow {
        background-color: #FEFCE8;
        border-color: #FEF08A;
    }

.ni-lcard-inner {
    padding: 24px;
}

.ni-lcard h2 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 16px;
}

    .ni-lcard h2.tight {
        margin-bottom: 12px;
    }

.ni-lcard-body {
    color: var(--gray-700);
    line-height: 1.625;
}

    .ni-lcard-body > * + * {
        margin-top: 12px;
    }

    .ni-lcard-body.gap-lg > * + * {
        margin-top: 16px;
    }

    .ni-lcard-body h3 {
        font-weight: 500;
        color: var(--gray-900);
        padding-top: 8px;
    }

    .ni-lcard-body ul {
        list-style: disc;
        padding-left: 24px;
    }

        .ni-lcard-body ul > * + * {
            margin-top: 4px;
        }

        .ni-lcard-body ul.ni-list-lg > * + * {
            margin-top: 12px;
        }

        .ni-lcard-body ul ul {
            margin-top: 8px;
        }

.ni-lcard-lead {
    color: var(--gray-700);
    line-height: 1.625;
}

.ni-legal-link {
    color: #CA8A04;
}

    .ni-legal-link:hover {
        text-decoration: underline;
    }

/* Impressum icon cards */
.ni-lcard-icon-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ni-licon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .ni-licon svg {
        width: 20px;
        height: 20px;
    }

    .ni-licon.yellow {
        background-color: #FEF9C3;
        color: #A16207;
    }

    .ni-licon.gray {
        background-color: var(--gray-100);
        color: var(--gray-600);
    }

    .ni-licon.blue {
        background-color: #DBEAFE;
        color: #1D4ED8;
    }

    .ni-licon.red {
        background-color: #FEE2E2;
        color: #B91C1C;
    }

.ni-laddr {
    color: var(--gray-700);
}

    .ni-laddr > * + * {
        margin-top: 4px;
    }

    .ni-laddr .name {
        font-weight: 500;
    }

.ni-linfo {
    margin-top: 16px;
    color: var(--gray-700);
}

    .ni-linfo > * + * {
        margin-top: 8px;
    }

.ni-linfo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ni-linfo-label {
    color: var(--gray-500);
    width: 160px;
}

.ni-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.ni-legal-stand {
    margin-top: 32px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: var(--gray-400);
}