/**
 * Plan4 – Basis-Styles.
 *
 * Bewusst minimal: Layout, Typografie und Widget-Optik kommen aus dem
 * Elementor-Kit bzw. den Elementor-Templates. Hier stehen nur ein dezenter
 * Reset und Fallback-Header/-Footer. Angleichungen an die frühere Optik
 * ("Reconciliation") kommen später in eine eigene Datei/Sektion.
 */

/* --- Reset / Basis --- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
* { box-sizing: border-box; }

img, embed, iframe, object, video {
	max-width: 100%;
	height: auto;
}

a { text-decoration: none; }

.plan4-main { display: block; }

/* --- Container für Fallback-Ausgaben ---
 * KEINE max-width/Padding: Elementor-Seiteninhalt muss über die volle Breite
 * laufen; Sections/Container bringen ihre eigenen Abstände mit.
 */
.plan4-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* --- Fallback-Header / -Footer (nur ohne Elementor-Template sichtbar) --- */
.plan4-fallback-header .plan4-container,
.plan4-fallback-footer .plan4-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	padding-bottom: 16px;
}

.plan4-fallback-header .plan4-menu {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.plan4-site-title { font-weight: 600; }

/* =====================================================================
 * RECONCILIATION
 * Hier kommen gezielte Regeln rein, um relevante optische Unterschiede
 * zur früheren finovate-Optik anzugleichen. Wird nach dem Screenshot-
 * Vergleich befüllt.
 * ===================================================================== */

/* =====================================================================
 * AKZENTFARBEN-UTILITIES (Ersatz für die VamTam-Klassen)
 * Stellt die alten Inline-Klassen wieder her, z. B.:
 *   <span class="color-accent-4">Text</span>
 * Die Farben binden an die globalen Elementor-Kit-Farben und folgen
 * damit automatisch Änderungen im Kit (Design > Site-Einstellungen > Farben).
 *
 * Mapping: accent-1..8 = System-Akzente, 9 = Accent 9, 10 = Accent 10.
 * ===================================================================== */

/* Kompatibilitäts-Aliase: falls Inhalte/Custom-CSS noch
   var(--vamtam-accent-color-N) verwenden. */
body {
	--vamtam-accent-color-1:  var(--e-global-color-vamtam_accent_1);
	--vamtam-accent-color-2:  var(--e-global-color-vamtam_accent_2);
	--vamtam-accent-color-3:  var(--e-global-color-vamtam_accent_3);
	--vamtam-accent-color-4:  var(--e-global-color-vamtam_accent_4);
	--vamtam-accent-color-5:  var(--e-global-color-vamtam_accent_5);
	--vamtam-accent-color-6:  var(--e-global-color-vamtam_accent_6);
	--vamtam-accent-color-7:  var(--e-global-color-vamtam_accent_7);
	--vamtam-accent-color-8:  var(--e-global-color-vamtam_accent_8);
	--vamtam-accent-color-9:  var(--e-global-color-9d9c42a);
	--vamtam-accent-color-10: var(--e-global-color-8641245);
}

.color-accent-1,  .hover-color-accent-1:hover  { color: var(--vamtam-accent-color-1)  !important; }
.color-accent-2,  .hover-color-accent-2:hover  { color: var(--vamtam-accent-color-2)  !important; }
.color-accent-3,  .hover-color-accent-3:hover  { color: var(--vamtam-accent-color-3)  !important; }
.color-accent-4,  .hover-color-accent-4:hover  { color: var(--vamtam-accent-color-4)  !important; }
.color-accent-5,  .hover-color-accent-5:hover  { color: var(--vamtam-accent-color-5)  !important; }
.color-accent-6,  .hover-color-accent-6:hover  { color: var(--vamtam-accent-color-6)  !important; }
.color-accent-7,  .hover-color-accent-7:hover  { color: var(--vamtam-accent-color-7)  !important; }
.color-accent-8,  .hover-color-accent-8:hover  { color: var(--vamtam-accent-color-8)  !important; }
.color-accent-9,  .hover-color-accent-9:hover  { color: var(--vamtam-accent-color-9)  !important; }
.color-accent-10, .hover-color-accent-10:hover { color: var(--vamtam-accent-color-10) !important; }

/* Optional: gleiche Akzente als Hintergrundfarbe verfügbar machen
   (z. B. <span class="bg-accent-2">). */
.bg-accent-1  { background-color: var(--vamtam-accent-color-1)  !important; }
.bg-accent-2  { background-color: var(--vamtam-accent-color-2)  !important; }
.bg-accent-3  { background-color: var(--vamtam-accent-color-3)  !important; }
.bg-accent-4  { background-color: var(--vamtam-accent-color-4)  !important; }
.bg-accent-5  { background-color: var(--vamtam-accent-color-5)  !important; }
.bg-accent-6  { background-color: var(--vamtam-accent-color-6)  !important; }
.bg-accent-7  { background-color: var(--vamtam-accent-color-7)  !important; }
.bg-accent-8  { background-color: var(--vamtam-accent-color-8)  !important; }
.bg-accent-9  { background-color: var(--vamtam-accent-color-9)  !important; }
.bg-accent-10 { background-color: var(--vamtam-accent-color-10) !important; }

/* =====================================================================
 * WAPPEN-MARQUEE (Endlos-Ticker "Im Einsatz bei")
 * Der Track enthält die Logos doppelt; -50 % verschiebt exakt eine
 * Hälfte -> nahtlose Endlosschleife. Grau, bei Hover farbig; Pause on hover.
 * ===================================================================== */
/* Hook über die Element-ID-Klassen (Container-`_css_classes` wird von
 * Elementor nicht gerendert). IDs: Maske = cd68fae, Track = 07557a6.
 * Beim Neuaufbau der Sektion diese IDs anpassen.
 * Track ist ein "full"-Container (kein .e-con-inner) -> Bilder sind direkte
 * Kinder, der .e-con selbst ist der Flex-Track. Abstand via margin statt gap,
 * damit -50 % exakt einer Kopie entspricht = nahtlose Endlosschleife. */
.elementor-element.elementor-element-cd68fae { overflow: hidden !important; }
.elementor-element.elementor-element-07557a6 {
	flex-wrap: nowrap !important;
	width: max-content !important;
	gap: 0 !important;
	padding: 0 !important;
	/* 100s statt urspruenglich 40s: seit dem Wechsel von 7 Platzhaltern auf
	 * 23 echte Wappen ist der Track deutlich laenger geworden, bei gleicher
	 * Dauer waere die gefuehlte Geschwindigkeit stark gestiegen. 100s ergibt
	 * insgesamt ein spuerbar ruhigeres Tempo. Bei Bedarf hier weiter erhoehen. */
	animation: plan4-marquee 100s linear infinite;
	will-change: transform;
}
.elementor-element-cd68fae:hover .elementor-element-07557a6 { animation-play-state: paused; }
/* Jedes Wappen + Name steckt in einem eigenen Container (direktes Kind des
 * Tracks) -> der Abstand zwischen den Paaren wandert vom <img> auf diesen
 * Wrapper (margin statt gap, s.o. -> exakte -50%-Schleife bleibt erhalten). */
.elementor-element-07557a6 > .e-con {
	/* Elementors Default fuer neue (Nested-)Container setzt --width:100%,
	 * was sich hier gegen die Breite des ganzen (max-content-)Tracks
	 * aufloest -> jeder Wrapper wurde so breit wie der komplette Track
	 * (Bug: Wappen+Name verschwanden visuell). Explizit auf Inhaltsbreite
	 * zuruecksetzen. */
	--width: auto;
	width: auto !important;
	flex-basis: auto !important;
	margin-right: 56px;
	flex-shrink: 0;
}
.elementor-element-07557a6 img {
	/* Einheitliche Hoehe statt fester Breite: die Wappen-Dateien sind
	 * freigestellt/knapp zugeschnitten, behalten hier aber ihr eigenes
	 * Seitenverhaeltnis (width:auto) und wirken dadurch trotzdem gleich hoch,
	 * auch wenn Elementor kein 'width'-Setting mehr fuer das Bild-Widget setzt. */
	height: 72px !important;
	width: auto !important;
	max-width: none !important;
	filter: grayscale(1);
	opacity: .65;
	transition: filter .3s ease, opacity .3s ease;
}
/* Name unter dem Wappen: dezent, gleiche Graustufen-Logik wie das Bild,
 * damit Bild+Name beim Hover gemeinsam als ein Element aufhellen. */
.elementor-element-07557a6 .plan4-wappen-name {
	opacity: .65;
	color: #3F3F3E;
	white-space: nowrap;
	transition: opacity .3s ease;
}
.elementor-element-07557a6 > .e-con:hover img,
.elementor-element-07557a6 > .e-con:hover .plan4-wappen-name {
	filter: none;
	opacity: 1;
}
@keyframes plan4-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.plan4-wappen-mask .plan4-wappen-track { animation: none; }
}

