/* film.ki – Lese-Barometer, „Diese Woche viel gelesen“, Teilen (ab 0.8.8). Keine Cookies, keine Fremd-Dienste. */

/* Barometer: fünf aufsteigende Balken + Wort („gefragt“ / „im Trend“ / „viel gelesen“), keine Zahlen */
.fk-heat { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; vertical-align: baseline; }
.fk-heat[hidden] { display: none; }
.fk-heat__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: .85em; }
.fk-heat__bars i { display: block; width: 3px; border-radius: 1px; background: currentColor; opacity: .22; }
.fk-heat__bars i:nth-child(1) { height: 30%; }
.fk-heat__bars i:nth-child(2) { height: 47%; }
.fk-heat__bars i:nth-child(3) { height: 64%; }
.fk-heat__bars i:nth-child(4) { height: 82%; }
.fk-heat__bars i:nth-child(5) { height: 100%; }
.fk-heat__bars i.on { background: var(--signal, var(--accent, #ff4a30)); opacity: 1; }
.fk-heat__label { color: var(--signal, var(--accent, #ff4a30)); }
/* in Meta-Zeilen der Karten: mit Trennpunkt anhängen */
.editorial-update__meta .fk-heat::before { content: "·"; margin-right: .1em; color: inherit; opacity: .8; }
.editorial-update__meta .fk-heat { margin-left: .35em; }
/* Archiv: schmale Meta-Spalte → eigene Zeile unter dem Datum; ab 0.9.8 „Leserhit“ und Barometer untereinander */
.article-card__meta .fk-heat { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; margin-top: .55rem; max-width: 100%; }
.article-card__meta .fk-heat[hidden] { display: none; }
/* Werkporträt: gleiche Breite wie der Transparenz-Block */
.fp .fk-share,
.fp .fk-popular { width: min(100%, 68rem); margin-left: auto; margin-right: auto; }
.byline .fk-heat { font: inherit; }

/* Diese Woche viel gelesen */
.fk-popular { margin: 2.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line, rgba(127, 127, 127, .3)); }
.fk-popular[hidden] { display: none; }
.fk-popular__label { margin: 0 0 .8rem; color: var(--signal, var(--accent, #ff4a30)); font: 700 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.fk-popular ol { margin: 0; padding: 0; list-style: none; counter-reset: fkpop; }
.fk-popular li { counter-increment: fkpop; border-top: 1px solid var(--line, rgba(127, 127, 127, .2)); }
.fk-popular li:first-child { border-top: 0; }
.fk-popular a { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .2rem .6rem; align-items: baseline; padding: .75rem 0; color: inherit; text-decoration: none; }
.fk-popular a::before { content: counter(fkpop, decimal-leading-zero); grid-row: span 2; color: var(--signal, var(--accent, #ff4a30)); font: 700 .72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.fk-popular__kind { grid-column: 2; font: 700 .6rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; opacity: .65; text-transform: uppercase; }
.fk-popular__title { grid-column: 2; font-weight: 650; line-height: 1.3; }
.fk-popular__arrow { grid-column: 3; grid-row: 1 / span 2; align-self: center; transition: transform .2s ease; }
.fk-popular a:hover .fk-popular__title,
.fk-popular a:focus-visible .fk-popular__title { color: var(--signal, var(--accent, #ff4a30)); }
.fk-popular a:hover .fk-popular__arrow { transform: translateX(.2rem); }

/* Teilen: am Computer „Link kopieren“, am Handy das Teilen-Menü des Telefons */
.fk-share { display: flex; align-items: center; gap: .8rem; margin: 2.2rem 0 0; }
.fk-share__btn,
.fk-share__mini {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .65rem .9rem; border: 1px solid var(--line, rgba(127, 127, 127, .45)); border-radius: 0;
  background: transparent; color: inherit; cursor: pointer;
  font: 700 .66rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .2s ease, color .2s ease;
}
.fk-share__mini { padding: .1rem 0; border: 0; border-bottom: 1px solid currentColor; font-size: inherit; letter-spacing: inherit; text-transform: inherit; font-family: inherit; font-weight: inherit; }
.fk-share__btn svg, .fk-share__mini svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fk-share__btn:hover, .fk-share__btn:focus-visible,
.fk-share__mini:hover, .fk-share__mini:focus-visible { border-color: var(--signal, var(--accent, #ff4a30)); color: var(--signal, var(--accent, #ff4a30)); outline: 0; }
.fk-share__btn.is-done, .fk-share__mini.is-done { color: var(--signal, var(--accent, #ff4a30)); }

/* 0.9.1: Barometer-Teil und Etikett „Leserhit“ nebeneinander */
.fk-heat { gap: .45em .6em; flex-wrap: wrap; } /* 0.9.8: lieber umbrechen als überlaufen */
.fk-heat__mark { display: inline-flex; align-items: center; gap: .4em; }
.fk-badge {
  display: inline-flex; align-items: center;
  padding: .28em .5em .24em; border: 1px solid var(--signal, var(--accent, #ff4a30)); border-radius: 2px;
  color: var(--signal, var(--accent, #ff4a30));
  font: 700 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.byline .fk-badge { font-size: .66rem; }

/* 0.9.1: KI-Etikett in der Bildecke – „KI“, Details bei Mouseover, Tastaturfokus oder Tippen */
.has-ki { position: relative; }
.ki-tag {
  position: absolute; top: .7rem; left: .7rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .5em; max-width: calc(100% - 1.4rem);
  padding: .42em .55em; border-radius: 2px;
  background: rgba(8, 8, 8, .62); color: #f1efe8;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font: 700 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em;
  cursor: help; outline: 0;
}
.ki-tag__mark { display: inline-flex; align-items: center; gap: .45em; }
.ki-tag__mark::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--signal, var(--accent, #ff4a30)); }
.ki-tag__info { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; letter-spacing: .04em; }
/* 0.9.8: roter Punkt auch vor „KI-generiert“ */
.ki-tag__info::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .45em; border-radius: 50%; background: var(--signal, var(--accent, #ff4a30)); vertical-align: .08em; }
.ki-tag:hover .ki-tag__info,
.ki-tag:focus .ki-tag__info,
.ki-tag:focus-visible .ki-tag__info { display: inline; }
.ki-tag:hover .ki-tag__mark,
.ki-tag:focus .ki-tag__mark { display: none; }
.ki-tag:focus-visible { box-shadow: 0 0 0 2px var(--signal, var(--accent, #ff4a30)); }
/* Werkporträt: Vollbild-Kopf – Etikett unter der Kopfzeile rechts */
.fp .hero-media .ki-tag { top: calc(5.5rem + env(safe-area-inset-top)); left: auto; right: 1.25rem; }