/* Tauchsport Vogel – Kursübersicht [vdtl_kursuebersicht]
 * Farben aus dem Logo: Blau #0E58A3, Orange #F78D4A
 */
.tsvo {
	--tsv-accent: #0e58a3;
	--tsv-accent-ink: #ffffff;
	--tsv-accent2: #f78d4a;
	--tsv-accent2-ink: #0b2747;
	--tsv-ink: #0b2747;
	--tsv-muted: #4f6782;
	--tsv-line: #d3e0ee;
	--tsv-soft: #eef4fa;
	--tsv-soft2: #fff2ea;
	--tsv-radius: 14px;
	--tsvo-navy: #0b2747;
	box-sizing: border-box;
	max-width: 1180px;
	margin-top: 1.5rem;
	margin-bottom: 3rem;
	color: var(--tsv-ink);
	font-size: 16px;
	line-height: 1.55;
}
.tsvo *, .tsvo *::before, .tsvo *::after { box-sizing: border-box; }

/* ---------- Hero ---------- */
.tsvo-hero {
	position: relative; overflow: hidden; border-radius: 22px;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(247, 141, 74, .28) 0%, transparent 55%),
		linear-gradient(160deg, #0e58a3 0%, #0a4785 55%, #0b2747 100%);
	color: #fff;
}
.tsvo-hero__inner { position: relative; z-index: 1; padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3.5rem, 7vw, 5rem); }
.tsvo-hero__kicker {
	margin: 0 0 .5rem; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffd2b6;
}
.tsvo-hero__title {
	margin: 0; max-width: 18ch; font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.02; font-weight: 800; font-style: italic;
	letter-spacing: -.02em; color: #fff; text-transform: uppercase;
}
.tsvo-hero__title::after {
	content: ""; display: block; width: 5.5rem; height: 8px; margin-top: 1rem; background: var(--tsv-accent2); transform: skewX(-14deg); border-radius: 2px;
}
.tsvo-hero__intro { max-width: 58ch; margin: 1.1rem 0 0; font-size: clamp(1rem, 1.8vw, 1.15rem); color: #dbe8f6; }
.tsvo-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 48px; fill: #fff; opacity: .1; }

.tsvo-jump { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .75rem; margin-top: 2rem; }
.tsvo-jump__item {
	display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-items: center;
	padding: .9rem 1rem; border-radius: var(--tsv-radius); text-decoration: none; color: #fff;
	background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(4px);
	transition: background .15s, transform .15s, border-color .15s;
}
.tsvo-jump__item:hover, .tsvo-jump__item:focus-visible { background: rgba(255, 255, 255, .18); border-color: var(--tsv-accent2); transform: translateY(-2px); color: #fff; }
.tsvo-jump__item:focus-visible { outline: 3px solid var(--tsv-accent2); outline-offset: 2px; }
.tsvo-jump__num {
	grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
	background: var(--tsv-accent2); color: var(--tsv-accent2-ink); font-weight: 800; font-style: italic; font-size: 1.1rem;
}
.tsvo-jump__title { min-width: 0; overflow-wrap: anywhere; hyphens: auto; font-weight: 800; font-style: italic; font-size: 1.05rem; line-height: 1.2; }
.tsvo-jump__count { font-size: .82rem; color: #cfe0f3; }

/* ---------- Bereiche ---------- */
.tsvo-section { --sec: var(--tsv-accent); --sec-soft: var(--tsv-soft); margin-top: clamp(2.5rem, 6vw, 4rem); scroll-margin-top: 90px; }
.tsvo-section--specialties { --sec: #e0702c; --sec-soft: var(--tsv-soft2); }
.tsvo-section--pro { --sec: var(--tsvo-navy); --sec-soft: #e9edf3; }

.tsvo-section__head { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: start; margin-bottom: 1.75rem; }
.tsvo-section__head::before {
	content: ""; grid-row: span 3; width: 8px; align-self: stretch; border-radius: 4px; background: var(--sec); transform: skewX(-10deg);
}
.tsvo-section__kicker { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sec); }
.tsvo-section__title {
	margin: .15rem 0 .5rem; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.05; font-weight: 800; font-style: italic;
	text-transform: uppercase; letter-spacing: -.01em; color: var(--tsv-ink);
}
.tsvo-section__intro { margin: 0; max-width: 68ch; color: var(--tsv-muted); font-size: 1.05rem; }

.tsvo-group { margin-top: 2rem; }
.tsvo-group__head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.tsvo-group__icon {
	flex: none; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 12px;
	background: var(--sec-soft); color: var(--sec);
}
.tsvo-group__title { margin: 0; font-size: 1.2rem; line-height: 1.2; font-weight: 800; color: var(--tsv-ink); }
.tsvo-group__text { margin: .1rem 0 0; font-size: .92rem; color: var(--tsv-muted); }

.tsvo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }

/* ---------- Kurskarte ---------- */
.tsvo-card {
	position: relative; display: flex; flex-direction: column; padding: 1.25rem 1.3rem 1.15rem; border-radius: var(--tsv-radius);
	background: #fff; border: 1px solid var(--tsv-line); box-shadow: 0 10px 28px -22px rgba(11, 39, 71, .55);
	transition: transform .18s, box-shadow .18s, border-color .18s; overflow: hidden; scroll-margin-top: 90px;
}
.tsvo-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--sec); }
.tsvo-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(11, 39, 71, .6); border-color: color-mix(in srgb, var(--sec) 35%, var(--tsv-line)); }
.tsvo-card__title { margin: .2rem 0 .55rem; font-size: 1.12rem; line-height: 1.25; font-weight: 800; color: var(--tsv-ink); }

