.elementor-kit-11{--e-global-color-primary:#102F4C;--e-global-color-secondary:#06345E;--e-global-color-text:#5C6F80;--e-global-color-accent:#075EA5;--e-global-color-neslight:#8FC5F0;--e-global-color-nespetrol:#07528D;--e-global-color-nespaper:#F4F7FA;--e-global-color-neswhite:#FFFFFF;--e-global-color-nesline:#D7E2EB;--e-global-color-neswarm:#D88745;--e-global-color-nesfooter:#061F26;--e-global-color-nesfootertext:#9FB8B6;--e-global-color-nesfooterlink:#CCE0DE;--e-global-color-nessoftblue:#E5F1FA;--e-global-color-nesgreenbg:#E6F6EC;--e-global-color-nesgreen:#2F8F52;--e-global-color-nesbeige:#EEE9DF;--e-global-color-nesbrown:#A45926;--e-global-color-nescream:#F8F6EF;--e-global-color-neslighttext:#DBE9E8;--e-global-color-neslightmuted:#BDD2D1;--e-global-color-nestileblue:#0D456E;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.08em;--e-global-typography-primary-letter-spacing:-0.035em;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-size:0.76em;--e-global-typography-secondary-font-weight:800;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1.6em;--e-global-typography-secondary-letter-spacing:0.13em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:1em;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:1em;--e-global-typography-accent-font-weight:900;--e-global-typography-accent-line-height:1.6em;--e-global-typography-neslead-font-family:"Inter";--e-global-typography-neslead-font-size:1.35em;--e-global-typography-neslead-font-weight:400;--e-global-typography-neslead-line-height:1.6em;--e-global-typography-nesmicro-font-family:"Inter";--e-global-typography-nesmicro-font-size:0.82em;--e-global-typography-nesmicro-font-weight:400;--e-global-typography-nesmicro-line-height:1.6em;--e-global-typography-nesquote-font-family:"Inter";--e-global-typography-nesquote-font-size:2.65em;--e-global-typography-nesquote-font-weight:800;--e-global-typography-nesquote-line-height:1.18em;--e-global-typography-nesquote-letter-spacing:-0.03em;--e-global-typography-nestag-font-family:"Inter";--e-global-typography-nestag-font-size:0.76em;--e-global-typography-nestag-font-weight:900;--e-global-typography-nestag-text-transform:uppercase;--e-global-typography-nestag-line-height:2.1em;--e-global-typography-nestag-letter-spacing:0.11em;--e-global-typography-nessmall-font-family:"Inter";--e-global-typography-nessmall-font-size:0.76em;--e-global-typography-nessmall-font-weight:400;--e-global-typography-nessmall-line-height:1.6em;background-color:#F4F7FA;color:#102F4C;font-family:"Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;font-size:1em;font-weight:400;line-height:1.6em;}.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{background-color:#075EA5;font-family:"Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;font-size:1em;font-weight:900;line-height:1.6em;color:#FFFFFF;box-shadow:0px 9px 24px 0px rgba(7, 94, 165, 0.24);border-radius:62.5em 62.5em 62.5em 62.5em;padding:1em 1.5em 1em 1.5em;}.elementor-kit-11 button:hover,.elementor-kit-11 button:focus,.elementor-kit-11 input[type="button"]:hover,.elementor-kit-11 input[type="button"]:focus,.elementor-kit-11 input[type="submit"]:hover,.elementor-kit-11 input[type="submit"]:focus,.elementor-kit-11 .elementor-button:hover,.elementor-kit-11 .elementor-button:focus{background-color:#8FC5F0;color:#FFFFFF;}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.elementor-kit-11 a{color:#075EA5;font-size:1em;text-decoration:none;}.elementor-kit-11 a:hover{color:#06345E;font-size:1em;text-decoration:none;}.elementor-kit-11 h1{font-family:"Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;font-size:4.4em;font-weight:700;line-height:1.08em;letter-spacing:-0.035em;}.elementor-kit-11 h2{font-family:"Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;font-size:3.1em;font-weight:700;line-height:1.08em;letter-spacing:-0.035em;}.elementor-kit-11 h3{font-family:"Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;font-size:1.35em;font-weight:700;line-height:1.08em;letter-spacing:-0.035em;}.elementor-kit-11 h4{font-family:"Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;font-size:1.15em;font-weight:700;line-height:1.2em;letter-spacing:-0.02em;}.elementor-kit-11 h5{font-family:"Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;font-size:1em;font-weight:700;line-height:1.3em;letter-spacing:-0.01em;}.elementor-kit-11 h6{font-family:"Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;font-size:0.875em;font-weight:700;line-height:1.35em;letter-spacing:0em;}.elementor-kit-11 label{color:#102F4C;font-family:"Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;font-size:0.83em;font-weight:800;}.elementor-kit-11 input:not([type="button"]):not([type="submit"]),.elementor-kit-11 textarea,.elementor-kit-11 .elementor-field-textual{font-family:"Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;font-size:0.83em;font-weight:400;color:#102F4C;accent-color:#075EA5;background-color:#FBFCFA;border-style:solid;border-width:1px 1px 1px 1px;border-color:#C9D6D3;border-radius:0.75em 0.75em 0.75em 0.75em;padding:0.8125em 0.8125em 0.8125em 0.8125em;}.elementor-kit-11 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-11 textarea:focus,.elementor-kit-11 .elementor-field-textual:focus{box-shadow:0px 0px 0px 3px rgba(7, 94, 165, 0.18);border-style:solid;border-color:#075EA5;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1160px;}.e-con{--container-max-width:1160px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0em;}.elementor-element{--widgets-spacing:0em 0em;--widgets-spacing-row:0em;--widgets-spacing-column:0em;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1366px){.elementor-kit-11{--e-global-typography-secondary-font-size:0.76em;--e-global-typography-text-font-size:1em;--e-global-typography-accent-font-size:1em;--e-global-typography-neslead-font-size:1.28em;--e-global-typography-nesmicro-font-size:0.82em;--e-global-typography-nesquote-font-size:2.3em;--e-global-typography-nestag-font-size:0.76em;--e-global-typography-nessmall-font-size:0.76em;font-size:1em;}.elementor-kit-11 a{font-size:1em;}.elementor-kit-11 a:hover{font-size:1em;}.elementor-kit-11 h1{font-size:3.9em;}.elementor-kit-11 h2{font-size:2.7em;}.elementor-kit-11 h3{font-size:1.35em;}.elementor-kit-11 h4{font-size:1.15em;}.elementor-kit-11 h5{font-size:1em;}.elementor-kit-11 h6{font-size:0.875em;}}@media(max-width:900px){.elementor-kit-11{--e-global-typography-secondary-font-size:0.76em;--e-global-typography-text-font-size:1em;--e-global-typography-accent-font-size:0.95em;--e-global-typography-neslead-font-size:1.15em;--e-global-typography-nesmicro-font-size:0.82em;--e-global-typography-nesquote-font-size:1.85em;--e-global-typography-nestag-font-size:0.76em;--e-global-typography-nessmall-font-size:0.76em;font-size:1em;}.elementor-kit-11 a{font-size:1em;}.elementor-kit-11 a:hover{font-size:1em;}.elementor-kit-11 h1{font-size:3.5em;}.elementor-kit-11 h2{font-size:2.35em;}.elementor-kit-11 h3{font-size:1.3em;}.elementor-kit-11 h4{font-size:1.1em;}.elementor-kit-11 h5{font-size:1em;}.elementor-kit-11 h6{font-size:0.875em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:620px){.elementor-kit-11{--e-global-typography-secondary-font-size:0.72em;--e-global-typography-text-font-size:1em;--e-global-typography-accent-font-size:0.875em;--e-global-typography-neslead-font-size:1.08em;--e-global-typography-nesmicro-font-size:0.8em;--e-global-typography-nesquote-font-size:1.7em;--e-global-typography-nestag-font-size:0.74em;--e-global-typography-nessmall-font-size:0.76em;font-size:0.9em;}.elementor-kit-11 a{font-size:1em;}.elementor-kit-11 a:hover{font-size:1em;}.elementor-kit-11 h1{font-size:2.9em;}.elementor-kit-11 h2{font-size:2.2em;}.elementor-kit-11 h3{font-size:1.25em;}.elementor-kit-11 h4{font-size:1.08em;}.elementor-kit-11 h5{font-size:1em;}.elementor-kit-11 h6{font-size:0.875em;}.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{font-size:0.875em;padding:0.9375em 1.25em 0.9375em 1.25em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =======================================================================
   NES – Globale Ergänzungen
   Nur das, was sich mit Elementor-Steuerelementen nicht abbilden lässt.
   Alles andere ist über Widget-Einstellungen und Globals gesetzt.
   ======================================================================= */

/* 1 – Hervorhebungen im Fließtext (Vorlage: strong { font-weight: 800 }) */
.elementor strong { font-weight: 800; }

/* 2 – Absätze ohne Standardabstand (Vorlage: p { margin: 0 }) */
.elementor-widget-text-editor p { margin: 0; }

/* 3 – Akzent in der H1: <em> wird hellblau statt kursiv */
.nes-h1 em { font-style: normal; color: var(--e-global-color-neslight); }

/* 4 – Blockzitat im Text-Editor ohne Browser-Standardeinzug */
.nes-quote blockquote,
.nes-quote blockquote p { margin: 0; }

/* 5 – Icon-Widgets: Höhe exakt so groß wie das Icon (keine Zeilenhöhe drumherum) */
.elementor-widget-icon .elementor-icon-wrapper { line-height: 0; }

/* 6 – Buttons heben sich beim Überfahren leicht an (Vorlage: translateY(-2px)) */
.elementor-button { transition: .2s; }
.elementor-button:hover { transform: translateY(-2px); }

/* 7 – Einblenden beim Scrollen: 18 px von unten in 0,6 s */
@keyframes nesReveal {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
.elementor-element.animated {
	animation-name: nesReveal !important;
	animation-duration: .6s;
	animation-timing-function: ease;
}

/* 8 – Deko-Ringe: zweiter und dritter Halo
       (Elementor kann pro Element nur einen Schatten) */
.nes-ring { pointer-events: none; }
.nes-ring:not(.nes-ring--light) {
	box-shadow: 0 0 0 5.625em rgba(7, 94, 165, .022), 0 0 0 11.25em rgba(7, 94, 165, .016);
}
.nes-ring--light {
	box-shadow: 0 0 0 5.625em rgba(255, 255, 255, .022), 0 0 0 11.25em rgba(255, 255, 255, .014);
}
@media (max-width: 900px) { .nes-ring { box-shadow: none; } }

/* 9 – Bilder: Zoom und Verlauf beim Überfahren der Karte */
.nes-media img {
	display: block; width: 100%; height: auto;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.nes-media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
	background: linear-gradient(180deg, rgba(6, 52, 94, 0) 45%, rgba(6, 52, 94, .42));
	opacity: 0; transition: opacity .4s ease;
}
.nes-card:hover .nes-media img,
.nes-media:hover img { transform: scale(1.07); }
.nes-card:hover .nes-media::after,
.nes-media:hover::after { opacity: 1; }

/* 10 – Ablauf-Schritte: Icon hebt sich beim Überfahren */
.nes-jico { transition: transform .3s ease, background-color .3s ease; }
.nes-jstep:hover .nes-jico { transform: translateY(-4px); background-color: var(--e-global-color-neslight); }
.nes-jstep:hover .nes-jico svg { fill: var(--e-global-color-secondary); }

/* 11 – FAQ: Titelzeile exakt wie in der Vorlage. Elementor setzt die
       Zeilenhöhe des Titels über :where(), was die globale H3-Regel überstimmt. */
.nes-faq .e-n-accordion-item-title { align-items: flex-start; gap: 20px; }
.nes-faq .e-n-accordion-item-title-text { line-height: 1.35; }
.nes-faq .e-n-accordion-item-title-icon { line-height: 1; }
.nes-faq .e-n-accordion-item-title-icon { flex: none; }
.nes-faq .e-n-accordion-item-title-icon span { display: flex; width: 24px; height: 24px; }
.nes-faq .e-n-accordion-item-title-icon svg { width: 24px; height: 24px; }
/* Das Pluszeichen dreht sich beim Öffnen zum Kreuz */
.nes-faq .e-n-accordion-item-title-icon span { transition: transform .2s ease; }
.nes-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon .e-opened { transform: rotate(45deg); }

/* 16 – Buttons auf kleinen Geräten etwas feiner. Muss hier stehen und nicht
       nur im Theme-Style: Elementors Widget-Regel für Buttons liegt auf
       derselben Spezifitätsstufe, wird aber später geladen. */
@media (max-width: 620px) {
	.elementor .elementor-widget-button .elementor-button,
	.elementor .elementor-widget-form .elementor-button {
		font-size: .875em;
		padding: .9375em 1.25em;
	}
}

/* 18 – Buttons auf Mobil: die Beschriftungen sind lang, deshalb bekommen sie
       hier weniger Schriftgröße, engere Zeilen und – wo ein Umbruch
       unvermeidlich ist – zwei ausgewogene Zeilen statt eines Waisenworts.
       Ein Elementtyp im Selektor ist nötig, weil Elementors Widget-Regel
       auf derselben Spezifitätsstufe liegt und später geladen wird. */
@media (max-width: 620px) {
	.elementor .elementor-button { line-height: 1.35; }
	.elementor .elementor-button-text { text-wrap: balance; }

	/* Absende-Button des Formulars: volle Breite, zentriert, zweizeilig erlaubt.
	   Die Klasse steht zweimal im Selektor, weil Elementors eigene Regel
	   (.elementor-12 .elementor-element.elementor-element-… .elementor-button)
	   vier Klassen mitbringt und sonst gewinnt. */
	.elementor .elementor-widget-form.elementor-widget-form button.elementor-button {
		font-size: .875em;
		padding: .8125em 1.125em;
		text-align: center;
		letter-spacing: .005em;
	}
}

@media (max-width: 400px) {
	/* Auf sehr schmalen Geraeten noch eine Stufe feiner. */
	.elementor .elementor-widget-form.elementor-widget-form button.elementor-button {
		font-size: .8125em;
		padding: .8125em .9375em;
	}
}

/* 19 – Bewegungsreduzierung respektieren */
@media (prefers-reduced-motion: reduce) {
	.nes-media img, .nes-media::after, .nes-jico { transition: none; }
	.elementor-element.animated { animation: none !important; }
	.nes-ring { animation: none; opacity: 1; }
}

/* 14 – Deko-Ringe atmen sehr langsam. Bewusst nur transform und opacity,
       damit die Animation auf der Compositor-Ebene läuft und kein Neuzeichnen
       auslöst. Drei Varianten mit versetztem Start, damit nichts im Gleichschritt
       pulsiert. */
@keyframes nesRingAtem {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1);              opacity: .82; }
	50%      { transform: translate3d(1.4%, -1%, 0) scale(1.035);     opacity: 1;   }
}
@keyframes nesRingAtemGegen {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.02);           opacity: .9;  }
	50%      { transform: translate3d(-1.2%, 1.2%, 0) scale(1);       opacity: .78; }
}
.nes-ring     { animation: nesRingAtem 22s ease-in-out infinite; }
.nes-ring--b  { animation-name: nesRingAtemGegen; animation-duration: 28s; animation-delay: -9s; }
.nes-ring--c  { animation-duration: 18s; animation-delay: -14s; }

