/* Block dpk/trainingszeiten - Vorlage: design/hundesport/mockups/training.dc.html.
   Zeiten in Tinte, Kacheln violett (Säule Hundesport, Link) oder gestrichelt
   (noch keine Beschreibung), Pause grau. Farbe ist nie allein: jede Zeile hat
   Name und Symbol, die Legende erklärt die Kacheln. */

.dpk-plan {
	margin-block: 0 2rem;
}

.dpk-plan__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 1.1rem;
}

.dpk-plan .dpk-plan__tagname {
	margin: 0;
}

.dpk-plan__tipp {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--grau-leise);
}

.dpk-plan__liste {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.dpk-plan__zeile {
	display: grid;
	grid-template-columns: 4.6rem 1.75rem minmax(0, 1fr);
	column-gap: 0.5rem;
	margin: 0;
}

.dpk-plan__zeit {
	font-size: 1.5rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	padding-top: 0.9rem;
}

/* Punkt und Strich der Zeitleiste */
.dpk-plan__punkt {
	position: relative;
	display: flex;
	justify-content: center;
}

.dpk-plan__punkt::before {
	content: "";
	width: 14px;
	height: 14px;
	margin-top: 1.35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--tinte);
	position: relative;
	z-index: 1;
}

.dpk-plan__punkt::after {
	content: "";
	position: absolute;
	top: 1.35rem;
	bottom: 0;
	left: calc(50% - 1px);
	width: 2px;
	background: var(--wp--preset--color--linie);
}

.dpk-plan__zeile:last-child .dpk-plan__punkt::after {
	display: none;
}

.dpk-plan__karte {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 12px;
	padding: 1rem 1.1rem;
	margin-bottom: 1.1rem;
	background: var(--wp--preset--color--karte);
}

.dpk-plan__angebot {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	color: var(--wp--preset--color--tinte);
}

a.dpk-plan__angebot {
	text-decoration: none;
}

a.dpk-plan__angebot .dpk-plan__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.dpk-plan__angebot:hover .dpk-plan__name {
	text-decoration-thickness: 2px;
}

a.dpk-plan__angebot:focus-visible {
	outline: 3px solid var(--wp--preset--color--tinte);
	outline-offset: 4px;
	border-radius: 4px;
}

.dpk-plan__kachel {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	box-sizing: border-box;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--sport);
	color: #fff;
}

.dpk-plan__kachel--folgt {
	background: transparent;
	border: 2px dashed var(--wp--preset--color--sport);
	color: var(--wp--preset--color--sport);
}

.dpk-plan__kachel--pause {
	flex-basis: 28px;
	width: 28px;
	height: 28px;
	background: transparent;
	color: var(--wp--preset--color--grau-leise);
}

.dpk-plan__text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}

.dpk-plan__name {
	font-size: 1.125rem;
}

.dpk-plan__zusatz {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--grau-leise);
}

.dpk-plan .dpk-plan__hinweis {
	margin: -0.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--grau);
}

/* Pause: graue Fläche ohne Rahmen, leiser Punkt */
.dpk-plan__zeile--pause .dpk-plan__zeit {
	color: var(--wp--preset--color--grau-leise);
	padding-top: 0.6rem;
}

.dpk-plan__zeile--pause .dpk-plan__punkt::before {
	margin-top: 1.1rem;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--grau-leise);
	background: var(--wp--preset--color--papier);
}

.dpk-plan__zeile--pause .dpk-plan__karte {
	border-color: transparent;
	background: var(--wp--preset--color--papier-tief);
	padding-block: 0.75rem;
}

.dpk-plan__angebot--pause .dpk-plan__name {
	color: var(--wp--preset--color--grau);
}

/* Mehrere Seiten: Kacheln nebeneinander, jede ein Link. Wird es eng, steht
   der Text unter den Kacheln. */
.dpk-plan__angebot--mehrere {
	flex-wrap: wrap;
	row-gap: 0.5rem;
}

