/* cf-wettbewerb.css — Bereich "Wettbewerbsanalyse" (2026-08-07).
 *
 * DER AUFTRAG: „das ginde ich geil und sollten wir nochmal unter wettbewerbsanalsyse stellen
 * so das die KI eine guideline hat was woillen wir alles mind. wissen" — Vorbild sind
 * competitors.html und competitor-detail.html aus dem MaxxiPower-Bestand. Dazu: „wenn etwas
 * geschätzt ist oder gemessen oder bewiesen dann müssen wir das kennzeichen".
 *
 * WAS DIESE FLAECHE ANDERS MACHT ALS DAS VORBILD: das Vorbild zeigt, was BEKANNT ist. Eine
 * Akte, die nur das Bekannte zeigt, sieht immer vollstaendig aus — die Luecke ist unsichtbar,
 * weil sie nirgends steht. Hier fuehrt der Wissenskatalog Regie: er sagt VORHER, was ueber
 * eine Entitaet mindestens bekannt sein muss, und die Akte misst sich daran. Ein leeres Feld
 * ist deshalb kein Leerraum, sondern ein ausgewiesener offener Punkt mit Beschaffungsweg.
 *
 * GESTALTUNG: keine eigene Formsprache. Sektionskopf, Raster und Kachel kommen aus cf-intel.css
 * (.ig-sec/.ig-grid/.ig-tile), Farben ausschliesslich aus den Theme-Variablen — beide Themes
 * tragen ohne Sonderfall. Neu sind nur die Bauteile, die es im Bestand nicht gibt: der
 * Deckungsbalken, die Katalogzeile, der Aktenkopf und die Kennzahlwand.
 *
 * ABSTANDS-SKALA (Regelwerk R14): das Projekt hat keine Abstands-Token — der Bestand streut
 * Pixelwerte, und cf-intel.css traegt denselben Befund. Statt ihn fortzuschreiben, definiert
 * dieses Stylesheet seine eigene Skala am Kopf und benutzt AUSSCHLIESSLICH sie. Die Werte sind
 * die des Higgsfield-Abstandsvertrags (56/22/18/24), damit die Flaeche neben den Bestands-
 * Sektionen nicht verrutscht. Wer spaeter eine Hausskala einfuehrt, ersetzt hier sieben Zeilen.
 *
 * SCHRIFTGROESSEN: Untergrenze 0.875rem fuer Hilfstext (R4). Die 0.62rem des Bestands-Etiketts
 * sind Bestand und werden hier nicht fortgeschrieben — diese Datei ist bei R4 befundfrei. */

.wa-scope,
.wa-leg, .wa-deck, .wa-kat, .wa-kopf, .wa-kpi, .wa-skel, .wa-leer, .wa-fehl, .wa-zeile {
  --wa-1: 4px;    /* Feinabstand innerhalb einer Zeile */
  --wa-2: 8px;    /* Abstand zwischen zusammengehoerigen Teilen */
  --wa-3: 12px;   /* Abstand zwischen Zeilen einer Gruppe */
  --wa-4: 18px;   /* Kachel-Gap des Higgsfield-Vertrags */
  --wa-5: 24px;   /* Kachel-Padding des Higgsfield-Vertrags */
  --wa-6: 32px;   /* Gruppenabstand */
  --wa-r-s: 7px;  /* kleiner Radius */
  --wa-r-m: 14px; /* Kachel-Radius */
  --wa-r-p: 20px; /* Pillenform */
  --wa-ziel: 44px;/* Mindestmass einer Bedienflaeche (R28b) */
}

/* ---------- Rang-Legende: die vier Stufen, einmal erklaert ----------
   Farbe allein traegt die Aussage nicht (R28d) — jede Stufe hat Wort UND Form: Quadrat,
   Quadrat, Kreis, gestrichelter Umriss. In Graustufen bleibt der Unterschied lesbar. */
.wa-leg{display:flex;flex-wrap:wrap;gap:var(--wa-3);margin-top:var(--wa-4)}
.wa-leg-e{display:inline-flex;align-items:center;gap:var(--wa-2);padding:var(--wa-2) var(--wa-3);
  border-radius:var(--wa-r-s);background:var(--surface-2);border:1px solid var(--line);min-height:40px}
.wa-leg-f{width:var(--wa-3);height:var(--wa-3);border-radius:3px;flex:none}
.wa-leg-f.r-belegt{background:var(--good)}
.wa-leg-f.r-gemessen{background:var(--info)}
.wa-leg-f.r-annahme{background:var(--warn);border-radius:50%}
.wa-leg-f.r-offen{background:transparent;border:2px dashed var(--ink-faint)}
.wa-leg-t{font-size:.875rem;font-weight:700;color:var(--ink)}
.wa-leg-d{font-size:.875rem;color:var(--ink-soft)}

