/* L1 KI-Lernbegleiter — builds on lernpfad.css (.lp, .lp-card, .lp-btn, .lp-bubble, .lp-msg); only what is new here.
   Mobile first, touch targets >= 48px, state never by colour alone (icon + text), no horizontal scroll at 390px. */

.lb-steps { margin: .5rem 0 0; color: var(--tl-paper-muted); font-size: .95rem; }

/* Self-assessment: five big buttons in one row (5 x ~60px at 390px). */
.lb-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin: .75rem 0 .35rem; }
.lp .lb-scale-btn {
    min-height: 3.5rem; padding: .4rem .2rem; border-radius: .9rem; justify-content: center; flex-direction: column; gap: 0;
    font-size: 1.35rem; line-height: 1.1;
}
.lb-scale-legend { display: flex; justify-content: space-between; gap: .5rem; color: var(--tl-paper-muted); font-size: .9rem; margin: 0; }

/* Mode cards: each card IS the submit button of its mode (one form, PRG). */
.lb-modes { display: grid; gap: .75rem; margin-top: .75rem; }
.lb-mode-card {
    display: block; width: 100%; box-sizing: border-box; text-align: left; cursor: pointer;
    min-height: 3rem; padding: .9rem 1rem; border-radius: .9rem;
    border: 2px solid var(--tl-paper-line); background: var(--tl-paper-surface); color: var(--tl-paper-ink);
    font: inherit; line-height: 1.4;
}
.lb-mode-card:hover, .lb-mode-card:focus-visible { border-color: var(--tl-navy); outline: 3px solid var(--tl-orange-light); outline-offset: 2px; }
.lb-mode-name { display: flex; align-items: center; gap: .5rem; margin: 0 0 .2rem; font-weight: 700; font-size: 1.125rem; }
.lb-mode-for { display: block; margin: 0; font-size: 1rem; color: var(--tl-paper-ink); overflow-wrap: anywhere; }
.lb-tag {
    display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
    background: #fff4e5; color: #7a4a00; border: 1px solid #f3cf95;
}

/* Topic list: one button per topic. */
.lb-topics { display: grid; gap: .5rem; margin-top: .5rem; }
.lp .lb-topic-btn { width: 100%; justify-content: flex-start; text-align: left; overflow-wrap: anywhere; }

/* Chat input: one line + send; the two helper buttons below. Wraps, never scrolls sideways. */
.lb-send { display: flex; gap: .5rem; align-items: stretch; }
.lb-send .lp-input { margin: 0; min-width: 0; flex: 1 1 auto; }
.lb-send .lp-btn { flex: 0 0 auto; }
.lb-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.lb-turns { margin: 0 0 .5rem; font-weight: 700; font-size: .95rem; color: var(--tl-navy); }
.lb-chat { display: flex; flex-direction: column; }
.lp .lb-chat .lp-bubble { margin: .4rem 0; overflow-wrap: anywhere; }

/* Summary + take-home prompt. */
.lb-summary { white-space: pre-line; }
.lb-prompt {
    margin: .5rem 0 .25rem; padding: .85rem 1rem; border-radius: .75rem;
    background: var(--tl-paper); border: 2px dashed var(--tl-paper-line); color: var(--tl-paper-ink);
    font-family: inherit; font-size: 1.0625rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.lb-copy { margin-top: .4rem; }
.lb-copy[hidden] { display: none; }
.lb-hint { color: var(--tl-paper-muted); font-size: .95rem; margin: .5rem 0 0; }

/* Preview / demo: one card per mode with its example dialog behind <details>. */
.lb-preview-mode { margin-top: 1rem; cursor: default; }
.lb-preview-mode details { margin-top: .6rem; }
.lb-preview-mode summary { cursor: pointer; font-weight: 700; min-height: 3rem; display: flex; align-items: center; }

/* L2-Zusatz: the example inside the card — folded (<details>) below 64rem, open in the card from 64rem on. */
.lb-ex-wide { display: none; }

/* L2-Zusatz desktop grid: from 64rem the mode cards sit in 2-3 columns (wider page); the chat keeps the narrow
   .lp column (max 44rem, centred). Phones and tablets unchanged. */
@media (min-width: 64rem) {
    .lp.lb-wide { max-width: 76rem; }
    .lb-wide .lb-mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; align-items: start; }
    .lb-wide .lb-mode-grid > .lb-preview-mode { margin-top: 0; }
    .lb-wide .lb-ex-narrow { display: none; }
    .lb-wide .lb-ex-wide { display: block; margin-top: .6rem; }
    .lb-wide .lb-head-narrow, .lb-wide > .lp-head, .lb-wide > .lp-demobar { max-width: 44rem; margin-left: auto; margin-right: auto; }
}

@media (max-width: 47.99rem) {
    .lp .lb-scale-btn { min-height: 3.25rem; font-size: 1.25rem; }
}