/* ==========================================================================
   SAB-Lernen Design v2 – Lernbereich (ui-lernen.css)

   Seitenbausteine der Schüler:innen-Seiten (Startseite, Fachseite,
   Unterrichtsreihe, Profil, Rückmeldungen). Kapitel (kp-*) und Quizze (qz-*)
   haben eigene Dateien. Hover steht am Ende unter @media (hover: hover).
   ========================================================================== */

/* ---------- Gemeinsam ---------- */
/* #hx-content polstert seitlich; Seiten mit .ui-page bringen eigenen Rand mit. */
#hx-content:has(> .ui-page) { padding-inline: 0; }
.ui-hero-wave { display: inline-block; transform-origin: 70% 70%; animation: ui-wave 2.2s ease-in-out 1s 2; }
.ui-rings { display: flex; gap: .9rem; flex-wrap: wrap; }
.ui-section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.ui-link-reset { color: inherit; text-decoration: none; }
/* Listen als Raster ohne Aufzählungszeichen */
.ui-medals { margin: 0; padding: 0; list-style: none; }
.ui-page :is(h1, h2, h3) { color: var(--ui-ink); }

/* ---------- Startseite/Profil: Raster (hochkant eine Spalte, quer 3fr/2fr) ---------- */
.ui-split, .ui-home-stack { display: grid; gap: 1.25rem; }
.ui-split-col { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 1024px) {
  .ui-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}

/* ---------- Weiterlernen ---------- */
.ui-continue {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border-radius: var(--ui-r-card);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--ui-accent) 20%, transparent) 1.5px, transparent 2px) 0 0 / 18px 18px,
    linear-gradient(135deg, var(--ui-accent-soft), var(--ui-card) 70%);
  border: 2px solid color-mix(in srgb, var(--ui-accent) 40%, var(--ui-line));
  box-shadow: 0 8px 0 color-mix(in srgb, var(--ui-accent) 35%, var(--ui-line)), 0 24px 40px -30px rgba(10, 60, 110, .45);
  color: var(--ui-ink);
  animation: ui-pop-in .5s var(--ui-spring) .05s both;
}
.ui-continue-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.ui-continue-text { display: grid; gap: .1rem; min-width: 0; }
.ui-continue-title { margin: 0; font: 800 clamp(1.5rem, 3.6vw, 1.9rem)/1.15 var(--ui-font-display); text-wrap: balance; }
.ui-continue .ui-eyebrow { color: var(--ui-accent-deep); }
.ui-continue-progress { display: grid; gap: .3rem; }

/* Mini-Lernpfad der aktuellen Reihe (scrollt in sich, nie die Seite) */
.ui-mini-path { display: flex; align-items: center; overflow-x: auto; margin: 0; padding: .3rem .1rem .5rem; list-style: none; scrollbar-width: none; }
.ui-mini-path::-webkit-scrollbar { display: none; }
.ui-mini-stop { flex: none; display: grid; justify-items: center; gap: .25rem; width: 5.2rem; text-align: center; }
.ui-mini-stop > a { display: grid; justify-items: center; gap: .25rem; color: inherit; text-decoration: none; border-radius: 14px; }
.ui-mini-dot { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ui-card); border: 3px solid var(--ui-line-deep); box-shadow: 0 3px 0 var(--ui-line-deep); font: 800 .95rem var(--ui-font-display); color: var(--ui-ink); }
.ui-mini-stop.is-done .ui-mini-dot { background: var(--ui-mint); border-color: var(--ui-mint-deep); box-shadow: 0 3px 0 var(--ui-mint-deep); color: #fff; }
.ui-mini-stop.is-current .ui-mini-dot { background: var(--ui-accent); border-color: var(--ui-accent-deep); box-shadow: 0 3px 0 var(--ui-accent-deep); color: #fff; animation: ui-halo 2s ease-out infinite; }
.ui-mini-name { font: 700 .75rem/1.15 var(--ui-font-body); color: var(--ui-ink-soft); overflow-wrap: anywhere; }
.ui-mini-stop.is-current .ui-mini-name { color: var(--ui-ink); font-weight: 800; }
.ui-mini-line { flex: 1 0 1.2rem; height: .35rem; border-radius: var(--ui-r-pill); background: var(--ui-line); margin-top: -1.6rem; }
.ui-mini-line.is-done { background: var(--ui-mint); }

/* ---------- Rückmeldung (Sprechblase der Lehrkraft) ---------- */
.ui-bubble-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; }
.ui-bubble-avatar { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--ui-brand-soft); border: 2px solid color-mix(in srgb, var(--ui-brand) 35%, transparent); font-size: 1.35rem; }
.ui-bubble { margin: 0; padding: .7rem .9rem; border-radius: 4px 18px 18px 18px; background: var(--ui-card); border: 2px solid var(--ui-line); font-size: .98rem; color: var(--ui-ink); overflow-wrap: anywhere; }
.ui-bubble-meta { display: block; margin-top: .3rem; font-size: .82rem; font-weight: 700; color: var(--ui-ink-soft); }

