/* LingoRhythm Website-Bausteine (Klassen lrw-*) · Stand 18.10.2026
   Nutzt die Farben und Schriften des Themes (style.css, :root).
   Bewegung ist ruhig, nichts blinkt, und alles steht still bei „Bewegung reduzieren“.
   Geprüft in Chromium (Desktop 1280 px, Handy 390 px). */

/* Häkchen ohne Inline-SVG: <span class="tick"></span> oder <span class="tick info"></span> */
.tick:empty{background:var(--olive-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='%235C6B43' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.tick.info:empty{background:var(--peach-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='3' r='1.4' fill='%239C5126'/%3E%3Crect x='5.9' y='5.6' width='2.2' height='6.6' rx='1.1' fill='%239C5126'/%3E%3C/svg%3E") center/14px no-repeat}
.lrw-fine{margin-top:28px;font-size:15px;color:var(--muted);max-width:72ch}
.lrw-gap{margin-top:40px}

/* Rhythmus-Balken: <span class="lrw-eq"><i></i><i></i><i></i><i></i></span>, mit "live" bewegt */
.lrw-eq{display:inline-flex;gap:4px;align-items:flex-end;height:22px;vertical-align:middle;flex:none}
.lrw-eq i{display:block;width:6px;height:60%;border-radius:3px;background:var(--terra);transform-origin:50% 100%}
.lrw-eq i:nth-child(2){height:100%;background:var(--olive)}
.lrw-eq i:nth-child(3){height:42%;background:var(--peach)}
.lrw-eq i:nth-child(4){height:78%}
.lrw-eq.sm{height:14px;gap:3px}
.lrw-eq.sm i{width:4px}

/* Song-Pille in der Beispielkarte */
.lrw-np{display:inline-flex;align-items:center;gap:9px;padding:5px 13px 5px 11px;border-radius:999px;background:var(--creme);font-weight:800;font-size:13px;color:var(--terra-t)}

/* Endungs-Wechsel: com + o / í / eré */
.lrw-swap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:26px}
.lrw-swap .w{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.4vw,46px);line-height:1.15;color:var(--ink);font-style:italic}
.lrw-roll{display:inline-block;height:1.15em;line-height:1.15;overflow:hidden;vertical-align:top}
.lrw-roll>span{display:block}
.lrw-roll b{display:block;height:1.15em;font-weight:900;font-style:normal;color:var(--terra-t)}
.lrw-swap .when{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--olive-d);padding:5px 14px;border-radius:999px;background:var(--olive-tint)}
.lrw-swap .when b{color:var(--olive-d);font-weight:800;text-align:center}

/* Probier es aus: Checkliste, der Apfel wird mit jedem Häkchen kleiner */
.lrw-try{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,280px);gap:clamp(28px,5vw,64px);align-items:center}
.lrw-try figure{margin:0}
.lrw-ten{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lrw-ten label{position:relative;display:grid;grid-template-columns:30px 62px 1fr;gap:14px;align-items:center;padding:14px 18px;border-radius:16px;background:var(--creme);cursor:pointer;transition:background .25s}
.lrw-ten label:hover{background:var(--terra-tint)}
.lrw-ten input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.lrw-ten .box{width:28px;height:28px;border-radius:9px;border:2px solid var(--sand2);background:var(--paper);transition:background .25s,border-color .25s}
.lrw-ten .min{font-weight:900;color:var(--terra-t);font-variant-numeric:tabular-nums;white-space:nowrap}
.lrw-ten .txt{display:grid;gap:2px;min-width:0}
.lrw-ten .txt span{color:var(--soft);font-size:15px}
.lrw-ten input:checked+.box{background:var(--olive-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;border-color:var(--olive-d)}
.lrw-ten input:focus-visible+.box{outline:3px solid var(--peach);outline-offset:2px}
.lrw-ten label:has(input:checked){background:var(--olive-tint)}
.lrw-plate{position:relative;width:100%;max-width:260px;aspect-ratio:1;margin:0 auto}
.lrw-plate svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.9);transition:opacity .5s ease,transform .5s ease}
.lrw-plate .s0{opacity:1;transform:none}
/* Zählt die Häkchen in beliebiger Reihenfolge (kein verschachteltes :has, das Browser verwerfen) */
.lrw-try:has(li:nth-child(1) :checked) .s0,.lrw-try:has(li:nth-child(2) :checked) .s0,.lrw-try:has(li:nth-child(3) :checked) .s0,.lrw-try:has(li:nth-child(4) :checked) .s0{opacity:0;transform:scale(.9)}
.lrw-try:has(li:nth-child(1) :checked) .s1,.lrw-try:has(li:nth-child(2) :checked) .s1,.lrw-try:has(li:nth-child(3) :checked) .s1,.lrw-try:has(li:nth-child(4) :checked) .s1{opacity:1;transform:none}
.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(2) :checked) .s1,.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(3) :checked) .s1,.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(4) :checked) .s1,.lrw-try:has(li:nth-child(2) :checked):has(li:nth-child(3) :checked) .s1,.lrw-try:has(li:nth-child(2) :checked):has(li:nth-child(4) :checked) .s1,.lrw-try:has(li:nth-child(3) :checked):has(li:nth-child(4) :checked) .s1{opacity:0;transform:scale(.9)}
.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(2) :checked) .s2,.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(3) :checked) .s2,.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(4) :checked) .s2,.lrw-try:has(li:nth-child(2) :checked):has(li:nth-child(3) :checked) .s2,.lrw-try:has(li:nth-child(2) :checked):has(li:nth-child(4) :checked) .s2,.lrw-try:has(li:nth-child(3) :checked):has(li:nth-child(4) :checked) .s2{opacity:1;transform:none}
.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(2) :checked):has(li:nth-child(3) :checked) .s2,.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(2) :checked):has(li:nth-child(4) :checked) .s2,.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(3) :checked):has(li:nth-child(4) :checked) .s2,.lrw-try:has(li:nth-child(2) :checked):has(li:nth-child(3) :checked):has(li:nth-child(4) :checked) .s2{opacity:0;transform:scale(.9)}
.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(2) :checked):has(li:nth-child(3) :checked) .s3,.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(2) :checked):has(li:nth-child(4) :checked) .s3,.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(3) :checked):has(li:nth-child(4) :checked) .s3,.lrw-try:has(li:nth-child(2) :checked):has(li:nth-child(3) :checked):has(li:nth-child(4) :checked) .s3{opacity:1;transform:none}
.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(2) :checked):has(li:nth-child(3) :checked):has(li:nth-child(4) :checked) .s3{opacity:0;transform:scale(.9)}
.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(2) :checked):has(li:nth-child(3) :checked):has(li:nth-child(4) :checked) .s4{opacity:1;transform:none}
.lrw-try:has(li:nth-child(1) :checked):has(li:nth-child(2) :checked):has(li:nth-child(3) :checked):has(li:nth-child(4) :checked) .lrw-done{opacity:1;transform:none}
.lrw-try figcaption{margin-top:14px;text-align:center;font-size:15px;color:var(--soft)}
.lrw-done{margin-top:10px;text-align:center;font-weight:800;color:var(--olive-d);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}

