/* Charakter halle: Space Grotesk / IBM Plex Sans, IBM Plex Mono für Kennzahlen. Raster mit Linien,
   Kennzahlen-Block, Zertifikate, Ansprechpartner je Bereich, Referenzen mit Zahlen. Keine Radien. */
:root{
  --schrift-ueberschrift:'Space Grotesk',system-ui,"Helvetica Neue",Arial,sans-serif;
  --schrift-text:'IBM Plex Sans',system-ui,"Helvetica Neue",Arial,sans-serif;
  --schrift-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gewicht-ueberschrift:600;
  --laufweite-ueberschrift:-.02em;
  --radius:0;
  --linie-staerke:1px;
  --zeile:1.55;
  --breite:76rem;
  --mass:40rem;
}
h1{max-width:22ch;line-height:1.02}
.wortmarke{font-size:1.5rem;letter-spacing:-.03em}
.vorzeile{font-family:var(--schrift-mono);font-weight:500;letter-spacing:.08em;color:var(--zweit-lesbar)}
.mono{font-family:var(--schrift-mono)}

.kopf{border-bottom:2px solid var(--tinte)}
.kopf nav a{font-family:var(--schrift-mono);font-size:.875rem;letter-spacing:.03em;text-transform:uppercase}
.kopf nav a[aria-current]{border-bottom-color:var(--zweit)}

.knopf{font-family:var(--schrift-mono);text-transform:uppercase;letter-spacing:.06em;font-size:.9375rem;font-weight:600}
.knopf-still{border-color:var(--tinte)}
.knopf-still:hover{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}

/* Kennzahlen-Block: Raster mit Linien, Zahlen in Mono */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:0;padding:0;border:1px solid var(--tinte);margin-top:var(--raum-4)}
.zahlen li{padding:var(--raum-3) var(--raum-2);border-right:1px solid var(--tinte);border-bottom:1px solid var(--tinte);margin-bottom:-1px;min-width:0;overflow:hidden}
.zahlen b{font-family:var(--schrift-mono);font-weight:500;font-size:clamp(1.375rem,1rem + 1.2vw,2.125rem);color:var(--tinte);letter-spacing:-.03em;white-space:nowrap}
.zahlen span{font-family:var(--schrift-mono);color:var(--zweit-lesbar);font-size:.8125rem}

.abschnitt + .abschnitt{border-top:2px solid var(--tinte)}
.abschnitt > h2::before{content:"— ";color:var(--zweit)}

/* Leistungen: Raster mit Mono-Index */
.leistungen{border-top:2px solid var(--tinte);counter-reset:leistung}
.leistungen li{counter-increment:leistung;grid-template-columns:4rem minmax(0,18rem) minmax(0,1fr)}
.leistungen li::before{content:counter(leistung,decimal-leading-zero);font-family:var(--schrift-mono);color:var(--zweit-lesbar);font-size:1rem;padding-top:.25rem}
.leistungen-ausfuehrlich li{grid-template-columns:4rem minmax(0,1fr)}
.leistungen-ausfuehrlich h3,.leistungen-ausfuehrlich li > div{grid-column:2}
@media (max-width:40rem){.leistungen li{grid-template-columns:3rem minmax(0,1fr)}.leistungen li p{grid-column:2}}

/* Zertifikate */
.zertifikate{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1px;background:var(--tinte);border:1px solid var(--tinte)}
.zertifikate li{background:var(--papier);padding:var(--raum-3)}
.zertifikate b{display:block;font-family:var(--schrift-ueberschrift);font-size:1.125rem;font-weight:600}
.zertifikate span{display:block;font-family:var(--schrift-mono);font-size:.8125rem;color:var(--grau);margin-top:.4rem}

/* Ansprechpartner je Bereich */
.bereiche{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--raum-3) var(--raum-4)}
.bereiche li{border-top:2px solid var(--tinte);padding-top:var(--raum-2)}
.bereiche .bereich{font-family:var(--schrift-mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--zweit-lesbar)}
.bereiche h3{font-size:1.125rem;margin-top:.35rem}
.bereiche .rolle{color:var(--grau);font-size:var(--groesse-klein)}
.bereiche a{font-family:var(--schrift-mono);font-size:.875rem;color:var(--tinte)}

/* Referenzen mit Kennzahl */
.referenzen li{border-top:1px solid var(--tinte);padding-top:var(--raum-2)}
.referenzen .kennzahl{font-family:var(--schrift-mono);font-size:2rem;font-weight:500;color:var(--akzent-lesbar);display:block;line-height:1.1;margin-bottom:var(--raum-2)}
.referenzen .kennzahl small{display:block;font-size:.8125rem;color:var(--grau);font-weight:400;margin-top:.2rem}
.referenzen .ort{font-family:var(--schrift-mono)}

.frage h3{font-weight:600}
.zeiten th,.zeiten td{font-family:var(--schrift-mono);font-size:.9375rem}
.person .rolle{font-family:var(--schrift-mono);font-size:.875rem}
.figur img{border:1px solid var(--tinte)}
.fuss{border-top:2px solid var(--tinte)}
.aktualisiert{font-family:var(--schrift-mono);font-size:.8125rem}