/* 15 – Popup: weich abgeblendeter Hintergrund.
       Der Schließen-Knopf ist eine schlichte runde Fläche mit zwei
       gekreuzten Linien – kein Schrift-Zeichen, damit er in jeder
       Umgebung gleich aussieht und exakt in der Mitte sitzt.
       Der Elementtyp a im Selektor ist nötig, um Elementors eigene
       Regeln für .dialog-close-button zu überstimmen. */
.elementor-popup-modal { backdrop-filter: blur(4px); }
.elementor-popup-modal a.dialog-close-button {
	position: absolute;
	z-index: 2;
	display: block;
	width: 2.375rem;
	height: 2.375rem;
	border: 0;
	border-radius: 50%;
	background-color: #F4F7FA;
	opacity: 1;
	transition: background-color .2s ease;
}
.elementor-popup-modal a.dialog-close-button:hover {
	background-color: #D7E2EB;
}
.elementor-popup-modal a.dialog-close-button:focus-visible {
	outline: 2px solid var(--e-global-color-accent);
	outline-offset: 2px;
}
.elementor-popup-modal a.dialog-close-button svg,
.elementor-popup-modal a.dialog-close-button i {
	display: none;
}
/* Die beiden Striche des Kreuzes: über inset + margin:auto mittig, unabhaengig
   davon, ob Elementor den Knopf als flex, grid oder block ausgibt. */
