/*
 * U-Wert-Rechner, Präfix .psc-uw-. Nutzt ausschließlich Theme-Variablen
 * (Farben, Radien, Schatten aus style.css :root) statt eigener Werte.
 * Mobil zuerst: eine Spalte bis 480px, danach Mehrspaltigkeit nur innerhalb
 * einzelner Formularzeilen. Der Seitencontainer ist .psc-container--narrow
 * (780px) -- deshalb kein Breakout, alles bleibt einspaltig gestapelt.
 */

.psc-uw { margin-top: 4px; }

.psc-uw-intro {
	margin: 0 0 24px;
	max-width: 640px;
	color: var(--psc-text-muted);
	font-size: 1rem;
	line-height: 1.5;
}

.psc-uw-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.psc-uw-panel {
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius);
	background: var(--psc-bg-card);
	padding: 20px;
}

.psc-uw-panel-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.psc-uw-kicker {
	display: block;
	margin-bottom: 4px;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--psc-accent);
}

.psc-uw-panel h3 { margin: 0; font-size: 1.05rem; color: var(--psc-text); }

.psc-uw-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.psc-uw-field:last-child { margin-bottom: 0; }

.psc-uw-field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-bottom: 14px;
}
@media (min-width: 480px) {
	.psc-uw-field-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

.psc-uw-field label {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--psc-text);
}

.psc-uw-unit { font-weight: 500; color: var(--psc-text-muted); font-size: .78rem; }

.psc-uw input[type="number"],
.psc-uw select {
	width: 100%;
	min-height: 44px;
	padding: 9px 12px;
	border-radius: 10px;
	border: 1px solid var(--psc-border-strong);
	background: var(--psc-bg-elev);
	color: var(--psc-text);
	font-size: 1rem;
	font-family: inherit;
}

.psc-uw :focus-visible { outline: 3px solid var(--psc-accent); outline-offset: 2px; }

.psc-uw-advanced { margin-top: 2px; }
.psc-uw-advanced summary {
	cursor: pointer;
	list-style: none;
	padding: 8px 0;
	font-size: .85rem;
	font-weight: 700;
	color: var(--psc-text-muted);
}
.psc-uw-advanced summary::-webkit-details-marker { display: none; }
.psc-uw-advanced[open] summary { color: var(--psc-text); }
.psc-uw-advanced .psc-uw-field-row { margin-top: 12px; margin-bottom: 0; }

.psc-uw-btn-add {
	border: 0;
	border-radius: 10px;
	padding: 10px 16px;
	min-height: 44px;
	background: var(--psc-accent);
	color: #fff;
	font-weight: 700;
	font-size: .9rem;
	cursor: pointer;
}
.psc-uw-btn-add:hover { filter: brightness(1.08); }

.psc-uw-cross {
	display: flex;
	min-height: 120px;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 16px;
	border: 1px solid var(--psc-border);
}
.psc-uw-cross-boundary {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 68px;
	padding: 6px 4px;
	text-align: center;
	font-size: .66rem;
	background: var(--psc-bg-raised);
	color: var(--psc-text-muted);
	flex: 0 0 auto;
}
.psc-uw-cross-boundary strong { display: block; color: var(--psc-text); font-size: .76rem; margin-bottom: 2px; }
.psc-uw-cross-layer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	padding: 6px 3px;
	text-align: center;
	font-size: .64rem;
	font-weight: 700;
	line-height: 1.25;
}
.psc-uw-cross-layer strong { display: block; font-size: .68rem; margin-bottom: 2px; }

.psc-uw-layers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.psc-uw-layer {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	border: 1px solid var(--psc-border);
	border-radius: 12px;
	padding: 12px;
	background: var(--psc-bg-elev);
}
.psc-uw-layer-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.psc-uw-layer-main select { margin-top: 2px; }
.psc-uw-layer-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.psc-uw-layer-meta label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: .74rem;
	font-weight: 700;
	color: var(--psc-text-muted);
	min-width: 86px;
}
.psc-uw-layer-meta input { min-height: 38px; padding: 6px 8px; }
.psc-uw-r { font-size: .8rem; font-weight: 700; color: var(--psc-accent); margin-left: auto; align-self: center; white-space: nowrap; }
.psc-uw-layer-remove {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var(--psc-text-muted);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 8px;
	min-height: 38px;
}
.psc-uw-layer-remove:hover { color: var(--psc-warm); background: var(--psc-warm-soft); }

