/*! * TSB Akademie – Frontend-Styles * Alle Regeln sind auf .tsba / .tsba-* begrenzt (keine globalen Styles). * Designs: .tsba-design-inherit (Default, erbt Theme/Elementor) · .tsba-design-tsb */ /* 1. Tokens ------------------------------------------------------------ */ /* 0.9 Kontrast: Grundfarbe einmal am Container auflösen (registrierte Eigenschaft), damit „gedämpft in gedämpft“ (z. B. Chip in Hinweiszeile) nicht immer heller wird. */ @property --tsba-ink { syntax: ""; inherits: true; initial-value: #22303F; } .tsba { --tsba-ink: currentColor; --tsba-primary: var(--e-global-color-primary, var(--wp--preset--color--primary, #003C73)); --tsba-accent: var(--e-global-color-accent, var(--wp--preset--color--secondary, var(--tsba-primary))); --tsba-text: inherit; --tsba-heading: inherit; --tsba-muted: #5A6878; /* 0.9: feste Farbe (5.7:1 auf Weiß) statt Transparenz – verschachtelt nie heller */ --tsba-line: color-mix(in srgb, currentColor 14%, transparent); --tsba-soft: color-mix(in srgb, currentColor 5%, transparent); --tsba-card-bg: var(--wp--preset--color--base, #FFFFFF); --tsba-card-shadow: 0 1px 2px rgba(16, 32, 56, .06), 0 8px 24px -10px rgba(16, 32, 56, .18); --tsba-radius: 16px; --tsba-radius-sm: 10px; --tsba-pad: clamp(16px, 3vw, 24px); --tsba-gap: clamp(14px, 2.4vw, 22px); --tsba-ok: #1F9D57; --tsba-ok-soft: rgba(31, 157, 87, .12); /* 0.9 Kontrast: Text in Grün/Orange braucht dunklere Töne (WCAG AA 4.5:1 auch auf getönten Flächen). */ --tsba-ok-ink: #157A45; --tsba-warn: #A04A15; --tsba-btn-bg: var(--tsba-primary); --tsba-btn-fg: #FFFFFF; --tsba-progress-track: color-mix(in srgb, currentColor 10%, transparent); --tsba-progress-fill: var(--tsba-accent); --tsba-focus: 0 0 0 3px color-mix(in srgb, var(--tsba-primary) 35%, transparent); color: var(--tsba-text); font-family: inherit; line-height: 1.55; margin-block: 0 1.5em; /* Deutsche Silbentrennung statt harter Umbrüche („Anforderungssituatione|n“). */ overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; } .tsba :is(input, textarea, code, a[href^="http"]) { hyphens: manual; } /* 0.9 Kontrast: Platzhalter in gedämpfter Textfarbe statt Browser-Hellgrau, ohne Transparenz. */ .tsba :is(input, textarea)::placeholder { color: var(--tsba-muted); opacity: 1; } /* Theme-Titel auf Akademie-Seiten (lang="de" kommt per render_block). */ :is(.single-tsba_course, .single-tsba_module, .single-tsba_lesson) .wp-block-post-title, :is(.single-tsba_course, .single-tsba_module, .single-tsba_lesson) .entry-title { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 6 6; } .tsba.tsba-design-tsb { --tsba-primary: #003C73; --tsba-accent: #E2001A; --tsba-heading: #003C73; --tsba-text: #22303F; --tsba-muted: #5A6878; --tsba-line: rgba(34, 48, 63, .12); --tsba-soft: #F4F7FA; --tsba-card-bg: #FFFFFF; --tsba-progress-track: rgba(0, 60, 115, .1); } .tsba *, .tsba *::before, .tsba *::after { box-sizing: border-box; } .tsba a { color: var(--tsba-primary); } .tsba .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* 2. Basics ------------------------------------------------------------ */ .tsba .tsba-h { color: var(--tsba-heading); margin: 0 0 .4em; line-height: 1.25; } .tsba h2.tsba-h { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); } .tsba h3.tsba-h { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); } .tsba .tsba-muted { color: var(--tsba-muted); } .tsba .tsba-small { font-size: .875em; } .tsba .tsba-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; margin: 0 0 1em; color: var(--tsba-muted); font-size: .9em; } .tsba .tsba-meta .tsba-icon { width: 1.05em; height: 1.05em; vertical-align: -.15em; margin-right: .2em; } .tsba .tsba-dot { opacity: .6; padding: 0 .15em; } .tsba .tsba-icon { flex: none; display: inline-block; } .tsba .tsba-card { background: var(--tsba-card-bg); border: 1px solid var(--tsba-line); border-radius: var(--tsba-radius); box-shadow: var(--tsba-card-shadow); padding: var(--tsba-pad); color: inherit; } .tsba .tsba-notice { margin: 0 0 1em; padding: .75em 1em; border-left: 4px solid var(--tsba-accent); background: var(--tsba-soft); border-radius: 0 var(--tsba-radius-sm) var(--tsba-radius-sm) 0; } /* 3. Buttons ----------------------------------------------------------- */ .tsba .tsba-btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .7em 1.4em; border: 2px solid transparent; border-radius: 999px; font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s; } .tsba .tsba-btn:focus-visible { outline: none; box-shadow: var(--tsba-focus); } .tsba .tsba-btn:active:not(:disabled) { transform: translateY(1px); } .tsba .tsba-btn--primary { background: var(--tsba-btn-bg); color: var(--tsba-btn-fg); } .tsba .tsba-btn--primary:hover { background: color-mix(in srgb, var(--tsba-btn-bg) 86%, #000); color: var(--tsba-btn-fg); } .tsba .tsba-btn--ghost { background: transparent; color: var(--tsba-primary); border-color: color-mix(in srgb, var(--tsba-primary) 35%, transparent); } .tsba .tsba-btn--ghost:hover { border-color: var(--tsba-primary); } .tsba .tsba-btn--done { background: var(--tsba-ok-soft); color: var(--tsba-ok-ink, var(--tsba-ok)); border-color: color-mix(in srgb, var(--tsba-ok) 40%, transparent); } .tsba .tsba-btn--done:hover { border-color: var(--tsba-ok); } .tsba .tsba-btn--block { display: flex; width: 100%; } .tsba .tsba-btn--lg { min-height: 56px; font-size: 1.075rem; } .tsba .tsba-btn:disabled { opacity: .5; cursor: not-allowed; } .tsba .tsba-btn.is-busy { opacity: .7; cursor: progress; } /* 4. Progress ---------------------------------------------------------- */ .tsba .tsba-progress { margin: 0 0 1em; } .tsba .tsba-progress-label { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: .4em; font-size: .9em; color: var(--tsba-muted); } .tsba .tsba-progress-label strong { color: var(--tsba-heading); font-variant-numeric: tabular-nums; } .tsba .tsba-progress-track { height: 10px; border-radius: 999px; overflow: hidden; background: var(--tsba-progress-track); } .tsba .tsba-progress-fill { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--tsba-progress-fill); transition: width .5s cubic-bezier(.2, .8, .2, 1); } .tsba .tsba-progress.is-complete .tsba-progress-fill { background: var(--tsba-ok); } /* 5. Dashboard --------------------------------------------------------- */ .tsba-dashboard .tsba-dash-head { margin-bottom: var(--tsba-gap); } .tsba-dashboard .tsba-dash-head p { margin: 0; } .tsba .tsba-grid { display: grid; gap: var(--tsba-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .tsba .tsba-course-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .tsba .tsba-card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--tsba-primary), color-mix(in srgb, var(--tsba-primary) 60%, var(--tsba-accent))); } .tsba .tsba-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; } .tsba .tsba-card-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.5rem; font-weight: 800; color: rgba(255, 255, 255, .85); } .tsba .tsba-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: .3em; padding: .3em .7em; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--tsba-card-bg, #FFFFFF); color: var(--tsba-ok-ink, var(--tsba-ok)); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); } .tsba .tsba-badge .tsba-icon { width: 1em; height: 1em; } .tsba .tsba-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--tsba-pad); } .tsba .tsba-card-title { margin: 0 0 .35em; font-size: 1.15rem; line-height: 1.3; } .tsba .tsba-card-title a { color: var(--tsba-heading); text-decoration: none; } .tsba .tsba-card-title a:hover { text-decoration: underline; } .tsba .tsba-card-excerpt { margin: 0 0 1em; font-size: .925em; } .tsba .tsba-card-body .tsba-progress { margin-top: auto; } .tsba .tsba-empty p, .tsba .tsba-gate p { margin: 0 0 1em; } .tsba .tsba-login { max-width: 460px; } .tsba .tsba-login form p { margin: 0 0 .9em; } .tsba .tsba-login label { display: block; font-weight: 600; margin-bottom: .3em; } .tsba .tsba-login input[type="text"], .tsba .tsba-login input[type="password"] { width: 100%; min-height: 48px; padding: .6em .8em; font: inherit; font-size: 16px; border: 1px solid var(--tsba-line); border-radius: var(--tsba-radius-sm); background: #FFFFFF; color: #22303F; } .tsba .tsba-login input:focus { outline: none; border-color: var(--tsba-primary); box-shadow: var(--tsba-focus); } .tsba .tsba-login .login-remember label { display: inline-flex; align-items: center; gap: .4em; font-weight: 400; } .tsba .tsba-login input[type="submit"] { width: 100%; min-height: 48px; border: 0; border-radius: 999px; cursor: pointer; background: var(--tsba-btn-bg); color: var(--tsba-btn-fg); font: inherit; font-weight: 700; } /* 6. Course ------------------------------------------------------------ */ .tsba-course .tsba-course-head { margin-bottom: var(--tsba-gap); } .tsba-course .tsba-desc { margin-bottom: var(--tsba-gap); } .tsba .tsba-outline-title { margin-top: .5em; } .tsba .tsba-module { border: 1px solid var(--tsba-line); border-radius: var(--tsba-radius); background: var(--tsba-card-bg); margin-bottom: 12px; overflow: hidden; scroll-margin-top: 90px; } .tsba .tsba-module:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsba-accent) 40%, transparent); } .tsba .tsba-module-head { display: flex; align-items: center; gap: .7em; padding: 14px var(--tsba-pad); background: var(--tsba-soft); font-weight: 700; } .tsba .tsba-module-no { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tsba-primary); color: #FFFFFF; font-size: .85rem; } .tsba .tsba-module-title { flex: 1; color: var(--tsba-heading); line-height: 1.3; } .tsba .tsba-module-count { font-size: .85em; color: var(--tsba-muted); font-variant-numeric: tabular-nums; } .tsba .tsba-module-excerpt { margin: 0; padding: 10px var(--tsba-pad) 0; } .tsba .tsba-lessons { list-style: none; margin: 0; padding: 6px 0; } .tsba .tsba-li { margin: 0; padding: 0; } .tsba .tsba-li + .tsba-li { border-top: 1px solid var(--tsba-line); } .tsba .tsba-li > a, .tsba .tsba-li-row { display: flex; align-items: center; gap: .75em; min-height: 52px; padding: 10px var(--tsba-pad); color: inherit; text-decoration: none; } .tsba .tsba-li > a:hover { background: var(--tsba-soft); } .tsba .tsba-li > a:focus-visible { outline: none; box-shadow: inset var(--tsba-focus); } .tsba .tsba-li-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--tsba-line); color: var(--tsba-muted); } .tsba .tsba-li-icon .tsba-icon { width: 16px; height: 16px; } .tsba .tsba-li.is-open .tsba-li-icon .tsba-icon { opacity: 0; } .tsba .tsba-li.is-done .tsba-li-icon { background: var(--tsba-ok); border-color: var(--tsba-ok); color: #FFFFFF; } .tsba .tsba-li.is-locked { color: var(--tsba-muted); } .tsba .tsba-li.is-locked .tsba-li-icon { border-color: transparent; background: var(--tsba-soft); } .tsba .tsba-li-title { flex: 1 1 8em; min-width: 0; overflow-wrap: break-word; hyphens: auto; } .tsba .tsba-li-meta { flex: none; display: inline-flex; align-items: center; gap: .5em; font-size: .8em; color: var(--tsba-muted); } .tsba .tsba-li-meta .tsba-icon { width: 16px; height: 16px; } .tsba .tsba-tag { padding: .1em .55em; border-radius: 999px; font-weight: 700; font-size: .95em; background: color-mix(in srgb, var(--tsba-accent) 12%, transparent); color: var(--tsba-accent); } .tsba .tsba-li.is-current > a { background: color-mix(in srgb, var(--tsba-primary) 8%, transparent); box-shadow: inset 4px 0 0 var(--tsba-primary); font-weight: 700; } .tsba .tsba-li.is-current:not(.is-done) .tsba-li-icon { border-color: var(--tsba-primary); } /* 7. Lesson ------------------------------------------------------------ */ .tsba-lesson { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--tsba-gap); } /* Sidebar pattern: side by side when the container has room (~860px), stacked otherwise. */ .tsba-lesson .tsba-lesson-main { flex: 999 1 540px; min-width: 0; } .tsba-lesson .tsba-lesson-side { flex: 1 1 300px; min-width: 0; max-width: 100%; } .tsba-lesson > .tsba-gate { flex: 1 1 100%; } .tsba .tsba-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin-bottom: .4em; font-size: .9em; font-weight: 600; } .tsba .tsba-crumbs a { text-decoration: none; } .tsba .tsba-crumbs a:hover { text-decoration: underline; } .tsba .tsba-crumbs span { color: var(--tsba-muted); } .tsba .tsba-video { position: relative; margin: 0 0 var(--tsba-gap); border-radius: var(--tsba-radius); overflow: hidden; background: #000; aspect-ratio: 16 / 9; } .tsba .tsba-video iframe, .tsba .tsba-video video, .tsba .tsba-video embed, .tsba .tsba-video object { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; margin: 0; } .tsba .tsba-video > :not(iframe):not(video) { position: absolute; inset: 0; } .tsba .tsba-video > :not(iframe):not(video) iframe { position: absolute; inset: 0; } .tsba .tsba-content { margin-bottom: var(--tsba-gap); font-size: 1.0625em; overflow-wrap: break-word; } .tsba .tsba-content img { max-width: 100%; height: auto; border-radius: var(--tsba-radius-sm); } .tsba .tsba-section-title { margin-top: 1.2em; } .tsba .tsba-files { list-style: none; margin: 0 0 var(--tsba-gap); padding: 0; display: grid; gap: 8px; } .tsba .tsba-files li { margin: 0; } .tsba .tsba-files .tsba-file-dl { display: flex; align-items: center; gap: .8em; min-height: 56px; padding: 10px 14px; border: 1px solid var(--tsba-line); border-radius: var(--tsba-radius-sm); background: var(--tsba-card-bg); color: inherit; text-decoration: none; } .tsba .tsba-files .tsba-file-dl:hover { border-color: var(--tsba-primary); } .tsba .tsba-files .tsba-file-dl > .tsba-icon { color: var(--tsba-primary); } .tsba .tsba-file-ext { flex: none; min-width: 46px; padding: .35em .4em; border-radius: 8px; text-align: center; background: color-mix(in srgb, var(--tsba-primary) 10%, transparent); color: var(--tsba-primary); font-size: .72rem; font-weight: 800; letter-spacing: .03em; } .tsba .tsba-file-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: break-word; hyphens: auto; } .tsba .tsba-file-name small { display: block; font-weight: 400; color: var(--tsba-muted); } .tsba .tsba-quiz { margin-bottom: var(--tsba-gap); } .tsba .tsba-quiz-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 .8em; border-radius: var(--tsba-radius); overflow: hidden; border: 1px solid var(--tsba-line); background: var(--tsba-line); } .tsba .tsba-stat { background: var(--tsba-card-bg); padding: 12px 14px; display: flex; flex-direction: column; gap: .15em; } .tsba .tsba-stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tsba-muted); } .tsba .tsba-stat strong { font-size: 1.1rem; color: var(--tsba-heading); line-height: 1.25; } .tsba .tsba-quiz-status.is-passed { border-color: var(--tsba-ok); } .tsba .tsba-quiz-status.is-passed [data-tsba-state] { color: var(--tsba-ok-ink, var(--tsba-ok)); } .tsba .tsba-quiz-status.is-flash { animation: tsba-flash 1s ease-out; } @keyframes tsba-flash { from { box-shadow: 0 0 0 6px color-mix(in srgb, var(--tsba-accent) 35%, transparent); } to { box-shadow: 0 0 0 0 transparent; } } .tsba .tsba-quiz-embed { margin-top: 1em; } .tsba .tsba-complete { margin: var(--tsba-gap) 0; padding: var(--tsba-pad); border-radius: var(--tsba-radius); background: var(--tsba-soft); text-align: center; } .tsba .tsba-complete .tsba-small { margin: .6em 0 0; } .tsba .tsba-msg { margin: 0; font-weight: 700; } .tsba .tsba-msg:not(:empty) { margin-bottom: .7em; } .tsba .tsba-msg.is-ok { color: var(--tsba-ok-ink, var(--tsba-ok)); } .tsba .tsba-msg.is-error { color: var(--tsba-warn); } .tsba .tsba-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tsba .tsba-pager-link { display: flex; align-items: center; gap: .6em; min-height: 64px; padding: 10px 14px; border: 1px solid var(--tsba-line); border-radius: var(--tsba-radius-sm); color: inherit; text-decoration: none; font-weight: 600; line-height: 1.3; background: var(--tsba-card-bg); } .tsba .tsba-pager-link span { flex: 1; min-width: 0; overflow-wrap: break-word; hyphens: auto; } .tsba .tsba-pager-link small { display: block; font-weight: 400; font-size: .78em; color: var(--tsba-muted); text-transform: uppercase; letter-spacing: .04em; } .tsba .tsba-pager-link .tsba-icon { color: var(--tsba-primary); } .tsba .tsba-pager-link:hover { border-color: var(--tsba-primary); } .tsba .tsba-pager-next { text-align: right; grid-column: 2; } .tsba .tsba-pager-next.is-locked { opacity: 1; pointer-events: none; color: var(--tsba-muted); background: var(--tsba-soft); border-style: dashed; } .tsba .tsba-pager-next.is-locked small { color: inherit; } .tsba .tsba-pager-next.is-locked .tsba-icon { color: var(--tsba-muted); } .tsba .tsba-outline-box { padding: 0; overflow: hidden; } .tsba .tsba-outline-box > summary { display: flex; align-items: center; gap: .8em; padding: 14px var(--tsba-pad); cursor: pointer; list-style: none; min-height: 56px; } .tsba .tsba-outline-box > summary::-webkit-details-marker { display: none; } .tsba .tsba-outline-box > summary .tsba-icon { transition: transform .2s; color: var(--tsba-muted); } .tsba .tsba-outline-box[open] > summary .tsba-icon { transform: rotate(180deg); } .tsba .tsba-outline-head { flex: 1; display: flex; flex-direction: column; min-width: 0; } .tsba .tsba-outline-head strong { color: var(--tsba-heading); line-height: 1.3; } .tsba .tsba-outline-box > .tsba-progress { padding: 0 var(--tsba-pad); } .tsba .tsba-outline--compact .tsba-module { border-radius: 0; border-width: 1px 0 0; margin: 0; box-shadow: none; } .tsba .tsba-outline--compact .tsba-module-head { padding: 10px var(--tsba-pad); font-size: .9em; } .tsba .tsba-outline--compact .tsba-module-no { width: 24px; height: 24px; font-size: .75rem; } .tsba .tsba-outline--compact .tsba-li > a, .tsba .tsba-outline--compact .tsba-li-row { min-height: 46px; padding: 8px var(--tsba-pad); font-size: .925em; } .tsba .tsba-outline--compact .tsba-li-icon { width: 24px; height: 24px; } .tsba .tsba-outline--compact .tsba-li-icon .tsba-icon { width: 14px; height: 14px; } /* Wide containers: sticky sidebar. */ @container (min-width: 860px) { .tsba-lesson .tsba-lesson-side { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; } } /* 8. Small screens ----------------------------------------------------- */ @media (max-width: 480px) { .tsba .tsba-quiz-status { grid-template-columns: 1fr 1fr; } .tsba .tsba-quiz-status .tsba-stat:last-child { grid-column: 1 / -1; } .tsba .tsba-pager { grid-template-columns: 1fr; } .tsba .tsba-pager-next { grid-column: auto; } .tsba .tsba-pager > span:empty { display: none; } .tsba .tsba-li-meta .tsba-tag ~ * { display: none; } } @media (prefers-reduced-motion: reduce) { .tsba *, .tsba *::before, .tsba *::after { transition: none !important; animation: none !important; } } /* Modul-Sperre */ .tsba .tsba-module.is-locked .tsba-module-title { color: var(--tsba-muted); } .tsba .tsba-module-lock { display: inline-flex; color: var(--tsba-muted); } .tsba .tsba-module-lock .tsba-icon { width: 1em; height: 1em; } .tsba .tsba-module-locknote { margin: 0; padding: 8px var(--tsba-pad) 0; color: var(--tsba-muted); } /* Abschlussprüfung */ .tsba .tsba-final { margin-top: 2em; } .tsba .tsba-final-locked { display: flex; gap: .75em; align-items: flex-start; } .tsba .tsba-final-locked p { margin: 0; } .tsba .tsba-banner { display: flex; align-items: center; gap: .5em; margin: 0 0 1em; padding: .75em 1em; border-radius: var(--tsba-radius-sm); background: var(--tsba-ok-soft); color: var(--tsba-ok-ink, var(--tsba-ok)); } .tsba .tsba-banner[hidden], .tsba .tsba-final-cta[hidden] { display: none; } .tsba .tsba-banner .tsba-icon { flex: none; } .tsba .tsba-final-cta { margin-top: 1em; } .tsba .tsba-final-cta p { display: flex; gap: .5em; align-items: center; margin: 0 0 .75em; } .tsba .tsba-badge--todo { color: var(--tsba-text, #22303F); } .tsba .tsba-badge--todo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--tsba-muted); box-sizing: border-box; } /* v0.2 Gliederung: Modulprüfung + Lernzeit */ .tsba .tsba-li--exam .tsba-li-title { font-weight: 600; } .tsba .tsba-module-time { display: inline-flex; align-items: center; gap: 4px; font-size: .8em; font-weight: 400; color: var(--tsba-muted); white-space: nowrap; } .tsba .tsba-module-time .tsba-icon { width: 14px; height: 14px; } /* Module als Akkordeon (details/summary) */ .tsba summary.tsba-module-head { cursor: pointer; list-style: none; } .tsba summary.tsba-module-head::-webkit-details-marker { display: none; } .tsba summary.tsba-module-head::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; opacity: .6; } .tsba details.tsba-module[open] > summary.tsba-module-head::after { transform: rotate(-135deg); } /* 9. Kurs-Kopf (Hero) + Fortschrittsring ------------------------------- */ .tsba .tsba-hero { padding: 0; overflow: hidden; } .tsba .tsba-hero-media { /* Volle Kartenbreite (aspect-ratio + max-height ließ das Bild am Desktop schrumpfen). */ position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 320px; overflow: hidden; background: linear-gradient(135deg, var(--tsba-primary), color-mix(in srgb, var(--tsba-primary) 60%, var(--tsba-accent))); } .tsba .tsba-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; margin: 0; transform: scale(1.04); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); } .tsba .tsba-hero.is-in .tsba-hero-media img, html:not(.tsba-js-reveal) .tsba .tsba-hero-media img { transform: none; } .tsba .tsba-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 70%, color-mix(in srgb, var(--tsba-card-bg) 35%, transparent)); } .tsba .tsba-hero-body { position: relative; padding: var(--tsba-pad); } .tsba .tsba-hero .tsba-hero-top .tsba-ring { margin-top: -52px; border: 4px solid var(--tsba-card-bg); width: 84px; height: 84px; } .tsba .tsba-hero-top, .tsba .tsba-module-intro-top { display: flex; align-items: center; gap: 14px; justify-content: space-between; margin-bottom: .75em; } .tsba .tsba-hero-titles { flex: 1; min-width: 0; } .tsba .tsba-hero-title { margin: 0 0 .25em; } .tsba .tsba-hero-titles .tsba-meta { margin: 0 0 .35em; } .tsba .tsba-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; } .tsba .tsba-meta .tsba-icon { width: 1em; height: 1em; } .tsba .tsba-ring { position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; background: var(--tsba-card-bg); box-shadow: var(--tsba-card-shadow); } .tsba .tsba-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; } .tsba .tsba-ring circle { fill: none; stroke-width: 4.5; stroke-linecap: round; } .tsba .tsba-ring-track { stroke: var(--tsba-progress-track); } .tsba .tsba-ring-val { stroke: var(--tsba-progress-fill); transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1) .15s; } .tsba .tsba-ring.is-complete .tsba-ring-val { stroke: var(--tsba-ok); } .tsba .tsba-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; color: var(--tsba-heading); font-variant-numeric: tabular-nums; } .tsba .tsba-ring-num small { font-size: .65em; font-weight: 700; margin-left: 1px; } .tsba-js-reveal .tsba-reveal:not(.is-in) .tsba-ring-val { stroke-dashoffset: 100; } .tsba-js-reveal .tsba-reveal:not(.is-in) .tsba-progress-fill, .tsba-js-reveal .tsba-reveal:not(.is-in) .tsba-mini-track > span { width: 0 !important; } /* 10. Modul-Kacheln (Kursseite) --------------------------------------- */ .tsba .tsba-mtiles { list-style: none; margin: 0 0 var(--tsba-gap); padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 640px) { .tsba .tsba-mtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tsba-gap); } } @media (min-width: 1024px) { .tsba .tsba-mtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .tsba .tsba-mtile { margin: 0; display: flex; } .tsba .tsba-mtile-link { position: relative; flex: 1; display: flex; flex-direction: column; gap: .55em; min-height: 48px; color: inherit; text-decoration: none; padding: 16px var(--tsba-pad); transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s; -webkit-tap-highlight-color: transparent; } .tsba a.tsba-mtile-link:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tsba-primary) 40%, transparent); box-shadow: 0 2px 4px rgba(16, 32, 56, .06), 0 16px 32px -14px rgba(16, 32, 56, .3); } .tsba a.tsba-mtile-link:active { transform: scale(.985); } .tsba a.tsba-mtile-link:focus-visible { outline: none; box-shadow: var(--tsba-focus); } .tsba .tsba-mtile-top { display: flex; align-items: center; justify-content: space-between; gap: .6em; } .tsba .tsba-mtile-title { font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--tsba-heading); overflow-wrap: break-word; hyphens: auto; } .tsba .tsba-mtile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; font-size: .85em; color: var(--tsba-muted); } .tsba .tsba-mtile-meta .tsba-icon { width: 14px; height: 14px; } .tsba .tsba-mtile-prog { margin-top: auto; display: flex; flex-direction: column; gap: .35em; font-size: .82em; color: var(--tsba-muted); font-variant-numeric: tabular-nums; } .tsba .tsba-mini-track { display: block; height: 6px; border-radius: 999px; overflow: hidden; background: var(--tsba-progress-track); } .tsba .tsba-mini-track > span { display: block; height: 100%; border-radius: inherit; background: var(--tsba-progress-fill); transition: width .9s cubic-bezier(.2, .8, .2, 1) .2s; } .tsba .tsba-mtile.is-done .tsba-mini-track > span { background: var(--tsba-ok); } .tsba .tsba-mtile.is-done .tsba-module-no { background: var(--tsba-ok); } .tsba .tsba-mtile.is-locked .tsba-mtile-link { background: var(--tsba-soft); box-shadow: none; cursor: not-allowed; } .tsba .tsba-mtile.is-locked .tsba-mtile-title { color: var(--tsba-muted); } .tsba .tsba-mtile.is-locked .tsba-module-no { background: var(--tsba-card-bg); color: var(--tsba-muted); box-shadow: inset 0 0 0 2px var(--tsba-line); } .tsba .tsba-mtile-lock { font-size: .82em; color: var(--tsba-muted); } .tsba .tsba-mtile.is-exam .tsba-mtile-link { border-color: color-mix(in srgb, var(--tsba-accent) 45%, transparent); } /* Gesperrte Folgemodule kompakt (Handy: 50 Module ohne endloses Scrollen). */ .tsba .tsba-mtile.is-compact .tsba-mtile-link { gap: .3em; padding-block: 12px; } .tsba .tsba-mtile.is-compact .tsba-mtile-title { font-size: .98rem; } /* Aktuelles Modul: klar markiert, wo es weitergeht. */ .tsba .tsba-mtile.is-current .tsba-mtile-link { border: 2px solid var(--tsba-primary); box-shadow: 0 2px 4px rgba(16, 32, 56, .06), 0 14px 30px -14px color-mix(in srgb, var(--tsba-primary) 55%, transparent); } .tsba .tsba-mtile-here { margin-right: auto; font-size: .75rem; font-weight: 800; letter-spacing: .02em; color: var(--tsba-primary); } .tsba .tsba-mtile-here::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: .45em; border-radius: 50%; background: var(--tsba-accent); vertical-align: 1px; animation: tsba-pulse 1.8s ease-out infinite; } @keyframes tsba-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tsba-accent) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } } @media (prefers-reduced-motion: reduce) { .tsba .tsba-mtile-here::before { animation: none; } } .tsba .tsba-mbadge { display: inline-flex; align-items: center; gap: .3em; flex: none; padding: .25em .65em; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.3; background: var(--tsba-soft); color: var(--tsba-muted); border: 1px solid var(--tsba-line); } .tsba .tsba-mbadge .tsba-icon { width: 1em; height: 1em; } .tsba .tsba-mbadge.is-open { color: var(--tsba-primary); background: color-mix(in srgb, var(--tsba-primary) 8%, transparent); border-color: transparent; } .tsba .tsba-mbadge.is-progress { color: var(--tsba-primary); background: color-mix(in srgb, var(--tsba-primary) 12%, transparent); border-color: transparent; } .tsba .tsba-mbadge.is-exam { color: var(--tsba-accent); background: color-mix(in srgb, var(--tsba-accent) 12%, transparent); border-color: transparent; } .tsba .tsba-mbadge.is-done { color: var(--tsba-ok-ink, var(--tsba-ok)); background: var(--tsba-ok-soft); border-color: transparent; } /* 11. Modulseite ------------------------------------------------------- */ .tsba-module-page .tsba-module-intro { margin-bottom: var(--tsba-gap); } .tsba-module-page .tsba-module-intro-top .tsba-hero-titles { display: flex; flex-direction: column; align-items: flex-start; gap: .4em; } .tsba-module-page .tsba-module-intro-top .tsba-meta { margin: 0; } .tsba-module-page .tsba-desc { margin: 0 0 1em; } .tsba-module-page .tsba-progress { margin-bottom: 1em; } .tsba .tsba-module-gate { display: flex; flex-direction: column; align-items: flex-start; gap: .6em; padding: 14px; border-radius: var(--tsba-radius-sm); background: var(--tsba-soft); } .tsba .tsba-module-gate p { margin: 0; } .tsba .tsba-module-gate > .tsba-icon { color: var(--tsba-muted); } .tsba-module-page .tsba-module-list { padding: 0; overflow: hidden; margin-bottom: var(--tsba-gap); } .tsba-module-page .tsba-module-list .tsba-lessons { padding: 0; } .tsba .tsba-li-tries { font-size: .95em; white-space: nowrap; } .tsba .tsba-li--exam .tsba-li-title { flex: 1 0 auto; } .tsba .tsba-li--exam .tsba-li-meta { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; text-align: right; } .tsba .tsba-crumbs a { display: inline-flex; align-items: center; gap: .3em; min-height: 32px; } .tsba .tsba-crumbs .tsba-icon { width: 1em; height: 1em; } .tsba .tsba-exam-back { margin-top: var(--tsba-gap); } .tsba .tsba-exam-back a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; font-weight: 600; text-decoration: none; } .tsba .tsba-exam-back .tsba-icon { width: 1em; height: 1em; } /* Lektion: Seitenleiste mit aktuellem Modul */ .tsba .tsba-outline-links { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px var(--tsba-pad) 14px; border-top: 1px solid var(--tsba-line); } .tsba .tsba-outline-all { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; font-weight: 600; font-size: .925em; text-decoration: none; } .tsba .tsba-outline-all .tsba-icon { width: 1em; height: 1em; } .tsba .tsba-outline--compact .tsba-lessons { border-top: 1px solid var(--tsba-line); } /* 12. Abschlussprüfung-Karte ------------------------------------------ */ .tsba .tsba-final-card { display: flex; flex-direction: column; gap: 14px; } .tsba .tsba-final-card-row { display: flex; gap: 14px; align-items: flex-start; } .tsba .tsba-final-card-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--tsba-accent) 12%, transparent); color: var(--tsba-accent); } .tsba .tsba-final-card.is-locked .tsba-final-card-icon { background: var(--tsba-soft); color: var(--tsba-muted); } .tsba .tsba-final-card.is-done .tsba-final-card-icon { background: var(--tsba-ok-soft); color: var(--tsba-ok-ink, var(--tsba-ok)); } .tsba .tsba-final-card-text strong { color: var(--tsba-heading); font-size: 1.05rem; } .tsba .tsba-final-card-text p { margin: .2em 0 0; } .tsba .tsba-final--page { margin-top: 0; } /* 13. Downloads mit PDF-Ansicht, Video-Karte -------------------------- */ .tsba .tsba-file-row { display: flex; align-items: stretch; gap: 8px; } .tsba .tsba-file-row .tsba-file-dl { flex: 1; min-width: 0; } .tsba .tsba-file-view { flex: none; min-height: 56px; padding: 0 14px; gap: .4em; border-radius: var(--tsba-radius-sm); } .tsba .tsba-file-view .tsba-icon { width: 18px; height: 18px; } .tsba .tsba-file-view[aria-expanded="true"] { background: color-mix(in srgb, var(--tsba-primary) 8%, transparent); } .tsba .tsba-pdf-view { margin-top: 8px; border: 1px solid var(--tsba-line); border-radius: var(--tsba-radius); overflow: hidden; background: var(--tsba-card-bg); box-shadow: var(--tsba-card-shadow); opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1); } .tsba .tsba-pdf-view.is-in { opacity: 1; transform: none; } .tsba .tsba-pdf-bar { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--tsba-line); font-size: .9em; } .tsba .tsba-pdf-bar strong { flex: 1; } .tsba .tsba-pdf-bar a { font-weight: 600; } .tsba .tsba-pdf-close { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--tsba-radius-sm); background: var(--tsba-soft); color: inherit; font: inherit; font-weight: 700; cursor: pointer; } .tsba .tsba-pdf-view iframe { display: block; width: 100%; height: 80vh; border: 0; background: #525659; } .tsba .tsba-video { box-shadow: var(--tsba-card-shadow); } @media (max-width: 520px) { /* Handy: Datei-Karte oben, „Ansehen“ als breiter Knopf darunter. */ .tsba .tsba-file-row { flex-wrap: wrap; } .tsba .tsba-file-row .tsba-file-dl { flex: 1 1 100%; } .tsba .tsba-file-view { flex: 1 1 100%; min-height: 48px; justify-content: center; } .tsba .tsba-pdf-bar a { display: none; } } .tsba .tsba-content .tsba-files--inline { padding-left: 0; margin: 1em 0 1.4em; font-size: 1rem; } .tsba .tsba-content .tsba-files--inline li::marker { content: none; } .tsba .tsba-content .tsba-files--inline .tsba-file-dl { text-decoration: none; } /* 14. Animationen ------------------------------------------------------ */ .tsba-js-reveal .tsba-reveal { opacity: 0; transform: translateY(14px); } .tsba-js-reveal .tsba-reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease var(--tsba-delay, 0ms), transform .6s cubic-bezier(.2, .8, .2, 1) var(--tsba-delay, 0ms); } .tsba-js-reveal .tsba-mtile.tsba-reveal.is-in .tsba-mtile-link { transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s; } .tsba .tsba-li.is-just-done .tsba-li-icon { animation: tsba-pop .5s cubic-bezier(.2, 1.4, .4, 1); } .tsba .tsba-btn.is-pop { animation: tsba-pop .5s cubic-bezier(.2, 1.4, .4, 1); } @keyframes tsba-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } } .tsba-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 99999; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); width: max-content; padding: 10px 20px 10px 10px; border-radius: 999px; background: #17324F; color: #FFFFFF; line-height: 1.3; font-weight: 700; box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .4); opacity: 0; transform: translate(-50%, 16px); transition: opacity .3s, transform .4s cubic-bezier(.2, .8, .2, 1); } .tsba-toast.is-in { opacity: 1; transform: translate(-50%, 0); } .tsba-toast-check { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tsba-ok, #1F9D57); } .tsba-toast-check path { stroke-dasharray: 24; stroke-dashoffset: 24; } .tsba-toast.is-in .tsba-toast-check path { animation: tsba-draw .45s ease-out .15s forwards; } @keyframes tsba-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .tsba-js-reveal .tsba-reveal { opacity: 1; transform: none; } .tsba-toast, .tsba-toast * { transition: none !important; animation: none !important; } .tsba-toast-check path { stroke-dashoffset: 0; } .tsba a.tsba-mtile-link:hover { transform: none; } } .tsba .tsba-nowrap { display: inline-flex; align-items: center; gap: .25em; white-space: nowrap; } /* 12. Desktop width ---------------------------------------------------- Block-Themes begrenzen den Inhalt oft auf ~650px. Akademie-Seiten nutzen auf dem Desktop die breite Spalte (alignwide), Lesetext bleibt bei ~75 Zeichen. */ .tsba.alignwide.alignwide, .tsba-wide-title.alignwide.alignwide { width: auto; max-width: min(1160px, 100%, var(--responsive--alignwide-width, 100%)); margin-left: auto !important; margin-right: auto !important; } .tsba.tsba-module-page.alignwide.alignwide, .tsba-wide-title--module.alignwide.alignwide { max-width: min(900px, 100%, var(--responsive--alignwide-width, 100%)); } @container (min-width: 880px) { .tsba-lesson .tsba-lesson-side { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px); max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 32px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } .tsba-lesson .tsba-lesson-main { max-width: 820px; } } /* Kurs-Kopf am Desktop: Bild links, Fortschritt rechts (statt stark beschnittenem Banner). */ @media (min-width: 1024px) { .tsba-course.alignwide .tsba-hero.has-media { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; } .tsba-course.alignwide .tsba-hero.has-media .tsba-hero-media { aspect-ratio: 16 / 9; max-height: none; height: 100%; } .tsba-course.alignwide .tsba-hero.has-media .tsba-hero-media img { object-fit: cover; object-position: 50% 50%; } .tsba-course.alignwide .tsba-hero.has-media .tsba-hero-body { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--tsba-pad) * 1.4); } .tsba-course.alignwide .tsba-hero.has-media .tsba-hero-top .tsba-ring { margin-top: 0; } } .tsba.alignwide .tsba-desc { max-width: 52em; } /* 13. Lesetext ------------------------------------------------------------ 0.8 Designlinie: eine Lesespalte, alle Blöcke gleich breit, nur drei Kasten-Typen (.tsba-box--card / --note is-info|is-tip|is-warn / --quote, Grundstil in lesson.css). Abschnitte = h2 mit Trennlinie und Nummer. */ .tsba .tsba-content { font-size: calc(1.0625rem * var(--tsba-fs, 1)); line-height: 1.65; color: var(--tsba-text); text-align: left; counter-reset: tsba-sec; hyphens: auto; -webkit-hyphens: auto; } .tsba .tsba-content > *, .tsba .tsba-content > .tsba-step > * { margin-top: 0; margin-bottom: 1em; max-width: none; margin-left: 0; margin-right: 0; } .tsba .tsba-content p { margin: 0 0 1em; text-align: left; } .tsba .tsba-content p:empty { display: none; } .tsba .tsba-content strong { font-weight: 650; color: var(--tsba-heading); } .tsba .tsba-content > :last-child, .tsba .tsba-content > .tsba-step > :last-child { margin-bottom: 0; } /* Blöcke im Text: gleicher Abstand wie zwischen den Lektionsblöcken, volle Spaltenbreite */ .tsba .tsba-content .tsba-box, .tsba .tsba-content figure, .tsba .tsba-content .tsba-table, .tsba .tsba-content .tsba-embed, .tsba .tsba-content .tsba-checks-end { box-sizing: border-box; width: 100%; max-width: none; margin: var(--tsba-gap-block, 32px) 0; float: none; } .tsba .tsba-content > :is(.tsba-box, figure, .tsba-table, .tsba-embed, .tsba-checks-end, blockquote):first-child { margin-top: 0; } .tsba .tsba-content > :is(.tsba-box, figure, .tsba-table, .tsba-embed, .tsba-checks-end, blockquote):last-child, .tsba .tsba-content > .tsba-step:last-child > :is(.tsba-box, figure, .tsba-table, .tsba-embed, .tsba-checks-end, blockquote):nth-last-child(2) { margin-bottom: 0; } .tsba .tsba-content .tsba-checks-end > .tsba-box:last-child { margin-bottom: 0; } .tsba .tsba-content .tsba-box .tsba-box { margin: 0 0 16px; } .tsba .tsba-content .tsba-box > :last-child { margin-bottom: 0; } .tsba .tsba-content .tsba-box p { margin: 0 0 .75em; } .tsba .tsba-content .tsba-box .tsba-box-head { margin: 0 0 12px; } .tsba .tsba-content .tsba-box > .tsba-box-head + * { margin-top: 0; } .tsba .tsba-content .tsba-box :is(ul, ol) { margin-bottom: .75em; } /* Abschnitte: Trennlinie, Nummer, linksbündig */ .tsba .tsba-content h2 { counter-increment: tsba-sec; position: relative; margin: 40px 0 16px; padding: 32px 0 0; border: 0; border-top: 1px solid var(--tsba-line); font-size: 1.5em; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--tsba-heading); text-align: left; } .tsba .tsba-content h2::before { content: counter(tsba-sec, decimal-leading-zero); display: block; margin-bottom: .45em; font-size: .5em; font-weight: 800; letter-spacing: .14em; color: var(--tsba-primary); } .tsba .tsba-content > h2:first-child, .tsba .tsba-content > .tsba-step:first-child > h2:first-child, .tsba .tsba-content.is-stepped > .tsba-step > h2:first-child, .tsba .tsba-content .tsba-box-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .tsba .tsba-content > .tsba-step + .tsba-step > h2:first-child { margin-top: 40px; } .tsba .tsba-content h3 { margin: 1.75em 0 .5em; padding: 0; border: 0; font-size: 1.1875em; line-height: 1.3; font-weight: 700; color: var(--tsba-heading); text-align: left; } .tsba .tsba-content h4 { margin: 1.5em 0 .4em; padding: 0; border: 0; font-size: 1em; line-height: 1.35; font-weight: 700; color: var(--tsba-heading); text-align: left; } .tsba .tsba-content :is(h2, h3) + :is(h3, h4, p, ul, ol), .tsba .tsba-content h4 + * { margin-top: 0; } /* Listen */ .tsba .tsba-content ul, .tsba .tsba-content ol { padding-left: 0; margin-left: 0; } .tsba .tsba-content ul > li { list-style: none; position: relative; padding-left: 1.5em; margin: 0 0 .5em; } .tsba .tsba-content ul > li::before { content: ""; position: absolute; left: .3em; top: .66em; width: .42em; height: .42em; border-radius: 50%; background: var(--tsba-primary); opacity: .8; } .tsba .tsba-content ol { counter-reset: tsba-ol; } .tsba .tsba-content ol > li { list-style: none; position: relative; padding-left: 2.1em; margin: 0 0 .6em; counter-increment: tsba-ol; } .tsba .tsba-content ol > li::before { content: counter(tsba-ol); position: absolute; left: 0; top: .1em; width: 1.5em; height: 1.5em; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .82em; font-weight: 800; background: color-mix(in srgb, var(--tsba-primary) 12%, transparent); color: var(--tsba-primary); } .tsba .tsba-content li > :is(ul, ol) { margin: .5em 0 0; } .tsba .tsba-content li > p:last-child { margin-bottom: 0; } .tsba .tsba-content p + ul, .tsba .tsba-content p + ol { margin-top: -.3em; } /* Bilder, Medien, Tabellen, Trenner */ .tsba .tsba-content img { max-width: 100%; height: auto; } .tsba .tsba-content figure img { display: block; width: auto; max-width: 100%; margin: 0 auto; border-radius: var(--tsba-media-radius, 10px); box-shadow: none; } .tsba .tsba-content figcaption { margin-top: .6em; font-size: .8125rem; line-height: 1.45; color: var(--tsba-muted); text-align: left; } .tsba .tsba-content .tsba-embed { position: relative; aspect-ratio: 16 / 9; } .tsba .tsba-content .tsba-embed:has(> video) { aspect-ratio: auto; } .tsba .tsba-content .tsba-embed > :is(iframe, video) { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--tsba-media-radius, 10px); } .tsba .tsba-content .tsba-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--tsba-line); border-radius: var(--tsba-media-radius, 10px); } .tsba .tsba-content .tsba-table:focus-visible { outline: 2px solid var(--tsba-primary); outline-offset: 2px; } .tsba .tsba-content .tsba-table table { width: 100%; min-width: 32em; margin: 0; border-collapse: collapse; font-size: .9375em; line-height: 1.45; hyphens: manual; } .tsba .tsba-content .tsba-table :is(th, td) { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--tsba-line); text-align: left; vertical-align: top; } .tsba .tsba-content .tsba-table th, .tsba .tsba-content .tsba-table thead td { background: var(--tsba-soft); font-weight: 700; color: var(--tsba-heading); } .tsba .tsba-content .tsba-table tr:last-child > :is(td, th) { border-bottom: 0; } .tsba .tsba-content hr { width: 48px; height: 0; margin: 2em 0; border: 0; border-top: 2px solid var(--tsba-line); background: none; max-width: none; } .tsba .tsba-content hr::before { content: none; } .tsba .tsba-content hr + hr { display: none; } .tsba .tsba-content blockquote { margin: var(--tsba-gap-block, 32px) 0; padding: 0; border: 0; background: none; font-style: normal; font-size: 1em; quotes: none; } .tsba .tsba-content blockquote::before, .tsba .tsba-content blockquote::after { content: none; } /* Kurze Einzeiler im Zitatblock („Viel Erfolg!“): ohne Kasten, linksbündig */ .tsba .tsba-content .tsba-callout--plain { font-weight: 600; color: var(--tsba-muted); text-align: left; } /* Kästen im Text (Hinweis, Merksatz, Achtung, Szenario/Beispiel, Aufgabe) */ .tsba .tsba-content .tsba-box--note, .tsba .tsba-content .tsba-box--quote { font-size: 1em; } .tsba .tsba-content .tsba-keynote { font-size: 1.0625em; font-weight: 600; line-height: 1.5; color: var(--tsba-heading); font-style: normal; } .tsba .tsba-content .tsba-box--quote .tsba-keynote { font-style: italic; } /* Labels („Aufgabe“, „Hinweise zur Bearbeitung“) als Zwischenzeile */ .tsba .tsba-content .tsba-label { display: block; margin: 1.25em 0 .35em; padding: 0; font-size: .75rem; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--tsba-primary); } .tsba .tsba-content .tsba-box .tsba-label { color: var(--tsba-muted); } .tsba .tsba-content .tsba-label::before { content: none; } .tsba .tsba-content .tsba-upload-hint { display: block; margin: .75em 0; padding: 10px 14px; border-radius: var(--tsba-media-radius, 10px); font-size: .875em; font-weight: 600; background: var(--tsba-soft); color: var(--tsba-heading); } /* Redaktionelle Hinweise in Klammern */ .tsba .tsba-content .tsba-aside { font-style: normal; font-size: .875em; color: var(--tsba-muted); } .tsba .tsba-content .tsba-source-note { margin-top: -.6em; font-size: .9em; } /* Aufklappbare Karten (Transkript, ausführliche Fassung) */ .tsba .tsba-content details.tsba-box--fold { padding: 0; } .tsba .tsba-content details.tsba-box--fold > summary.tsba-box-head { cursor: pointer; list-style: none; margin: 0; min-height: 48px; padding: 14px var(--tsba-box-pad, 24px); border-radius: var(--tsba-box-radius, 14px); -webkit-tap-highlight-color: transparent; } .tsba .tsba-content details.tsba-box--fold > summary::-webkit-details-marker { display: none; } .tsba .tsba-content details.tsba-box--fold > summary::before, .tsba .tsba-content details.tsba-box--fold > summary::after { content: none; } .tsba .tsba-content details.tsba-box--fold > summary:hover { background: var(--tsba-soft); } .tsba .tsba-content details.tsba-box--fold > summary:focus-visible { outline: 2px solid var(--tsba-primary); outline-offset: 2px; } .tsba .tsba-content details.tsba-box--fold[open] > summary { border-radius: var(--tsba-box-radius, 14px) var(--tsba-box-radius, 14px) 0 0; } .tsba .tsba-content .tsba-box--fold > summary > .tsba-box-toggle { order: 1; margin-left: auto; flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--tsba-soft); color: var(--tsba-primary); } .tsba .tsba-content .tsba-box--fold > summary > .tsba-box-toggle::before, .tsba .tsba-content .tsba-box--fold > summary > .tsba-box-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: currentColor; transition: transform .2s ease; } .tsba .tsba-content .tsba-box--fold > summary > .tsba-box-toggle::after { transform: rotate(90deg); } .tsba .tsba-content .tsba-box--fold[open] > summary > .tsba-box-toggle::after { transform: rotate(0deg); } .tsba .tsba-content .tsba-box--fold > summary > :is(.tsba-box-title, .tsba-deep__m) { order: 2; flex: 0 0 100%; min-width: 0; } .tsba .tsba-content .tsba-box--fold > .tsba-box-body { padding: 18px var(--tsba-box-pad, 24px) var(--tsba-box-pad, 24px); border-top: 1px solid var(--tsba-line); } .tsba .tsba-content .tsba-box--fold > .tsba-box-body > :first-child { margin-top: 0; } .tsba .tsba-content .tsba-box--fold > .tsba-box-body > :last-child { margin-bottom: 0; } .tsba .tsba-content details.tsba-transkript .tsba-box-title { font-size: 1rem; } .tsba .tsba-content details.tsba-transkript > .tsba-box-body { font-size: .9375em; } /* Wissensfragen im Text (Karte, Feedback als Hinweis in der Karte) */ .tsba .tsba-content .tsba-checks-end .tsba-check { margin: 16px 0 0; } .tsba .tsba-content .tsba-check .tsba-check__fb { margin: 0; } .tsba .tsba-content .tsba-check p.tsba-check__hint { margin: 0 0 12px; } .tsba .tsba-content .tsba-check .tsba-check__fb p { margin: 0; } .tsba .tsba-content .tsba-check .tsba-check__fb p + p, .tsba .tsba-content .tsba-check .tsba-check__fb .tsba-check__answerfb { margin-top: 6px; } /* Linklisten */ .tsba .tsba-content .tsba-linkbox ul { margin: 0; } .tsba .tsba-content .tsba-linkbox li { overflow-wrap: anywhere; } .tsba .tsba-content a:not(.tsba-btn) { text-underline-offset: .18em; text-decoration-thickness: 1px; } @media (max-width: 600px) { .tsba .tsba-content { font-size: calc(1rem * var(--tsba-fs, 1)); } .tsba .tsba-content h2 { font-size: 1.32em; margin-top: 32px; padding-top: 24px; } .tsba .tsba-content details.tsba-box--fold > summary.tsba-box-head { padding: 12px var(--tsba-box-pad, 18px); } .tsba .tsba-content .tsba-box--fold > .tsba-box-body { padding: 14px var(--tsba-box-pad, 18px) var(--tsba-box-pad, 18px); } } /* 14. Inhaltsverzeichnis + Lesefortschritt ------------------------------- */ .tsba-readbar { position: fixed; left: 0; right: 0; top: var(--wp-admin--admin-bar--height, 0px); height: 3px; z-index: 9999; pointer-events: none; } .tsba-readbar span { display: block; height: 100%; background: var(--tsba-progress-fill, #003f7f); transform: scaleX(0); transform-origin: 0 50%; transition: transform .1s linear; } .tsba .tsba-toc { display: none; margin-bottom: 14px; padding: 16px 18px 12px; } @container (min-width: 880px) { .tsba .tsba-toc { display: block; } } .tsba .tsba-toc-title { margin: 0 0 .5em; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tsba-muted); } .tsba .tsba-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .tsba .tsba-toc li { margin: 0; } .tsba .tsba-toc a { display: block; padding: .38em 0 .38em .8em; border-left: 2px solid var(--tsba-line); font-size: .86rem; line-height: 1.35; color: var(--tsba-muted); text-decoration: none; transition: color .2s, border-color .2s; } .tsba .tsba-toc .tsba-toc-h3 a { padding-left: 1.6em; font-size: .8rem; } .tsba .tsba-toc a:hover { color: var(--tsba-heading); } .tsba .tsba-toc a.is-active { color: var(--tsba-primary); border-left-color: var(--tsba-primary); font-weight: 700; } .tsba .tsba-content :is(h2, h3)[id] { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 24px); } html:has(.tsba-lesson) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html:has(.tsba-lesson) { scroll-behavior: auto; } } .tsba .tsba-content hr:has(+ .tsba-callout--plain), .tsba .tsba-content .tsba-callout--plain + hr { display: none; } .tsba .tsba-content .tsba-callout--plain { margin: 1.2em 0; } .tsba .tsba-content .tsba-callout--task { background: color-mix(in srgb, var(--c) 3%, var(--tsba-card-bg)); } .tsba.alignwide .tsba-desc { max-width: 46rem; font-size: 1.0625rem; line-height: 1.7; } .tsba.alignwide .tsba-desc p { margin: 0 0 .9em; } .tsba-course .tsba-h.tsba-outline-title, .tsba-module-page .tsba-h.tsba-outline-title { margin: 2.2em 0 .9em; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tsba-muted); display: flex; align-items: center; gap: 1em; } .tsba-course .tsba-outline-title::after, .tsba-module-page .tsba-outline-title::after { content: ""; flex: 1; height: 1px; background: var(--tsba-line); } /* 15. Lern-Navigation (Seitenleiste) -------------------------------------- Eine ruhige, kompakte Karte: Modulkopf, schmaler Fortschritt, nummerierte Lektionen mit Kurztiteln, Abschnitte der aktuellen Lektion darunter. */ .tsba .tsba-lesson-side { font-size: 1rem; } .tsba .tsba-lesson-side .tsba-outline-box { border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 30, 60, .04), 0 8px 24px rgba(15, 30, 60, .06); } .tsba .tsba-lesson-side .tsba-outline-box > summary { align-items: flex-start; gap: 10px; min-height: 0; padding: 18px 18px 10px; } .tsba .tsba-lesson-side .tsba-outline-head { gap: 4px; } .tsba .tsba-lesson-side .tsba-nav-over { font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tsba-muted); } .tsba .tsba-lesson-side .tsba-nav-title { font-size: .975rem; font-weight: 700; line-height: 1.3; color: var(--tsba-heading); hyphens: manual; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tsba .tsba-lesson-side .tsba-nav-count { flex: none; margin-top: 1px; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--tsba-soft); color: var(--tsba-muted); } .tsba .tsba-lesson-side .tsba-outline-box > summary > .tsba-icon { width: 16px; height: 16px; margin-top: 3px; } .tsba .tsba-lesson-side .tsba-outline-box > .tsba-progress { margin: 0; padding: 0 18px 14px; } .tsba .tsba-lesson-side .tsba-progress-label { display: none; } .tsba .tsba-lesson-side .tsba-progress-track { height: 4px; } .tsba .tsba-lesson-side .tsba-outline--compact .tsba-lessons { list-style: none; margin: 0; padding: 6px 0; border-top: 1px solid var(--tsba-line); } .tsba .tsba-lesson-side .tsba-outline--compact .tsba-li { margin: 0; border: 0; } .tsba .tsba-lesson-side .tsba-outline--compact .tsba-li > a, .tsba .tsba-lesson-side .tsba-outline--compact .tsba-li-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 7px 18px; font-size: .875rem; line-height: 1.35; color: var(--tsba-text); text-decoration: none; border: 0; box-shadow: none; background: none; } .tsba .tsba-lesson-side .tsba-outline--compact .tsba-li > a:hover { background: var(--tsba-soft); } .tsba .tsba-lesson-side .tsba-li-title { flex: 1; min-width: 0; hyphens: manual; overflow-wrap: normal; word-break: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tsba .tsba-lesson-side .tsba-li.is-current > a { background: color-mix(in srgb, var(--tsba-primary) 7%, transparent); box-shadow: inset 3px 0 0 var(--tsba-primary); font-weight: 700; color: var(--tsba-heading); } /* Schritt-Symbol: Nummer, Haken (erledigt) oder Schloss */ .tsba .tsba-lesson-side .tsba-outline--compact .tsba-li-icon { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--tsba-line); background: var(--tsba-card-bg); color: var(--tsba-muted); } .tsba .tsba-lesson-side .tsba-li-num { font-size: .6875rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .tsba .tsba-lesson-side .tsba-li.is-open .tsba-li-icon .tsba-icon, .tsba .tsba-lesson-side .tsba-li.is-current:not(.is-done) .tsba-li-icon .tsba-icon { display: none; } .tsba .tsba-lesson-side .tsba-li.is-done .tsba-li-num, .tsba .tsba-lesson-side .tsba-li.is-locked .tsba-li-num { display: none; } .tsba .tsba-lesson-side .tsba-li.is-done .tsba-li-icon { border-color: var(--tsba-ok); background: var(--tsba-ok); color: #fff; } .tsba .tsba-lesson-side .tsba-li.is-current .tsba-li-icon { border-color: var(--tsba-primary); color: var(--tsba-primary); } .tsba .tsba-lesson-side .tsba-li.is-current.is-done .tsba-li-icon { color: #fff; } .tsba .tsba-lesson-side .tsba-li.is-locked { opacity: 1; } .tsba .tsba-lesson-side .tsba-li.is-locked :is(a, span) { color: var(--tsba-muted); } .tsba .tsba-lesson-side .tsba-li-icon .tsba-icon { width: 12px; height: 12px; } .tsba .tsba-lesson-side .tsba-li--exam { margin-top: 4px; border-top: 1px dashed var(--tsba-line); padding-top: 4px; } .tsba .tsba-lesson-side .tsba-li--exam .tsba-li-title { font-weight: 700; } .tsba .tsba-lesson-side .tsba-li--exam.is-open .tsba-li-icon .tsba-icon { display: inline; } /* Abschnitte der aktuellen Lektion */ .tsba .tsba-lesson-side .tsba-toc-sub { list-style: none; margin: 2px 0 8px; padding: 0 18px 0 50px; } .tsba .tsba-lesson-side .tsba-toc-sub li { margin: 0; } .tsba .tsba-lesson-side .tsba-toc-sub a { display: block; padding: 4px 0 4px 12px; border-left: 2px solid var(--tsba-line); font-size: .8125rem; line-height: 1.35; color: var(--tsba-muted); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tsba .tsba-lesson-side .tsba-toc-sub a:hover { color: var(--tsba-heading); } .tsba .tsba-lesson-side .tsba-toc-sub a.is-active { color: var(--tsba-primary); border-left-color: var(--tsba-primary); font-weight: 600; } .tsba .tsba-lesson-side .tsba-toc-sub .tsba-toc-h3 a { padding-left: 22px; } .tsba .tsba-lesson-side .tsba-outline-links { display: flex; justify-content: space-between; gap: 8px; padding: 10px 18px 12px; border-top: 1px solid var(--tsba-line); } .tsba .tsba-lesson-side .tsba-outline-all { min-height: 36px; font-size: .8125rem; font-weight: 600; } @container (min-width: 880px) { .tsba-lesson .tsba-outline-box > summary { cursor: default; pointer-events: none; } .tsba-lesson .tsba-outline-box > summary > .tsba-icon { display: none; } .tsba-lesson .tsba-lesson-side { scrollbar-width: none; } } .tsba .tsba-lesson-side .tsba-li-title { font-weight: 500; } .tsba .tsba-lesson-side .tsba-li.is-current .tsba-li-title { font-weight: 700; } .tsba .tsba-lesson-side .tsba-li--exam .tsba-li-icon { border-color: transparent; background: color-mix(in srgb, var(--tsba-primary) 10%, transparent); color: var(--tsba-primary); } .tsba .tsba-lesson-side .tsba-li--exam.is-locked .tsba-li-icon { background: var(--tsba-soft); color: var(--tsba-muted); } .tsba .tsba-lesson-side .tsba-li--exam.is-done .tsba-li-icon { background: var(--tsba-ok); color: #fff; } .tsba .tsba-lesson-side .tsba-li--exam .tsba-li-icon .tsba-icon { display: inline !important; } /* Kopfzeile der Lektion ruhiger */ .tsba-lesson .tsba-crumbs { font-size: .875rem; font-weight: 600; } .tsba-lesson .tsba-lesson-main > .tsba-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: .6em 0 1.6em; font-size: .8125rem; color: var(--tsba-muted); } .tsba-lesson .tsba-lesson-main > .tsba-meta .tsba-dot { display: none; } .tsba-lesson .tsba-meta .tsba-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--tsba-soft); font-weight: 600; } .tsba-lesson .tsba-meta .tsba-chip .tsba-icon { width: 14px; height: 14px; } /* ===================================================================== 0.4 Lernoberfläche: Fokusmodus, Handy-Leiste, Lernziele, Selbstcheck, Notizen, Merkkarte, Checkliste, Schrittmodus, Lernpfad, PDF, Dunkelmodus ===================================================================== */ /* 16. Lesbarkeit (U6) -------------------------------------------------- */ .tsba-lesson .tsba-lesson-main, .tsba-module-page, .tsba-course, .tsba-dashboard, .tsba-exam-page { font-size: calc(1rem * var(--tsba-fs, 1)); } .tsba :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--tsba-primary); outline-offset: 2px; box-shadow: none; } .tsba .tsba-li > a:focus-visible, .tsba a.tsba-mtile-link:focus-visible { outline-offset: -3px; } /* 0.9 Kontrast: gesperrte Knöpfe ohne Transparenz – lesbare graue Schrift auf heller Fläche. */ .tsba .tsba-btn:disabled, .tsba .tsba-btn[aria-disabled="true"] { opacity: 1; background: var(--tsba-soft); color: var(--tsba-muted); border-color: var(--tsba-line); box-shadow: none; } .tsba .tsba-pager-next.is-locked { opacity: 1; border-style: dashed; color: var(--tsba-muted); } .tsba .tsba-lesson-side .tsba-li.is-locked { opacity: 1; } .tsba .tsba-lesson-side .tsba-li.is-locked .tsba-li-title { color: var(--tsba-muted); } .tsba .tsba-content .tsba-source-note, .tsba .tsba-content .tsba-aside { color: var(--tsba-muted); } .tsba .tsba-content a.tsba-ref { font-weight: 600; text-decoration-style: dotted; text-decoration-thickness: 1.5px; } .tsba .tsba-content a.tsba-ref:hover { text-decoration-style: solid; } /* 17. Theme-Integration & Fokusmodus (0.7) ---------------------------- Kopfbereich und Menüleiste des Themes bleiben immer sichtbar. Der optionale Fokusmodus blendet nur Seitenleisten und Fußbereich aus. */ body.tsba-focus .wp-site-blocks > footer, body.tsba-focus footer.wp-block-template-part, body.tsba-focus :is(#colophon, #site-footer, footer.site-footer, .site-footer, .elementor-location-footer, #secondary, aside.widget-area, .sidebar-primary, .sidebar-secondary) { display: none !important; } body.tsba-focus :is(.wp-block-post-title, .entry-title) { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.15; } /* Akademie-Leiste: schlanke Unterleiste im Inhalt (nicht sticky, kein zweiter Seitenkopf). */ .tsba-focusbar.tsba { position: relative; z-index: 1; margin: 0 auto 18px; background: var(--tsba-soft); color: var(--tsba-text, inherit); border: 1px solid var(--tsba-line); border-radius: var(--tsba-radius-sm); font-size: .9375rem; line-height: 1.3; } .tsba-focusbar.tsba.alignwide.alignwide { width: auto; max-width: min(1160px, 100%, var(--responsive--alignwide-width, 100%)); margin-left: auto !important; margin-right: auto !important; } body.single-tsba_module .tsba-focusbar.tsba.alignwide.alignwide { max-width: min(900px, 100%, var(--responsive--alignwide-width, 100%)); } .tsba-focusbar .tsba-focusbar-in { display: flex; align-items: center; gap: 12px; margin: 0; padding: 4px 6px 4px 10px; min-height: 48px; } .tsba-focusbar .tsba-fb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; text-decoration: none; color: inherit; } .tsba-focusbar .tsba-fb-logo { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; flex: none; } .tsba-focusbar .tsba-fb-mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--tsba-primary); color: #fff; font-weight: 800; } .tsba-focusbar .tsba-fb-mark .tsba-icon { width: 17px; height: 17px; } .tsba-focusbar .tsba-fb-titles { display: flex; flex-direction: column; min-width: 0; } .tsba-focusbar .tsba-fb-titles small { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tsba-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tsba-focusbar .tsba-fb-titles strong { font-size: .95rem; color: var(--tsba-heading, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; } .tsba-focusbar .tsba-fb-prog { flex: 1 1 160px; display: flex; align-items: center; gap: 10px; min-width: 90px; max-width: 320px; margin-left: auto; } .tsba-focusbar .tsba-fb-prog .tsba-progress-track { flex: 1; height: 6px; border-radius: 99px; background: var(--tsba-progress-track); overflow: hidden; display: block; } .tsba-focusbar .tsba-fb-prog .tsba-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--tsba-progress-fill); transition: width .6s cubic-bezier(.2, .8, .2, 1); } .tsba-focusbar .tsba-fb-prog.is-complete .tsba-progress-fill { background: var(--tsba-ok); } .tsba-focusbar .tsba-fb-prog strong { font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--tsba-heading, inherit); } .tsba-focusbar .tsba-fb-tools { display: flex; align-items: center; gap: 6px; flex: none; } .tsba-focusbar .tsba-fs { display: inline-flex; border: 1px solid var(--tsba-line); border-radius: 10px; overflow: hidden; } .tsba-focusbar.tsba .tsba-fs-btn { min-width: 40px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 0; background: transparent !important; color: inherit !important; font: inherit; font-weight: 700; text-transform: none; letter-spacing: normal; cursor: pointer; } .tsba-focusbar .tsba-fs-btn + .tsba-fs-btn { border-left: 1px solid var(--tsba-line); font-size: 1.1em; } .tsba-focusbar.tsba .tsba-fs-btn:hover { background: color-mix(in srgb, currentColor 8%, transparent) !important; } .tsba-focusbar .tsba-fs-btn:disabled { opacity: .45; cursor: default; } .tsba-focusbar .tsba-fb-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px; font-weight: 700; font-size: .875rem; text-decoration: none; color: var(--tsba-primary); } .tsba-focusbar .tsba-fb-link:hover { background: var(--tsba-soft); } .tsba-focusbar .tsba-fb-link .tsba-icon { width: 18px; height: 18px; } .tsba-focusbar .tsba-fb-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--tsba-heading, inherit); text-decoration: none; } .tsba-focusbar .tsba-fb-close:hover { background: color-mix(in srgb, currentColor 12%, transparent); } .tsba-focusbar .tsba-fb-close .tsba-icon { width: 20px; height: 20px; } .tsba-skip { position: absolute; left: 12px; top: -60px; z-index: 10000; padding: 10px 16px; border-radius: 8px; background: var(--tsba-primary, #003C73); color: #fff !important; font-weight: 700; text-decoration: none; } .tsba-skip:focus { top: 8px; } @media (max-width: 720px) { .tsba-focusbar .tsba-focusbar-in { gap: 6px; padding: 3px 4px 3px 8px; min-height: 46px; } .tsba-focusbar .tsba-fb-titles small { display: none; } .tsba-focusbar .tsba-fb-titles strong { max-width: 100%; font-size: .875rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .tsba-focusbar .tsba-fb-brand { flex: 1 1 auto; } .tsba-focusbar .tsba-fb-logo, .tsba-focusbar .tsba-fb-mark { width: 26px; height: 26px; } .tsba-focusbar .tsba-fb-prog { flex: 0 0 auto; min-width: 0; margin-left: 0; } .tsba-focusbar .tsba-fb-prog .tsba-progress-track { display: none; } .tsba-focusbar .tsba-fb-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .tsba-focusbar .tsba-fb-link { padding: 0 9px; } .tsba-focusbar.tsba .tsba-fs-btn { min-width: 36px; } } @media (max-width: 380px) { .tsba-focusbar .tsba-fs { display: none; } } /* 18. Lernziele, Einleitung, Kernaussagen (D1, I1, D8) ------------------ */ .tsba .tsba-goals { margin: 0 0 1.4em; padding: 18px 20px 16px; border-radius: var(--tsba-radius); background: color-mix(in srgb, var(--tsba-ok) 8%, var(--tsba-card-bg)); border: 1px solid color-mix(in srgb, var(--tsba-ok) 28%, transparent); } .tsba .tsba-goals-h { display: flex; align-items: center; gap: 8px; margin: 0 0 .6em; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--tsba-ok) 70%, var(--tsba-heading, #000)); } .tsba .tsba-goals-h .tsba-icon { width: 20px; height: 20px; } .tsba .tsba-goals ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; } .tsba .tsba-goals li { position: relative; padding-left: 1.6em; margin: 0; font-size: 1.02em; line-height: 1.5; color: var(--tsba-heading, inherit); } .tsba .tsba-goals li::before { content: ""; position: absolute; left: .15em; top: .45em; width: .75em; height: .4em; border-left: 2.5px solid var(--tsba-ok); border-bottom: 2.5px solid var(--tsba-ok); transform: rotate(-45deg); } .tsba .tsba-intro-text { margin: 0 0 1.4em; font-size: calc(1.1rem * var(--tsba-fs, 1)); line-height: 1.65; max-width: 42em; } .tsba .tsba-intro-text > :last-child { margin-bottom: 0; } /* Kernaussagen: Hinweis-Kasten (Tipp), Markup .tsba-box--note.is-tip aus TSBA_Typo::key_points_html() */ .tsba .tsba-keypoints ul { margin: 0; } .tsba .tsba-keypoints li { margin-bottom: .35em; } .tsba .tsba-content .tsba-keypoints + details.tsba-transkript { margin-top: 12px; } /* 19. Kann ich das? / Notizen / Merkkarte (D1, D9, D7) ------------------- */ .tsba .tsba-cando, .tsba .tsba-notes, .tsba .tsba-summary { margin: 0 0 var(--tsba-gap); } .tsba .tsba-cando-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tsba .tsba-cando-h, .tsba .tsba-notes-h { margin: 0; font-size: 1.15rem; } .tsba .tsba-cando-count { flex: none; padding: 3px 10px; border-radius: 99px; background: var(--tsba-soft); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tsba-muted); } .tsba .tsba-cando.is-all .tsba-cando-count { background: var(--tsba-ok-soft); color: var(--tsba-ok-ink, var(--tsba-ok)); } .tsba .tsba-cando > .tsba-small { margin: .4em 0 .8em; } .tsba .tsba-cando-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .tsba .tsba-cando-list li { margin: 0; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--tsba-radius-sm); border: 1px solid var(--tsba-line); transition: background .2s, border-color .2s; } .tsba .tsba-cando-list li:has(input:checked) { background: var(--tsba-ok-soft); border-color: color-mix(in srgb, var(--tsba-ok) 40%, transparent); } .tsba .tsba-cando-list input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--tsba-ok); cursor: pointer; } .tsba .tsba-cando-list label { flex: 1; cursor: pointer; line-height: 1.45; } .tsba .tsba-save-state { margin: .5em 0 0; min-height: 1.2em; font-size: .8rem; color: var(--tsba-muted); } .tsba .tsba-save-state.is-ok { color: var(--tsba-ok-ink, var(--tsba-ok)); } .tsba .tsba-save-state.is-error { color: var(--tsba-warn); } .tsba .tsba-reflect { margin: .8em 0 .9em; padding: .9em 1.1em; border-left: 4px solid #7c4dbd; border-radius: 0 var(--tsba-radius-sm) var(--tsba-radius-sm) 0; background: color-mix(in srgb, #7c4dbd 7%, var(--tsba-card-bg)); } .tsba .tsba-reflect-l { margin: 0 0 .25em; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6a3fb0; } .tsba .tsba-reflect-q { margin: 0; font-weight: 600; font-size: 1.02em; line-height: 1.5; color: var(--tsba-heading, inherit); } .tsba .tsba-note-field { display: block; width: 100%; min-height: 110px; margin-top: .8em; padding: 12px 14px; resize: vertical; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: var(--tsba-radius-sm); background: var(--tsba-card-bg); color: inherit; font: inherit; font-size: 1rem; line-height: 1.55; } .tsba .tsba-note-field:focus { border-color: var(--tsba-primary); } .tsba .tsba-summary { position: relative; border-top: 4px solid var(--tsba-accent); } .tsba .tsba-summary-head { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: start; margin-bottom: .8em; } .tsba .tsba-summary-over { grid-column: 1; margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tsba-accent); } .tsba .tsba-summary-h { grid-column: 1; margin: .1em 0 0; font-size: 1.25rem; } .tsba .tsba-summary-mod { grid-column: 1; margin: .15em 0 0; font-size: .85rem; color: var(--tsba-muted); } .tsba .tsba-summary-print { grid-column: 2; grid-row: 1 / span 3; min-height: 42px; padding: 0 14px; gap: 6px; font-size: .875rem; } .tsba .tsba-summary-print .tsba-icon { width: 18px; height: 18px; } .tsba .tsba-summary-body { font-size: 1rem; line-height: 1.6; } .tsba .tsba-summary-body > :last-child { margin-bottom: 0; } .tsba .tsba-summary-body ul { padding-left: 1.2em; } .tsba .tsba-summary-body li { margin-bottom: .35em; } @media (max-width: 520px) { .tsba .tsba-summary-head { grid-template-columns: 1fr; } .tsba .tsba-summary-print { grid-column: 1; grid-row: auto; margin-top: .7em; justify-self: start; } } @media print { html.tsba-printing body * { visibility: hidden !important; } html.tsba-printing .tsba-print-target, html.tsba-printing .tsba-print-target * { visibility: visible !important; } html.tsba-printing .tsba-print-target { position: absolute; left: 0; top: 0; width: 100%; margin: 0; box-shadow: none !important; border: 1px solid #999; color: #000; background: #fff; } html.tsba-printing .tsba-print-target .tsba-summary-print { display: none !important; } html.tsba-printing .tsba-focusbar, html.tsba-printing .tsba-mbar, html.tsba-printing .tsba-readbar { display: none !important; } } /* 20. Abschluss + Checkliste (U3) ---------------------------------------- */ .tsba .tsba-complete-h { margin: 0 0 .6em; font-size: 1.15rem; } .tsba .tsba-checklist { margin: 0 0 1em; padding: 14px 16px; border-radius: var(--tsba-radius-sm); background: var(--tsba-soft); } .tsba .tsba-checklist[hidden] { display: none; } .tsba .tsba-checklist-h { margin: 0 0 .5em; font-size: .95rem; color: var(--tsba-heading, inherit); } .tsba .tsba-checklist-track { height: 6px; border-radius: 99px; background: var(--tsba-progress-track); overflow: hidden; margin-bottom: .6em; } .tsba .tsba-checklist-track span { display: block; height: 100%; width: 0; background: var(--tsba-ok); border-radius: inherit; transition: width .5s cubic-bezier(.2, .8, .2, 1); } .tsba .tsba-checklist-why { margin: 0 0 .6em; color: var(--tsba-text, inherit); } .tsba .tsba-checklist.is-done .tsba-checklist-why { color: var(--tsba-ok-ink, var(--tsba-ok)); font-weight: 700; } .tsba .tsba-checklist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .tsba .tsba-checklist-list li { margin: 0; } .tsba .tsba-checklist-list button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 99px; cursor: pointer; border: 1px solid var(--tsba-line); background: var(--tsba-card-bg); color: inherit; font: inherit; font-size: .82rem; font-weight: 600; } /* 0.9: gleiche ruhige Statuspille wie an den Wissensfragen (offen = Ring, erledigt = grüner Punkt). */ .tsba .tsba-checklist-list button { color: var(--tsba-text, inherit); background: var(--tsba-surface, var(--tsba-card-bg)); } .tsba .tsba-checklist-list button::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--tsba-muted); box-sizing: border-box; } .tsba .tsba-checklist-list .is-done button { color: var(--tsba-ok-ink, var(--tsba-ok)); border-color: color-mix(in srgb, var(--tsba-ok) 40%, transparent); } .tsba .tsba-checklist-list .is-done button::before { border-color: var(--tsba-ok); background: var(--tsba-ok); } .tsba .tsba-checklist-list .is-next button { border-color: color-mix(in srgb, currentColor 45%, transparent); box-shadow: none; } .tsba .tsba-checklist-list button:hover { border-color: var(--tsba-primary); } /* 21. Schrittmodus (D6) -------------------------------------------------- */ .tsba .tsba-stepbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 1.2em; padding: 10px 12px; border-radius: var(--tsba-radius-sm); border: 1px solid var(--tsba-line); background: var(--tsba-card-bg); } .tsba .tsba-stepbar-l { font-size: .85rem; font-weight: 700; color: var(--tsba-heading, inherit); font-variant-numeric: tabular-nums; } .tsba .tsba-stepdots { display: flex; gap: 4px; flex: 1 1 120px; min-width: 80px; } .tsba .tsba-stepdots button { flex: 1; height: 8px; min-width: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--tsba-progress-track); cursor: pointer; } .tsba .tsba-stepdots button.is-seen { background: color-mix(in srgb, var(--tsba-primary) 45%, transparent); } .tsba .tsba-stepdots button[aria-current="step"] { background: var(--tsba-primary); } .tsba .tsba-stepmode-toggle { margin-left: auto; min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--tsba-line); background: transparent; color: var(--tsba-primary); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; } .tsba .tsba-stepmode-toggle:hover { border-color: var(--tsba-primary); } .tsba .tsba-content.is-stepped > .tsba-step[hidden] { display: none; } .tsba .tsba-content > .tsba-step { max-width: none; margin: 0; } /* 0.8: Abstände/Breiten im Schrittmodus wie im Lesetext (Abschnitt 13). */ .tsba .tsba-stepnav { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6em 0 .4em; max-width: 42em; } .tsba .tsba-stepnav .tsba-btn { flex: 1 1 200px; } .tsba .tsba-stepnav .tsba-btn--ghost { flex: 0 1 auto; } .tsba .tsba-content:not(.is-stepped) .tsba-stepnav { display: none; } /* 22. Handy: Leiste unten + Schublade (U2) ------------------------------- */ .tsba .tsba-mbar { display: none; } .tsba .tsba-drawer-close, .tsba .tsba-drawer-head { display: none; } @media (max-width: 879px) { body.tsba-has-mbar { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } .tsba .tsba-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9995; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--tsba-card-bg) 96%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--tsba-line); box-shadow: 0 -6px 20px rgba(15, 30, 60, .08); } .tsba .tsba-mbar-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 8px; border: 1px solid var(--tsba-line); border-radius: 12px; background: transparent; color: var(--tsba-heading, inherit); font: inherit; font-size: .9rem; font-weight: 700; text-decoration: none; cursor: pointer; } .tsba .tsba-mbar-btn .tsba-icon { width: 18px; height: 18px; } .tsba .tsba-mbar-btn.is-off { opacity: .4; } .tsba .tsba-mbar-next { background: var(--tsba-btn-bg); border-color: var(--tsba-btn-bg); color: var(--tsba-btn-fg); } .tsba .tsba-mbar-next.is-locked { background: var(--tsba-soft); border-color: var(--tsba-line); color: var(--tsba-muted); } .tsba .tsba-mbar-next small { display: block; font-size: .7rem; font-weight: 600; opacity: .85; } .tsba-lesson .tsba-lesson-side.is-drawer { position: fixed; inset: auto 0 0 0; z-index: 9998; max-height: 82vh; overflow: auto; overscroll-behavior: contain; padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--tsba-card-bg); border-radius: 18px 18px 0 0; box-shadow: 0 -20px 50px rgba(0, 0, 0, .3); transform: translateY(105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); visibility: hidden; } .tsba-lesson .tsba-lesson-side.is-drawer.is-open { transform: none; visibility: visible; } .tsba-lesson .tsba-lesson-side.is-drawer .tsba-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0; z-index: 1; padding: 10px 12px 8px 18px; background: var(--tsba-card-bg); border-bottom: 1px solid var(--tsba-line); } .tsba-lesson .tsba-lesson-side.is-drawer .tsba-drawer-head strong { font-size: .95rem; } .tsba-lesson .tsba-lesson-side.is-drawer .tsba-drawer-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tsba-soft); color: inherit; cursor: pointer; } .tsba-lesson .tsba-lesson-side.is-drawer .tsba-outline-box { box-shadow: none; border: 0; border-radius: 0; } .tsba-lesson .tsba-lesson-side.is-drawer .tsba-outline-box > summary { pointer-events: none; } .tsba-lesson .tsba-lesson-side.is-drawer .tsba-outline-box > summary > .tsba-icon { display: none; } .tsba-drawer-scrim { position: fixed; inset: 0; z-index: 9997; background: rgba(8, 15, 25, .45); opacity: 0; transition: opacity .25s; } .tsba-drawer-scrim.is-in { opacity: 1; } .tsba-toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } body.tsba-has-mbar .tsba-finish-pill { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; } } @media (prefers-reduced-motion: reduce) { .tsba-lesson .tsba-lesson-side.is-drawer { transition: none; } } /* 23. Lernpfad: Etappen, Filter, nächster Schritt (U4, A5) --------------- */ .tsba .tsba-outline-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 2.2em 0 1em; } .tsba .tsba-outline-bar .tsba-h.tsba-outline-title { margin: 0; flex: 1 1 200px; } .tsba .tsba-filter { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--tsba-soft); border: 1px solid var(--tsba-line); } .tsba .tsba-filter-btn { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--tsba-muted); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; } .tsba .tsba-filter-btn[aria-pressed="true"] { background: var(--tsba-card-bg); color: var(--tsba-heading, inherit); box-shadow: 0 1px 3px rgba(15, 30, 60, .14); } .tsba .tsba-filter-n { display: inline-block; min-width: 1.6em; margin-left: 2px; padding: 0 5px; border-radius: 99px; background: var(--tsba-soft); color: inherit; font-size: .75rem; font-variant-numeric: tabular-nums; } .tsba .tsba-filter-empty { margin: 0 0 1em; } .tsba .tsba-mtile.is-filtered, .tsba .tsba-stage.is-filtered { display: none; } .tsba .tsba-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tsba-gap); counter-reset: none; } .tsba .tsba-stage { margin: 0; position: relative; } .tsba .tsba-stage-box { border-radius: var(--tsba-radius); border: 1px solid var(--tsba-line); background: color-mix(in srgb, var(--tsba-soft) 60%, var(--tsba-card-bg)); } .tsba .tsba-stage.is-current .tsba-stage-box { border-color: color-mix(in srgb, var(--tsba-primary) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tsba-primary) 25%, transparent); } .tsba .tsba-stage-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; } .tsba .tsba-stage-head::-webkit-details-marker { display: none; } .tsba .tsba-stage-head > .tsba-icon { flex: none; margin-top: 8px; color: var(--tsba-muted); transition: transform .2s; } .tsba .tsba-stage-box[open] > .tsba-stage-head > .tsba-icon { transform: rotate(180deg); } .tsba .tsba-stage-mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tsba-primary); color: #fff; font-weight: 800; font-size: 1.05rem; } .tsba .tsba-stage-mark .tsba-icon { width: 20px; height: 20px; } .tsba .tsba-stage.is-done .tsba-stage-mark { background: var(--tsba-ok); } .tsba .tsba-stage.is-locked .tsba-stage-mark { background: var(--tsba-card-bg); color: var(--tsba-muted); box-shadow: inset 0 0 0 2px var(--tsba-line); } .tsba .tsba-stage-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .tsba .tsba-stage-no { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tsba-muted); } .tsba .tsba-stage-here { color: var(--tsba-primary); } .tsba .tsba-stage-title { font-size: 1.15rem; font-weight: 750; line-height: 1.3; color: var(--tsba-heading, inherit); } .tsba .tsba-stage-desc { font-size: .9rem; line-height: 1.45; color: var(--tsba-muted); max-width: 60em; } .tsba .tsba-stage-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; font-size: .82rem; color: var(--tsba-muted); } .tsba .tsba-stage-prog .tsba-mini-track { flex: 1 1 120px; max-width: 260px; } .tsba .tsba-stage-prog .tsba-mini-track > span { display: block; height: 100%; border-radius: inherit; background: var(--tsba-progress-fill); } .tsba .tsba-stage.is-done .tsba-stage-prog .tsba-mini-track > span { background: var(--tsba-ok); } .tsba .tsba-stage-prog strong { color: var(--tsba-heading, inherit); font-variant-numeric: tabular-nums; } .tsba .tsba-stage-prog .tsba-icon { width: 14px; height: 14px; } .tsba .tsba-stage .tsba-mtiles { padding: 0 18px 18px; margin: 0; } @media (max-width: 520px) { .tsba .tsba-stage-head { padding: 14px; gap: 12px; } .tsba .tsba-stage-mark { width: 34px; height: 34px; border-radius: 10px; } .tsba .tsba-stage .tsba-mtiles { padding: 0 12px 12px; } .tsba .tsba-filter { width: 100%; } .tsba .tsba-filter-btn { flex: 1; padding: 0 8px; } } .tsba .tsba-nextstep { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--tsba-radius-sm); background: color-mix(in srgb, var(--tsba-primary) 7%, var(--tsba-card-bg)); border-left: 4px solid var(--tsba-primary); } .tsba .tsba-nextstep-l { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tsba-primary); } .tsba .tsba-nextstep-t { font-size: 1.05rem; line-height: 1.3; color: var(--tsba-heading, inherit); } .tsba .tsba-nextstep-c { font-size: .82rem; color: var(--tsba-muted); } .tsba .tsba-nextstep.is-compact { margin-top: 10px; padding: 10px 12px; } .tsba .tsba-nextstep.is-compact .tsba-nextstep-t { font-size: .95rem; } /* 24. Startkarte Mein Bereich (A7) -------------------------------------- */ .tsba .tsba-intro { margin: 0 0 var(--tsba-gap); padding: 0; overflow: hidden; } .tsba .tsba-intro > summary { display: flex; align-items: center; gap: 14px; padding: 16px var(--tsba-pad); cursor: pointer; list-style: none; } .tsba .tsba-intro > summary::-webkit-details-marker { display: none; } .tsba .tsba-intro > summary > .tsba-icon { color: var(--tsba-muted); transition: transform .2s; } .tsba .tsba-intro[open] > summary > .tsba-icon { transform: rotate(180deg); } .tsba .tsba-intro-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--tsba-primary) 10%, transparent); color: var(--tsba-primary); } .tsba .tsba-intro-t { flex: 1; display: flex; flex-direction: column; } .tsba .tsba-intro-t strong { font-size: 1.05rem; color: var(--tsba-heading, inherit); } .tsba .tsba-intro-t small { font-size: .85rem; color: var(--tsba-muted); } .tsba .tsba-intro.is-seen > summary { padding-block: 12px; } .tsba .tsba-intro-steps { list-style: none; margin: 0; padding: 4px var(--tsba-pad) 8px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .tsba .tsba-intro-steps li { margin: 0; display: flex; gap: 12px; } .tsba .tsba-intro-no { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tsba-primary); color: #fff; font-size: .8rem; font-weight: 800; } .tsba .tsba-intro-steps strong { display: block; margin-bottom: 2px; color: var(--tsba-heading, inherit); } .tsba .tsba-intro-steps p { margin: 0; font-size: .9rem; line-height: 1.5; } .tsba .tsba-intro-contact { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 12px var(--tsba-pad); border-top: 1px solid var(--tsba-line); font-size: .9rem; background: var(--tsba-soft); } .tsba .tsba-intro-contact .tsba-icon { color: var(--tsba-primary); } /* 25. PDF-Betrachter (U5) ------------------------------------------------ */ .tsba .tsba-pdf-bar { flex-wrap: wrap; } .tsba .tsba-pdf-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .tsba .tsba-pdf-tools button, .tsba .tsba-pdf-tools a { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--tsba-soft); color: inherit; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; } .tsba .tsba-pdf-tools button:disabled { opacity: .4; cursor: default; } .tsba .tsba-pdf-tools .tsba-icon { width: 18px; height: 18px; } .tsba .tsba-pdf-page { min-width: 9em; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; } .tsba .tsba-pdf-stage { position: relative; max-height: 80vh; overflow: auto; background: #525659; padding: 12px; text-align: center; touch-action: pan-x pan-y pinch-zoom; } .tsba .tsba-pdf-stage canvas { display: inline-block; max-width: none; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); } .tsba .tsba-pdf-msg { margin: 0; padding: 24px; color: #fff; } .tsba .tsba-pdf-fallback { padding: 14px; } .tsba .tsba-pdf-fallback object { display: block; width: 100%; height: 70vh; border: 0; } .tsba .tsba-pdf-fallback p { margin: 0 0 10px; } @media (max-width: 520px) { .tsba .tsba-pdf-bar strong { flex: 1 1 100%; } .tsba .tsba-pdf-stage { padding: 6px; max-height: 70vh; } } /* 26. Dunkelmodus (U7) --------------------------------------------------- */ @media (prefers-color-scheme: dark) { .tsba, .tsba.tsba-design-tsb, .tsba.tsba-design-inherit { --tsba-primary: #8DBBFF; --tsba-accent: #FF7A88; --tsba-heading: #F1F5F9; --tsba-text: #D7DFE8; --tsba-muted: #A7B4C2; --tsba-line: rgba(255, 255, 255, .13); --tsba-soft: rgba(255, 255, 255, .055); --tsba-card-bg: #16202B; --tsba-card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -12px rgba(0, 0, 0, .7); --tsba-ok: #5BD49A; --tsba-ok-ink: #5BD49A; --tsba-ok-soft: rgba(91, 212, 154, .14); --tsba-warn: #F4A86E; --tsba-btn-bg: #2E6BC0; --tsba-btn-fg: #FFFFFF; --tsba-progress-track: rgba(255, 255, 255, .12); --tsba-progress-fill: #8DBBFF; color: var(--tsba-text); color-scheme: dark; } body.tsba-app { background: #0D141C !important; color: #D7DFE8; } body.tsba-app :is(.wp-block-post-title, .entry-title, h1.entry-title) { color: #F1F5F9; } body.tsba-app .wp-site-blocks a:not(.tsba-btn):not(.tsba-mbar-btn):not(.tsba-lang__opt) { color: #8DBBFF; } .tsba .tsba-btn--primary:hover { background: #2D62AE; color: #fff; } body.tsba-app .wp-site-blocks a.tsba-lang__opt.is-active, body.tsba-app a.tsba-lang__opt.is-active { color: #0B1A2B; } .tsba .tsba-card, .tsba .tsba-pager-link, .tsba .tsba-files .tsba-file-dl, .tsba .tsba-mtile-link, .tsba .tsba-stat { background: var(--tsba-card-bg); color: var(--tsba-text); } .tsba .tsba-content blockquote, .tsba .tsba-content .tsba-callout { color: var(--tsba-text); } .tsba .tsba-content .tsba-callout--scenario, .tsba .tsba-content .tsba-callout--question, .tsba .tsba-content .tsba-label--scenario, .tsba .tsba-content .tsba-label--question { --c: #C3A6FF; } .tsba .tsba-content .tsba-callout--task, .tsba .tsba-content .tsba-label--task { --c: #FF8E84; } .tsba .tsba-content .tsba-callout--example, .tsba .tsba-content .tsba-label--example { --c: #5ED6D2; } .tsba .tsba-content .tsba-upload-hint { color: #FF8E84; background: rgba(255, 142, 132, .12); } .tsba .tsba-reflect { border-left-color: #C3A6FF; background: rgba(195, 166, 255, .08); } .tsba .tsba-reflect-l { color: #C3A6FF; } .tsba .tsba-goals-h { color: var(--tsba-ok-ink, var(--tsba-ok)); } .tsba .tsba-content figure img { box-shadow: none; } .tsba .tsba-content img { filter: brightness(.92); } .tsba-toast { background: #253446; } .tsba .tsba-filter-btn[aria-pressed="true"] { box-shadow: 0 1px 3px rgba(0, 0, 0, .5); } .tsba .tsba-mbar { box-shadow: 0 -6px 20px rgba(0, 0, 0, .4); } .tsba .tsba-note-field { border-color: rgba(255, 255, 255, .22); } .tsba-focusbar .tsba-fb-mark, .tsba .tsba-stage-mark, .tsba .tsba-intro-no { background: #2E6BC0; } .tsba .tsba-stage.is-done .tsba-stage-mark { background: #2F8F5F; } .tsba .tsba-li.is-done .tsba-li-icon, .tsba .tsba-lesson-side .tsba-li.is-done .tsba-li-icon { background: #2F8F5F; border-color: #2F8F5F; } .tsba-readbar span { background: #8DBBFF; } /* 0.9 Kontrast: helle Flächen (Primär/Grün im Dunkelmodus) tragen dunkle Schrift. */ .tsba .tsba-module-no { color: #0D141C; } } /* ---------- 0.4.1 Lückentext: Antwortbausteine ---------- */ .tsba .tsba-dnd { display: flex; flex-direction: column; gap: 14px; } .tsba .tsba-dnd .tsba-check__cloze, .tsba .tsba-dnd .tsba-rv-cloze { line-height: 2.4; margin: 0; } .tsba input.tsba-slot { display: inline-block; vertical-align: baseline; min-width: 5ch; height: 2em; padding: 0 .6em; margin: 0 .15em; border: 2px dashed color-mix(in srgb, var(--tsba-primary) 45%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--tsba-primary) 6%, transparent); color: var(--tsba-heading, inherit); font: inherit; font-weight: 700; text-align: center; cursor: pointer; caret-color: transparent; transition: border-color .15s, background .15s, width .15s; } .tsba input.tsba-slot:focus-visible { outline: none; box-shadow: var(--tsba-focus); } .tsba input.tsba-slot.is-filled { border-style: solid; border-color: var(--tsba-primary); background: color-mix(in srgb, var(--tsba-primary) 12%, transparent); } .tsba input.tsba-slot.is-armed, .tsba input.tsba-slot.is-over { border-color: var(--tsba-primary); background: color-mix(in srgb, var(--tsba-primary) 20%, transparent); transform: scale(1.04); } .tsba input.tsba-slot.is-wrong { border-color: var(--tsba-bad, #c62828); background: color-mix(in srgb, var(--tsba-bad, #c62828) 10%, transparent); } .tsba input.tsba-slot.is-right { border-color: var(--tsba-ok, #2e7d32); background: color-mix(in srgb, var(--tsba-ok, #2e7d32) 10%, transparent); } .tsba input.tsba-slot:disabled { cursor: default; opacity: 1; } .tsba .tsba-bank { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-radius: var(--tsba-media-radius, 10px); background: var(--tsba-soft, rgba(0,0,0,.04)); border: 1px solid var(--tsba-line); min-height: 52px; align-items: center; } .tsba .tsba-bank::before { content: "Antworten"; flex: 0 0 100%; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tsba-muted); } .tsba-word { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tsba-primary, #0b3a75) 35%, transparent); background: var(--tsba-surface, var(--tsba-card-bg, #fff)); color: var(--tsba-heading, inherit); font: inherit; font-weight: 700; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: transform .15s, opacity .2s, box-shadow .15s; } .tsba-word:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.12); } .tsba-word:focus-visible { outline: none; box-shadow: var(--tsba-focus); } .tsba-word.is-used { opacity: .25; transform: scale(.94); cursor: default; box-shadow: none; } .tsba-word.is-dragging { opacity: .35; } .tsba .tsba-dnd.is-locked .tsba-bank { display: none; } .tsba-word-ghost { position: fixed; left: 0; top: 0; z-index: 99999; pointer-events: none; cursor: grabbing; box-shadow: 0 8px 24px rgba(0,0,0,.25); background: var(--tsba-primary, #0b3a75) !important; color: #fff !important; border-color: transparent !important; } .tsba .tsba-dnd.is-full .tsba-bank { animation: tsba-shake .35s; } @keyframes tsba-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .tsba .tsba-cloze-sentence { font-style: italic; padding: 14px 16px; border-left: 4px solid var(--tsba-tone-quote-line, var(--tsba-line)); background: var(--tsba-tone-quote, var(--tsba-soft)); border-radius: var(--tsba-media-radius, 10px); } .tsba .tsba-upload-note { display: block; margin-top: 6px; font-size: .9em; font-weight: 400; color: var(--tsba-muted); } @media (prefers-reduced-motion: reduce) { .tsba-word, .tsba input.tsba-slot { transition: none; } .tsba .tsba-dnd.is-full .tsba-bank { animation: none; } } /* ---------- 0.5 Kernfassung + ausführliche Fassung ---------- */ /* 0.8: aufklappbare Karte (.tsba-box--card.tsba-box--fold, Grundstil in Abschnitt 13). */ .tsba .tsba-content details.tsba-deep { margin-top: calc(var(--tsba-gap-block, 32px) + 8px); } .tsba .tsba-deep__t { font-weight: 700; } .tsba .tsba-deep__m { font-size: .875rem; line-height: 1.45; color: var(--tsba-muted); letter-spacing: 0; text-transform: none; } .tsba .tsba-check--optional .tsba-check__label { color: var(--tsba-muted); } /* ---------- 0.6 Sprachschalter ---------- */ .tsba-lang { display: inline-flex; border: 1px solid var(--tsba-line); border-radius: 10px; overflow: hidden; } .tsba-lang__opt { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 8px; color: inherit; font-weight: 700; font-size: .875em; letter-spacing: .04em; text-decoration: none; } .tsba-lang__opt + .tsba-lang__opt { border-left: 1px solid var(--tsba-line); } .tsba-lang__opt:hover { background: var(--tsba-soft); } .tsba-lang__opt.is-active { background: var(--tsba-primary); color: #fff; } .tsba-lang__opt { gap: 6px; } .tsba-flag { display: block; width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); flex: none; } .tsba-lang__opt.is-active .tsba-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.7); } .tsba-lang__opt:focus-visible { outline: 2px solid var(--tsba-primary); outline-offset: -2px; } .tsba[lang="da"] .tsba-bank::before { content: "Svar"; } @media (max-width: 480px) { .tsba-focusbar .tsba-fs { display: none; } .tsba-focusbar .tsba-lang__opt { min-width: 36px; padding: 0 6px; } } /* 0.7 Kursübersicht ---------------------------------------------------- */ /* Modulkacheln mit Vorschaubild (Desktop: Bild oben, Mobil: Bild links). */ .tsba .tsba-mtile-link.has-media { padding: 0; gap: 0; overflow: hidden; } .tsba .tsba-mtile-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #003C73, #2B6CB0); } .tsba .tsba-mtile-media img, .tsba .tsba-soon-media img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; transition: transform .4s cubic-bezier(.2, .8, .2, 1), filter .3s; } .tsba a.tsba-mtile-link:hover .tsba-mtile-media img { transform: scale(1.04); } .tsba .tsba-mtile-body { flex: 1; display: flex; flex-direction: column; gap: .55em; padding: 14px var(--tsba-pad) 16px; min-width: 0; } .tsba .tsba-mtile.is-compact .tsba-mtile-body { gap: .3em; padding-block: 10px 12px; } .tsba .tsba-mtile.is-locked .tsba-mtile-media img { filter: saturate(.55); opacity: .75; } .tsba .tsba-mtile.is-done .tsba-mtile-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(31, 157, 87, .28), transparent 60%); } /* „Inhalte folgen“: ausgegraut, nicht klickbar. */ .tsba .tsba-mtile.is-soon .tsba-mtile-link { background: var(--tsba-soft); box-shadow: none; cursor: default; border-style: dashed; } .tsba .tsba-mtile.is-soon .tsba-mtile-media img, .tsba .tsba-soon-media img { filter: grayscale(1) contrast(.85); opacity: .45; } .tsba .tsba-mtile.is-soon .tsba-mtile-title { color: var(--tsba-muted); } .tsba .tsba-mtile.is-soon .tsba-mtile-media { background: #D9DEE4; } .tsba .tsba-mtile.is-soon .tsba-module-no { background: var(--tsba-card-bg); color: var(--tsba-muted); box-shadow: inset 0 0 0 2px var(--tsba-line); } .tsba .tsba-mtile.is-soon .tsba-mtile-meta { font-style: italic; } .tsba .tsba-mtile-soon { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #5A6878; box-shadow: 0 4px 14px rgba(16, 32, 56, .18); } .tsba .tsba-mtile-soon .tsba-icon { width: 20px; height: 20px; } .tsba .tsba-mbadge.is-soon { color: var(--tsba-muted); background: var(--tsba-card-bg); border-color: var(--tsba-line); } @media (max-width: 639px) { .tsba .tsba-mtile-link.has-media { flex-direction: row; align-items: stretch; } .tsba .tsba-mtile-media { flex: 0 0 92px; aspect-ratio: auto; min-height: 92px; } .tsba .tsba-mtile-media img { position: absolute; inset: 0; } .tsba .tsba-mtile-body { padding: 12px 14px; } .tsba .tsba-mtile-soon { width: 34px; height: 34px; } .tsba .tsba-mtile-soon .tsba-icon { width: 16px; height: 16px; } .tsba .tsba-mtile.is-compact .tsba-mtile-media { min-height: 64px; flex-basis: 72px; } } /* Kategorien (Gruppen) – Symbolbild als Marke. */ .tsba .tsba-stage-mark { overflow: hidden; } .tsba .tsba-stage-mark .tsba-stage-img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; } .tsba .tsba-stage.is-soon .tsba-stage-mark { background: var(--tsba-card-bg); color: var(--tsba-muted); box-shadow: inset 0 0 0 2px var(--tsba-line); } .tsba .tsba-stage.is-soon .tsba-stage-box { background: transparent; border-style: dashed; } .tsba .tsba-stage.is-soon .tsba-stage-title { color: var(--tsba-muted); } @media (min-width: 640px) { .tsba .tsba-path.has-groups .tsba-stage-mark { width: 56px; height: 40px; border-radius: 10px; } } /* Kursbild-Fallback (Symbolbild). */ .tsba .tsba-card-media .tsba-thumb, .tsba .tsba-hero-media .tsba-thumb { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; } /* Prüfungsversuche „beliebig oft wiederholbar“. */ .tsba .tsba-exam-tries { margin: .4em 0 0; text-align: center; } /* Direktaufruf eines Moduls ohne Inhalte. */ .tsba .tsba-soon-card { padding: 0; overflow: hidden; display: grid; } .tsba .tsba-soon-media { position: relative; aspect-ratio: 16 / 9; max-height: 260px; width: 100%; overflow: hidden; background: var(--tsba-soft); } .tsba .tsba-soon-body { padding: var(--tsba-pad); display: flex; flex-direction: column; align-items: flex-start; gap: .6em; } .tsba .tsba-soon-body .tsba-meta, .tsba .tsba-soon-body p { margin: 0; } .tsba .tsba-soon-title { margin: .1em 0 0; font-size: 1.35rem; } .tsba .tsba-soon-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: .4em; } @media (min-width: 760px) { .tsba .tsba-soon-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; } .tsba .tsba-soon-media { height: 100%; max-height: none; } } /* 0.9 Modulbilder ------------------------------------------------------ */ /* Titelbild im Stil des Kursbilds: Grundbild (ohne Text) + Pille, Titel, Kategorie (rot), Goldlinie. */ .tsba .tsba-mcover { position: absolute; inset: 0; display: block; overflow: hidden; container-type: inline-size; background: #C9D1DB; } .tsba .tsba-card-media > .tsba-mcover, .tsba .tsba-hero-media > .tsba-mcover { position: relative; width: 100%; height: 100%; min-height: 100%; aspect-ratio: 16 / 9; } .tsba .tsba-mcover__bg { display: block; position: absolute; inset: 0; margin: 0; } .tsba .tsba-mcover__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; margin: 0; } .tsba .tsba-mcover__txt { position: absolute; left: 4cqw; top: 5cqw; bottom: 5cqw; width: 60cqw; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2.4cqw; text-align: left; line-height: 1.05; letter-spacing: 0; text-transform: none; } .tsba .tsba-mcover__pill { display: inline-flex; align-items: center; gap: 1.6cqw; margin-left: -4cqw; padding: 1.1cqw 3.6cqw 1.1cqw 4cqw; border-radius: 0 999px 999px 0; background: #0B2A55; color: #fff; font-size: max(10px, 3.5cqw); font-weight: 700; line-height: 1.15; white-space: nowrap; } .tsba .tsba-mcover__cap { width: 1.25em; height: 1.25em; flex: none; display: block; } .tsba .tsba-mcover__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-top: 1.2cqw; color: #0B2A55; font-weight: 800; font-size: 7.4cqw; line-height: 1.08; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; text-wrap: balance; } .tsba .tsba-mcover--long .tsba-mcover__title { font-size: 6.2cqw; } .tsba .tsba-mcover--xlong .tsba-mcover__title { font-size: 5.2cqw; } .tsba .tsba-mcover__sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: #C8102E; font-weight: 800; font-size: max(10px, 3.9cqw); line-height: 1.12; } .tsba .tsba-mcover__line { display: block; flex: none; width: 8cqw; height: max(2px, .55cqw); border-radius: 2px; background: #E1B32B; } /* Hover: nur das Grundbild zoomt, Text bleibt ruhig. */ .tsba a.tsba-mtile-link:hover .tsba-mcover__bg img { transform: scale(1.03); transform-origin: right center; } /* „Inhalte folgen“: blass + Schloss (Schloss-Overlay wie bisher). */ .tsba .tsba-mtile.is-soon .tsba-mcover__txt, .tsba .tsba-soon-media .tsba-mcover__txt { filter: grayscale(1); opacity: .5; } .tsba .tsba-mtile.is-soon .tsba-mtile-soon, .tsba .tsba-soon-media .tsba-mtile-soon { z-index: 2; } .tsba .tsba-mtile.is-locked .tsba-mcover__txt { opacity: .8; } .tsba .tsba-mtile.is-done .tsba-mtile-media::after { display: none; } /* Sehr schmal (Handy-Kachel links): nur Grundbild mit DTU-Logo, Titel steht direkt daneben. */ @container (max-width: 220px) { .tsba .tsba-mcover__txt { display: none; } .tsba .tsba-mcover__bg img { inset: 0 -4% 0 auto; width: auto; height: 100%; max-width: none; aspect-ratio: 16 / 9; object-fit: fill; } } @media (max-width: 639px) { .tsba .tsba-mtile-media { flex-basis: 104px; } } /* 0.11.1: Antwort-Chips gegen Theme-/Elementor-Buttonstile absichern (Text war im Live-Theme unsichtbar). */ .tsba .tsba-bank button.tsba-word, .tsba-dnd .tsba-bank button.tsba-word { display: inline-flex !important; visibility: visible !important; opacity: 1; width: auto !important; height: auto !important; min-height: 40px; margin: 0 !important; padding: 6px 14px !important; border: 1px solid #8FA6C2 !important; border-radius: 999px !important; background: #FFFFFF !important; background-image: none !important; color: #003C73 !important; -webkit-text-fill-color: #003C73 !important; font-family: inherit !important; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: normal !important; text-transform: none !important; text-indent: 0 !important; text-shadow: none !important; white-space: normal; } .tsba .tsba-bank button.tsba-word:hover:not(:disabled), .tsba .tsba-bank button.tsba-word:focus { background: #EAF1F9 !important; color: #003C73 !important; } .tsba .tsba-bank button.tsba-word.is-used { opacity: .25; } /* 0.11.3: Kursbeschreibung bündig unter dem Kursbild (volle Breite, Blocksatz). */ .tsba-course > .tsba-desc, .tsba.alignwide.tsba-course > .tsba-desc, .tsba.alignwide .tsba-course > .tsba-desc { max-width: none !important; width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; box-sizing: border-box; } .tsba-course > .tsba-desc p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } .tsba-course > .tsba-desc h2, .tsba-course > .tsba-desc h3 { text-align: left; }