/* CW Design System 0.1, profile Verwaltung. Tokens: cw-tokens.css. */
* { box-sizing: border-box; }
body { color: var(--cw-text); background: var(--cw-surface); }
a { color: var(--cw-link); text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
button, input, select, textarea, summary { min-block-size: var(--cw-control-height); }
button, input, select, textarea { color: var(--cw-text); background: var(--cw-surface-raised); border: 1px solid var(--cw-border-control); border-radius: var(--cw-radius-control); padding: var(--cw-space-1) var(--cw-space-3); max-width: 100%; }
button, summary { cursor: pointer; }
button:hover { background: var(--cw-surface-muted); }
.primary-action { color: var(--cw-on-action); background: var(--cw-action); border-color: var(--cw-action); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: var(--cw-control-height); padding: var(--cw-space-2) var(--cw-space-4); border-radius: var(--cw-radius-control); }
.primary-action:hover { background: var(--cw-action-hover); }
.primary-action:active { background: var(--cw-action-pressed); }
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--cw-focus-width) solid var(--cw-focus-ring); outline-offset: var(--cw-focus-offset); }
[hidden] { display: none !important; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { font-weight: var(--cw-weight-medium); }
h1 { font-size: var(--cw-h1); line-height: var(--cw-line-h1); margin-bottom: var(--cw-space-2); }
h2 { font-size: var(--cw-h2); line-height: var(--cw-line-h2); margin-bottom: var(--cw-space-4); }
h3, h4 { font-size: var(--cw-h3); line-height: var(--cw-line-h3); margin-bottom: var(--cw-space-2); }
p:last-child { margin-bottom: 0; }
.muted, .eyebrow, .band-details, .legend, .meta, .quality { color: var(--cw-text-muted); }
.mono, .metric strong, .metric dd, .kpi strong, .band strong, .band-measurement, .report-date, code, td.numeric { font-family: var(--cw-font-mono); font-variant-numeric: tabular-nums; }
.eyebrow, .nav-label { font-size: var(--cw-text-small); margin-bottom: var(--cw-space-2); }
.app-layout { display: grid; grid-template-columns: var(--cw-sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--cw-surface-muted); color: var(--cw-text); border-right: 1px solid var(--cw-border-subtle); padding: var(--cw-space-6) var(--cw-space-4); display: flex; flex-direction: column; gap: var(--cw-space-8); }
.brand { display: block; color: var(--cw-text); font-size: var(--cw-h2); font-weight: 500; text-decoration: none; padding-inline: var(--cw-space-2); }
.brand span { display: block; font-size: var(--cw-text-small); color: var(--cw-text-muted); font-weight: normal; margin-top: var(--cw-space-1); }
.nav-label { padding-inline: var(--cw-space-2); color: var(--cw-text-muted); margin-top: var(--cw-space-6); }
.nav-label:first-child { margin-top: 0; }
.nav-link { display: flex; align-items: center; min-height: 40px; padding: var(--cw-space-2); margin-bottom: var(--cw-space-1); text-decoration: none; color: var(--cw-text); border-left: 3px solid transparent; }
.nav-link:hover { background: var(--cw-surface); }
.nav-link[aria-current="page"] { background: var(--cw-surface-raised); color: var(--cw-link); border-left-color: var(--cw-link); }
.sidebar-bottom { margin-top: auto; }
.sidebar-bottom button { width: 100%; background: transparent; text-align: left; }
.sidebar-bottom p { margin-top: var(--cw-space-4); font-size: var(--cw-text-small); }
.workspace { min-width: 0; }
.context-bar { min-height: 64px; padding: var(--cw-space-4) var(--cw-page-padding); border-bottom: 1px solid var(--cw-border-subtle); display: flex; justify-content: space-between; align-items: center; gap: var(--cw-space-4); color: var(--cw-text-muted); font-size: var(--cw-text-small); }
.page { padding: var(--cw-page-padding); max-width: 100rem; margin-inline: auto; overflow-wrap: anywhere; }
.page-header { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: var(--cw-space-4); margin-bottom: var(--cw-space-8); }
.page-header p { color: var(--cw-text-muted); margin-bottom: 0; font-size: var(--cw-text-reading); }
.card, .item { padding-block: var(--cw-space-6); border-top: 1px solid var(--cw-border-subtle); }
.card:first-child { padding-top: 0; border-top: 0; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--cw-space-8); margin-top: var(--cw-space-6); }
.hero .card { padding-top: var(--cw-space-6); border-top: 1px solid var(--cw-border-subtle); }
.hero > :last-child { border-left: 1px solid var(--cw-border-subtle); padding-left: var(--cw-space-6); }
.kpis, .summary, .grid, .development-grid, .signals, .map-grid { display: grid; gap: var(--cw-space-6); }
.kpis, .summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis { margin-top: var(--cw-space-6); }
.kpi, .metric { min-width: 0; padding-block: var(--cw-space-3); }
.kpi + .kpi, .summary .metric + .metric { border-left: 1px solid var(--cw-border-subtle); padding-left: var(--cw-space-4); }
.kpi strong, .metric strong, .metric dd { display: block; font-size: 1.375rem; font-weight: 400; margin: var(--cw-space-1) 0 0; }
.kpi strong small { font: var(--cw-text-small) var(--cw-font-sans); }
.situation-meta, .development-meta, .meta, .quality { display: flex; flex-wrap: wrap; gap: var(--cw-space-2) var(--cw-space-4); font-size: var(--cw-text-small); }
.situation-summary, .situation-list, .report-body, .development-item > p, .item > p, .report-content { font-size: var(--cw-text-reading); line-height: var(--cw-line-reading); }
.situation-summary { max-width: 68ch; margin-bottom: var(--cw-space-6); }
.situation-group + .situation-group { margin-top: var(--cw-space-4); }
.situation-list, .development-evidence { padding-left: var(--cw-space-5); }
.situation-method { margin-top: var(--cw-space-6); }
.development-grid, .signals, .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.development-item { padding: var(--cw-space-4) 0; }
.development-item + .development-item { border-left: 1px solid var(--cw-border-subtle); padding-left: var(--cw-space-6); }
.band-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--cw-space-4); }
.band { min-width: 0; border-top: 1px solid var(--cw-border-subtle); padding-block: var(--cw-space-4); }
.band strong { font-size: var(--cw-h2); font-weight: 400; }
.band-status { display: flex; gap: var(--cw-space-2); align-items: center; margin-block: var(--cw-space-2); }
.band-details { font-size: var(--cw-text-small); }
.band details { margin-top: var(--cw-space-2); }
.band summary { color: var(--cw-link); }
.band-measurement { margin-top: var(--cw-space-2); }
.dot { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.good, .color-good, .improving h3 { color: var(--cw-positive); }
.yellow, .color-yellow, .preliminary { color: var(--cw-warning); }
.red, .color-red, .error, .deteriorating h3 { color: var(--cw-negative); }
.gray, .color-gray { color: var(--cw-text-muted); }
.legend { font-size: var(--cw-text-small); margin-top: var(--cw-space-4); }
.legend span { display: inline-flex; gap: var(--cw-space-2); align-items: center; margin-right: var(--cw-space-4); }
.solar-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.solar-grid .metric { border-bottom: 1px solid var(--cw-border-subtle); }
.metric dt { color: var(--cw-text-muted); }
.metric .impact { font: var(--cw-text-ui)/var(--cw-line-ui) var(--cw-font-sans); color: var(--cw-text-muted); margin-top: var(--cw-space-2); }
.map-button { display: block; width: 100%; padding: var(--cw-space-2); cursor: zoom-in; }
.map { display: block; width: 100%; height: auto; min-height: 100px; }
.map-error { color: var(--cw-text-muted); padding-block: var(--cw-space-4); }
.report-item + .report-item { border-top: 1px solid var(--cw-border-subtle); }
.report-toggle { display: flex; align-items: baseline; gap: var(--cw-space-3); width: 100%; padding: var(--cw-space-4) 0; text-align: left; background: transparent; border: 0; }
.report-toggle::before { content: '▸'; }
.report-toggle[aria-expanded="true"]::before { content: '▾'; }
.report-toggle:hover { color: var(--cw-link); background: transparent; }
.report-date { color: var(--cw-text-muted); }
.report-content { padding-bottom: var(--cw-space-6); max-width: 85ch; }
.report-body { white-space: pre-wrap; }
dialog { color: var(--cw-text); background: var(--cw-surface-raised); border: 1px solid var(--cw-border-control); border-radius: var(--cw-radius-panel); padding: var(--cw-space-4); width: min(94vw, 1400px); max-height: 92vh; }
dialog::backdrop { background: var(--cw-surface-muted); opacity: .9; }
dialog img { display: block; max-width: 100%; max-height: 76vh; height: auto; margin: auto; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: var(--cw-space-4); margin-bottom: var(--cw-space-4); }
.dialog-header h2 { margin: 0; }
.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.chart-tooltip { position: absolute; z-index: 1; max-width: 100%; padding: var(--cw-space-3); color: var(--cw-text); background: var(--cw-surface-raised); border: 1px solid var(--cw-border-control); border-radius: var(--cw-radius-panel); font-family: var(--cw-font-mono); font-size: var(--cw-text-small); pointer-events: none; }
.chart-key { display: flex; flex-wrap: wrap; gap: var(--cw-space-4); margin-block: var(--cw-space-4); }
.chart-key span { display: flex; gap: var(--cw-space-2); align-items: center; }
.chart-key svg { width: 24px; height: 10px; }
.table-scroll { max-width: 100%; overflow-x: auto; margin-block: var(--cw-space-4); }
table { width: 100%; border-collapse: collapse; font-size: var(--cw-text-ui); }
caption { text-align: left; color: var(--cw-text-muted); padding-bottom: var(--cw-space-2); }
th, td { padding: var(--cw-space-3); text-align: left; border-bottom: 1px solid var(--cw-border-subtle); }
th { background: var(--cw-surface-muted); color: var(--cw-text); font-weight: 500; }
td.numeric, th.numeric { text-align: right; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--cw-space-4); margin-block: var(--cw-space-6); }
.pagination a { padding: var(--cw-space-2); }
form { display: flex; align-items: start; flex-wrap: wrap; gap: var(--cw-space-3); margin-block: var(--cw-space-4); }
form label { flex-basis: 100%; }
summary { padding-block: var(--cw-space-1); }
.page-footer { margin: 0 var(--cw-page-padding); padding-block: var(--cw-space-4); border-top: 1px solid var(--cw-border-subtle); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cw-space-3); font-size: var(--cw-text-small); color: var(--cw-text-muted); }
.skip-link { position: absolute; top: -100px; left: var(--cw-space-4); padding: var(--cw-space-3); background: var(--cw-surface-raised); z-index: 10; }
.skip-link:focus { top: var(--cw-space-4); }
@media (min-width: 1400px) { .band-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (max-width: 1199px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero > :last-child { border-left: 0; padding-left: 0; } }
@media (max-width: 1023px) {
    .app-layout { grid-template-columns: minmax(0, 1fr); }
    .sidebar { border-right: 0; border-bottom: 1px solid var(--cw-border-subtle); gap: var(--cw-space-4); }
    .sidebar nav { display: flex; flex-wrap: wrap; gap: var(--cw-space-1) var(--cw-space-2); }
    .nav-label { flex-basis: 100%; margin: var(--cw-space-2) 0 0; }
    .nav-link { margin: 0; }
    .sidebar-bottom { margin: 0; }
    .sidebar-bottom button { width: auto; }
    .sidebar-bottom p { display: none; }
}
@media (max-width: 639px) {
    .page { padding: var(--cw-page-padding-mobile); }
    .context-bar { padding-inline: var(--cw-page-padding-mobile); flex-wrap: wrap; }
    .context-bar > .mono { display: none; }
    .band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpis, .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi:nth-child(3), .summary .metric:nth-child(3) { padding-left: 0; border-left: 0; }
    .map-grid, .development-grid, .signals, .grid { grid-template-columns: minmax(0, 1fr); }
    .development-item + .development-item { border-left: 0; border-top: 1px solid var(--cw-border-subtle); padding-left: 0; }
    .report-toggle { flex-wrap: wrap; }
    .page-footer { margin-inline: var(--cw-page-padding-mobile); }
}
@media (pointer: coarse) {
    button, input, select, summary, .nav-link, .primary-action, .pagination a { min-height: var(--cw-touch-target); min-width: var(--cw-touch-target); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .dot { border: 2px solid CanvasText; } .nav-link[aria-current] { border-left-color: Highlight; } }
@media (min-width: 1024px) {
    .sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
}