/* ---------------------------------------------------------------------------
   Use-Case-Finder, Kurzfassung — Gestaltung

   Sitzt im selben Slot wie der Kostenrechner und erbt dessen Rhythmus: eine
   dunkle Fläche, links die Aussage, rechts die Bedienung. Der Slot ist der
   eine dunkle Bruch der Leistungsseite; die Kurzfassung übernimmt ihn, statt
   einen zweiten aufzumachen.

   Der Bauteil ist gedrängter gesetzt als der Rest der Seite — engere Abstände,
   kleinere Matrix, zwei Spalten bis 1000 px. Der Grund steht in PLAN.md §1ba:
   Er ersetzt den Kostenrechner, und der war 586 px hoch. Ganz einholen lässt
   sich das nicht, sechs Fragen brauchen ihren Platz; ohne das Zusammenrücken
   wäre der Unterschied fast doppelt so groß.

   Vier Entscheidungen, die auf Rückmeldungen zurückgehen (PLAN.md §1ba):

   · **Eine Akzentfarbe, nicht vier.** Die Folie aus dem Webinar färbt alle vier
     Felder (Mint, Amber, Blau, Rosé) — das ist mehr Farbe, als der ganze
     Auftritt besitzt. Hier trägt nur „Sofort anfangen" den Lime-Akzent und
     „Erst klären" den Warnton; die anderen beiden sind Flächenstufen. Die
     Aussage trägt die Lage des Punktes und sein Etikett.
   · **Keine gedrehten Achsenbeschriftungen.** Sie stehen als zwei waagerechte
     Zeilen unter der Grafik. Wer den Kopf schief legen muss, ist weg.
   · **Auf dem Telefon klebt das Ergebnis oben.** Die Live-Rückmeldung ist das
     Beste an dem Bauteil und stirbt sonst genau dort: Man klickt unten, und
     die Antwort steht außerhalb des Bildes.
   · **Die Optionspille `.uc-opt` steht ab hier hier** und nicht mehr in
     `uc.css`. Beide Fassungen brauchen sie, und die Leistungsseite kann nicht
     das vollständige Stylesheet der Langfassung mitladen. `/use-case-finder`
     lädt deshalb beide Dateien, diese zuerst.
--------------------------------------------------------------------------- */

.uck {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: var(--space-10);
  align-items: start;
  margin: var(--space-section) var(--gutter) 0;
  padding: 38px 40px 36px;
  border-radius: var(--radius-panel);
  background: var(--bg-dark);
  color: var(--nws-on-dark);
}
.uck > .uck-links, .uck > .uck-rechts { position: relative; z-index: 2; }
.uck .h2 { color: #fff; margin: var(--space-3) 0 0; }
.uck .lead { max-width: 46ch; }

/* --- Die Optionspille ----------------------------------------------------
   Steht hier und nicht in `uc.css`, weil beide Fassungen sie brauchen und die
   Leistungsseite nicht das vollständige Stylesheet der Langfassung mitlädt.
   Wer sie ändert, ändert beide Fassungen — das ist die Absicht. */

.uc-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--space-11);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-card-base);
  background: var(--surface-card);
  font-family: inherit; font-size: 13.5px; font-weight: var(--fw-medium);
  color: var(--text-heading); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.uc-opt:hover { border-color: var(--primary); }
.uc-opt:active { transform: translateY(1px); }
.uc-opt[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.uc-opt:disabled { opacity: .4; cursor: not-allowed; }
.uc-opt:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 2px; }

/* --- Matrix -------------------------------------------------------------- */

.uck-matrix-rahmen { margin: var(--space-6) 0 0; }
.uck-matrix {
  position: relative; height: 196px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}
