/* Wegweiser: Behörden und Alltag. Farben kommen aus main.css (Variablen). */

.ww-titel { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); margin: 48px 0 16px; }

.ww-box {
	background: var(--surface);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 20px 24px;
	margin: 0 0 16px;
}
.ww-box__title { font-size: 1.1rem; margin: 0 0 8px; }
.ww-box--info { background: var(--blue-soft); box-shadow: none; }
.ww-box--warn { background: var(--yellow-soft); box-shadow: none; margin: 1.5em 0; }
.ww-box--warn p { margin: 0; }

.ww-liste { margin: 0; padding-left: 1.2em; list-style: disc; }
.ww-liste li + li { margin-top: 8px; }
.ww-liste__text { color: var(--ink-2); }

.ww-karten { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ww-karten--liste { grid-template-columns: 1fr; }
.ww-karte { background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 18px 20px; position: relative; }
.ww-karte:hover { box-shadow: var(--shadow); }
.ww-karte__titel { font-size: 1.1rem; margin: 0 0 6px; }
.ww-karte__text { margin: 0; color: var(--ink-2); }

.ww-buchstaben { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.ww-buchstaben a {
	display: inline-grid; place-items: center; min-width: 40px; height: 40px;
	border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm);
	font-weight: 700; text-decoration: none; color: var(--ink);
}

.ww-woerter dt { font-weight: 700; margin-top: 12px; }
.ww-woerter dd { margin: 2px 0 0; color: var(--ink-2); }

.ww-stand { font-size: .95rem; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 16px; }
.ww-zurueck { margin-top: 24px; }

.ww-teaser {
	display: grid; gap: 32px; align-items: center;
	background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow);
	padding: clamp(24px, 5vw, 56px);
}
@media (min-width: 900px) { .ww-teaser { grid-template-columns: 1.2fr 1fr; } }
.ww-teaser__kicker { font-weight: 700; color: var(--green-ink); margin: 0 0 8px; }
.ww-teaser__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ww-teaser__links a {
	display: block; padding: 14px 18px; border-radius: var(--radius-sm);
	background: var(--bg-alt); color: var(--ink); font-weight: 700; text-decoration: none;
}
.ww-teaser__links a:hover { background: var(--green-soft); }