/**
 * Front-end styles for [dieberater_kurse_kostenvoranschlag].
 *
 * Everything is scoped under .dbkv-kurse. There is deliberately no global reset
 * and no `body` rule — the mockup had both, and dropping them in as-is would
 * have restyled the whole theme.
 */

.dbkv-kurse {
	--dbkv-teal: #0A8B92;
	--dbkv-teal-dark: #076F75;
	--dbkv-teal-light: #E6F4F5;
	--dbkv-blue: #00457F;
	--dbkv-bg: #F5F8F9;
	--dbkv-card: #FFFFFF;
	--dbkv-text: #1F2A33;
	--dbkv-muted: #5F6E78;
	--dbkv-line: #E1E8EB;
	--dbkv-chip-blue: #E9F1FA;
	--dbkv-chip-blue-t: #00457F;
	--dbkv-chip-teal: #E6F4F5;
	--dbkv-chip-teal-t: #076F75;
	--dbkv-chip-violet: #F3EDFA;
	--dbkv-chip-violet-t: #6C3483;
	--dbkv-radius: 14px;
	--dbkv-shadow: 0 6px 24px rgba(0, 69, 127, .08);
	--dbkv-shadow-lift: 0 14px 34px rgba(0, 69, 127, .16);

	color: var(--dbkv-text);
	line-height: 1.6;

	/* Boxed: centred with a fixed maximum width, matching the mockup's .wrap.
	   Override --dbkv-max on the element to widen or narrow it. */
	max-width: var(--dbkv-max, 1180px);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* The modal is fixed to the viewport — the boxed constraints above would
   shrink and offset the backdrop, so they are undone here. */
.dbkv-kurse.dbkv-kurse-modal {
	max-width: none;
	margin-inline: 0;
	padding-inline: 1rem;
}

.dbkv-kurse *,
.dbkv-kurse *::before,
.dbkv-kurse *::after {
	box-sizing: border-box;
}

/* ---------- Theme insulation ----------
 *
 * Themes style bare `input`, `label` and `button` globally — hello-elementor's
 * reset.css, for one, forces `padding:.5rem 1rem`, its own border and
 * `border-radius:3px` on every field. Whichever rule happens to win then
 * differs from site to site, which is exactly what made this block look
 * different locally and in production.
 *
 * So the properties a theme is likely to set are declared here explicitly
 * rather than left to inheritance. Scoped to .dbkv-kurse — the theme keeps
 * full control of everything outside this block.
 */

.dbkv-kurse,
.dbkv-kurse p,
.dbkv-kurse span,
.dbkv-kurse label,
.dbkv-kurse h2,
.dbkv-kurse h3,
.dbkv-kurse h4 {
	letter-spacing: normal;
	text-transform: none;
}

.dbkv-kurse label {
	display: block;
	line-height: 1.45;
	vertical-align: baseline;
	font-weight: 400;
	margin: 0;
}

.dbkv-kurse input,
.dbkv-kurse select,
.dbkv-kurse textarea,
.dbkv-kurse button {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
}

.dbkv-kurse .dbkv-btn,
.dbkv-kurse .dbkv-reset,
.dbkv-kurse .dbkv-chips button {
	min-height: 0;
	box-shadow: none;
}

.dbkv-kurse h2,
.dbkv-kurse h3,
.dbkv-kurse h4 {
	color: var(--dbkv-blue);
	line-height: 1.3;
}

/* ---------- Page banner ---------- */

.dbkv-kurse .dbkv-kopf {
	position: relative;
	overflow: hidden;
	background: linear-gradient(110deg, #009494 0%, var(--dbkv-teal) 28%, #0B558F 72%, var(--dbkv-blue) 100%);
	color: #fff;
	border-radius: 20px;
	padding: 3rem 2.6rem 3.2rem;
	margin-bottom: 2.6rem;
}

/* The two decorative rings from the original design. */
.dbkv-kurse .dbkv-kopf::after,
.dbkv-kurse .dbkv-kopf::before {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.dbkv-kurse .dbkv-kopf::after {
	right: -120px;
	top: -160px;
	width: 440px;
	height: 440px;
	border: 70px solid rgba(255, 255, 255, .08);
}

.dbkv-kurse .dbkv-kopf::before {
	left: -80px;
	bottom: -220px;
	width: 380px;
	height: 380px;
	border: 60px solid rgba(255, 255, 255, .06);
}

.dbkv-kurse .dbkv-kopf h2 {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: clamp(1.7rem, 4vw, 2.7rem);
	font-weight: 800;
	margin: 0;
	line-height: 1.15;
}

.dbkv-kurse .dbkv-kopf p {
	position: relative;
	z-index: 1;
	margin: .9rem 0 0;
	max-width: 42rem;
	opacity: .95;
	font-size: .98rem;
}

.dbkv-kurse .dbkv-kopf-aktionen {
	position: relative;
	z-index: 1;
	display: flex;
	gap: .9rem;
	flex-wrap: wrap;
	margin-top: 1.7rem;
}

/* Outlined on the gradient — the filled teal button would vanish into it. */
.dbkv-kurse .dbkv-btn-hell {
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, .6);
	color: #fff;
}

.dbkv-kurse .dbkv-btn-hell:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
	box-shadow: none;
}

@media (max-width: 700px) {
	.dbkv-kurse .dbkv-kopf {
		padding: 2.2rem 1.4rem 2.4rem;
		border-radius: 14px;
	}

	.dbkv-kurse .dbkv-kopf-aktionen .dbkv-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- Layout ---------- */

.dbkv-kurse .dbkv-layout {
	display: grid;
	grid-template-columns: 272px 1fr;
	gap: 2rem;
	align-items: start;
}

/* The content column next to the sidebar. Needs min-width:0 explicitly: a grid
   item sizes to its content by default, so a wide card grid would push the
   column past its track instead of laying out inside it. */
.dbkv-kurse .dbkv-main {
	min-width: 0;
}

/* ---------- Sidebar filter ---------- */

.dbkv-kurse .dbkv-side {
	position: sticky;
	top: 2rem;
	background: var(--dbkv-card);
	border-radius: var(--dbkv-radius);
	box-shadow: var(--dbkv-shadow);
	padding: 1.25rem 1.2rem 1.4rem;
	border-top: 4px solid var(--dbkv-blue);
}

.dbkv-kurse .dbkv-side-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	margin-bottom: .2rem;
}

.dbkv-kurse .dbkv-side-head h3 {
	font-size: 1.02rem;
	font-weight: 700;
	margin: 0;
}

.dbkv-kurse .dbkv-reset {
	background: none;
	border: none;
	color: var(--dbkv-teal-dark);
	font-size: .78rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	padding: .2rem;
}

.dbkv-kurse .dbkv-reset:hover {
	color: var(--dbkv-teal);
}

.dbkv-kurse .dbkv-facet {
	border-top: 1px dashed var(--dbkv-line);
	padding-top: .85rem;
	margin-top: .85rem;
}

.dbkv-kurse .dbkv-facet:first-of-type {
	border-top: none;
	padding-top: .6rem;
	margin-top: .4rem;
}

.dbkv-kurse .dbkv-facet-t {
	font-size: .73rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--dbkv-muted);
	margin-bottom: .5rem;
}

