/* Relaunch 2026 — Bereich „home“: Startseite, Sprachen-Übersicht, So geht's. Nur Tokens, Präfix hm-. */
.hm-word__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.hm-word__ex { margin: 0; font-size: 15px; color: var(--text-muted); font-style: italic; }
.hm-resume .lg-progress { grid-column: 1 / -1; }
.hm-resume .lg-langbadge { --_s: 56px; font-size: 19px; }
.hm-resume__s { font-size: 14px; opacity: .8; }
.hm-other { font-size: 15px; justify-self: start; }
.lg-pair[hidden], .hm-resume[hidden], .hm-other[hidden] { display: none; }
.hm-morelangs { margin-top: var(--space-6); }
.hm-morelangs .lg-chip { gap: var(--space-2); }
.hm-art { margin: var(--space-8) auto 0; max-width: 960px; }
.lg-hero--home h1 { font-size: clamp(40px, 5.4cqi, 72px); line-height: 1; }
.hm-house__l { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.hm-house__l img { flex: none; border-radius: var(--radius-sm); }
.lg-ad .hm-house .lg-house__t { color: inherit; }
.hm-art img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.hm-stats { margin-bottom: var(--space-8); }
.hm-stats .lg-factgrid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.hm-goal__t { font: 750 20px/1.2 var(--font-display); margin: 0; }
.hm-goal__s { margin: 4px 0 0; color: var(--text-muted); font-size: 15px; }
.hm-feat--lead .lg-tile__icon { background: var(--highlight); color: var(--on-highlight); }
.hm-feat--lead .lg-tile__title { font-size: 26px; }
.lg-tile p.lg-tile__meta, .lg-tile h3.lg-tile__title { margin: 0; }
.hm-linkgroup + .hm-linkgroup { margin-top: var(--space-8); }
.hm-linkgroup .lg-sechead { margin-bottom: var(--space-4); }
.hm-acct__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-8); }
.hm-acct__guest { margin: var(--space-3) 0 0; font-size: 15px; }
.hm-ctawrap { padding-block: var(--space-8) var(--space-12); }
/* Sprachen-Übersicht */
.hm-search .lg-input { min-height: 56px; font-size: 18px; }
.hm-search { max-width: 640px; margin-top: var(--space-2); }
.hm-kicker { margin: 0 0 var(--space-4); }
.hm-feat3 .lg-tile--accent .lg-tile__arrow { background: var(--gray-950); color: var(--gray-50); }
.hm-go { font-weight: 700; font-size: 15px; }
.hm-ltile { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.hm-ltile .lg-tile__title { font-size: 17px; }
.hm-ltile .lg-tile__meta + .lg-tile__meta { font-size: 12px; }
.hm-about p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.55; }
.hm-about .lg-link { margin-top: auto; font-size: 15px; }
.hm-noresults { text-align: center; margin: var(--space-6) 0; }
/* So geht's */
.hm-cycle h3 { font: 750 19px/1.2 var(--font-display); margin: 0; }
.hm-note { display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-5) 0 0; color: var(--text-muted); font-weight: 600; }
.hm-note .lg-icon { color: var(--accent-text); }
.hm-two { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container lg (min-width: 960px) { .hm-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); } .hm-two--rev > :first-child { order: 2; } }
.hm-col { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.hm-col .lg-sechead { margin-bottom: 0; }
.hm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.hm-lead { margin: 0; color: var(--text-muted); font-size: 17px; line-height: 1.55; }
.hm-lead strong { color: var(--text); }
.hm-vcard { gap: var(--space-3); }
.hm-vhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.hm-vhead > div { display: grid; gap: 2px; }
.hm-vhead b { font: 750 19px/1.2 var(--font-display); }
.hm-vhead .lg-muted { font-size: 14px; }
.hm-vchips { display: flex; gap: var(--space-2); }
.hm-vtr { display: inline-flex; align-items: center; gap: 6px; }
.hm-done { color: var(--success-text); flex: none; }
.hm-leitner > div { display: grid; gap: 2px; padding: var(--space-3) var(--space-2); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-align: center; }
.hm-leitner > div b { font: 800 24px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.hm-leitner > div span { font-size: 12px; color: var(--text-muted); }
.hm-leitner > div.is-due b { color: var(--accent-text); }
.hm-legend { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: 15px; color: var(--text-muted); }
.hm-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.hm-pills li { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4) 0 6px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--line); font-weight: 650; }
.hm-pills li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--text); color: var(--surface); font: 800 13px/1 var(--font-display); }
.hm-score { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.hm-score > span { display: grid; gap: 2px; }
.hm-score__ring { place-items: center; width: 72px; height: 72px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 5px var(--success-text); text-align: center; flex: none; align-content: center; }
.hm-score__ring b { font: 800 20px/1 var(--font-display); }
.hm-score small { font-size: 13px; color: var(--text-muted); }
.hm-score__ring small { font: 700 9px/1 var(--font-text); letter-spacing: .08em; }
.hm-score > span:last-child b { font: 750 17px/1.2 var(--font-display); color: var(--success-text); }
.lg-tile .lg-progress { margin-top: var(--space-2); }
/* Wiederkehrende auf dem Handy: die Weiterlernen-Karte ist der Einstieg; die Beispiel-Wortkarte darunter
   wäre eine zweite, nicht anklickbare Karte und entfällt. */
@container lg (max-width: 959px) { .hm-returning .lg-hero__side { display: none; } }
/* Sprachen-Übersicht während der Live-Suche: Treffer direkt unter dem Suchfeld */
body.spl-searching .lg-hero__side, body.spl-searching .lg-hero__lead, body.spl-searching .lg-ad, body.spl-searching .lg-crumbs { display: none !important; }
body.spl-searching .lg-hero { padding-bottom: var(--space-4); }
body.spl-searching [data-splgroup] { padding-top: 0 !important; }

/* Animierte Demos aus der alten Startseite, in Tokens */
/* Animated feature demos (looping CSS, localized) */
.hm-demo .demo .dt::before { content: attr(data-t); }
.hm-demo .demo { position: relative; aspect-ratio: 16/10; background: var(--surface-sunken); display: grid; place-items: center; overflow: hidden; padding: 18px; }
@property --dpr { syntax: '<number>'; initial-value: 92; inherits: false; }

/* Lesson — two word cards cross-fade, translation reveals */
.hm-demo .demo-lesson .dl-card { position: absolute; left: 50%; top: 50%; width: 72%; max-width: 280px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-2); padding: 24px 20px; text-align: center; opacity: 0; transform: translate(-50%,-50%); }
.hm-demo .demo-lesson .dl-1 { opacity: 1; animation: dlA 6s infinite; }
.hm-demo .demo-lesson .dl-2 { animation: dlB 6s infinite; }
.hm-demo .dl-term { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-display); }
.hm-demo .dl-ph { font: 500 12px/1 var(--font-text); color: var(--text-muted); margin-top: 6px; }
.hm-demo .dl-tr { font-size: 17px; font-weight: 700; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.hm-demo .demo-lesson .dl-1 .dl-tr { animation: dlReveal 6s infinite; }
.hm-demo .demo-lesson .dl-2 .dl-tr { opacity: 0; filter: blur(6px); animation: dlRevealB 6s infinite; }
@keyframes dlA { 0%{opacity:0;transform:translate(-50%,-50%) translateX(24px)} 4%,44%{opacity:1;transform:translate(-50%,-50%)} 49%,100%{opacity:0;transform:translate(-50%,-50%) translateX(-24px)} }
@keyframes dlB { 0%,49%{opacity:0;transform:translate(-50%,-50%) translateX(24px)} 54%,94%{opacity:1;transform:translate(-50%,-50%)} 99%,100%{opacity:0;transform:translate(-50%,-50%) translateX(-24px)} }
@keyframes dlReveal { 0%,16%{opacity:0;filter:blur(6px)} 26%,44%{opacity:1;filter:blur(0)} 49%,100%{opacity:0;filter:blur(6px)} }
@keyframes dlRevealB { 0%,66%{opacity:0;filter:blur(6px)} 76%,94%{opacity:1;filter:blur(0)} 99%,100%{opacity:0} }

/* Flashcards — 3D flip + "knew it" */
.hm-demo .demo-fc { perspective: 800px; }
.hm-demo .demo-fc .dfc-card { width: 72%; max-width: 290px; aspect-ratio: 16/9; }
.hm-demo .dfc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: dfcFlip 5s infinite; }
.hm-demo .dfc-face { position: absolute; inset: 0; backface-visibility: hidden; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.hm-demo .dfc-lang { font: 600 9px/1 var(--font-text); text-transform: uppercase; color: var(--text-muted); }
.hm-demo .dfc-term { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-display); }
.hm-demo .dfc-back { transform: rotateY(180deg); }
@keyframes dfcFlip { 0%,28%{transform:rotateY(0)} 48%,92%{transform:rotateY(180deg)} 100%{transform:rotateY(0)} }
.hm-demo .dfc-knew { position: absolute; bottom: 12%; left: 50%; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 12px; padding: 7px 14px; border-radius: 10px; opacity: 0; transform: translateX(-50%); animation: dfcKnew 5s infinite; }
@keyframes dfcKnew { 0%,55%{opacity:0;transform:translateX(-50%) translateY(8px)} 66%,88%{opacity:1;transform:translateX(-50%)} 95%,100%{opacity:0} }

