/* Profilseite FCP-001 - technisches Datenblatt.
 *
 * Nachbau des Design-Handoffs "Entwurf D, Datenblatt". Alle Werte stammen
 * aus dessen README und sind dort verbindlich; bitte nicht "glaetten".
 *
 * KEINE MEDIA QUERIES
 * Jedes Raster passt sich ueber auto-fit plus prozentuales oder clamp()-
 * Minimum selbst an. Vier Fallstricke aus dem README stecken in den Werten:
 *   1. Raster mit fester Elementzahl haben ein PROZENTUALES Minimum
 *      (max(33.333%, ...)), damit nur Teiler der Elementzahl als
 *      Spaltenzahl moeglich sind - sonst 5 Spalten bei 6 Kennzahlen.
 *   2. In Tabellen traegt keine Inhaltsspalte 1fr. Der Restplatz liegt in
 *      einer eigenen minmax(0, 1fr)-Spur am Zeilenende.
 *   3. Die Balkenspur in REG 03 ist clamp(56px, 14vw, 148px), nicht fest.
 *   4. Kopf- und Datenzeile einer Tabelle nutzen DIESELBE Klasse fuer das
 *      Raster, der Kopf fuellt die Endspuren mit leeren Zellen.
 *
 * Eine Abweichung vom Prototyp, mit Absicht: Er verwendet an sieben Stellen
 * #7C848C, das in der Farbtabelle des README nicht vorkommt. Hier steht dort
 * das gedaempfte #9BA3AB aus dem README.
 */

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #0A0B0C; }
* { box-sizing: border-box; border-radius: 0; }
a { color: #FF5714; text-decoration: none; }
a:hover { color: #D7DADE; text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; text-align: left; }
::selection { background: #FF5714; color: #0A0B0C; }

.seite {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: #D7DADE;
  background: #0A0B0C;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}

.rahmen { max-width: 1320px; margin: 0 auto; padding: 0 clamp(10px, 2vw, 20px); }

/* ---------- 1. Statusleiste ---------- */

.status { position: sticky; top: 0; z-index: 30; background: #0A0B0C; border-bottom: 1px solid #22262A; }
.status-innen { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.status-links { display: flex; align-items: center; gap: 12px; padding: 9px 0; min-width: 0; }
.fcp-link { display: flex; align-items: center; gap: 12px; color: #D7DADE; }
.fcp-link:hover { color: #FF5714; text-decoration: none; }
.quadrat { width: 7px; height: 7px; background: #FF5714; flex: none; }
.fcp { font-size: 11.5px; letter-spacing: .14em; white-space: nowrap; }
.datensatz { font-size: 11.5px; letter-spacing: .1em; color: #9BA3AB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sprachen { display: flex; align-items: stretch; }
.sprache {
  cursor: pointer; background: transparent; color: #9BA3AB;
  border: 0; border-left: 1px solid #22262A;
  padding: 0 14px; font-size: 11.5px; letter-spacing: .14em;
}
.sprache:hover { color: #FF5714; }
.sprache[aria-pressed="true"],
.sprache[aria-pressed="true"]:hover { background: #FF5714; color: #0A0B0C; }

/* ---------- 2. Kopfsektion ---------- */

.kopf { border-bottom: 1px solid #22262A; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.kopf-links { padding: clamp(26px, 4vw, 54px) clamp(14px, 2vw, 28px) clamp(26px, 4vw, 46px) 0; }
.marke { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; color: #FF5714; }
.marke-strich { width: 18px; height: 1px; background: #FF5714; }
.titel {
  font-family: 'IBM Plex Sans Condensed', sans-serif; font-weight: 700;
  font-size: clamp(34px, 6vw, 68px); line-height: 1; letter-spacing: -.01em;
  text-transform: uppercase; margin: 20px 0 0; max-width: 15ch; text-wrap: balance;
}
.kopf-text { margin: 22px 0 0; font-size: 14.5px; line-height: 1.65; color: #9BA3AB; max-width: 56ch; text-wrap: pretty; }

/* flex: 1 auf den Zeilen ist zwingend - sonst sammelt sich die Resthoehe
   der gestreckten Rasterzeile als Leerflaeche unter der letzten Zeile. */
.schriftfeld { border-left: 1px solid #22262A; display: flex; flex-direction: column; }
.sf-zeile {
  flex: 1; min-height: 47px; border-bottom: 1px solid #16191C;
  padding: 13px clamp(14px, 2vw, 22px);
  display: grid; grid-template-columns: minmax(88px, 120px) 1fr; gap: 14px; align-content: center;
}
.sf-k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #9BA3AB; }
.sf-v { font-size: 13.5px; color: #D7DADE; text-wrap: pretty; }

/* ---------- Gemeinsames ---------- */

.sektion { border-bottom: 1px solid #22262A; }
.regmarke { font-size: 10.5px; letter-spacing: .18em; color: #FF5714; }
.etikett { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #9BA3AB; }
.spkopf { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #9BA3AB; }
.rechts { text-align: right; }
.zeichen { font-size: 13px; color: #FF5714; text-align: right; }
.baum { font-size: 12px; color: #5F676E; }
.detail-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: #9BA3AB; max-width: 66ch; text-wrap: pretty; }

.reg-kopf {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px; align-items: baseline; padding: clamp(24px, 3vw, 40px) 0 16px;
}
.reg-titelzeile { display: flex; align-items: baseline; gap: 14px; }
.reg-titel {
  margin: 0; font-family: 'IBM Plex Sans Condensed', sans-serif; font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px); text-transform: uppercase; letter-spacing: .01em;
  line-height: 1.1; text-wrap: balance;
}
.reg-titel.schmal { max-width: 26ch; }
.reg-lead { margin: 0; font-size: 13px; color: #9BA3AB; text-wrap: pretty; }

/* Aufklappbare Zeilen: Hover faerbt nur Text ohne eigene Farbe. */
.zeile { border-bottom: 1px solid #16191C; }
.zeile.offen { background: #0F1113; }
.zeile-knopf { cursor: pointer; width: 100%; background: transparent; border: 0; color: #D7DADE; }
.zeile-knopf:hover { color: #FF5714; }

/* ---------- 3. Kennzahlen ---------- */

.mes-kopf { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid #16191C; }
.mes-label { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #9BA3AB; }
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(33.333%, 150px), 1fr)); }
.zahl-zelle { border-right: 1px solid #16191C; border-bottom: 1px solid #16191C; padding: 18px clamp(12px, 1.6vw, 18px) 16px; }
.zahl {
  font-family: 'IBM Plex Sans Condensed', sans-serif; font-weight: 700;
  font-size: clamp(30px, 3.6vw, 42px); line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.zahl-label { font-size: 11.5px; line-height: 1.45; color: #9BA3AB; margin-top: 10px; text-wrap: pretty; }

/* ---------- 4. Primaerzitat ---------- */

.zitat-sektion { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.zitat {
  margin: 0;
  padding: clamp(22px, 3vw, 40px) clamp(16px, 2.4vw, 32px) clamp(22px, 3vw, 40px) clamp(16px, 2vw, 26px);
  border-left: 2px solid #FF5714;
  font-size: clamp(16px, 1.8vw, 21px); line-height: 1.5; color: #E7EAEE; text-wrap: pretty;
}
.quelle {
  border-left: 1px solid #22262A;
  padding: clamp(22px, 3vw, 40px) 0 clamp(22px, 3vw, 40px) clamp(16px, 2.4vw, 30px);
  display: flex; flex-direction: column; gap: 14px; justify-content: center;
}
.quelle-text { font-size: 13px; color: #9BA3AB; text-wrap: pretty; }
.folge { margin: 0; font-size: 13px; line-height: 1.6; color: #9BA3AB; max-width: 46ch; text-wrap: pretty; }

/* ---------- 5. REG 01 Verfahren ---------- */

.schritt { border-top: 1px solid #16191C; }
.schritt.offen { background: #0F1113; }
.schritt-knopf { padding: 13px 0; display: grid; grid-template-columns: 52px 1fr 28px; gap: 12px; align-items: baseline; }
.schritt-nr { font-size: 11.5px; color: #FF5714; letter-spacing: .08em; }
.schritt-titel { font-size: 15px; font-weight: 500; line-height: 1.35; text-wrap: pretty; }
.schritt-detail { display: none; grid-template-columns: 52px 1fr; gap: 12px; padding: 0 0 18px; }
.offen > .schritt-detail { display: grid; }
.schritt-inhalt { display: flex; flex-direction: column; gap: 10px; }
.schritt-text { margin: 0; font-size: 14px; line-height: 1.62; color: #9BA3AB; max-width: 62ch; text-wrap: pretty; }
.schritt-beleg { margin: 0; font-size: 12.5px; line-height: 1.65; color: #FF7A45; max-width: 70ch; text-wrap: pretty; }

/* ---------- 6. REG 02 Fuehrung der Maschine ---------- */

.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(33.333%, 300px), 1fr)); border-top: 1px solid #16191C; }
.karte {
  cursor: pointer; background: transparent; border: 0;
  border-right: 1px solid #16191C; border-bottom: 1px solid #16191C;
  color: #D7DADE; padding: 18px clamp(14px, 1.8vw, 20px);
  display: flex; flex-direction: column; gap: 12px;
}
.karte[aria-expanded="true"] { background: #0F1113; }
.karte:hover { background: #101315; }
.karte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.karte-nr { font-size: 10.5px; letter-spacing: .16em; color: #FF5714; }
.karte-titel { display: block; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.35; text-wrap: pretty; }
.karte-zitat { display: block; margin: 0; padding-left: 12px; border-left: 2px solid #FF5714; font-size: 14px; line-height: 1.5; color: #E7EAEE; text-wrap: pretty; }
.karte-detail { display: none; flex-direction: column; gap: 8px; }
.karte[aria-expanded="true"] .karte-detail { display: flex; }
.karte-text { display: block; margin: 0; font-size: 13.5px; line-height: 1.6; color: #9BA3AB; text-wrap: pretty; }
.karte-gloss { display: block; margin: 0; font-size: 12.5px; line-height: 1.55; color: #9BA3AB; text-wrap: pretty; }

/* ---------- 7. REG 03 Koennen ---------- */

.koennen-raster { display: grid; grid-template-columns: minmax(0, 300px) clamp(56px, 14vw, 148px) 58px 26px minmax(0, 1fr); gap: 12px; }
.koennen-kopf { padding: 9px 0; border-top: 1px solid #22262A; border-bottom: 1px solid #16191C; }
.koennen-knopf { padding: 12px 0; align-items: center; }
.koennen-titel { font-size: 14.5px; font-weight: 500; text-align: left; text-wrap: pretty; }
.balken { display: flex; gap: 3px; }
.messzelle { flex: 1; height: 12px; background: transparent; border: 1px solid #2B3036; }
.messzelle.voll { background: #FF5714; border-color: #FF5714; }
.stufe { font-size: 12.5px; color: #9BA3AB; text-align: right; font-variant-numeric: tabular-nums; }
.koennen-detail { display: none; padding: 0 0 14px; }
.offen > .koennen-detail { display: block; }
.grad { margin: 0; padding: 18px 0 clamp(24px, 3vw, 36px); font-size: 13.5px; line-height: 1.65; color: #9BA3AB; max-width: 80ch; text-wrap: pretty; }
.grad-label { color: #FF5714; }

/* ---------- 8. REG 04 Werk ---------- */

.filterleiste { display: flex; flex-wrap: wrap; border-top: 1px solid #22262A; border-left: 1px solid #16191C; }
.filter {
  cursor: pointer; background: transparent; color: #9BA3AB;
  border: 0; border-right: 1px solid #16191C; border-bottom: 1px solid #16191C;
  padding: 9px 14px; font-size: 12px; letter-spacing: .06em;
  display: flex; align-items: baseline; gap: 8px;
}
.filter:hover { color: #FF5714; }
.filter-zahl { font-size: 10.5px; color: #8A9299; font-variant-numeric: tabular-nums; }
.filter[aria-pressed="true"],
.filter[aria-pressed="true"]:hover { background: #FF5714; color: #0A0B0C; }
.filter[aria-pressed="true"] .filter-zahl { color: #0A0B0C; }

.werk-raster { display: grid; grid-template-columns: 38px minmax(0, 200px) minmax(0, 120px) 74px 22px minmax(0, 1fr); gap: 10px; }
.werk-kopf { padding: 10px 0 8px; border-bottom: 1px solid #22262A; }
.sortierkopf {
  cursor: pointer; background: transparent; border: 0; padding: 0; color: #9BA3AB;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  display: flex; gap: 5px; justify-content: flex-start;
}
.sortierkopf.rechts { justify-content: flex-end; }
.sortierkopf:hover,
.sortierkopf.aktiv { color: #FF5714; }
.pfeil { color: #FF5714; }
.werk-knopf { padding: 11px 0; align-items: baseline; }
.werk-nr { font-size: 11.5px; color: #8A9299; font-variant-numeric: tabular-nums; }
.werk-name { font-size: 15px; font-weight: 500; text-align: left; text-wrap: pretty; }
.werk-art { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #9BA3AB; text-align: left; }
.werk-status { font-size: 11.5px; color: #9BA3AB; text-align: right; letter-spacing: .04em; }
.werk-status.ok { color: #FF5714; }
.werk-detail { display: none; grid-template-columns: 52px 1fr; gap: 12px; padding: 0 0 14px; }
.offen > .werk-detail { display: grid; }

/* ---------- 9. REG 05 Entscheidungsgrundlage ---------- */

.leistungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(50%, 270px), 1fr)); border-top: 1px solid #22262A; border-left: 1px solid #16191C; }
.leistung {
  border-right: 1px solid #16191C; border-bottom: 1px solid #16191C;
  padding: 20px clamp(14px, 1.8vw, 20px);
  display: flex; flex-direction: column; gap: 12px;
}
.leistung-nr { font-size: 10.5px; letter-spacing: .16em; color: #FF5714; }
.leistung-titel { margin: 0; font-family: 'IBM Plex Sans Condensed', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.22; text-wrap: pretty; }
.leistung-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: #9BA3AB; text-wrap: pretty; }
.nachweis { margin-top: auto; padding-top: 14px; border-top: 1px solid #16191C; }
.nachweis .spkopf { display: block; }
.nachweis-text { margin: 7px 0 0; font-size: 12.5px; line-height: 1.6; color: #9BA3AB; text-wrap: pretty; }

/* ---------- 10. Fusszeile ---------- */

.fuss { padding: clamp(26px, 4vw, 48px) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.fuss-label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #FF5714; }
.fuss-text { margin: 12px 0 0; font-size: 12.5px; line-height: 1.7; color: #9BA3AB; max-width: 64ch; text-wrap: pretty; }
.fuss-rechte { font-size: 12px; color: #8A9299; align-self: end; }