.dbkv-kurse .dbkv-facet label {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-size: .855rem;
	padding: .26rem 0;
	cursor: pointer;
	margin: 0;
	font-weight: 400;
}

.dbkv-kurse .dbkv-facet label:hover {
	color: var(--dbkv-teal-dark);
}

.dbkv-kurse .dbkv-facet input[type="checkbox"] {
	margin: .3rem 0 0;
	accent-color: var(--dbkv-teal);
	width: 15px;
	height: 15px;
	flex: none;
	cursor: pointer;
}

.dbkv-kurse .dbkv-cnt {
	margin-left: auto;
	font-size: .71rem;
	color: var(--dbkv-muted);
	background: var(--dbkv-bg);
	border: 1px solid var(--dbkv-line);
	border-radius: 999px;
	padding: .02rem .5rem;
	font-weight: 600;
	line-height: 1.5;
}

/* ---------- Result bar ---------- */

.dbkv-kurse .dbkv-resultbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.4rem;
	font-size: .9rem;
	color: var(--dbkv-muted);
}

.dbkv-kurse .dbkv-resultbar b {
	color: var(--dbkv-blue);
	font-size: 1.05rem;
}

.dbkv-kurse .dbkv-chips {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
}

.dbkv-kurse .dbkv-chips button {
	font-size: .75rem;
	font-weight: 600;
	background: var(--dbkv-chip-teal);
	color: var(--dbkv-chip-teal-t);
	border: none;
	border-radius: 999px;
	padding: .25rem .5rem .25rem .75rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.dbkv-kurse .dbkv-chips button::after {
	content: "×";
	font-size: 1rem;
	line-height: 1;
}

.dbkv-kurse .dbkv-chips button:hover {
	background: var(--dbkv-teal);
	color: #fff;
}

/* ---------- Groups & cards ---------- */

.dbkv-kurse .dbkv-group {
	margin-bottom: 3.2rem;
}

.dbkv-kurse .dbkv-group-head {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	margin-bottom: 1.4rem;
}

.dbkv-kurse .dbkv-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--dbkv-teal);
	flex: none;
	margin-top: .5rem;
}

