/* AKworkz Plattform (Insights, Wissen, Lab, Tools, AI Business Radar, Projekte)
   ---------------------------------------------------------------------------
   Baut auf dem bestehenden Designsystem auf (assets/index-CMV1JVEO.css) und
   verwendet ausschliesslich dessen Tokens: --gold, --gold-bright, --paper,
   --ink, --serif, --sans. Keine neuen Farben, keine neue Typografie.
   Hier stehen nur Bausteine, die es im Bestand noch nicht gibt.
   Breakpoints wie im Bestand: 980 / 900 / 760 / 700 / 620 px. */

html, body { overflow-x: hidden; }
#page { border-top: none; }

/* --- Kopfbereich, identisch zu /prozessautomatisierung/ --- */
.crumb { letter-spacing: .2em; font-size: 10px; color: #f2ede366; text-transform: uppercase; margin-bottom: 22px; }
.crumb a { color: #c9a96acc; text-decoration: none; }
.crumb a:hover { color: var(--gold-bright); }
.crumb span { opacity: .5; margin: 0 8px; }
.page-head { max-width: 860px; margin-bottom: 50px; }
.page-head h1 {
  font-family: var(--serif); letter-spacing: .09em; color: var(--paper);
  font-size: clamp(27px,3.5vw,42px); font-weight: 400; line-height: 1.22; margin-top: 4px;
  overflow-wrap: break-word;
}
.page-head .lead { color: #f2ede3ad; margin-top: 18px; font-size: 14px; line-height: 1.95; }
.page-head .lead strong { color: var(--gold-bright); font-weight: 500; }
.sec-head h2 { overflow-wrap: break-word; }
.sec-head.wide { max-width: 860px; }
.sec-head p a, .pf-text a, .ref-row a, .pf-karte a { color: var(--gold-bright); }

/* --- Ehrlicher Leerzustand: sagt, was da ist und was noch nicht --- */
.pf-hinweis {
  max-width: 860px; border: 1px dashed #c9a96a59; background: #0c0c1066;
  padding: 22px 26px; color: #f2ede3a6; font-size: 13px; line-height: 1.9;
}
.pf-hinweis strong { color: var(--gold-bright); font-weight: 500; }

/* --- Kartenraster fuer Kategorien, Tools, Beitraege --- */
.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.pf-grid.zwei { grid-template-columns: repeat(2, minmax(0,1fr)); }
.pf-karte {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid #c9a96a3d; background: #0c0c1099; padding: 24px 24px 26px;
  text-decoration: none; transition: border-color .2s;
}
a.pf-karte:hover, a.pf-karte:focus-visible { border-color: var(--gold); }
.pf-karte .pf-tag {
  letter-spacing: .2em; text-transform: uppercase; font-size: 9px; color: var(--gold);
  font-family: SF Mono, Menlo, monospace;
}
.pf-karte h3 {
  font-family: var(--serif); font-weight: 400; color: var(--paper);
  font-size: 17px; line-height: 1.35; margin: 0; letter-spacing: .03em;
}
.pf-karte p { margin: 0; color: #f2ede38c; font-size: 12.5px; line-height: 1.85; }
.pf-karte .pf-meta {
  margin-top: auto; padding-top: 12px; font-family: SF Mono, Menlo, monospace;
  letter-spacing: .12em; text-transform: uppercase; font-size: 9px; color: #c9a96a99;
}
.pf-karte.ist-geplant { border-style: dashed; opacity: .78; }

/* --- Themenliste (Topic Engine, sichtbar als Fahrplan) --- */
.pf-liste { border-top: 1px solid #c9a96a4d; max-width: 980px; }
.pf-zeile {
  border-bottom: 1px solid #c9a96a2e; display: grid;
  grid-template-columns: 62px 1fr auto; align-items: center; gap: 18px; padding: 15px 4px;
}
.pf-zeile .pf-nr { font-family: SF Mono, Menlo, monospace; font-size: 10px; letter-spacing: .1em; color: #c9a96a99; }
.pf-zeile .pf-titel { color: #f2ede3cc; font-size: 13px; line-height: 1.6; }
.pf-zeile .pf-status {
  font-family: SF Mono, Menlo, monospace; letter-spacing: .2em; text-transform: uppercase;
  font-size: 9px; color: var(--gold); white-space: nowrap;
}

/* --- Datentabelle (AI Business Radar) --- */
.pf-tabelle-rahmen { overflow-x: auto; max-width: 100%; }
.pf-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 720px; }
.pf-tabelle th, .pf-tabelle td { border-bottom: 1px solid #c9a96a2e; padding: 11px 12px; text-align: left; }
.pf-tabelle th {
  font-family: SF Mono, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase;
  font-size: 9px; color: var(--gold); border-bottom-color: #c9a96a59; white-space: nowrap;
}
.pf-tabelle td { color: #f2ede3a6; }
.pf-tabelle td.leer { color: #f2ede347; font-style: italic; }
.pf-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.pf-filter select, .pf-filter input {
  background: #0c0c10; border: 1px solid #c9a96a4d; color: var(--paper);
  padding: 9px 12px; font-family: var(--sans); font-size: 12px;
}
.pf-stand {
  margin-top: 14px; font-family: SF Mono, Menlo, monospace; letter-spacing: .14em;
  text-transform: uppercase; font-size: 9px; color: #f2ede359;
}

/* --- Fliesstext der Artikelseiten --- */
.pf-text { max-width: 74ch; color: #f2ede3a6; font-size: 14px; line-height: 1.95; }
.pf-text h2 { font-family: var(--serif); font-weight: 400; color: var(--paper); font-size: 22px; margin: 44px 0 14px; letter-spacing: .04em; }
.pf-text h3 { font-family: var(--serif); font-weight: 400; color: var(--paper); font-size: 17px; margin: 32px 0 10px; }
.pf-text p { margin: 0 0 16px; }
.pf-text ul, .pf-text ol { margin: 0 0 18px; padding-left: 20px; }
.pf-text li { margin-bottom: 8px; }
.pf-text strong { color: var(--gold-bright); font-weight: 500; }
.pf-quellen { max-width: 860px; margin-top: 46px; border-top: 1px solid #c9a96a4d; padding-top: 22px; }
.pf-quellen li { color: #f2ede38c; font-size: 12px; line-height: 1.85; margin-bottom: 9px; }

/* --- Bestandsluecken, die auch die anderen Unterseiten betreffen --- */
@media (width<=980px) { .topnav a:not(.nav-cta) { display: none; } }
#footer .ft-links { flex-wrap: wrap; row-gap: 12px; }
a:focus-visible, summary:focus-visible, button:focus-visible, select:focus-visible {
  outline: 1px solid var(--gold-bright); outline-offset: 3px;
}

@media (width<=900px) { .pf-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (width<=620px) {
  .pf-grid, .pf-grid.zwei { grid-template-columns: 1fr; }
  .pf-zeile { grid-template-columns: 1fr; gap: 5px; }
  .pf-zeile .pf-status { justify-self: start; }
}