/*!
 * NARO Security - add-ons
 *
 * Everything that is not part of the original one-pager design lives here so
 * assets/css/naro-security.css stays byte-identical to the delivered template.
 *
 *  1. Sticky header
 *  2. Floating action rail (desktop, right edge)
 *  3. Mobile action bar (fixed bottom)
 *  4. Mobile menu drawer
 *  5. Legal pages (Impressum / Datenschutz)
 */

:root {
	--fab: 56px;
	--bar-h: 64px;
	--head-h: 68px;
	--wa: #25d366;
}

/* ============================================================
   1. STICKY HEADER (all breakpoints)

   naro-security.css positions the bar with `position:absolute;top:0`,
   so it scrolls away with the page. Switching to `fixed` pins it on
   every device and costs nothing at rest: an absolutely positioned bar
   at top:0 takes up no flow space either, so the hero and every page
   below keep their exact original spacing.
   ========================================================== */
header.nav {
	position: fixed;
	transition: box-shadow .3s ease;
}

/* soft separation once the page has moved (JS toggles .is-stuck).
   an inset line instead of a real border, so the 68px height is untouched */
header.nav.is-stuck {
	box-shadow: 0 8px 24px rgba(1, 10, 26, .55), inset 0 -1px 0 rgba(255, 255, 255, .09);
}

/* in-page anchors have to clear the pinned bar, otherwise every
   #leistungen / #kontakt jump lands underneath it */
section[id] {
	scroll-margin-top: calc(var(--head-h) + 14px);
}

/* keep the bar below the WordPress admin bar when logged in.
   WP switches the admin bar to 46px at 782px and stops pinning it at 600px. */
body.admin-bar header.nav {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar header.nav {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar header.nav {
		top: 0;
	}
}

/* ------------------------------------------------------------
   LANGUAGE SWITCH

   Two flags in a white pill, the way the translate widget used to look.
   Its own class rather than `.lang-switch`, so none of the button rules in
   naro-security.css can reach it.
   ---------------------------------------------------------- */
.naro-lang {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 8px;
	padding: 5px 7px;
	background: #0b1526;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 11px;
	line-height: 0;
}

/* Both languages sit on white - the selected one is marked by the ring, not by
   a different background. */
.naro-lang .naro-lang-btn {
	display: block;
	width: 44px;
	padding: 5px 6px;
	border: 0;
	border-radius: 6px;
	background: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}

.naro-lang .naro-lang-btn svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 3;
	border-radius: 2px;
}

.naro-lang .naro-lang-btn:hover,
.naro-lang .naro-lang-btn:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
	outline: none;
}

.naro-lang .naro-lang-btn.is-active {
	box-shadow: 0 0 0 2px var(--red);
}

.naro-lang .naro-lang-btn.is-active:hover {
	box-shadow: 0 0 0 2px var(--red), 0 4px 12px rgba(0, 0, 0, .4);
}

.naro-lang .naro-lang-btn:focus-visible {
	box-shadow: 0 0 0 2px var(--red), 0 0 0 5px rgba(254, 0, 0, .3);
}

/* label for screen readers only - the flags carry the meaning visually */
.naro-lang-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 560px) {

	.naro-lang {
		gap: 6px;
		padding: 4px 6px;
		border-radius: 9px;
	}

	.naro-lang .naro-lang-btn {
		width: 38px;
		padding: 4px 5px;
	}
}

/* ============================================================
   2. FLOATING ACTION RAIL
   ========================================================== */
.naro-fab {
	position: fixed;
	right: -4px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 190;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-end;
}

.fab-btn {
	position: relative;
	width: var(--fab);
	height: var(--fab);
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: var(--red);
	border-radius: 10px 0 0 10px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
	transition: background .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}

.fab-btn:hover,
.fab-btn:focus-visible {
	background: #d40000;
	transform: translateX(-3px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .48);
	outline: none;
}

.fab-btn svg {
	width: 26px;
	height: 26px;
	fill: #fff;
	pointer-events: none;
}

/* label pill that slides out on hover */
.fab-label {
	position: absolute;
	right: calc(100% + 11px);
	top: 50%;
	transform: translateY(-50%) translateX(10px);
	padding: 11px 17px;
	border-radius: 8px;
	background: var(--red);
	color: #fff;
	font: 700 14px/1 var(--font);
	letter-spacing: .2px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
	transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.fab-label::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 7px solid transparent;
	border-left-color: var(--red);
}

