/* service.css – gemeinsames Service-Layout (.nrx-sp-*). Geladen auf IT, Webdesign, Reparatur, Kontakt und Preise. */

/* =============================================
		   SERVICE PAGE – HERO
		   ============================================= */
		.nrx-sp-hero {
			position: relative;
			min-height: 50vh;
			display: flex;
			align-items: center;
			overflow: hidden;
			background: var(--bg-dark);
		}

.nrx-sp-hero-bg {
			position: absolute;
			inset: 0;
			z-index: 0;
		}

.nrx-sp-hero-bg canvas {
			width: 100%;
			height: 100%;
			display: block;
		}

.nrx-sp-hero::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(180deg, rgba(10,10,15,0.2) 0%, rgba(10,10,15,0.75) 100%);
			z-index: 1;
			pointer-events: none;
		}

.nrx-sp-hero-content {
			position: relative;
			z-index: 2;
			padding: var(--gap-xxl) 10%;
		}

.nrx-sp-hero-content h1 {
			font-family: var(--fh);
			font-size: var(--fs-h1);
			color: var(--text-w);
			font-weight: 700;
			margin: 0 0 1rem;
		}

.nrx-sp-hero-content p {
			font-size: var(--fs-lg);
			color: var(--text-m);
			margin: 0 0 2rem;
			line-height: 1.6;
			max-width: 38rem;
		}

/* =============================================
		   SECTIONS (Dark / Light alternating)
		   ============================================= */
		.nrx-sp-dark {
			background: var(--bg-dark);
			color: var(--text-body);
		}

.nrx-sp-dark h2, .nrx-sp-dark h3, .nrx-sp-dark h4, .nrx-sp-dark h5 { color: var(--text-w); }

.nrx-sp-light {
			background: var(--white);
			color: #333;
		}

.nrx-sp-light h2, .nrx-sp-light h3, .nrx-sp-light h4, .nrx-sp-light h5 { color: var(--black); }

.nrx-sp-light p { color: #444; }

.nrx-sp-section {
			padding: var(--gap-xxl) 10%;
		}

.nrx-sp-container {
			max-width: var(--max-width);
			margin: 0 auto;
		}

/* =============================================
		   SERVICE CARDS (Leistungen Grid)
		   ============================================= */
		.nrx-sp-cards {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
			gap: 1.5rem;
			margin-top: var(--gap-lg);
		}

.nrx-sp-card {
			padding: 2rem;
			border-radius: var(--radius-lg);
			border: 1px solid var(--border);
			background: var(--bg-card);
			transition: border-color 0.3s, transform 0.3s;
		}

.nrx-sp-card:hover {
			border-color: var(--t-accent);
			transform: translateY(-0.25rem);
		}

.nrx-sp-light .nrx-sp-card:hover {
		border-color: var(--t-accent);
		}

.nrx-sp-card h3 {
			font-family: var(--fh);
			font-size: var(--fs-h5);
			margin: 0 0 0.5rem;
		}

.nrx-sp-card p {
			font-size: var(--fs-sm);
			line-height: 1.6;
			margin: 0;
		}

.nrx-sp-card-icon {
			width: 3rem;
			height: 3rem;
			border-radius: 0.75rem;
			background: rgba(var(--t-accent-rgb), 0.12);
			color: var(--t-accent);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 1rem;
		}

/* Light version */
		.nrx-sp-light .nrx-sp-card {
			background: #fff;
			border-color: #e0e0e0;
			box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.05);
		}

.nrx-sp-light .nrx-sp-card p { color: #555; }

/* =============================================
		   TWO-COLUMN (Text + Bild)
		   ============================================= */
		.nrx-sp-two-col {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--gap-xl);
			align-items: center;
		}

.nrx-sp-two-col--reverse { direction: rtl; }

.nrx-sp-two-col--reverse > * { direction: ltr; }

.nrx-sp-two-col img {
			width: 75%;
			height: auto;
			border-radius: var(--radius-lg);
		}

.nrx-sp-two-col h2 {
			font-family: var(--fh);
			font-size: var(--fs-h2);
			margin: 0 0 1rem;
		}

.nrx-sp-two-col p {
			font-size: var(--fs-body);
			line-height: 1.7;
			margin: 0 0 0.875rem;
		}

.nrx-sp-two-col ul {
			margin: 0 0 1rem;
			padding-left: 1.25rem;
			line-height: 1.8;
		}

.nrx-sp-two-col li {
			font-size: var(--fs-body);
			margin-bottom: 0.375rem;
		}

