/* ---------------------------------------------------------------------------
   Produktseite OKR-Anwendung — nur von `wissen/okr-app.html` geladen.

   Additiv nach der Regel aus PLAN.md: keine Änderung an `site.css` oder
   `wissen.css`, alles hier trägt das Präfix `okr-`. Die Seite nutzt ansonsten
   dieselben Bausteine wie die übrigen Spur-B-Seiten (`w-*`, `card-*`, `faq`).

   Warum überhaupt eigene Farben: Das Farbsystem der Marke kennt Indigo, Lime
   und Night — aber kein Grün/Gelb/Rot. Eine Confidence-Ampel braucht genau
   das. Die drei Werte stammen aus dem Farbsystem der Anwendung selbst, damit
   Seite und Produkt dieselbe Ampel zeigen. Sie sind gedämpft gewählt, damit
   sie neben dem Lime nicht wie ein zweites Signal wirken.
--------------------------------------------------------------------------- */
:root {
  --okr-gruen: #1f9d6b;
  --okr-gelb:  #c98a1c;
  --okr-rot:   #d1473f;
}

/* Nur für Vorlesegeräte: die Ampel ist im Bild ein Farbpunkt, in der
   Vorlesereihenfolge muss sie ein Wort sein. Die geteilten Stylesheets
   kennen keine solche Hilfsklasse, deshalb steht sie hier. */
.okr-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Ampelpunkt ------------------------------------------------- */
.okr-punkt {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--nws-border-strong);
}
.okr-punkt.is-gruen { background: var(--okr-gruen); }
.okr-punkt.is-gelb  { background: var(--okr-gelb); }
.okr-punkt.is-rot   { background: var(--okr-rot); }

/* Die Ampel darf nicht allein über Farbe sprechen (Rot-Grün-Sehschwäche,
   Schwarzweißdruck). Deshalb steht neben jedem Punkt im Markup ein Text —
   und die Legende unter der Grafik benennt die drei Stufen ausdrücklich. */
.okr-legende {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  margin: var(--space-5) 0 0;
  font-size: 12.5px; color: var(--text-label);
}
.okr-legende span { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- Produkt-Attrappe (Browserrahmen) --------------------------- */
.okr-mock {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: 0 18px 44px rgba(20, 21, 43, .10);
}
.okr-mock-leiste {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--nws-white);
}
.okr-mock-leiste i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--nws-border-strong);
}
.okr-mock-pfad {
  margin-left: 8px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--text-label);
}

/* Kopfzeile: dunkel, damit der Gesamtfortschritt der Anker im Bild ist. */
.okr-mock-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10);
  padding: var(--space-8) var(--space-8);
  background: var(--nws-night);
}
.okr-kopf-block { display: flex; align-items: center; gap: var(--space-5); }
.okr-kopf-label {
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
}
.okr-kopf-zahl { font-size: 26px; font-weight: var(--fw-bold); color: #fff; line-height: 1.15; }
.okr-kopf-gross { font-size: 40px; font-weight: var(--fw-display); color: var(--accent); line-height: 1; }
.okr-kopf-note { font-size: 12.5px; color: var(--nws-on-dark-muted); }

.okr-ring { flex: 0 0 auto; transform: rotate(-90deg); }

.okr-konfidenz {
  display: flex; width: 190px; height: 9px;
  margin-top: 10px; border-radius: 999px; overflow: hidden;
}
.okr-konfidenz i { display: block; height: 100%; }

/* Zwei Objective-Karten nebeneinander — der Blick, um den es geht:
   zahlt das Key Result auf das Objective ein? */
.okr-mock-raster { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-card); }
.okr-mock-raster > div { padding: var(--space-6); }
.okr-mock-raster > div + div { border-left: 1px solid var(--border-hairline); }

.okr-obj-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.okr-obj-team {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: .09em; text-transform: uppercase; color: var(--primary);
}
.okr-obj-titel { margin: 5px 0 0; font-size: 16.5px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-heading); color: var(--text-heading); }

