/* ==========================================================================
SqrlyCode — statische HTML/CSS-Komponenten
Vanilla-Portierung der JSX-Referenzkomponenten aus design-system-ref/components
für den Einsatz in statischen HTML-Lektionen. Nutzt ausschließlich die
Design-Tokens aus ../styles.css — diese Datei ist ZUSÄTZLICH zu ../styles.css
einzubinden. In den Kursseiten übernimmt das die Vorlage (die drei -
s stehen schon drin); von Hand einbinden nur im Ausnahmefall. Beispiel
für die -Links, Pfade relativ zu einer Lektionsseite unter
site//chapters/NN-…/x.html:
Interaktivität (Quiz, Copy-Button, Progress) kommt aus components.js.
Icons über Lucide () — siehe README.md.
========================================================================== */
/* ---- Icon-Slot (Lucide) --------------------------------------------------- */
.ds-icon,
[data-lucide] {
display: inline-flex;
flex-shrink: 0;
vertical-align: middle;
}
/* ==========================================================================
Button (Port von components/core/Button.jsx)
========================================================================== */
.ds-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-body);
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
line-height: 1;
padding: 11px 18px; /* size md */
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.ds-btn:active { transform: scale(.97); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-btn[disabled],
.ds-btn:disabled { opacity: .5; cursor: not-allowed; }
.ds-btn[disabled]:active,
.ds-btn:disabled:active { transform: none; }
.ds-btn--sm { padding: 8px 14px; font-size: var(--text-sm); }
.ds-btn--lg { padding: 14px 24px; font-size: var(--text-md); }
/* color auf den Hover-Regeln mitsetzen: als gerenderte Buttons würden sonst
die globale a:hover-Farbe (blau) erben — die eigene Textfarbe muss gewinnen. */
.ds-btn--primary { background: var(--brand-accent); color: #fff; }
.ds-btn--primary:hover:not([disabled]) { background: var(--brand-accent-hover); color: #fff; }
.ds-btn--secondary { background: var(--bg-3); color: var(--text-primary); border-color: var(--border-default); }
.ds-btn--secondary:hover:not([disabled]) { background: var(--bg-4); color: var(--text-primary); border-color: var(--border-strong); }
.ds-btn--ghost { background: transparent; color: var(--text-secondary); }
.ds-btn--ghost:hover:not([disabled]) { background: var(--bg-2); color: var(--text-primary); }
.ds-btn .ds-icon,
.ds-btn [data-lucide] { width: 16px; height: 16px; }
.ds-btn--lg .ds-icon,
.ds-btn--lg [data-lucide] { width: 20px; height: 20px; }
/* ==========================================================================
Tag (Port von components/core/Tag.jsx)
========================================================================== */
.ds-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
padding: 5px 10px;
border-radius: var(--radius-full);
line-height: 1;
white-space: nowrap;
background: var(--bg-3); /* tone neutral */
color: var(--text-secondary);
border: 1px solid var(--border-default);
}
.ds-tag .ds-icon,
.ds-tag [data-lucide] { width: 12px; height: 12px; }
.ds-tag--primary { background: var(--brand-primary-muted); color: var(--brand-primary); border-color: transparent; }
.ds-tag--accent { background: var(--brand-accent-muted); color: var(--brand-accent); border-color: transparent; }
.ds-tag--success { background: var(--success-muted); color: var(--success); border-color: transparent; }
.ds-tag--warning { background: var(--warning-muted); color: var(--warning-text); border-color: transparent; }
.ds-tag--error { background: var(--error-muted); color: var(--error); border-color: transparent; }
.ds-tag--info { background: var(--info-muted); color: var(--info); border-color: transparent; }
.ds-tag--basics { background: var(--course-basics-muted); color: var(--course-basics); border-color: transparent; }
.ds-tag--raylib { background: var(--course-raylib-muted); color: var(--course-raylib); border-color: transparent; }
.ds-tag--unity { background: var(--course-unity-muted); color: var(--course-unity-text); border-color: transparent; }
/* ==========================================================================
Callout (Port von components/lesson/Callout.jsx)
========================================================================== */
.ds-callout {
display: flex;
gap: 12px;
padding: 16px 18px;
border-radius: var(--radius-md);
font-family: var(--font-body);
background: var(--bg-3); /* variant note */
border-left: 3px solid var(--text-secondary);
}
.ds-callout__icon { margin-top: 2px; color: var(--text-secondary); }
.ds-callout__icon .ds-icon,
.ds-callout__icon [data-lucide] { width: 20px; height: 20px; }
.ds-callout__title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-secondary);
margin: 0 0 4px;
}
.ds-callout__body {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
}
.ds-callout__body :last-child { margin-bottom: 0; }
.ds-callout--tip { background: var(--info-muted); border-left-color: var(--info); }
.ds-callout--tip .ds-callout__icon, .ds-callout--tip .ds-callout__title { color: var(--info); }
.ds-callout--warning { background: var(--warning-muted); border-left-color: var(--warning-text); }
.ds-callout--warning .ds-callout__icon, .ds-callout--warning .ds-callout__title { color: var(--warning-text); }
.ds-callout--try { background: var(--success-muted); border-left-color: var(--success); }
.ds-callout--try .ds-callout__icon, .ds-callout--try .ds-callout__title { color: var(--success); }
/* ==========================================================================
CodeBlock (Port von components/lesson/CodeBlock.jsx)
Bleibt in beiden Themes dunkel — literale Werte laut DS-Regel.
========================================================================== */
.ds-code {
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid #2A3B4D;
background: #0F1620;
font-family: var(--font-mono);
box-shadow: var(--shadow-sm);
}
.ds-code__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
background: #1D2B38;
border-bottom: 1px solid #2A3B4D;
}
.ds-code__name {
font-size: var(--text-xs);
color: #8397AC;
font-weight: var(--weight-medium);
}
.ds-code__copy {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: none;
color: #8397AC;
font-size: var(--text-xs);
font-family: var(--font-body);
cursor: pointer;
padding: 4px 6px;
border-radius: var(--radius-sm);
transition: background .15s ease, color .15s ease;
}
.ds-code__copy .ds-icon,
.ds-code__copy [data-lucide] { width: 14px; height: 14px; }
.ds-code__copy:hover { background: #253547; color: #EEF3F8; }
.ds-code__copy.is-copied { color: var(--success); }
.ds-code__copy.is-copied:hover { color: var(--success); }
.ds-code__body {
margin: 0;
padding: 14px 16px;
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
overflow-x: auto;
font-variant-ligatures: none;
color: #EEF3F8;
white-space: pre;
}
/* Syntax-Token-Farben (identisch zur JSX-Tokenizer-Palette) */
.ds-code .tok-cmt { color: #8397AC; }
.ds-code .tok-str { color: #00D779; }
.ds-code .tok-kw { color: #4C8DFF; }
.ds-code .tok-num { color: #E8A93B; }
.ds-code .tok-type { color: #2BB3F5; }
/* ==========================================================================
LessonList (Port von components/lesson/LessonList.jsx)
========================================================================== */
.ds-lessons { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-body); }
.ds-lesson {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 12px;
border-radius: var(--radius-md);
background: transparent;
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--border-subtle);
}
.ds-lessons .ds-lesson:last-child { border-bottom: none; }
.ds-lesson__icon .ds-icon,
.ds-lesson__icon [data-lucide] { width: 20px; height: 20px; }
.ds-lesson__main { flex: 1; min-width: 0; }
.ds-lesson__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
.ds-lesson__meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.ds-lesson__state {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.ds-lesson--locked { opacity: .55; cursor: not-allowed; }
.ds-lesson--locked .ds-lesson__icon, .ds-lesson--locked .ds-lesson__state { color: var(--text-muted); }
.ds-lesson--available .ds-lesson__icon, .ds-lesson--available .ds-lesson__state { color: var(--text-secondary); }
.ds-lesson--in-progress { background: var(--bg-3); }
.ds-lesson--in-progress .ds-lesson__icon, .ds-lesson--in-progress .ds-lesson__state { color: var(--brand-accent); }
.ds-lesson--done .ds-lesson__icon, .ds-lesson--done .ds-lesson__state { color: var(--success); }
/* Hover-Highlight für anklickbare Lektionen — in der Sidebar UND in der
Kapitelübersicht (Overview). bg-4 hebt sich vom "Aktuell"-Zustand (bg-3) ab,
damit gehoverte und aktuelle Lektion unterscheidbar bleiben. Gilt nur für
echte Links (a.ds-lesson), nicht für gesperrte Einträge. */
a.ds-lesson { transition: background 0.12s ease; }
a.ds-lesson:not(.ds-lesson--locked):hover { background: var(--bg-4); }
/* ==========================================================================
ProgressBar (Port von components/progress/ProgressBar.jsx)
========================================================================== */
.ds-progress { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); }
.ds-progress__label {
display: flex;
justify-content: space-between;
font-size: var(--text-xs);
color: var(--text-secondary);
font-weight: var(--weight-medium);
}
.ds-progress__track {
height: 8px;
border-radius: var(--radius-full);
background: var(--bg-4);
overflow: hidden;
}
.ds-progress--sm .ds-progress__track { height: 6px; }
.ds-progress--lg .ds-progress__track { height: 12px; }
.ds-progress__fill {
width: 0;
height: 100%;
background: var(--brand-primary);
border-radius: var(--radius-full);
transition: width .4s ease;
}
.ds-progress--xp .ds-progress__fill { background: var(--brand-accent); }
/* ==========================================================================
AchievementBadge (Port von components/progress/AchievementBadge.jsx)
========================================================================== */
.ds-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 92px;
font-family: var(--font-body);
}
.ds-badge__medal {
width: 64px;
height: 64px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
border: 2px solid;
}
.ds-badge__medal .ds-icon,
.ds-badge__medal [data-lucide] { width: 26px; height: 26px; }
.ds-badge__label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--text-secondary);
text-align: center;
line-height: var(--leading-snug);
}
.ds-badge--bronze .ds-badge__medal { background: linear-gradient(160deg,#3A2818,#241608); border-color: #CD8A4A; color: #CD8A4A; }
.ds-badge--silver .ds-badge__medal { background: linear-gradient(160deg,#3A424B,#232A31); border-color: #C7D2DB; color: #C7D2DB; }
.ds-badge--gold .ds-badge__medal { background: linear-gradient(160deg,#453210,#2A1D08); border-color: #F2C15A; color: #F2C15A; }
.ds-badge--locked { opacity: .45; }
.ds-badge--locked .ds-badge__medal { background: var(--bg-3); border-color: var(--border-default); color: var(--text-muted); box-shadow: none; }
/* ==========================================================================
Input (Port von components/forms/Input.jsx)
========================================================================== */
.ds-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); }
.ds-field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
.ds-input {
width: 100%;
padding: 10px 14px;
background: var(--bg-2);
border: 1.5px solid var(--border-default);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--text-sm);
}
.ds-input::placeholder { color: var(--text-muted); }
.ds-input:focus-visible { outline: none; border-color: var(--brand-primary); box-shadow: var(--focus-ring); }
.ds-input--mono { font-family: var(--font-mono); }
.ds-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.ds-field__error { font-size: var(--text-xs); color: var(--error); }
.ds-field--error .ds-input { border-color: var(--error); }
/* ==========================================================================
Quiz — MultipleChoiceQuestion (Port von components/quiz/*.jsx)
========================================================================== */
.ds-mcq { display: flex; flex-direction: column; gap: 14px; font-family: var(--font-body); }
.ds-mcq__question {
margin: 0;
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.ds-mcq__options { display: flex; flex-direction: column; gap: 8px; }
.ds-mcq__option {
display: flex;
align-items: center;
gap: 10px;
text-align: left;
width: 100%;
padding: 15px 16px;
border-radius: var(--radius-md);
border: 1.5px solid var(--border-default);
background: var(--bg-2);
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--text-sm);
cursor: pointer;
}
.ds-mcq__option:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-mcq__marker {
width: 22px;
height: 22px;
border-radius: var(--radius-full);
border: 1.5px solid var(--border-strong);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ds-mcq__marker .ds-icon,
.ds-mcq__marker [data-lucide] { width: 13px; height: 13px; }
/* Multi-Select: eckiger Marker signalisiert "mehrere möglich" */
.ds-mcq--multi .ds-mcq__marker { border-radius: var(--radius-sm); }
.ds-mcq__option.is-selected {
border-color: var(--brand-primary);
background: var(--brand-primary-muted);
}
.ds-mcq__option.is-selected .ds-mcq__marker { border-color: var(--brand-primary); }
.ds-mcq__option.is-correct {
border-color: var(--success);
background: var(--success-muted);
color: var(--success);
}
.ds-mcq__option.is-correct .ds-mcq__marker { border-color: var(--success); color: var(--success); }
.ds-mcq__option.is-incorrect {
border-color: var(--error);
background: var(--error-muted);
color: var(--error);
}
.ds-mcq__option.is-incorrect .ds-mcq__marker { border-color: var(--error); color: var(--error); }
.ds-mcq__option.is-locked { cursor: default; }
/* Multi-Select: Auswahl wird im Marker angekreuzt statt blau hervorgehoben */
.ds-mcq--multi .ds-mcq__option.is-selected {
border-color: var(--border-default);
background: var(--bg-2);
}
.ds-mcq--multi .ds-mcq__option.is-selected .ds-mcq__marker {
border-color: var(--border-strong);
color: var(--text-primary);
}
/* Auflösung: grün = Entscheidung richtig, rot = Entscheidung falsch.
Die Regeln stehen nach der neutralen Auswahl-Regel und gewinnen auch für
angekreuzte (is-selected) Optionen. */
.ds-mcq--multi .ds-mcq__option.is-correct {
border-color: var(--success);
background: var(--success-muted);
color: var(--success);
}
.ds-mcq--multi .ds-mcq__option.is-incorrect {
border-color: var(--error);
background: var(--error-muted);
color: var(--error);
}
.ds-mcq--multi .ds-mcq__option.is-correct .ds-mcq__marker { border-color: var(--success); color: var(--success); }
.ds-mcq--multi .ds-mcq__option.is-incorrect .ds-mcq__marker { border-color: var(--error); color: var(--error); }
/* Unwahre Antwortmöglichkeiten werden bei der Auflösung durchgestrichen */
.ds-mcq--multi .ds-mcq__option.is-untrue { text-decoration: line-through; }
/* Ergebnis-Icon rechts an jeder Option (nach der Auflösung) */
.ds-mcq__result {
margin-left: auto;
display: flex;
align-items: center;
flex-shrink: 0;
}
.ds-mcq__result .ds-icon,
.ds-mcq__result [data-lucide] { width: 18px; height: 18px; }
.ds-mcq__result.is-ok { color: var(--success); }
.ds-mcq__result.is-bad { color: var(--error); }
/* ==========================================================================
Quiz — CodeCompletionQuestion
========================================================================== */
.ds-cloze { display: flex; flex-direction: column; gap: 12px; font-family: var(--font-body); }
.ds-cloze__prompt {
margin: 0;
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.ds-cloze__line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 14px 16px;
background: var(--bg-0);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--text-primary);
}
.ds-cloze__input {
min-width: 60px;
border: 1.5px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-2);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: var(--text-sm);
padding: 4px 8px;
}
.ds-cloze__input:focus-visible { outline: none; border-color: var(--brand-primary); box-shadow: var(--focus-ring); }
.ds-cloze.is-correct .ds-cloze__input { border-color: var(--success); }
.ds-cloze.is-incorrect .ds-cloze__input { border-color: var(--error); }
.ds-cloze__result .ds-icon,
.ds-cloze__result [data-lucide] { width: 18px; height: 18px; }
.ds-cloze.is-correct .ds-cloze__result { color: var(--success); }
.ds-cloze.is-incorrect .ds-cloze__result { color: var(--error); }
/* ==========================================================================
Quiz — Actions + Feedback (Port von components/quiz/QuizFeedback.jsx)
========================================================================== */
.ds-quiz-actions { display: flex; gap: 10px; }
.ds-quiz-feedback {
display: none;
gap: 14px;
padding: 18px 20px;
border-radius: var(--radius-lg);
font-family: var(--font-body);
border: 1px solid;
transform: scale(.95);
opacity: 0;
transition: transform .15s ease-out, opacity .15s ease-out;
}
.ds-quiz-feedback.is-shown { display: flex; }
.ds-quiz-feedback.is-mounted { transform: scale(1); opacity: 1; }
.ds-quiz-feedback.is-correct { background: var(--success-muted); border-color: var(--success); }
.ds-quiz-feedback.is-incorrect { background: var(--error-muted); border-color: var(--error); }
.ds-quiz-feedback__icon .ds-icon,
.ds-quiz-feedback__icon [data-lucide] { width: 26px; height: 26px; }
.ds-quiz-feedback.is-correct .ds-quiz-feedback__icon { color: var(--success); }
.ds-quiz-feedback.is-incorrect .ds-quiz-feedback__icon { color: var(--error); }
.ds-quiz-feedback__body { flex: 1; }
.ds-quiz-feedback__title {
font-size: var(--text-md);
font-weight: var(--weight-bold);
font-family: var(--font-display);
}
.ds-quiz-feedback.is-correct .ds-quiz-feedback__title { color: var(--success); }
.ds-quiz-feedback.is-incorrect .ds-quiz-feedback__title { color: var(--error); }
.ds-quiz-feedback__explain {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-top: 4px;
line-height: var(--leading-relaxed);
}
.ds-quiz-feedback__xp {
margin-top: 8px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--brand-accent);
}
/* ==========================================================================
Modal (Port von components/feedback/Modal.jsx) — optional, JS-gesteuert
========================================================================== */
.ds-modal-scrim {
position: fixed;
inset: 0;
background: var(--overlay-scrim);
display: none;
align-items: center;
justify-content: center;
padding: var(--space-4);
z-index: 100;
}
.ds-modal-scrim.is-open { display: flex; }
.ds-modal {
background: var(--bg-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
max-width: 440px;
width: 100%;
padding: var(--space-6);
}
.ds-modal__title { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.ds-modal__body { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.ds-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }
/* ==========================================================================
Toast (Port von components/feedback/Toast.jsx) — optional
========================================================================== */
.ds-toast {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: var(--bg-3);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
font-size: var(--text-sm);
color: var(--text-primary);
}
.ds-toast--xp { border-color: var(--brand-accent); }
.ds-toast--xp .ds-toast__icon { color: var(--brand-accent); }
/* ==========================================================================
CourseSidebar (Port von components/navigation/CourseSidebar.jsx)
Linke Navigationsleiste: Kurstitel, dann Abschnitte mit LessonList-Gruppen.
========================================================================== */
.ds-sidebar {
display: flex;
flex-direction: column;
width: 280px;
background: var(--bg-2);
border-right: 1px solid var(--border-subtle);
font-family: var(--font-body);
height: 100%;
}
.ds-sidebar__header { padding: 18px 18px 14px; border-bottom: 1px solid var(--border-subtle); }
.ds-sidebar__title {
display: block;
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-size: var(--text-md);
color: var(--text-primary);
text-decoration: none;
}
a.ds-sidebar__title:hover { color: var(--brand-primary); }
.ds-sidebar__body { overflow-y: auto; padding: 8px 10px; }
.ds-sidebar__section { margin-bottom: 14px; }
.ds-sidebar__section-title {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
padding: 8px 12px 4px;
margin: 0;
}
/* ==========================================================================
ThemeToggle (Port des Sonne/Mond-Buttons aus components/navigation/TopNav.jsx)
Schaltet data-theme="light" auf um; Verhalten in components.js,
Persistenz via localStorage ("sqrly-theme"). Der Button enthält beide Icons,
sichtbar ist je Theme nur eines (dunkel: Sonne, hell: Mond).
========================================================================== */
.ds-theme-toggle {
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: var(--radius-full);
background: transparent;
border: 1px solid var(--border-default);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
}
.ds-theme-toggle:hover { color: var(--text-primary); background: var(--bg-3); }
.ds-theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-theme-toggle .ds-theme-toggle__sun,
.ds-theme-toggle .ds-theme-toggle__moon { width: 16px; height: 16px; }
.ds-theme-toggle .ds-theme-toggle__moon { display: none; }
:root[data-theme="light"] .ds-theme-toggle .ds-theme-toggle__moon { display: block; }
:root[data-theme="light"] .ds-theme-toggle .ds-theme-toggle__sun { display: none; }
/* ==========================================================================
Erledigt-Umschalter (Seitenkopf) — markiert die aktuelle Lektion als fertig.
Der Zustand wird vom Shell-Injektor via localStorage ("sqrly-progress")
persistiert; is-done spiegelt den gespeicherten Fortschritt.
========================================================================== */
.ds-done-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 34px;
padding: 0 var(--space-3);
flex-shrink: 0;
border-radius: var(--radius-full);
background: transparent;
border: 1px solid var(--border-default);
color: var(--text-secondary);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
cursor: pointer;
white-space: nowrap;
}
.ds-done-toggle:hover { color: var(--text-primary); background: var(--bg-3); }
.ds-done-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ds-done-toggle i, .ds-done-toggle svg { width: 16px; height: 16px; }
.ds-done-toggle.is-done {
color: var(--success);
border-color: var(--success);
background: var(--success-muted);
}
/* Schmale Kopfzeilen: nur das Icon zeigen (Platz sparen). */
@media (max-width: 860px) {
.ds-done-toggle { padding: 0; width: 34px; justify-content: center; }
.ds-done-toggle__label { display: none; }
}
/* ---- Figure: Bild / lokales Video (ADR-0005) --------------------------- */
/* Drei Breiten, immer zentriert. Bewusst kein Float/Textumfluss: Lektionen
sind einspaltige Lesetexte, und ein umflossenes Bild neben .ds-code oder
einem Quiz ergibt Layouts, die niemand beabsichtigt hat. */
.ds-figure {
margin: var(--space-6) auto;
max-width: 100%;
font-family: var(--font-body);
}
.ds-figure img,
.ds-figure video {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-md);
background: var(--bg-3);
}
.ds-figure figcaption {
margin-top: var(--space-2);
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--text-secondary);
text-align: center;
}
.ds-figure--schmal { max-width: 380px; }
/* --breit tritt aus der Textspalte heraus, aber nur wo Platz ist. Unterhalb
des 960px-Umbruchs (dort verschwindet auch die Sidebar) bleibt es bündig. */
.ds-figure--breit { max-width: 100%; }
@media (min-width: 961px) {
.ds-figure--breit {
width: calc(100% + 2 * var(--space-8));
max-width: calc(100vw - 2 * var(--space-4));
margin-left: calc(-1 * var(--space-8));
margin-right: calc(-1 * var(--space-8));
}
}
/* ---- Eingebettetes Video: erst auf Klick laden ------------------------- */
/* Bis zum Klick entsteht KEIN Request an YouTube/Vimeo — deshalb keine
Vorschaubild-URL des Anbieters, sondern eine neutrale Platzhalterfläche. */
.ds-video-embed {
position: relative;
margin: var(--space-6) auto;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--bg-3);
border: 1px solid var(--border-subtle);
}
.ds-video-embed__frame { position: relative; aspect-ratio: 16 / 9; }
.ds-video-embed__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.ds-video-embed__poster {
position: absolute; inset: 0;
display: flex; flex-direction: column; gap: var(--space-3);
align-items: center; justify-content: center;
width: 100%; padding: var(--space-5);
cursor: pointer; text-align: center;
color: var(--text-primary); background: var(--bg-3);
border: 0; font-family: var(--font-body);
}
.ds-video-embed__poster:hover { background: var(--bg-4); }
.ds-video-embed__poster:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -4px; }
.ds-video-embed__play {
display: flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: var(--radius-full);
color: var(--text-on-brand); background: var(--brand-primary);
}
.ds-video-embed__play [data-lucide] { width: 26px; height: 26px; }
.ds-video-embed__title {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
}
.ds-video-embed__hint {
font-size: var(--text-xs);
color: var(--text-muted);
}
.ds-video-embed figcaption {
padding: var(--space-2) var(--space-4) var(--space-3);
font-size: var(--text-sm);
color: var(--text-secondary);
text-align: center;
}