/* ===========================================================================
   Welpen-Seite (Block dpk/wurfliste)
   Vorlage design/welpen/mockups/Main.dc.html, Regeln CLAUDE.md „Welpen und
   Wurfliste“: Bedienelemente in Tinte, Gelb nur als Fläche mit Tinte bzw.
   mit Kontur in Tinte, Nadelfarben nur auf der Karte und in der Legende.
   =========================================================================== */

.dpk-wurfliste {
	--wurf-tinte: var(--wp--preset--color--tinte, #2B2333);
	--wurf-grau: var(--wp--preset--color--grau, #4A3F52);
	--wurf-leise: var(--wp--preset--color--grau-leise, #5E5566);
	--wurf-linie: var(--wp--preset--color--linie, #E4E1E8);
	--wurf-tief: var(--wp--preset--color--papier-tief, #F5F4F7);
	--wurf-gelb: #FAF41F;
	--wurf-toy: #8C96D6;
	--wurf-zwerg: #8C96D6;
	--wurf-klein: #4152B5;
	--wurf-gross: #101A5C;
	display: flex;
	flex-direction: column;
	gap: 40px;
	color: var(--wurf-tinte);
}

.dpk-wurfliste [hidden] {
	display: none !important;
}

.dpk-wurfliste h2 {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
}

.dpk-wurf-abschnitt {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dpk-wurf-unter {
	margin: -8px 0 0;
	color: var(--wurf-grau);
}

/* ---------- Status ---------- */

.dpk-wurf-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	padding: 14px 18px;
	border: 1px solid;
}

.dpk-wurf-status--gruen { background: #EAF6EE; border-color: #B9DFC6; }
.dpk-wurf-status--gelb { background: #FFF7E0; border-color: #F0D58A; }
.dpk-wurf-status--rot { background: #FDECEA; border-color: #F1B5AE; }

.dpk-wurf-ampel {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	flex: none;
}

.dpk-wurf-ampel__punkt {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid;
	background: #FFFFFF;
	opacity: 0.55;
}

.dpk-wurf-ampel__punkt--gruen { border-color: #2E9E5B; }
.dpk-wurf-ampel__punkt--gelb { border-color: #E0A100; }
.dpk-wurf-ampel__punkt--rot { border-color: #D2382B; }
.dpk-wurf-ampel__punkt.ist-an { opacity: 1; }
.dpk-wurf-ampel__punkt--gruen.ist-an { background: #2E9E5B; box-shadow: 0 0 0 3px #B9DFC6; }
.dpk-wurf-ampel__punkt--gelb.ist-an { background: #E0A100; box-shadow: 0 0 0 3px #F0D58A; }
.dpk-wurf-ampel__punkt--rot.ist-an { background: #D2382B; box-shadow: 0 0 0 3px #F1B5AE; }

.dpk-wurf-status__text {
	flex: 1 1 320px;
	min-width: 0;
}

.dpk-wurf-status__text p {
	margin: 0;
	font-size: 0.9375rem;
}

.dpk-wurf-status__text .dpk-wurf-status__titel {
	font-weight: 600;
	font-size: 1rem;
}

.dpk-wurf-status__hinweis {
	margin-top: 4px !important;
	font-weight: 600;
}

.dpk-wurf-status__link {
	font-weight: 600;
	color: var(--wurf-tinte);
}

/* ---------- Steuerung (erst mit JavaScript sichtbar) ---------- */

.dpk-wurf-steuer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 20px;
	padding: 14px 16px;
	border: 1px solid var(--wurf-linie);
}

.dpk-wurf-steuer__plz {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dpk-wurf-steuer__plz label {
	font-size: 0.875rem;
	font-weight: 600;
}

.dpk-wurf-steuer__zeile {
	display: flex;
	gap: 8px;
}

.dpk-wurf-steuer input {
	width: 6.5em;
	min-height: 44px;
	padding: 0 12px;
	font: inherit;
	font-size: 1rem;
	border: 1.5px solid var(--wurf-tinte);
	border-radius: var(--wp--custom--radius--knopf, 4px);
	box-sizing: border-box;
}

.dpk-wurf-steuer .dpk-knopf {
	min-height: 44px;
}

.dpk-wurf-steuer__hinweis {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wurf-leise);
}

.dpk-wurf-steuer__hinweis.ist-fehler {
	color: #A3241A;
	font-weight: 600;
}

.dpk-wurf-textknopf {
	min-height: 44px;
	padding: 0 4px;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	border: 0;
	background: none;
	color: var(--wurf-tinte);
	text-decoration: underline;
	cursor: pointer;
}

.dpk-wurf-pillen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dpk-wurf-pille {
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	border: 1.5px solid var(--wurf-tinte);
	background: #FFFFFF;
	color: var(--wurf-tinte);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.dpk-wurf-pille[aria-pressed="true"] {
	background: var(--wurf-tinte);
	color: #FFFFFF;
}

.dpk-wurf-pille--karte {
	padding-left: 12px;
}

/* ---------- Karten der Würfe ---------- */

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

.dpk-wurf {
	border: 1px solid var(--wurf-linie);
	border-radius: var(--wp--custom--radius--karte, 6px);
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: #FFFFFF;
}

/* Kartenkopf in Navy (Entscheidung Klaas 05.10.2026, wie im Mockup), Schrift weiß */
.dpk-wurf__kopf {
	background: var(--wurf-gross);
	color: #FFFFFF;
	padding: 12px 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

.dpk-wurf__sorte {
	margin: 0;
	color: #FFFFFF; /* auf Navy, Kontrast 15,9; sonst erbt h3 die Tinte */
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	flex: 1 1 auto;
}

.dpk-wurf-abzeichen {
	background: var(--wurf-gelb);
	color: var(--wurf-tinte);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 1px 8px;
	border-radius: var(--wp--custom--radius--etikett, 3px);
	white-space: nowrap;
}

.dpk-wurf__innen {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.dpk-wurf__innen p {
	margin: 0;
}

.dpk-wurf__zahlen {
	display: flex;
	gap: 22px;
	align-items: baseline;
}

.dpk-wurf__zahlen p {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	font-size: 0.8125rem;
	color: var(--wurf-grau);
}

.dpk-wurf__zahl {
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--wurf-tinte);
	font-variant-numeric: tabular-nums;
}

.dpk-wurf__zahlen .dpk-wurf__alter {
	margin-left: auto;
	text-align: right;
}

.dpk-wurf__wochen {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wurf-tinte);
}

.dpk-wurf__farben {
	font-size: 0.875rem;
	color: var(--wurf-grau);
}

.dpk-wurf__abgabe {
	font-size: 0.875rem;
	padding: 6px 10px;
	background: var(--wurf-tief);
	color: var(--wurf-grau);
}

.dpk-wurf__abgabe.ist-bereit {
	color: var(--wurf-tinte);
	font-weight: 600;
}

.dpk-wurf__ort {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 0.9375rem;
	border-top: 1px solid var(--wurf-linie);
	padding-top: 10px;
	margin-top: auto !important;
}

.dpk-wurf__km {
	color: var(--wurf-grau);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.dpk-wurf__kontakt {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wurf-tinte);
}

.dpk-wurf-leer {
	padding: 16px;
	background: var(--wurf-tief);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.dpk-wurf-leer p {
	margin: 0;
}

/* Punkte in Nadelfarbe (Größe), mit weißem Rand wie die Nadeln */
.dpk-wurf-punkt {
	display: inline-block;
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px currentColor;
}

.dpk-wurf-punkt--toy { background: var(--wurf-toy); color: var(--wurf-tinte); }
.dpk-wurf-punkt--zwerg { background: var(--wurf-zwerg); color: var(--wurf-zwerg); }
.dpk-wurf-punkt--klein { background: var(--wurf-klein); color: var(--wurf-klein); }
.dpk-wurf-punkt--gross { background: var(--wurf-gross); color: var(--wurf-gross); }
.dpk-wurf-punkt--bg { background: #FFFFFF; box-shadow: 0 0 0 3px var(--wurf-gelb), 0 0 0 4px var(--wurf-tinte); }

/* ---------- Bundesweit ---------- */

.dpk-wurf-gruppen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px;
	align-items: start;
}

.dpk-wurf-gruppe {
	border: 1px solid var(--wurf-linie);
	border-radius: var(--wp--custom--radius--karte, 6px);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.dpk-wurf-gruppe__kopf {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

.dpk-wurf-gruppe__kopf h3 {
	margin: 0;
	font-size: 1.1875rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}

.dpk-wurf-gruppe__kopf > span {
	font-size: 0.875rem;
	color: var(--wurf-grau);
}

.dpk-wurf-farben {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.dpk-wurf-farben li {
	display: grid;
	grid-template-columns: 20px minmax(0, 9em) 1fr 2em;
	gap: 8px;
	align-items: center;
}

.dpk-wurf-farben__spur {
	height: 10px;
	background: var(--wurf-tief);
}

.dpk-wurf-farben__spur > span {
	display: block;
	height: 10px;
	background: var(--wurf-tinte);
}

.dpk-wurf-farben__n {
	text-align: right;
}

.dpk-wurf-fell {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px #BDB6C4;
}

/* Echte Fellfarben wie auf „Unsere Pudel“ (immer mit Namen daneben) */
.dpk-wurf-fell--schwarz { background: #1F1C21; }
.dpk-wurf-fell--weiss { background: #FFFFFF; }
.dpk-wurf-fell--braun { background: #6E4630; }
.dpk-wurf-fell--silber { background: #A9A7B0; }
.dpk-wurf-fell--falb { background: #D9A86A; }
.dpk-wurf-fell--markenfarben { background: linear-gradient(90deg, #1F1C21 0 62%, #B9773E 62% 100%); }
.dpk-wurf-fell--harlekin { background: linear-gradient(90deg, #FFFFFF 0 30%, #1F1C21 30% 48%, #FFFFFF 48% 74%, #1F1C21 74% 100%); }
.dpk-wurf-fell--schwarz-falb { background: linear-gradient(90deg, #1F1C21 0 50%, #D9A86A 50%); }
.dpk-wurf-fell--schwarz-weiss { background: linear-gradient(90deg, #1F1C21 0 50%, #FFFFFF 50%); }

.dpk-wurf-gruppe__liste {
	border-top: 1px solid var(--wurf-linie);
	padding-top: 10px;
}

.dpk-wurf-gruppe__liste summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 0.9375rem;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.dpk-wurf-liste {
	list-style: none;
	margin: 0;
	padding: 6px 0 0;
	font-size: 0.875rem;
}

.dpk-wurf-liste li {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid var(--wurf-linie);
	font-variant-numeric: tabular-nums;
}

.dpk-wurf-liste li > span:first-child {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	align-items: center;
}

.dpk-wurf-liste__rh,
.dpk-wurf-liste__km {
	color: var(--wurf-grau);
	white-space: nowrap;
}

.dpk-wurf-aelter {
	margin: 0;
}

/* ---------- Woher / Du züchtest selbst? ---------- */

.dpk-wurf-fuss {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: stretch;
}

.dpk-wurf-fuss h2 {
	font-size: 1.0625rem;
}

.dpk-wurf-fuss p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wurf-grau);
}

.dpk-wurf-fuss a {
	color: var(--wurf-tinte);
	font-weight: 600;
}

.dpk-wurf-fuss__quelle {
	flex: 2 1 420px;
	min-width: 0;
	background: var(--wurf-tief);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dpk-wurf-fuss__zucht {
	flex: 1 1 280px;
	min-width: 0;
	border: 1px solid var(--wurf-linie);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 0.875rem;
}

.dpk-wurf-fuss .dpk-wurf-fuss__lizenz {
	font-size: 0.8125rem;
	color: var(--wurf-leise);
}

/* ---------- Karte (Dialog) ---------- */

.dpk-wurf-karte {
	width: min(640px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	box-shadow: 0 12px 40px rgba(43, 35, 51, 0.35);
	color: var(--wurf-tinte);
}

.dpk-wurf-karte::backdrop {
	background: rgba(43, 35, 51, 0.45);
}

.dpk-wurf-karte__kopf {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--wurf-linie);
}

.dpk-wurf-karte__kopf h2 {
	font-size: 1.25rem;
}

.dpk-wurf-karte__zu {
	width: 44px;
	height: 44px;
	border: 0;
	background: var(--wurf-tief);
	color: var(--wurf-tinte);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--knopf, 4px);
}

.dpk-wurf-karte__innen {
	padding: 14px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dpk-wurf-karte__rahmen {
	position: relative;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	aspect-ratio: 600 / 801;
}

.dpk-wurf-karte__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.dpk-wurf-karte__land {
	fill: var(--wurf-tief);
	stroke: #BDB6C4;
	stroke-width: 1;
}

.dpk-wurf-karte__umkreis {
	fill: rgba(43, 35, 51, 0.06);
	stroke: var(--wurf-tinte);
	stroke-width: 1.5;
	stroke-dasharray: 5 4;
}

/* Ausgangspunkt: gelbe Raute mit Kontur in Tinte */
.dpk-wurf-karte__ausgang,
.dpk-wurf-raute {
	width: 13px;
	height: 13px;
	background: var(--wurf-gelb);
	border: 2px solid var(--wurf-tinte);
	transform: rotate(45deg);
	box-sizing: border-box;
	flex: none;
}

.dpk-wurf-karte__ausgang {
	position: absolute;
	transform: translate(-50%, -50%) rotate(45deg);
	z-index: 1;
}

.dpk-wurf-karte__ausgang-text {
	position: absolute;
	transform: translate(12px, -50%);
	font-size: 0.75rem;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.85);
	padding: 0 4px;
	white-space: nowrap;
	z-index: 1;
}

/* Nadel: 24 px Tippfläche (durchsichtiger Rand), sichtbar 16 px */
.dpk-wurf-nadel {
	position: absolute;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)));
	z-index: 2;
}

.dpk-wurf-nadel::before {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--nadel, var(--wurf-zwerg));
	border: 2.5px solid #FFFFFF;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.dpk-wurf-nadel--toy { --nadel: var(--wurf-toy); }
.dpk-wurf-nadel--toy::before { box-shadow: 0 0 0 1.5px var(--wurf-tinte); }
.dpk-wurf-nadel--zwerg { --nadel: var(--wurf-zwerg); }
.dpk-wurf-nadel--klein { --nadel: var(--wurf-klein); }
.dpk-wurf-nadel--gross { --nadel: var(--wurf-gross); }

/* aus unserer BG: gelber Ring mit Kontur in Tinte */
.dpk-wurf-nadel--bg::before {
	border-color: var(--wurf-gelb);
	box-shadow: 0 0 0 1.5px var(--wurf-tinte);
}

.dpk-wurf-nadel[aria-expanded="true"]::before {
	inset: 2px;
	box-shadow: 0 0 0 3px var(--wurf-tinte);
}

.dpk-wurf-nadel:focus-visible {
	outline: 2px solid var(--wurf-tinte);
	outline-offset: 1px;
	border-radius: 50%;
}

.dpk-wurf-karte__info {
	position: absolute;
	z-index: 3;
	width: 210px;
	background: var(--wurf-tinte);
	color: #FFFFFF;
	padding: 10px 12px;
	font-size: 0.8125rem;
	line-height: 1.4;
	display: flex;
	flex-direction: column;
	gap: 2px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.dpk-wurf-karte__info strong {
	font-weight: 600;
}

.dpk-wurf-karte__info a {
	color: #FFFFFF;
	font-weight: 600;
}

.dpk-wurf-karte__info .dpk-wurf-abzeichen {
	align-self: flex-start;
}

.dpk-wurf-karte__legende {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	justify-content: center;
	font-size: 0.8125rem;
	color: var(--wurf-grau);
}

.dpk-wurf-karte__legende li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dpk-wurf-kreis {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1.5px dashed var(--wurf-tinte);
}

.dpk-wurf-karte__tipp,
.dpk-wurf-karte__quelle {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wurf-leise);
	text-align: center;
}

@media (max-width: 600px) {
	.dpk-wurf-karte {
		width: 100vw;
		max-width: 100vw;
		max-height: 100vh;
		margin: 0;
		height: 100%;
	}

	.dpk-wurf-karte__innen {
		padding: 12px;
	}

	.dpk-wurf-steuer {
		padding: 12px;
	}
}

/* ---------- Breite Seite (Body-Klasse dpk-wurfseite aus dem mu-plugin) ---------- */

.dpk-wurfseite .dpk-inhalt > .dpk-mit-randspalte {
	max-width: calc(var(--wp--custom--breite) - 2 * var(--wp--custom--innen));
}

.dpk-wurfseite .dpk-inhalt .wp-block-post-content > .dpk-wurfliste {
	max-width: none;
}

/* Kopfband in der Breite des Inhalts (wie auf „Unsere Pudel“, dort in pudel.css) */
.dpk-wurfseite .dpk-kopfband.dpk-kopfband--breit .dpk-kopfband__huelle {
	max-width: var(--wp--custom--breite);
}