/* =========================================================================
   Angebot anfragen – Menü-Button + Modal
   Farben: Markenrot #e10707, dunkler Seiten-Look (#161616)
   ========================================================================= */

:root {
	--ctm-red: #e10707;
	--ctm-red-dark: #a80505;
	--ctm-red-light: #ff3b23;
	--ctm-bg: #17181a;
	--ctm-bg-soft: #202225;
	--ctm-bg-soft-2: #26282c;
	--ctm-line: rgba(255, 255, 255, .12);
	--ctm-text: #f2f3f5;
	--ctm-muted: #a3a7ad;
}

/* -------------------------------------------------------------------------
   1. Button im Hauptmenü
   ---------------------------------------------------------------------- */

li.ct-angebot-item,
.fusion-main-menu ul li.ct-angebot-item {
	display: flex !important;
	align-items: center;
	margin-left: 14px;
}

li.ct-angebot-item > a.ct-angebot-btn,
.fusion-main-menu ul li.ct-angebot-item > a.ct-angebot-btn {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: auto !important;
	min-height: 0 !important;
	padding: 10px 20px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, #ff2a10 0%, var(--ctm-red) 45%, var(--ctm-red-dark) 100%) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 1.1 !important;
	letter-spacing: .3px;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(225, 7, 7, .38);
	animation: ctAngebotPulse 2.8s ease-in-out infinite;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

li.ct-angebot-item > a.ct-angebot-btn .menu-text,
.fusion-main-menu ul li.ct-angebot-item > a.ct-angebot-btn .menu-text {
	position: relative;
	z-index: 2;
	color: #fff !important;
	font-weight: 700 !important;
}

/* kleiner Blitz vor dem Text */
li.ct-angebot-item > a.ct-angebot-btn::before,
.fusion-main-menu ul li.ct-angebot-item > a.ct-angebot-btn::before {
	content: "";
	position: relative;
	z-index: 2;
	width: 11px;
	height: 15px;
	flex: 0 0 auto;
	background: #fff;
	clip-path: polygon(58% 0, 12% 56%, 44% 56%, 34% 100%, 88% 42%, 54% 42%);
}

/* Glanz-Sweep */
li.ct-angebot-item > a.ct-angebot-btn::after,
.fusion-main-menu ul li.ct-angebot-item > a.ct-angebot-btn::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -80%;
	width: 45%;
	height: 220%;
	z-index: 1;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-22deg);
	animation: ctAngebotShine 4.5s ease-in-out infinite;
	border: 0 !important;
	pointer-events: none;
}

li.ct-angebot-item > a.ct-angebot-btn:hover,
li.ct-angebot-item > a.ct-angebot-btn:focus-visible,
.fusion-main-menu ul li.ct-angebot-item > a.ct-angebot-btn:hover,
.fusion-main-menu ul li.ct-angebot-item > a.ct-angebot-btn:focus-visible {
	transform: translateY(-1px);
	filter: saturate(1.15);
	box-shadow: 0 8px 22px rgba(225, 7, 7, .55);
	animation-play-state: paused;
}

@keyframes ctAngebotPulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(225, 7, 7, .38), 0 0 0 0 rgba(225, 7, 7, .45); }
	50%      { box-shadow: 0 4px 18px rgba(225, 7, 7, .55), 0 0 0 8px rgba(225, 7, 7, 0); }
}

@keyframes ctAngebotShine {
	0%, 62%  { left: -80%; }
	92%, 100% { left: 130%; }
}

/* Mobiles Menü (Avada klont das Hauptmenü hier hinein) */
.fusion-mobile-nav-holder li.ct-angebot-item,
.fusion-mobile-menu li.ct-angebot-item {
	display: block !important;
	margin: 10px 12px !important;
	border: 0 !important;
}

.fusion-mobile-nav-holder li.ct-angebot-item > a.ct-angebot-btn,
.fusion-mobile-menu li.ct-angebot-item > a.ct-angebot-btn {
	display: flex !important;
	justify-content: center;
	width: 100%;
	padding: 14px 18px !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.fusion-main-menu ul li.ct-angebot-item > a.ct-angebot-btn,
	li.ct-angebot-item > a.ct-angebot-btn::after,
.fusion-main-menu ul li.ct-angebot-item > a.ct-angebot-btn::after {
		animation: none !important;
	}
}

/* -------------------------------------------------------------------------
   2. Modal-Grundgerüst
   ---------------------------------------------------------------------- */

#ct-angebot-modal[hidden] { display: none !important; }
#ct-angebot-modal [hidden] { display: none !important; }

#ct-angebot-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--ctm-text);
	-webkit-font-smoothing: antialiased;
}

#ct-angebot-modal .ctm__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 5, 7, .78);
	backdrop-filter: blur(4px);
	animation: ctmFade .22s ease both;
}

#ct-angebot-modal .ctm__dialog:focus { outline: none; }

#ct-angebot-modal .ctm__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 780px;
	/* bewusst hoch: sonst schneidet der scrollende Body die aufgeklappten Dropdowns ab */
	min-height: min(680px, calc(100vh - 48px));
	max-height: calc(100vh - 48px);
	background: var(--ctm-bg);
	border: 1px solid var(--ctm-line);
	border-radius: 16px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
	overflow: hidden;
	animation: ctmPop .26s cubic-bezier(.2, .9, .3, 1.2) both;
}