.dbkv-kurse .dbkv-group-head h3 {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
}

/* Both listings lay their cards out the same way — `dbkv-grid` on the
   Kursprogramm page, `dbkv-cards` inside each Deutschkurse group. Without the
   second selector the Deutschkurse cards are plain blocks and stretch across
   the whole content column. */
.dbkv-kurse .dbkv-grid,
.dbkv-kurse .dbkv-cards {
	display: grid;
	/* min() keeps the track from forcing a 320px column on a 320px-wide phone,
	   which would push the whole page into horizontal scrolling. */
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 1.4rem;
}

.dbkv-kurse .dbkv-card {
	/* A grid item defaults to min-width:auto, so one long word in a title would
	   widen its track and break the columns. */
	min-width: 0;
	background: var(--dbkv-card);
	border-radius: var(--dbkv-radius);
	box-shadow: var(--dbkv-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: .2s;
	border-top: 4px solid var(--dbkv-teal);
}

.dbkv-kurse .dbkv-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--dbkv-shadow-lift);
}

.dbkv-kurse .dbkv-card-top {
	padding: 1.3rem 1.4rem 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: .8rem;
}

.dbkv-kurse .dbkv-chip {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .03em;
	padding: .3rem .8rem;
	border-radius: 999px;
	white-space: nowrap;
	background: var(--dbkv-chip-teal);
	color: var(--dbkv-chip-teal-t);
}

.dbkv-kurse .dbkv-chip[data-cat="jugend"] {
	background: var(--dbkv-chip-blue);
	color: var(--dbkv-chip-blue-t);
}

.dbkv-kurse .dbkv-chip[data-cat="reha"] {
	background: var(--dbkv-chip-violet);
	color: var(--dbkv-chip-violet-t);
}

/* Course runs, one period per line above the figures. */
.dbkv-kurse .dbkv-zeiten {
	margin: .9rem 1.4rem 0;
	font-size: .82rem;
	color: var(--dbkv-text);
}

.dbkv-kurse .dbkv-zeiten-k {
	display: block;
	margin-bottom: .2rem;
	font-weight: 700;
	color: var(--dbkv-blue);
}

.dbkv-kurse .dbkv-termin {
	display: block;
	font-variant-numeric: tabular-nums;
}

.dbkv-kurse .dbkv-termin-rest {
	color: #5A6472;
}

/* ---------- Deutschkurse ---------- */

/* Level badge — the neutral counterpart to the availability chips, so it never
   reads as a warning. */
.dbkv-kurse .dbkv-chip-niveau {
	background: var(--dbkv-teal-light);
	color: var(--dbkv-teal-dark);
}

/* What every course includes. Solid pills rather than outlines: these are
   promises, and an outline reads as a filter you could switch off. */
.dbkv-kurse .dbkv-leistungen {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .9rem 1.4rem 0;
}

.dbkv-kurse .dbkv-leistungen span {
	padding: .38rem .85rem;
	border-radius: 999px;
	background: var(--dbkv-teal);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.2;
}

/* The one thing that differs between courses of the same level, so it gets a
   row to itself: label left, value right. */
.dbkv-kurse .dbkv-unterrichtszeit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	margin: .9rem 1.4rem 0;
	padding: .6rem .9rem;
	border-radius: 8px;
	background: var(--dbkv-teal-light);
}

.dbkv-kurse .dbkv-unterrichtszeit span {
	font-size: .7rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--dbkv-muted);
}