/* =====================================================================
 * HUBSPOT-FORMULARE: visuelle Angleichung an die Elementor-Pro-Formulare
 * =====================================================================
 * HubSpot rendert per forms/embed/v2.js (Portal 6366516, Region eu1) echtes
 * DOM in [data-hs-form-id] (kein iframe) -> direkt stylebar. Referenzwerte
 * 1:1 von den bestehenden Elementor-Formularen abgelesen (z. B.
 * /demo-anfragen/): Figtree, Radius 9px auf Feldern, Rahmen in Kit-Accent-2-
 * Gruen (#93C21E), dunkler Button (#3F3F3E) mit hellem Text (#F6F5F2),
 * Label 14px/#3F3F3E, Pflichtfeld-Stern rot. Die weisse/runde Karte drumherum
 * ist weiterhin der Elementor-Container -> hier wird nur der Forminhalt
 * gestylt.
 * HubSpot-Feldnamen sind je Formular unterschiedlich -> Selektoren bewusst
 * generisch auf die HubSpot-Standardklassen (hs-form, hs-input, hs-button,
 * hs-fieldtype-*, form-columns-*) statt auf einzelne Feld-IDs.
 * WICHTIG: HubSpot wickelt das gerenderte Formular NICHT automatisch in
 * einen ".hbspt-form"-Wrapper -> das <form> selbst traegt immer die Klasse
 * ".hs-form" (per echtem Live-Test mit Form b07084b7-... auf
 * /demo-anfragen/ verifiziert), deshalb ist ".hs-form" hier der Scope statt
 * eines angenommenen Wrappers.
 * ===================================================================== */
