/* LingoRhythm Lektionen – Mobile First, ab 900 px zweispaltig. Farben und Schrift nach 01-leitfaden-design. */
:root{--ink:#201E1D;--ink2:#3A3431;--soft:#6B625B;--creme:#F5EAD8;--paper:#FFFBF4;--sand:#EADFCB;--sand2:#DCCBB0;--tc:#C67139;--tcd:#A4572A;--tct:#9C5126;--tctint:#F8E6D8;--ol:#7A8A5E;--old:#5C6B43;--oltint:#ECEFE2;--peach:#F6A06B;--peachtint:#FDEBDD}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--ink);font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55;overflow-wrap:anywhere}
a{color:var(--tct)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--tcd);outline-offset:3px;border-radius:8px}
h1,h2,h3,p{margin:0}
.lr-wrap{max-width:640px;margin:0 auto;padding:0 16px 24px;display:flex;flex-direction:column;gap:16px;min-height:100vh}

/* Kopf */
.lr-head{display:flex;flex-direction:column;gap:4px;padding-top:12px}
.lr-bar{display:flex;align-items:center;justify-content:space-between;min-height:48px;gap:8px}
.lr-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font:800 21px/1 Fraunces,Georgia,serif}
.lr-logo em{font-style:normal;color:var(--tct)}
.lr-bar-r{display:flex;gap:8px;align-items:center}
.lr-pill{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:40px;padding:0 12px;border-radius:999px;border:2px solid var(--sand2);background:var(--paper);font-weight:800;font-size:14px}
.lr-pill-prev{background:var(--peachtint);border-color:var(--peach);color:var(--ink2)}
.lr-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:800;text-decoration:none;align-self:flex-start}

/* Karten */
.lr-grid,.lr-col,.lr-narrow{display:flex;flex-direction:column;gap:16px}
.lr-card{background:var(--paper);border:1px solid var(--sand);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:14px}
.lr-kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--old)}
.lr-hero{border-radius:24px;padding:22px 20px;gap:12px}
.lr-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.lr-hero h1{font:800 clamp(36px,9vw,46px)/1.05 Fraunces,Georgia,serif;color:var(--tcd);margin-top:2px}
.lr-meta{font:600 21px/1.3 Fraunces,Georgia,serif}
.lr-apple{width:64px;height:64px;flex:none}
.lr-example{background:var(--tctint);border-radius:18px;padding:14px 16px}
.lr-example .lr-es{font:600 22px/1.35 Fraunces,Georgia,serif;font-style:italic}
.lr-es b{color:var(--tct);font-weight:800}
.lr-de{color:var(--soft)}
.lr-tags{display:flex;flex-wrap:wrap;gap:8px}
.lr-tags span,.lr-chips span{padding:6px 12px;border-radius:999px;background:var(--oltint);color:var(--old);font-weight:800;font-size:14px}

/* Rhythmus */
.lr-rhythm{display:flex;flex-direction:column;gap:10px;padding:4px 4px 0}
.lr-rhythm-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lr-rhythm h2{font:800 20px/1.2 Fraunces,Georgia,serif}
.lr-rhythm-h span{font-weight:800;color:var(--soft);font-size:15px}
.lr-bars{display:grid;gap:8px}
.lr-bar-i{display:flex;flex-direction:column;align-items:center;gap:6px}
.lr-bar-i i{display:block;width:100%;height:12px;border-radius:999px;background:var(--sand2);transition:background .3s}
.lr-bar-i.is-done i{background:var(--tc)}
.lr-bar-i span{font-size:12.5px;font-weight:800;color:var(--soft);overflow-wrap:normal;white-space:nowrap}
.lr-bar-i.is-done span{color:var(--ink2)}
.lr-bars-s{gap:6px}.lr-bars-s i{height:10px}
.lr-intro{padding:10px 4px 0}
.lr-intro h2{font:800 26px/1.2 Fraunces,Georgia,serif}
.lr-intro p{color:var(--soft);margin-top:4px}