/* ---------- Fortschritte-Liste ---------- */
.ui-reihe-list { display: grid; gap: .75rem; }
.ui-reihe-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: center;
  padding: .8rem .9rem;
  border-radius: var(--ui-r-panel);
  border: 2px solid var(--ui-line);
  background: var(--ui-card);
  box-shadow: 0 4px 0 var(--ui-line);
  color: var(--ui-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .15s;
  animation: ui-rise .45s var(--ui-spring) both;
}
.ui-reihe-row:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ui-line); }
.ui-reihe-row-title { display: grid; gap: .15rem; min-width: 0; }
.ui-reihe-row-title strong { font: 800 1.08rem/1.2 var(--ui-font-display); }
.ui-reihe-row .ui-rings { gap: .5rem; flex-wrap: nowrap; }
.ui-reihe-row .ui-ring svg { width: 3.2rem; height: 3.2rem; }
.ui-reihe-row .ui-ring-num { font-size: .72rem; letter-spacing: -.02em; }
.ui-reihe-row .ui-ring-label { font-size: .64rem; }
@media (max-width: 600px) {
  .ui-reihe-row { grid-template-columns: auto minmax(0, 1fr); }
  .ui-reihe-row .ui-rings { grid-column: 1 / -1; justify-content: space-around; }
}
.ui-skeleton-row { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; }
.ui-skeleton-blob { width: 3.6rem; height: 3.6rem; border-radius: 40%; background: var(--ui-line); animation: ui-skeleton 1.4s ease-in-out infinite; }
.ui-skeleton-ring { width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 8px solid var(--ui-line); animation: ui-skeleton 1.4s ease-in-out infinite; }

/* ---------- Interessen, Spitzname, Formulare im Dialog ---------- */
.ui-interest-list { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ui-interest-list .ui-chip { cursor: default; animation: ui-rise .4s var(--ui-spring) both; }
.ui-nick-form { display: flex; flex-wrap: wrap; gap: .6rem; }
.ui-nick-form .ui-input { flex: 1 1 12rem; width: auto; }
.ui-field--rank { grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: .6rem; }
.ui-dialog-form { display: grid; gap: .8rem; padding: 1.25rem; }
.ui-dialog-form > p { margin: 0; }

/* ---------- Fachseite & Unterrichtsreihe ---------- */
.ui-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.ui-reihe { display: grid; gap: .9rem; animation: ui-rise .45s var(--ui-spring) both; }
.ui-reihe-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .2rem 0; }
.ui-reihe-head-text { display: grid; gap: .3rem; min-width: 0; }
.ui-reihe-head-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ui-reihe-title { margin: 0; font: 800 1.35rem/1.15 var(--ui-font-display); }
.ui-reihe-head .ui-meter { max-width: 16rem; height: .6rem; }
.ui-reihe-toggle { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--ui-line); background: var(--ui-card); box-shadow: 0 3px 0 var(--ui-line-deep); color: var(--ui-ink); cursor: pointer; font-size: 1rem; transition: transform .3s var(--ui-spring); }
.ui-reihe-toggle[aria-expanded="false"] { transform: rotate(-90deg); }
.ui-reihe-done-note { font: 800 .95rem var(--ui-font-display); color: var(--ui-mint-deep); }
.ui-reihe-edit { justify-self: start; }