.uck-feld {
  position: absolute; width: 50%; height: 50%;
  padding: 11px 13px;
  font-size: 11.5px; font-weight: var(--fw-bold);
  letter-spacing: .04em; line-height: 1.25;
  color: var(--nws-on-dark-muted);
}
.uck-f-vorbereiten { left: 0; top: 0; background: rgba(79,70,229,.24); color: #cfccff; }
.uck-f-sofort      { left: 50%; top: 0; background: rgba(198,242,78,.16); color: var(--accent); text-align: right; }
.uck-f-spaeter     { left: 0; top: 50%; background: rgba(255,255,255,.03); display: flex; align-items: flex-end; }
.uck-f-ueben       { left: 50%; top: 50%; background: rgba(255,255,255,.06); display: flex; align-items: flex-end; justify-content: flex-end; text-align: right; }

/* Die Sperrfläche beim Veto — siehe uc-kurz.js. Sichtbar nur dann. */
.uck-sperre {
  position: absolute; inset: 0; display: none;
  place-items: center; text-align: center;
  padding: 0 24px;
  background: rgba(20,21,43,.74);
  backdrop-filter: saturate(.25);
  font-size: 12px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: #f0b3a6;
}
.uck-matrix[data-q="klaeren"] .uck-sperre { display: grid; }
.uck-matrix[data-q="klaeren"] .uck-punkt { opacity: .35; }

.uck-achse { position: absolute; background: rgba(255,255,255,.18); }
.uck-achse-h { left: 0; right: 0; top: 50%; height: 1px; }
.uck-achse-v { top: 0; bottom: 0; left: 50%; width: 1px; }

.uck-punkt {
  position: absolute; width: 22px; height: 22px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.45);
  transform: translate(-50%, 50%);
  transition: left .45s var(--ease-out), bottom .45s var(--ease-out), background .3s var(--ease-out);
}
.uck-punkt[data-q="sofort"]  { background: var(--accent); box-shadow: 0 0 0 6px rgba(198,242,78,.22), 0 10px 26px rgba(0,0,0,.45); }
.uck-punkt[data-q="klaeren"] { background: #d4705f; box-shadow: 0 0 0 6px rgba(212,112,95,.26), 0 10px 26px rgba(0,0,0,.45); }

.uck-achsen {
  display: flex; justify-content: space-between; gap: var(--space-4);
  margin-top: 9px;
  font-size: 11.5px; color: var(--nws-on-dark-muted);
}
.uck-achsen b { color: var(--accent); font-weight: var(--fw-bold); }

/* --- Ergebnis ------------------------------------------------------------ */

.uck-ergebnis {
  margin-top: var(--space-4);
  padding: 15px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.uck-ergebnis[data-q="sofort"]  { border-color: rgba(198,242,78,.4); background: rgba(198,242,78,.09); }
.uck-ergebnis[data-q="klaeren"] { border-color: rgba(212,112,95,.45); background: rgba(212,112,95,.10); }
.uck-marke {
  display: block; margin-bottom: 5px;
  font-family: var(--font-display); font-variation-settings: "opsz" var(--opsz-display);
  font-size: 21px; font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display-serif); color: #fff;
}
.uck-ergebnis[data-q="sofort"] .uck-marke  { color: var(--accent); }
.uck-ergebnis[data-q="klaeren"] .uck-marke { color: #f0b3a6; }
.uck-ergebnis p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--nws-on-dark); }
.uck-schritt {
  margin-top: 10px !important; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.uck-zeit { margin-top: 9px !important; font-size: 11.5px !important; color: var(--nws-on-dark-muted) !important; }

.uck-grenze {
  margin: var(--space-4) 0 0;
  font-size: 13.5px; line-height: 1.55; color: var(--nws-on-dark);
  max-width: 52ch;
}
.uck-grenze strong { color: #fff; }

.uck-aktionen { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-top: var(--space-5); }
.uck-aktionen-note {
  flex: 1 1 210px; margin: 0;
  font-size: 11.5px; line-height: 1.45; color: var(--nws-on-dark-muted);
}

.uck-herkunft {
  margin: var(--space-4) 0 0;
  font-size: 11px; line-height: 1.5; color: var(--nws-on-dark-muted);
  max-width: 60ch;
}

/* --- Die Fragenkarte ----------------------------------------------------- */

.uck-karte {
  padding: 22px 22px 20px;
  border-radius: var(--radius-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-float);
}
.uck-beispiel {
  margin: 0 0 var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-hairline);
  font-size: 12px; line-height: 1.5; color: var(--text-label);
}
.uck-frage + .uck-frage { margin-top: var(--space-4); }
.uck-frage-titel {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: var(--fw-bold);
  letter-spacing: -.005em; color: var(--text-heading);
}
.uck-optionen { display: flex; flex-wrap: wrap; gap: 6px; }
.uck-opt { min-height: 34px; padding: 6px 12px; font-size: 12.5px; }

/* --- Schmale Fenster ------------------------------------------------------ */

@media (max-width: 1000px) {
  .uck { grid-template-columns: 1fr; gap: var(--space-8); padding: 34px 26px 32px; margin-left: var(--space-6); margin-right: var(--space-6); }

  /* Reihenfolge auf dem Telefon: Aussage · Fragen · Grafik. Die Grafik rutscht
     nach unten, weil das Ergebnis darüber klebt und die Rückmeldung trägt. */
  .uck-links { display: contents; }
  .uck-links > .label { order: 1; }
  .uck-links > .h2 { order: 2; }
  .uck-links > .lead { order: 3; }
  /* Das Ergebnis steht **vor** den Fragen und klebt dann oben. Stünde es
     darunter, klebte es erst, wenn man ohnehin schon daran vorbeigescrollt
     ist — und genau während der ersten Klicks wäre die Antwort außer Sicht. */
  .uck-ergebnis { order: 4; position: sticky; top: 66px; z-index: 3; backdrop-filter: blur(8px); background: rgba(20,21,43,.92); }
  .uck-rechts { order: 5; }
  .uck-ergebnis[data-q="sofort"] { background: rgba(37,44,20,.94); }
  .uck-ergebnis[data-q="klaeren"] { background: rgba(48,25,22,.94); }
  .uck-matrix-rahmen { order: 6; margin-top: var(--space-6); }
  .uck-herkunft { order: 9; }
  .uck-grenze { order: 7; }
  .uck-aktionen { order: 8; }
  .uck-herkunft { order: 9; }
  .uck { display: flex; flex-direction: column; }
  .uck-matrix { height: 210px; }
  .uck-feld { font-size: 10.5px; padding: 9px 10px; }
}

@media (max-width: 560px) {
  .uck { padding: 26px 18px 26px; margin-left: var(--space-4); margin-right: var(--space-4); }
  .uck-karte { padding: 20px 18px 18px; }
  .uck-aktionen .btn { width: 100%; }
  .uck-achsen { flex-direction: column; gap: 3px; }
}

@media print {
  .uck { break-inside: avoid; background: #fff; color: var(--text-body); border: 1px solid #ddd; }
  .uck .h2, .uck-marke { color: var(--text-heading); }
  .uck-aktionen { display: none; }
}