﻿/* =====================================================================
   content.css – Lehrtexte: gemeinsam für Leseansicht (#scroll.lehrtext)
   und Editor (TinyMCE: body.lehrtext). Ersetzt newlookIn.css,
   editstyle-subwin.css und editor-dark.css.
   ===================================================================== */
.lehrtext { --box-c: var(--up-grey); --box-bg: var(--bs-tertiary-bg);
    color: var(--bs-body-color); line-height: 1.65; text-align: left; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; cursor: text; }
.lehrtext > :first-child { margin-top: 0; }
.lehrtext p { margin: 0 0 1rem; }
.lehrtext h1 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin: .25rem 0 1.25rem; color: var(--bs-emphasis-color); hyphens: manual; }
.lehrtext h2 { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--up-accent); margin: 0 0 .25rem; }
.lehrtext h3 { font-size: 1.3rem; margin: 2rem 0 .75rem; color: var(--bs-emphasis-color); }
.lehrtext h4 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.lehrtext b, .lehrtext strong { font-weight: 700; color: var(--bs-emphasis-color); }
.lehrtext a { color: var(--up-accent); text-decoration: underline; text-decoration-color: var(--up-orange); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.lehrtext a:hover { text-decoration-thickness: 2px; color: var(--bs-link-hover-color); }
.lehrtext ul { list-style: square; padding-left: 1.4rem; }
.lehrtext ol { padding-left: 1.6rem; }
.lehrtext li { margin-bottom: .6rem; }
.lehrtext li::marker { color: var(--up-orange-icon); }
.lehrtext li p { margin-bottom: 0; }
.lehrtext img { display: block; max-width: min(100%, 40rem); height: auto; margin: 1.25rem auto; border: 0; border-radius: .5rem; }
.lehrtext table { border-collapse: collapse; margin: 1rem 0; max-width: 100%; }
.lehrtext td, .lehrtext th { padding: .4rem .6rem; border: 1px solid var(--bs-border-color); vertical-align: top; color: inherit; }
.lehrtext td p, .lehrtext th p { margin: .25rem 0; }
.lehrtext dd, .lehrtext .jurAbsatz { margin-bottom: .6rem; }
.lehrtext dt { float: left; margin-right: .4rem; }
.lehrtext .info { color: inherit; text-decoration: underline dashed var(--up-grey); text-underline-offset: .2em; cursor: help; }
.lehrtext span.quote { font-style: italic; background: var(--up-soft); padding: 0 .25rem; border-radius: .25rem; }
.lehrtext ins { background: #dff5e3; text-decoration: none; }
.lehrtext ins.mod { background: #fff4c2; }
.lehrtext del { background: #fde2e1; }
.lehrtext .timebox { background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .75rem 1rem; }

/* ---------- Kästen: Definition, Beispiel, Schema, Tipp, Achtung, Meinungsstreit, Merksatz ---------- */
.lehrtext blockquote {
    position: relative; margin: 1.5rem 0; padding: 2.4rem 1.1rem .9rem;
    background: var(--box-bg); border: 1px solid color-mix(in srgb, var(--box-c) 30%, transparent); border-left: 4px solid var(--box-c);
    border-radius: .75rem; min-height: 3rem;
}
.lehrtext blockquote:not([class]), .lehrtext blockquote[class=""] { padding-top: .9rem; }
.lehrtext blockquote > :last-child { margin-bottom: 0; }
.lehrtext blockquote[class]::before { position: absolute; top: .7rem; left: 1.1rem; font: 900 1rem/1.2 'Font Awesome 7 Pro'; color: var(--box-c); }
.lehrtext blockquote[class]::after { position: absolute; top: .65rem; left: 2.6rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--box-t, var(--bs-secondary-color)); }
.lehrtext blockquote.definition { --box-c: #c76a00; --box-t: #8a4800; --box-bg: #fff4e5; }
.lehrtext blockquote.merk { --box-c: #c76a00; --box-t: #8a4800; --box-bg: #fff4e5; }
.lehrtext blockquote.beispiel { --box-c: #0f766e; --box-t: #0b5a54; --box-bg: #e8f6f4; }
.lehrtext blockquote.schema { --box-c: #5f5f61; --box-t: #47474a; --box-bg: #f3f3f4; }
.lehrtext blockquote.tipp { --box-c: #2f7d32; --box-t: #22602a; --box-bg: #edf7ee; }
.lehrtext blockquote.warn { --box-c: #b42318; --box-t: #8f1c13; --box-bg: #fdeceb; }
.lehrtext blockquote.streit { --box-c: #6d3fc0; --box-t: #56309a; --box-bg: #f2edfb; }
.lehrtext blockquote.definition::before { content: '\f02d'; } .lehrtext blockquote.definition::after { content: 'Definition'; }
.lehrtext blockquote.merk::before { content: '\f0eb'; }       .lehrtext blockquote.merk::after { content: 'Merksatz'; }
.lehrtext blockquote.beispiel::before { content: '\f0a4'; }   .lehrtext blockquote.beispiel::after { content: 'Beispiel'; }
.lehrtext blockquote.schema::before { content: '\f0e8'; }     .lehrtext blockquote.schema::after { content: 'Prüfungsschema'; }
.lehrtext blockquote.tipp::before { content: '\f0eb'; }       .lehrtext blockquote.tipp::after { content: 'Tipp'; }
.lehrtext blockquote.warn::before { content: '\f071'; }       .lehrtext blockquote.warn::after { content: 'Achtung'; }
.lehrtext blockquote.streit::before { content: '\f086'; }     .lehrtext blockquote.streit::after { content: 'Meinungsstreit'; }
[data-bs-theme=dark] .lehrtext blockquote.definition, [data-bs-theme=dark] .lehrtext blockquote.merk { --box-c: #f8971c; --box-t: #fbb15c; --box-bg: #2b2218; }
[data-bs-theme=dark] .lehrtext blockquote.beispiel { --box-c: #4fd1c5; --box-t: #81e6d9; --box-bg: #13282a; }
[data-bs-theme=dark] .lehrtext blockquote.schema { --box-c: #b0b0b2; --box-t: #cfcfd1; --box-bg: #222428; }
[data-bs-theme=dark] .lehrtext blockquote.tipp { --box-c: #6fcf73; --box-t: #9be29e; --box-bg: #162819; }
[data-bs-theme=dark] .lehrtext blockquote.warn { --box-c: #f97066; --box-t: #fda29b; --box-bg: #2e1715; }
[data-bs-theme=dark] .lehrtext blockquote.streit { --box-c: #b39af5; --box-t: #cbbcf8; --box-bg: #221c33; }
[data-bs-theme=dark] .lehrtext ins { background: #17351f; } [data-bs-theme=dark] .lehrtext ins.mod { background: #3a3315; } [data-bs-theme=dark] .lehrtext del { background: #3b1a19; }
.lehrtext div#kapitel { display: none; }

/* Lernziele (Kapitelanfang) */
.lehrtext .lernziele { position: relative; margin: 1.5rem 0; padding: 2.4rem 1.25rem 1rem; border-radius: .75rem; background: var(--up-soft); border-left: 4px solid var(--up-orange); }
.lehrtext .lernziele::before { content: 'Das lernen Sie in diesem Kapitel'; position: absolute; top: .7rem; left: 1.25rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--up-accent); }
.lehrtext .lernziele ul { list-style: none; padding-left: 0; margin: 0; }
.lehrtext .lernziele li { position: relative; padding-left: 1.75rem; }
.lehrtext .lernziele li::before { content: '\f00c'; position: absolute; left: 0; font: 900 1rem/1.6 'Font Awesome 7 Pro'; color: var(--up-orange-icon); }

/* ---------- Zielgruppen und Aufdecktext ---------- */
.lehrtext .anfaenger, .lehrtext .fortgeschrittene, .lehrtext .examen { border-left: 3px solid var(--lvl); padding: .1rem 0 .1rem .9rem; margin: 1rem 0; }
.lehrtext .anfaenger::before, .lehrtext .fortgeschrittene::before, .lehrtext .examen::before { display: inline-block; margin-bottom: .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lvl-t); }
.lehrtext .anfaenger { --lvl: #2f7d32; --lvl-t: #22602a; } .lehrtext .anfaenger::before { content: 'Für Einsteiger'; }
.lehrtext .fortgeschrittene { --lvl: #6d3fc0; --lvl-t: #56309a; } .lehrtext .fortgeschrittene::before { content: 'Für Fortgeschrittene'; }
.lehrtext .examen { --lvl: #b42318; --lvl-t: #8f1c13; } .lehrtext .examen::before { content: 'Examenswissen'; }
[data-bs-theme=dark] .lehrtext .anfaenger { --lvl: #6fcf73; --lvl-t: #9be29e; }
[data-bs-theme=dark] .lehrtext .fortgeschrittene { --lvl: #b39af5; --lvl-t: #cbbcf8; }
[data-bs-theme=dark] .lehrtext .examen { --lvl: #f97066; --lvl-t: #fda29b; }
.lehrtext div.hiddenText { position: relative; border: 1px dashed var(--up-grey); border-radius: .5rem; padding: .75rem 1rem; margin: 1rem 0; cursor: pointer; }
.lehrtext div.hiddenText:not(.shown) > * { filter: blur(6px); user-select: none; }
.lehrtext div.hiddenText:not(.shown)::after { content: 'Antippen zum Aufdecken'; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; color: var(--bs-emphasis-color); }
.lehrtext div.hiddenText.shown { cursor: auto; border-style: solid; }

/* ---------- Nur im Editor sichtbare Markierungen ---------- */
body.lehrtext { margin: 0; padding: 1rem 1.25rem; font-family: 'Source Sans 3', system-ui, 'Segoe UI', Arial, sans-serif; font-size: 17px; background: var(--bs-body-bg); }
body.lehrtext.subwin { font-size: 15px; padding: .5rem .75rem; }
body.lehrtext div.hiddenText > * { filter: none; }
body.lehrtext div.hiddenText::after { content: none; }
body.lehrtext div#kapitel { display: block; border: 1px dashed var(--up-grey); padding: .5rem; }
body.lehrtext div#kapitel::before { content: 'Kapitelbeginn'; font-size: .75rem; color: var(--bs-secondary-color); }
body.lehrtext span.gapList, body.lehrtext span.gapText { display: inline-block; min-width: 4.5rem; padding: .1rem .4rem; margin: 0 .25rem; border-radius: .25rem; font-size: .75rem; text-align: center; color: #fff; cursor: pointer; }
body.lehrtext span.gapList { background: #8f1c13; } body.lehrtext span.gapList::before { content: 'Liste'; }
body.lehrtext span.gapText { background: #22602a; } body.lehrtext span.gapText::before { content: 'Text'; }
body.lehrtext .highlightarea { border: 3px solid #b42318; padding: .6rem; min-height: 2.5rem; }
body.lehrtext .highlightarea:empty::before { content: 'Geben Sie hier einen Text zum Markieren ein!'; color: var(--bs-secondary-color); font-style: italic; }
body.lehrtext .TextBox, body.lehrtext .TextBoxSmall { font-size: 11px; position: absolute; border: 1px solid; padding: 2px; margin: 0; }
body.lehrtext div.lehr-quiz { border: 1px dashed #b42318; border-radius: .5rem; padding: .5rem .75rem; margin: .75rem 0; min-height: 2.2em; background: #fdeceb; }
body.lehrtext div.lehr-quiz::before { content: 'Interaktive Aufgabe (wird in der Leseansicht dargestellt; Inhalt im Quelltext, Attribut data-quiz)'; font-size: 12px; color: #8f1c13; }
[data-bs-theme=dark] body.lehrtext { color-scheme: dark; }