.dbkv-kurse .dbkv-unterrichtszeit strong {
	color: var(--dbkv-blue);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* A course taught at several times lists them under each other. Each entry
   keeps the value styling — without this it would inherit the uppercase,
   muted label styling from the rule above, which matches any nested span. */
.dbkv-kurse .dbkv-unterrichtszeit .dbkv-zeit-eintrag {
	display: block;
	font-size: .82rem;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

.dbkv-kurse .dbkv-unterrichtszeit .dbkv-zeit-eintrag + .dbkv-zeit-eintrag {
	margin-top: .15rem;
}

/* Group heading: a dot, the name, and the count as a pill — then one line
   saying what the group is, because grouping by form alone does not. */
.dbkv-kurse .dbkv-group-t {
	display: flex;
	align-items: center;
	gap: .55rem;
}

.dbkv-kurse .dbkv-group-punkt {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--dbkv-teal);
	flex: none;
}

/* The count next to the group name, as a quiet pill. */
.dbkv-kurse .dbkv-group-n {
	padding: .15rem .6rem;
	border-radius: 999px;
	background: var(--dbkv-teal-light);
	color: var(--dbkv-teal-dark);
	font-size: .74rem;
	font-weight: 700;
	white-space: nowrap;
}

.dbkv-kurse .dbkv-group-online .dbkv-group-n {
	background: var(--dbkv-chip-blue);
	color: var(--dbkv-chip-blue-t);
}

.dbkv-kurse .dbkv-group-sub {
	margin: .35rem 0 1.1rem 1.55rem;
	font-size: .86rem;
	color: var(--dbkv-muted);
}

/* Online courses carry the blue accent, in-person the teal one — the same
   split the chips already use, so a group is recognisable while scrolling. */
.dbkv-kurse .dbkv-group-online .dbkv-group-punkt {
	background: var(--dbkv-blue);
}

.dbkv-kurse .dbkv-group-online .dbkv-card {
	border-top-color: var(--dbkv-blue);
}

.dbkv-kurse .dbkv-group-online .dbkv-leistungen span {
	background: var(--dbkv-blue);
}

.dbkv-kurse .dbkv-group-online .dbkv-chip,
.dbkv-kurse .dbkv-group-online .dbkv-unterrichtszeit {
	background: var(--dbkv-chip-blue);
	color: var(--dbkv-chip-blue-t);
}

/* Teaching slot: name on one line, hours under it in a quieter tone. */
.dbkv-kurse .dbkv-facet-zeit {
	display: block;
	font-size: .8rem;
	color: var(--dbkv-muted);
	font-variant-numeric: tabular-nums;
}

.dbkv-kurse .dbkv-facet-label {
	flex: 1;
}

.dbkv-kurse .dbkv-facet-hint {
	margin: .45rem 0 0;
	font-size: .76rem;
	line-height: 1.45;
	color: var(--dbkv-muted);
}

/* The "same for every course" block. Facts, not filters — boxed and ticked so
   nobody reads it as a set of options they forgot to switch on. */
.dbkv-kurse .dbkv-facet-info {
	margin-top: 1rem;
	padding: .95rem 1.05rem;
	border-radius: 10px;
	background: var(--dbkv-teal-light);
}

.dbkv-kurse .dbkv-facet-info-t {
	font-weight: 700;
	color: var(--dbkv-blue);
	margin-bottom: .5rem;
}

.dbkv-kurse .dbkv-facet-info ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .84rem;
	line-height: 1.5;
}

.dbkv-kurse .dbkv-facet-info li {
	display: flex;
	gap: .45rem;
	margin-bottom: .35rem;
}

.dbkv-kurse .dbkv-haken {
	color: var(--dbkv-teal-dark);
	font-weight: 700;
}

.dbkv-kurse .dbkv-facet-info-fuss {
	margin: .5rem 0 0 1.35rem;
	font-size: .78rem;
	line-height: 1.4;
	color: var(--dbkv-muted);
}

/* Read-only field: clearly not editable, still legible. */
.dbkv-kurse input[readonly] {
	background: #F3F5F6;
	color: #5A6472;
	cursor: default;
}

/* Seats left, as one more figure in the stats row. Colour is the only thing
   that sets it apart, and only when there is something to say. */
.dbkv-kurse .dbkv-plaetze-knapp .v {
	color: #A15C00;
}

.dbkv-kurse .dbkv-plaetze-voll .v {
	color: #A32020;
}

/* ---------- Availability ---------- */

/* Sold out or already started. Red rather than grey: this is the one label on
   the card that changes whether the course can be had at all. */
.dbkv-kurse .dbkv-chip-gesperrt {
	background: #FDECEC;
	color: #A32020;
}

/* The card stays legible: faded enough to recede behind the bookable ones,
   not so faint that the title and price become hard to read. */
.dbkv-kurse .dbkv-card-gesperrt {
	opacity: .72;
}

.dbkv-kurse .dbkv-card-gesperrt:hover {
	transform: none;
	box-shadow: var(--dbkv-shadow);
}