@keyframes ctmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ctmPop {
	from { opacity: 0; transform: translateY(18px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

#ct-angebot-modal .ctm__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	width: 36px;
	height: 36px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	background: rgba(255, 255, 255, .08) !important;
	border: 0 !important;
	border-radius: 50% !important;
	color: #fff !important;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
#ct-angebot-modal .ctm__close:hover { background: var(--ctm-red) !important; transform: rotate(90deg); }
#ct-angebot-modal .ctm__close svg { width: 14px; height: 14px; fill: currentColor; }

/* Kopf ------------------------------------------------------------------ */

#ct-angebot-modal .ctm__head {
	padding: 26px 28px 0;
	background: linear-gradient(180deg, rgba(225, 7, 7, .14) 0%, rgba(225, 7, 7, 0) 100%);
}

#ct-angebot-modal .ctm__eyebrow {
	margin: 0 0 4px;
	color: var(--ctm-red-light);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

#ct-angebot-modal .ctm__title {
	margin: 0;
	color: #fff !important;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
}

#ct-angebot-modal .ctm__sub {
	margin: 8px 0 0;
	color: var(--ctm-muted);
	font-size: 14px;
	line-height: 1.5;
}

#ct-angebot-modal .ctm__steps {
	display: flex;
	gap: 6px;
	margin: 20px 0 10px;
	padding: 0;
	list-style: none;
}

#ct-angebot-modal .ctm__step {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 1 1 0;
	min-width: 0;
	color: var(--ctm-muted);
	font-size: 12px;
	opacity: .55;
	transition: opacity .2s ease, color .2s ease;
}
#ct-angebot-modal .ctm__step span {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ctm-line);
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
}
#ct-angebot-modal .ctm__step em {
	font-style: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#ct-angebot-modal .ctm__step.is-active,
#ct-angebot-modal .ctm__step.is-done { opacity: 1; color: #fff; }
#ct-angebot-modal .ctm__step.is-active span { background: var(--ctm-red); border-color: var(--ctm-red); color: #fff; }
#ct-angebot-modal .ctm__step.is-done span { background: rgba(225, 7, 7, .25); border-color: rgba(225, 7, 7, .6); color: #fff; }

#ct-angebot-modal .ctm__progress {
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .1);
	overflow: hidden;
}
#ct-angebot-modal .ctm__progress i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--ctm-red), var(--ctm-red-light));
	transition: width .3s ease;
}

/* Body ------------------------------------------------------------------ */

#ct-angebot-modal .ctm__body {
	flex: 1 1 auto;
	padding: 22px 28px 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

#ct-angebot-modal .ctm__pane { display: none; animation: ctmSlide .25s ease both; }
#ct-angebot-modal .ctm__pane.is-active { display: block; }

@keyframes ctmSlide {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: none; }
}

#ct-angebot-modal .ctm__lead {
	margin: 0 0 14px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}
#ct-angebot-modal .ctm__leadhint {
	margin-left: 6px;
	color: var(--ctm-muted);
	font-size: 12px;
	font-weight: 400;
}

/* Auswahlkarten --------------------------------------------------------- */

#ct-angebot-modal .ctm-choice { display: grid; gap: 12px; }
#ct-angebot-modal .ctm-choice--two { grid-template-columns: 1fr 1fr; }
#ct-angebot-modal .ctm-choice--three { grid-template-columns: repeat(3, 1fr); }

/* Karten ohne Beschreibung: Icon über dem Titel, mittig */
#ct-angebot-modal .ctm-choice--three .ctm-card {
	align-items: center;
	gap: 14px;
	padding: 28px 16px !important;
	text-align: center;
}
#ct-angebot-modal .ctm-choice--three .ctm-card__icon { width: 52px; height: 52px; border-radius: 12px; }
#ct-angebot-modal .ctm-choice--three .ctm-card__icon svg { width: 26px; height: 26px; }
#ct-angebot-modal .ctm-choice--list { grid-template-columns: 1fr; }

#ct-angebot-modal .ctm-card {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	margin: 0 !important;
	padding: 22px 20px !important;
	background: var(--ctm-bg-soft) !important;
	border: 1px solid var(--ctm-line) !important;
	border-radius: 12px !important;
	color: var(--ctm-text) !important;
	text-align: left;
	text-transform: none !important;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
#ct-angebot-modal .ctm-card:hover {
	background: var(--ctm-bg-soft-2) !important;
	border-color: rgba(225, 7, 7, .65) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
#ct-angebot-modal .ctm-card.is-selected {
	border-color: var(--ctm-red) !important;
	background: rgba(225, 7, 7, .12) !important;
}

#ct-angebot-modal .ctm-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: rgba(225, 7, 7, .16);
	color: var(--ctm-red-light);
	flex: 0 0 auto;
}
#ct-angebot-modal .ctm-card__icon svg { width: 22px; height: 22px; fill: currentColor; }
#ct-angebot-modal .ctm-card__title { color: #fff; font-size: 16px; font-weight: 700; }
#ct-angebot-modal .ctm-card__text { color: var(--ctm-muted); font-size: 13px; line-height: 1.45; }

