/* ════════════════════════════════════════════════════════════════════
   acticon-page-modules.css
   Consolidated page-level styles for:
     – services/automation-integration.php   (ai-* classes)
     – services/index.php                    (svc-* classes)
     – new_index3_hero.php                   (ni-* classes)

   Do NOT modify style-4.min.css.
   Merge this file into style-4.min.css when all three pages go to
   production and no further page-level splits are expected.

   Structure
   ─────────────────────────────────────────────────────────────────
   1.  Shared base                  scroll, margins
   2.  Section labels               .ni-label / .ai-label+.svc-label
   3.  Shared button module         .ai-btn / .svc-btn (combined)
   4.  Shared trust strip           .ai-trust-* / .svc-trust-* (combined)
   5.  Shared CTA row               .ai-cta-row / .svc-cta-row (combined)
   6.  Shared service-card module   .ai-svc-* / .svc-* (combined base)
   7.  Automation page              pipeline, value prop, examples, why
   8.  Services-overview page       svc-section grid + responsive
   9.  Homepage (new_index3_hero)   ni-hero, proof strip, sections, FAQ
  10.  Shared responsive overrides
  11.  Page-specific responsive overrides
   ════════════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. SHARED BASE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

html { scroll-behavior: smooth; }

/* Anchor scroll clearance – keeps section headings clear of the fixed header.
   4.5 rem is the conservative value (original automation-integration value).
   services/index.php originally used 4 rem; the 0.5 rem difference (8 px)
   is imperceptible at runtime, and a single shared value avoids cascade
   conflicts when one file serves all three pages. */
#leistungen,
#kontakt    { scroll-margin-top: 4.5rem; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. SECTION LABELS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* .ai-label (automation) and .svc-label (services/index) are identical */
.ai-label,
.svc-label {
	display: block;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .2rem;
	text-transform: uppercase;
	color: rgb(23,24,215);
	margin-bottom: .875rem;
}
.ai-label-dim { color: rgba(255,255,255,.38); }