.dbkv-kurse .dbkv-btn-gesperrt,
.dbkv-kurse .dbkv-btn-gesperrt:hover {
	background: #E7E9EC;
	color: #5A6472;
	border-color: #E7E9EC;
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

/* Full-width line under the schedule rather than a chip in the header row —
   the target-group label beside it can be long enough to clip it. */
.dbkv-kurse .dbkv-badge {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: .9rem 1.4rem 0;
	padding: .45rem .7rem;
	font-size: .78rem;
	font-weight: 600;
	color: var(--dbkv-teal-dark);
	background: var(--dbkv-teal-light);
	border-radius: 8px;
	line-height: 1.3;
}

.dbkv-kurse .dbkv-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--dbkv-teal);
	color: #fff;
	font-size: .62rem;
	flex: none;
}

/* With only the chip left, the header row no longer needs to share space. */
.dbkv-kurse .dbkv-card-top .dbkv-chip {
	white-space: normal;
}

.dbkv-kurse .dbkv-card h4 {
	font-size: 1.12rem;
	font-weight: 700;
	padding: 0 1.4rem;
	margin: .9rem 0 0;
}

.dbkv-kurse .dbkv-claim {
	padding: 0 1.4rem;
	margin: .35rem 0 0;
	font-size: .88rem;
	color: var(--dbkv-teal-dark);
	font-style: italic;
	font-weight: 500;
}

.dbkv-kurse .dbkv-desc {
	padding: 0 1.4rem;
	margin: .7rem 0 0;
	font-size: .9rem;
}

.dbkv-kurse .dbkv-sprachen {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	padding: 0 1.4rem;
	margin-top: .9rem;
}

.dbkv-kurse .dbkv-sprachen span {
	font-size: .72rem;
	font-weight: 600;
	color: var(--dbkv-muted);
	background: var(--dbkv-bg);
	border: 1px solid var(--dbkv-line);
	border-radius: 999px;
	padding: .22rem .7rem;
	white-space: nowrap;
}

/* One row whatever the count — three figures on a Deutschkurs, four on a
   Kursprogramm with a seat limit. auto-fit would wrap the fourth onto a line of
   its own and leave it looking like an afterthought. */
.dbkv-kurse .dbkv-meta {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: .4rem;
	margin: 1.2rem 1.4rem 0;
	padding-top: 1rem;
	border-top: 1px dashed var(--dbkv-line);
}

.dbkv-kurse .dbkv-meta > div {
	text-align: center;
}

.dbkv-kurse .dbkv-meta .v {
	font-weight: 700;
	color: var(--dbkv-blue);
	font-size: .98rem;
}

.dbkv-kurse .dbkv-meta .k {
	font-size: .68rem;
	line-height: 1.25;
	color: var(--dbkv-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	/* Four columns leave little room; hyphenate rather than overflow. */
	overflow-wrap: anywhere;
}

.dbkv-kurse .dbkv-card-foot {
	margin-top: auto;
	padding: 1.2rem 1.4rem 1.4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
}

.dbkv-kurse .dbkv-preis .amount {
	font-weight: 800;
	font-size: 1.35rem;
	color: var(--dbkv-blue);
	display: block;
}

.dbkv-kurse .dbkv-preis .note {
	display: block;
	font-size: .7rem;
	color: var(--dbkv-muted);
}

/* ---------- Buttons ---------- */

.dbkv-kurse .dbkv-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: none;
	cursor: pointer;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: .18s;
	font-size: .95rem;
	padding: .8rem 1.6rem;
	background: var(--dbkv-teal);
	color: #fff;
	line-height: 1.2;
}