#ct-angebot-modal .ctm-card--row {
	flex-direction: row !important;
	align-items: center;
	padding: 14px 16px !important;
}
#ct-angebot-modal .ctm-card--row .ctm-card__icon { width: 36px; height: 36px; }
#ct-angebot-modal .ctm-card--row .ctm-card__title { font-size: 15px; font-weight: 600; }

/* Sichtbarer Fokus nur bei Tastaturbedienung – ein programmatischer Fokus
   beim Öffnen soll nicht wie eine Vorauswahl aussehen. */
#ct-angebot-modal .ctm-card:focus,
#ct-angebot-modal .ctm-radio:focus,
#ct-angebot-modal .ctm-pill:focus,
#ct-angebot-modal .ctm-check:focus,
#ct-angebot-modal .ctm-switchbtn:focus,
#ct-angebot-modal .ctm-btn:focus,
#ct-angebot-modal .ctm-select__btn:focus { outline: none !important; }

#ct-angebot-modal .ctm-card:focus-visible,
#ct-angebot-modal .ctm-radio:focus-visible,
#ct-angebot-modal .ctm-pill:focus-visible,
#ct-angebot-modal .ctm-check:focus-visible,
#ct-angebot-modal .ctm-switchbtn:focus-visible,
#ct-angebot-modal .ctm-btn:focus-visible,
#ct-angebot-modal .ctm-select__btn:focus-visible {
	outline: 2px solid var(--ctm-red-light) !important;
	outline-offset: 2px;
}

/* Felder ---------------------------------------------------------------- */

#ct-angebot-modal .ctm-grid { display: grid; gap: 14px; }
#ct-angebot-modal .ctm-grid--2 { grid-template-columns: 1fr 1fr; }
#ct-angebot-modal .ctm-field { min-width: 0; }
#ct-angebot-modal .ctm-field--full { grid-column: 1 / -1; margin-top: 14px; }
#ct-angebot-modal .ctm-grid .ctm-field--full { margin-top: 0; }

#ct-angebot-modal .ctm-label {
	display: block;
	margin: 0 0 6px;
	color: var(--ctm-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .3px;
	text-transform: uppercase;
}
#ct-angebot-modal .ctm-req { color: var(--ctm-red-light); }
#ct-angebot-modal .ctm-opt { color: #6f747b; font-weight: 400; text-transform: none; letter-spacing: 0; }

#ct-angebot-modal .ctm-input {
	width: 100%;
	height: 46px;
	padding: 0 14px !important;
	background: var(--ctm-bg-soft) !important;
	border: 1px solid var(--ctm-line) !important;
	border-radius: 9px !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 14px !important;
	transition: border-color .15s ease, background .15s ease;
}
#ct-angebot-modal .ctm-textarea { height: auto; padding: 12px 14px !important; line-height: 1.5; resize: vertical; }
#ct-angebot-modal .ctm-input::placeholder { color: #6f747b; }
#ct-angebot-modal .ctm-input:focus {
	outline: none;
	border-color: var(--ctm-red) !important;
	background: var(--ctm-bg-soft-2) !important;
}
#ct-angebot-modal .ctm-input.is-invalid { border-color: #ff4444 !important; background: rgba(255, 68, 68, .08) !important; }

/* Eigene Dropdowns ------------------------------------------------------ */

#ct-angebot-modal .ctm-select { position: relative; }

#ct-angebot-modal .ctm-select__btn {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	height: 46px;
	margin: 0 !important;
	padding: 0 14px !important;
	background: var(--ctm-bg-soft) !important;
	border: 1px solid var(--ctm-line) !important;
	border-radius: 9px !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-align: left;
	text-transform: none !important;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
#ct-angebot-modal .ctm-select__btn:hover { background: var(--ctm-bg-soft-2) !important; }
#ct-angebot-modal .ctm-select.is-open .ctm-select__btn { border-color: var(--ctm-red) !important; }
#ct-angebot-modal .ctm-select.is-disabled { opacity: .45; pointer-events: none; }
#ct-angebot-modal .ctm-select.is-invalid .ctm-select__btn { border-color: #ff4444 !important; }

#ct-angebot-modal .ctm-select__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#ct-angebot-modal .ctm-select__value.is-placeholder { color: #6f747b; }

#ct-angebot-modal .ctm-select__caret {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--ctm-muted);
	border-bottom: 2px solid var(--ctm-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}
#ct-angebot-modal .ctm-select.is-open .ctm-select__caret { transform: rotate(225deg) translate(-3px, -3px); }

#ct-angebot-modal .ctm-select__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 30;
	display: none;
	padding: 8px;
	background: #1c1e21;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
}
#ct-angebot-modal .ctm-select.is-open .ctm-select__panel { display: block; }

/* Nach oben aufklappen, wenn unten kein Platz mehr ist */
#ct-angebot-modal .ctm-select.is-up .ctm-select__panel {
	top: auto;
	bottom: calc(100% + 6px);
}

#ct-angebot-modal .ctm-select__search {
	width: 100%;
	height: 36px;
	margin-bottom: 6px;
	padding: 0 10px !important;
	background: #26282c !important;
	border: 1px solid transparent !important;
	border-radius: 7px !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 13px !important;
}
#ct-angebot-modal .ctm-select__search:focus { outline: none; border-color: var(--ctm-red) !important; }