/* Pronunciation — score ring fills */
.hm-demo .demo-pr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.hm-demo .dpr-eyebrow { font: 600 9px/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.hm-demo .dpr-term { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-display); }
.hm-demo .dpr-ph { font: 500 11px/1 var(--font-text); color: var(--text-muted); margin-bottom: 8px; }
.hm-demo .dpr-ring { --dpr: 92; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--dpr) * 1%), var(--line) 0); animation: dprFill 5s infinite; }
@keyframes dprFill { 0%,12%{--dpr:0} 46%,90%{--dpr:92} 100%{--dpr:0} }
.hm-demo .dpr-ring-in { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; line-height: 1; }
.hm-demo .dpr-pct { font-size: 19px; font-weight: 800; } .dpr-pct small { font-size: 11px; }
.hm-demo .dpr-matchl { display: block; font: 600 7px/1 var(--font-text); color: var(--text-muted); text-transform: uppercase; margin-top: 2px; }
.hm-demo .dpr-fb { font-size: 14px; font-weight: 800; color: var(--accent-text); opacity: 0; animation: dprFb 5s infinite; }
@keyframes dprFb { 0%,48%{opacity:0} 60%,90%{opacity:1} 96%,100%{opacity:0} }

/* Learning path — a lesson completes, bar fills */
.hm-demo .demo-path { display: flex; flex-direction: column; justify-content: center; gap: 8px; width: 86%; }
.hm-demo .dp-bar { height: 7px; background: var(--line); border-radius: 99px; overflow: hidden; margin-bottom: 4px; }
.hm-demo .dp-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; width: 34%; animation: dpBar 5s infinite; }
@keyframes dpBar { 0%,48%{width:34%} 64%,100%{width:50%} }
.hm-demo .dp-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px; }
.hm-demo .dp-row b { font-weight: 700; font-size: 12px; }
.hm-demo .dp-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 800 12px/1 var(--font-text); flex-shrink: 0; }
.hm-demo .dp-done .dp-ic { background: var(--accent); color: var(--on-accent); }
.hm-demo .dp-lock { opacity: .75; } .dp-lock .dp-ic { background: var(--surface-sunken); color: var(--text-muted); }
.hm-demo .dp-toggle { position: relative; animation: dpBorder 5s infinite; }
.hm-demo .dp-toggle .dp-ic { background: var(--surface-sunken); color: var(--text-muted); }
.hm-demo .dp-toggle .dp-num { animation: dpNum 5s infinite; }
.hm-demo .dp-toggle .dp-chk { position: absolute; left: 12px; background: var(--accent); color: var(--on-accent); opacity: 0; animation: dpChk 5s infinite; }
@keyframes dpBorder { 0%,50%{border-color:var(--accent)} 64%,100%{border-color:var(--line)} }
@keyframes dpNum { 0%,52%{opacity:1} 62%,100%{opacity:0} }
@keyframes dpChk { 0%,52%{opacity:0} 62%,100%{opacity:1} }