.elementor-popup-modal a.dialog-close-button::before,
.elementor-popup-modal a.dialog-close-button::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: .8125rem;
	height: 1.5px;
	border-radius: 1px;
	background-color: var(--e-global-color-primary);
}
.elementor-popup-modal a.dialog-close-button::before { transform: rotate(45deg); }
.elementor-popup-modal a.dialog-close-button::after  { transform: rotate(-45deg); }

/* 20 – Zustimmungsfeld Datenschutz. Die Beschriftung steht neben dem
       Kästchen, deshalb bleibt das Standard-Etikett verborgen – es wird
       nur für die Benachrichtigungs-Mail gebraucht.
       Die Selektoren tragen .elementor voran, weil Elementors eigene
       Formular-Regeln sonst gleichauf liegen und später geladen werden. */
.elementor .elementor-field-type-acceptance > .elementor-field-label { display: none; }
.elementor .elementor-field-type-acceptance .elementor-field-subgroup { margin-top: .125rem; }
.elementor .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
}
.elementor .elementor-field-type-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.0625rem;
	height: 1.0625rem;
	margin: .0625rem 0 0;
	accent-color: var(--e-global-color-accent);
	cursor: pointer;
}
.elementor .elementor-field-type-acceptance .elementor-field-option label {
	margin: 0;
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
	/* Die Textfarbe kommt bewusst aus der Formular-Einstellung
	   "Beschriftungen" und bleibt damit im Editor änderbar. */
}
.elementor .elementor-field-type-acceptance .elementor-field-option label a {
	color: var(--e-global-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
.elementor .elementor-field-type-acceptance .elementor-field-option label a:hover { text-decoration-thickness: 2px; }

/* 21 – Off-Canvas: Elementor hängt beim Schließen die Klasse .slideOutRight an,
       liefert dafür aber kein Stylesheet (die Animations-Dateien enthalten nur
       Eingangs-Bewegungen). Ohne laufende Animation gibt es kein animationend,
       Elementor räumt die Klassen nie weg – das Panel bleibt sichtbar hängen,
       der body behält .e-off-canvas__no-scroll-animation und ein zweites
       Öffnen zeigt nur noch Bruchstücke. Deshalb hier nachgereicht. */
@keyframes slideOutRight {
	from { transform: translate3d(0, 0, 0); }
	to   { visibility: hidden; transform: translate3d(100%, 0, 0); }
}
.e-off-canvas .slideOutRight { animation-name: slideOutRight; }

/* Sicherheitsnetz: sollte doch einmal eine Animation ausfallen, darf ein
   geschlossenes Panel niemals sichtbar bleiben. */
.e-off-canvas[aria-hidden="true"]:not(.animated-reverse-wrapper) .e-off-canvas__main {
	visibility: hidden;
}

/* 22 – Menü-Panel: feinere Gestaltung.
       Die Menüpunkte rücken beim Überfahren leicht nach rechts, der Titel
       bekommt eine hellblaue Marke. Trennlinien sitzen bündig am Panel. */
.nes-offcanvas .e-off-canvas__content { backdrop-filter: none; }
.nes-offcanvas-nav .elementor-nav-menu a.elementor-item {
	transition: transform .25s cubic-bezier(.2, .7, .3, 1), color .2s ease;
}
.nes-offcanvas-nav .elementor-nav-menu a.elementor-item:hover,
.nes-offcanvas-nav .elementor-nav-menu a.elementor-item:focus-visible {
	transform: translateX(.375em);
}
/* Die Punkte fahren beim Öffnen kurz nacheinander ein. */
@keyframes nesMenuEin {
	from { opacity: 0; transform: translateX(1.5em); }
	to   { opacity: 1; transform: none; }
}
.e-off-canvas[aria-hidden="false"] .nes-offcanvas-nav .elementor-nav-menu > li {
	animation: nesMenuEin .45s cubic-bezier(.2, .7, .3, 1) both;
}
.e-off-canvas[aria-hidden="false"] .nes-offcanvas-nav .elementor-nav-menu > li:nth-child(1) { animation-delay: .10s; }
.e-off-canvas[aria-hidden="false"] .nes-offcanvas-nav .elementor-nav-menu > li:nth-child(2) { animation-delay: .16s; }
.e-off-canvas[aria-hidden="false"] .nes-offcanvas-nav .elementor-nav-menu > li:nth-child(3) { animation-delay: .22s; }
.e-off-canvas[aria-hidden="false"] .nes-offcanvas-nav .elementor-nav-menu > li:nth-child(4) { animation-delay: .28s; }

/* 23 – Header: oben transparent, ab dem ersten Scrollen mit CI-Blau
       hinterlegt. Die Klasse am body setzt das Scroll-Snippet. */
.nes-header {
	transition: background-color .28s ease, box-shadow .28s ease,
	            backdrop-filter .28s ease;
	background-color: transparent;
}
body.nes-header-fest .nes-header {
	background-color: var(--e-global-color-secondary);
	box-shadow: 0 .5em 1.75em rgba(4, 30, 52, .28);
}
/* Die Höhe bleibt bewusst gleich: so springt beim Umschalten nichts.
   Die Innenabstände kommen aus den Container-Einstellungen im Editor. */

/* 24 – Footer: weicher Schein am oberen Rand und Trennpunkte in den
       Linkreihen statt harter Zeichen im Text. */
.nes-footer { position: relative; }
.nes-footer::before {
	content: "";
	position: absolute;
	inset: -14em 0 auto 0;
	height: 18em;
	background: radial-gradient(60% 100% at 50% 100%, rgba(143, 197, 240, .16), transparent 70%);
	pointer-events: none;
}
.nes-footer-nav, .nes-footer-recht {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em 1.375em;
}
.nes-footer-nav a, .nes-footer-recht a {
	position: relative;
	text-decoration: none;
	transition: color .2s ease;
}
/* Feiner Unterstrich, der beim Überfahren aufzieht */
.nes-footer-nav a::after, .nes-footer-recht a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: -.2em;
	height: 1px;
	background: currentColor;
	transition: right .25s ease;
}
.nes-footer-nav a:hover::after, .nes-footer-recht a:hover::after { right: 0; }

/* 25 – Fakten-Leiste: das Siegel steht als fünftes Element allein in der
       letzten Reihe – auf Tablet und Mobil nimmt es dort die ganze Breite. */
@media (max-width: 900px) {
	/* Der Abschnitt ist ein Boxed-Container, das Raster liegt also auf
	   .e-con-inner – deshalb beide Ebenen im Selektor. */
	.nes-facts > .e-con-inner > .e-con:last-child,
	.nes-facts > .e-con:last-child {
		grid-column: 1 / -1;
	}
}

/* 26 – Typografie: Überschriften werden im Umbruch ausgeglichen, damit keine
       einzelnen Wörter als kurze Restzeile stehen bleiben; Fließtext
       vermeidet Schusterjungen. Beides ist reine Satzverbesserung – die
       Schriftgrößen bleiben unverändert. */
.elementor h1, .elementor h2, .elementor h3, .elementor h4, .elementor h5, .elementor h6,
.elementor .elementor-heading-title,
.elementor .e-n-accordion-item-title-text,
.elementor blockquote {
	text-wrap: balance;
}
.elementor .elementor-widget-text-editor p,
.elementor .elementor-widget-text-editor li {
	text-wrap: pretty;
}

/* 27 – Bewegungsreduzierung für die neu hinzugekommenen Bewegungen.
       Die Schließ-Animation des Menüs bleibt bewusst aktiv: sie ist der
       Auslöser, an dem Elementor seine Klassen wieder abräumt. */
@media (prefers-reduced-motion: reduce) {
	.e-off-canvas[aria-hidden="false"] .nes-offcanvas-nav .elementor-nav-menu > li { animation: none; }
	.nes-offcanvas-nav .elementor-nav-menu a.elementor-item { transition: none; }
	.nes-header { transition: none; }
	.nes-footer-nav a::after, .nes-footer-recht a::after { transition: none; }
	/* Das Panel gleitet nicht mehr, die Animation läuft aber weiter – nur
	   eben in 1 ms. Sonst bliebe das animationend-Ereignis aus. */
	.e-off-canvas { --e-off-canvas-animation-duration: 1ms; }
}

/* 28 – Sprungziele: seit der Header fest oben liegt, muss beim Springen
       etwas Luft bleiben, sonst verschwindet die Abschnitts-Überschrift
       darunter. Gilt auch für das mobile Menü, das per scrollIntoView
       springt – die Eigenschaft wird dabei mitberücksichtigt. */
#content, #betriebsmittel, #loesung, #vergleich, #faq, #report {
	scroll-margin-top: 6.5em;
}
@media (max-width: 620px) {
	#content, #betriebsmittel, #loesung, #vergleich, #faq, #report {
		scroll-margin-top: 5.5em;
	}
}