.dpk-plan__angebot--mehrere .dpk-plan__text {
	flex: 1 1 11rem;
}

.dpk-plan__name {
	overflow-wrap: normal;
}
/* Mehrere Seiten: Kacheln nebeneinander, jede ein Link */
.dpk-plan__kacheln {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}

a.dpk-plan__kachel {
	text-decoration: none;
}

a.dpk-plan__kachel:focus-visible {
	outline: 3px solid var(--wp--preset--color--tinte);
	outline-offset: 2px;
}

/* Pausiert: abgeschwächt, mit Etikett. Text nur über die Farbe leiser
   (grau-leise, Kontrast 6,9:1), nicht über opacity - sonst fällt er unter
   4,5:1. Die Kachel (Symbol, kein Text) darf blasser werden. */
.dpk-plan__zeile--pausiert .dpk-plan__kachel {
	opacity: 0.5;
}

.dpk-plan__zeile--pausiert .dpk-plan__zeit,
.dpk-plan__zeile--pausiert .dpk-plan__name,
.dpk-plan__zeile--pausiert .dpk-plan__zusatz,
.dpk-plan__zeile--pausiert .dpk-plan .dpk-plan__hinweis,
.dpk-plan .dpk-plan__zeile--pausiert .dpk-plan__hinweis {
	color: var(--wp--preset--color--grau-leise);
}

.dpk-plan__zeile--pausiert .dpk-plan__punkt::before {
	background: var(--wp--preset--color--grau-leise);
}

.dpk-plan__zeile--pausiert .dpk-plan__karte {
	border-style: dashed;
}

.dpk-plan__etikett {
	align-self: flex-start;
	margin-top: 4px;
	padding: 1px 8px;
	border-radius: 3px;
	background: var(--wp--preset--color--papier-tief);
	border: 1px solid var(--wp--preset--color--linie);
	color: var(--wp--preset--color--tinte);
	font-size: 0.8125rem;
	font-weight: 600;
}

.dpk-plan__tag + .dpk-plan__tag {
	margin-top: 0.5rem;
}

/* Legende */
.dpk-plan__legende {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid var(--wp--preset--color--linie);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--grau);
}

.dpk-plan__legende li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.dpk-plan__muster {
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border-radius: 5px;
	background: var(--wp--preset--color--sport);
}

.dpk-plan__muster--folgt {
	background: transparent;
	border: 2px dashed var(--wp--preset--color--sport);
}

@media (max-width: 480px) {
	.dpk-plan__zeile {
		grid-template-columns: 3.6rem 1.25rem minmax(0, 1fr);
		column-gap: 0.35rem;
	}

	.dpk-plan__zeit {
		font-size: 1.2rem;
	}

	.dpk-plan__karte {
		padding: 0.85rem 0.9rem;
	}
}

/* Kasten "Training" (Infobox) */
.dpk-trainingsbox__liste li {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}

.dpk-seitenbox .dpk-trainingsbox__liste li + li {
	margin-top: 0.75rem;
}

.dpk-trainingsbox__pausiert > strong,
.dpk-trainingsbox__pausiert > .dpk-trainingsbox__was,
.dpk-trainingsbox__pausiert > .dpk-trainingsbox__zusatz {
	color: var(--wp--preset--color--grau-leise);
}

.dpk-trainingsbox__zusatz {
	color: var(--wp--preset--color--grau);
	font-size: 0.9375rem;
}

/* Ansprechpartnerin im Kasten (Übungswartin aus „Ansprechpartner“) */
.dpk-seitenbox .dpk-trainingsbox__kontakt {
	margin: 1rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--linie);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.dpk-trainingsbox__kontakt a {
	display: inline-block;
	padding-block: 3px;
	color: var(--wp--preset--color--tinte);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

/* ---------- Kasten „Training – jede Woche“ (Startseite, darstellung
   „startseite“, Klaas 07.10.2026). Kopf und Marke Violett als Fläche mit
   weißer Schrift (Kontrast 6,2:1), alles andere Tinte. ---------- */
.dpk-trainingswoche {
	margin: 0;
	background: var(--wp--preset--color--karte);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--radius--karte);
	/* nicht overflow: hidden - die Kontaktkarte darf über den Rand ragen */
}

