/* Contix Downloads – Manager (nur für Redakteure sichtbar).
 * Bewusst neutral und gegen Theme-/Elementor-Kit-Stile abgeschirmt. */
.cxdm {
	--cxdm-accent: #2271b1;
	--cxdm-danger: #b32d2e;
	--cxdm-border: #dcdcde;
	--cxdm-muted: #646970;
	--cxdm-bg: #fff;
	--cxdm-soft: #f6f7f7;
	margin-top: 1rem;
	color: #1d2327;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}
.cxdm *, .cxdm *::before, .cxdm *::after { box-sizing: border-box; }
.cxdm--admin { margin-top: 0; }

.cxdm button,
.cxdm input {
	all: unset;
	box-sizing: border-box;
	font: inherit;
	color: inherit;
}
.cxdm button { cursor: pointer; }
/* Theme-Resets neutralisieren (Hello Elementor färbt button:hover/:focus rot).
 * Gleiche Spezifität wie der Reset, aber später geladen – die Komponentenregeln unten gewinnen. */
.cxdm :where(button):hover,
.cxdm :where(button):focus { background-color: transparent; color: inherit; text-decoration: none; }
.cxdm button:disabled { cursor: default; opacity: .4; }
.cxdm button:focus-visible,
.cxdm input:focus-visible { outline: 2px solid var(--cxdm-accent); outline-offset: 1px; }
.cxdm [hidden] { display: none !important; }

.cxdm .cxdm__toggle {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .45em .9em;
	border: 1px dashed var(--cxdm-accent);
	border-radius: 4px;
	background: #f0f6fc;
	color: var(--cxdm-accent);
	font-weight: 600;
}
.cxdm .cxdm__toggle:hover { background: #e2eefa; }

.cxdm__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }

/* Demo-Modus (Besucher probieren die Pflege aus): auffälliger Kasten im Look der Website.
 * Farben/Rundungen aus den Theme-Tokens (Contix Theme bzw. Elementor-Kit), sonst neutrale Standardwerte. */
.cxdm--demo {
	--cxdm-d-accent: var(--c-primary, var(--e-global-color-primary, #2271b1));
	--cxdm-d-deep: var(--c-primary-deep, color-mix(in srgb, var(--cxdm-d-accent) 80%, #000));
	--cxdm-d-on: var(--c-on-primary, #fff);
	--cxdm-d-soft: var(--c-primary-soft, color-mix(in srgb, var(--cxdm-d-accent) 10%, #fff));
	--cxdm-d-ink: var(--c-ink, #1d2327);
	--cxdm-d-muted: var(--c-muted, #50575e);
	--cxdm-d-radius: var(--r-md, 14px);
	--cxdm-d-btn-radius: var(--r-btn, 8px);
	margin: 0 0 2rem;
	color: var(--cxdm-d-ink);
	font: inherit;
}
.cxd-demo-slot .cxdm--demo { margin: 0; }
.cxdm--demo .cxdm__panel {
	margin-top: .75rem;
	color: #1d2327;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 14px;
	line-height: 1.4;
}

.cxdm__intro {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem 1.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid color-mix(in srgb, var(--cxdm-d-accent) 28%, transparent);
	border-radius: var(--cxdm-d-radius);
	background: var(--cxdm-d-soft);
	box-shadow: var(--shadow-card, 0 1px 2px rgba(0, 0, 0, .05), 0 10px 28px -14px rgba(0, 0, 0, .2));
}
.cxdm__intro-icon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--cxdm-d-accent);
	color: var(--cxdm-d-on);
	animation: cxdm-pulse 2.4s ease-out .6s 3;
}
.cxdm__intro-copy { min-width: 0; }
.cxdm__badge {
	display: inline-block;
	margin-bottom: .35rem;
	padding: .15em .7em;
	border-radius: var(--r-pill, 999px);
	background: var(--cxdm-d-accent);
	color: var(--cxdm-d-on);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.6;
}
.cxdm--demo .cxdm__intro-title {
	margin: 0;
	color: var(--cxdm-d-ink);
	font-family: var(--e-global-typography-primary-font-family, inherit);
	font-size: 1.25rem;
	font-weight: var(--fw-display, 700);
	line-height: 1.3;
	text-wrap: balance;
}
.cxdm--demo .cxdm__intro-text {
	margin: .3rem 0 0;
	color: var(--cxdm-d-muted);
	font-size: 1rem;
	line-height: 1.5;
}

.cxdm .cxdm__toggle--demo {
	justify-content: center;
	gap: .5em;
	padding: .8em 1.4em;
	border: 2px solid var(--cxdm-d-accent);
	border-radius: var(--cxdm-d-btn-radius);
	background: var(--cxdm-d-accent);
	color: var(--cxdm-d-on);
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: var(--shadow-btn, none);
	transition: background-color .15s, border-color .15s, color .15s;
}
.cxdm .cxdm__toggle--demo:hover,
.cxdm .cxdm__toggle--demo:focus { border-color: var(--cxdm-d-deep); background: var(--cxdm-d-deep); color: var(--cxdm-d-on); }
.cxdm .cxdm__toggle--demo:focus-visible { outline: 3px solid var(--c-focus, var(--cxdm-d-accent)); outline-offset: 2px; }
.cxdm--demo.is-open .cxdm__toggle--demo { background: #fff; color: var(--cxdm-d-deep); border-color: var(--cxdm-d-accent); }
.cxdm--demo.is-open .cxdm__toggle--demo:hover,
.cxdm--demo.is-open .cxdm__toggle--demo:focus { background: var(--cxdm-d-soft); color: var(--cxdm-d-deep); }
.cxdm--demo.is-open .cxdm__intro-icon { animation: none; }

@keyframes cxdm-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cxdm-d-accent) 45%, transparent); }
	70%  { box-shadow: 0 0 0 14px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.cxdm__intro-icon { animation: none; }
}
@media (max-width: 640px) {
	.cxdm__intro { grid-template-columns: auto 1fr; padding: 1rem 1.1rem; gap: .9rem 1rem; }
	.cxdm__intro-icon { width: 2.75rem; height: 2.75rem; align-self: start; }
	.cxdm .cxdm__toggle--demo { grid-column: 1 / -1; width: 100%; }
	.cxdm--demo .cxdm__intro-title { font-size: 1.125rem; }
}
.cxdm__demo {
	margin: 0 0 .75rem;
	padding: .7rem .9rem;
	border-left: 4px solid #dba617;
	border-radius: 4px;
	background: #fcf9e8;
}
.cxdm__demo p { margin: 0; }
.cxdm__demo p + p { margin-top: .35rem; }
.cxdm__demo .cxdm__small { color: var(--cxdm-muted); font-size: 12px; }

.cxdm__panel {
	margin-top: .6rem;
	padding: 1rem;
	border: 1px solid var(--cxdm-border);
	border-radius: 6px;
	background: var(--cxdm-bg);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.cxdm--admin .cxdm__panel { margin: 0; padding: 0; border: 0; box-shadow: none; }

.cxdm__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	padding: 1.1rem;
	border: 2px dashed var(--cxdm-border);
	border-radius: 6px;
	background: var(--cxdm-soft);
	color: var(--cxdm-muted);
	text-align: center;
	transition: border-color .15s, background-color .15s;
}
.cxdm__drop.is-over { border-color: var(--cxdm-accent); background: #f0f6fc; color: var(--cxdm-accent); }
.cxdm__drop p { margin: 0; color: #1d2327; }
.cxdm__drop .cxdm__small { color: var(--cxdm-muted); font-size: 12px; }
.cxdm .cxdm__link { color: var(--cxdm-accent); text-decoration: underline; text-underline-offset: 2px; }
.cxdm .cxdm__link:hover { color: #135e96; text-decoration-thickness: 2px; }

.cxdm .cxdm__list { list-style: none; margin: .75rem 0 0; padding: 0; }
.cxdm .cxdm__row {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	align-items: center;
	gap: .6rem;
	margin: 0 0 -1px;
	padding: .5rem .5rem .5rem .25rem;
	border: 1px solid var(--cxdm-border);
	background: var(--cxdm-bg);
}
.cxdm .cxdm__row:first-child { border-radius: 4px 4px 0 0; }
.cxdm .cxdm__row:last-child { border-radius: 0 0 4px 4px; }
.cxdm .cxdm__row:only-child { border-radius: 4px; }
.cxdm__row.is-busy { opacity: .7; }
.cxdm__row.is-error { background: #fcf0f1; }
.cxdm__row.is-dragging { opacity: .4; }
.cxdm__row.is-before { box-shadow: inset 0 3px 0 var(--cxdm-accent); }
.cxdm__row.is-after { box-shadow: inset 0 -3px 0 var(--cxdm-accent); }
.cxdm__empty { padding: .9rem; color: var(--cxdm-muted); text-align: center; list-style: none; }

.cxdm__handle { display: grid; place-items: center; width: 22px; height: 32px; color: #a7aaad; cursor: grab; touch-action: none; }
.cxdm__handle:hover { color: #1d2327; }

.cxdm__type {
	--t: #646970;
	min-width: 38px;
	padding: 3px 4px;
	border-radius: 3px;
	background: var(--t);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	letter-spacing: .03em;
}
.cxdm__type[data-type="pdf"]     { --t: #c62828; }
.cxdm__type[data-type="doc"]     { --t: #1d5fb8; }
.cxdm__type[data-type="sheet"]   { --t: #1b7a43; }
.cxdm__type[data-type="slides"]  { --t: #c4511b; }
.cxdm__type[data-type="archive"] { --t: #6b5a2e; }
.cxdm__type[data-type="image"]   { --t: #7b3fa6; }

.cxdm__fields { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; min-width: 0; }
.cxdm .cxdm__input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: .35rem .5rem;
	border: 1px solid transparent;
	border-radius: 3px;
	background: transparent;
	font-weight: 600;
	cursor: text;
}
.cxdm .cxdm__input:hover { border-color: var(--cxdm-border); }
.cxdm .cxdm__input:focus { border-color: var(--cxdm-accent); background: #fff; }
.cxdm .cxdm__input--group { flex: 0 1 14rem; border-color: var(--cxdm-border); font-weight: 400; }
.cxdm .cxdm__input--group::placeholder { color: #8c8f94; }
.cxdm__file { flex-basis: 100%; padding-left: .5rem; color: var(--cxdm-muted); font-size: 12px; overflow-wrap: anywhere; }
.cxdm__row.is-error .cxdm__file { color: var(--cxdm-danger); }

.cxdm__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }
.cxdm .cxdm__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 3px;
	color: var(--cxdm-muted);
}
.cxdm .cxdm__icon:hover:not(:disabled) { background: var(--cxdm-soft); color: #1d2327; }
.cxdm .cxdm__btn {
	padding: .35rem .7rem;
	border: 1px solid var(--cxdm-border);
	border-radius: 3px;
	background: #fff;
	font-size: 13px;
	white-space: nowrap;
}
.cxdm .cxdm__btn:hover:not(:disabled) { border-color: #8c8f94; background: var(--cxdm-soft); }
.cxdm .cxdm__btn--danger { color: var(--cxdm-danger); }
.cxdm .cxdm__btn--danger:hover:not(:disabled) { border-color: var(--cxdm-danger); background: #fcf0f1; }
.cxdm .cxdm__btn--primary { border-color: var(--cxdm-accent); background: var(--cxdm-accent); color: #fff; font-weight: 600; }
.cxdm .cxdm__btn--primary:hover:not(:disabled) { border-color: #135e96; background: #135e96; }

.cxdm__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; min-height: 32px; }
.cxdm__status { color: var(--cxdm-muted); font-size: 12px; }
.cxdm__status[data-state="saved"] { color: #00813a; }
.cxdm__status[data-state="saved"]::before { content: "✓ "; }
.cxdm__status[data-state="error"] { color: var(--cxdm-danger); }

.cxdm__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.cxdm-hint { margin: 0 0 .75rem; color: #646970; }
.cxdm-hint code { font-size: 12px; }

@media (max-width: 600px) {
	.cxdm .cxdm__row { grid-template-columns: auto auto 1fr; }
	.cxdm__actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 26px; }
	.cxdm .cxdm__input,
	.cxdm .cxdm__input--group { flex-basis: 100%; }
}