.tsvo-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .8rem; padding: 0; list-style: none; }
.tsvo-chip {
	margin: 0; padding: .18rem .6rem; border-radius: 99px; font-size: .76rem; font-weight: 700; line-height: 1.5;
	background: var(--sec-soft); color: var(--sec);
}
.tsvo-section--pro .tsvo-chip { color: var(--tsvo-navy); }
.tsvo-chip--age { background: var(--tsv-accent2); color: var(--tsv-accent2-ink); }

.tsvo-card__text { margin: 0 0 .7rem; font-size: .95rem; }
.tsvo-card__after { margin: 0 0 .8rem; padding: .55rem .75rem; border-radius: 10px; background: var(--tsv-soft); font-size: .87rem; color: var(--tsv-ink); }
.tsvo-card__after strong { color: var(--tsv-accent); }

.tsvo-reqs { margin: 0 0 .9rem; border-top: 1px dashed var(--tsv-line); padding-top: .7rem; font-size: .88rem; }
.tsvo-reqs summary {
	cursor: pointer; font-weight: 800; color: var(--tsv-accent); list-style: none; display: flex; align-items: center; gap: .4rem;
}
.tsvo-reqs summary::-webkit-details-marker { display: none; }
.tsvo-reqs summary::before {
	content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(-45deg); transition: transform .15s; margin-right: .15rem;
}
.tsvo-reqs[open] summary::before { transform: rotate(45deg); }
.tsvo-reqs summary span { font-weight: 600; color: var(--tsv-muted); }
.tsvo-reqs summary:focus-visible { outline: 3px solid var(--tsv-accent); outline-offset: 3px; border-radius: 4px; }
.tsvo-reqs ul { margin: .6rem 0 0; padding: 0; list-style: none; }
.tsvo-reqs li { position: relative; margin: .3rem 0; padding-left: 1.2rem; }
.tsvo-reqs li::before { content: ""; position: absolute; left: .1rem; top: .6em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--tsv-accent2); }
.tsvo-reqs p { margin: .6rem 0 0; }
.tsvo-reqs__note { color: var(--tsv-muted); }

.tsvo-card__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .2rem; }
.tsvo-link { font-size: .88rem; font-weight: 700; color: var(--tsv-accent); text-decoration: none; }
.tsvo-link:hover { text-decoration: underline; }

/* ---------- Abschluss ---------- */
.tsvo-cta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
	margin-top: clamp(2.5rem, 6vw, 4rem); padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
	border-radius: 20px; background: var(--tsvo-navy); color: #dbe8f6; border-left: 8px solid var(--tsv-accent2);
}
.tsvo-cta p { margin: .3rem 0 0; max-width: 56ch; }
.tsvo-cta__title { margin: 0; color: #fff; font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 800; font-style: italic; }
.tsvo-source { margin: 1rem 0 0; font-size: .8rem; color: var(--tsv-muted); }

@media (max-width: 760px) {
	.tsvo-hero { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.tsvo *, .tsvo *::before { transition: none !important; }
}
@media print {
	.tsvo-hero { background: none; color: var(--tsv-ink); }
	.tsvo-hero__title, .tsvo-hero__intro { color: var(--tsv-ink); }
	.tsvo-jump, .tsvo-card__actions, .tsvo-cta { display: none; }
	.tsvo-reqs { display: block; }
	.tsvo-card { break-inside: avoid; box-shadow: none; }
}