/* 30 – Unterseiten mit der Theme-Vorlage (Impressum, Datenschutz und alles,
       was nicht als Elementor-Vorlage angelegt ist).
       Der Header liegt fest über der Seite, deshalb würde der Inhalt sonst
       darunter verschwinden. Die Regel greift nur dort, wo das Theme den
       Inhalt selbst ausgibt: <main class="site-main"> gibt es weder auf der
       Startseite (Vorlage "Elementor Full Width") noch auf der 404-Seite –
       beide bringen ihren Abstand im eigenen Abschnitt mit.
       Für dieses Theme-Element gibt es keinen Elementor-Regler, deshalb CSS. */
.site-main {
	padding-block: 8.75em 6.25em;
	padding-inline: 1.25em;
}
/* Auf diesen Seiten gibt es keinen dunklen Hero, über dem der Header
   transparent stehen könnte – weisses Logo auf hellem Grund wäre nicht
   lesbar. Deshalb trägt er hier die CI-Fläche von Anfang an, im gleichen
   Zustand wie nach dem Scrollen (Abschnitt 23). */
body:has(.site-main) .nes-header {
	background-color: var(--e-global-color-secondary);
	box-shadow: 0 .5em 1.75em rgba(4, 30, 52, .28);
}

@media (max-width: 900px) {
	.site-main { padding-block: 8em 5em; }
}
@media (max-width: 620px) {
	.site-main {
		padding-block: 7.5em 4.375em;
		padding-inline: .875em;
	}
}
/* 32 – Auswahlfelder (Mehrfachauswahl) in beiden Formularen.
       Elementor liefert hier die Standardkästchen des Browsers ohne Abstand –
       die Kästchen sind 13 px klein, die Zeilen kleben aneinander und neben
       dem Zustimmungsfeld darunter wirkt das wie ein anderes Formular.
       Hier auf dasselbe Mass wie in Abschnitt 20 gebracht.
       Die Selektoren tragen .elementor voran, weil Elementors eigene
       Formular-Regeln sonst gleichauf liegen und später geladen werden. */
