/* DE: „Merken" (B2, Variante 1a): ein echtes Eck-LESEZEICHEN-BAND in der oberen rechten Ecke der Karte — weg vom
   Bild. ☆ (Umriss) = nicht gemerkt, ★ (gefüllt, grün) = gemerkt. Ein GEMERKTES Wort zeigt sein ★-Band auf Laptops
   IMMER (man sieht seine Merkzettel auf einen Blick); ein noch nicht gemerktes ☆ ist hover-ruhig — sichtbar nur bei
   Hover oder Tastatur-Fokus, damit die Trefferliste ruhig bleibt. Auf Touch (kein Hover) alles dauerhaft sichtbar.
   Der Knopf selbst ist ein ungeclipptes Rechteck (sauberer Fokus-Rahmen + Hit-Fläche); das Band-Visual zeichnet ein
   geclipptes ::before. Startet [hidden] (Progressive Enhancement).
   EN: „Keep" (B2, variant 1a): a real corner BOOKMARK RIBBON in the card's top-right — off the picture. ☆ outline =
   not kept, ★ filled/green = kept. A KEPT word shows its ★ ribbon at ALL times on laptops (so the child sees their
   bookmarks at a glance); a not-yet-kept ☆ is hover-quiet — shown only on hover or keyboard focus, so the results
   list stays calm. On touch (no hover) everything is always visible. The button is an unclipped rectangle (clean
   focus ring + hit area); a clipped ::before draws the ribbon. Ships [hidden] (progressive enhancement). */
.result-cards[data-controller] li{position:relative}
.result-cards [hidden]{display:none}

.keep-ribbon{
  position:absolute;inset-block-start:-1px;inset-inline-end:12px;z-index:1;
  min-inline-size:0;min-block-size:0;inline-size:1.5rem;block-size:2rem;padding:0;border:0;background:none;
  display:grid;place-items:start center;cursor:pointer;
  opacity:0;transition:opacity var(--dur,.15s) var(--ease,ease);
}
/* The ribbon body: a downward-notched bookmark, clipped so the notch is real (and does not receive clicks). */
.keep-ribbon::before{
  content:"";position:absolute;inset-block-start:0;inset-inline-end:0;
  /* DE: Feste Bandgröße statt `inset:0`. Auf Touch wächst der KNOPF durch den Berührungsboden auf 44×44 — mit
     `inset:0` wuchs das Band mit und wurde ein Klotz mit tiefer Kerbe. Die Trefferfläche darf größer sein als
     das, was man sieht; das ist der Sinn eines Bodens. Gemessen im Browser bei 390 px.
     EN: A fixed ribbon size instead of `inset:0`. On touch the BUTTON grows to 44×44 through the touch floor;
     with `inset:0` the ribbon grew with it into a slab with a deep notch. The hit area may be larger than what
     is seen — that is what a floor is for. */
  inline-size:1.5rem;block-size:2rem;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  background:var(--surface-2);
}
/* The star sits above the ribbon body; ☆ by default, ★ when kept (state carried by aria-pressed, JS just flips it). */
.keep-ribbon__star{
  position:absolute;z-index:1;inset-block-start:4px;inset-inline-end:0;inline-size:1.5rem;text-align:center;
  color:var(--text-muted);font-size:.9rem;line-height:1;
}
.keep-ribbon__star::before{content:"☆"}
.keep-ribbon[aria-pressed="true"]::before{background:var(--brand)}
.result-card__keep[aria-pressed="true"] .keep-ribbon__star{color:var(--text-on-brand)}
.result-card__keep[aria-pressed="true"] .keep-ribbon__star::before{content:"★"}

/* Ein GEMERKTES Wort (★) zeigt sein Band IMMER — so sieht man seine Merkzettel auf einen Blick. Ein noch nicht
   gemerktes ☆ bleibt hover-ruhig: nur bei Hover/Tastatur-Fokus sichtbar. Touch: alles dauerhaft. */
.result-cards li:hover .keep-ribbon,
.result-cards li:focus-within .keep-ribbon,
.keep-ribbon:focus-visible,
.keep-ribbon[aria-pressed="true"]{opacity:1}
@media (hover:none){.result-cards li .keep-ribbon{opacity:1}}

.keep-ribbon:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}

/* DE: In der Trefferliste ist das Band hover-ruhig (oben) — auf der WORTSEITE nicht. Dort steht genau ein
   Wort, und „Merken" ist eine Haupthandlung: ein Bedienelement, das erst bei Hover erscheint, findet niemand,
   der die Maus nicht darüber führt, und auf Touch gibt es gar keinen Hover. Dieselbe Form, andere Ruhe —
   das ist der eine Unterschied zwischen den beiden Flächen, und er ist begründet.
   EN: In the results list the ribbon is hover-quiet (above) — on the WORD PAGE it is not. There is exactly one
   word there and keeping it is a primary action: a control that appears only on hover is found by nobody who
   does not hover, and touch has no hover at all. Same shape, different quiet — the one deliberate difference. */
.word-hero{position:relative}
.word-hero .keep-ribbon{
  opacity:1;
  /* DE: Weiter eingerückt als an der Karte, weil die Kopfbox stärker gerundet ist (25,6 px): erst ab dort
     verläuft die Oberkante gerade. Bei 16 px hing das Band halb über der Rundung und sah abgelöst aus.
     EN: Inset further than on the card because the hero is rounded more (25.6px): only past that does the top
     edge run straight. At 16px the ribbon hung half over the curve and looked detached. */
  inset-inline-end:2rem;
}