/* Apfel-Leiste: Wiederholen nach 1, 3 und 7 Tagen */
.lrw-apples{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.lrw-apples::before{content:"";position:absolute;left:12%;right:12%;top:52px;border-top:2px dashed var(--sand2)}
.lrw-apples li{position:relative;display:grid;gap:6px;justify-items:center;align-content:start;text-align:center}
.lrw-apples svg{width:104px;height:104px;padding:12px;border-radius:50%;background:var(--paper);border:1px solid var(--sand)}
section.paper .lrw-apples svg{background:var(--creme)}
.lrw-apples .eyebrow{margin-top:8px}
.lrw-apples b{font-size:17px}
.lrw-apples p{color:var(--soft);font-size:15px;max-width:24ch}

/* Zeitleiste der Bilder */
.lrw-line{position:relative;display:flex;justify-content:space-between;align-items:center;height:30px;margin-bottom:18px;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--olive-d)}
.lrw-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,var(--olive),var(--terra),var(--peach))}
.lrw-line::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 4px var(--terra-tint)}
.lrw-line span{position:relative;z-index:1;background:var(--paper);padding:3px 12px;border-radius:999px}
.lrw-map{display:grid;gap:12px}
.lrw-lane{display:grid;grid-template-columns:170px 1fr;gap:16px;align-items:start;padding:16px 18px;border-radius:18px;background:var(--creme)}
.lrw-lane h3{font-size:18px;padding-top:6px}
.lrw-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.lrw-chips li{padding:7px 13px;border-radius:999px;background:var(--paper);border:1px solid var(--sand);font-weight:700;font-size:15px}
.lrw-chips li b{color:var(--terra-t);font-weight:900;margin-right:6px;font-size:13px}

/* Vergleich zweier Verben */
.lrw-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.lrw-pair .conj li{grid-template-columns:96px 1fr}

/* Verben-Zahlen */
.lrw-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lrw-trio .stat b{font-size:clamp(36px,5vw,52px)}
.lrw-trio .stat .es{font-weight:800}

