/* =====================================================================
   components.css – Bedienelemente: Gliederung, Bewertung, Kommentare,
   Aufgaben (Fragen, Lücken, Markieren, Zuordnen, Kreuzworträtsel),
   Selbstkontrollaufgaben (lehrquiz.js), KI-Elemente, Startseite.
   Ersetzt die entsprechenden Teile von NewSite.css und lehrquiz.css.
   ===================================================================== */

/* ---------- Gliederung (jsTree) ---------- */
#tree { padding: .5rem .25rem 2rem; font-size: .975rem; }
#tree i[class*=-unread]::before, #tree i[class*=-read]::before { font-family: 'Font Awesome 7 Pro'; font-weight: 400; color: var(--up-orange-icon); }
#tree i[class*=-read] { position: relative; }
#tree i[class*=-read]::before { color: var(--bs-secondary-color); }
#tree i[class*=-read]::after { content: '\f00c'; font-family: 'Font Awesome 7 Pro'; font-weight: 900; position: absolute; right: -5px; bottom: -3px; line-height: 1; font-size: .75rem; color: #2f7d32; text-shadow: 0 0 2px var(--bs-body-bg), 0 0 2px var(--bs-body-bg); }
[data-bs-theme=dark] #tree i[class*=-read]::after { color: #6fcf73; }
#tree i.home-read::before, #tree i.home-unread::before { content: '\f015'; }
#tree i.summary-read::before, #tree i.summary-unread::before { content: '\f0e8'; }
#tree i.finish-read::before, #tree i.finish-unread::before { content: '\f11e'; }
#tree i.check-read::before, #tree i.check-unread::before { content: '\f14a'; }
#tree i.case-read::before, #tree i.case-unread::before { content: '\f044'; }
#tree i.video-read::before, #tree i.video-unread::before { content: '\f1c8'; }
#tree i.interact-read::before, #tree i.interact-unread::before { content: '\f0e7'; }
#tree i.cards-read::before, #tree i.cards-unread::before { content: '\f0ae'; }
#tree i.chapter-read::before, #tree i.chapter-unread::before { content: '\f12e'; }
#tree i.text-read::before, #tree i.text-unread::before, #tree i.folder-read::before, #tree i.folder-unread::before { content: '\f15c'; }
#tree i.crossword-read::before, #tree i.crossword-unread::before { content: '\f05b'; }
#SearchView .list-group-item, #Archiv .list-group-item { cursor: pointer; }

/* ---------- Bewertung (Sterne) ---------- */
#Ranking .scale { display: inline-flex; }
.GradeButton { position: relative; width: 2rem; height: 2rem; padding: 0; border: 0; background: none; color: var(--up-grey); font: 400 1.25rem/1 'Font Awesome 7 Pro'; cursor: pointer; border-radius: 50%; }
.GradeButton::after { content: '\f005'; }
.GradeButton.active::before, .GradeButton.half::before, .GradeButton.hover::before { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; color: var(--up-orange-icon); content: '\f005'; }
.GradeButton.half::before { content: '\f089'; }
.GradeButton.hover::before { color: var(--up-orange); }
.rankers { margin-left: .5rem; }
#CommentView .card { border-radius: .75rem; }
.license a { color: inherit; }

/* Seite merken (Büroklammer im Lehrtext) */
button.markPage { float: right; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: none; color: var(--up-grey); font: 300 1.6rem/1 'Font Awesome 7 Pro'; transition: transform .25s ease, color .25s; }
button.markPage::before { content: '\f0c6'; }
button.markPage:hover, button.markPage.checked { color: var(--up-orange-icon); transform: rotate(-45deg); }

/* ---------- Aufgaben im Lehrtext ---------- */
#scroll .frage3, #scroll td.frage { cursor: pointer; text-align: center; }
#scroll .frage-inaktiv { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); text-align: center; }
#scroll .antwort { background: transparent; }
#Blaettern:hover { background: var(--bs-emphasis-color); color: var(--bs-body-bg); }

