/* ============================================================
   LOKALE KI — ANWENDUNGSFALL-SEITEN (llm-fall-seite.php)
   ============================================================
   Die neun Fall-Seiten leben von den gemeinsamen .v4-page-
   Komponenten aus style-v4.css. Hier steht nur, was diese Vorlage
   eigen hat: die Brotkrume, das zweispaltige Hero mit der
   Betriebsgrenzen-Grafik, der dunkle Hardware-Block (der eine
   Navy-Anker der Seite, Vorbild laut style-v4.css: der
   Rechner-Block), die Modell-/Fall-Chips, der Befehle-Aufklapper,
   die Quellenliste und die verwandten Themen im CTA-Band.
   ============================================================ */

/* ---- Brotkrume ueber dem Hero: ruhige Mono-Zeile ---- */
.v4-llmfall .v4-llm-pfad {
  font-family: var(--v4-font-mono);
  font-size: 12.5px;
  color: var(--v4-text-secondary);
  margin: 0 0 var(--v4-space-4);
}
.v4-llmfall .v4-llm-pfad a {
  color: inherit;
  text-decoration: none;
  transition: color var(--v4-transition);
}
.v4-llmfall .v4-llm-pfad a:hover { color: var(--v4-blue); }
.v4-llmfall .v4-llm-pfad span[aria-hidden] { opacity: 0.5; }

/* ---- Hero: Text links, Betriebsgrenzen-Grafik rechts ---- */
.v4-llmfall .v4-llm-hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: var(--v4-space-8);
  align-items: center;
}
.v4-llmfall .v4-llm-kurz { max-width: 62ch; }
.v4-llmfall .v4-llm-grafik svg {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  .v4-llmfall .v4-llm-hero-raster { grid-template-columns: 1fr; gap: var(--v4-space-5); }
  .v4-llmfall .v4-llm-grafik { max-width: 400px; }
}

/* ---- Dunkler Hardware-Block: Anpassungen auf Navy ----
   v4-einleitung und v4-hinweis kommen aus style-v4.css und sind
   dort fuer helle Flaechen gefaerbt; hier bekommen sie lesbare
   Werte auf dunklem Grund. */
.v4-llmfall .v4-sektion-dunkel .v4-label { color: rgba(255, 255, 255, 0.75); }
.v4-llmfall .v4-sektion-dunkel .v4-einleitung a {
  color: var(--v4-white);
  text-decoration: underline;
}
.v4-llmfall .v4-sektion-dunkel .v4-hinweis { color: rgba(255, 255, 255, 0.55); }

/* Kennzahlen: drei grosse Mono-Werte, wie im Rechner-Ergebnis */
.v4-llmfall .v4-llm-zahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--v4-space-3);
  margin: var(--v4-space-4) 0 var(--v4-space-3);
  max-width: 760px;
}
.v4-llmfall .v4-llm-zahl strong {
  display: block;
  font-family: var(--v4-font-mono);
  font-size: 30px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--v4-white);
  line-height: 1.2;
}
.v4-llmfall .v4-llm-zahl span {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
}

/* Anschaffen gegen Mieten: zwei ruhige Rahmenkarten */
.v4-llmfall .v4-llm-kosten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--v4-space-3);
  max-width: 760px;
  margin-bottom: var(--v4-space-3);
}
.v4-llmfall .v4-llm-kostenkarte {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--v4-radius-card);
  padding: var(--v4-space-2) var(--v4-space-3);
}
.v4-llmfall .v4-llm-kostenkarte strong {
  display: block;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--v4-white);
  margin: 2px 0;
}
.v4-llmfall .v4-llm-kostenkarte span {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
}

/* Block-Etikett (Anschaffen/Mieten, Womit Sie starten koennen,
   Alle neun Faelle): kleines Mono-Label wie v4-karte-label */
.v4-llmfall .v4-llm-block-label {
  font-family: var(--v4-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v4-text-secondary);
  margin: 0 0 var(--v4-space-1);
}
.v4-llmfall .v4-sektion-dunkel .v4-llm-block-label { color: rgba(255, 255, 255, 0.6); }