/* Personen-Gruppen él / ellas */
.lrw-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.lrw-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:18px 20px;border-radius:18px;background:var(--paper);border:1px solid var(--sand)}
section.paper .lrw-group{background:var(--creme);border-color:transparent}
.lrw-group i{font-style:italic;padding:4px 11px;border-radius:999px;background:var(--olive-tint);color:var(--olive-d);font-weight:800}
.lrw-group i.main{background:var(--terra);color:#fff}
.lrw-group .to{font-weight:900;color:var(--muted)}
.lrw-group .f{font-family:var(--display);font-size:26px;font-weight:800;font-style:italic}

/* Stundenbalken (45 Minuten) */
.lrw-clock{display:flex;gap:4px;height:14px;border-radius:999px;overflow:hidden;margin-bottom:22px}
.lrw-clock i{display:block;height:100%;transform-origin:0 50%}
.lrw-clock i:nth-child(1){flex:5;background:var(--peach)}
.lrw-clock i:nth-child(2){flex:10;background:var(--terra)}
.lrw-clock i:nth-child(3){flex:15;background:var(--olive)}
.lrw-clock i:nth-child(4){flex:10;background:var(--terra-d)}
.lrw-clock i:nth-child(5){flex:5;background:var(--peach)}
.parts.five{grid-template-columns:repeat(5,minmax(0,1fr))}

/* Ruhige Bewegung */
@media (prefers-reduced-motion:no-preference){
  .lrw-eq.live i,.door:hover .lrw-eq i,a.ser:hover .lrw-eq i{animation:lrw-beat 1.9s ease-in-out infinite}
  .lrw-eq.live i:nth-child(2),.door:hover .lrw-eq i:nth-child(2),a.ser:hover .lrw-eq i:nth-child(2){animation-duration:2.3s;animation-delay:-.7s}
  .lrw-eq.live i:nth-child(3),.door:hover .lrw-eq i:nth-child(3),a.ser:hover .lrw-eq i:nth-child(3){animation-duration:1.6s;animation-delay:-.3s}
  .lrw-eq.live i:nth-child(4),.door:hover .lrw-eq i:nth-child(4),a.ser:hover .lrw-eq i:nth-child(4){animation-duration:2.1s;animation-delay:-1.1s}
  .lrw-roll>span{animation:lrw-roll 9s cubic-bezier(.65,0,.35,1) infinite}
  .conj .beat i{transform-origin:0 50%;animation:lrw-grow 1.1s cubic-bezier(.2,.7,.2,1) both}
  .conj li:nth-child(2) .beat i{animation-delay:.12s}
  .conj li:nth-child(3) .beat i{animation-delay:.24s}
  .conj li:nth-child(4) .beat i{animation-delay:.36s}
  .conj li:nth-child(5) .beat i{animation-delay:.48s}
  .conj li:nth-child(6) .beat i{animation-delay:.6s}
  .lrw-line::after{animation:lrw-travel 14s ease-in-out infinite alternate}
  @supports (animation-timeline:view()){
    .lrw-rv{animation:lrw-rise linear both;animation-timeline:view();animation-range:entry 5% entry 85%}
    .lrw-apples li{animation:lrw-rise linear both;animation-timeline:view();animation-range:entry 10% cover 25%}
    .lrw-apples li:nth-child(2){animation-range:entry 30% cover 30%}
    .lrw-apples li:nth-child(3){animation-range:entry 50% cover 35%}
    .lrw-apples li:nth-child(4){animation-range:entry 70% cover 40%}
    .lrw-clock i{animation:lrw-grow linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
  }
}
@keyframes lrw-beat{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5)}}
@keyframes lrw-roll{0%,26%{transform:translateY(0)}33%,59%{transform:translateY(-1.15em)}66%,92%{transform:translateY(-2.3em)}100%{transform:translateY(-3.45em)}}
@keyframes lrw-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lrw-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes lrw-travel{from{left:3%}to{left:97%}}

@media (max-width:960px){
  .lrw-try{grid-template-columns:1fr}
  .lrw-try figure{order:-1}
  .lrw-plate{max-width:180px}
  .lrw-apples{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .lrw-apples::before{display:none}
  .lrw-pair,.lrw-groups{grid-template-columns:1fr}
  .lrw-lane{grid-template-columns:1fr;gap:10px}
  .parts.five{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .lrw-ten label{grid-template-columns:28px 50px 1fr;gap:10px;padding:12px 14px}
  .lrw-trio{grid-template-columns:1fr}
  .parts.five{grid-template-columns:1fr}
  .lrw-line span{padding:3px 8px;font-size:12px}
}