.fab-btn:hover .fab-label,
.fab-btn:focus-visible .fab-label {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* WhatsApp keeps its brand colour */
.fab-wa,
.fab-wa:hover,
.fab-wa:focus-visible {
	background: var(--wa);
}

.fab-wa:hover {
	background: #1fbd5a;
}

.fab-wa .fab-label {
	background: var(--wa);
}

.fab-wa .fab-label::after {
	border-left-color: var(--wa);
}

/* ------------------------------------------------------------
   BACK TO TOP - deliberately NOT part of the rail.
   Position, colour and the .show reveal come from naro-security.css
   (bottom left, red, 48px). Only the hover polish and the clearance
   above the mobile action bar are added here.
   ---------------------------------------------------------- */
.totop {
	transition: opacity .3s ease, background .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.totop:hover,
.totop:focus-visible {
	background: #d40000;
	transform: translateY(-3px);
	outline: none;
}

/* ============================================================
   3. MOBILE ACTION BAR
   ========================================================== */
.naro-actionbar {
	display: none;
}

.naro-actionbar .ab-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 10px;
	border: 0;
	background: none;
	color: #fff;
	font-family: var(--font);
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.naro-actionbar .ab-item + .ab-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 13px;
	bottom: 13px;
	width: 1px;
	background: rgba(255, 255, 255, .13);
}

.naro-actionbar .ab-item:active {
	background: rgba(255, 255, 255, .06);
}

.naro-actionbar svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: var(--red);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* left cell: prominent call to action
   (kept at `.naro-actionbar .x` so it outranks the `.naro-actionbar .ab-item`
   base rule above rather than relying on source order) */
.naro-actionbar .ab-call {
	background: linear-gradient(90deg, rgba(254, 0, 0, .22), rgba(254, 0, 0, .05));
}

.naro-actionbar .ab-call .ab-ic {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid var(--red);
	display: grid;
	place-items: center;
}

.naro-actionbar .ab-call .ab-ic svg {
	width: 17px;
	height: 17px;
}

.naro-actionbar .ab-call .ab-txt {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.naro-actionbar .ab-call .t {
	font-size: 15px;
	font-weight: 800;
	color: #fff;
	white-space: nowrap;
}

.naro-actionbar .ab-call .s {
	font-size: 10.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, .58);
	white-space: nowrap;
}

/* stacked icon-over-label cells */
.naro-actionbar .ab-stack {
	flex-direction: column;
	gap: 5px;
}

.naro-actionbar .ab-stack .lbl {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .2px;
	color: #fff;
}

@media (max-width: 880px) {

	body {
		padding-bottom: var(--bar-h);
	}

	.naro-actionbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 150;
		display: grid;
		grid-template-columns: 1.55fr 1fr 1fr;
		height: var(--bar-h);
		background: #10192b;
		border-top: 1px solid rgba(255, 255, 255, .09);
		box-shadow: 0 -8px 26px rgba(0, 0, 0, .45);
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* The rail keeps only the action the bar does not carry (WhatsApp) and
	   moves above the bar. It goes bottom LEFT so the back-to-top button can
	   stay in the bottom right corner it occupies on desktop. */
	.naro-fab {
		top: auto;
		bottom: calc(var(--bar-h) + 14px + env(safe-area-inset-bottom));
		transform: none;
		left: 14px;
		right: auto;
		gap: 10px;
	}

	/* keep the standalone back-to-top clear of the action bar */
    .totop {
        bottom: 105px;
        right: 7px;
        width: 44px;
        height: 44px;
    }

	.fab-btn {
		width: 46px;
		height: 46px;
		border-radius: 50%;
		        bottom: 28px;
	}

	.fab-btn svg {
		width: 22px;
		height: 22px;
	}

	.fab-call,
	.fab-route {
		display: none;
	}

	.fab-label {
		display: none;
	}
}

@media (max-width: 360px) {
	.naro-actionbar .ab-call .t {
		font-size: 13.5px;
	}

	.naro-actionbar .ab-call .s {
		font-size: 9.5px;
	}

	.naro-actionbar .ab-item {
		gap: 7px;
		padding: 0 6px;
	}
}

/* ============================================================
   4. MOBILE MENU DRAWER
   ========================================================== */
.drawer {
	overflow-y: auto;
	padding: 22px 22px calc(30px + env(safe-area-inset-bottom));
	background: linear-gradient(180deg, #0b1526 0%, var(--dark) 55%);
}

.drawer-top {
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.drawer .close {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	font-size: 1.6rem;
	transition: background .25s ease;
}

.drawer .close:hover {
	background: #d40000;
}

/* selectors are kept at or above the specificity of `.drawer ul a`
   in naro-security.css so these rules win without !important */
.drawer ul.drawer-nav li {
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.drawer ul.drawer-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 4px;
	font-size: 1.06rem;
	font-weight: 600;
	color: #fff;
	transition: color .22s ease, padding-left .22s ease;
}

.drawer ul.drawer-nav a svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	fill: none;
	stroke: var(--red);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .22s ease;
}

.drawer ul.drawer-nav a:hover,
.drawer ul.drawer-nav a:focus-visible {
	color: var(--red);
	padding-left: 10px;
}

.drawer ul.drawer-nav a:hover svg {
	transform: translateX(3px);
}

.drawer ul.drawer-nav a[aria-current] {
	color: var(--red);
}

.drawer-contact {
	margin-top: 24px;
	display: grid;
	gap: 12px;
}

.drawer-contact .dc-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.drawer-contact a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-size: 14.5px;
	font-weight: 500;
}

.drawer-contact a:hover {
	color: var(--red);
}

.drawer-contact .dc-ic {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: rgba(254, 0, 0, .12);
	border: 1px solid rgba(254, 0, 0, .24);
}

.drawer-contact .dc-ic svg {
	width: 17px;
	height: 17px;
	fill: #fff;
}

.drawer-actions {
	margin-top: 26px;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.drawer-actions .header-btn {
	flex: 1 1 auto;
	width: auto;          /* overrides `width:max-content` from naro-security.css */
	text-align: center;
	min-width: 160px;
}

.drawer-legal {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.drawer-legal a {
	color: rgba(255, 255, 255, .62);
	font-size: 13px;
}

.drawer-legal a:hover {
	color: var(--red);
}

/* ============================================================
   404

   Same vocabulary as the one-pager: the dark background, the dotted grid of
   the locations section, the red header button and the chevron links of the
   footer columns. The big number behind the text is the `.gnum` idea from the
   process cards, scaled up.
   ========================================================== */
.e404 {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 78vh;
	padding: 148px 0 90px;
	overflow: hidden;
	background-color: var(--dark);
	background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 26px 26px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.e404::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 40%;
	width: 780px;
	height: 780px;
	max-width: 140vw;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background: radial-gradient(circle, rgba(254, 0, 0, .14) 0%, rgba(254, 0, 0, 0) 66%);
}

.e404-ghost {
	position: absolute;
	left: 50%;
	top: 46%;
	transform: translate(-50%, -50%);
	font-family: var(--font);
	font-size: clamp(190px, 34vw, 420px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	color: rgba(255, 255, 255, .04);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

.e404-inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.e404-eyebrow {
	margin-bottom: 14px;
	color: var(--red);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.4px;
	text-transform: uppercase;
}

.e404 h1 {
	max-width: 760px;
	margin: 0 auto;
	font-size: clamp(28px, 4.6vw, 46px);
	font-weight: 800;
	line-height: 1.18;
	color: #fff;
}

.e404-sub {
	max-width: 620px;
	margin: 16px auto 0;
	font-size: 16.5px;
	line-height: 1.65;
	color: #cfd6e0;
}

.e404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 32px;
}

.e404-actions .header-btn {
	font-size: 16px;
	padding: 13px 26px;
	border-radius: 8px;
}

.e404-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 24px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 8px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	transition: border-color .25s ease, background .25s ease;
}

.e404-btn-ghost svg {
	width: 18px;
	height: 18px;
	fill: var(--red);
	flex: 0 0 auto;
}

.e404-btn-ghost:hover {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

.e404-lead {
	margin-top: 54px;
	color: rgba(255, 255, 255, .5);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.e404-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 12px;
	margin-top: 18px;
	padding: 0;
	list-style: none;
}

.e404-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 17px;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 999px;
	background: rgba(255, 255, 255, .04);
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.e404-links svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: var(--red);
	stroke-width: 2.6;
	flex: 0 0 auto;
	transition: transform .25s ease;
}

.e404-links a:hover {
	background: rgba(254, 0, 0, .1);
	border-color: rgba(254, 0, 0, .4);
	transform: translateY(-2px);
	color: #fff;
}

.e404-links a:hover svg {
	transform: translateX(3px);
}

@media (max-width: 880px) {

	.e404 {
		min-height: 0;
		padding: 120px 0 70px;
	}

	.e404-lead {
		margin-top: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.e404-links a,
	.e404-links svg {
		transition: none;
	}

	.e404-links a:hover {
		transform: none;
	}
}

/* ============================================================
   5. LEGAL PAGES (Impressum / Datenschutz)
   ========================================================== */
.legal-hero {
	position: relative;
	padding: 148px 0 56px;
	background: linear-gradient(180deg, #041027 0%, var(--dark) 100%);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	overflow: hidden;
}

.legal-hero::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -220px;
	width: 720px;
	height: 720px;
	transform: translateX(-50%);
	pointer-events: none;
	background: radial-gradient(circle, rgba(254, 0, 0, .13) 0%, rgba(254, 0, 0, 0) 66%);
}

.legal-hero .wrap {
	position: relative;
	z-index: 1;
}

.legal-crumb {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .55);
	margin-bottom: 14px;
}

.legal-crumb a {
	color: rgba(255, 255, 255, .55);
}

.legal-crumb a:hover {
	color: var(--red);
}

.legal-crumb svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.legal-hero h1 {
	font-size: clamp(30px, 4.4vw, 46px);
	font-weight: 800;
	color: #fff;
	line-height: 1.15;
}

/* With the page title switched off the hero carries the breadcrumb alone, so
   the band below it would be mostly empty. It still has to clear the fixed
   header, hence only the bottom shrinks. */
.legal-hero.no-title {
	padding-bottom: 26px;
}

.legal-hero h1 .red {
	color: var(--red);
}

.legal-sub {
	margin-top: 12px;
	max-width: 720px;
	font-size: 16px;
	color: #cfd6e0;
}

/* `.section.light` paints pure white, which would make the white paper card
   disappear - and the footer is already #f2f2f2, so pick a tone between them.
   Three classes to outrank `.section.light`. */
.section.light.legal-body {
	padding: 70px 0 90px;
	background: #f7f8fa;
}
.legal-card {
    max-width: 100%;
    margin: 0 auto;
    padding: 0px;
}

.legal-card > *:first-child {
	margin-top: 0;
}

/* naro-security.css paints h1/h2/h4 white for the dark sections. The legal card
   is white paper, so every heading level it can receive has to be reset - the
   privacy text comes from a shortcode and brings whatever levels it likes. */
.legal-card h1 {
	font-size: clamp(24px, 3vw, 30px);
	line-height: 1.3;
	color: var(--ink);
	margin: 0 0 18px;
}

.legal-card h2 {
	font-size: 23px;
	line-height: 1.35;
	color: var(--ink);
	margin: 42px 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.legal-card h4,
.legal-card h5,
.legal-card h6 {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--ink);
	margin: 20px 0 6px;
}

.legal-card h3 {
	font-size: 17.5px;
	font-weight: 700;
	color: var(--ink);
	margin: 26px 0 8px;
}

.legal-card p,
.legal-card li {
	font-size: 16px;
	line-height: 1.72;
	color: var(--muted);
}

.legal-card p {
	margin: 0 0 14px;
}

.legal-card strong {
	color: var(--ink);
	font-weight: 700;
}

.legal-card a {
	color: var(--red);
	text-decoration: underline;
	text-underline-offset: 3px;
	word-break: break-word;
}
.legal-card a:hover{color: #1a2331;transition: 0.3s;text-decoration: none;}
.legal-card ul {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 9px;
}

.legal-card ul li {
	position: relative;
	padding-left: 24px;
}

.legal-card ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 11px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--red);
}

/* naro-security.css zeroes padding on every element, which would hide the
   numbers of an ordered list. Shortcode generated privacy texts use them. */
.legal-card ol {
	margin: 0 0 16px;
	padding-left: 22px;
	display: grid;
	gap: 9px;
}

.legal-card ol li {
	font-size: 16px;
	line-height: 1.72;
	color: var(--muted);
}

.legal-card table {
	width: 100%;
	margin: 0 0 18px;
	border-collapse: collapse;
	font-size: 15px;
	color: var(--muted);
}

.legal-card th,
.legal-card td {
	padding: 9px 12px;
	border: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.legal-card th {
	background: var(--concrete);
	color: var(--ink);
	font-weight: 700;
}

.legal-address {
	display: grid;
	gap: 4px;
	margin: 0 0 18px;
	padding: 20px 24px;
	border-radius: 14px;
	background: var(--concrete);
	border-left: 3px solid var(--red);
}

.legal-address span {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
}

.legal-note {
	margin-top: 34px;
	padding: 18px 22px;
	border-radius: 12px;
	background: rgba(254, 0, 0, .05);
	border: 1px solid rgba(254, 0, 0, .18);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--muted);
}

.legal-updated {
	margin-top: 30px;
	font-size: 13.5px;
	color: var(--muted);
}

@media (max-width: 880px) {
	.legal-hero {
		padding: 120px 0 44px;
	}

	.section.light.legal-body {
		padding: 0px 0 0px;
	}

	.legal-card {
		padding: 30px 0px;
		border-radius: 14px;
	}

	.legal-card h2 {
		font-size: 20px;
		margin-top: 34px;
	}
}

/* ------------------------------------------------------------
   Process step with a custom icon.
   The built-in icons are inline SVGs sized by naro-security.css; an uploaded
   image has to match them. Nothing renders here until someone actually picks
   an image in the "Unser Prozess" panel.
   ---------------------------------------------------------- */
.pnode img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

/* ============================================================
   PERFORMANCE
   ========================================================== */

/* Sections carrying infinite animations are paused by naro-addons.js while
   they are off screen. Nothing changes for anyone looking at them. */
.naro-paused,
.naro-paused *,
.naro-paused *::before,
.naro-paused *::after {
	animation-play-state: paused !important;
}

/* The slider's arrows nudge back and forth for ever, including while the
   modal is closed and invisible. */
#svcModal:not(.show) .modal-nav svg {
	animation: none;
}

/* Failsafe for the hero.
   .hero-headline and .hero-certs start at opacity 0 and are revealed by
   naro-security.js. If that script is ever delayed, blocked or throws, the
   biggest element on the page would stay invisible - so reveal it anyway
   after three seconds. When the script does its job this never shows. */
.hero-headline,
.hero-certs {
	animation: naroHeroFailsafe 0s linear 3s forwards;
}

@keyframes naroHeroFailsafe {
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hero-headline,
	.hero-certs {
		animation: none;
	}
}

/* ============================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {

	.fab-btn,
	.fab-label,
	.totop,
	.drawer ul.drawer-nav a,
	.drawer ul.drawer-nav a svg {
		transition: none !important;
	}

	.totop:hover,
	.fab-btn:hover {
		transform: none;
	}
}
/* ============================================================
   WPFORMS

   Every rule below is keyed on `.wpforms-container-full`, the wrapper WPForms
   puts around each of its forms - so the German form (16) and the English one
   (103) are styled identically without either id appearing here. Add another
   form in any language and it inherits the same look.
   ========================================================== */
.wpforms-container-full label{
  font-weight: 600 !important;
      color: var(--ink) !important;
}
.wpforms-container-full input {
  background: #fff !important;
  border-radius: 7px !important;
  border: 1px solid rgba(76, 75, 81, .49) !important;
  box-shadow: inset 1px 8px 9px -5px #dcdcdc !important;
  color: #000;
  height: 50px !important;
}
.wpforms-container-full textarea {
  bbackground: #fff !important;
  border-radius: 7px !important;
  border: 1px solid rgba(76, 75, 81, .49) !important;
  box-shadow: inset 1px 8px 9px -5px #dcdcdc !important;
  color: #000;
}
/* File upload fields keep the browser's own control. This used to be pinned to
   one field of one form, which meant a second form styled it as a text input. */
.wpforms-container-full .wpforms-field-file-upload input[type="file"] {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  height: auto !important;
}
.wpforms-container .wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field {
    padding: 8px 0 !important;
}
.wpforms-container-full button.wpforms-submit {
    background: var(--red) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(10, 95, 180, .32) !important;
    border-radius: 7px !important;
        font-weight: 400 !important;
  font-size: 19px !important;
  width: 100%;
  height: 54px !important;
}
.wpforms-container-full button.wpforms-submit:hover{
      background: #c50d0d !important;
    box-shadow: 0 18px 40px rgb(197 13 13 / 57%) !important;
    transform: translateY(-2px) !important;
}