/* Text markieren */
#scroll .highlightarea { position: relative; border: 2px dashed var(--up-orange); border-radius: .75rem; padding: 2rem 1rem 1rem; margin: 1.25rem 0; min-height: 3rem; }
#scroll .highlightarea::before { content: 'Markieren Sie die zutreffenden Stellen'; position: absolute; top: .5rem; left: 1rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--up-accent); }
#scroll .highlightarea.finished { border-style: solid; border-color: #2f7d32; }
span.selectedText, span.selectedText.yellow { background: #fff2a8; color: #1f2937; }
span.selectedText.red { background: #ffd1cf; color: #1f2937; }
span.selectedText.blue { background: #cfe8ff; color: #1f2937; }
span.selectedText.green { background: #c9efcd; color: #1f2937; }
span.selectedText.highlight { background: #8f1c13; color: #fff; }
div#colorpopup { position: absolute; z-index: 1060; display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 999px; box-shadow: var(--up-shadow); user-select: none; }
div#colorpopup > button { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--bs-border-color); cursor: pointer; }
div#colorpopup > button:hover { border-color: var(--bs-emphasis-color); }
div#colorpopup > button.green { background: #2f7d32; } div#colorpopup > button.red { background: #d92d20; }
div#colorpopup > button.blue { background: #1d6fd8; } div#colorpopup > button.yellow { background: #f5d000; } div#colorpopup > button.white { background: #fff; }
div#colorpopup > button.cancel { border: 0; background: none; font-size: 1.25rem; line-height: 1; color: var(--bs-body-color); }

/* Lückentext (Eingabefeld/Auswahlliste im Text) */
#scroll select.gapList, #scroll input.gapText { display: inline-block; width: auto; min-width: 9rem; max-width: 100%; min-height: 2.5rem; margin: .1rem .2rem; padding: .25rem .6rem; font-size: 1rem; border: 1px solid var(--up-grey); border-radius: .4rem; background-color: var(--bs-body-bg); color: var(--bs-body-color); }
#scroll .is-valid { border-color: #2f7d32; background-color: #edf7ee; }
#scroll .is-invalid { border-color: #b42318; }
#scroll div.explanation { margin: .75rem 0; padding: .75rem 1rem; border-radius: .75rem; background: var(--up-soft); border: 1px solid var(--bs-border-color); font-size: 1rem; }
#scroll div.explanation.finished { background: #edf7ee; text-align: center; }
[data-bs-theme=dark] #scroll .is-valid, [data-bs-theme=dark] #scroll div.explanation.finished { background-color: #162819; }

/* Zuordnen (Ziehen oder Antippen) */
.dragGame { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.25rem 0; }
@media (min-width: 576px) { .dragGame { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.dragGame .source, .dragGame .target { height: auto; min-height: 4rem; }
.dragGame .source::before, .dragGame .target::before { display: block; margin-bottom: .4rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); }
.dragGame .source::before { content: 'Begriffe'; } .dragGame .target::before { content: 'Zuordnen zu'; }
.dragGame .subelement { margin: 0 0 .5rem; padding: .6rem .8rem; min-height: 2.75rem; border: 1px solid var(--up-grey); border-radius: .6rem; background: var(--bs-body-bg); color: var(--bs-body-color); cursor: grab; text-align: left; touch-action: none; }
.dragGame .subelement:hover, .dragGame .subelement.ui-draggable-dragging { border-color: var(--up-orange); box-shadow: var(--up-shadow); z-index: 900; }
.dragGame .subelement[aria-pressed=true] { border: 2px solid var(--up-orange); background: var(--up-soft); }
.dragGame .children .subelement, .dragGame .itarget .subelement { cursor: default; border-color: #2f7d32; margin: .4rem 0 0; }
.toplevel { margin-bottom: .75rem; padding: .6rem .75rem; min-height: 4.5rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-tertiary-bg); }
.toplevel .head { font-weight: 700; }
.toplevel.active, div.itarget.active { border-color: var(--up-orange); }
.toplevel.hover, div.itarget.hover, .dragGame.has-choice .toplevel:not(.noDrag):hover, .dragGame.has-choice div.itarget:not(.finished):hover { border-color: var(--up-orange); background: var(--up-soft); }
.finished .toplevel, div.itarget.finished { border-color: #2f7d32; }
div.itarget { margin: .4rem 0; padding: .5rem; min-height: 3.5rem; border: 1px dashed var(--up-grey); border-radius: .5rem; color: var(--bs-secondary-color); }
.dragGame .success { padding: 1rem; border-radius: .75rem; background: #edf7ee; color: #22602a; font-weight: 700; text-align: center; }
[data-bs-theme=dark] .dragGame .success { background: #162819; color: #9be29e; }

/* Kreuzworträtsel */
#scroll .crossword { cursor: default; overflow-x: auto; }
#scroll div.crossword table { border-collapse: collapse; border-spacing: 0; background: var(--bs-body-bg); }
#scroll div.crossword td { position: relative; width: 1.9rem; height: 1.9rem; padding: 0; text-align: center; vertical-align: middle; border: 1px solid transparent; background: var(--bs-body-bg); color: var(--bs-body-color); overflow: hidden; font-size: .9rem; }
#scroll div.crossword td.text { border-color: var(--up-grey); cursor: pointer; }
#scroll div.crossword td input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; text-align: center; font-weight: 700; text-transform: uppercase; background: var(--up-soft); color: var(--bs-emphasis-color); outline: 2px solid var(--up-orange); }
#scroll div.crossword td.right { border-right-color: var(--bs-emphasis-color); } #scroll div.crossword td.left { border-left-color: var(--bs-emphasis-color); }
#scroll div.crossword td.top { border-top-color: var(--bs-emphasis-color); } #scroll div.crossword td.bottom { border-bottom-color: var(--bs-emphasis-color); }
#scroll div.crossword td.sepHoriz { border-top-color: var(--bs-emphasis-color); border-bottom-color: var(--bs-emphasis-color); }
#scroll div.crossword td.sepVert { border-left-color: var(--bs-emphasis-color); border-right-color: var(--bs-emphasis-color); }
#scroll div.crossword td.vertDesc, #scroll div.crossword td.horDesc, #scroll div.crossword td.bothDesc { background: var(--bs-tertiary-bg); color: var(--up-accent); cursor: pointer; font-weight: 700; }
#scroll div.crossword td.vertDesc::after { content: '\2193'; } #scroll div.crossword td.horDesc::after { content: '\2192'; } #scroll div.crossword td.bothDesc::after { content: '\21b3'; }
#scroll div.crossword td.highlight.horDesc, #scroll div.crossword td.highlight.vertDesc { background: var(--up-orange); color: var(--up-on-orange); }
#scroll div.crossword td.text.finished { background: #edf7ee; }
[data-bs-theme=dark] #scroll div.crossword td.text.finished { background: #162819; }
#scroll div#termlist { float: none; width: auto; margin-top: 1rem; border-top: 1px solid var(--bs-border-color); font-size: .95rem; }
#scroll div#termlist h2 { font-size: .8rem; margin: .75rem 0 .25rem; }
#scroll div#termlist div { padding: .4rem .5rem; border-radius: .4rem; cursor: pointer; }
#scroll div#termlist div.active { background: var(--up-soft); }
#scroll div#termlist div.finished { text-decoration: line-through; color: var(--bs-secondary-color); }
@media (min-width: 992px) { #scroll div#termlist { float: right; width: 13rem; margin: 0 0 1rem 1rem; border-top: 0; border-left: 1px solid var(--bs-border-color); padding-left: .75rem; } }

/* Schaltflächen-Fokus für per Skript bedienbar gemachte Elemente */
#scroll [role=button]:focus-visible, .dragGame [tabindex]:focus-visible { outline: 3px solid var(--up-orange); outline-offset: 2px; }

/* ---------- Selbstkontrollaufgaben (lehrquiz.js) ---------- */
div.lehr-quiz { margin: 1.5rem 0; padding: 1rem 1.1rem; border: 1px solid var(--bs-border-color); border-left: 4px solid var(--up-orange); border-radius: .75rem; background: var(--bs-tertiary-bg); }
div.lehr-quiz .lq-titel { margin-bottom: .5rem; }
div.lehr-quiz .lq-liste { padding-left: 1.4rem; margin-bottom: .75rem; }
div.lehr-quiz .lq-item { margin-bottom: .6rem; padding: .25rem .4rem; border-radius: .4rem; }
div.lehr-quiz .lq-item.form-check { padding-left: 2rem; }
div.lehr-quiz .lq-ok { background: var(--bs-success-bg-subtle); }
div.lehr-quiz .lq-falsch { background: var(--bs-danger-bg-subtle); }
div.lehr-quiz .lq-feedback:empty { display: none; }
div.lehr-quiz .lq-saetze { line-height: 2.1; }
div.lehr-quiz .lq-satz { display: inline; padding: .1rem .2rem; border: 1px dashed transparent; border-radius: .25rem; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
div.lehr-quiz .lq-satz:hover, div.lehr-quiz .lq-satz:focus-visible { border-color: var(--bs-secondary-color); }
div.lehr-quiz .lq-satz.lq-markiert { background: var(--up-soft); border-color: var(--up-orange); }
div.lehr-quiz .lq-satz.lq-ok { background: var(--bs-success-bg-subtle); border-color: var(--bs-success); }
div.lehr-quiz .lq-satz.lq-falsch { background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger); }
div.lehr-quiz .lq-satz.lq-uebersehen { border: 2px solid var(--bs-danger); }
div.lehr-quiz .lq-karte { min-height: 8rem; display: flex; flex-direction: column; justify-content: center; gap: .75rem; padding: 1.25rem; text-align: center; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .875rem; box-shadow: var(--up-shadow); }
div.lehr-quiz .lq-vorne { font-weight: 600; font-size: 1.05rem; }
div.lehr-quiz .lq-hinten { border-top: 1px solid var(--bs-border-color); padding-top: .75rem; }

/* ---------- KI-Elemente ---------- */
figure.ki-grafik { margin: 1.5rem auto; max-width: 50rem; text-align: center; }
figure.ki-grafik img { max-width: 100%; height: auto; background: #fff; border-radius: .5rem; border: 1px solid var(--bs-border-color); }
figure.ki-grafik figcaption { margin-top: .4rem; font-size: .875rem; color: var(--bs-secondary-color); }
.lehrtext img[src$=".svg"], .lehrtext img[src$=".png"] { background: #fff; }
.ki-grafik-vorschau img { background: #fff; max-height: 26rem; }
.ki-leiste { border-bottom: 1px dashed var(--bs-border-color); padding-bottom: .35rem; grid-column: 1 / -1; align-self: start; }
@media (min-width: 992px) { .ki-leiste { flex-wrap: nowrap; height: 2.75rem; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } }
.ki-vorschau { max-height: 28rem; overflow: auto; background: var(--bs-body-bg); }
.ki-vorschau del, .ki-diff del { background: var(--bs-danger-bg-subtle); text-decoration: line-through; }
.ki-vorschau ins, .ki-diff ins { background: var(--bs-success-bg-subtle); text-decoration: none; }
.ki-textarea { font-family: var(--bs-font-monospace); font-size: .8rem; min-height: 16rem; }
.ki-prompt { font-family: var(--bs-font-monospace); font-size: .85rem; min-height: 32rem; }

/* ---------- Startseite: Kurskacheln ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.course-tile { position: relative; display: flex; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border: 1px solid var(--bs-border-color); border-radius: .875rem; background: var(--bs-body-bg); color: var(--bs-body-color); text-decoration: none; box-shadow: var(--up-shadow); transition: transform .15s ease, border-color .15s; }
.course-tile:hover { transform: translateY(-2px); border-color: var(--up-orange); color: var(--bs-body-color); }
.course-tile .tile-title { font-weight: 700; line-height: 1.3; }
.course-tile .tile-meta { font-size: .875rem; color: var(--bs-secondary-color); }
.course-tile .tile-cta { font-size: .875rem; font-weight: 700; color: var(--up-accent); }
.course-tile.is-locked { box-shadow: none; background: var(--bs-tertiary-bg); }
.course-tile.is-locked .tile-cta { color: var(--bs-secondary-color); }
.ring { --p: 0; flex: 0 0 3.5rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--up-orange) calc(var(--p) * 1%), var(--up-track) 0); }
.ring span { width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--bs-body-bg); display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.ring.done { background: #2f7d32; } .ring.done span { color: #22602a; }
[data-bs-theme=dark] .ring.done span { color: #9be29e; }

/* ---------- Seitenwechsel: optionale 3D-Blätteranimation ---------- */
html[data-anim=on] #scroll.turn-next { animation: turn-next .55s cubic-bezier(.2, .7, .2, 1); transform-origin: left center; }
html[data-anim=on] #scroll.turn-prev { animation: turn-prev .55s cubic-bezier(.2, .7, .2, 1); transform-origin: right center; }
html[data-anim=on] #scroll.turn-jump { animation: turn-jump .35s ease-out; }
@keyframes turn-next { from { transform: perspective(1600px) rotateY(-28deg) translateX(3rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes turn-prev { from { transform: perspective(1600px) rotateY(28deg) translateX(-3rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes turn-jump { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }

#popup { display: none; }
.popover-danger { --bs-popover-bg: #b42318; --bs-popover-body-color: #fff; --bs-popover-border-color: #b42318; }
#facts div { margin-bottom: .9rem; }

/* ---------- Lesezeichen, eigene Anmerkungen, Gastzugang ---------- */
#tree a.is-marked::after { content: '\f02e'; flex: 0 0 auto; margin-left: auto; padding-top: .2em; font: 900 .75rem/1 'Font Awesome 7 Pro'; color: var(--up-orange-icon); }
.mine-list .list-group-item { font-size: .95rem; }
.js-bookmark[aria-pressed=true] { color: var(--up-accent); background: var(--up-soft); }
.reader-pager { align-items: center; }
.reader-pager a.is-disabled { pointer-events: none; opacity: .45; }
.guest-hint { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .85rem 1rem; border-radius: .75rem; background: var(--up-soft); border: 1px solid var(--bs-primary-border-subtle); font-size: 1rem; }
.guest-hint > .fa-fw { font-size: 1.4rem; flex: 0 0 auto; }
.guest-hint > div { flex: 1 1 16rem; min-width: 0; }
.guest-hint .btn-close { margin-left: auto; }
@media (min-width: 576px) { .guest-hint .btn-close { margin-left: 0; } }
.guest button.markPage, .guest #colorpopup { display: none; }

/* Runde Symbol-Schaltflächen (Bearbeiten, Löschen): quadratisch statt Pille, damit sie als Kreis erscheinen */
.btn.rounded-circle, .btn.AdminButton { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; line-height: 1; }
.btn.rounded-circle.btn-sm, .btn.AdminButton { width: 2rem; height: 2rem; font-size: .875rem; }
.btn.rounded-circle.big { width: 2.75rem; height: 2.75rem; font-size: 1.1rem; }
.btn.rounded-circle .fa-fw, .btn.AdminButton .fa-fw { width: auto; margin: 0; }
/* Blättern: Text und Symbol in den (höheren) Schaltflächen vertikal zentrieren */
.reader-pager .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0; line-height: 1.2; }