.dbkv-kurse .dbkv-btn:hover {
	background: var(--dbkv-teal-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(10, 139, 146, .32);
}

.dbkv-kurse .dbkv-card-foot .dbkv-btn {
	padding: .65rem 1.2rem;
	font-size: .85rem;
}

.dbkv-kurse .dbkv-btn:focus-visible,
.dbkv-kurse button:focus-visible,
.dbkv-kurse input:focus-visible,
.dbkv-kurse select:focus-visible,
.dbkv-kurse textarea:focus-visible {
	outline: 3px solid var(--dbkv-blue);
	outline-offset: 2px;
}

/* ---------- Empty state ---------- */

.dbkv-kurse .dbkv-empty {
	background: var(--dbkv-card);
	border-radius: var(--dbkv-radius);
	box-shadow: var(--dbkv-shadow);
	padding: 2.6rem 2rem;
	text-align: center;
	display: none;
}

.dbkv-kurse .dbkv-empty.is-visible {
	display: block;
}

.dbkv-kurse .dbkv-empty p {
	color: var(--dbkv-muted);
	font-size: .92rem;
	margin: .4rem 0 1.2rem;
}

.dbkv-kurse .dbkv-hidden {
	display: none !important;
}

/* ---------- Mobile filter toggle ---------- */

.dbkv-kurse .dbkv-toggle {
	display: none;
}

@media (max-width: 960px) {
	.dbkv-kurse .dbkv-layout {
		grid-template-columns: 1fr;
	}

	.dbkv-kurse .dbkv-toggle {
		display: inline-flex;
		width: 100%;
		justify-content: center;
		margin-bottom: 1.1rem;
	}

	.dbkv-kurse .dbkv-side {
		position: static;
		display: none;
	}

	.dbkv-kurse .dbkv-side.is-open {
		display: block;
		margin-bottom: 1.6rem;
	}
}

@media (max-width: 600px) {
	.dbkv-kurse {
		padding-inline: 1rem;
	}

	.dbkv-kurse .dbkv-group {
		margin-bottom: 2.2rem;
	}

	.dbkv-kurse .dbkv-card h4 {
		font-size: 1.05rem;
	}

	/* Price and button side by side get cramped below ~380px — stack them so
	   the button keeps a comfortable tap target. */
	.dbkv-kurse .dbkv-card-foot {
		flex-direction: column;
		align-items: stretch;
		gap: .9rem;
	}

	.dbkv-kurse .dbkv-card-foot .dbkv-btn {
		justify-content: center;
		padding: .8rem 1.2rem;
	}

	.dbkv-kurse .dbkv-resultbar {
		gap: .6rem;
	}
}

/* Full-screen on phones.
 *
 * The selector repeats .dbkv-kurse deliberately: the boxed-layout rule above
 * is `.dbkv-kurse.dbkv-kurse-modal`, and a single-class selector in here would
 * lose to it on specificity no matter that it comes later. */
@media (max-width: 700px) {
	.dbkv-kurse.dbkv-kurse-modal {
		padding: 0;
		/* NOT `stretch`. The overlay is fixed to the viewport, so stretch forces
		   the box to exactly the viewport height whatever its content — the
		   white panel then stopped mid-form and every field below it was drawn
		   straight onto the page behind. `min-height` cannot win against a
		   stretched cross size. flex-start lets the box grow with its content;
		   the overlay scrolls, and min-height below still fills a short form. */
		align-items: flex-start;
	}

	.dbkv-kurse.dbkv-kurse-modal .dbkv-modal-box {
		border-radius: 0;
		max-width: none;
		width: 100%;
		/* dvh follows the browser chrome as it hides on scroll; vh is the
		   fallback for older mobile browsers. */
		min-height: 100vh;
		min-height: 100dvh;
		padding: 1.5rem 1.15rem 2.5rem;
		box-shadow: none;
	}

	/* Google renders the v2 checkbox at a fixed 304 px and will not shrink it.
	   With the modal's own padding that is wider than a 320 px phone, so the
	   widget spilled past the right edge and its left half was cut off. Scaled
	   from the top-left corner — the checkbox stays fully clickable, and the
	   wrapper height is corrected so the submit button does not ride up. */
	.dbkv-kurse-modal .dbkv-captcha .g-recaptcha {
		transform: scale(.85);
		transform-origin: 0 0;
	}

	.dbkv-kurse-modal .dbkv-captcha {
		height: 68px;
		overflow: hidden;
	}

	.dbkv-kurse-modal .dbkv-modal-close {
		top: .8rem;
		right: .8rem;
		width: 38px;
		height: 38px;
	}

	.dbkv-kurse-modal h2 {
		padding-right: 2.6rem;
	}

	/* Comfortable tap targets and no iOS auto-zoom (which triggers below 16px). */
	.dbkv-kurse-modal input,
	.dbkv-kurse-modal select,
	.dbkv-kurse-modal textarea {
		font-size: 16px;
		padding: .8rem .9rem;
	}

	.dbkv-kurse-modal .dbkv-submit {
		padding: 1rem 1.6rem;
		font-size: 1rem;
	}
}

/* ---------- Three steps ---------- */

.dbkv-kurse .dbkv-schritte {
	margin-top: 3.5rem;
	padding-top: 3rem;
	border-top: 1px solid var(--dbkv-line);
}

.dbkv-kurse .dbkv-sec-head {
	max-width: 46rem;
	margin: 0 auto 2.4rem;
	text-align: center;
}

.dbkv-kurse .dbkv-kicker {
	color: var(--dbkv-teal);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.dbkv-kurse .dbkv-sec-head h2 {
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	margin: .4rem 0 0;
}

.dbkv-kurse .dbkv-schritte-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6rem;
}

.dbkv-kurse .dbkv-schritt {
	text-align: center;
	padding: 1.4rem;
}

.dbkv-kurse .dbkv-schritt-nr {
	position: relative;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--dbkv-blue);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 1.2rem;
	margin: 0 auto 1rem;
}