/* Schritte */
.lr-step-h{display:flex;align-items:center;gap:12px}
.lr-step-h h3{font-size:20px;font-weight:800;line-height:1.3}
.lr-step-h div{display:flex;flex-direction:column}
.lr-step-h div span{color:var(--soft);font-size:15px}
.lr-num{width:36px;height:36px;flex:none;border-radius:50%;background:var(--tctint);color:var(--tct);display:flex;align-items:center;justify-content:center;font:800 18px Fraunces,Georgia,serif}
.lr-card h3{font-size:20px;font-weight:800;line-height:1.3}
.lr-small{font-size:15px;color:var(--soft)}

/* Player */
.lr-player{display:flex;align-items:center;gap:14px}
.lr-play{width:60px;height:60px;flex:none;border-radius:50%;border:0;background:var(--tcd);color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer}
.lr-play .i-pause,.lr-play.is-on .i-play{display:none}
.lr-play.is-on .i-pause{display:block}
.lr-player-r{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.lr-track{height:8px;border-radius:999px;background:var(--sand);cursor:pointer;position:relative;touch-action:none}
.lr-track::before{content:"";position:absolute;inset:-12px 0}
.lr-track i{display:block;width:0;height:8px;border-radius:999px;background:var(--peach)}
.lr-player-r .lr-small{font-size:14px}

/* Häkchen-Zeile */
.lr-check{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 14px;border-radius:16px;border:2px solid var(--sand2);cursor:pointer}
.lr-check input{width:24px;height:24px;accent-color:var(--tcd);flex:none;margin:0}
.lr-check>span{display:flex;flex-direction:column;line-height:1.3}
.lr-check>span>span{font-size:14px;color:var(--soft)}

/* Knöpfe */
.lr-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border-radius:999px;background:var(--tcd);color:var(--paper);font-weight:800;font-size:17px;text-decoration:none;text-align:center}
.lr-btn:hover{background:var(--tct)}
.lr-btn-o{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:999px;border:2px solid var(--sand2);background:transparent;font-weight:800;font-size:16px;color:var(--ink);cursor:pointer;text-decoration:none;list-style:none}
.lr-btn-o::-webkit-details-marker,.lr-more summary::-webkit-details-marker{display:none}
.lr-btn-ol{border-color:var(--old);color:var(--old)}
details[open]>.lr-btn-o{margin-bottom:12px}

/* Liedtext */
.lr-lyrics ol{margin:0;padding:14px 16px;list-style:none;background:var(--creme);border-radius:16px;display:flex;flex-direction:column;gap:10px}
.lr-lyrics li{display:flex;flex-direction:column;line-height:1.35}
.lr-lyrics .lr-es{font-weight:700;font-size:17px;font-style:italic}

/* Dateien */
.lr-file{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 14px;border-radius:16px;background:var(--creme);text-decoration:none;color:var(--ink)}
.lr-file>span{display:flex;flex-direction:column;line-height:1.3}
.lr-file>span>span{font-size:14px;color:var(--soft)}
.lr-file svg{color:var(--tct);flex:none}
.lr-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lr-chips span{border-radius:14px;background:var(--creme);color:var(--ink);font-weight:700;font-size:15px;padding:10px 12px}

/* Merkkarten */
.lr-cardrow{display:flex;gap:14px;align-items:center}
.lr-phone{width:118px;height:auto;aspect-ratio:1170/2532;object-fit:cover;flex:none;border-radius:18px;border:3px solid var(--ink);background:var(--creme)}
.lr-more summary{display:flex;align-items:center;justify-content:center;min-height:44px;font-weight:800;color:var(--tct);cursor:pointer;list-style:none}
.lr-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;margin-top:8px}
.lr-thumbs a{display:flex;flex-direction:column;gap:6px;align-items:center;text-decoration:none;font-weight:800;font-size:14px}
.lr-thumbs img{width:100%;height:auto;border-radius:10px;border:1px solid var(--sand2)}
.lr-only-desk{display:none}

