/* ============================================================
   KI-KOSTEN-RECHNER — nur Seitenspezifisches
   ============================================================
   Die Seite lebt von den gemeinsamen .v4-page-Komponenten aus
   style-v4.css (Hero, Sektionen, Raster, Karten, FAQ, Linkliste,
   CTA). Hier stehen nur: das Hero-Raster mit der Kosten-Grafik,
   die Einpassung der Bestandsklassen (Rechner-Traeger, Tabelle,
   Stand-Zeile, clink), die Quellenliste und die Druckregeln fuer
   die neuen V4-Sektionen.

   NICHT hier: das Rechner-Widget selbst. Der Navy-Kasten
   (.rechner und Unterklassen) kommt unveraendert aus style.css —
   shared.js bindet an seine IDs, die Druckfassung an seine
   Klassen. Er bleibt bewusst unangetastet.
   ============================================================ */

/* ---- Hero: Text links, Break-even-Grafik rechts (Muster wie
        der Wissen-Hub; Grundpadding aus .v4-page .v4-hero) ---- */
.v4-llmkosten .v4-hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--v4-space-6);
  align-items: center;
}
.v4-llmkosten .v4-hero-grafik { justify-self: center; }
.v4-llmkosten .v4-hero-grafik svg { max-width: 100%; height: auto; }
@media (max-width: 900px) {
  .v4-llmkosten .v4-hero-raster { grid-template-columns: 1fr; }
  /* Die Grafik ist Illustration, kein Inhalt: auf schmalen
     Schirmen faellt sie weg, bevor sie den Rechner nach unten
     schiebt. */
  .v4-llmkosten .v4-hero-grafik { display: none; }
}

/* ---- Bestandsklassen in der V4-Welt ----
   Der Fliesstext traegt weiterhin .clink (wortgleich uebernommen);
   in der V4-Welt sind Inhaltslinks blau statt navy. Die Stand-
   Zeile wird zur Mono-Zeile wie die uebrigen technischen Angaben. */
.v4-llmkosten .clink { color: var(--v4-blue); }
.v4-llmkosten .llm-stand {
  font-family: var(--v4-font-mono);
  font-size: 13px;
  color: var(--v4-text-secondary);
  max-width: 68ch;
}

/* Der Rechner-Traeger braucht Luft zur Stand-Zeile darueber. */
.v4-llmkosten [data-llm-kosten] { margin-top: var(--v4-space-4); }

/* ---- Beispiel-Tabelle: die Bestandsstile (.llm-tabelle,
        style.css) gelten weiter, hier nur der Fusstext ---- */
.v4-llmkosten .v4-llm-tabellenfuss {
  margin: var(--v4-space-2) 0 0;
  font-size: 14.5px;
  color: var(--v4-text-secondary);
  max-width: 90ch;
}

/* ---- Kaesten «Was die Rechnung bewusst weglaesst»:
        v4-Karten ohne Restabstand am Absatz ---- */
.v4-llmkosten .v4-karte p { margin: 0; }

/* ---- Quellen: liniengetrennte Liste unter dem FAQ, Links blau,
        Erklaertext dahinter in Sekundaerfarbe ---- */
.v4-llmkosten .v4-llm-quellen { margin-top: var(--v4-space-6); }
.v4-llmkosten .v4-llm-quellen ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 900px;
}
.v4-llmkosten .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-llmkosten .v4-llm-quellen li:last-child { border-bottom: 1px solid var(--v4-border); }
.v4-llmkosten .v4-llm-quellen a {
  color: var(--v4-blue);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   DRUCKFASSUNG
   ============================================================
   Die tragenden Druckregeln haengen an body.seite-llm in style.css
   (Blattkopf, .seite-llm section auf Weiss, Rechner-Eingaben weg,
   heller Rechner-Kasten) und greifen unveraendert, weil Body-Klasse
   und Widget-Klassen erhalten blieben. Was style.css NICHT mehr
   trifft, sind die frueheren Sektions-Selektoren der alten Struktur
   (section:has(.two-col), .faq-list, .cta-section …) — deren
   V4-Gegenstuecke blendet dieser Block aus. Gedruckt wird wie
   vorher das Datenblatt: Blattkopf, Titel, Rechner-Ergebnis und
   die Beispiel-Tabelle.
   ============================================================ */
@media print {
  .seite-llm .v4-page { background: #fff !important; }
  .seite-llm .v4-hero-grafik,
  .seite-llm .v4-aktionen,
  .seite-llm #annahmen,
  .seite-llm .v4-llm-kaesten,
  .seite-llm .v4-llm-faq,
  .seite-llm .v4-llm-verwandt,
  .seite-llm .v4-cta { display: none !important; }
  /* .seite-llm section (style.css) setzt Weiss und kompaktes
     Padding; die hellen V4-Sektionen bringen zusaetzlich Raender
     mit, die auf dem Blatt nichts zeigen. */
  .seite-llm .v4-sektion-hell { border: none !important; }
  .seite-llm .v4-hero-raster { grid-template-columns: 1fr; }
}