#ct-angebot-modal .ctm-select__list {
	max-height: 268px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
}
#ct-angebot-modal .ctm-select__list li {
	padding: 9px 10px;
	border-radius: 7px;
	color: var(--ctm-text);
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
}
#ct-angebot-modal .ctm-select__list li small { display: block; color: var(--ctm-muted); font-size: 12px; }
#ct-angebot-modal .ctm-select__list li:hover,
#ct-angebot-modal .ctm-select__list li.is-active { background: rgba(225, 7, 7, .22); }
#ct-angebot-modal .ctm-select__list li.is-selected { background: var(--ctm-red); color: #fff; }
#ct-angebot-modal .ctm-select__grouphead {
	padding: 10px 10px 5px;
	color: var(--ctm-red-light);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: default;
	pointer-events: none;
}
#ct-angebot-modal .ctm-select__list li.ctm-select__grouphead + li { margin-top: 0; }
#ct-angebot-modal .ctm-select__list .ctm-select__grouphead:not(:first-child) {
	margin-top: 6px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding-top: 10px;
}

#ct-angebot-modal .ctm-select__empty { padding: 12px 10px; color: var(--ctm-muted); font-size: 13px; }

/* Ergebnis: Diagramm + Kennzahlen, Optik aus dem ecubase-Konfigurator -------- */

#ct-angebot-modal .ctm-result { margin-top: 18px; }
#ct-angebot-modal .ctm-result.is-loading { opacity: .55; }
#ct-angebot-modal .ctm-result__hint {
	margin: 12px 0 0;
	color: var(--ctm-muted);
	font-size: 12px;
	line-height: 1.45;
}

/* Diagramm --------------------------------------------------------------- */

#ct-angebot-modal .ctm-dyno {
	background: #1a1a1a;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
	overflow: hidden;
}
#ct-angebot-modal .ctm-dyno__head {
	padding: 12px 16px;
	background: #2a2a2a;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	color: #cfcfcf;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
}
#ct-angebot-modal .ctm-dyno__body { padding: 16px 12px 14px; }
#ct-angebot-modal .ctm-dyno__chart svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

#ct-angebot-modal .ctm-dyno__grid { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
#ct-angebot-modal .ctm-dyno__tick { fill: #bbb; font-size: 10px; font-family: inherit; }
#ct-angebot-modal .ctm-dyno__tick.is-ps { fill: #f90101; }
#ct-angebot-modal .ctm-dyno__tick.is-nm { fill: #3b82f6; }
#ct-angebot-modal .ctm-dyno__axis { fill: #bbb; font-size: 10px; font-family: inherit; }
#ct-angebot-modal .ctm-dyno__axis.is-ps { fill: #f90101; }
#ct-angebot-modal .ctm-dyno__axis.is-nm { fill: #3b82f6; }

#ct-angebot-modal .ctm-dyno__fill { stroke: none; }
#ct-angebot-modal .ctm-dyno__fill.is-ps { fill: url(#ctmFillPs); }
#ct-angebot-modal .ctm-dyno__fill.is-nm { fill: url(#ctmFillNm); }

#ct-angebot-modal .ctm-dyno__line {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
#ct-angebot-modal .ctm-dyno__line.is-ps { stroke: #f90101; }
#ct-angebot-modal .ctm-dyno__line.is-nm { stroke: #3b82f6; }
#ct-angebot-modal .ctm-dyno__line.is-stock { stroke-width: 2; stroke-dasharray: 6 5; opacity: .5; }
#ct-angebot-modal .ctm-dyno__line.is-stage { stroke-width: 2.5; }

#ct-angebot-modal .ctm-dyno__watermark { opacity: .09; pointer-events: none; }

#ct-angebot-modal .ctm-dyno__chart .is-off { display: none; }

/* Legende (klickbar wie im Konfigurator) */
#ct-angebot-modal .ctm-dyno__legend {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 14px;
	max-width: 540px;
	margin: 14px auto 0;
	font-size: 11.5px;
}
#ct-angebot-modal .ctm-dyno__legend > div {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 4px 8px;
	border-radius: 6px;
	color: #e6e6e6;
	cursor: pointer;
	user-select: none;
	transition: opacity .15s ease, background .15s ease;
}
#ct-angebot-modal .ctm-dyno__legend > div:hover { background: rgba(255, 255, 255, .04); }
#ct-angebot-modal .ctm-dyno__legend > div.is-hidden { opacity: .45; }
#ct-angebot-modal .ctm-dyno__legend > div > span:last-child { color: #e6e6e6; white-space: nowrap; }

#ct-angebot-modal .ctm-dyno__check {
	position: relative;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1.5px solid currentColor;
	border-radius: 4px;
	background: currentColor;
	transition: background .15s ease;
}
#ct-angebot-modal .ctm-dyno__check::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	transition: opacity .15s ease;
}
#ct-angebot-modal .ctm-dyno__legend > div.is-hidden .ctm-dyno__check { background: transparent; }
#ct-angebot-modal .ctm-dyno__legend > div.is-hidden .ctm-dyno__check::after { opacity: 0; }