.ui-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); gap: 1.1rem 1rem; margin: 0; padding: .9rem 0 0; list-style: none; }
.ui-tile {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .6rem;
  height: 100%;
  min-height: 11rem;
  padding: 1rem;
  border-radius: 20px;
  border: 2px solid var(--ui-line);
  background: var(--ui-card);
  box-shadow: 0 6px 0 var(--ui-line);
  color: var(--ui-ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .15s;
  animation: ui-rise .45s var(--ui-spring) both;
}
.ui-tile:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ui-line); }
.ui-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.ui-tile-art { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%; background: var(--ui-accent-soft); font-size: 1.6rem; }
.ui-tile-badges { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.ui-tile-name { margin: 0; font: 800 1.15rem/1.2 var(--ui-font-display); text-wrap: balance; overflow-wrap: anywhere; }
.ui-tile-nr { display: block; margin-bottom: .1rem; font: 700 .8rem var(--ui-font-body); color: var(--ui-ink-soft); letter-spacing: .06em; text-transform: uppercase; }
.ui-tile-foot { display: grid; gap: .45rem; }
.ui-tile-progress { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; font: 800 .85rem var(--ui-font-display); color: var(--ui-ink-soft); font-variant-numeric: tabular-nums; }
.ui-tile-progress .ui-meter { height: .55rem; }
.ui-tile-award { display: inline-flex; align-items: center; gap: .35rem; justify-self: start; padding: .15rem .6rem .15rem .25rem; border-radius: var(--ui-r-pill); font: 800 .82rem var(--ui-font-body); background: var(--ui-sun-soft); border: 1.5px solid color-mix(in srgb, var(--ui-sun) 60%, transparent); }
.ui-tile-coin { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ui-card); font-size: .95rem; }
.ui-tile-award.is-locked { background: var(--ui-paper); border-color: var(--ui-line); color: var(--ui-ink-soft); }
.ui-tile-award.is-locked .ui-tile-coin { filter: grayscale(1); opacity: .55; }
.ui-tile-meta { font-size: .8rem; font-weight: 700; color: var(--ui-ink-soft); }
.ui-tile.is-done { border-color: color-mix(in srgb, var(--ui-mint) 45%, var(--ui-line)); box-shadow: 0 6px 0 color-mix(in srgb, var(--ui-mint) 45%, var(--ui-line)); }
.ui-tile.is-last { border-color: var(--ui-brand); box-shadow: 0 6px 0 var(--ui-brand-deep); }
.ui-tile-flag { position: absolute; top: -.85rem; left: 1rem; padding: .1rem .65rem; border-radius: var(--ui-r-pill); background: var(--ui-brand); color: #fff; font: 800 .78rem var(--ui-font-body); box-shadow: 0 2px 0 var(--ui-brand-deep); }
.ui-tile.is-draft { border-style: dashed; background: repeating-linear-gradient(-45deg, var(--ui-card) 0 12px, var(--ui-paper) 12px 24px); }
.ui-tile.is-review .ui-tile-name { color: var(--ui-ink-soft); }

/* Nützliches (Material-Links) */
.ui-mat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: .75rem; }
.ui-mat-link { display: flex; align-items: center; gap: .7rem; min-height: 3.2rem; padding: .6rem .8rem; border-radius: var(--ui-r-chip); background: var(--ui-paper); border: 2px solid var(--ui-line); box-shadow: 0 4px 0 var(--ui-line); color: var(--ui-ink); text-decoration: none; font-weight: 800; }
.ui-mat-link:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ui-line-deep); }
.ui-mat-icon { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 12px; font-size: 1.3rem; background: var(--ui-mint-soft); }
.ui-mat-link small { display: block; color: var(--ui-ink-soft); font-weight: 700; font-size: .82rem; }

/* ---------- Rückmeldungen ---------- */
.ui-feedback-list { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.ui-feedback { animation: ui-rise .45s var(--ui-spring) both; }
.ui-feedback.is-new { border-color: color-mix(in srgb, var(--ui-grape) 55%, var(--ui-line)); box-shadow: 0 6px 0 color-mix(in srgb, var(--ui-grape) 35%, var(--ui-line)); }
/* Textlink in der Meta-Zeile: Tippfläche ≥ 44 px ohne die Zeile zu verschieben */
.ui-feedback-link { display: inline-block; padding-block: .75rem; margin-block: -.75rem; color: var(--ui-brand-deep); text-decoration: none; }
.ui-feedback-task { font-size: 1rem; }
.ui-feedback-answer { margin: 0; overflow-wrap: anywhere; }
.ui-feedback-image { display: grid; gap: .35rem; justify-items: start; color: inherit; text-decoration: none; }
.ui-feedback-image img { max-width: min(100%, 22rem); height: auto; border-radius: var(--ui-r-chip); border: 2px solid var(--ui-line); }

/* ---------- Englischtest (in der Quiz-Hülle .qz) ---------- */
.ui-et-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; counter-reset: ui-et; }
.ui-et-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .5rem 1rem; align-items: center; padding: .55rem .7rem; border-radius: var(--ui-r-chip); background: var(--ui-paper); border: 2px solid var(--ui-line); }
.ui-et-word { font: 800 1.08rem/1.25 var(--ui-font-display); overflow-wrap: anywhere; }
.ui-et-answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; font-weight: 700; overflow-wrap: anywhere; }
.ui-et-mark { font: 800 1.15rem var(--ui-font-display); }
.ui-et-row.is-right { background: var(--ui-mint-soft); border-color: color-mix(in srgb, var(--ui-mint) 45%, transparent); }
.ui-et-row.is-right .ui-et-mark { color: var(--ui-mint-deep); }
.ui-et-row.is-wrong { background: var(--ui-coral-soft); border-color: color-mix(in srgb, var(--ui-coral) 45%, transparent); }
.ui-et-row.is-wrong .ui-et-mark { color: var(--ui-coral-deep); }
.ui-et-solution { flex-basis: 100%; font-size: .9rem; color: var(--ui-ink-soft); }
.ui-et-grade { display: grid; place-items: center; width: 6.5rem; height: 6.5rem; border-radius: 50%; background: var(--ui-card); border: 4px solid var(--ui-accent); box-shadow: 0 6px 0 var(--ui-accent-deep); }
.ui-et-grade-label { font: 800 .8rem var(--ui-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-ink-soft); margin-bottom: -1.2rem; }
.ui-et-grade-num { font: 800 3.2rem/1 var(--ui-font-display); color: var(--ui-ink); }
.ui-et-result { margin-bottom: 1rem; }
@media (max-width: 560px) {
  .ui-et-row { grid-template-columns: 1fr; }
}

