/* Gemeinsame Stile der Widget-Konfiguratoren (/wetter/widget und
   /stadtplan/widget). Bewusst eigenstaendig gehalten, damit die
   Werkzeuge nicht von Theme-Aenderungen abhaengen. */
.wk-lead { max-width: 62ch; margin: 0 auto 26px; text-align: center; color: #5b6570; }
.wk-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 767.98px) { .wk-grid { grid-template-columns: 1fr; } }

.wk-panel { background: #fff; border: 1px solid #e4e7ea; border-radius: 10px; padding: 18px; }
.wk-feld { margin-bottom: 18px; }
.wk-feld:last-child { margin-bottom: 0; }
.wk-label { display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
	color: #7b838c; margin-bottom: 7px; font-weight: 600; }
.wk-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-seg button {
	flex: 1 1 auto; appearance: none; border: 1px solid #e0e4e8; background: #f5f6f8;
	color: #2a2a2e; font: inherit; font-size: 13px; padding: 8px 10px;
	border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.wk-seg button:hover { background: #eceff2; }
.wk-seg button[aria-pressed="true"] { background: #e8021f; border-color: #e8021f; color: #fff; font-weight: 600; }
.wk-seg button:focus-visible { outline: 2px solid #e8021f; outline-offset: 2px; }

.wk-buehne {
	background: #f2f4f6; border: 1px solid #e4e7ea; border-radius: 10px;
	padding: 26px; display: flex; justify-content: center;
}
.wk-buehne.dunkel { background: #14181d; }
.wk-vorschau { width: 100%; max-width: 380px; }
.wk-breite { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #5b6570; margin-top: 12px; }
.wk-breite input { flex: 1 1 auto; }

.wk-code { position: relative; margin-top: 22px; }
.wk-code textarea {
	width: 100%; min-height: 130px; resize: vertical;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px; line-height: 1.55; padding: 14px 14px 14px 14px;
	border: 1px solid #e0e4e8; border-radius: 8px; background: #f7f8f9; color: #23262a;
}
.wk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.wk-kopf h2 { margin: 0; font-size: 18px; }
.wk-kopieren {
	appearance: none; border: 1px solid #e8021f; background: #e8021f; color: #fff;
	font: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 7px; cursor: pointer;
}
.wk-kopieren:hover { filter: brightness(1.08); }
.wk-kopieren.ok { background: #2f8f5b; border-color: #2f8f5b; }

.wk-hilfe { margin-top: 34px; }
.wk-hilfe h3 { font-size: 16px; margin: 22px 0 6px; }
.wk-hilfe p, .wk-hilfe li { color: #5b6570; }
.wk-regel {
	background: #fff; border: 1px solid #e4e7ea; border-left: 3px solid #e8021f;
	border-radius: 4px; padding: 16px 18px; margin: 26px 0;
}
.wk-regel p:last-child { margin-bottom: 0; }
.wk-kl { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
	color: #e8021f; font-weight: 700; margin-bottom: 6px; }