#ct-angebot-modal .ctm-dyno__legend .ctm-dyno__line {
	display: inline-block;
	flex: 0 0 auto;
	width: 26px;
	height: 0;
	border-top: 2px solid currentColor;
}
#ct-angebot-modal .ctm-dyno__legend .ctm-dyno__line.is-dashed { border-top-style: dashed; opacity: .55; }

/* Kennzahlen-Karten ------------------------------------------------------ */

#ct-angebot-modal .ctm-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}

#ct-angebot-modal .ctm-spec {
	background: #1a1a1a;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
	overflow: hidden;
}
#ct-angebot-modal .ctm-spec__head {
	padding: 10px 16px;
	background: #2a2a2a;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	color: #cfcfcf;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
}
#ct-angebot-modal .ctm-spec--ps .ctm-spec__head span { color: #f90101; }
#ct-angebot-modal .ctm-spec--nm .ctm-spec__head span { color: #3b82f6; }

#ct-angebot-modal .ctm-spec__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 16px;
}
#ct-angebot-modal .ctm-spec__compare { display: flex; align-items: flex-end; gap: 16px; }
#ct-angebot-modal .ctm-spec__item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#ct-angebot-modal .ctm-spec__cap {
	color: #888;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
}
#ct-angebot-modal .ctm-spec__num { font-size: 32px; font-weight: 800; line-height: 1; }
#ct-angebot-modal .ctm-spec__num.is-from { color: #d0d0d0; }
#ct-angebot-modal .ctm-spec--ps .ctm-spec__num.is-to { color: #f90101; }
#ct-angebot-modal .ctm-spec--nm .ctm-spec__num.is-to { color: #3b82f6; }

#ct-angebot-modal .ctm-spec__arrow {
	width: 9px;
	height: 9px;
	margin-bottom: 11px;
	border-right: 2px solid #666;
	border-bottom: 2px solid #666;
	transform: rotate(-45deg);
}

#ct-angebot-modal .ctm-spec__diff {
	padding: 4px 11px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}
#ct-angebot-modal .ctm-spec--ps .ctm-spec__diff { background: rgba(249, 1, 1, .14); color: #f90101; }
#ct-angebot-modal .ctm-spec--nm .ctm-spec__diff { background: rgba(59, 130, 246, .16); color: #3b82f6; }
#ct-angebot-modal .ctm-spec__diff:empty { display: none; }

/* Umschalter Fahrzeugliste <-> manuelle Eingabe -------------------------- */

#ct-angebot-modal .ctm-switchbtn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 18px 0 4px !important;
	padding: 12px 18px !important;
	background: rgba(255, 255, 255, .035) !important;
	border: 1px dashed rgba(255, 255, 255, .22) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	color: var(--ctm-muted) !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	text-decoration: none !important;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease, background .16s ease;
}
#ct-angebot-modal .ctm-switchbtn:hover,
#ct-angebot-modal .ctm-switchbtn:focus-visible {
	background: rgba(225, 7, 7, .1) !important;
	border-color: rgba(225, 7, 7, .65) !important;
	color: #fff !important;
}

#ct-angebot-modal .ctm-switchbtn__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: rgba(225, 7, 7, .16);
	color: var(--ctm-red-light);
}
#ct-angebot-modal .ctm-switchbtn__icon svg { width: 14px; height: 14px; fill: currentColor; }

/* Stift = manuell eintragen, Liste = zurück zur Auswahl */
#ct-angebot-modal .ctm-switchbtn .is-list { display: none; }
#ct-angebot-modal .ctm-switchbtn.is-manual .is-pen { display: none; }
#ct-angebot-modal .ctm-switchbtn.is-manual .is-list { display: block; }

/* Eigene Checkboxen ----------------------------------------------------- */

#ct-angebot-modal .ctm-check {
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0 !important;
	padding: 12px 14px !important;
	background: var(--ctm-bg-soft) !important;
	border: 1px solid var(--ctm-line) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	color: var(--ctm-text) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-align: left;
	text-transform: none !important;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
#ct-angebot-modal .ctm-check:hover { background: var(--ctm-bg-soft-2) !important; border-color: rgba(225, 7, 7, .5) !important; }
#ct-angebot-modal .ctm-check[aria-pressed="true"] { border-color: var(--ctm-red) !important; background: rgba(225, 7, 7, .12) !important; }

#ct-angebot-modal .ctm-check__box {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--ctm-line);
	border-radius: 6px;
	transition: background .15s ease, border-color .15s ease;
}
#ct-angebot-modal .ctm-check__box svg { width: 14px; height: 14px; fill: #fff; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; }
#ct-angebot-modal .ctm-check[aria-pressed="true"] .ctm-check__box { background: var(--ctm-red); border-color: var(--ctm-red); }
#ct-angebot-modal .ctm-check[aria-pressed="true"] .ctm-check__box svg { opacity: 1; transform: none; }
#ct-angebot-modal .ctm-check__label { line-height: 1.4; }
#ct-angebot-modal .ctm-check__label a { color: var(--ctm-red-light) !important; text-decoration: underline; }

#ct-angebot-modal .ctm-check--privacy {
	align-items: flex-start;
	margin-top: 18px !important;
	background: transparent !important;
	border-color: transparent !important;
	padding: 0 !important;
	font-size: 13px !important;
	color: var(--ctm-muted) !important;
}
#ct-angebot-modal .ctm-check--privacy:hover { background: transparent !important; border-color: transparent !important; }
#ct-angebot-modal .ctm-check--privacy[aria-pressed="true"] { background: transparent !important; border-color: transparent !important; }
#ct-angebot-modal .ctm-check--privacy.is-invalid .ctm-check__box { border-color: #ff4444; }