/* .ni-label (homepage) shares the pattern but uses opacity + inherit color */
.ni-label {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .2rem;
	text-transform: uppercase;
	opacity: .65;
	margin-bottom: 1rem;
	color: inherit;
}
.ni-label.blue   { color: rgb(23,24,215); opacity: 1; }
/* used on dark/coloured backgrounds (automation, why-acticon sections) */
.ni-label--dim   { color: rgba(255,255,255,.5); opacity: 1; }
/* centered section heading label (partners section) */
.ni-label--center { text-align: center; margin-bottom: 2rem; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. SHARED BUTTON MODULE
   .ai-btn (automation) and .svc-btn (services/index) are identical.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ai-btn,
.svc-btn {
	display: inline-block;
	background: rgb(23,24,215);
	color: #fff;
	padding: .8rem 2.25rem .75rem;
	font-family: inherit;
	font-size: .875rem;
	font-weight: 800;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: .2rem;
	line-height: 1;
	white-space: nowrap;
	-webkit-transition: background .2s;
	-moz-transition: background .2s;
	-o-transition: background .2s;
	transition: background .2s;
}
.ai-btn:hover,  .ai-btn:focus,
.svc-btn:hover, .svc-btn:focus { background: #000; color: #fff; }

/* Ghost variant */
.ai-btn-ghost,
.svc-btn-ghost {
	background: transparent;
	color: rgb(23,24,215);
	border: .125rem solid rgb(23,24,215);
}
.ai-btn-ghost:hover, .ai-btn-ghost:focus,
.svc-btn-ghost:hover,.svc-btn-ghost:focus { background: rgb(23,24,215); color: #fff; }

/* White variant – automation only, no svc- equivalent */
.ai-btn-white { background: #fff; color: rgb(23,24,215); }
.ai-btn-white:hover, .ai-btn-white:focus { background: rgb(23,24,215); color: #fff; }

/* Homepage primary / ghost buttons (ni-* names, different design) */
.ni-btn-primary {
	display: inline-block;
	background: rgb(23,24,215);
	color: #fff !important;
	text-decoration: none;
	font-size: .875rem;
	font-weight: 800;
	letter-spacing: .13rem;
	text-transform: uppercase;
	padding: .85rem 2.2rem .75rem;
	border-radius: .2rem;
	-webkit-transition: background .2s, color .2s;
	transition: background .2s, color .2s;
}
.ni-btn-primary:hover,
.ni-btn-primary:focus { background: #fff; color: rgb(23,24,215) !important; }

.ni-btn-ghost {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	font-size: .875rem;
	font-weight: 700;
	border-bottom: .063rem solid rgba(255,255,255,.45);
	padding-bottom: .15rem;
	-webkit-transition: border-color .2s, opacity .2s;
	transition: border-color .2s, opacity .2s;
}
.ni-btn-ghost:hover,
.ni-btn-ghost:focus { border-color: #fff; opacity: 1; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. SHARED TRUST STRIP
   .ai-trust-* (automation) and .svc-trust-* (services/index) are identical.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ai-trust-strip,
.svc-trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem .875rem;
	align-items: center;
	margin-top: 1.5rem;
	padding-top: 1.375rem;
	border-top: .063rem solid rgba(0,0,0,.08);
}
.ai-trust-item,
.svc-trust-item {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04rem;
	color: #555;
	display: flex;
	align-items: center;
	gap: .35rem;
}
.ai-trust-item::before,
.svc-trust-item::before {
	content: "";
	display: inline-block;
	width: .5rem;
	height: .5rem;
	background: rgb(23,24,215);
	border-radius: 50%;
	flex-shrink: 0;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. SHARED CTA ROW
   .ai-cta-row (automation) and .svc-cta-row (services/index) are identical.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ai-cta-row,
.svc-cta-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 2rem;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. SHARED SERVICE-CARD MODULE
   .ai-svc-* (automation) and .svc-* (services/index) share the same
   structural pattern. Small visual differences (min-height, opacity)
   are declared per-class after the shared base.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Section wrapper – shared structure, page-specific padding below */
.ai-svc-section,
.svc-section {
	background: #eef0f6;
	position: relative;
	isolation: isolate;
}
/* Default padding (mobile-first for svc-section; desktop for ai-svc-section) */
.svc-section     { padding: 4rem 0 5rem; }
.ai-svc-section  { padding: 5rem 0 5.5rem; }

/* Grid – same gap/margin; column strategy differs (see responsive section) */
.ai-svc-grid,
.svc-grid {
	gap: 1.25rem;
	margin-top: 2.5rem;
}
.svc-grid     { display: grid; grid-template-columns: 1fr; }
.ai-svc-grid  { display: grid; grid-template-columns: repeat(3, 1fr); }

/* Card – shared flex + transition base */
.ai-svc-card,
.svc-card {
	display: flex;
	flex-direction: column;
	-webkit-transition: box-shadow .2s, -webkit-transform .2s, background .2s;
	-moz-transition: box-shadow .2s, -moz-transform .2s, background .2s;
	-o-transition: box-shadow .2s, -o-transform .2s, background .2s;
	transition: box-shadow .2s, transform .2s, background .2s;
}
.ai-svc-card:hover,
.svc-card:hover {
	box-shadow: 0 .25rem 1.5rem rgba(23,24,215,.1), 0 .063rem .25rem rgba(0,0,0,.06);
	-webkit-transform: translateY(-.125rem);
	-moz-transform: translateY(-.125rem);
	-ms-transform: translateY(-.125rem);
	-o-transform: translateY(-.125rem);
	transform: translateY(-.125rem);
}

/* Card – per-class overrides (min-height and subtle opacity differences) */
.ai-svc-card {
	background: rgba(255,255,255,.78);
	border: .063rem solid rgba(0,0,0,.05);
	min-height: 17rem;
}
.svc-card {
	background: rgba(255,255,255,.82);
	border: .063rem solid rgba(0,0,0,.06);
	min-height: 16rem;
	text-decoration: none; /* card is an <a> on services/index */
}
.ai-svc-card:hover { background: rgba(255,255,255,.96); }
.svc-card:hover    { background: #fff; }

/* Top accent bar – identical */
.ai-svc-accent,
.svc-accent {
	height: .25rem;
	background: rgb(23,24,215);
	flex-shrink: 0;
	-webkit-transition: height .2s;
	-moz-transition: height .2s;
	-o-transition: height .2s;
	transition: height .2s;
}
.ai-svc-card:hover .ai-svc-accent,
.svc-card:hover    .svc-accent { height: .375rem; }

/* Card body / footer – identical */
.ai-svc-body,
.svc-body {
	padding: 1.5rem 1.625rem 1rem;
	flex: 1;
}
.ai-svc-footer,
.svc-footer {
	padding: .875rem 1.625rem 1.375rem;
	border-top: .063rem solid rgba(0,0,0,.06);
	margin-top: auto;
}

/* Card title – shared properties; letter-spacing differs by 0.01rem */
.ai-svc-title,
.svc-title {
	display: block;
	font-size: .875rem;
	font-weight: 800;
	text-transform: uppercase;
	color: #000;
	margin-bottom: .75rem;
	line-height: 1.3;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
.ai-svc-title { letter-spacing: .05rem; }
.svc-title    { letter-spacing: .06rem; }

/* Card body text – identical */
.ai-svc-text,
.svc-text { font-size: .875rem; line-height: 1.65; color: #404040; margin: 0; }

/* Card link – identical */
.ai-svc-link,
.svc-link {
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .07rem;
	text-transform: uppercase;
	color: rgb(23,24,215);
	text-decoration: none;
	display: inline-block;
	position: relative;
}
.ai-svc-link::after,
.svc-link::after {
	content: "";
	position: absolute;
	bottom: -.1rem; left: 0; right: 0;
	height: .063rem;
	background: rgb(23,24,215);
	-webkit-transition: height .15s;
	-moz-transition: height .15s;
	-o-transition: height .15s;
	transition: height .15s;
}
.ai-svc-link:hover::after,
.svc-card:hover .svc-link::after { height: .18rem; }

/* Mid-page CTA strip – automation only */
.ai-midcta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	border: .063rem solid rgba(0,0,0,.1);
	padding: 1.625rem 2rem;
	margin-top: 4rem;
	background: rgba(255,255,255,.65);
}
.ai-midcta p {
	font-size: 1.05rem;
	font-weight: 700;
	color: #111;
	margin: 0;
	line-height: 1.4;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. AUTOMATION PAGE — services/automation-integration.php
   All ai-* rules that are not part of the shared card/button/trust
   modules above.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Upper zone */
.ai-upper-zone { position: relative; }

/* Hero sub */
.ai-hero-sub {
	font-size: 1.25rem;
	font-weight: 700;
	color: #333;
	margin: .5rem 0 1.5rem;
	line-height: 1.25;
}

/* ── Value Proposition ── */
.ai-value-wrap {
	background: rgba(2,5,22,.9);
	border: .063rem solid rgba(255,255,255,.13);
	border-top: .063rem solid rgba(255,255,255,.18);
	border-radius: .25rem;
	padding: 2.75rem 3rem;
	margin-top: 4rem;
	backdrop-filter: blur(2px) brightness(.82);
	-webkit-backdrop-filter: blur(2px) brightness(.82);
	box-shadow: 0 8px 40px rgba(0,0,14,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
.ai-value-lead {
	font-size: 1.05rem;
	line-height: 1.75;
	color: rgba(255,255,255,.86);
	max-width: 50rem;
	margin: 0 0 2.5rem;
	border-bottom: .063rem solid rgba(255,255,255,.1);
	padding-bottom: 2.5rem;
}
.ai-value-lead strong { color: #fff; font-weight: 700; }
.ai-value-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}
.ai-pillar { padding: 0 2.25rem 0 0; border-right: .063rem solid rgba(255,255,255,.08); }
.ai-pillar:last-child  { border-right: none; padding-right: 0; }
.ai-pillar:not(:first-child) { padding-left: 2.25rem; }
.ai-pillar-icon {
	display: block;
	width: 1.375rem; height: 1.375rem;
	color: rgba(150,168,255,.82);
	margin-bottom: .875rem;
	flex-shrink: 0;
}
.ai-pillar-lbl {
	display: block;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .14rem;
	text-transform: uppercase;
	color: rgba(140,155,255,.85);
	margin-bottom: .75rem;
}
.ai-pillar p { font-size: .875rem; line-height: 1.7; color: rgba(255,255,255,.8); margin: 0; }

/* ── Pipeline Visualisation ── */
.ai-pipe-wrap {
	background: #02071a;
	padding: 4rem 0 4.5rem;
	margin-top: 6.875rem;
	position: relative;
	overflow: hidden;
}
.ai-pipe-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
	background-size: 2.5rem 2.5rem;
	pointer-events: none;
}
.ai-pipe-wrap::after {
	content: "";
	position: absolute;
	top: 58%; left: 50%;
	transform: translate(-50%,-50%);
	width: 34rem; height: 26rem;
	background: radial-gradient(ellipse at center, rgba(23,24,215,.3) 0%, transparent 68%);
	pointer-events: none;
	z-index: 0;
}
.ai-pipe-inner { position: relative; z-index: 1; }
.ai-pipe-cols {
	display: grid;
	grid-template-columns: 1fr 5rem 1.15fr 5rem 1fr;
	align-items: stretch;
	margin-top: 2.5rem;
}
.ai-pipe-col {
	display: flex;
	flex-direction: column;
	border: .063rem solid rgba(255,255,255,.1);
	overflow: hidden;
	position: relative;
}
.ai-pipe-col--in  { background: rgba(255,255,255,.035); border-right: none; }
.ai-pipe-col--in::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: .2rem; height: 100%;
	background: linear-gradient(to bottom, transparent 5%, rgba(255,255,255,.32) 50%, transparent 95%);
	pointer-events: none; z-index: 1;
}
.ai-pipe-col--out { background: rgba(23,24,215,.07); border-color: rgba(23,24,215,.22); border-left: none; }
.ai-pipe-col--out::before {
	content: "";
	position: absolute;
	top: 0; right: 0;
	width: .2rem; height: 100%;
	background: linear-gradient(to bottom, transparent 5%, rgba(90,110,255,.5) 50%, transparent 95%);
	pointer-events: none; z-index: 1;
}
.ai-pipe-col--engine {
	background: linear-gradient(165deg, #1c1de6 0%, #1718d7 42%, #1012bb 100%);
	border-color: transparent;
	box-shadow:
		0 0 0 1px rgba(90,105,255,.45),
		0 0 3.5rem rgba(23,24,215,.65),
		0 0 .75rem rgba(23,24,215,.88),
		inset 0 1px 0 rgba(255,255,255,.15),
		inset 0 -1px 0 rgba(0,0,28,.45);
	position: relative; z-index: 2;
}
.ai-pipe-col--engine::before {
	content: "";
	position: absolute;
	inset: .5rem;
	border: 1px solid rgba(255,255,255,.1);
	pointer-events: none; z-index: 0;
}
.ai-pipe-col--engine .ai-pipe-col-body::after {
	content: "";
	position: absolute;
	left: 0; right: 0; height: 50%;
	background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.032) 50%, transparent 100%);
	animation: engineScan 5s ease-in-out infinite;
	pointer-events: none; z-index: 0;
}
.ai-pipe-col--engine .ai-pipe-col-body { position: relative; overflow: hidden; }
@keyframes engineScan {
	0%, 100% { top: -55%; }
	50%       { top: 115%; }
}
.ai-pipe-arrow {
	display: flex;
	align-items: center; justify-content: center; flex-direction: column;
	gap: .25rem;
	color: rgba(100,118,255,.82);
	position: relative;
}
.ai-pipe-arrow::before {
	content: "";
	position: absolute;
	top: 50%; left: 0; right: 0; height: 1px;
	background: linear-gradient(to right, rgba(255,255,255,.06), rgba(80,100,255,.55), rgba(255,255,255,.06));
	transform: translateY(-50%);
}
.ai-pipe-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	width: .5rem; height: .5rem;
	border-radius: 50%;
	background: rgba(145,160,255,.95);
	box-shadow: 0 0 .5rem rgba(100,120,255,.9), 0 0 1.2rem rgba(80,100,255,.5);
	transform: translateY(-50%);
	animation: dataPacket 3s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes dataPacket {
	0%   { left: 8%; opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { left: 86%; opacity: 0; }
}
.ai-pipe-arrow svg {
	width: 1.5rem; height: 1.5rem;
	position: relative; z-index: 1;
	background: #02071a;
	padding: .3rem;
	box-sizing: content-box;
	filter: drop-shadow(0 0 4px rgba(90,110,255,.6));
}
.ai-pipe-col-head {
	padding: .875rem 1.375rem .75rem;
	border-bottom: .063rem solid rgba(255,255,255,.09);
	font-size: .6rem; font-weight: 800;
	letter-spacing: .2rem; text-transform: uppercase;
	color: rgba(255,255,255,.28);
	flex-shrink: 0;
	display: flex; align-items: center; gap: .65rem;
}
.ai-pipe-col--engine .ai-pipe-col-head {
	color: rgba(255,255,255,.55);
	border-bottom-color: rgba(255,255,255,.15);
	justify-content: center;
	position: relative; z-index: 1;
}
.ai-pipe-col--out .ai-pipe-col-head { color: rgba(140,155,255,.5); border-bottom-color: rgba(23,24,215,.2); }
.ai-pipe-step {
	font-size: .5rem; font-weight: 900;
	color: rgba(255,255,255,.2);
	border: 1px solid rgba(255,255,255,.13);
	padding: .1rem .35rem;
	letter-spacing: .04rem; flex-shrink: 0;
}
.ai-pipe-col--engine .ai-pipe-step { color: rgba(255,255,255,.45); border-color: rgba(255,255,255,.25); }
.ai-pipe-col--out    .ai-pipe-step { color: rgba(130,148,255,.5);  border-color: rgba(80,100,255,.25); }
.ai-pipe-col-body { padding: 1.25rem 1.375rem 1.5rem; flex: 1; }
.ai-pipe-col--engine .ai-pipe-col-body {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	text-align: center; gap: 1.375rem;
}
.ai-engine-name {
	display: block;
	font-size: .78rem; font-weight: 900;
	letter-spacing: .24rem; text-transform: uppercase;
	color: #fff; line-height: 1.45;
	text-shadow: 0 0 2.5rem rgba(255,255,255,.45), 0 0 5rem rgba(255,255,255,.2);
	position: relative; z-index: 1;
}
.ai-engine-divider {
	width: 3rem; height: 1px;
	background: linear-gradient(to right, transparent, rgba(255,255,255,.45), transparent);
	margin: 0 auto;
	position: relative; z-index: 1;
}
.ai-engine-tools { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; position: relative; z-index: 1; }
.ai-engine-tool {
	font-size: .68rem; font-weight: 700;
	letter-spacing: .04rem;
	color: rgba(255,255,255,.88);
	background: rgba(255,255,255,.13);
	padding: .3rem .75rem;
	border-radius: .1rem; white-space: nowrap;
	border: 1px solid rgba(255,255,255,.17);
	transition: background .15s, border-color .15s;
}
.ai-engine-tool:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.3); }
.ai-engine-status {
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .58rem; font-weight: 700;
	letter-spacing: .14rem; text-transform: uppercase;
	color: rgba(140,255,175,.85);
	background: rgba(0,190,80,.1);
	border: 1px solid rgba(0,200,90,.22);
	padding: .22rem .7rem .22rem .55rem;
	border-radius: 2rem;
	position: relative; z-index: 1;
}
.ai-engine-status::before {
	content: "";
	width: .42rem; height: .42rem;
	border-radius: 50%;
	background: rgb(70,215,125);
	box-shadow: 0 0 .5rem rgb(70,215,125);
	flex-shrink: 0;
	animation: statusPulse 2.2s ease-in-out infinite;
}
@keyframes statusPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: .45; transform: scale(.82); }
}
.ai-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.ai-tag {
	display: inline-block;
	padding: .28rem .65rem;
	font-size: .75rem; font-weight: 700; letter-spacing: .03rem;
	color: rgba(255,255,255,.72);
	background: rgba(255,255,255,.07);
	border: .063rem solid rgba(255,255,255,.13);
	border-radius: .1rem;
	transition: background .15s, color .15s, border-color .15s;
	cursor: default;
}
.ai-tag:hover { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.22); }
.ai-tag-out { color: rgba(195,210,255,.88); background: rgba(23,24,215,.18); border-color: rgba(23,24,215,.36); }
.ai-tag-out:hover { background: rgba(23,24,215,.35); color: #fff; border-color: rgba(80,100,255,.5); }
.ai-pipe-cta {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem; flex-wrap: wrap;
	border: .063rem solid rgba(255,255,255,.12);
	padding: 1.5rem 2rem; margin-top: 2.5rem;
	background: rgba(255,255,255,.03);
}
.ai-pipe-cta p { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,.88); margin: 0; line-height: 1.4; }

/* ── Examples: horizontal scroll rail ── */
.ai-ex-section {
	position: relative;
	isolation: isolate;
	background: rgba(3,6,24,.72);
}
.ai-ex-section .dark-box {
	background: rgba(5,9,32,.96);
	border: 1px solid rgba(255,255,255,.07);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.03);
}
.ai-rail-wrap { margin-top: 2rem; position: relative; }
.ai-rail {
	display: flex; gap: 1.125rem;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.2) transparent;
	padding-bottom: .875rem;
	cursor: grab;
}
.ai-rail:active { cursor: grabbing; }
.ai-rail::-webkit-scrollbar { height: .25rem; }
.ai-rail::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: .25rem; }
.ai-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: .25rem; }
.ai-ex-card {
	flex: 0 0 calc(33.33% - .75rem);
	min-width: 18rem;
	scroll-snap-align: start;
	background: rgba(255,255,255,.09);
	border: .063rem solid rgba(255,255,255,.14);
	border-top: .063rem solid rgba(255,255,255,.2);
	padding: 1.375rem 1.5rem 1.5rem;
	display: flex; flex-direction: column; gap: .625rem;
	transition: background .2s, border-color .2s, box-shadow .2s;
	box-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.ai-ex-card:hover {
	background: rgba(30,40,220,.24);
	border-color: rgba(80,100,255,.42);
	box-shadow: 0 2px 18px rgba(23,24,215,.22);
}
.ai-ex-cat {
	display: inline-block;
	font-size: .63rem; font-weight: 800;
	letter-spacing: .1rem; text-transform: uppercase;
	color: rgba(200,215,255,.92);
	border: .063rem solid rgba(165,180,255,.38);
	padding: .18rem .55rem; border-radius: .1rem;
	align-self: flex-start;
}
.ai-ex-cat--migration { color: #5dc98e; border-color: rgba(55,162,110,.42); }
.ai-ex-cat--cloud     { color: #22d4cf; border-color: rgba(18,180,175,.42); }
.ai-ex-cat--prod      { color: #e0a82a; border-color: rgba(210,155,32,.42); }
.ai-ex-cat--process   { color: #aa7df4; border-color: rgba(140,72,250,.42); }
.ai-ex-cat--doc       { color: rgba(255,255,255,.68); border-color: rgba(255,255,255,.24); }
.ai-ex-flow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ai-ex-from {
	display: inline-block;
	font-size: .72rem; font-weight: 800; letter-spacing: .04rem; text-transform: uppercase;
	color: rgba(255,255,255,.9); background: rgba(255,255,255,.13);
	padding: .22rem .55rem; border-radius: .1rem; white-space: nowrap;
}
.ai-ex-to {
	display: inline-block;
	font-size: .72rem; font-weight: 800; letter-spacing: .04rem; text-transform: uppercase;
	color: rgba(205,218,255,.96); background: rgba(35,45,220,.42);
	padding: .22rem .55rem; border-radius: .1rem; white-space: nowrap;
}
.ai-ex-arrow { color: rgba(255,255,255,.48); font-size: .875rem; flex-shrink: 0; }
.ai-ex-desc  { font-size: .85rem; line-height: 1.65; color: rgba(255,255,255,.84); margin: 0; flex: 1; }
.ai-rail-hint {
	font-size: .72rem; font-weight: 700; letter-spacing: .1rem;
	text-transform: uppercase; color: rgba(255,255,255,.44);
	text-align: right; margin-top: .75rem;
}

/* ── Why Acticon ── */
.ai-why-section {
	background: #f4f5fb;
	padding: 5rem 0 5.5rem;
	position: relative;
	isolation: isolate;
}
.ai-why-section::before {
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(circle, rgba(23,24,215,.07) 1px, transparent 1px);
	background-size: 1.5rem 1.5rem;
	pointer-events: none; z-index: 0;
}
.ai-why-section > * { position: relative; z-index: 1; }
.ai-why-intro { text-align: center; max-width: 46rem; margin: 0 auto; }
.ai-why-lead  { font-size: 1.05rem; line-height: 1.65; color: #505060; margin: 1.25rem 0 0; }
.ai-why-grid  {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem; margin-top: 2.5rem; text-align: left;
}
.ai-why-card {
	background: rgba(255,255,255,.88);
	padding: 1.875rem 1.875rem 1.875rem 2.125rem;
	border: .063rem solid rgba(23,24,215,.1);
	border-left: .25rem solid rgb(23,24,215);
	transition: box-shadow .2s, background .2s;
}
.ai-why-card:hover { background: #fff; box-shadow: 0 .375rem 1.5rem rgba(23,24,215,.1); }
.ai-why-title {
	display: block;
	font-size: .95rem; font-weight: 800;
	letter-spacing: .03rem; color: #000;
	margin-bottom: .625rem; line-height: 1.3;
}
.ai-why-card p { font-size: .875rem; line-height: 1.65; color: #444; margin: 0; }

/* Scoped contact headline hyphenation for automation-integration.php */
#kontakt .mainheadline {
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. SERVICES OVERVIEW PAGE — services/index.php
   svc-section and svc-grid responsive overrides are in section 10.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. HOMEPAGE — new_index3_hero.php  (ni-* classes)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Section spacing rhythm ── */
.ni-section { padding: 4rem 0; }
@media (min-width: 37.5rem)  { .ni-section { padding: 5rem 0; } }
@media (min-width: 54.75rem) { .ni-section { padding: 5.5rem 0; } }

/* ── Background utilities ── */
.ni-bg-white    { background: #fff; }
.ni-bg-offwhite { background: #f6f7ff; }

/* ── Hero box ── */
#ni-hero { position: relative; z-index: 1; padding-bottom: 4rem; }
.ni-hero-box {
	color: #fff;
	padding: 2.8rem 2rem 2.5rem;
	background: rgba(0,2,22,.80);
	position: relative;
}
@media (min-width: 37.5rem)  { .ni-hero-box { padding: 3.5rem 3rem 3rem; } }
@media (min-width: 54.75rem) { .ni-hero-box { padding: 4rem 4.5rem 3.5rem; max-width: 56rem; } }

/* ── H1 ── */
.ni-h1 {
	font-size: 1.85rem; font-weight: 800;
	line-height: 1.13; letter-spacing: -.01rem;
	-webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual;
	margin-bottom: 1.4rem; color: #fff;
}
@media (min-width: 37.5rem)  { .ni-h1 { font-size: 2.6rem; } }
@media (min-width: 54.75rem) { .ni-h1 { font-size: 3rem; } }

/* ── Hero subheadline ── */
.ni-hero-sub {
	font-size: 1.05rem; line-height: 1.65; opacity: .9;
	max-width: 44rem; margin-bottom: 2.2rem; color: #fff;
}
@media (min-width: 37.5rem) { .ni-hero-sub { font-size: 1.15rem; } }

/* ── CTA group ── */
.ni-cta-group {
	display: flex; flex-wrap: wrap;
	gap: 1rem 1.5rem; align-items: center; margin-bottom: 1.8rem;
}

/* ── Hero trust row ── */
.ni-hero-trust-row {
	display: flex; flex-wrap: wrap;
	gap: .45rem 1.4rem; align-items: center;
}
.ni-hero-trust-item {
	display: flex; align-items: center; gap: .35rem;
	font-size: .68rem; letter-spacing: .1rem;
	text-transform: uppercase; opacity: .65;
	color: #fff; line-height: 1;
}

/* ── CSS-only pulsing status dot ── */
.ni-pulse-dot {
	display: inline-block;
	width: .5rem; height: .5rem;
	background: #4ade80; border-radius: 50%;
	flex-shrink: 0; position: relative;
}
.ni-pulse-dot:after {
	content: "";
	position: absolute; inset: 0;
	border-radius: 50%; background: #4ade80;
	-webkit-animation: ni-pulse 2.4s ease-out infinite;
	animation: ni-pulse 2.4s ease-out infinite;
}
@-webkit-keyframes ni-pulse {
	0%   { -webkit-transform: scale(1);   opacity: .55; }
	65%  { -webkit-transform: scale(2.4); opacity: 0;   }
	100% { -webkit-transform: scale(2.4); opacity: 0;   }
}
@keyframes ni-pulse {
	0%   { transform: scale(1);   opacity: .55; }
	65%  { transform: scale(2.4); opacity: 0;   }
	100% { transform: scale(2.4); opacity: 0;   }
}

/* ── Proof strip ── */
.ni-proof-strip {
	background: #fff;
	border-bottom: .063rem solid rgba(23,24,215,.1);
	padding: 2rem 0;
}
.ni-proof-inner {
	display: flex; flex-wrap: wrap;
	gap: 1.5rem 0; justify-content: center; align-items: stretch;
	max-width: 75rem; margin: 0 auto; padding: 0 4%;
}
.ni-proof-item {
	text-align: center;
	flex: 1 1 10rem;
	padding: .25rem 1.5rem;
}
.ni-proof-item + .ni-proof-item { border-left: .063rem solid rgba(23,24,215,.13); }
.ni-proof-value {
	display: block;
	font-size: 1.65rem; font-weight: 800;
	color: rgb(23,24,215); line-height: 1; letter-spacing: -.01rem;
}
.ni-proof-value--word { font-size: 1.15rem; padding-top: .25rem; }
.ni-proof-label {
	display: block;
	font-size: .68rem; text-transform: uppercase;
	letter-spacing: .1rem; color: #777;
	margin-top: .4rem; line-height: 1.4;
}

/* ── Service cards (homepage) ── */
.ni-services .b3 article {
	border-top: .2rem solid transparent;
	-webkit-transition: border-color .2s, box-shadow .2s;
	transition: border-color .2s, box-shadow .2s;
}
.ni-services .b3 article:hover {
	border-top-color: rgb(23,24,215);
	box-shadow: 0 .3rem 1.5rem rgba(23,24,215,.07);
}
.ni-service-prop {
	display: block;
	font-size: .68rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .13rem;
	color: rgb(23,24,215); margin-bottom: .65rem;
}

/* ── Automation spotlight ── */
.ni-automation {
	background: #000518; color: #fff;
	padding: 5rem 0; position: relative; overflow: hidden;
}
.ni-automation:before {
	content: "";
	position: absolute; inset: 0;
	background: top center / cover no-repeat url("../img/bg_artwork.webp");
	opacity: .06; pointer-events: none;
}
.ni-automation .c { position: relative; z-index: 1; }
.ni-auto-stat {
	font-size: 3.5rem; font-weight: 800;
	color: #8f9eff; line-height: 1; display: block;
}
/* body paragraph inside .ni-automation dark section */
.ni-automation-body {
	color: rgba(255,255,255,.82);
	font-size: 1.05rem; line-height: 1.65;
	max-width: 42rem; margin-top: 1rem;
}
.ni-automation-footer .ni-btn--nowrap { white-space: nowrap; }
.ni-auto-stat-label {
	font-size: .75rem; text-transform: uppercase;
	letter-spacing: .12rem; color: rgba(255,255,255,.6);
	display: block; margin-top: .3rem; margin-bottom: 2.5rem;
}
.ni-auto-grid { display: grid; gap: .9rem; margin-top: 2.5rem; }
@media (min-width: 37.5rem)  { .ni-auto-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 54.75rem) { .ni-auto-grid { grid-template-columns: 1fr 1fr 1fr; } }
.ni-auto-item {
	padding: 1.1rem 1.2rem 1.1rem .9rem;
	border-left: .18rem solid rgb(23,24,215);
	background: rgba(255,255,255,.045);
}
.ni-auto-item strong {
	display: block;
	font-size: .72rem; font-weight: 800;
	letter-spacing: .1rem; text-transform: uppercase;
	color: #c8cfff; margin-bottom: .35rem; line-height: 1.3;
}
.ni-auto-item p { font-size: .875rem; line-height: 1.55; color: rgba(255,255,255,.85); }
.ni-automation-footer {
	margin-top: 3rem; padding-top: 2rem;
	border-top: .063rem solid rgba(255,255,255,.1);
	display: flex; flex-wrap: wrap;
	gap: 1.5rem; align-items: center; justify-content: space-between;
}
.ni-automation-footer p {
	color: rgba(255,255,255,.72);
	font-size: 1rem; font-style: italic;
	max-width: 36rem; line-height: 1.5;
}

/* ── Why ACTICON – 4 pillars ── */
.ni-pillars { display: grid; gap: 2rem; margin-top: 3rem; }
@media (min-width: 37.5rem)  { .ni-pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 54.75rem) { .ni-pillars { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1.5rem; margin-top: 3.5rem; } }
.ni-pillar {
	border-top: .15rem solid rgba(255,255,255,.25);
	padding-top: 1.5rem;
}
.ni-pillar h3 {
	font-size: .95rem; font-weight: 800;
	letter-spacing: .07rem; margin-bottom: .75rem;
	line-height: 1.25; color: #fff; text-transform: uppercase;
}
.ni-pillar p { font-size: .9rem; line-height: 1.65; color: rgba(255,255,255,.82); }

/* ── Regional section ── */
.ni-regional { padding: 5rem 0; background: rgb(230,243,241); }
@media (min-width: 54.75rem) {
	.ni-regional-inner {
		display: grid; grid-template-columns: 1fr 1fr;
		gap: 5rem; align-items: center;
	}
}
.ni-regional h2 { margin-bottom: 1.5rem; }
.ni-regional p + p { margin-top: 1rem; }
.ni-regional-claim {
	margin-top: 2.5rem;
	background: rgba(0,2,22,.9); color: #fff;
	padding: 2.8rem 2.5rem;
}
@media (min-width: 54.75rem) { .ni-regional-claim { margin-top: 0; } }
.ni-regional-claim-headline {
	font-size: 1.3rem; font-weight: 800; line-height: 1.25;
	margin-bottom: 1.2rem; color: #fff; letter-spacing: -.01rem;
}
.ni-regional-claim-body {
	font-size: .9rem; line-height: 1.7;
	color: rgba(255,255,255,.78); margin-bottom: 1.5rem;
}
.ni-regional-claim-facts {
	display: flex; flex-direction: column; gap: .6rem;
	border-top: .063rem solid rgba(255,255,255,.15); padding-top: 1.4rem;
}
.ni-regional-claim-fact {
	font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .12rem;
	color: rgba(255,255,255,.55);
	display: flex; align-items: center; gap: .5rem;
}
.ni-regional-claim-fact:before {
	content: "";
	display: inline-block;
	width: .25rem; height: .25rem;
	background: rgb(23,24,215); border-radius: 50%; flex-shrink: 0;
}

/* ── Partners & Ecosystem ── */
.ni-partners {
	background: #fff;
	padding: 3rem 0;
	border-top: .063rem solid #eee;
	border-bottom: .063rem solid #eee;
}

/* Two-tier layout */
.ni-eco-tier {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ni-eco-tier--tech {
	margin-top: 2rem;
	padding-top: 1.75rem;
	width: 100%;
	border-top: .063rem solid #eee;
}

/* Tier sub-labels – subordinate, purely contextual */
.ni-eco-tier-label {
	display: block;
	text-align: center;
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: #c4c4d0;
	margin-bottom: 1.25rem;
}

/* Technology chips */
.ni-tech-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
}
.ni-tech-chip {
	display: inline-block;
	padding: .28em .9em .3em;
	font-size: .78rem;
	color: rgba(23,24,215,.72);   /* brand blue at reduced opacity – calm, on-brand */
	background: rgba(23,24,215,.04);
	border: .063rem solid rgba(23,24,215,.18);
	border-radius: 2em;
	text-decoration: none;
	letter-spacing: .02em;
	transition: background .18s, border-color .18s, color .18s;
}
.ni-tech-chip:hover {
	background: rgba(23,24,215,.09);
	border-color: rgba(23,24,215,.38);
	color: rgb(23,24,215);
}

/* ── FAQ ── */
.ni-faq { background: #fff; padding: 4.5rem 0; }
.ni-faq-list { margin-top: 2.5rem; max-width: 50rem; }
details.ni-faq-item { border-bottom: .063rem solid rgba(23,24,215,.14); }
details.ni-faq-item summary {
	font-weight: 700; font-size: .975rem;
	cursor: pointer; list-style: none;
	position: relative;
	padding: 1.25rem 2.5rem 1.25rem 0;
	color: #000; line-height: 1.45;
	-webkit-user-select: none; user-select: none;
}
details.ni-faq-item summary::-webkit-details-marker { display: none; }
details.ni-faq-item summary::marker { display: none; }
details.ni-faq-item summary:after {
	content: "+";
	position: absolute;
	right: .1rem; top: 1.15rem;
	font-size: 1.3rem; font-weight: 300;
	color: rgb(23,24,215); line-height: 1;
	-webkit-transition: -webkit-transform .2s;
	transition: transform .2s;
}
details.ni-faq-item[open] summary:after {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
details.ni-faq-item .ni-faq-answer {
	padding-bottom: 1.4rem;
	font-size: .925rem; line-height: 1.7; color: #333;
	max-width: 44rem;
}
details.ni-faq-item .ni-faq-answer a {
	color: rgb(23,24,215);
	text-decoration: underline;
	text-underline-offset: .15rem;
}

/* ── Final CTA / Contact section ── */
.ni-contact-intro {
	max-width: 33rem; margin: 0 auto 2.5rem; text-align: center;
}
.ni-contact-intro .mainheadline { margin-bottom: 1rem; }
#ni-kontakt {
	position: relative; z-index: 1;
	overflow: hidden; background-color: #000;
}

/* ── Section head utility ── */
.ni-section-head { margin-bottom: 3rem; }
.ni-section-head h2.mainheadline { margin-bottom: .8rem; }
.ni-section-head p { max-width: 40rem; font-size: 1rem; line-height: 1.65; opacity: .85; }

/* ── Brand signature: 3-layer hero composition ── */
#logo-main.ni-brand-sig { margin-bottom: 1.75rem; }
#logo-main.ni-brand-sig img { max-width: 20rem; }
#ni-hero > .c { position: relative; z-index: 2; }
@media (min-width: 37.5rem) {
	#logo-main.ni-brand-sig     { margin-bottom: 3rem; }
	#logo-main.ni-brand-sig img { max-width: 26rem; }
}
@media (min-width: 54.75rem) {
	#logo-main.ni-brand-sig     { margin-bottom: 4.5rem; }
	#logo-main.ni-brand-sig img { max-width: 32rem; }
}

/* ── Header logo: hidden while hero is in view ── */
body.ni-page-hero #logo {
	opacity: 0;
	-webkit-transition: opacity .4s ease;
	transition: opacity .4s ease;
}
body.ni-page-hero.ni-logo-show #logo {
	opacity: 1;
	top: 1.75rem;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. SHARED RESPONSIVE OVERRIDES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Mobile: stack CTA row – ai and svc share identical behaviour */
@media (max-width: 37.49rem) {
	.ai-cta-row,
	.svc-cta-row { flex-direction: column; align-items: flex-start; }
}

/* Services overview: svc-grid responsive columns */
@media (min-width: 30rem) {
	.svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 54.75rem) {
	.svc-grid     { grid-template-columns: repeat(3, 1fr); }
	.svc-section  { padding: 5rem 0 5.5rem; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. PAGE-SPECIFIC RESPONSIVE OVERRIDES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Automation page responsive ── */
@media (max-width: 62rem) {
	.ai-value-wrap { padding: 2rem 2rem; }
	.ai-pipe-cols { grid-template-columns: 1fr; }
	.ai-pipe-arrow { display: none; }
	.ai-pipe-col { margin-bottom: .063rem; border-right: .063rem solid rgba(255,255,255,.1); border-left: .063rem solid rgba(255,255,255,.1); }
	.ai-pipe-col--out { border-color: rgba(23,24,215,.22); }
	.ai-pipe-col--engine { box-shadow: 0 0 2rem rgba(23,24,215,.5); }
	.ai-pipe-col--engine::before { display: none; }
	.ai-pipe-col-body { padding: 1.125rem 1.25rem 1.375rem; }
	.ai-pipe-col--engine .ai-pipe-col-body { text-align: left; align-items: flex-start; }
	.ai-pipe-wrap::after { display: none; }
}
@media (max-width: 54.74rem) {
	.ai-value-pillars { grid-template-columns: 1fr; gap: 0; }
	.ai-pillar { border-right: none; border-top: .063rem solid rgba(255,255,255,.1); padding: 1.25rem 0; }
	.ai-pillar:first-child { border-top: none; padding-top: 0; }
	.ai-pillar:not(:first-child) { padding-left: 0; }
	.ai-svc-grid { grid-template-columns: repeat(2, 1fr); }
	.ai-ex-card  { flex: 0 0 calc(50% - .5625rem); }
	.ai-why-grid { grid-template-columns: 1fr; }
	.ai-midcta   { flex-direction: column; align-items: flex-start; padding: 1.375rem 1.5rem; }
	.ai-pipe-cta { flex-direction: column; align-items: flex-start; padding: 1.375rem 1.5rem; }
}
@media (max-width: 37.49rem) {
	.ai-svc-grid  { grid-template-columns: 1fr; }
	.ai-ex-card   { flex: 0 0 85%; }
	.ai-value-lead { font-size: 1rem; }
	.ai-hero-sub   { font-size: 1.1rem; }
	.ai-value-wrap { padding: 1.75rem 1.375rem; }
}
@media (max-width: 30rem) {
	.ai-pipe-wrap { padding: 2.5rem 0 3rem; }
	.ai-pipe-col-body { padding: 1rem .875rem 1.25rem; }
	#kontakt .mainheadline { font-size: 1.625rem; line-height: 1.25; }
}

/* ── Homepage responsive ── */
@media (max-width: 29.9rem) {
	.ni-proof-strip { padding: 1rem 0; }
	.ni-proof-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.ni-proof-item {
		flex: 0 0 auto;
		box-sizing: border-box;
		width: 100%;
		padding: .4rem 1.5rem;
		text-align: center;
	}
	.ni-proof-item + .ni-proof-item {
		border-left: none;
		border-top: .063rem solid rgba(23,24,215,.13);
		padding-top: .4rem;
	}
}
@media (max-width: 37.4rem) {
	.ni-automation,
	.ni-regional { padding: 3.5rem 0; }
	.ni-auto-stat { font-size: 2.75rem; }
	.ni-automation-footer {
		flex-direction: column;
		gap: 1rem;
		align-items: flex-start;
	}
}