.elementor .elementor-field-type-checkbox .elementor-field-subgroup,
.elementor .elementor-field-type-radio .elementor-field-subgroup {
	display: flex;
	flex-direction: column;
	gap: .625rem;
	margin-top: .125rem;
}
/* Nebeneinander, wenn im Widget "In einer Reihe" gewählt ist */
.elementor .elementor-field-subgroup.elementor-subgroup-inline {
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 1.5rem;
}
.elementor .elementor-field-type-checkbox .elementor-field-option,
.elementor .elementor-field-type-radio .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	margin: 0;
}
.elementor .elementor-field-type-checkbox input[type="checkbox"],
.elementor .elementor-field-type-radio input[type="radio"] {
	flex: 0 0 auto;
	width: 1.0625rem;
	height: 1.0625rem;
	margin: .0625rem 0 0;
	accent-color: var(--e-global-color-accent);
	cursor: pointer;
}
.elementor .elementor-field-type-checkbox .elementor-field-option label,
.elementor .elementor-field-type-radio .elementor-field-option label {
	margin: 0;
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}
/* 33 – Lange Adressen im Fließtext brechen sonst nicht um.
       Auf Datenschutz und Impressum stehen ganze URLs als Linktext; auf dem
       Telefon schoben sie die Seite um bis zu 182 px in die Breite.
       break-word bricht nur dort, wo ein Wort sonst nicht passt – normaler
       Text bleibt unangetastet. Tabellen bekommen bei Bedarf eine eigene
       Bildlaufleiste, statt die ganze Seite zu verschieben. */