/* Eigene Radios (Getriebe) ------------------------------------------------ */

#ct-angebot-modal .ctm-radios {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

#ct-angebot-modal .ctm-radio {
	display: flex !important;
	align-items: center;
	gap: 11px;
	width: 100%;
	height: 46px;
	margin: 0 !important;
	padding: 0 14px !important;
	background: var(--ctm-bg-soft) !important;
	border: 1px solid var(--ctm-line) !important;
	border-radius: 9px !important;
	box-shadow: none !important;
	color: var(--ctm-text) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-align: left;
	text-transform: none !important;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
#ct-angebot-modal .ctm-radio:hover {
	background: var(--ctm-bg-soft-2) !important;
	border-color: rgba(225, 7, 7, .5) !important;
}
#ct-angebot-modal .ctm-radio.is-selected {
	background: rgba(225, 7, 7, .12) !important;
	border-color: var(--ctm-red) !important;
}

#ct-angebot-modal .ctm-radio__dot {
	position: relative;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	border: 1.5px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	background: rgba(255, 255, 255, .05);
	transition: border-color .15s ease;
}
#ct-angebot-modal .ctm-radio__dot::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--ctm-red);
	opacity: 0;
	transform: scale(.4);
	transition: opacity .15s ease, transform .15s ease;
}
#ct-angebot-modal .ctm-radio.is-selected .ctm-radio__dot { border-color: var(--ctm-red); }
#ct-angebot-modal .ctm-radio.is-selected .ctm-radio__dot::after { opacity: 1; transform: none; }

#ct-angebot-modal .ctm-radio__label { line-height: 1.2; }

#ct-angebot-modal .ctm-radios.is-invalid .ctm-radio { border-color: rgba(255, 68, 68, .75) !important; }

#ct-angebot-modal .ctm-gearbox { margin-top: 14px; }

/* Pills ----------------------------------------------------------------- */

#ct-angebot-modal .ctm-pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* Anzahl-Auswahl: kompakte Knöpfe, gleiche Mindestbreite statt gestreckter Lozenges. */
#ct-angebot-modal .ctm-pills--count .ctm-pill {
	min-width: 58px;
	padding: 9px 14px !important;
	text-align: center;
}

#ct-angebot-modal .ctm-pill {
	margin: 0 !important;
	padding: 9px 16px !important;
	background: var(--ctm-bg-soft) !important;
	border: 1px solid var(--ctm-line) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	color: var(--ctm-text) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: all .15s ease;
}
#ct-angebot-modal .ctm-pill:hover { border-color: rgba(225, 7, 7, .5) !important; background: var(--ctm-bg-soft-2) !important; }
#ct-angebot-modal .ctm-pills.is-invalid .ctm-pill { border-color: rgba(255, 68, 68, .75) !important; }
#ct-angebot-modal .ctm-pill.is-selected { background: var(--ctm-red) !important; border-color: var(--ctm-red) !important; color: #fff !important; }

/* Honeypot -------------------------------------------------------------- */

#ct-angebot-modal .ctm-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Fehler ---------------------------------------------------------------- */

#ct-angebot-modal .ctm__error {
	margin: 16px 0 0;
	padding: 11px 14px;
	background: rgba(255, 68, 68, .12);
	border: 1px solid rgba(255, 68, 68, .45);
	border-radius: 9px;
	color: #ff8a8a;
	font-size: 13px;
	line-height: 1.45;
}
#ct-angebot-modal .ctm__error[hidden] { display: none; }

/* Erfolg ---------------------------------------------------------------- */

#ct-angebot-modal .ctm-done { padding: 20px 0 28px; text-align: center; }
#ct-angebot-modal .ctm-done__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 18px;
	background: rgba(225, 7, 7, .16);
	border: 1px solid rgba(225, 7, 7, .5);
	border-radius: 50%;
	color: var(--ctm-red-light);
	animation: ctmPop .4s cubic-bezier(.2, .9, .3, 1.4) both;
}
#ct-angebot-modal .ctm-done__icon svg { width: 30px; height: 30px; fill: currentColor; }
#ct-angebot-modal .ctm-done h3 { margin: 0 0 10px; color: #fff !important; font-size: 21px; font-weight: 700; }
#ct-angebot-modal .ctm-done p { margin: 0 auto; max-width: 460px; color: var(--ctm-muted); font-size: 14px; line-height: 1.6; }
#ct-angebot-modal .ctm-done__call { margin-top: 14px !important; }
#ct-angebot-modal .ctm-done__call a { color: var(--ctm-red-light) !important; font-weight: 700; }

/* Fußzeile -------------------------------------------------------------- */

#ct-angebot-modal .ctm__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px 20px;
	border-top: 1px solid var(--ctm-line);
	background: rgba(0, 0, 0, .18);
}
#ct-angebot-modal .ctm__spacer { flex: 1 1 auto; }

#ct-angebot-modal .ctm-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0 !important;
	padding: 12px 26px !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: all .16s ease;
}
#ct-angebot-modal .ctm-btn[hidden] { display: none !important; }