.hs-form,
.hs-form *,
.hs-form *::before,
.hs-form *::after {
	box-sizing: border-box;
}

.hs-form {
	color: rgba(0, 0, 0, .8);
}

/* Abstand zwischen Feld-Reihen/Bloecken (entspricht 20px Gutter bei Elementor) */
.hs-form .hs-form-field,
.hs-form .hs_recaptcha,
.hs-form .legal-consent-container,
.hs-form .hs-richtext,
.hs-form .hs-submit {
	margin-bottom: 20px;
}
.hs-form fieldset {
	max-width: none !important;
	border: 0;
	margin: 0;
	padding: 0;
}
.hs-form fieldset .input {
	margin-right: 0 !important;
}
/* Grid statt Flex: Spaltenbreite ergibt sich fest aus der Spaltenzahl
 * (1fr/1fr...), nicht aus einer flex-grow/shrink-Verhandlung mit einem
 * Mindest-Basiswert. Letzteres kippt bei Breiten knapp unter dem Basiswert
 * (240px * Spalten + Gaps) unangekuendigt in den Umbruch -> "flattert". Grid
 * behaelt die Spaltenzahl bei, bis der Container wirklich zu schmal wird. */
.hs-form fieldset.form-columns-2,
.hs-form fieldset.form-columns-3 {
	display: grid;
	gap: 20px;
}
.hs-form fieldset.form-columns-2 { grid-template-columns: 1fr 1fr; }
.hs-form fieldset.form-columns-3 { grid-template-columns: 1fr 1fr 1fr; }
.hs-form fieldset.form-columns-2 > .hs-form-field,
.hs-form fieldset.form-columns-3 > .hs-form-field {
	width: auto !important;
	min-width: 0;
}
@media (max-width: 480px) {
	.hs-form fieldset.form-columns-2,
	.hs-form fieldset.form-columns-3 {
		grid-template-columns: 1fr;
	}
}