.psc-uw-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.psc-uw-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}
.psc-uw-metric { display: flex; flex-direction: column; gap: 2px; }
.psc-uw-metric-label {
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--psc-text-muted);
}
.psc-uw-metric-value { font-size: 1.5rem; font-weight: 800; color: var(--psc-text); line-height: 1.2; }
.psc-uw-metric--main .psc-uw-metric-value { color: var(--psc-accent); font-size: 1.9rem; }
.psc-uw-metric-unit { font-size: .74rem; color: var(--psc-text-muted); }

.psc-uw-margin { margin: 0 0 16px; font-size: .88rem; font-weight: 600; color: var(--psc-text-muted); }
.psc-uw-margin.psc-uw-danger { color: var(--psc-warm); }

.psc-uw-class-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.psc-uw-class-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 32px;
	padding: 0 12px;
	border-radius: 8px;
	background: var(--psc-accent-soft);
	color: var(--psc-accent);
	font-weight: 800;
}

.psc-uw-scale { position: relative; display: flex; height: 26px; border-radius: 8px; overflow: hidden; margin-top: 18px; }
.psc-uw-scale span { flex: 1; display: flex; align-items: center; justify-content: center; font-size: .64rem; font-weight: 800; color: #06101a; }
.psc-uw-scale span:nth-child(1) { background: #4fd68a; }
.psc-uw-scale span:nth-child(2) { background: #73e5c2; }
.psc-uw-scale span:nth-child(3) { background: #9fe08f; }
.psc-uw-scale span:nth-child(4) { background: #d7e08f; }
.psc-uw-scale span:nth-child(5) { background: #f1cd68; }
.psc-uw-scale span:nth-child(6) { background: #f1b768; }
.psc-uw-scale span:nth-child(7) { background: #e89a5c; }
.psc-uw-scale span:nth-child(8) { background: #e07a5c; }
.psc-uw-scale span:nth-child(9) { background: #d1571d; color: #fff; }
.psc-uw-scale b {
	position: absolute;
	top: -5px;
	width: 3px;
	height: 36px;
	background: var(--psc-text);
	border-radius: 2px;
	transform: translateX(-50%);
	left: 4%;
}

.psc-uw-chart svg { width: 100%; height: auto; display: block; }
.psc-uw-chart .chart-bg { fill: var(--psc-bg-elev); }
.psc-uw-chart .grid { stroke: var(--psc-border); stroke-width: 1; }
.psc-uw-chart .axis-line { stroke: var(--psc-border-strong); stroke-width: 1; }
.psc-uw-chart .axis { fill: var(--psc-text-muted); font-size: 11px; }
.psc-uw-chart .xlabel { fill: var(--psc-text-muted); font-size: 10px; }
.psc-uw-chart .endpoint { fill: var(--psc-text-muted); font-size: 11px; font-weight: 700; }
.psc-uw-chart .temp-poly { fill: none; stroke: var(--psc-accent); stroke-width: 2.5; }
.psc-uw-chart .dot { fill: var(--psc-accent); }
.psc-uw-chart .value { fill: var(--psc-text); font-size: 11px; font-weight: 700; }

.psc-uw-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--psc-border);
}
.psc-uw-bar-label {
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--psc-text-muted);
	margin-right: 4px;
}
.psc-uw-bar-link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--psc-bg-elev);
	border: 1px solid var(--psc-border);
	color: var(--psc-text) !important;
	text-decoration: none !important;
	font-size: .85rem;
	font-weight: 600;
}
.psc-uw-bar-link:hover { border-color: var(--psc-accent); color: var(--psc-accent) !important; }