#ct-angebot-modal .ctm-btn--primary {
	background: linear-gradient(135deg, #ff2a10, var(--ctm-red) 55%, var(--ctm-red-dark)) !important;
	border: 0 !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(225, 7, 7, .35) !important;
}
#ct-angebot-modal .ctm-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(225, 7, 7, .5) !important; }
#ct-angebot-modal .ctm-btn--primary[disabled] { opacity: .55; pointer-events: none; }

#ct-angebot-modal .ctm-btn--ghost {
	background: transparent !important;
	border: 1px solid var(--ctm-line) !important;
	color: var(--ctm-muted) !important;
}
#ct-angebot-modal .ctm-btn--ghost:hover { border-color: rgba(255, 255, 255, .35) !important; color: #fff !important; }

#ct-angebot-modal .ctm-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ctmSpin .7s linear infinite;
}
#ct-angebot-modal .is-busy .ctm-spinner,
#ct-angebot-modal .ctm-btn.is-busy .ctm-spinner { display: block; }
@keyframes ctmSpin { to { transform: rotate(360deg); } }

/* Scrollbar ------------------------------------------------------------- */

#ct-angebot-modal .ctm__body::-webkit-scrollbar,
#ct-angebot-modal .ctm-select__list::-webkit-scrollbar { width: 8px; }
#ct-angebot-modal .ctm__body::-webkit-scrollbar-thumb,
#ct-angebot-modal .ctm-select__list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 8px; }
#ct-angebot-modal .ctm__body::-webkit-scrollbar-track,
#ct-angebot-modal .ctm-select__list::-webkit-scrollbar-track { background: transparent; }

/* Fahrzeug-Konfigurator: Bildkarte zur Kontrolle -------------------------- */

#ct-angebot-modal .ctm-carcard {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 18px;
	padding: 14px;
	background: var(--ctm-bg-soft);
	border: 1px solid var(--ctm-line);
	border-radius: 12px;
	animation: ctmCarIn .25s ease both;
}

#ct-angebot-modal .ctm-carcard__media {
	flex: 0 0 180px;
	width: 180px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: rgba(255, 255, 255, .05);
}

#ct-angebot-modal .ctm-carcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#ct-angebot-modal .ctm-carcard__info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

#ct-angebot-modal .ctm-carcard__cap {
	color: var(--ctm-red-light);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
}

#ct-angebot-modal .ctm-carcard__name {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

#ct-angebot-modal .ctm-carcard__years {
	color: var(--ctm-muted);
	font-size: 13px;
}

#ct-angebot-modal .ctm-lead__car {
	color: var(--ctm-muted);
	font-weight: 400;
	font-size: 14px;
}

@keyframes ctmCarIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* Eigener Schritt „Ist das dein Fahrzeug?" ------------------------------- */

#ct-angebot-modal .ctm-carcard--big {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: 4px;
	padding: 18px;
}
#ct-angebot-modal .ctm-carcard--big .ctm-carcard__media {
	flex: 0 0 auto;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	aspect-ratio: 16 / 10;
	background: rgba(255, 255, 255, .04);
}
#ct-angebot-modal .ctm-carcard--big .ctm-carcard__media img { object-fit: contain; }
#ct-angebot-modal .ctm-carcard--big .ctm-carcard__info { align-items: center; text-align: center; }
#ct-angebot-modal .ctm-carcard--big .ctm-carcard__name { font-size: 18px; }

#ct-angebot-modal .ctm-confirm {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 18px 0 28px;
}
#ct-angebot-modal .ctm-confirm .ctm-btn { width: 100%; padding: 14px 18px !important; }
#ct-angebot-modal .ctm-confirm svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }

/* Foto vom Schlüssel ----------------------------------------------------- */

/* Das native Feld verschwindet komplett – Avada würde es sonst wieder anzeigen. */
#ct-angebot-modal input[data-ctm-photo-input] {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
}

/* Box und Erklärung sitzen in einem gemeinsamen Panel – sonst schwebt beides. */
#ct-angebot-modal .ctm-photofield__row {
	display: grid;
	grid-template-columns: 148px 1fr;
	gap: 18px;
	align-items: center;
	padding: 14px;
	background: var(--ctm-bg-soft);
	border: 1px solid var(--ctm-line);
	border-radius: 12px;
}

#ct-angebot-modal .ctm-photofield__note {
	margin: 0 !important;
	color: var(--ctm-muted);
	font-size: 13px;
	line-height: 1.55;
}

/* Quadratische Ablegefläche – die ganze Box ist der Knopf. */
#ct-angebot-modal .ctm-upload {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: rgba(0, 0, 0, .22);
	border: 1px dashed rgba(255, 255, 255, .24);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color .18s ease, background .18s ease;
}
#ct-angebot-modal .ctm-upload:hover { border-color: rgba(225, 7, 7, .6); background: rgba(225, 7, 7, .07); }
/* Liegt ein Bild drin, ist die Ablegefläche kein Ziel mehr – also kein gestrichelter Rand. */
#ct-angebot-modal .ctm-upload.has-file { border-style: solid; border-color: var(--ctm-line); }
#ct-angebot-modal .ctm-upload.is-over {
	border-color: var(--ctm-red) !important;
	background: rgba(225, 7, 7, .12);
}
#ct-angebot-modal .ctm-upload.is-busy { opacity: .6; pointer-events: none; }