.okr-kr { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; color: var(--text-body); }
.okr-kr-titel { flex: 1; min-width: 0; }
.okr-kr-wert { font-family: var(--font-mono); font-size: 12px; color: var(--text-label); white-space: nowrap; }
.okr-kr-wert.is-erreicht { color: var(--okr-gruen); font-weight: var(--fw-bold); }

/* ---------- Detail-Attrappen: Check-in, Fokus, Smartphone -------------- */
.okr-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, .9fr);
  gap: var(--space-5);
  align-items: stretch;
}
.okr-panel {
  display: flex; flex-direction: column;
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
}
.okr-panel-kopf {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: .09em; text-transform: uppercase; color: var(--primary);
}
.okr-panel h3 { margin: var(--space-2) 0 var(--space-5); font-size: 17px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-heading); color: var(--text-heading); }
.okr-panel-note { margin: var(--space-5) 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-label); }

.okr-feldlabel {
  display: block; margin-bottom: 8px;
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-label);
}
.okr-wertfeld {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 84px; padding: 9px 14px;
  font-size: 19px; font-weight: var(--fw-bold); color: var(--text-heading);
  border: 1px solid var(--primary); border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px var(--surface-tint);
}
.okr-fortschritt {
  margin: var(--space-5) 0;
  padding: 12px 14px;
  background: var(--bg-app);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
}
.okr-fortschritt-zeile { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.okr-balken { height: 6px; border-radius: 999px; background: var(--nws-border-strong); overflow: hidden; }
.okr-balken i { display: block; height: 100%; background: var(--primary); }

.okr-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.okr-wahl span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; font-size: 13px; color: var(--text-body);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
}
.okr-wahl span.is-gewaehlt { border-color: var(--nws-ink); color: var(--text-heading); background: var(--bg-app); font-weight: var(--fw-semibold); }

.okr-liste { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.okr-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; font-size: 13.5px; color: var(--text-body);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
}
.okr-zeile span:nth-child(2) { flex: 1; min-width: 0; }
.okr-faellig {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--surface-tint); color: var(--primary);
}
.okr-zeit { font-family: var(--font-mono); font-size: 11px; color: var(--text-label); }

/* Smartphone-Attrappe: belegt die Aussage „voller Umfang auch mobil". */
.okr-phone-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6); min-width: 0; overflow: hidden;
  background: var(--bg-app);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
}
.okr-phone {
  position: relative; width: 232px;
  padding: 10px; background: var(--nws-night);
  border-radius: 34px; box-shadow: 0 16px 34px rgba(20, 21, 43, .18);
}
.okr-phone::before {
  content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 17px; background: var(--nws-night); border-radius: 0 0 11px 11px; z-index: 2;
}
.okr-phone-schirm { padding: 22px 13px 15px; background: var(--nws-white); border-radius: 25px; }
.okr-phone-zyklus {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary);
}
.okr-phone-kachel {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0 14px; padding: 14px;
  background: var(--nws-night); border-radius: 10px;
}
.okr-phone .okr-zeile { padding: 8px 10px; font-size: 12px; }
.okr-phone .okr-zeile .okr-kr-wert { font-size: 11px; }

/* ---------- Vergleich Produkt / individuelles System -------------------- */
.okr-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

/* ---------- Schmale Fenster -------------------------------------------- */
@media (max-width: 980px) {
  .okr-panels { grid-template-columns: 1fr 1fr; }
  .okr-phone-wrap { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .okr-mock-raster { grid-template-columns: 1fr; }
  .okr-mock-raster > div + div { border-left: 0; border-top: 1px solid var(--border-hairline); }
  .okr-mock-kopf { gap: var(--space-6); padding: var(--space-6); }
  .okr-panels { grid-template-columns: 1fr; }
  .okr-vergleich { grid-template-columns: 1fr; }
  .okr-konfidenz { width: 100%; }
}