/* ==========================================================================
   Referenz Lernstübchen – baut auf case-db.css auf (Hero, Akte, Kacheln)
   Zweitfarbe: warmes Stift-Bernstein aus der Lernstübchen-Marke
   ========================================================================== */
.ls-page { --db: #D9821B; --db-hi: #F2A33A; --db-soft: #FDF1DF; }
.ls-page .db-accent { background: linear-gradient(120deg, #D9821B, #F2A33A 60%, #F7C46B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ls-page .section-dark .ap-num { background-image: linear-gradient(120deg, #FCE3B8 0%, var(--db-hi) 50%, var(--db) 100%); }
.ls-page .db-facts dt { font-size: clamp(2rem, 3.6vw, 3.25rem); }

/* ---------- 01 Suche ---------- */
.ls-search { max-width: 720px; margin: 0 auto; padding: 22px; border-radius: 24px; background: #F7F5F1; color: var(--ink); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9); }
.ls-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 2px solid var(--db-hi); font-size: 1.0625rem; font-weight: 500; }
.ls-bar .icon { width: 20px; height: 20px; color: var(--db); }
.ls-typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; }
.ls-search.is-inview .ls-typed { animation: ls-type 1.1s steps(20) .2s forwards; }
@keyframes ls-type { to { width: 19ch; } }
.ls-caret { width: 2px; height: 20px; background: var(--db); animation: bs-blink 1s steps(1) infinite; }
@keyframes bs-blink { 50% { opacity: 0; } }
.ls-syn { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 2px; }
.ls-syn span { padding: 4px 10px; border-radius: 999px; background: var(--db-soft); color: #8A4E08; font-size: .75rem; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.ls-search.is-inview .ls-syn span { opacity: 1; transform: none; }
.ls-search.is-inview .ls-syn span:nth-child(1) { transition-delay: 1.3s; } .ls-search.is-inview .ls-syn span:nth-child(2) { transition-delay: 1.4s; } .ls-search.is-inview .ls-syn span:nth-child(3) { transition-delay: 1.5s; }
.ls-results { display: grid; gap: 8px; }
.ls-res { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid #ECE8E0; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.16, 1, .3, 1); }
.ls-search.is-inview .ls-res { opacity: 1; transform: none; }
.ls-search.is-inview .r1 { transition-delay: 1.7s; } .ls-search.is-inview .r2 { transition-delay: 1.85s; } .ls-search.is-inview .r3 { transition-delay: 2s; }
.ls-search.is-inview .r1 { box-shadow: 0 0 0 2px var(--db-hi); }
.ls-thumb { width: 52px; height: 64px; border-radius: 6px; background: #fff; border: 1px solid #E4DFD5; position: relative; overflow: hidden; }
.ls-thumb::before { content: ""; position: absolute; left: 8px; right: 8px; top: 10px; height: 4px; border-radius: 2px; background: var(--c); box-shadow: 0 10px 0 #E9E5DD, 0 18px 0 #E9E5DD, 0 26px 0 #E9E5DD, 0 34px 0 #E9E5DD; }
.t1 { --c: #F2A33A; } .t2 { --c: #5BB0E8; } .t3 { --c: #7BC67E; }
.ls-res b { display: block; font-size: 1rem; }
.ls-res small { font-size: .8125rem; color: var(--muted); }
.ls-dl { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--db-soft); color: #8A4E08; font-weight: 700; }

/* ---------- 02 Zahlungsabgleich ---------- */
.ls-pay { max-width: 900px; margin: 0 auto; padding: 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(11, 11, 12, .5); }
.ls-pay-h, .ls-tx { display: grid; grid-template-columns: 7rem minmax(0, 1.4fr) minmax(0, 1fr) 9.5rem; gap: 14px; align-items: center; }
.ls-pay-h { padding: 4px 12px 12px; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.ls-tx { padding: 14px 12px; border-bottom: 1px solid #F0EFEA; font-size: .9375rem; }
.ls-tx:last-child { border-bottom: 0; }
.ls-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.ls-ref { color: var(--ink-2); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .8125rem; }
.ls-m { justify-self: start; padding: 3px 9px; border-radius: 999px; background: #F2F1ED; color: var(--muted); font-size: .75rem; font-weight: 600; opacity: 0; transition: opacity .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease); transition-delay: calc(var(--k) * .45s + .3s); }
.ls-out { justify-self: end; padding: 5px 11px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; opacity: 0; transform: scale(.8); transition: opacity .4s var(--ease), transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--k) * .45s + .55s); }
.ls-out.ok { background: rgba(30, 122, 62, .12); color: #1E7A3E; }
.ls-out.team { background: #FBEFD9; color: #A15C07; }
.ls-pay.is-inview .ls-m, .ls-pay.is-inview .ls-out { opacity: 1; transform: none; }
.ls-pay.is-inview .ls-tx:not(:last-child) .ls-m { background: var(--db-soft); color: #8A4E08; }

/* ---------- 03 Schullizenzen ---------- */
.ls-seats { max-width: 620px; margin: 0 auto; padding: 24px; border-radius: 24px; background: var(--dark-2); border: 1px solid var(--dark-line); }
.ls-seats-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.ls-seats-h b { color: #fff; font-size: 1.125rem; }
.ls-seats-h span { color: var(--on-dark-2); font-size: .875rem; }
.ls-seats-h em { font-style: normal; color: var(--db-hi); font-weight: 700; }
.ls-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ls-grid .s { display: grid; place-items: center; align-content: center; gap: 2px; aspect-ratio: 1; border-radius: 18px; font-size: 1.5rem; font-weight: 700; color: #fff; opacity: 0; transform: scale(.7); transition: opacity .4s var(--ease), transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.ls-grid .s small { font-size: .625rem; font-weight: 600; opacity: .85; }
.ls-grid .on { background: linear-gradient(135deg, #F2A33A, #D9821B); }
.ls-grid .adm { background: linear-gradient(135deg, #FFFFFF, #E9E5DD); color: var(--ink); }
.ls-grid .inv { background: transparent; border: 2px dashed var(--db-hi); color: var(--db-hi); font-size: 1.25rem; }
.ls-grid .free { background: transparent; border: 2px dashed #3A3A42; color: #5A5A62; }
.ls-seats.is-inview .s { opacity: 1; transform: none; }
.ls-seats.is-inview .s:nth-child(2) { transition-delay: .1s; } .ls-seats.is-inview .s:nth-child(3) { transition-delay: .2s; } .ls-seats.is-inview .s:nth-child(4) { transition-delay: .3s; }
.ls-seats.is-inview .s:nth-child(5) { transition-delay: .4s; } .ls-seats.is-inview .s:nth-child(6) { transition-delay: .5s; } .ls-seats.is-inview .s:nth-child(7) { transition-delay: .8s; } .ls-seats.is-inview .s:nth-child(8) { transition-delay: 1s; }
.ls-seats.is-inview .inv i { font-style: normal; animation: ls-bob 1.8s ease-in-out 1.4s infinite; }
@keyframes ls-bob { 50% { transform: translateY(-4px); } }

/* ---------- 04 Support ---------- */
.ls-file { max-width: 720px; margin: 0 auto; padding: 24px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(11, 11, 12, .5); }
.ls-file-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ls-av { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #F2A33A, #D9821B); color: #fff; font-weight: 700; font-size: 1.125rem; }
.ls-file-h b { display: block; font-size: 1.0625rem; }
.ls-file-h small { font-size: .8125rem; color: var(--muted); }
.ls-badge { padding: 5px 11px; border-radius: 999px; background: rgba(30, 122, 62, .12); color: #1E7A3E; font-size: .75rem; font-weight: 700; }
.ls-file-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.ls-file-grid div { padding: 14px; border-radius: 14px; background: #FAF8F4; border: 1px solid #EFEBE3; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s cubic-bezier(.16, 1, .3, 1); }
.ls-file.is-inview .ls-file-grid div { opacity: 1; transform: none; }
.ls-file.is-inview .ls-file-grid div:nth-child(2) { transition-delay: .15s; } .ls-file.is-inview .ls-file-grid div:nth-child(3) { transition-delay: .3s; }
.ls-file-grid small { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ls-file-grid b { font-size: .9375rem; }
.ls-note { padding: 14px 16px; border-radius: 14px; background: var(--db-soft); color: #5A3A0A; font-size: .9375rem; line-height: 1.5; opacity: 0; transition: opacity .5s var(--ease) .6s; }
.ls-file.is-inview .ls-note { opacity: 1; }
.ls-note b { display: block; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }

/* ---------- Zitat ---------- */
.ls-quote { max-width: 40rem; margin: 64px auto 0; text-align: center; }
.ls-quote blockquote { margin: 0; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 600; letter-spacing: -0.045em; color: var(--ink); }
.ls-quote figcaption { margin-top: 12px; font-size: .9375rem; color: var(--muted); }
.ls-quote figcaption b { color: var(--ink); }

@media (max-width: 640px) {
  .ls-pay-h { display: none; }
  .ls-tx { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "a o" "r r" "m m"; row-gap: 6px; }
  .ls-amt { grid-area: a; } .ls-out { grid-area: o; } .ls-ref { grid-area: r; } .ls-m { grid-area: m; }
  .ls-file-grid { grid-template-columns: 1fr; }
  .ls-grid .s { border-radius: 14px; font-size: 1.125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-typed { width: auto; } .ls-syn span, .ls-res, .ls-m, .ls-out, .ls-grid .s, .ls-file-grid div, .ls-note { opacity: 1 !important; transform: none !important; }
}