.hs-form label {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: #3F3F3E;
	margin-bottom: 5px;
}
.hs-form label .hs-form-required {
	color: #FF0000;
	margin-left: 2px;
}

/* !important: Elementors globales Kit-CSS (.elementor-kit-6 input:not([type=
 * "button"]):not([type="submit"]) etc.) greift mit identischer Spezifitaet
 * auch auf diese nativen HubSpot-Felder zu (Typo-Preset 81e7b68) -> ohne
 * !important haengt das Ergebnis vom Lade-Reihenfolge-Zufall ab.
 * Zusaetzlich (gefunden per Live-Test): HubSpot spielt PRO Formular-Instanz
 * ein eigenes <style>-Tag mit ein, das u. a.
 * ".hs-form-<id>_<uuid> fieldset.form-columns-1 .hs-input { width: 95%; }"
 * setzt (Grund unbekannt, evtl. Reserve fuer ein Inline-Fehlericon). Diese
 * Regel hat durch die zusaetzliche Form-ID-Klasse hoehere Spezifitaet als
 * unsere ".hs-form input..." -> ohne !important gewinnt HubSpots 95% und die
 * einspaltigen Felder wirken schmaler/eingerueckt als die zweispaltigen. */
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form input[type="date"],
.hs-form textarea,
.hs-form select {
	display: block;
	width: 100% !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	color: rgba(0, 0, 0, .8) !important;
	background-color: #fff !important;
	border: 1px solid #93C21E !important;
	border-radius: 9px !important;
	padding: 14px 20px !important;
	line-height: 1.4;
	transition: border-color .3s ease;
}
.hs-form textarea { min-height: 140px; resize: vertical; }
.hs-form input::placeholder,
.hs-form textarea::placeholder { color: rgba(0, 0, 0, .4); }
.hs-form input:focus,
.hs-form textarea:focus,
.hs-form select:focus {
	outline: none;
	border-color: #93C21E;
}

/* Select: HubSpot liefert ein natives <select> -> eigener Pfeil statt
 * Browser-Default. Schriftgroesse bewusst identisch zu den Text-Feldern
 * (15px, s. o.) statt wie im Original-Elementor-Formular groesser -> dort
 * wirkte der Unterschied zwischen Select und Input inkonsistent. */
.hs-form .hs-fieldtype-select .input { position: relative; }
.hs-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 44px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='rgba(0,0,0,0.8)' d='M1 1l6 7 6-7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
}

/* Checkbox / Radio (z. B. DSGVO-Einwilligung).
 * HubSpot wrappt Checkbox-/Radio-Felder in <ul class="inputs-list">
 * <li class="hs-form-booleancheckbox">…</li></ul> -> ohne Reset zeigt der
 * Browser hier seinen Standard-Listenpunkt (::marker) an. Das laesst sich in
 * HubSpot selbst nicht abschalten, da es sich um HubSpots eigenes Markup
 * handelt - deshalb hier per CSS neutralisiert. */
.hs-form .inputs-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hs-form .inputs-list > li {
	list-style: none;
}

/* Checkbox / Radio (z. B. DSGVO-Einwilligung) */
.hs-form .hs-form-booleancheckbox-display,
.hs-form .hs-form-checkbox-display,
.hs-form .hs-form-radio-display {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	font-weight: 400;
	color: rgba(0, 0, 0, .8);
}
.hs-form input[type="checkbox"],
.hs-form input[type="radio"] {
	width: 16px;
	height: 16px;
	min-width: 16px;
	margin-top: 2px;
	accent-color: #93C21E;
}

/* Button. !important aus demselben Grund wie bei den Feldern: Elementors
 * globales Kit-CSS (.elementor-kit-6 input[type="submit"] etc., Typo-Preset
 * e069ff5) greift auch hier mit gleicher Spezifitaet. */
.hs-form input[type="submit"],
.hs-form .hs-button {
	border: none !important;
	padding: 16px 24px !important;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease;
}




/* Fehler- und Erfolgsmeldungen */
.hs-form .hs-error-msgs {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}
.hs-form .hs-error-msgs li .hs-error-msg {
	color: #D9534F;
	font-size: 12px;
}
.hs-form .submitted-message {
	color: #3F3F3E;
	background-color: #F6F5F2;
	border-radius: 16px;
	padding: 24px;
	text-align: center;
}

