/*
Theme Name:   Hello Elementor Child – maxonline
Theme URI:    https://maxonline-marketing.de
Description:  Child-Theme von Hello Elementor für maxonline-marketing.de. Enthält die Erweiterungen für das Beitrags-Template „Knowledge Case“.
Author:       maxonline
Template:     hello-elementor
Version:      1.0.7
Requires PHP: 7.4
Text Domain:  hello-elementor-child
*/

/* =========================================================
   Expertenmeinung im Beitragstext – [expertenmeinung]
   ========================================================= */
.mo-expert {
	display: flow-root; /* weicht dem umflossenen Inhaltsverzeichnis sauber aus */
	position: relative;
	margin: 40px 0;
	padding: 44px 40px 34px;
	background: linear-gradient(135deg, #1C1C24 0%, #16161B 100%);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 24px;
	font-family: "Outfit", sans-serif;
}
.mo-expert__chip {
	display: inline-block;
	margin-bottom: 22px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #5280FF;
	background: rgba(82, 128, 255, 0.1);
	border: 1px solid rgba(82, 128, 255, 0.5);
	border-radius: 6px;
	line-height: 1.6;
}
.mo-expert__quote {
	position: relative;
	margin: 0;
	padding: 0 0 0 28px;
	border: 0;
	border-left: 3px solid #5280FF;
	font-size: 23px;
	font-weight: 500;
	font-style: normal;
	line-height: 1.5;
	color: #F4F5FA;
}
.mo-expert__quote::before {
	content: "\201C";
	position: absolute;
	left: 20px;
	top: -44px;
	font-family: Georgia, serif;
	font-size: 110px;
	line-height: 1;
	color: rgba(82, 128, 255, 0.25);
	pointer-events: none;
}
.mo-expert .mo-expert__quote p {
	margin: 0 0 12px;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.mo-expert .mo-expert__quote p:last-child { margin-bottom: 0; }
.mo-expert__person {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 26px;
}
.mo-expert__photo {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid #5280FF;
}
.mo-expert__info { display: flex; flex-direction: column; }
.mo-expert__name { font-size: 17px; font-weight: 700; color: #F4F5FA; line-height: 1.3; }
.mo-expert__role { font-size: 14px; color: rgba(244, 245, 250, 0.52); line-height: 1.4; margin-top: 2px; }

@media (max-width: 767px) {
	.mo-expert { padding: 32px 22px 26px; margin: 32px 0; }
	.mo-expert__quote { font-size: 19px; padding-left: 18px; }
}

/* Karte im Template ausblenden, wenn die Expertenmeinung im Text steht */
body.mo-expert-inline [data-id="57d19bf0"] { display: none !important; }

/* =========================================================
   FAQ-Akkordeon im Template – {{mo_faq}}
   ========================================================= */
.mo-faq { display: flex; flex-direction: column; gap: 12px; font-family: "Outfit", sans-serif; }
.mo-faq__item {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.mo-faq__item[open] { border-color: rgba(82, 128, 255, 0.45); background: rgba(82, 128, 255, 0.05); }
.mo-faq__q {
	position: relative;
	display: block;
	padding: 18px 56px 18px 22px;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	color: #F4F5FA;
}
.mo-faq__q::-webkit-details-marker { display: none; }
.mo-faq__q::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid #5280FF;
	border-bottom: 2px solid #5280FF;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}
.mo-faq__item[open] > .mo-faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.mo-faq__q:hover { color: #FFFFFF; }
.mo-faq__q:focus-visible { outline: 2px solid #5280FF; outline-offset: 2px; border-radius: 14px; }
.mo-faq__a {
	padding: 0 22px 20px;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(244, 245, 250, 0.72);
}
.mo-faq__a p { margin: 0 0 12px; }
.mo-faq__a p:last-child { margin-bottom: 0; }
.mo-faq__a a { color: #5280FF; text-decoration: underline; }
@media (max-width: 767px) {
	.mo-faq__q { padding: 16px 48px 16px 18px; font-size: 16px; }
	.mo-faq__a { padding: 0 18px 18px; }
}

/* =========================================================
   Karten ohne Inhalt ausblenden (auch wenn der Titel vorbelegt ist)
   ========================================================= */
[data-id="19a520bf"]:has([data-id="46df0af9"]:empty),
[data-id="3978c98f"]:has([data-id="75749aa8"]:empty),
[data-id="4861f646"]:has([data-id="52e3d3b0"]:empty),
[data-id="1e113df6"]:has([data-id="321930ad"]:empty),
[data-id="57d19bf0"]:has([data-id="7a255787"]:empty) { display: none !important; }

/* =========================================================
   Download-Seiten (Download Manager) im dunklen maxonline-Look
   ========================================================= */
.single-wpdmpro .w3eden { color: rgba(244, 245, 250, 0.72); font-family: "Outfit", sans-serif; }
.single-wpdmpro .w3eden .row { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; }
.single-wpdmpro .w3eden .row > [class*="col-"] { padding: 0; flex: 1 1 280px; max-width: none; }
.single-wpdmpro .w3eden .row > .col-md-12:empty { display: none; }
.single-wpdmpro .w3eden .col-md-7 { order: -1; flex: 1 1 360px; }
/* Titel steht bereits im Hero des Templates */
.single-wpdmpro .w3eden h1.mt-0 { display: none; }
.single-wpdmpro .w3eden p { font-size: 17px; line-height: 1.75; margin: 0 0 16px; color: rgba(244, 245, 250, 0.72); }
.single-wpdmpro .w3eden .wpdm-button-area { margin-bottom: 18px !important; }
.single-wpdmpro .w3eden .btn.btn-primary,
.single-wpdmpro .w3eden .wpdm-download-link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%;
	padding: 16px 26px;
	font-family: "Outfit", sans-serif; font-size: 16px; font-weight: 600;
	color: #FFFFFF !important;
	background: #3959AC !important; border: 0 !important; border-radius: 10px !important;
	box-shadow: 0 10px 30px rgba(57, 89, 172, 0.35);
	text-decoration: none; transition: background 0.3s ease, transform 0.2s ease;
}
.single-wpdmpro .w3eden .btn.btn-primary:hover,
.single-wpdmpro .w3eden .wpdm-download-link:hover { background: #5280FF !important; transform: translateY(-1px); }
.single-wpdmpro .w3eden .wpdm-download-link::after { content: "\2193"; }
.single-wpdmpro .w3eden .list-group { margin: 0; padding: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); }
.single-wpdmpro .w3eden .list-group-item {
	display: flex; justify-content: space-between; align-items: center;
	padding: 12px 16px; margin: 0;
	font-size: 14px; color: rgba(244, 245, 250, 0.6);
	background: rgba(255, 255, 255, 0.02) !important;
	border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.single-wpdmpro .w3eden .list-group-item:last-child { border-bottom: 0 !important; }
.single-wpdmpro .w3eden .badge { background: transparent !important; color: #F4F5FA !important; font-size: 14px; font-weight: 600; padding: 0; }

/* Artikel-Box ausblenden, wenn kein Knowledge Case verknüpft ist */
body.mo-download-no-article [data-mo-download-article],
body.mo-download-no-article .mo-download-article { display: none !important; }

/* =========================================================
   Kernzitat im Beitragstext – [zitat]
   ========================================================= */
.mo-quote {
	display: flow-root;
	position: relative;
	margin: 48px 0;
	padding: 8px 0 8px 36px;
	border-left: 4px solid #5280FF;
	font-family: "Outfit", sans-serif;
}
.mo-quote::before {
	content: "\201D";
	position: absolute;
	right: 0;
	top: -28px;
	font-family: Georgia, serif;
	font-size: 150px;
	line-height: 1;
	color: rgba(82, 128, 255, 0.14);
	pointer-events: none;
}
.mo-quote__text { margin: 0; padding: 0; border: 0; background: none; }
.mo-quote .mo-quote__text p {
	margin: 0;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: #F4F5FA;
}
.mo-quote__source {
	margin-top: 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #5280FF;
}
.mo-quote__source::before { content: "— "; }
@media (max-width: 767px) {
	.mo-quote { padding-left: 22px; margin: 36px 0; }
	.mo-quote .mo-quote__text p { font-size: 22px; }
	.mo-quote::before { font-size: 100px; top: -18px; }
}

/* =========================================================
   Infografik im Beitragstext – [infografik]
   ========================================================= */
.mo-visual { display: flow-root; margin: 44px 0; font-family: "Outfit", sans-serif; }
.mo-visual__link {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #16161B;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.mo-visual__img { display: block; width: 100%; height: auto; transition: transform 0.4s ease; }
.mo-visual__link:hover .mo-visual__img { transform: scale(1.015); }
.mo-visual__zoom {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(12, 12, 16, 0.75) no-repeat center / 18px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F5FA' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
	border: 1px solid rgba(255, 255, 255, 0.18);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.mo-visual__link:hover .mo-visual__zoom,
.mo-visual__link:focus-visible .mo-visual__zoom { opacity: 1; }
.mo-visual__caption {
	margin-top: 12px;
	padding-left: 14px;
	border-left: 2px solid #5280FF;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(244, 245, 250, 0.6);
}

/* FAQ-Fragen als H3 (Gliederung) – Optik wie bisher */
.mo-faq .mo-faq__q .mo-faq__title,
.elementor .mo-faq .mo-faq__q .mo-faq__title {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: inherit;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit;
	letter-spacing: normal;
	color: inherit !important;
}

/* ---------------------------------------------------------------
   1.0.7 – Meta-Zeile (Autor · Datum · Lesezeit) und Autorbox
   ------------------------------------------------------------- */
.mo-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	margin: 0;
	font-family: var(--mo-font, 'Outfit'), sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mo-text-muted, rgba(244, 245, 250, 0.6));
}
.mo-meta__item + .mo-meta__item::before {
	content: "·";
	margin: 0 10px;
	opacity: 0.6;
}
.mo-meta a,
.mo-author__link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(82, 128, 255, 0.5);
	transition: border-color 0.3s, color 0.3s;
}
.mo-meta a:hover,
.mo-author__link:hover {
	color: var(--mo-brand-bright, #5280FF);
	border-color: currentColor;
}
.mo-meta a {
	color: var(--mo-text, #F4F5FA);
}
.elementor-element-c14d40a p:empty {
	display: none;
}
/* Meta-Zeile ist im Template standardmäßig ausgeblendet (Platzhalter) – sichtbar, sobald ersetzt */
.elementor div:has(> .mo-meta) {
	display: block !important;
}