/* Schriften liegen auf christopher-helm.com, keine Fremdanfragen. */
@font-face { font-family: "Source Serif 4"; font-weight: 200 900; font-style: normal; font-display: swap; src: url(/wp-content/themes/helm/fonts/source-serif-4-opsz-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(/wp-content/themes/helm/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(/wp-content/themes/helm/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(/wp-content/themes/helm/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { max-width: 100%; }
/* Layout: Kopf wie christopher-helm.com; Suchzeile, Katalog der Fälle in Gruppen, darunter Ergebnis und Randspalte. Nur hell, wie die Seite. */
:root {
  --text: #111111;
  --leise: #555555;
  --linie: #e3e3e3;
  --grund: #ffffff;
  --flaeche: #f5f6f8;
  --r: #0b4f8a;        /* Rubrikfarbe Recherche */
  --r-hell: #e3ecf5;
  --warn: #8a3b12;     /* Rubrikfarbe Kommentar: noch nicht verfügbar */
  --warn-hell: #f6e9e1;
  --balken: #b9cbe0;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --breite: 1120px;
  color-scheme: light;
}
body { background: var(--grund); color: var(--text); font-family: var(--serif); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--text); }
a:hover { color: var(--r); }
:focus-visible { outline: 2px solid var(--r); outline-offset: 2px; }
.innen { max-width: var(--breite); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.kicker { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.sr:focus { position: fixed; left: 16px; top: 12px; z-index: 100; width: auto; height: auto; clip: auto; margin: 0; padding: 8px 14px; background: var(--text); color: #fff; font: 600 14px var(--sans); text-decoration: none; } /* Sprunglink wie im Theme */

/* Kopf wie im Blog (Theme helm: .seitenkopf.gross.unter, .hauptnav mit Rubrikfarben und Suchfeld, aufgelöste Werte vom 28.10.2026). */
.seitenkopf { border-bottom: 1px solid var(--text); font-size: 19px; line-height: 1.65; } /* Grundschrift des Blogs, Nav und Suchfeld erben die Zeilenhöhe */
.seitenkopf .innen { padding-top: 18px; }
.kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.marke-rahmen { margin: 0; font: inherit; }
.seitenkopf .marke { font-size: 26px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.1; text-decoration: none; }
.kopfzeile .von { font-family: var(--sans); font-size: 14px; color: var(--leise); }
.kopfzeile .von a { color: var(--leise); }
.hauptnav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 14px; padding: 12px 0 16px; border-top: 1px solid var(--linie); }
.hauptnav > ul { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; font-family: var(--sans); font-size: 14px; font-weight: 500; }
.hauptnav a { text-decoration: none; padding-bottom: 3px; }
.hauptnav .rubrik a { --r: #0b4f8a; padding-bottom: 4px; border-bottom: 2px solid color-mix(in srgb, var(--r) 30%, transparent); }
.hauptnav .rubrik a:hover { border-bottom-color: var(--r); color: var(--text); }
.hauptnav .r-kommentar a { --r: #8a3b12; }
.hauptnav .r-am-rand-gelesen a { --r: #4a6b5e; }
.hauptnav .rubrik + .kein-ressort { margin-left: auto; }
.blogsuche input { width: 150px; padding: 4px 0 4px 22px; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 0 50%; font-family: var(--sans); font-size: 14px; color: var(--text); outline: 0; -webkit-appearance: none; appearance: none; transition: width .2s; }
.blogsuche input:focus { width: 220px; border-bottom-color: var(--text); }
@media (max-width: 700px) {
  .seitenkopf { font-size: 18px; }
  .seitenkopf .marke { font-size: 20px; letter-spacing: -.01em; }
  .kopfzeile { gap: 4px; }
  .kopfzeile .von { font-size: 13px; }
  .hauptnav { margin-top: 12px; padding: 10px 0 12px; gap: 10px; }
  .hauptnav > ul { flex: 1 1 100%; min-width: 0; column-gap: 16px; row-gap: 5px; padding-bottom: 6px; margin-bottom: -4px; }
  .hauptnav > ul::before { content: ""; order: 1; flex-basis: 100%; height: 0; }
  .hauptnav .kein-ressort, .hauptnav .rubrik + .kein-ressort { order: 2; margin-left: 0; }
  .hauptnav li { white-space: nowrap; }
  .blogsuche { flex: 1 1 100%; }
  .blogsuche input, .blogsuche input:focus { width: 100%; font-size: 16px; }
}
/* Titelband wie im Blog (.balken.ohne-bild, Rubrik Recherche): Brotkrumen, Titel, Vorspann weiß auf Blau. */
.titelband { background: var(--r); color: #fff; }
.titelband .innen { padding-top: 40px; padding-bottom: 36px; }
.titelband .text { max-width: 640px; }
.titelband h1 { margin: 0 0 16px; font-family: var(--sans); font-weight: 600; font-size: 40px; line-height: 1.12; letter-spacing: -.022em; text-wrap: balance; overflow-wrap: anywhere; }
.titelband .vorspann { margin: 0; font-size: 20px; line-height: 1.5; color: #fff; opacity: .92; text-wrap: pretty; overflow-wrap: anywhere; }
.pfad { margin: 0 0 14px; letter-spacing: .08em; }
.pfad ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.pfad li + li::before { content: "›"; margin: 0 8px; opacity: .6; }
.titelband a { color: #fff; text-decoration: none; }
.titelband a:hover { color: #fff; text-decoration: underline; }
.titelband :focus-visible { outline-color: #fff; }
@media (max-width: 700px) {
  .titelband .innen { padding-top: 32px; padding-bottom: 32px; }
  .titelband h1 { font-size: 30px; letter-spacing: -.018em; }
  .titelband .vorspann { font-size: 18px; }
}
.vorab { margin-top: 8px; }
.kennzahlen { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; padding: 10px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); font-family: var(--sans); font-size: 14px; color: var(--leise); font-variant-numeric: tabular-nums; }
.kennzahlen b { color: var(--text); font-weight: 600; }

.suche { margin-top: 32px; }
.suchzeile { display: flex; border: 2px solid var(--text); background: var(--grund); }
.suchzeile:focus-within { border-color: var(--r); }
.suchzeile input { flex: 1; min-width: 0; min-height: 48px; border: 0; outline: 0; padding: 12px 16px; font-family: var(--mono); font-size: 17px; background: transparent; color: var(--text); }
.suchzeile button { border: 0; background: var(--text); color: var(--grund); font-family: var(--sans); font-size: 15px; font-weight: 600; padding: 0 22px; min-height: 48px; cursor: pointer; }
.suchzeile button:hover, .suchzeile button:focus-visible { background: var(--r); }
.hilfe { margin: 8px 0 0; font-family: var(--sans); font-size: 14px; color: var(--leise); }

.gruppe h2 { margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--text); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; display: flex; justify-content: space-between; gap: 12px; }
.gruppe h2 span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--leise); }
.raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; margin-top: 44px; }
@media (max-width: 860px) { .raster { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.tabelle { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 15px; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--leise); border-bottom: 1px solid var(--text); padding: 6px 12px 6px 0; white-space: nowrap; }
td { border-bottom: 1px solid var(--linie); padding: 8px 12px 8px 0; vertical-align: top; }
td.dom { font-family: var(--mono); font-size: 14px; white-space: nowrap; }
td.zahl, th.zahl { text-align: right; }

.balken { display: grid; grid-template-columns: minmax(96px, 190px) minmax(0, 1fr) 64px; gap: 7px 12px; align-items: center; font-family: var(--sans); font-size: 14px; font-variant-numeric: tabular-nums; }
.balken .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balken .bahn { height: 14px; background: var(--flaeche); position: relative; }
.balken .fuell { position: absolute; inset: 0 auto 0 0; background: var(--r); }
.balken .rest .fuell { background: var(--balken); }
.balken .wert { text-align: right; color: var(--text); }
.fuss { margin-top: 14px; font-family: var(--sans); font-size: 14px; color: var(--leise); max-width: 640px; }

.profil { border-top: 1px solid var(--text); }
.profil dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); margin: 0; font-family: var(--sans); font-size: 15px; }
.profil dt, .profil dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.profil dt { color: var(--leise); font-size: 14px; }
.profil dd { overflow-wrap: anywhere; }
@media (max-width: 480px) { .profil dl { grid-template-columns: 1fr; } .profil dt { border-bottom: 0; padding-bottom: 0; } }

.zahlenreihe { display: flex; flex-wrap: wrap; gap: 24px 48px; margin: 8px 0 18px; }
.gross-zahl { font-size: 52px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.zahlenreihe .u { font-family: var(--sans); font-size: 14px; color: var(--leise); margin-top: 6px; max-width: 24ch; }

.hinweis { margin: 20px 0 0; padding-left: 14px; border-left: 3px solid var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.6; color: #333; max-width: 640px; }

details.technik { margin-top: 20px; font-family: var(--sans); font-size: 14px; border-top: 1px solid var(--linie); }
details.technik summary { cursor: pointer; padding: 10px 0; min-height: 24px; color: var(--leise); }
details.technik summary:hover { color: var(--r); }
details.technik dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); margin: 0 0 8px; gap: 4px 12px; }
details.technik dt { color: var(--leise); }
details.technik dd { margin: 0; font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }

.rand h3 { margin: 0 0 8px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--text); }
.rand section + section { margin-top: 32px; }
.rand ul { margin: 0; padding: 0; list-style: none; font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.rand li { padding: 7px 0; border-bottom: 1px solid var(--linie); }
.rand li b { font-weight: 600; }
.rand p { margin: 0; font-family: var(--sans); font-size: 14px; color: #333; }


.datensatz { margin-top: 64px; border-top: 4px solid var(--text); padding-top: 12px; position: relative; }
.datensatz h2 { margin: 8px 0 20px; font-size: 28px; line-height: 1.2; text-wrap: balance; }
.ds-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
@media (max-width: 860px) { .ds-raster { grid-template-columns: minmax(0, 1fr); } }
.ds { margin: 0; min-width: 0; }
.ds figcaption { font-family: var(--sans); margin-bottom: 10px; }
.ds figcaption b { display: block; font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.ds figcaption span { display: block; font-size: 14px; color: var(--leise); margin-top: 2px; }
.ds svg { display: block; width: 100%; height: auto; overflow: visible; }
.ds svg text { font-family: var(--sans); font-size: 12px; fill: var(--leise); font-variant-numeric: tabular-nums; }
.ds svg .gitter { stroke: var(--linie); stroke-width: 1; }
.ds svg .achse { stroke: var(--text); stroke-width: 1; }
.ds svg .linie { fill: none; stroke: var(--r); stroke-width: 2; }
.ds svg .flaeche { fill: var(--r-hell); }
.ds svg .punkt { fill: var(--r); stroke: var(--grund); stroke-width: 2; }
.ds svg .saeule { fill: var(--r); }
.ds svg .marke { fill: var(--text); font-weight: 600; font-size: 13px; }
.ds.breit { grid-column: 1 / -1; }
.ds-karte { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.ds-karte svg { max-width: 560px; max-height: 760px; }
.ds-rang { font-family: var(--sans); font-size: 14px; font-weight: 600; margin-bottom: 10px; }
@media (max-width: 860px) { .ds-karte { grid-template-columns: minmax(0, 1fr); gap: 24px; } .ds-karte svg { margin: 0 auto; } }
.ds svg .land { fill: var(--flaeche); stroke: #b5bcc6; stroke-width: 1; }
.ds svg .kreis { fill: var(--r); fill-opacity: .38; stroke: var(--r); stroke-opacity: .75; stroke-width: .7; }
.ds svg .kreis:hover { fill-opacity: .8; }
.ds svg .kreis.aus { fill: var(--leise); fill-opacity: .18; stroke: var(--leise); stroke-dasharray: 3 2; }
.ds svg .leg { fill: none; stroke: var(--leise); stroke-width: .8; }
.ds svg .sp { fill-opacity: .82; stroke: var(--text); stroke-opacity: .55; stroke-width: .7; }
.ds svg .sp:hover { stroke: var(--text); stroke-width: 1.5; }
/* Rostrot (schwach) über Orange nach Blau (gut), ohne Weiß in der Mitte; Blau wie die erste Karte, Rost wie die Rubrik Kommentar */
.ds svg .s0 { fill: #7a2e0e; } .ds svg .s1 { fill: #b5501f; } .ds svg .s2 { fill: #e39a4a; } .ds svg .s3 { fill: #5d8fc2; } .ds svg .s4 { fill: #0b4f8a; }
.ds svg .m0 { fill: #e3dcef; } .ds svg .m1 { fill: #c0b0dc; } .ds svg .m2 { fill: #9a83c6; } .ds svg .m3 { fill: #7357ad; } .ds svg .m4 { fill: #4b2f8a; }
.ds svg .mk { fill-opacity: .55; stroke-width: .8; } .ds svg .mk:hover { fill-opacity: .9; }
.ds svg .mk0 { fill: #b5501f; stroke: #b5501f; } .ds svg .mk1 { fill: #a2367a; stroke: #a2367a; } .ds svg .mk2 { fill: #1f7f8a; stroke: #1f7f8a; }
.ds svg .mkt { font-size: 40px; font-weight: 600; fill: var(--text); } .ds svg .mku { font-size: 30px; }
.ds svg .ort { fill: var(--text); font-size: 13px; font-weight: 600; paint-order: stroke; stroke: var(--grund); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.ds svg .ort.aus { fill: var(--leise); font-weight: 400; font-size: 11px; }
.ds-fuss {margin: 8px 0 0; font-family: var(--sans); font-size: 13px; color: var(--leise); }
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-content: start; border-top: 1px solid var(--text); padding-top: 16px; }
.kacheln .gross-zahl { font-size: 40px; }
.kacheln .u { font-family: var(--sans); font-size: 14px; color: var(--leise); margin-top: 6px; }

.seitenfuss { border-top: 1px solid var(--linie); font-family: var(--sans); font-size: 14px; color: var(--leise); }
.seitenfuss .innen { padding-block: 20px; display: flex; flex-wrap: wrap; gap: 8px 28px; }

@media (max-width: 480px) { .balken { grid-template-columns: 96px minmax(0, 1fr) 54px; font-size: 13px; } .gross-zahl { font-size: 40px; } details.technik dl { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .balken .fuell { transition: width .4s ease-out; } }
.themen { margin-top: 40px; display: grid; gap: 36px; }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 28px; }
.karte { display: block; text-decoration: none; border-bottom: 1px solid var(--linie); padding: 14px 0 16px; }
.karte:hover .k-titel { color: var(--r); }
.k-titel { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; }
.k-zahl { display: block; margin-top: 5px; font-family: var(--sans); font-size: 14px; color: var(--leise); line-height: 1.45; }
.k-zahl b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.firmen { margin-top: 48px; background: var(--r-hell); padding: 24px 24px 26px; border-top: 4px solid var(--r); }
.firmen .kicker { color: var(--r); }
.firmen h2 { margin: 6px 0 8px; font-size: 28px; line-height: 1.2; text-wrap: balance; }
.firmen p { margin: 0; max-width: 680px; }
.firmen ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: var(--sans); font-size: 15px; }
.firmen li::before { content: '→ '; color: var(--r); }
.band { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px 40px; }
.rand.band section + section { margin-top: 0; }
.inhalt { border-top: 4px solid var(--text); padding-top: 16px; min-width: 0; }
.rand .suche { margin-top: 0; }
.rand .suchzeile input { font-size: 15px; min-height: 44px; padding: 8px 12px; }
.rand .suchzeile button { min-height: 44px; padding: 0 14px; }
.rand a.lk { text-decoration: none; }
.rand a.lk:hover { text-decoration: underline; }
.balken a { text-decoration: none; font-family: var(--mono); font-size: 13px; }
.balken a:hover { text-decoration: underline; color: var(--r); }
.ds svg .saeule:hover, .ds svg g:hover .saeule { fill: #083b68; }
.ds details.technik { margin-top: 12px; }
.ds details.technik table { margin-top: 6px; }
.hilfe[role="status"]:empty { display: none; }
.suchzeile button { font-size: 15px; }
.nichtgefunden { margin: 16px 0 0; }
.rand .hilfe { margin-top: 6px; }
@media (max-width: 480px) { .firmen { padding: 18px 16px 20px; } .balken .nm { font-size: 12px; } }
.auch { display: block; font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--leise); white-space: normal; overflow-wrap: anywhere; }
p.auch { margin: 6px 0 0; }
.balken a + .auch { margin-top: 1px; }