.dbkv-kurse .dbkv-schritt-nr::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px dashed var(--dbkv-teal);
	opacity: .55;
}

.dbkv-kurse .dbkv-schritt h3 {
	font-size: 1.05rem;
	margin: 0 0 .4rem;
}

.dbkv-kurse .dbkv-schritt p {
	font-size: .9rem;
	color: var(--dbkv-muted);
	margin: 0;
}

/* ---------- Closing call to action ---------- */

.dbkv-kurse .dbkv-cta {
	background: linear-gradient(120deg, var(--dbkv-teal) 0%, var(--dbkv-teal-dark) 100%);
	color: #fff;
	border-radius: 20px;
	padding: 2.6rem;
	margin-top: 3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	box-shadow: 0 18px 40px rgba(10, 139, 146, .32);
}

.dbkv-kurse .dbkv-cta h2 {
	color: #fff;
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	font-weight: 700;
	max-width: 32rem;
	margin: 0;
}

.dbkv-kurse .dbkv-cta p {
	opacity: .94;
	max-width: 34rem;
	margin: .5rem 0 0;
	font-size: .95rem;
}

.dbkv-kurse .dbkv-cta-btn {
	background: #fff;
	color: var(--dbkv-teal-dark);
	font-weight: 700;
	flex: none;
}

.dbkv-kurse .dbkv-cta-btn:hover {
	background: var(--dbkv-teal-light);
	color: var(--dbkv-teal-dark);
}

@media (max-width: 800px) {
	.dbkv-kurse .dbkv-schritte-grid {
		grid-template-columns: 1fr;
		gap: .6rem;
	}

	.dbkv-kurse .dbkv-cta {
		padding: 1.8rem 1.4rem;
		text-align: center;
		justify-content: center;
	}

	.dbkv-kurse .dbkv-cta-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- Modal ---------- */

.dbkv-kurse-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 45, 80, .62);
	display: none;
	align-items: flex-start;
	justify-content: center;
	z-index: 100000;
	padding: 2rem 1rem;
	overflow-y: auto;
}

.dbkv-kurse-modal.is-open {
	display: flex;
}

.dbkv-kurse-modal .dbkv-modal-box {
	background: #fff;
	border-radius: 16px;
	max-width: 640px;
	width: 100%;
	padding: 1.8rem;
	position: relative;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
	color: #1F2A33;
	line-height: 1.6;
}

.dbkv-kurse-modal h2 {
	color: #00457F;
	font-size: 1.3rem;
	margin: 0 0 .3rem;
}

.dbkv-kurse-modal .dbkv-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: #F5F8F9;
	border: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.2rem;
	line-height: 1;
	color: #5F6E78;
}

.dbkv-kurse-modal .dbkv-modal-close:hover {
	background: #E1E8EB;
}

.dbkv-kurse-modal .dbkv-field {
	margin-bottom: 1rem;
}

.dbkv-kurse-modal .dbkv-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

@media (max-width: 560px) {
	.dbkv-kurse-modal .dbkv-two {
		grid-template-columns: 1fr;
	}
}

.dbkv-kurse-modal label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	color: #00457F;
	margin-bottom: .3rem;
}

.dbkv-kurse-modal .dbkv-req {
	color: #076F75;
}

/* Every property a theme reset is likely to touch is stated outright, so the
   field looks the same whatever theme the block lands in. */
.dbkv-kurse-modal input[type="text"],
.dbkv-kurse-modal input[type="email"],
.dbkv-kurse-modal input[type="tel"],
.dbkv-kurse-modal input[type="number"],
.dbkv-kurse-modal select,
.dbkv-kurse-modal textarea {
	width: 100%;
	max-width: none;
	border: 1.5px solid #E1E8EB;
	border-radius: 10px;
	padding: .65rem .85rem;
	margin: 0;
	font-size: .92rem;
	font-family: inherit;
	line-height: 1.5;
	letter-spacing: normal;
	background: #FAFCFC;
	color: #1F2A33;
	box-shadow: none;
	min-height: 0;
	height: auto;
}