/* 1-3-7 */
.lr-137{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lr-137-i{background:var(--creme);border-radius:16px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:4px}
.lr-137-i svg{width:40px;height:40px}
.lr-137-i b{color:var(--soft)}
.lr-137-i.is-done b{color:var(--ink)}

/* App */
.lr-app{background:var(--oltint);border:0}
.lr-app-h{display:flex;align-items:center;gap:12px}
.lr-how{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}

/* Als Nächstes */
.lr-next{flex-direction:row;align-items:center;justify-content:space-between;text-decoration:none;color:var(--ink);padding:18px 20px}
.lr-next>span{display:flex;flex-direction:column;line-height:1.35}
.lr-next b{font-size:18px}
.lr-meta-s{color:var(--soft)}
.lr-next svg{color:var(--tct);flex:none}

/* Übersicht */
.lr-h1{font:800 34px/1.1 Fraunces,Georgia,serif;margin:8px 4px 0}
.lr-h2{font:800 20px/1.2 Fraunces,Georgia,serif;margin:6px 4px 0}
.lr-cont{border-radius:24px}
.lr-cont-h{display:flex;align-items:center;gap:14px}
.lr-cont-h .lr-apple{width:52px;height:52px}
.lr-cont-h div{display:flex;flex-direction:column;line-height:1.35}
.lr-cont-h b{font-size:20px}
.lr-cont-h span{color:var(--soft)}
.lr-due{display:flex;align-items:center;gap:12px;background:var(--oltint);border-radius:20px;padding:16px 18px;font-weight:700;color:var(--ink);text-decoration:none;min-height:56px}
.lr-list{display:flex;flex-direction:column;gap:10px}
.lr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px;padding:10px 16px;border-radius:18px;background:var(--paper);border:1px solid var(--sand);text-decoration:none;color:var(--ink)}
.lr-row>span{display:flex;flex-direction:column;line-height:1.35}
.lr-row svg{color:var(--tct);flex:none}
.lr-row.is-cur{border:2px solid var(--tc)}
.lr-row.is-locked{background:transparent;border:2px dashed var(--sand2)}
.lr-row.is-locked svg{color:var(--soft)}
.lr-st{font-size:14px;color:var(--soft);font-weight:700}
.lr-row.is-cur .lr-st{color:var(--tct)}
.lr-st.is-ok{color:var(--old)}
.lr-acc{margin-top:8px}

/* Fuß */
.lr-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:12px;text-align:center}
.lr-foot p{font-size:14px;color:var(--soft)}

/* Tablet */
@media (min-width:640px){
	.lr-wrap{padding:0 24px 32px}
	.lr-chips{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Desktop: zwei Spalten, Song-Player bleibt links sichtbar */
@media (min-width:900px){
	.lr-wrap{max-width:1120px}
	.lr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
	.lr-narrow{max-width:720px;width:100%;margin:0 auto}
	.lr-btn{align-self:flex-start;min-width:240px}
	.lr-only-touch{display:none}
	.lr-only-desk{display:flex}
	.lr-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
	.lr-acc,.lr-cont .lr-btn{align-self:flex-start}
}
@media (hover:none){.lr-btn:hover{background:var(--tcd)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Probelektion, Hinweis, Formular, Anleitung (0.2.0) */
.lr-trial{background:var(--peachtint);border:1px solid var(--peach);border-radius:16px;padding:12px 16px;font-size:15px}
.lr-form{display:flex;flex-direction:column;gap:14px}
.lr-field{display:flex;flex-direction:column;gap:6px;font-weight:800}
.lr-field input{min-height:52px;padding:0 16px;border-radius:16px;border:2px solid var(--sand2);background:var(--paper);font:600 17px Nunito,system-ui,sans-serif;color:var(--ink)}
.lr-err{background:#FBE3DC;border:1px solid #D88B73;border-radius:14px;padding:10px 14px;font-weight:700}
.lr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lr-loophelp summary{cursor:pointer;font-weight:800;color:var(--old);min-height:44px;display:flex;align-items:center}
.lr-loophelp .lr-how{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.lr-loophelp summary{justify-content:flex-start}