/* ---------- KI-Kapitel ---------- */
/* Lade-Hinweis nur, solange die Interessen-Auswahl abgeschickt wird (hx-disabled-elt) */
.ui-ki-loading { display: none; align-items: center; gap: .5rem; }
form.htmx-request .ui-ki-loading { display: flex; }

/* ---------- Periodensystem (Nützliches) ---------- */
.ui-pse-layout { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .ui-pse-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.ui-pse-grid { display: grid; grid-template-columns: 1.6rem repeat(8, minmax(0, 1fr)); grid-template-rows: auto repeat(3, auto); gap: .35rem; }
.ui-pse-head { display: grid; place-items: center; padding: .2rem; border-radius: 8px; background: var(--ui-brand-soft); color: var(--ui-brand-deep); font: 800 .85rem var(--ui-font-display); }
.ui-pse-head--periode { background: var(--ui-orange-soft); color: var(--ui-orange-deep); }
.ui-pse-element { display: grid; justify-items: center; align-content: center; gap: 0; min-height: 3.6rem; padding: .25rem .1rem; border: 2px solid color-mix(in srgb, var(--ui-brand) 30%, var(--ui-line)); border-radius: 12px; background: var(--ui-card); box-shadow: 0 3px 0 var(--ui-line-deep); color: var(--ui-ink); cursor: pointer; transition: transform .12s, box-shadow .12s, background .15s; }
.ui-pse-element:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ui-line-deep); }
.ui-pse-element[aria-pressed="true"] { background: var(--ui-brand); border-color: var(--ui-brand-deep); color: #fff; box-shadow: 0 3px 0 var(--ui-brand-deep); }
.ui-pse-nr { font: 700 .62rem var(--ui-font-body); opacity: .75; }
.ui-pse-symbol { font: 800 1.25rem/1 var(--ui-font-display); }
.ui-pse-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .58rem var(--ui-font-body); }
.ui-pse-canvas { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; border-radius: var(--ui-r-panel); background: var(--ui-paper); border: 2px solid var(--ui-line); }
@media (max-width: 600px) { .ui-pse-name { display: none; } }
.ui-pse-g0 { grid-column: 1; }
.ui-pse-g1 { grid-column: 2; }
.ui-pse-g2 { grid-column: 3; }
.ui-pse-g3 { grid-column: 4; }
.ui-pse-g4 { grid-column: 5; }
.ui-pse-g5 { grid-column: 6; }
.ui-pse-g6 { grid-column: 7; }
.ui-pse-g7 { grid-column: 8; }
.ui-pse-g8 { grid-column: 9; }
.ui-pse-p0 { grid-row: 1; }
.ui-pse-p1 { grid-row: 2; }
.ui-pse-p2 { grid-row: 3; }
.ui-pse-p3 { grid-row: 4; }