.site-main a,
.site-main p,
.site-main li,
.site-main dd,
.site-main td,
.site-main th {
	overflow-wrap: break-word;
}
/* Überschriften wie „Datenschutzerklärungen“ passen als ein Wort nicht
   auf schmale Bildschirme. Mit der Silbentrennung bricht das Wort an
   der richtigen Stelle und mit Trennstrich; break-word bleibt als
   letzte Rettung stehen. Die Seitensprache steht auf Deutsch, die
   Trennregeln stimmen also. */
.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4,
.site-main h5,
.site-main h6 {
	hyphens: auto;
	overflow-wrap: break-word;
}
.site-main table {
	max-width: 100%;
	display: block;
	overflow-x: auto;
}
/* 34 – Tippflächen und Layoutsprung.
       a) Die Links in der Fußzeile waren nur 19–22 px hoch. Mit etwas
          senkrechtem Innenabstand erreichen sie eine bequem treffbare
          Größe, ohne dass sich die Zeilen sichtbar verschieben.
       b) Elementors zugeschnittene Bilder kommen ohne Breite und Höhe im
          Markup. Bis das Bild da ist, hat der Platz die Höhe null und der
          Text darunter springt. Das Seitenverhältnis hält den Platz frei. */
@media (max-width: 900px) {
	.nes-footer-nav a,
	.nes-footer-recht a {
		display: inline-block;
		padding-block: .625em;
	}
	.nes-footer-nav,
	.nes-footer-recht { gap: 0 1.375em; }
}
.nes-media img:not([width]) {
	aspect-ratio: 16 / 9;
	height: auto;
	width: 100%;
	object-fit: cover;
}
/* 29 – 404-Seite: Statuskarte, laufende Energie und anklickbare Karten.
       Die Karte zeigt drei Stationen (Netz, Speicher, Hof). Über der
       Verbindungsstrecke wandert ein kleiner Lichtpunkt von links nach
       rechts – das ist die einzige Bewegung und läuft nur auf dem
       Compositor (transform, opacity). */