/* DSGVO-/Legal-Text: klein und gedaempft */
.hs-form .legal-consent-container,
.hs-form .hs-richtext p {
	font-size: 12px;
	color: rgba(0, 0, 0, .6);
	line-height: 1.5;
}

/* =====================================================================
   Anfrage-Popup (Modal)
   Container geben in Elementor keine CSS-Klassen aus, deshalb per CSS-ID:
   - Overlay-Container  -> CSS-ID  p4-anfrage-modal
   - Karten-Container   -> CSS-ID  p4-anfrage-card
   - Schliessen-Button  -> CSS-ID  p4-anfrage-close
   - Paket-Label        -> CSS-ID  p4-paket-label
   - Preis-Buttons      -> Link  #anfrage-basis  bzw.  #anfrage-pro
   Die Mechanik (oeffnen/schliessen, Paket eintragen) macht theme.js.
   ===================================================================== */
#p4-anfrage-modal {
	display: none !important;
	position: fixed;
	inset: 0;
	z-index: 99999;
	align-items: flex-start;
	justify-content: center;
	padding: 5vh 20px;
	overflow-y: auto;
	background: rgba(17, 24, 20, .55);
}
#p4-anfrage-modal.is-open { display: flex !important; }

#p4-anfrage-card {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: auto;
	background: #fff;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	animation: p4-anfrage-pop .18s ease-out;
}
@keyframes p4-anfrage-pop {
	from { transform: translateY(12px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

/* Schliessen-Button (Elementor Button mit CSS-ID p4-anfrage-close) */
#p4-anfrage-close {
	position: absolute;
	top: 10px;
	right: 14px;
	z-index: 2;
	cursor: pointer;
	width: auto;
}
#p4-anfrage-close .elementor-button {
	background: transparent;
	color: #8a8f8a;
	padding: 4px 10px;
	font-size: 22px;
	line-height: 1;
	box-shadow: none;
}
#p4-anfrage-close .elementor-button:hover { color: #111; }

/* Body-Scroll sperren, solange ein Popup offen ist */
body.p4-modal-open { overflow: hidden; }

/* Demo-Seite (11566): grauer Seitentitel-Kasten ("Demo") aus dem
   Theme-Builder-Template 7058 ("Single Page - Centered Headings") nur auf
   dieser Seite ausblenden. Formular/Hero darunter bleiben unveraendert.
   Nicht am Template selbst aendern, da 7058 fuer mehrere Seiten gilt. */
body.page-id-11566 .elementor-element-b54ab08 {
	display: none !important;
}
body.page-id-11566 .elementor-element-23713cd6 {
	padding-top: 0 !important;
}
/* Demo-Seite (11566): leerer 100px-Abstandshalter-Container am Ende von
   Template 7058 (weisser Streifen zwischen FAQ-Sektion und Footer-CTA)
   nur auf dieser Seite ausblenden. */
body.page-id-11566 .elementor-element-bb657d9 {
	display: none !important;
}

/* =====================================================================
   Content-Gate (siehe mu-plugins/plan4-webinar-gate.php)
   Platzhalter-Container an der Stelle des Videos (Webinar, .p4-webinar-gate)
   bzw. des Datei-Downloads (Whitepaper, .p4-download-gate): zunaechst
   rendert GTM dort das HubSpot-Formular hinein ([data-hs-form-id]); nach
   erfolgreichem Absenden ersetzt theme.js den Inhalt durch Video-Iframe
   bzw. Download-Button.
   Die Karten-Optik (Rahmen/Radius/Schatten/Hintergrund) kommt NICHT mehr von
   hier, sondern direkt vom umgebenden Elementor-Shortcode-Widget (Erweitert-
   Tab -> Rand/Hintergrund) -> dort in Elementor frei anpassbar, ohne diese
   Datei anzufassen. Hier nur noch Funktionales: Positionierung/Clipping fuer
   das absolut positionierte Iframe/Formular sowie die Groesse der Box.
   ===================================================================== */
.p4-webinar-gate,
.p4-download-gate {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
}
/* Video-Variante: feste 16:9-Box, damit das Layout vor/nach dem Wechsel
   nicht springt. Download-Variante: hoehe ergibt sich aus dem Inhalt. */
.p4-webinar-gate {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.p4-download-gate {
	min-height: 220px;
}
.p4-webinar-gate iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	animation: p4-gate-fade-in .5s ease;
}
/* Solange HubSpot das Formular einbettet, liegt es in einer Karte statt
   randlos ueber die volle Breite -> etwas Innenabstand, passend zu den
   uebrigen HubSpot-Formularen (s. o.). */
.p4-webinar-gate .hs-form {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	background: #F6F5F2;
	padding: 32px;
}
.p4-download-gate .hs-form {
	position: relative;
}

/* "Danke"-Zwischenschritt: nach Formular-Absenden zeigt theme.js hier kurz
   eine Lade-Nachricht (mit Spinner), bevor der echte Inhalt eingeblendet
   wird (siehe theme.js reveal()/showLoading()). Optik an die uebrigen
   Karten des Sites angelehnt (helle Flaeche, Akzentgruen, dunkler Text)
   statt eines nackten Formulars/Iframes. */
.p4-webinar-gate.is-loading,
.p4-download-gate.is-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	text-align: center;
	padding: 40px;
	background: #F6F5F2;
	animation: p4-gate-fade-in .4s ease;
}
.p4-webinar-gate.is-loading.is-leaving,
.p4-download-gate.is-loading.is-leaving {
	animation: p4-gate-fade-out .4s ease forwards;
}
.p4-gate-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid rgba(63, 63, 62, .15);
	border-top-color: #93C21E;
	border-radius: 50%;
	animation: p4-gate-spin .9s linear infinite;
}
.p4-gate-loading-text {
	margin: 0;
	max-width: 380px;
	font-size: 16px;
	line-height: 1.5;
	color: #3F3F3E;
}