@media (prefers-reduced-motion: reduce) {
  .hm-demo .demo * , .hm-demo .demo { animation: none !important; }
  .hm-demo .demo-lesson .dl-2 { opacity: 0 !important; } .demo-lesson .dl-1 .dl-tr { opacity: 1 !important; filter: none !important; }
  .hm-demo .dfc-knew { opacity: 1 !important; } .dpr-fb { opacity: 1 !important; } .dpr-ring { --dpr: 92; }
  .hm-demo .dp-toggle .dp-chk { opacity: 1 !important; } .dp-toggle .dp-num { opacity: 0 !important; }
}
.hm-demo { margin-top: var(--space-4); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); }
.hm-demo .demo { width: 100%; }
.lg-tile--inverse .hm-demo { border-color: transparent; color: var(--text); }

/* Hervorgehobene Sprachen (Sprachen-Übersicht) mobil kompakt: Badge · Name + Meta · Pfeil in einer Zeile */
@container lg (max-width: 599px) {
  .hm-feat3 > .lg-tile { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: 2px; align-items: center; padding: var(--space-3) var(--space-4); min-height: 0; }
  .hm-feat3 > .lg-tile > .lg-tile__head { grid-row: 1 / span 2; }
  .hm-feat3 > .lg-tile .lg-langbadge--l { --_s: 44px; font-size: 15px; }
  .hm-feat3 > .lg-tile > .lg-tile__title { font-size: 19px !important; grid-column: 2; align-self: end; }
  .hm-feat3 > .lg-tile > .lg-tile__meta { grid-column: 2; align-self: start; font-size: 14px; }
  .hm-feat3 > .lg-tile > .hm-go { display: none; }
  .hm-feat3 > .lg-tile > .lg-tile__arrow { position: static; grid-column: 3; grid-row: 1 / span 2; margin: 0; }
}
/* Alle Sprachen mobil: zweispaltig und flach (Badge · Name + Eigenname) */
@container lg (max-width: 599px) {
  [data-splgroup] .lg-grid:has(.hm-ltile) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--space-2); }
  .hm-ltile { display: flex !important; flex-direction: row; align-items: center; gap: var(--space-2); padding: var(--space-3); }
  .hm-ltile .lg-langbadge--l { --_s: 36px; font-size: 12px; flex: none; }
  .hm-ltile .lg-tile__title { font-size: 16px; }
  .hm-ltile .lg-tile__meta { font-size: 13px; }
  .hm-ltile .lg-tile__meta + .lg-tile__meta { display: none; }
  .hm-ltile > div { min-width: 0; display: grid; }
  .hm-ltile .lg-tile__title, .hm-ltile .lg-tile__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@container lg (max-width: 599px) {
  .hm-ltile .lg-tile__title { white-space: normal; overflow: visible; text-overflow: clip; font-size: 15px; hyphens: auto; overflow-wrap: break-word; }
  .hm-ltile { padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3); }
}
/* Startseite „Diese Sprachen kannst du lernen“ mobil: flache Kacheln, Badge · Name + Eigenname, ohne Pfeil */
@container lg (max-width: 599px) {
  #languages .lg-bento { gap: var(--space-2); }
  #languages .lg-bento > .lg-tile { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-2); row-gap: 0; align-items: center; padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3); }
  #languages .lg-bento > .lg-tile > .lg-tile__head { grid-row: 1 / span 2; }
  #languages .lg-bento > .lg-tile .lg-langbadge--l { --_s: 36px; font-size: 12px; }
  #languages .lg-bento > .lg-tile > .lg-tile__title { grid-column: 2; font-size: 15px; align-self: end; hyphens: auto; overflow-wrap: break-word; }
  #languages .lg-bento > .lg-tile > .lg-tile__meta { grid-column: 2; font-size: 13px; align-self: start; }
  #languages .lg-bento > .lg-tile > .lg-tile__arrow { display: none; }
}