.nes-404-strecke { position: relative; }
.nes-404-strecke::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: .5em;
	height: .5em;
	margin-top: -.25em;
	border-radius: 50%;
	background: var(--e-global-color-accent);
	box-shadow: 0 0 0 .25em rgba(7, 94, 165, .18);
	animation: nes404Fluss 2.6s cubic-bezier(.55, 0, .45, 1) infinite;
}
.nes-404-strecke:last-of-type::after { animation-delay: .5s; }
@keyframes nes404Fluss {
	0%       { transform: translateX(0);            opacity: 0; }
	18%      { opacity: 1; }
	82%      { opacity: 1; }
	100%     { transform: translateX(3.25em);       opacity: 0; }
}

/* Die aktive Station bekommt einen ruhigen Ring, damit klar ist, wo
   die Versorgung gerade herkommt. */
.nes-404-station--aktiv {
	position: relative;
}
.nes-404-station--aktiv::before {
	content: "";
	position: absolute;
	top: -.375em;
	left: 50%;
	width: 3.25em;
	height: 3.25em;
	margin-left: -1.625em;
	border-radius: 50%;
	background: var(--e-global-color-nessoftblue);
	z-index: 0;
}
.nes-404-station--aktiv > * { position: relative; z-index: 1; }

/* Punkt vor der Statuszeile – pulsiert langsam wie eine Betriebsanzeige.
   Bewusst absolut gesetzt und nicht per Flexbox: ein display:flex am Absatz
   würde <strong> und den Folgetext zu zwei Spalten machen. */