/* ---- Chips: Modelle im dunklen Block, Faelle im hellen ---- */
.v4-llmfall .v4-llm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v4-space-1);
}
.v4-llmfall .v4-llm-chip {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--v4-border);
  border-radius: var(--v4-radius-control);
  background: var(--v4-bg-surface);
  color: var(--v4-text-heading);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--v4-transition), color var(--v4-transition),
              background var(--v4-transition);
}
.v4-llmfall a.v4-llm-chip:hover {
  border-color: var(--v4-blue);
  color: var(--v4-blue);
}
/* Der Fall dieser Seite: gedaempft, nicht klickbar */
.v4-llmfall .v4-llm-chip-matt {
  background: transparent;
  border-style: dashed;
  color: var(--v4-text-secondary);
}
/* Dunkle Fassung im Hardware-Block */
.v4-llmfall .v4-sektion-dunkel .v4-llm-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--v4-white);
}
.v4-llmfall .v4-sektion-dunkel a.v4-llm-chip:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.16);
  color: var(--v4-white);
}
.v4-llmfall .v4-llm-modelle { margin-bottom: var(--v4-space-3); }
.v4-llmfall .v4-llm-chips-hinweis { margin-top: var(--v4-space-3); }

/* ---- Urteil und Tempo im dunklen Block ---- */
.v4-llmfall .v4-llm-urteil {
  border-left: 3px solid var(--v4-action-primary);
  padding-left: var(--v4-space-3);
  font-size: 17px;
  font-weight: 500;
  color: var(--v4-white);
  max-width: 68ch;
  margin: var(--v4-space-4) 0 var(--v4-space-2);
}
.v4-llmfall .v4-llm-tempo { max-width: 68ch; }
.v4-llmfall .v4-llm-tempo strong { color: rgba(255, 255, 255, 0.85); }

/* ---- Befehle-Aufklapper: natives details wie das v4-faq ---- */
.v4-llmfall .v4-llm-start {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--v4-radius-card);
  max-width: 760px;
  margin: var(--v4-space-3) 0;
}
.v4-llmfall .v4-llm-start summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--v4-space-2);
  padding: var(--v4-space-2) var(--v4-space-3);
  font-weight: 600;
  color: var(--v4-white);
}
.v4-llmfall .v4-llm-start summary::-webkit-details-marker { display: none; }
.v4-llmfall .v4-llm-start summary::after {
  content: "+";
  font-family: var(--v4-font-mono);
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}
.v4-llmfall .v4-llm-start[open] summary::after { content: "–"; }
.v4-llmfall .v4-llm-start summary:focus-visible {
  outline: var(--v4-focus-width) solid var(--v4-white);
  outline-offset: var(--v4-focus-offset);
}
.v4-llmfall .v4-llm-start p {
  margin: 0 0 var(--v4-space-1);
  padding: 0 var(--v4-space-3);
  color: var(--v4-grey);
  font-size: 14.5px;
}
.v4-llmfall .v4-llm-start pre {
  margin: 0 var(--v4-space-3) var(--v4-space-3);
  padding: var(--v4-space-2);
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--v4-radius-control);
  font-family: var(--v4-font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: #E8EEF5;
  overflow-x: auto;
}

/* ---- Quellenliste: liniengetrennt wie v4-liste, aber mit
        Fliesstext hinter dem Link (Modellprofile) ---- */
.v4-llmfall .v4-llm-quellen {
  list-style: none;
  margin: var(--v4-space-2) 0 0;
  padding: 0;
  max-width: 900px;
}
.v4-llmfall .v4-llm-quellen li {
  border-top: 1px solid var(--v4-border);
  padding-block: var(--v4-space-1);
  color: var(--v4-text-secondary);
  font-size: 15px;
}
.v4-llmfall .v4-llm-quellen li:last-child { border-bottom: 1px solid var(--v4-border); }
.v4-llmfall .v4-llm-quellen a {
  color: var(--v4-blue);
  font-weight: 500;
  text-decoration: none;
}
.v4-llmfall .v4-llm-quellen a:hover { text-decoration: underline; }

/* ---- Verwandte Themen im CTA-Band ---- */
.v4-llmfall .v4-llm-verwandte {
  margin-top: var(--v4-space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: var(--v4-space-3);
}
.v4-llmfall .v4-llm-verwandte > p {
  font-family: var(--v4-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--v4-space-1);
}
.v4-llmfall .v4-llm-verwandte div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v4-space-1) var(--v4-space-4);
}
.v4-llmfall .v4-llm-verwandte a {
  color: var(--v4-grey);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--v4-transition);
}
.v4-llmfall .v4-llm-verwandte a:hover {
  color: var(--v4-white);
  text-decoration: underline;
}

/* ---- Responsive: gleiche Stufen wie der Bestand ---- */
@media (max-width: 600px) {
  .v4-llmfall .v4-llm-zahlen { grid-template-columns: 1fr; gap: var(--v4-space-2); }
  .v4-llmfall .v4-llm-kosten { grid-template-columns: 1fr; }
}