/* ---------- Deckungsbalken ----------
   Die einzige Zahl, die eine Akte ehrlich zusammenfasst: wie viel des Pflichtwissens auf
   welcher Stufe steht. Der offene Anteil bleibt bewusst UNGEFUELLT — eine Farbe fuer "offen"
   wuerde das Fehlende wie einen weiteren Befund aussehen lassen. */
.wa-deck{margin-top:var(--wa-3)}
.wa-deck-bar{display:flex;height:var(--wa-3);border-radius:var(--wa-r-s);overflow:hidden;
  background:var(--surface-3);border:1px solid var(--line)}
.wa-deck-seg{height:100%;min-width:0}
.wa-deck-seg.r-belegt{background:var(--good)}
.wa-deck-seg.r-gemessen{background:var(--info)}
.wa-deck-seg.r-annahme{background:var(--warn)}
.wa-deck-seg.r-offen{background:transparent}
.wa-deck-txt{display:flex;flex-wrap:wrap;gap:var(--wa-3);margin-top:var(--wa-2);
  font-size:.875rem;color:var(--ink-soft)}
.wa-deck-txt b{color:var(--ink);font-weight:800}

/* ---------- Katalogzeile: ein Pflichtfeld des Wissenskatalogs ----------
   Frage, Begruendung, Beschaffungsweg und die HOECHSTE erreichbare Stufe. Der letzte Wert ist
   der wichtigste: er sagt vorab, ob dieses Feld je "belegt" werden kann oder ob es bestenfalls
   eine Schaetzung bleibt. Ohne ihn verspricht der Katalog eine Sicherheit, die es nicht gibt. */
.wa-kat{display:grid;gap:var(--wa-3);margin-top:var(--wa-4)}
.wa-feld{display:grid;grid-template-columns:1fr auto;gap:var(--wa-3) var(--wa-4);align-items:start;
  padding:var(--wa-4) var(--wa-5);border:1px solid var(--line);border-radius:var(--wa-r-m);
  background:var(--surface-2)}
.wa-feld:hover{border-color:var(--line-strong)}
.wa-feld-h{font-size:1rem;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin:0;text-wrap:balance}
.wa-feld-w{font-size:.875rem;color:var(--ink-soft);line-height:1.5;margin-top:var(--wa-1);
  max-width:64ch;text-wrap:pretty}
/* --ink-faint (#737373) erreicht auf --surface-2 (#F0F0F0) nur 4.16:1 und faellt damit unter
   den Boden von 4.5:1 (R5). Gemessen am gerenderten Stand, nicht geschaetzt — aus der Quelle
   ist es nicht ablesbar, weil beide Werte aus Theme-Variablen entstehen. Die Abstufung zur
   Begruendungszeile darueber traegt jetzt die STRUKTUR (fettes Etikett "Beschaffung:"), nicht
   ein zu heller Grauton: eine Rangfolge, die man nur sieht, wenn man sie lesen kann, ist keine. */
.wa-feld-q{font-size:.875rem;color:var(--ink-soft);margin-top:var(--wa-2);text-wrap:pretty}
.wa-feld-q b{color:var(--ink);font-weight:700}
.wa-feld-r{display:inline-flex;align-items:center;gap:var(--wa-1);padding:var(--wa-1) var(--wa-3);
  border-radius:var(--wa-r-p);font-size:.875rem;font-weight:700;white-space:nowrap;flex:none;min-height:32px}
.wa-feld-r.r-belegt{background:var(--good-bg);color:var(--good)}
.wa-feld-r.r-gemessen{background:var(--info-bg);color:var(--info)}
.wa-feld-r.r-annahme{background:var(--warn-bg);color:var(--warn)}
/* Unter 640 px stapeln statt quetschen (R7): die Stufe rutscht unter die Frage, sie schrumpft nicht. */
@media(min-width:641px){.wa-feld{grid-template-columns:1fr auto}}
@media(max-width:640px){.wa-feld{grid-template-columns:1fr}}

/* ---------- Aktenkopf ---------- */
.wa-kopf{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--wa-4);padding:var(--wa-5);
  border:1px solid var(--line);border-radius:var(--wa-r-m);background:var(--surface-2);margin-top:var(--wa-4)}
.wa-kopf-l{flex:1 1 18rem;min-width:0}
.wa-kopf h3{font-family:var(--disp);font-size:1.35rem;font-weight:900;letter-spacing:-.02em;
  margin:var(--wa-2) 0 0;text-wrap:balance}
.wa-kopf-u{font-size:.875rem;color:var(--ink-soft);margin-top:var(--wa-1);overflow-wrap:anywhere}
.wa-kopf-r{display:flex;flex-wrap:wrap;gap:var(--wa-2);flex:none}

