/* LueneNerd Werkstatt (ab 1.6.41): Seitenleiste, Übersicht und Aufbau der Spiel- und Werkzeug-Seiten. */

/* Aufbau: Seitenleiste links, Spiel oder Werkzeug rechts */
.ln-main--post .ln-post-body.ln-werkstatt {
	grid-template-columns: 17.5rem minmax(0, 1fr);
	align-items: start;
}

/* Seitenleiste */
.ln-wnav {
	position: sticky;
	top: calc(var(--ln-header-h, 72px) + 1.5rem);
	min-width: 0;
}
.ln-wnav__box {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large, 20px);
	background: var(--wp--preset--color--surface);
	padding: 1.25rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ln-wnav__box:hover { border-color: var(--wp--preset--color--blue); }
.ln-wnav__summary {
	display: none;
	list-style: none;
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}
.ln-wnav__summary::-webkit-details-marker { display: none; }
.ln-wnav__kopf,
.ln-wnav__titel,
.ln-wnav__sub,
.ln-wnav__start,
.ln-wnav__bald {
	font-family: var(--wp--preset--font-family--mono);
}
.ln-wnav__kopf { font-size: 0.8125rem; color: var(--wp--preset--color--accent); }
.ln-wnav__wahl { font-weight: 600; }
.ln-wnav__wahl::after { content: " ▾"; color: var(--wp--preset--color--muted); }
.ln-wnav__box[open] .ln-wnav__wahl::after { content: " ▴"; }
.ln-wnav__inhalt { display: flex; flex-direction: column; gap: 1rem; }
.ln-wnav__start {
	font-size: 0.875rem;
	color: var(--wp--preset--color--blue);
	text-decoration: none;
}
.ln-wnav__start:hover { color: var(--wp--preset--color--accent); }
.ln-wnav__gruppe { display: flex; flex-direction: column; gap: 0.25rem; }
.ln-wnav__titel { margin: 0 0 0.25rem; font-size: 0.8125rem; color: var(--wp--preset--color--accent); }
.ln-wnav__titel--werkzeug { color: var(--wp--preset--color--blue); }
.ln-wnav__sub {
	margin: 0.5rem 0 0.125rem;
	padding: 0 0.625rem;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.ln-wnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ln-wnav__link {
	display: block;
	padding: 0.5rem 0.625rem;
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.35;
}
a.ln-wnav__link:hover { background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--blue); }
a.ln-wnav__link:focus-visible { outline: 2px solid var(--wp--preset--color--blue); outline-offset: 1px; }
.ln-wnav__link--aktiv {
	background: var(--wp--preset--color--surface-2);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--accent);
	font-weight: 600;
}
.ln-wnav__link--aktiv::before { content: "> "; color: var(--wp--preset--color--accent); font-family: var(--wp--preset--font-family--mono); }
.ln-wnav__link--bald { color: var(--wp--preset--color--muted); }
.ln-wnav__bald { font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); border: 1px solid var(--wp--preset--color--border); border-radius: 999px; padding: 1px 6px; margin-left: 4px; vertical-align: 1px; }

/* Leere Einleitungskarte ausblenden */
.ln-main--werkstatt .ln-post-article:not(:has(.ln-prose > *)) { display: none; }

/* Hinweis im Editor oder bei fehlendem Eintrag */
.ln-wk-hinweis { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: 0.875rem; color: var(--wp--preset--color--muted); }

/* Übersicht */
.ln-wk-uebersicht { display: flex; flex-direction: column; gap: 2.5rem; }
.ln-wk-bereich__titel { margin: 0 0 1rem; font-size: 1.375rem; }
.ln-wk-bereich__titel span { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--accent); }
.ln-wk-bereich__titel--werkzeug span { color: var(--wp--preset--color--blue); }
.ln-wk-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1.5rem; }
.ln-wk-raster > li { display: flex; }
.ln-wk-karte {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	border-radius: 14px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface-2);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
a.ln-wk-karte:hover,
a.ln-wk-karte:focus-visible {
	border-color: var(--wp--preset--color--blue);
	box-shadow: 0 0 0 1px var(--ln-glow), 0 16px 40px -18px var(--ln-glow-strong);
	outline: none;
}
.ln-wk-karte--bald { border-style: dashed; background: transparent; }
.ln-wk-karte--bald .ln-wk-icon, .ln-wk-karte--bald .ln-wk-karte__titel { color: var(--wp--preset--color--muted); }
.ln-wk-karte__kopf { display: flex; justify-content: space-between; align-items: center; }
.ln-wk-icon { width: 1.75rem; height: 1.75rem; color: var(--wp--preset--color--accent); }
.ln-wk-chip {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}
a .ln-wk-chip--spiel { color: var(--wp--preset--color--accent); border-color: currentColor; }
a .ln-wk-chip--werkzeug { color: var(--wp--preset--color--blue); border-color: currentColor; }
.ln-wk-karte__titel { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }
.ln-wk-karte__text { color: var(--wp--preset--color--muted); font-size: 0.9375rem; line-height: 1.5; }
.ln-wk-karte__los { margin-top: auto; padding-top: 0.5rem; font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; color: var(--wp--preset--color--accent); }
.ln-wk-fuss { margin: 0; font-size: 0.875rem; color: var(--wp--preset--color--muted); }

/* Handy und Tablet: Seitenleiste als Auswahl über dem Werkzeug */
@media (max-width: 900px) {
	.ln-main--post .ln-post-body.ln-werkstatt { grid-template-columns: minmax(0, 1fr); }
	.ln-wnav { position: static; }
	.ln-wnav__box { padding: 0.875rem 1rem; }
	.ln-wnav__summary { display: flex; min-height: 2.75rem; }
	.ln-wnav__box[open] .ln-wnav__inhalt { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--wp--preset--color--border); }
}

@media (prefers-reduced-motion: reduce) {
	.ln-wnav__box, .ln-wk-karte { transition: none; }
}

/* Abzeichen „Läuft lokal“ (ab 1.6.56): ersetzt die Formel in jedem Einleitungstext */
.ln-wk-lokal {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}
.ln-wk-lokal__punkt {
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}