/* Charts on /statistik. Hand-drawn SVG, no chart library. Class colours are fixed per entity across every chart on the page: A blue, E orange, N aqua. Validated for CVD separation on both surfaces. */ .st-root { --st-a: #3987e5; --st-e: #d95926; --st-n: #199e70; --st-teil: #9085e9; --st-zeug: #c98500; --st-einzel: #6aa6ff; --st-grid: color-mix(in srgb, var(--border) 70%, transparent); --st-achse: var(--muted); --st-flaeche: var(--bg2); } /* Light steps follow the system setting unless the theme switch in the top bar says otherwise; data-theme on wins in both directions. */ @media (prefers-color-scheme: light) { :root:where(:not([data-theme="dark"])) .st-root { --st-a: #2a78d6; --st-e: #eb6834; --st-n: #1baf7a; --st-teil: #4a3aa7; --st-zeug: #eda100; --st-einzel: #2f6fed; } } :root[data-theme="light"] .st-root { --st-a: #2a78d6; --st-e: #eb6834; --st-n: #1baf7a; --st-teil: #4a3aa7; --st-zeug: #eda100; --st-einzel: #2f6fed; } .st-abschnitt { margin-top: 2.6rem; } .st-abschnitt > h2 { margin-bottom: 0.3rem; } .st-abschnitt > p.st-einleitung { margin-top: 0; color: color-mix(in srgb, var(--fg) 82%, var(--muted)); } .st-raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); } .st-raster.klein { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); } .st-karte { margin: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); padding: 1rem 1.1rem 0.8rem; min-width: 0; } .st-karte h3 { margin: 0; font-size: 1.05rem; } .st-karte .st-unter { margin: 0.15rem 0 0.6rem; font-size: 0.85rem; color: var(--muted); } .st-flaeche { position: relative; width: 100%; } .st-flaeche svg { display: block; width: 100%; height: auto; overflow: visible; } .st-legende { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0.2rem 0 0.4rem; font-size: 0.85rem; color: var(--muted); list-style: none; padding: 0; } .st-legende li { display: inline-flex; align-items: center; gap: 0.4rem; } .st-legende i { width: 0.75rem; height: 0.75rem; border-radius: 3px; display: inline-block; } .st-legende i.linie { height: 3px; border-radius: 2px; width: 1rem; } .st-karte details { margin-top: 0.4rem; font-size: 0.88rem; } .st-karte summary { cursor: pointer; color: var(--muted); } .st-karte details .table-scroll { margin: 0.5rem 0 0; max-height: 26rem; overflow: auto; } .st-karte table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; } .st-karte th, .st-karte td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; } .st-karte th:first-child, .st-karte td:first-child { text-align: left; } .st-karte thead th { position: sticky; top: 0; background: var(--bg2); color: var(--muted); font-weight: 600; } /* SVG parts */ .st-gitter { stroke: var(--st-grid); stroke-width: 1; shape-rendering: crispEdges; } .st-null { stroke: var(--st-achse); stroke-width: 1; shape-rendering: crispEdges; } .st-achsentext { fill: var(--st-achse); font-size: 12px; font-variant-numeric: tabular-nums; } .st-wert { fill: var(--fg); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .st-linie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .st-punkt { stroke: var(--st-flaeche); stroke-width: 2; } .st-fadenkreuz { stroke: var(--st-achse); stroke-width: 1; opacity: 0.6; } .st-treffer { fill: transparent; } .st-balken:hover, .st-balken.aktiv { filter: brightness(1.15); } .st-luecke { fill: var(--muted); opacity: 0.08; } .st-tipp { position: absolute; z-index: 5; pointer-events: none; min-width: 9rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 0.45rem 0.6rem; font-size: 0.82rem; line-height: 1.4; font-variant-numeric: tabular-nums; } .st-tipp b { display: block; margin-bottom: 0.15rem; } .st-tipp .zeile { display: flex; align-items: center; gap: 0.45rem; } .st-tipp .zeile i { width: 0.6rem; height: 0.6rem; border-radius: 2px; flex: none; } .st-tipp .zeile span:last-child { margin-left: auto; padding-left: 0.8rem; font-weight: 600; } .st-tipp .hinweis { color: var(--muted); margin-top: 0.2rem; } /* Six tiles: two per row on phones instead of one tall column. */ .st-root .kennzahlen { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); } @media (max-width: 30rem) { .st-root .kennzahlen { grid-template-columns: 1fr 1fr; gap: 0.5rem; } .st-root .kennzahl { padding: 0.6rem 0.7rem; } .st-root .kennzahl-wert { font-size: 1.45rem; } } .kennzahl-zusatz { display: block; margin-top: 0.25rem; font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; } .kennzahl .st-marke { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: 0.1rem; } /* Location x year table on the exam dates part: shaded cells, values stay text. */ .st-heat { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 0.88rem; } .st-heat th, .st-heat td { padding: 0.35rem 0.5rem; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; } .st-heat th:first-child { text-align: left; } .st-heat thead th { color: var(--muted); font-weight: 600; } .st-heat .duenn { opacity: 0.55; }