/* ---------- Profil ---------- */
.ui-profile-avatar { font-family: var(--ui-font-display); font-weight: 800; color: #fff; text-shadow: 0 3px 0 var(--ui-accent-deep); }
.ui-blob.ui-blob--xs { width: 2.6rem; height: 2.6rem; font-size: 1.35rem; box-shadow: 0 3px 0 var(--ui-accent-deep); animation: none; }
.ui-medals--vitrine { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 1rem .75rem; }
.ui-medal-goal { font-size: .76rem; font-weight: 700; line-height: 1.25; color: var(--ui-ink-soft); }
.ui-plain-list { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ui-list-link { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .35rem .7rem; border-radius: var(--ui-r-chip); background: var(--ui-paper); color: var(--ui-ink); font-weight: 800; text-decoration: none; }
.ui-list-link .ui-small { margin-left: auto; }

/* Ergebnis-Tabelle mit Gruppenzeilen (Reihe › Kapitel › Quiz) */
.ui-table--compact td { height: 2.6rem; padding: .45rem .7rem; font-size: .92rem; }
.ui-table-group th { padding: .6rem .7rem; background: var(--ui-accent-soft); font: 800 .95rem var(--ui-font-display); letter-spacing: 0; text-transform: none; color: var(--ui-ink); }
.ui-table-subgroup th { padding: .45rem .7rem; background: var(--ui-paper); font: 800 .88rem var(--ui-font-body); letter-spacing: 0; text-transform: none; color: var(--ui-ink); }
.ui-table tr.is-done td { color: var(--ui-mint-deep); font-weight: 700; }
.ui-table-sum td { font-weight: 800; background: var(--ui-paper); }

/* ---------- Platzhalter beim Laden der Fachseite (Template #ui-fach-skeleton in home/navbar.html) ----------
   Gleiche Bausteine wie die echte Seite, damit beim Einblenden nichts springt. */
#hx-content.ui-skeleton-on > :not([data-ui-skeleton-active]) { display: none; }
.ui-skeleton-blob { animation: ui-skeleton-hop 1.1s var(--ui-spring) infinite; }
.ui-skeleton-hint { margin: 0; font: 800 1rem var(--ui-font-display); color: var(--ui-accent-deep); }
.ui-skeleton-dots span { display: inline-block; animation: ui-skeleton-dot 1.2s ease-in-out infinite; }
.ui-skeleton-dots span:nth-child(2) { animation-delay: .15s; }
.ui-skeleton-dots span:nth-child(3) { animation-delay: .3s; }
.ui-skeleton-bone {
  display: block;
  border-radius: var(--ui-r-chip);
  background: linear-gradient(100deg, var(--ui-line) 30%, var(--ui-paper) 50%, var(--ui-line) 70%) 0 0 / 300% 100%;
  animation: ui-skeleton-shimmer 1.4s linear infinite;
}
.ui-skeleton-bone--blob { width: 3.6rem; height: 3.6rem; border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%; }
.ui-skeleton-bone--title { width: min(14rem, 70%); height: 1.35rem; }
.ui-skeleton-bone--line { width: min(9rem, 45%); height: .7rem; }
.ui-skeleton-bone--tile { min-height: 11rem; border-radius: 20px; box-shadow: 0 6px 0 var(--ui-line); }
/* Kacheln tauchen nacheinander auf und schimmern danach versetzt (Welle über das Raster). */
.ui-fach-skeleton .ui-tiles > .ui-skeleton-bone--tile { animation: ui-rise .45s var(--ui-spring) both, ui-skeleton-shimmer 1.4s linear infinite; }
.ui-fach-skeleton .ui-reihe + .ui-reihe { opacity: .6; }
@keyframes ui-skeleton-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes ui-skeleton-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-14px) scale(.96, 1.05) rotate(-4deg); }
  55% { transform: translateY(0) scale(1.06, .92); }
  70% { transform: translateY(-3px) scale(1, 1) rotate(2deg); }
}
@keyframes ui-skeleton-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-.25em); opacity: 1; } }

/* ---------- Hover nur mit Maus/Trackpad ---------- */
@media (hover: hover) {
  .ui-reihe-row:hover { transform: translateY(-2px); border-color: var(--ui-accent); }
  .ui-tile:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--ui-line-deep); border-color: var(--ui-accent); }
  .ui-tile.is-last:hover { box-shadow: 0 9px 0 var(--ui-brand-deep); }
  .ui-mat-link:hover, .ui-list-link:hover { border-color: var(--ui-brand); }
  .ui-list-link:hover { background: var(--ui-brand-soft); }
  .ui-feedback-link:hover { text-decoration: underline; }
  .ui-reihe-toggle:hover { border-color: var(--ui-brand); }
  .ui-pse-element:hover:not([aria-pressed="true"]) { background: var(--ui-brand-soft); }
  .ui-mini-stop > a:hover .ui-mini-dot { border-color: var(--ui-accent); }
}