.dpk-trainingswoche > * {
	margin: 0;
}

.dpk-trainingswoche__kopf {
	border-radius: calc(var(--wp--custom--radius--karte) - 1px) calc(var(--wp--custom--radius--karte) - 1px) 0 0;
	background: var(--wp--preset--color--sport);
	color: #FFFFFF;
	padding: 16px 20px 14px;
}

.dpk-trainingswoche__kopf > * {
	margin: 0;
	color: inherit;
}

.dpk-trainingswoche__augenbraue {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dpk-trainingswoche__titel {
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.15;
}

.dpk-trainingswoche__inhalt {
	padding: 6px 20px 4px;
}

.dpk-trainingswoche__tag {
	padding: 14px 0;
}

.dpk-trainingswoche__tag + .dpk-trainingswoche__tag {
	border-top: 1px solid var(--wp--preset--color--linie);
}

.dpk-trainingswoche__tagname {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 8px;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.dpk-trainingswoche__tag--absprache .dpk-trainingswoche__tagname {
	font-size: 1rem;
}


.dpk-trainingswoche__plan {
	margin: 0;
	display: grid;
	gap: 6px;
}

.dpk-trainingswoche__zeile {
	display: grid;
	grid-template-columns: 4.25rem minmax(0, 1fr);
	gap: 12px;
	align-items: baseline;
	font-size: 0.96875rem;
	line-height: 1.45;
}

.dpk-trainingswoche__zeile dt {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.dpk-trainingswoche__zeile dt abbr {
	text-decoration: none;
}

.dpk-trainingswoche__zeile dd {
	margin: 0;
}

.dpk-trainingswoche__zeile--pause {
	color: var(--wp--preset--color--grau-leise);
}

.dpk-trainingswoche__fuss {
	padding: 12px 20px 16px;
	border-top: 1px solid var(--wp--preset--color--linie);
	font-size: 0.96875rem;
}

.dpk-trainingswoche__fuss a {
	color: var(--wp--preset--color--tinte);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.dpk-trainingswoche__fuss .dpk-pfeil::after {
	display: inline-block;
	margin-left: 0.35em;
	text-decoration: none;
}

/* „Offen für Gäste – nach Rücksprache mit der Übungswartin“ mit Kontaktkarte
   (Tooltip im Stil der Personenkarten der Kontaktseite). */
.dpk-trainingswoche__offen {
	margin: -4px 0 10px;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--wp--preset--color--grau);
}

.dpk-kontaktlink {
	position: relative;
	display: inline-block;
}

.dpk-kontaktlink > a {
	color: var(--wp--preset--color--tinte);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.dpk-kontaktkarte {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	display: grid;
	gap: 4px;
	width: max-content;
	max-width: min(18rem, calc(100vw - 32px));
	padding: 14px 16px;
	background: var(--wp--preset--color--karte);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--radius--karte);
	box-shadow: 0 6px 20px rgba(43, 35, 51, 0.16);
	color: var(--wp--preset--color--tinte);
	font-size: 0.9375rem;
	line-height: 1.45;
	text-align: left;
}

.dpk-kontaktkarte[hidden] {
	display: none;
}

.dpk-kontaktkarte--links {
	left: auto;
	right: 0;
}

.dpk-kontaktkarte--oben {
	top: auto;
	bottom: calc(100% + 6px);
}

.dpk-kontaktkarte__funktion {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
}

.dpk-kontaktkarte__name {
	font-weight: 600;
	font-size: 1rem;
}

.dpk-kontaktkarte__kontakt a {
	color: var(--wp--preset--color--tinte);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}