/* Formatierung der Cockpit-Huelle auf den Werkzeugseiten.
 *
 * Gehoert zu assets/js/cockpit-huelle.js. Die Datei laedt auf jeder Werkzeugseite mit,
 * greift aber nur, wenn die Huelle wirklich aufgebaut wurde: Alle Regeln haengen an
 * .ck-werkzeug, .ck-seite oder .ck-nur-produkt, und die setzt erst das Skript.
 */

/* Was zur Produktseite gehoert und im Cockpit nur stoert. Ausgeblendet, NICHT entfernt:
   Die Werkzeugskripte suchen ihre Elemente auch in laengst versteckten Abschnitten,
   siehe den Kommentar in der Seite selbst ("bleiben im DOM, damit ... nicht bricht"). */
.ck-nur-produkt { display: none !important; }

/* Die Produktseiten bringen eigene Seitenbreiten und Innenabstaende mit. Im Cockpit
   macht das die Hauptspalte, sonst stuende das Werkzeug doppelt eingerueckt.

   Eine Spalte, mittig: So haelt es auch der Vergabe-Nerd (.nd-verlauf, 760 px). Ohne
   das klebt das Werkzeug am linken Rand und rechts bleibt die halbe Flaeche leer.
   Am 1920-px-Bildschirm faellt das sofort auf (Ruben, 22.09.2026). */
.ck-werkzeug .mk,
.ck-werkzeug .kac { max-width: 1040px !important; margin: 0 auto !important; padding: 0 !important; }
.ck-werkzeug > .ck-gruss { max-width: 1040px; margin-left: auto; margin-right: auto; }
.ck-werkzeug > .ck-leiste-knopf { margin-left: auto; margin-right: auto; }

/* Das Werkzeug beginnt unmittelbar unter der Kopfzeile. */
.ck-werkzeug #mkForm { margin-top: 0 !important; }
.ck-werkzeug .kac-hero {
  display: block !important; padding: 0 !important; border: none !important;
  min-height: 0 !important;
}
.ck-werkzeug #ckResult { margin-top: 18px; }

/* Der Begruessungsblock der Generatoren wiederholt, was im Cockpit schon in der
   Kopfzeile steht (Name des Werkzeugs und ein Satz dazu). Auf der Produktseite ist er
   richtig, hier stuende die Ueberschrift zweimal. Reine Anzeige, keine Bedienung. */
.ck-werkzeug .cl-head { display: none !important; }

/* Der Rueckweg auf die Produktseite steht als Knopf in der Kopfzeile. Ohne die
   beiden Flussangaben rutscht er unter die Beschreibung, sobald diese lang ist:
   .ck-gruss umbricht, und der laengste Untertitel gewinnt die ganze Zeile. */
.ck-gruss .kc-knopf { text-decoration: none; }
.ck-werkzeug > .ck-gruss > div:first-child { flex: 1 1 520px; min-width: 0; max-width: 860px; }
.ck-werkzeug > .ck-gruss > .bb-kopfknoepfe { flex: 0 0 auto; }

/* Auf der Werkzeugseite gilt der Seitengrund des Cockpits, nicht der der Produktseite.
   Sichtbar wird das nur unterhalb des Inhalts, wenn die Seite kurz ist. */
body.ck-seite { background: #eef0f5; }

/* Befund 9 (29.09.2026): Im Cockpit ist der aktive Eingaberahmen violett wie jedes
   Feld dort. Das Orange (#D97757) bleibt der Produktseite. */
/* Befund 16 (29.09.2026): Zusatz unter Check und Vergleich. */
.ck-zusatz { max-width: 1040px; margin: 22px auto 0; background: #fff; border: 1px solid #e4e4ee;
  border-radius: 14px; padding: 20px 24px; }
.ck-zusatz h2 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #17171F; }
.ck-zusatz p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: #55556A; }
.ck-zusatz-liste { list-style: none; margin: 4px 0 0; padding: 0; }
.ck-zusatz-liste li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0;
  border-top: 1px solid #ececf3; font-size: 14px; }
.ck-zusatz-liste li:first-child { border-top: 0; }
.ck-zusatz-liste a { color: #17171F; font-weight: 600; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.ck-zusatz-liste a:hover { color: #6B1FD1; }
.ck-zusatz-liste span { flex: 0 0 auto; color: #55556A; font-size: 14px; font-variant-numeric: tabular-nums; }
body.ck-seite .cl-box:focus-within { border-color: #6B1FD1;
  box-shadow: 0 0 0 3px rgba(107, 31, 209, .12), 0 6px 22px rgba(15, 27, 50, .09); }

/* 07.10.2026 abends (Ruben, Punkte 6 und 9): Der Untertitel brach nach 76 Zeichen um,
   obwohl die Kopfzeile 1040 px breit ist. */
.ck-werkzeug > .ck-gruss > div:first-child { max-width: none; }
.ck-werkzeug > .ck-gruss p { max-width: none !important; }

/* Beispiel unter Unterlagen-Check und Angebotsvergleich: Karten blenden nacheinander ein,
   die Balken der Anforderungsabdeckung wachsen. Den Score zaehlt check.js selbst hoch. */
@keyframes ckhEin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ckhBalken { from { transform: scaleX(0); } to { transform: scaleX(1); } }
body.ck-seite #ckResult #ckDemoWrap,
body.ck-seite #ckResult .ck-res-card,
body.ck-seite #ckResult .ck-cat { animation: ckhEin .55s ease-out both; }
body.ck-seite #ckResult .ck-res-card { animation-delay: .15s; }
body.ck-seite #ckResult .ck-cat:nth-child(2) { animation-delay: .45s; }
body.ck-seite #ckResult .ck-cat:nth-child(3) { animation-delay: .75s; }
body.ck-seite #ckResult .ck-cat:nth-child(4) { animation-delay: 1.05s; }
body.ck-seite #ckResult .ck-cat:nth-child(n+5) { animation-delay: 1.35s; }
body.ck-seite #ckResult .mv-row .bar i { transform-origin: left center; animation: ckhBalken 1.1s cubic-bezier(.2,.8,.2,1) both; }
body.ck-seite #ckResult .mv-row:nth-child(2) .bar i { animation-delay: .35s; }
body.ck-seite #ckResult .mv-row:nth-child(3) .bar i { animation-delay: .5s; }
body.ck-seite #ckResult .mv-row:nth-child(4) .bar i { animation-delay: .65s; }
body.ck-seite #ckResult .mv-row:nth-child(5) .bar i { animation-delay: .8s; }
body.ck-seite #ckResult .mv-row:nth-child(n+6) .bar i { animation-delay: .95s; }
@media (prefers-reduced-motion: reduce) {
  body.ck-seite #ckResult * , body.ck-seite #ckResult #ckDemoWrap { animation: none !important; }
}