/* Die Kickstart-Kurve: eine Quelle für die Startseite (templates/new_index.html,
 * Abschnitt #kickstart) und das Kickstart-Popup im Upload-Plan (templates/draft_plan.html).
 * Markup: templates/_kickstart_kurve.html, Bewegung: static/js/kickstart_kurve.js.
 *
 * Eigenständig: die Karte bringt ihre Farben mit (Schwarz, Weiß, Grau wie die Startseite);
 * --font-display und --ease-out kommen von der Startseite, sonst die gleichen Werte als Rückfall.
 * Bewegt werden nur transform und opacity, und nur von selbst - beim Darüberfahren
 * bewegt sich nichts. Kein farbiger Streifen links.
 */

/* Die Kickstart-Kurve: der Monat als 31 Säulen, Tag 1 springt auf 1.000, danach + 100 am Tag */
.kx-kurve { position: relative; border-radius: 28px; background: #050505; color: #fff; padding: clamp(20px, 2.6vw, 30px); box-shadow: 0 50px 110px -40px rgba(10,10,10,.55); overflow: hidden; isolation: isolate; }
.kx-kurve::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 75%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); }
.kx-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.kx-kopf > span { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.6); }
.kx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.kx-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); white-space: nowrap; }
.kx-chip b { font-family: var(--font-display, 'Archivo', 'Space Grotesk', system-ui, sans-serif); font-weight: 800; color: #fff; }
.kx-stand { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 22px 0 18px; flex-wrap: wrap; }
.kx-zahl { display: grid; gap: 4px; }
.kx-zahl b { font-family: var(--font-display, 'Archivo', 'Space Grotesk', system-ui, sans-serif); font-weight: 800; font-size: clamp(52px, 6.4vw, 92px); letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.kx-zahl small { font-size: 14px; color: rgba(255,255,255,.6); }
.kx-tag-nr { text-align: right; display: grid; gap: 2px; }
.kx-tag-nr b { font-family: var(--font-display, 'Archivo', 'Space Grotesk', system-ui, sans-serif); font-weight: 800; font-size: 26px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kx-tag-nr small { font-size: 13px; color: rgba(255,255,255,.55); }
.kx-saeulen { position: relative; height: clamp(150px, 17vw, 210px); display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 3px; align-items: end; padding-top: 14px; }
.kx-saeulen i { position: relative; height: var(--h); border-radius: 3px 3px 1px 1px; background: rgba(255,255,255,.07); overflow: hidden; }
/* Der Monat steht als Schatten da, jeder erreichte Tag füllt sich von unten */
.kx-saeulen i::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.55); transform-origin: bottom; transform: scaleY(0); transition: transform 520ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)), background-color 300ms; }
.kx-saeulen i.is-on::after { transform: none; }
.kx-saeulen i.is-heute::after, .kx-saeulen i:first-of-type.is-on::after { background: #fff; }
/* Obergrenze: eine feine Linie bei 4.000 */
.kx-deckel { position: absolute; left: 0; right: 0; top: 14px; border-top: 1px dashed rgba(255,255,255,.35); pointer-events: none; }
.kx-deckel span { position: absolute; right: 0; top: -22px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); }
.kx-achse { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.45); }
.kx-legende { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.12); list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kx-legende li { display: grid; gap: 2px; font-size: 12px; color: rgba(255,255,255,.55); }
.kx-legende b { font-family: var(--font-display, 'Archivo', 'Space Grotesk', system-ui, sans-serif); font-weight: 800; font-size: 18px; color: #fff; letter-spacing: -.02em; }
@media (max-width: 560px) {
	.kx-saeulen { gap: 2px; }
	.kx-legende { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.kx-legende li { grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
	.kx-tag-nr { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
	.kx-saeulen i::after { transition: none; }
}