.nrx-sp-light .nrx-sp-two-col li { color: #444; }

/* =============================================
		   FAQ
		   ============================================= */
		.nrx-sp-faq {
			max-width: 50rem;
			margin: var(--gap-lg) auto 0;
		}

.nrx-sp-faq-title {
			font-family: var(--fh);
			font-size: var(--fs-h3);
			text-align: center;
			margin: 0 0 var(--gap-lg);
		}

.nrx-sp-faq-item {
			border-bottom: 1px solid var(--border);
		}

.nrx-sp-faq-q {
			width: 100%;
			background: none;
			border: none;
			padding: 1.125rem 0;
			font-family: var(--fb);
			font-size: var(--fs-body);
			font-weight: 600;
			color: var(--text-w);
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: left;
			transition: color 0.2s;
		}

.nrx-sp-faq-q:hover { color: var(--t-accent); }

.nrx-sp-faq-q svg { transition: transform 0.3s; flex-shrink: 0; margin-left: 1rem; }

.nrx-sp-faq-item.open .nrx-sp-faq-q svg { transform: rotate(180deg); }

.nrx-sp-faq-a {
			display: none;
			padding: 0 0 1.125rem;
			font-size: var(--fs-sm);
			line-height: 1.7;
			color: var(--text-m);
		}

.nrx-sp-faq-item.open .nrx-sp-faq-a { display: block; }

/* Light FAQ */
		.nrx-sp-light .nrx-sp-faq-q { color: var(--black); }

.nrx-sp-light .nrx-sp-faq-a { color: #555; }

.nrx-sp-light .nrx-sp-faq-item { border-color: #ddd; }

/* =============================================
		   CTA BANNER
		   ============================================= */
		.nrx-sp-cta {
			text-align: center;
			padding: var(--gap-xl);
			background: var(--bg-card);
			border: 1px solid var(--border);
			border-radius: var(--radius-lg);
			margin-top: var(--gap-xl);
		}

.nrx-sp-cta h2 {
			font-family: var(--fh);
			font-size: var(--fs-h3);
			margin: 0 0 0.75rem;
		}

.nrx-sp-cta p {
			color: var(--text-m);
			margin: 0 0 1.5rem;
		}

.nrx-sp-light .nrx-sp-cta {
			background: #fff;
			border-color: #e0e0e0;
			box-shadow: 0 0.25rem 1.5rem rgba(0,0,0,0.06);
		}

.nrx-sp-light .nrx-sp-cta p { color: #666; }

/* =============================================
		   THEME BUTTONS
		   ============================================= */
		.nrx-sp-btn {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.875rem 2rem;
			border-radius: var(--radius-pill);
			font-family: var(--fh);
			font-weight: 700;
			font-size: var(--fs-body);
			text-decoration: none;
			transition: all 0.3s;
			border: none;
			cursor: pointer;
		}

.nrx-sp-btn-filled {
			background: var(--t-accent);
			color: var(--black);
		}

.nrx-sp-btn-filled:hover {
			background: var(--t-accent-hover);
			transform: translateY(-0.125rem);
			box-shadow: 0 0.5rem 1.5rem rgba(var(--t-accent-rgb), 0.3);
			color: var(--black);
		}

.nrx-sp-btn-outline {
			background: transparent;
			border: 2px solid var(--t-accent);
			color: var(--t-accent);
		}

.nrx-sp-btn-outline:hover {
			background: var(--t-accent);
			color: var(--black);
		}

/* Light section: outline auf dunkel für Barrierefreiheit */
		.nrx-sp-light .nrx-sp-btn-outline {
			border-color: var(--dunkel);
			color: var(--dunkel);
		}

.nrx-sp-light .nrx-sp-btn-outline:hover {
			background: var(--dunkel);
			color: var(--white);
		}

/* =============================================
		   TIMELINE / ABLAUF
		   ============================================= */
		.nrx-sp-timeline-header {
			background: var(--bg-card);
			border-left: 3px solid var(--t-accent);
			border-radius: 0 var(--radius) var(--radius) 0;
			padding: 1.5rem 2rem;
			margin-bottom: var(--gap-lg);
		}

.nrx-sp-timeline-header h2 {
			font-family: var(--fh);
			font-size: var(--fs-h3);
			font-style: italic;
			margin: 0 0 0.375rem;
		}

.nrx-sp-timeline-header p {
			margin: 0;
			font-size: var(--fs-body);
		}

/* Light override */
		.nrx-sp-light .nrx-sp-timeline-header {
			background: #e8e8e8;
			border-left-color: var(--t-accent);
		}

.nrx-sp-light .nrx-sp-timeline-header h2 { color: var(--black); }

.nrx-sp-light .nrx-sp-timeline-header p { color: #555; }

.nrx-sp-timeline {
			display: flex;
			flex-direction: column;
			gap: 1.25rem;
			padding-left: 1.75rem;
		}

.nrx-sp-tl-item {
			display: flex;
			gap: 1.25rem;
			align-items: flex-start;
		}

.nrx-sp-tl-icon {
			width: 2.75rem;
			height: 2.75rem;
			border-radius: 50%;
			background: var(--t-accent);
			color: var(--black);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

.nrx-sp-tl-body {
			flex: 1;
			background: var(--bg-card);
			border-radius: var(--radius);
			padding: 1.25rem 1.5rem;
			border: 1px solid var(--border);
		}

.nrx-sp-tl-body h3 {
			font-family: var(--fh);
			font-size: var(--fs-h5);
			font-style: italic;
			color: var(--t-accent);
			margin: 0 0 0.375rem;
		}

.nrx-sp-tl-body p {
			font-size: var(--fs-sm);
			margin: 0;
			line-height: 1.6;
		}

/* Light override */
		.nrx-sp-light .nrx-sp-tl-body {
			background: rgba(0,0,0,0.04);
			border-color: rgba(0,0,0,0.08);
		}

.nrx-sp-light .nrx-sp-tl-body h3 { color: var(--t-accent); }

.nrx-sp-light .nrx-sp-tl-body p { color: #555; }

@media (max-width: 768px) {
			.nrx-sp-timeline { padding-left: 0; }
			.nrx-sp-timeline-header { padding: 1rem 1.25rem; }
			.nrx-sp-tl-body { padding: 1rem 1.25rem; }
		}

.nrx-sp-tl-optional {
			margin-left: 4rem;
			opacity: 0.85;
		}

.nrx-sp-tl-optional .nrx-sp-tl-body {
			border-style: dashed;
		}

@media (max-width: 768px) {
			.nrx-sp-tl-optional { margin-left: 1rem; }
		}

/* =============================================
		   CHECKLIST
		   ============================================= */
		.nrx-sp-checklist {
			list-style: none;
			padding: 0;
			margin: 1rem 0;
		}

.nrx-sp-checklist li {
			padding: 0.5rem 0 0.5rem 2rem;
			position: relative;
			font-size: var(--fs-body);
			line-height: 1.6;
		}

.nrx-sp-checklist li::before {
			content: '✓';
			position: absolute;
			left: 0;
			color: var(--t-accent);
			font-weight: 700;
		}

.nrx-sp-light .nrx-sp-checklist li { color: #444; }

/* =============================================
		   RESPONSIVE
		   ============================================= */
		@media (max-width: 1440px) {
			.nrx-sp-section,
			.nrx-sp-hero-content { padding-left: 5%; padding-right: 5%; }
		}

@media (max-width: 1024px) {
			.nrx-sp-two-col { grid-template-columns: 1fr; }
			.nrx-sp-two-col--reverse { direction: ltr; }
			.nrx-sp-two-col img { max-width: 28rem; margin: 0 auto; }
			.nrx-sp-hero { min-height: 40vh; }
		}

@media (max-width: 768px) {
			.nrx-sp-section,
			.nrx-sp-hero-content { padding-left: 4%; padding-right: 4%; }
			.nrx-sp-hero { min-height: 35vh; }
			.nrx-sp-cards { grid-template-columns: 1fr; }
			.nrx-sp-steps { grid-template-columns: 1fr 1fr; }
		}

@media (max-width: 480px) {
			.nrx-sp-steps { grid-template-columns: 1fr; }
		}

/* Light overrides */
		.nrx-sp-light .nrx-price-card {
			background: #fff;
			border-color: #e0e0e0;
			box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.05);
		}

.nrx-sp-light .nrx-price-card:hover {
			border-color: var(--t-accent);
		}

.nrx-sp-light .nrx-price-card-head h3 { color: var(--black); }

.nrx-sp-light .nrx-price-card-head p { color: #666; }

.nrx-sp-light .nrx-price-features li { color: #555; }










/* ---- Marken-Karten (Hub) – Zusatz zu .nrx-sp-card ---- */
.nrx-brand-card { display: flex; flex-direction: column; }
 
.nrx-brand-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .35rem;
    margin: 0 0 .75rem;
    padding: .25rem .7rem;
    border-radius: var(--radius-pill);
    background: rgba(var(--t-accent-rgb), .12);
    color: var(--t-accent);
    font-family: var(--fh);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: .02em;
    line-height: 1;
}


/* Partner-Badge (Karte + Seite) */
.nrx-brand-card { display: flex; flex-direction: column; }
.nrx-brand-badge {
    display: inline-flex; align-items: center; align-self: flex-start; gap: .35rem;
    margin: 0 0 .75rem; padding: .25rem .7rem;
    border-radius: var(--radius-pill);
    background: rgba(var(--t-accent-rgb), .12); color: var(--t-accent);
    font-family: var(--fh); font-weight: 700; font-size: var(--fs-xs);
    letter-spacing: .02em; line-height: 1;
}

/* Eyebrow-Pill (z. B. PREISÜBERSICHT) */
.nrx-brand-pill {
    display: inline-block; margin: 0 0 .75rem; padding: .3rem .9rem;
    border-radius: var(--radius-pill);
    background: rgba(var(--t-accent-rgb), .12); color: var(--t-accent);
    font-family: var(--fh); font-weight: 700; font-size: var(--fs-xs);
    letter-spacing: .08em; text-transform: uppercase;
}

/* Einfache Preis-Karte (nutzt .nrx-sp-card) – ohne preise.css */
.nrx-mp-card { display: flex; flex-direction: column; }
.nrx-mp-series { display: block; font-size: var(--fs-xs); color: #888; margin: .15rem 0 .9rem; line-height: 1.5; }
.nrx-mp-price { margin-top: auto; font-family: var(--fh); font-weight: 700; font-size: var(--fs-h5); color: #1D4B87; } /* Preis blau (§5) */
.nrx-mp-note { font-size: var(--fs-xs); color: #888; margin-top: var(--gap-md); }