/* markoon Inhaltsfelder: Frontend. Farben ueber Elementors globale Farben, per CSS-Variablen anpassbar. */
.mcpt-keyfacts { --mcpt-icon-color: var(--e-global-color-accent, var(--e-global-color-primary, currentColor)); --mcpt-icon-size: 1.15em; }
.mcpt-keyfacts__title { margin: 0 0 .75em; font-weight: 700; }
.mcpt-keyfacts__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6em; }
.mcpt-keyfacts__item { display: flex; align-items: flex-start; gap: .7em; margin: 0; }
.mcpt-keyfacts__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 1.5em; color: var(--mcpt-icon-color); font-size: var(--mcpt-icon-size); }
.mcpt-keyfacts__icon svg { width: 1em; height: 1em; fill: currentColor; }
.mcpt-keyfacts__text { flex: 1; }

.mcpt-faq__item { border: 1px solid rgba(0, 0, 0, .12); border-radius: 6px; margin-bottom: .6em; }
.mcpt-faq__question { cursor: pointer; padding: .9em 1.1em; font-weight: 600; }
.mcpt-faq__answer { padding: 0 1.1em .9em; }
.mcpt-faq__answer > :last-child { margin-bottom: 0; }

.mcpt-quote {
	--mcpt-quote-accent: var(--e-global-color-accent, var(--e-global-color-primary, currentColor));
	margin: 0;
	background: #fff;
	border: 1px solid #e6e8ef;
	border-radius: 12px;
	padding: 1.5em 1.7em;
}
.mcpt-quote__icon { display: block; width: 2em; height: 2em; margin-bottom: .5em; color: var(--mcpt-quote-accent); }
.mcpt-quote__icon svg { width: 100%; height: 100%; fill: currentColor; }
.mcpt-quote__text { margin: 0 0 1em; padding: 0; border: 0; font-style: italic; font-weight: 600; color: var(--mcpt-quote-accent); }
.mcpt-quote__text p { margin: 0; }
.mcpt-quote__divider { display: block; height: 1px; margin: 0 0 1em; background: #e6e8ef; }
.mcpt-quote__person { display: flex; align-items: center; gap: .9em; }
.mcpt-quote__image { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mcpt-quote__meta { display: flex; flex-direction: column; line-height: 1.35; }
.mcpt-quote__name { font-weight: 700; }
.mcpt-quote__job, .mcpt-quote__company { font-size: .9em; opacity: .8; }

/* Elementor-Widget "Das Wichtigste auf einen Blick" */
.mcpt-kf {
	--mcpt-kf-accent: var(--e-global-color-accent, #5B21D9);
	display: flex; align-items: flex-start; column-gap: 1.4em;
	background-color: #f3f0fd;
	background-color: color-mix(in srgb, var(--mcpt-kf-accent) 8%, #fff);
	border: 1px solid #e4dcfb;
	border-color: color-mix(in srgb, var(--mcpt-kf-accent) 18%, #fff);
	border-radius: 10px;
	padding: 1.5em 2em;
}
.mcpt-kf__head-icon { flex: 0 0 auto; display: inline-flex; line-height: 1; font-size: 28px; color: var(--mcpt-kf-accent); }
.mcpt-kf__head-icon svg { width: 1em; height: 1em; fill: currentColor; }
.mcpt-kf__body { flex: 1; min-width: 0; }
.mcpt-kf__title { margin: 0 0 .8em; font-size: 1.3em; font-weight: 700; line-height: 1.3; color: var(--mcpt-kf-accent); }
.mcpt-kf__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mcpt-kf__item { display: flex; align-items: center; gap: 18px; margin: 0; }
.mcpt-kf__icon { flex: 0 0 auto; display: inline-flex; line-height: 1; font-size: 22px; color: var(--mcpt-kf-accent); }
.mcpt-kf__icon svg { width: 1em; height: 1em; fill: currentColor; }
.mcpt-kf__text { flex: 1; min-width: 0; color: var(--e-global-color-text, inherit); }
/* Der Kasten ist ein Bauteil, kein Fliesstext: nicht auf die Lesebreite (markoon-elementor-widgets) begrenzen. */
.elementor-widget > .mcpt-kf.mcpt-kf.mcpt-kf.mcpt-kf,
.elementor-widget > .mcpt-ap.mcpt-ap.mcpt-ap.mcpt-ap { max-width: none; }
/* Geraete ueber Elementors Geraetemodus, nicht ueber feste Breiten. */
body[data-elementor-device-mode="mobile"] .mcpt-kf { column-gap: .8em; }
body[data-elementor-device-mode="mobile"] .mcpt-kf__item { align-items: flex-start; }

/* Audio-Player */
.mcpt-ap {
	--mcpt-ap-accent: var(--e-global-color-accent, #5B21D9);
	border: 1px solid #e6e8ef;
	border-color: color-mix(in srgb, var(--mcpt-ap-accent) 12%, #e6e8ef);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}
.mcpt-ap__head { display: flex; align-items: center; gap: 1.2em; padding: 1.2em 1.6em; }
.mcpt-ap__head-icon { flex: 0 0 auto; display: inline-flex; width: 30px; height: 30px; color: var(--mcpt-ap-accent); }
.mcpt-ap__head-icon svg { width: 100%; height: 100%; }
.mcpt-ap__head-text { display: flex; flex-direction: column; line-height: 1.35; }
.mcpt-ap__title { font-weight: 700; font-size: 1.15em; color: var(--e-global-color-primary, #1f1f3a); }
.mcpt-ap__subtitle { color: var(--e-global-color-text, #6b6b7b); }
.mcpt-ap__controls {
	/* Umbruch statt Ueberstand: bei wenig Platz rutschen Lautstaerke und
	   Geschwindigkeit in eine zweite Zeile, statt aus der Karte zu ragen. */
	display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1.1em;
	padding: 1em 1.6em;
	background: #f7f7fb;
	background: color-mix(in srgb, var(--mcpt-ap-accent) 4%, #f8f8fb);
}
.mcpt-ap audio { display: none; }
.mcpt-ap__play {
	--mcpt-ap-play: 40px;
	flex: 0 0 auto; width: var(--mcpt-ap-play); height: var(--mcpt-ap-play); padding: 0; border: 0; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	background: var(--mcpt-ap-accent); color: #fff; transition: transform .15s, filter .15s;
}
.mcpt-ap__play:hover { filter: brightness(1.1); }
.mcpt-ap__play:active { transform: scale(.96); }
.mcpt-ap__play svg { width: 45%; height: 45%; fill: currentColor; }
.mcpt-ap__i-pause, .mcpt-ap.is-playing .mcpt-ap__i-play { display: none; }
.mcpt-ap.is-playing .mcpt-ap__i-pause { display: block; }
.mcpt-ap__current, .mcpt-ap__rest { flex: 0 0 auto; min-width: 0; font-variant-numeric: tabular-nums; font-size: .95em; color: var(--e-global-color-text, #6b6b7b); }
.mcpt-ap__rest { text-align: end; }
.mcpt-ap__bar {
	--mcpt-ap-progress: 0%;
	flex: 1 1 110px; min-width: 0; height: 6px; margin: 0; padding: 0; cursor: pointer;
	-webkit-appearance: none; appearance: none; border-radius: 3px; background: transparent;
}
.mcpt-ap__bar::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--mcpt-ap-accent) var(--mcpt-ap-progress), var(--mcpt-ap-track, #dcdce8) var(--mcpt-ap-progress)); }
.mcpt-ap__bar::-moz-range-track { height: 6px; border-radius: 3px; background: var(--mcpt-ap-track, #dcdce8); }
.mcpt-ap__bar::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--mcpt-ap-accent); }
.mcpt-ap__bar::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--mcpt-ap-accent); }
.mcpt-ap__bar::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--mcpt-ap-accent); }
.mcpt-ap__bar:focus-visible { outline: 2px solid var(--mcpt-ap-accent); outline-offset: 4px; }
.mcpt-ap__speed {
	flex: 0 0 auto; min-width: 3em; padding: .35em .7em; cursor: pointer;
	border: 1px solid color-mix(in srgb, var(--mcpt-ap-accent) 20%, #fff); border-radius: 8px;
	background: #fff; color: var(--mcpt-ap-accent); font-weight: 600; font-size: .95em; line-height: 1.2;
}
.mcpt-ap__speed:hover { background: color-mix(in srgb, var(--mcpt-ap-accent) 8%, #fff); }
.mcpt-ap__volume { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; }
.mcpt-ap__mute {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
	background: transparent; color: var(--mcpt-ap-accent); cursor: pointer;
}
.mcpt-ap__mute:hover { background: color-mix(in srgb, var(--mcpt-ap-accent) 8%, #fff); }
.mcpt-ap__mute svg { width: 20px; height: 20px; fill: currentColor; }
.mcpt-ap__i-mute { display: none; }
.mcpt-ap.is-muted .mcpt-ap__wave, .mcpt-ap.is-muted .mcpt-ap__wave2 { display: none; }
.mcpt-ap.is-muted .mcpt-ap__i-mute { display: block; }
/* Der Regler klappt ueber dem Symbol auf und braucht so keinen Platz in der Zeile. */
.mcpt-ap__vol-panel {
	position: absolute; bottom: calc(100% + 8px); inset-inline-end: 0;
	display: flex; align-items: center; padding: 8px 12px;
	background: #fff; border: 1px solid color-mix(in srgb, var(--mcpt-ap-accent) 20%, #e6e8ef);
	border-radius: 10px; box-shadow: 0 6px 18px rgba(20, 20, 50, .12); z-index: 5;
}
.mcpt-ap__vol-panel[hidden] { display: none; }
.mcpt-ap__vol-panel::after {
	content: ""; position: absolute; top: 100%; inset-inline-end: 10px;
	border: 6px solid transparent; border-top-color: #fff;
}
.mcpt-ap.is-volume-open .mcpt-ap__mute { background: color-mix(in srgb, var(--mcpt-ap-accent) 10%, #fff); }
.mcpt-ap__vol {
	--mcpt-ap-volume: 50%;
	flex: 0 0 auto; width: 96px; height: 16px; margin: 0; padding: 0;
	-webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.mcpt-ap__vol::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--mcpt-ap-accent) var(--mcpt-ap-volume), var(--mcpt-ap-track, #dcdce8) var(--mcpt-ap-volume)); }
.mcpt-ap__vol::-moz-range-track { height: 4px; border-radius: 2px; background: var(--mcpt-ap-track, #dcdce8); }
.mcpt-ap__vol::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--mcpt-ap-accent); }
.mcpt-ap__vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--mcpt-ap-accent); }
.mcpt-ap__vol::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--mcpt-ap-accent); }
.mcpt-ap__vol:focus-visible { outline: 2px solid var(--mcpt-ap-accent); outline-offset: 4px; }
body[data-elementor-device-mode="mobile"] .mcpt-ap__vol { width: 80px; }
body[data-elementor-device-mode="mobile"] .mcpt-ap__head,
body[data-elementor-device-mode="mobile"] .mcpt-ap__controls { padding-inline: 1em; }
body[data-elementor-device-mode="mobile"] .mcpt-ap__controls { gap: .7em; }
body[data-elementor-device-mode="mobile"] .mcpt-ap__current { display: none; }

/* Badge Beitragstyp */
.mcpt-badge {
	--mcpt-badge-color: var(--e-global-color-accent, #5B21D9);
	display: inline-block;
	padding: .3em .75em;
	border-radius: 6px;
	font-size: .8em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	color: var(--mcpt-badge-color);
	background-color: #efeafd;
	background-color: color-mix(in srgb, var(--mcpt-badge-color) 14%, #fff);
	border: 1px solid color-mix(in srgb, var(--mcpt-badge-color) 22%, #fff);
	white-space: nowrap;
	vertical-align: middle;
}
.mcpt-badge-wrap { display: block; }
.mcpt-quote--empty, .mcpt-ap--empty { color: #6b6b7b; font-style: italic; }

/* Faktenleiste */
.mcpt-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	background: #fff;
	border: 1px solid #e6e8ef;
	border-radius: 10px;
	overflow: hidden;
}
.mcpt-facts__item + .mcpt-facts__item { border-inline-start: var(--mcpt-facts-divider-w, 1px) solid var(--mcpt-facts-divider-c, #e6e8ef); }
.mcpt-facts__item { display: flex; align-items: center; gap: 14px; padding: 1em 1.4em; min-width: 0; }
.mcpt-facts__icon { flex: 0 0 auto; display: inline-flex; line-height: 1; font-size: 26px; color: var(--e-global-color-accent, currentColor); }
.mcpt-facts__icon svg { width: 1em; height: 1em; fill: currentColor; }
.mcpt-facts__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.mcpt-facts__label { font-size: .85em; color: var(--e-global-color-text, #6b6b7b); }
.mcpt-facts__value { font-weight: 600; color: var(--e-global-color-primary, inherit); }
.mcpt-facts__value a { color: inherit; text-decoration: none; }
.mcpt-facts__value a:hover { text-decoration: underline; }
.mcpt-facts--empty { color: #6b6b7b; font-style: italic; }
.elementor-widget > .mcpt-facts.mcpt-facts.mcpt-facts.mcpt-facts { max-width: none; }

/* Beitrags-Meta */
.mcpt-meta { display: flex; flex-direction: column; align-items: flex-start; row-gap: 8px; column-gap: 10px; }
.mcpt-meta__row { display: flex; align-items: center; column-gap: inherit; min-width: 0; }
.mcpt-meta--aligned { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); align-items: center; }
.mcpt-meta--aligned .mcpt-meta__row { display: contents; }
.mcpt-meta__icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 16px; color: var(--e-global-color-accent, currentColor); }
.mcpt-meta__icon svg { width: 1em; height: 1em; fill: currentColor; }
.mcpt-meta__avatar { display: block; width: 22px; height: 22px; overflow: hidden; line-height: 0; }
.mcpt-meta__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcpt-meta__label { white-space: nowrap; }
.mcpt-meta__value { min-width: 0; }
.mcpt-meta__more { opacity: .7; }
.mcpt-meta__value.mcpt-meta__value a { color: inherit; text-decoration: none; font-weight: inherit; font-style: inherit; }
.mcpt-meta__value a:hover { text-decoration: underline; }
.elementor-widget > .mcpt-meta.mcpt-meta.mcpt-meta.mcpt-meta { max-width: none; }

/* Leeres Feld = kein Kasten.
   Gibt ein Widget nichts aus, setzt es einen unsichtbaren Marker. Der
   naechstgelegene Container mit Hintergrund (mk-has-bg aus markoon Elementor
   Widgets) verschwindet dann mit. Absichtlich nur der direkte Container -
   sonst wuerde die ganze Spalte darueber mit ausgeblendet. */
.mcpt-empty { display: none !important; }
.e-con.mk-has-bg:has(> .elementor-widget > .elementor-widget-container > .mcpt-empty),
.e-con.mk-has-bg:has(> .elementor-widget > .mcpt-empty),
.elementor-widget:has(> .elementor-widget-container > .mcpt-empty),
.elementor-widget:has(> .mcpt-empty) { display: none; }

/* Aktionsbox */
.mcpt-cta {
	--mcpt-cta-accent: var(--e-global-color-accent, #2b56f5);
	display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
	padding: 1.2em 1.6em; border: 1px solid #e6e8ef; border-radius: 10px; background: #fff;
}
.mcpt-cta__icon { flex: 0 0 auto; display: inline-flex; line-height: 1; font-size: 34px; color: var(--mcpt-cta-accent); }
.mcpt-cta__icon svg { width: 1em; height: 1em; fill: currentColor; }
.mcpt-cta__body { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
.mcpt-cta__title { margin: 0; font-weight: 700; }
.mcpt-cta__text { color: var(--e-global-color-text, #6b6b7b); }
.mcpt-cta__button {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
	padding: .8em 1.4em; border-radius: 8px; text-decoration: none;
	background: var(--mcpt-cta-accent); color: #fff; font-weight: 600;
	transition: filter .15s, transform .15s;
}
.mcpt-cta__button:hover { filter: brightness(1.08); }
.mcpt-cta__button:active { transform: scale(.99); }
.mcpt-cta__button-icon { display: inline-flex; line-height: 0; }
.mcpt-cta__button-icon svg { width: 1em; height: 1em; fill: currentColor; }
/* Schmale Breiten: Schaltflaeche unter den Text, volle Breite. */
body[data-elementor-device-mode="mobile"] .mcpt-cta { flex-direction: column; align-items: flex-start; }
body[data-elementor-device-mode="mobile"] .mcpt-cta__button { width: 100%; justify-content: center; }
.elementor-widget > .mcpt-cta.mcpt-cta.mcpt-cta.mcpt-cta { max-width: none; }

/* ---------------------------------------------------------------------------
 * Reihenfolge auf Tablet und Handy
 *
 * Statt an Elementor-IDs zu haengen (die sich je Website unterscheiden),
 * vergibst du im Editor unter Erweitert > CSS-Klassen sprechende Namen.
 * Damit gilt dieselbe Regel auf jeder Website, ohne eine Zeile anzupassen.
 *
 *   mk-post-wrap   auf den Container, der Sidebar und Inhaltsspalte enthaelt
 *   mk-post-flow   auf die Spalten selbst (Sidebar und Inhalt)
 *   dann je Kasten eine der Klassen unten.
 *
 * Desktop bleibt unberuehrt. Auf schmalen Breiten loesen sich die Spalten auf
 * (display: contents), ihre Kaesten werden Geschwister und lassen sich einzeln
 * sortieren - ohne doppelten Inhalt und ohne etwas auszublenden.
 * ------------------------------------------------------------------------- */

body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-wrap,
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-wrap > .e-con-inner { display: flex; flex-direction: column; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-flow { display: contents; }

body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-breadcrumb { order: 10; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-image      { order: 20; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-badge      { order: 30; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-title      { order: 40; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-meta       { order: 50; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-audio      { order: 60; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-excerpt    { order: 70; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-cta-top    { order: 80; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-keyfacts   { order: 90; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-cta        { order: 100; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-toc        { order: 110; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-content    { order: 120; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-cta-bottom { order: 130; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-quote      { order: 135; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-faq        { order: 140; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-share      { order: 150; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-newsletter { order: 160; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-ask        { order: 170; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-related    { order: 180; }
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-nav        { order: 190; }
/* Alles ohne eigene Klasse landet dazwischen statt ganz oben. */
body:is([data-elementor-device-mode="tablet"],[data-elementor-device-mode="mobile"]) .mk-post-wrap > .e-con-inner > *:not([class*="mk-post-"]) { order: 185; }