/* Freigeschalteter Download (Whitepaper): eigener, echter Elementor-Container
   (Container #p4-download-result mit Ueberschrift #p4-download-result-text +
   Button-Widget #p4-download-cta-wrap), gebaut im Template neben dem
   Shortcode-Widget. Layout/Optik/Hover des Buttons kommen komplett aus
   Elementor -> dort frei anpassbar, ohne diese Datei oder theme.js
   anzufassen. Hier nur: standardmaessig ausgeblendet, bis theme.js ihn nach
   erfolgreichem Formular-Absenden einblendet (siehe showDownload()).
   Fallback-Klasse .p4-download-ready/-filename/-button bleibt fuer Templates
   ohne diese Elementor-Elemente (siehe theme.js-Fallback). */
#p4-download-result {
	display: none;
}
.p4-download-ready {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
	padding: 40px;
	background: #F6F5F2;
	animation: p4-gate-fade-in .5s ease;
}
.p4-download-filename {
	margin: 0;
	font-size: 15px;
	color: #3F3F3E;
}
.p4-download-button {
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -.2px;
	color: #F6F5F2;
	background-color: #3F3F3E;
	border-radius: 10px;
	padding: 16px 28px;
	text-decoration: none;
	transition: opacity .3s ease;
}
.p4-download-button:hover {
	opacity: .85;
}

@keyframes p4-gate-spin {
	to { transform: rotate(360deg); }
}
@keyframes p4-gate-fade-in {
	from { opacity: 0; transform: scale(.98); }
	to   { opacity: 1; transform: none; }
}
@keyframes p4-gate-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.p4-webinar-gate.is-loading,
	.p4-download-gate.is-loading,
	.p4-webinar-gate.is-loading.is-leaving,
	.p4-download-gate.is-loading.is-leaving,
	.p4-gate-spinner,
	.p4-webinar-gate iframe,
	.p4-download-ready {
		animation: none;
	}
}

.blog-content h2 {
	font-size: var( --e-global-typography-vamtam_h3-font-size ) !important;
	font-weight: var( --e-global-typography-vamtam_h3-font-weight ) !important;
}

.blog-content h3 {
	font-size: var( --e-global-typography-vamtam_h4-font-size ) !important;
	font-weight: var( --e-global-typography-vamtam_h4-font-weight ) !important;
}

.blog-content a {
	overflow-wrap: anywhere;
	word-break: break-word;
}