/* ---------- Kennzahlwand: das Scan-Ergebnis als Zahlen ----------
   Ein Feldsatz je Kachel, fuer alle gleich belegt (R77): Wert, Beschriftung, Herkunft. Fehlt
   ein Wert, steht dort ausdruecklich "nicht ermittelt" — nie ein Leerraum. */
.wa-kpi{display:grid;gap:var(--wa-3);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  margin-top:var(--wa-4)}
.wa-kpi-k{padding:var(--wa-5);border:1px solid var(--line);border-radius:var(--wa-r-m);
  background:var(--surface-2);min-width:0}
.wa-kpi-v{font-family:var(--disp);font-size:1.5rem;font-weight:900;letter-spacing:-.02em;
  color:var(--ink);line-height:1.2;overflow-wrap:anywhere}
.wa-kpi-l{font-size:.875rem;color:var(--ink-soft);margin-top:var(--wa-2);text-wrap:pretty}
/* Dieselbe Kontrast-Untergrenze wie bei .wa-feld-q — die Herkunftszeile ist die Zeile, die den
   Wert daneben ueberhaupt erst einordnet. Sie zu blass zu setzen entwertet die Kennzeichnung. */
.wa-kpi-h{font-size:.875rem;color:var(--ink-soft);margin-top:var(--wa-1)}

/* ---------- Zustaende: laden, leer, Fehler (R16) ----------
   Der Ladeplatzhalter hat die HOEHE der fertigen Kachel — sonst springt die Seite genau in dem
   Moment, in dem gelesen wird. Kein Kreisel (R48). */
.wa-skel{border:1px solid var(--line);border-radius:var(--wa-r-m);background:var(--surface-2);
  padding:var(--wa-5);min-height:118px}
.wa-skel-z{height:var(--wa-3);border-radius:var(--wa-r-s);background:var(--surface-3);margin-bottom:var(--wa-2)}
.wa-skel-z:nth-child(1){width:52%;height:var(--wa-5)}
.wa-skel-z:nth-child(2){width:78%}
.wa-skel-z:nth-child(3){width:40%;margin-bottom:0}
@media(prefers-reduced-motion:no-preference){
  .wa-skel-z{animation:wa-puls 1.4s ease-in-out infinite}
  @keyframes wa-puls{0%,100%{opacity:.55}50%{opacity:.9}}}

.wa-leer{padding:var(--wa-6) var(--wa-5);border:1px dashed var(--line-strong);
  border-radius:var(--wa-r-m);background:var(--surface-2);margin-top:var(--wa-4)}
.wa-leer h4{font-size:1.02rem;font-weight:800;margin:0 0 var(--wa-2);text-wrap:balance}
.wa-leer p{font-size:.875rem;color:var(--ink-soft);line-height:1.55;margin:0 0 var(--wa-3);
  max-width:60ch;text-wrap:pretty}

/* Der Ausfall eines Dienstes MUSS sichtbar bleiben. Ein leeres Ergebnis sieht sonst aus wie ein
   sauberer Befund — das ist der Unterschied zwischen "nichts gefunden" und "nicht gemessen". */
.wa-fehl{padding:var(--wa-4) var(--wa-5);border:1px solid var(--bad);border-radius:var(--wa-r-m);
  background:var(--bad-bg);margin-top:var(--wa-3)}
.wa-fehl b{display:block;font-size:1rem;color:var(--ink);margin-bottom:var(--wa-1)}
.wa-fehl p{font-size:.875rem;color:var(--ink-soft);line-height:1.55;margin:0;text-wrap:pretty}
.wa-fehl code{font-family:ui-monospace,monospace;font-size:.875rem;color:var(--ink);overflow-wrap:anywhere}

/* ---------- Entitaets-Kennzeichen ---------- */
.wa-ent-art{display:inline-flex;align-items:center;gap:var(--wa-1);padding:var(--wa-1) var(--wa-3);
  border-radius:var(--wa-r-p);font-size:.875rem;font-weight:700;background:var(--surface-3);
  color:var(--ink-soft);white-space:nowrap}
.wa-ent-art.a-wettbewerber{background:var(--warn-bg);color:var(--warn)}
.wa-ent-art.a-kunde{background:var(--good-bg);color:var(--good)}
.wa-ent-art.a-lieferant{background:var(--info-bg);color:var(--info)}

/* Eingabezeile: bei 360 px stapeln statt quetschen (R7), Schaltflaeche einzeilig (R12),
   Bedienflaeche mindestens 44 px (R28b). */
.wa-zeile{display:flex;flex-wrap:wrap;gap:var(--wa-2);margin-top:var(--wa-4)}
.wa-zeile .wa-in{flex:1 1 16rem;min-width:0;min-height:var(--wa-ziel)}
.wa-zeile .btn{white-space:nowrap;min-height:var(--wa-ziel)}