.dbkv-kurse-modal label {
	display: block;
	line-height: 1.4;
}

/* Elementor's kit stylesheet strips the border off every input on the site
   with `.elementor-kit-NN input:not([type="button"]):not([type="submit"])`.
   Each :not() counts towards specificity, so that rule scores three class-level
   components and outranks the one above — the text fields rendered as flat grey
   boxes while the selects and the textarea, which that selector does not cover,
   kept their outline. One class more here wins it back without !important. */
.dbkv-kurse.dbkv-kurse-modal .dbkv-field input[type="text"],
.dbkv-kurse.dbkv-kurse-modal .dbkv-field input[type="email"],
.dbkv-kurse.dbkv-kurse-modal .dbkv-field input[type="tel"],
.dbkv-kurse.dbkv-kurse-modal .dbkv-field input[type="number"] {
	border: 1.5px solid #E1E8EB;
	border-radius: 10px;
}

.dbkv-kurse-modal input:focus,
.dbkv-kurse-modal select:focus,
.dbkv-kurse-modal textarea:focus,
.dbkv-kurse.dbkv-kurse-modal .dbkv-field input:focus {
	border-color: #0A8B92;
	background: #fff;
}

.dbkv-kurse-modal .dbkv-hint {
	display: block;
	font-size: .74rem;
	color: #5F6E78;
	margin-top: .3rem;
	line-height: 1.45;
}

.dbkv-kurse-modal .dbkv-summary {
	background: #E6F4F5;
	border-radius: 10px;
	padding: 1rem 1.1rem;
	margin: 1.2rem 0;
}

.dbkv-kurse-modal .dbkv-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: .88rem;
	padding: .2rem 0;
	color: #00457F;
}

.dbkv-kurse-modal .dbkv-summary-row.total {
	border-top: 1px solid rgba(0, 69, 127, .2);
	margin-top: .5rem;
	padding-top: .55rem;
	font-weight: 800;
	font-size: 1.02rem;
}

.dbkv-kurse-modal .dbkv-consent {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	font-size: .82rem;
	color: #1F2A33;
	font-weight: 400;
}

.dbkv-kurse-modal .dbkv-consent input {
	width: auto;
	margin-top: .25rem;
	flex: none;
}

.dbkv-kurse-modal .dbkv-submit {
	width: 100%;
	margin-top: 1.2rem;
	justify-content: center;
}

.dbkv-kurse-modal .dbkv-feedback {
	margin-top: 1rem;
	padding: .9rem 1rem;
	border-radius: 10px;
	font-size: .88rem;
	display: none;
}

.dbkv-kurse-modal .dbkv-feedback.is-error {
	display: block;
	background: #FDECEA;
	color: #B02A1F;
}

.dbkv-kurse-modal .dbkv-feedback.is-success {
	display: block;
	background: #E6F4F5;
	color: #076F75;
}

/* ---------- Success state ---------- */

.dbkv-kurse-modal .dbkv-erfolg {
	text-align: center;
	padding: 2.5rem 1rem 1.5rem;
	outline: none;
}

.dbkv-kurse-modal .dbkv-erfolg[hidden] {
	display: none;
}

.dbkv-kurse-modal .dbkv-erfolg h3 {
	color: #00457F;
	font-size: 1.35rem;
	margin: 1.1rem 0 .4rem;
}

.dbkv-kurse-modal .dbkv-erfolg p {
	color: #5F6E78;
	font-size: .95rem;
	max-width: 26rem;
	margin: 0 auto 1.6rem;
	line-height: 1.6;
}

.dbkv-erfolg-haken {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: #E6F4F5;
}

.dbkv-haken-kreis {
	stroke: #0A8B92;
	stroke-width: 2.5;
	stroke-dasharray: 152;
	stroke-dashoffset: 152;
	animation: dbkv-kreis .5s ease-out forwards;
}

.dbkv-haken-pfad {
	stroke: #0A8B92;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: dbkv-haken .32s .42s ease-out forwards;
}

@keyframes dbkv-kreis { to { stroke-dashoffset: 0; } }
@keyframes dbkv-haken { to { stroke-dashoffset: 0; } }

/* The tick draws itself; without motion it is simply already drawn. */
@media (prefers-reduced-motion: reduce) {
	.dbkv-haken-kreis,
	.dbkv-haken-pfad {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* Honeypot: hidden from people, still in the DOM for bots. */
.dbkv-kurse-modal .dbkv-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}