#ct-angebot-modal .ctm-upload__pick {
	position: absolute;
	inset: 0;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 12px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--ctm-text) !important;
	font-family: inherit !important;
	text-align: center;
	text-transform: none !important;
	cursor: pointer;
}

#ct-angebot-modal .ctm-upload__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 12px;
	background: rgba(225, 7, 7, .16);
	color: var(--ctm-red-light);
}
#ct-angebot-modal .ctm-upload__icon svg { width: 22px; height: 22px; fill: currentColor; }

#ct-angebot-modal .ctm-upload__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ct-angebot-modal .ctm-upload__text strong { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; }
#ct-angebot-modal .ctm-upload__text small { color: var(--ctm-muted); font-size: 11.5px; }

/* Liegt ein Foto vor, deckt es die Box ab – ein Klick daneben wählt ein neues. */
#ct-angebot-modal .ctm-upload__file {
	position: absolute;
	inset: 0;
	pointer-events: none;
	animation: ctmCarIn .2s ease both;
}
#ct-angebot-modal .ctm-upload__file[hidden] { display: none !important; }

#ct-angebot-modal .ctm-upload__file img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

#ct-angebot-modal .ctm-upload__name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 12px 9px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .82));
	color: #fff;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#ct-angebot-modal .ctm-upload__remove {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0 !important;
	padding: 0 !important;
	background: rgba(0, 0, 0, .6) !important;
	border: 1px solid rgba(255, 255, 255, .25) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	color: #fff !important;
	cursor: pointer;
	pointer-events: auto;
	transition: all .16s ease;
}
#ct-angebot-modal .ctm-upload__remove:hover {
	border-color: var(--ctm-red) !important;
	background: var(--ctm-red) !important;
}
#ct-angebot-modal .ctm-upload__remove svg { width: 12px; height: 12px; fill: currentColor; }

#ct-angebot-modal .ctm-upload__pick:focus,
#ct-angebot-modal .ctm-upload__remove:focus { outline: none !important; }
#ct-angebot-modal .ctm-upload__pick:focus-visible,
#ct-angebot-modal .ctm-upload__remove:focus-visible {
	outline: 2px solid var(--ctm-red-light) !important;
	outline-offset: 2px;
}

/* Body-Lock ------------------------------------------------------------- */

html.ctm-lock, body.ctm-lock { overflow: hidden !important; }

/* Mobil ----------------------------------------------------------------- */

@media (max-width: 640px) {
	#ct-angebot-modal { padding: 0; }
	#ct-angebot-modal .ctm__dialog {
		max-width: none;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
		border: 0;
	}
	#ct-angebot-modal .ctm__head { padding: 22px 18px 0; }
	#ct-angebot-modal .ctm__title { font-size: 22px; }
	#ct-angebot-modal .ctm__body { padding: 18px 18px 6px; }
	#ct-angebot-modal .ctm__foot { padding: 14px 18px 18px; }
	#ct-angebot-modal .ctm-choice--two { grid-template-columns: 1fr; }
	#ct-angebot-modal .ctm-choice--three { grid-template-columns: 1fr; }
	#ct-angebot-modal .ctm-choice--three .ctm-card {
		flex-direction: row !important;
		gap: 14px;
		padding: 16px !important;
		text-align: left;
	}
	#ct-angebot-modal .ctm-choice--three .ctm-card__icon { width: 40px; height: 40px; }
	#ct-angebot-modal .ctm-choice--three .ctm-card__icon svg { width: 21px; height: 21px; }
	#ct-angebot-modal .ctm-grid--2 { grid-template-columns: 1fr; }
	#ct-angebot-modal .ctm__step em { display: none; }
	#ct-angebot-modal .ctm__step { flex: 0 0 auto; }
	#ct-angebot-modal .ctm__steps { justify-content: flex-start; }
	#ct-angebot-modal .ctm-btn { padding: 12px 20px !important; }

	#ct-angebot-modal .ctm-specs { grid-template-columns: 1fr; }
	#ct-angebot-modal .ctm-radios { grid-template-columns: 1fr; gap: 10px; }
	#ct-angebot-modal .ctm-dyno__legend { grid-template-columns: 1fr; max-width: none; }
	#ct-angebot-modal .ctm-dyno__head { font-size: 12.5px; }

	#ct-angebot-modal .ctm-carcard { flex-direction: column; align-items: stretch; gap: 12px; }
	#ct-angebot-modal .ctm-carcard__media { flex: 0 0 auto; width: 100%; }
	/* Untereinander gehört die Hauptantwort nach oben. */
	#ct-angebot-modal .ctm-confirm { grid-template-columns: 1fr; }
	#ct-angebot-modal .ctm-confirm__yes { order: -1; }

	#ct-angebot-modal .ctm-photofield__row { grid-template-columns: 1fr; }
	#ct-angebot-modal .ctm-upload { max-width: 220px; }

	/* Im verkleinerten SVG sonst unlesbar klein */
	#ct-angebot-modal .ctm-dyno__tick { font-size: 12px; }
	#ct-angebot-modal .ctm-dyno__axis { font-size: 11.5px; }
}