.nes-404-puls p { position: relative; padding-left: 1.125em; }
.nes-404-puls p::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: .5em;
	height: .5em;
	border-radius: 50%;
	background: var(--e-global-color-nesgreen);
	animation: nes404Puls 2s ease-in-out infinite;
}
@keyframes nes404Puls {
	0%, 100% { box-shadow: 0 0 0 0 rgba(47, 143, 82, .45); opacity: 1;  }
	50%      { box-shadow: 0 0 0 .3125em rgba(47, 143, 82, 0); opacity: .75; }
}

/* Anklickbare Karten: der ganze Block ist ein Link, soll aber nicht
   wie ein Textlink aussehen. */
.elementor a.nes-404-karte,
.elementor a.nes-404-karte:hover { text-decoration: none; }
.nes-404-karte {
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nes-404-karte:hover {
	transform: translateY(-.25em);
	border-color: rgba(7, 94, 165, .35);
	box-shadow: 0 1.125em 2.5em rgba(8, 42, 51, .1);
}
.nes-404-karte:hover .elementor-widget-heading .elementor-heading-title {
	color: var(--e-global-color-accent);
}

/* Auf Mobil stehen die Stationen untereinander. Elementors Trenner zeichnet
   nur waagrechte Linien (border-block-start) und laesst sich nicht ohne
   Spezifitaetskampf drehen – hier wird er deshalb ausgeblendet und die
   senkrechte Verbindung als Pseudo-Element gezeichnet. */
@media (max-width: 620px) {
	.nes-404-strecke { width: 100%; min-height: 2.25em; }
	.nes-404-strecke .elementor-widget-divider { display: none; }
	.nes-404-strecke::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		bottom: 0;
		width: 2px;
		margin-left: -1px;
		background: var(--e-global-color-nesline);
	}
	.nes-404-strecke::after {
		left: 50%;
		top: 0;
		margin-left: -.25em;
		margin-top: 0;
		animation-name: nes404FlussSenkrecht;
	}
	@keyframes nes404FlussSenkrecht {
		0%   { transform: translateY(0);       opacity: 0; }
		18%  { opacity: 1; }
		82%  { opacity: 1; }
		100% { transform: translateY(1.75em);  opacity: 0; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.nes-404-strecke::after { animation: none; opacity: 1; }
	.nes-404-puls p::before { animation: none; }
	.nes-404-karte { transition: none; }
	.nes-404-karte:hover { transform: none; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://notstrom.nesbatterieprofi.at/wp-content/uploads/2026/08/inter-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://notstrom.nesbatterieprofi.at/wp-content/uploads/2026/08/inter-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://notstrom.nesbatterieprofi.at/wp-content/uploads/2026/08/inter-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://notstrom.nesbatterieprofi.at/wp-content/uploads/2026/08/inter-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://notstrom.nesbatterieprofi.at/wp-content/uploads/2026/08/inter-800.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('https://notstrom.nesbatterieprofi.at/wp-content/uploads/2026/08/inter-900.woff2') format('woff2');
}
/* End Custom Fonts CSS */