@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300..700&display=swap'); /* Sam Suite Marken-Schicht – Kern. Verbindlich laut BRAND.md. Hell ist die Grundlage; sam-brand.js setzt data-sam-theme="light|dark" am . */ :root { --sam-font: Manrope, 'Segoe UI', Arial, sans-serif; --sam-bg: #F6F3EE; --sam-surface: #FFFFFF; --sam-surface-2: #FAF8F4; --sam-hover: #F0EBE2; --sam-line: #E4DDD0; --sam-line-strong: #CFC5B3; --sam-text: #141210; --sam-text-dim: #5E574C; --sam-text-faint: #8A8174; --sam-accent: #A9771F; --sam-gold: #D9A941; --sam-gold-strong: #C4922C; --sam-gold-text: #8A5F14; --sam-gold-soft: #F6EDDA; --sam-gold-line: #E6CF9C; --sam-gold-light: #F7DC8F; --sam-on-gold: #1A1300; --sam-ink-panel: #141210; --sam-ink-panel-2: #24211C; --sam-on-dark: #F3EEE4; --sam-danger: #B23A2C; --sam-danger-soft: #F8E6E2; --sam-success: #2F7A55; --sam-success-soft: #E4F1E9; --sam-warning: #A86412; --sam-warning-soft: #F8ECDA; --sam-shadow: 0 1px 2px rgba(20, 18, 16, .05), 0 10px 28px rgba(20, 18, 16, .07); } :root[data-sam-theme="dark"] { color-scheme: dark; --sam-bg: #0B0B0A; --sam-surface: #141311; --sam-surface-2: #181714; --sam-hover: #1F1D19; --sam-line: #2A2620; --sam-line-strong: #3A342B; --sam-text: #F3EEE4; --sam-text-dim: #BDB4A4; --sam-text-faint: #8F8676; --sam-accent: #D9A941; --sam-gold: #D9A941; --sam-gold-strong: #E5B955; --sam-gold-text: #E2B85A; --sam-gold-soft: #2A2316; --sam-gold-line: #5C4A24; --sam-gold-light: #F7DC8F; --sam-on-gold: #1A1300; --sam-ink-panel: #1C1A16; --sam-ink-panel-2: #26231E; --sam-on-dark: #F3EEE4; --sam-danger: #E08A7E; --sam-danger-soft: #3A1E1A; --sam-success: #7CC39B; --sam-success-soft: #17291F; --sam-warning: #E0A95E; --sam-warning-soft: #33250F; --sam-shadow: none; } :root[data-sam-theme="light"] { color-scheme: light; } :root[data-sam-theme] body { font-family: var(--sam-font); background-color: var(--sam-bg); color: var(--sam-text); } :root[data-sam-theme] :is(button, input, select, textarea) { font-family: inherit; } :root[data-sam-theme] ::selection { background: color-mix(in srgb, var(--sam-gold) 35%, transparent); } /* Umschalter Hell/Dunkel – schwebend unten rechts, falls das Produkt keinen eigenen Platz vorgibt */ .sam-theme-toggle { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 2147483000; width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--sam-surface); color: var(--sam-gold-text); border: 1px solid var(--sam-line); box-shadow: var(--sam-shadow); cursor: pointer; padding: 0; transition: border-color .15s, transform .15s; } .sam-theme-toggle:hover { border-color: var(--sam-gold); transform: translateY(-1px); } .sam-theme-toggle:focus-visible { outline: 2px solid var(--sam-gold); outline-offset: 3px; } .sam-theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } [data-sam-theme-toggle].sam-theme-toggle { position: static; box-shadow: none; } @media print { .sam-theme-toggle { display: none; } } @media (prefers-reduced-motion: reduce) { .sam-theme-toggle { transition: none; } } /* SamAcademy: automatisch umgefärbt aus academy\assets\index-C6Y1fJ9M.css (sam-recolor.js) */ :root[data-sam-theme]{color:var(--sam-text);--green:var(--sam-text);--lime:var(--sam-accent);--muted:var(--sam-text-dim);--line:var(--sam-line);background:var(--sam-bg);font-family:var(--sam-font)} :root[data-sam-theme] .sidebar{background:var(--sam-surface)} :root[data-sam-theme] .logo{color:var(--sam-text)} :root[data-sam-theme] .logo>span:last-child>span{color:var(--sam-success)} :root[data-sam-theme] .nav-label{color:var(--sam-text-faint)} :root[data-sam-theme] .nav-item{color:var(--sam-text-dim)} :root[data-sam-theme] .nav-item.active{color:var(--sam-text);background:var(--sam-hover)} :root[data-sam-theme] .nav-item.active svg{color:var(--sam-gold-text)} :root[data-sam-theme] .nav-count{background:var(--sam-hover)} :root[data-sam-theme] .side-card{color:var(--sam-on-dark);background:var(--sam-ink-panel)} :root[data-sam-theme] .side-card>span{color:var(--sam-on-gold);background:var(--sam-gold)} :root[data-sam-theme] .side-card p{color:var(--sam-text-faint)} :root[data-sam-theme] .side-card button{color:var(--sam-gold-text)} :root[data-sam-theme] .avatar,:root[data-sam-theme] .top-avatar{color:var(--sam-text);background:var(--sam-line)} :root[data-sam-theme] .side-user span{color:var(--sam-text-faint)} :root[data-sam-theme] .icon-btn{color:var(--sam-text-dim)} :root[data-sam-theme] .topbar{background:color-mix(in srgb, var(--sam-surface) 82%, transparent)} :root[data-sam-theme] .search{background:var(--sam-bg);border:1px solid var(--sam-line)} :root[data-sam-theme] .search svg{color:var(--sam-text-faint)} :root[data-sam-theme] .search kbd{color:var(--sam-text-faint);border:1px solid var(--sam-line)} :root[data-sam-theme] .notification span{background:var(--sam-danger);border:1px solid var(--sam-line)} :root[data-sam-theme] .eyebrow{color:var(--sam-text-faint)} :root[data-sam-theme] .eyebrow.green{color:var(--sam-success)} :root[data-sam-theme] .welcome h1 span{color:var(--sam-success)} :root[data-sam-theme] .welcome p{color:var(--sam-text-dim)} :root[data-sam-theme] .streak{background:var(--sam-surface)} :root[data-sam-theme] .streak>span{color:var(--sam-warning);background:var(--sam-warning-soft)} :root[data-sam-theme] .streak small{color:var(--sam-text-faint)} :root[data-sam-theme] .week i{color:var(--sam-text-faint);background:var(--sam-bg)} :root[data-sam-theme] .week i.checked{color:var(--sam-success);background:var(--sam-gold)} :root[data-sam-theme] .continue-card{background:var(--sam-surface)} :root[data-sam-theme] .art-grid{background-image:linear-gradient(color-mix(in srgb, var(--sam-surface) 21%, transparent) 1px,#0000 1px),linear-gradient(90deg,color-mix(in srgb, var(--sam-surface) 21%, transparent) 1px,#0000 1px)} :root[data-sam-theme] .mint{color:var(--sam-text);background:var(--sam-success-soft)} :root[data-sam-theme] .gold{color:var(--sam-gold-text);background:var(--sam-gold)} :root[data-sam-theme] .blue{color:var(--sam-gold-text);background:var(--sam-line)} :root[data-sam-theme] .coral{color:var(--sam-warning);background:var(--sam-warning)} :root[data-sam-theme] .continue-copy p{color:var(--sam-text-dim)} :root[data-sam-theme] .continue-copy p strong{color:var(--sam-text-dim)} :root[data-sam-theme] .progress-line{background:var(--sam-hover)} :root[data-sam-theme] .progress-line span{background:var(--sam-success)} :root[data-sam-theme] .progress-meta{color:var(--sam-text-faint)} :root[data-sam-theme] .progress-meta strong{color:var(--sam-text-dim)} :root[data-sam-theme] .primary-btn{color:var(--sam-on-dark);background:var(--sam-ink-panel)} :root[data-sam-theme] .primary-btn:hover{background:var(--sam-ink-panel)} :root[data-sam-theme] .stats>div{background:var(--sam-surface)} :root[data-sam-theme] .stat-icon.green{color:var(--sam-success);background:var(--sam-hover)} :root[data-sam-theme] .stat-icon.gold{color:var(--sam-warning);background:var(--sam-gold-soft)} :root[data-sam-theme] .stat-icon.blue{color:var(--sam-gold-text);background:var(--sam-hover)} :root[data-sam-theme] .stats p small{color:var(--sam-text-faint)} :root[data-sam-theme] .stats b{color:var(--sam-text-dim)} :root[data-sam-theme] .text-btn{color:var(--sam-text)} :root[data-sam-theme] .filters button{color:var(--sam-text-dim);background:var(--sam-surface)} :root[data-sam-theme] .filters button.active{color:var(--sam-on-dark);background:var(--sam-ink-panel);border-color:var(--sam-accent)} :root[data-sam-theme] .course-card{background:var(--sam-surface)} :root[data-sam-theme] .lock{background:color-mix(in srgb, var(--sam-surface) 67%, transparent)} :root[data-sam-theme] .category{color:var(--sam-text-dim)} :root[data-sam-theme] .course-data{color:var(--sam-text-faint)} :root[data-sam-theme] .course-card>button{color:var(--sam-text-dim);background:var(--sam-surface)} :root[data-sam-theme] .empty{color:var(--sam-text-faint)} :root[data-sam-theme] .empty h3{color:var(--sam-text);font-family:var(--sam-font)} :root[data-sam-theme] .toast{color:var(--sam-on-dark);background:var(--sam-ink-panel)} :root[data-sam-theme] .toast svg{color:var(--sam-gold-text)} :root[data-sam-theme] .studio-trigger{color:var(--sam-text);background:var(--sam-bg);border:1px solid var(--sam-line)} :root[data-sam-theme] .modal-backdrop{background:color-mix(in srgb, var(--sam-ink-panel) 79%, transparent)} :root[data-sam-theme] .studio-modal{background:var(--sam-bg)} :root[data-sam-theme] .studio-intro>span{color:var(--sam-on-gold);background:var(--sam-gold)} :root[data-sam-theme] .studio-intro p{color:var(--sam-text-dim)} :root[data-sam-theme] .studio-options button,:root[data-sam-theme] .studio-options label{background:var(--sam-surface)} :root[data-sam-theme] .studio-options button:hover,:root[data-sam-theme] .studio-options label:hover{border-color:var(--sam-success)} :root[data-sam-theme] .studio-options>*>span{color:var(--sam-success);background:var(--sam-hover)} :root[data-sam-theme] .studio-options small{color:var(--sam-text-faint)} :root[data-sam-theme] .camera-stage{background:var(--sam-ink-panel)} :root[data-sam-theme] .record-btn{color:var(--sam-text);background:var(--sam-surface)} :root[data-sam-theme] .record-btn>span{background:var(--sam-danger)} :root[data-sam-theme] .record-btn svg{fill:var(--sam-danger);color:var(--sam-danger)} :root[data-sam-theme] .record-btn.recording{color:var(--sam-on-dark);background:var(--sam-ink-panel)} :root[data-sam-theme] .recording-state span{color:var(--sam-on-dark);background:color-mix(in srgb, var(--sam-ink-panel) 73%, transparent)} :root[data-sam-theme] .recording-state i{background:var(--sam-danger)} :root[data-sam-theme] .studio-preview>video{background:var(--sam-ink-panel)} :root[data-sam-theme] .studio-form label{color:var(--sam-text-dim)} :root[data-sam-theme] .studio-form input,:root[data-sam-theme] .studio-form select{color:var(--sam-text);background:var(--sam-surface)} :root[data-sam-theme] .studio-error{color:var(--sam-danger);background:var(--sam-bg)} :root[data-sam-theme] .lesson-page{background:var(--sam-bg)} :root[data-sam-theme] .lesson-sidebar{background:var(--sam-surface)} :root[data-sam-theme] .back-btn{color:var(--sam-text-dim)} :root[data-sam-theme] .lesson-course small{color:var(--sam-text-faint)} :root[data-sam-theme] .lesson-progress small{color:var(--sam-text-faint)} :root[data-sam-theme] .lesson-progress>div{background:var(--sam-hover)} :root[data-sam-theme] .lesson-progress i{background:var(--sam-success)} :root[data-sam-theme] .lesson-list button{color:var(--sam-text-dim)} :root[data-sam-theme] .lesson-list button.active{color:var(--sam-text);background:var(--sam-hover)} :root[data-sam-theme] .lesson-list button>i{border:1px solid var(--sam-line)} :root[data-sam-theme] .lesson-list button>i.done{background:var(--sam-gold);border-color:var(--sam-accent)} :root[data-sam-theme] .lesson-list small{color:var(--sam-text-faint)} :root[data-sam-theme] .lesson-main header{color:var(--sam-text-faint);background:var(--sam-surface)} :root[data-sam-theme] .lesson-content .lead{color:var(--sam-text-dim)} :root[data-sam-theme] .video{background:var(--sam-ink-panel)} :root[data-sam-theme] .video-shape{background:var(--sam-gold)} :root[data-sam-theme] .video-shape.two{background:var(--sam-success)} :root[data-sam-theme] .video button{color:var(--sam-text);background:var(--sam-surface);border:7px solid color-mix(in srgb, var(--sam-line) 27%, transparent)} :root[data-sam-theme] .video>span{color:var(--sam-on-dark);background:color-mix(in srgb, var(--sam-ink-panel) 60%, transparent)} :root[data-sam-theme] .lesson-content>p{color:var(--sam-text-dim)} :root[data-sam-theme] .value-grid>div{background:var(--sam-surface)} :root[data-sam-theme] .value-grid span{color:var(--sam-success)} :root[data-sam-theme] .value-grid p{color:var(--sam-text-dim)} :root[data-sam-theme] .tip{background:var(--sam-hover)} :root[data-sam-theme] .tip>svg{color:var(--sam-success)} :root[data-sam-theme] .tip p{color:var(--sam-text-dim)} :root[data-sam-theme] .secondary-btn{color:var(--sam-text-dim);background:var(--sam-surface)} :root[data-sam-theme] .uploaded-video video{background:var(--sam-ink-panel)} :root[data-sam-theme] .auth-loading{background:var(--sam-bg)} :root[data-sam-theme] .auth-loading>span{border:3px solid var(--sam-line);border-top-color:var(--sam-accent)} :root[data-sam-theme] .login-page{background:var(--sam-surface)} :root[data-sam-theme] .login-brand{color:var(--sam-on-dark);background:var(--sam-ink-panel)} :root[data-sam-theme] .login-brand:after{border:1px solid color-mix(in srgb, var(--sam-accent) 19%, transparent);box-shadow:0 0 0 90px color-mix(in srgb, var(--sam-gold) 3%, transparent),0 0 0 180px color-mix(in srgb, var(--sam-gold) 2%, transparent)} :root[data-sam-theme] .login-brand .logo{color:var(--sam-on-dark)} :root[data-sam-theme] .login-brand .logo-mark{background:var(--sam-gold)} :root[data-sam-theme] .login-brand .logo-mark span{color:var(--sam-text)} :root[data-sam-theme] .login-brand .eyebrow{color:var(--sam-text-faint)} :root[data-sam-theme] .login-brand h1 em{color:var(--sam-gold-text)} :root[data-sam-theme] .login-brand p{color:var(--sam-text-faint)} :root[data-sam-theme] .login-brand>small{color:var(--sam-text-dim)} :root[data-sam-theme] .login-icon{color:var(--sam-success);background:var(--sam-hover)} :root[data-sam-theme] .login-panel form>p{color:var(--sam-text-dim)} :root[data-sam-theme] .login-panel label{color:var(--sam-text-dim)} :root[data-sam-theme] .login-panel input{background:var(--sam-bg);border:1px solid var(--sam-line)} :root[data-sam-theme] .login-panel input:focus{border-color:var(--sam-success);box-shadow:0 0 0 3px color-mix(in srgb, var(--sam-gold) 22%, transparent)} :root[data-sam-theme] .login-error{color:var(--sam-danger);background:var(--sam-bg)} :root[data-sam-theme] .forgot{color:var(--sam-success)} :root[data-sam-theme] .course-trigger{background:var(--sam-surface)} :root[data-sam-theme] .course-form label{color:var(--sam-text-dim)} :root[data-sam-theme] .course-form input:not([type=checkbox]),:root[data-sam-theme] .course-form select,:root[data-sam-theme] .course-form textarea{background:var(--sam-surface)} :root[data-sam-theme] .publish-check small{color:var(--sam-text-faint)} :root[data-sam-theme] .admin-modal{background:var(--sam-bg)} :root[data-sam-theme] .admin-users,:root[data-sam-theme] .create-user{background:var(--sam-surface)} :root[data-sam-theme] .admin-section-head p,:root[data-sam-theme] .create-user>p{color:var(--sam-text-faint)} :root[data-sam-theme] .admin-section-head>span,:root[data-sam-theme] .admin-form-icon{color:var(--sam-success);background:var(--sam-hover)} :root[data-sam-theme] .user-row{border-top:1px solid var(--sam-line)} :root[data-sam-theme] .user-info em{color:var(--sam-success);background:var(--sam-hover)} :root[data-sam-theme] .user-info span{color:var(--sam-text-faint)} :root[data-sam-theme] .user-row select{background:var(--sam-surface)} :root[data-sam-theme] .status-toggle{color:var(--sam-text-faint);background:var(--sam-bg)} :root[data-sam-theme] .status-toggle.active{color:var(--sam-success);background:var(--sam-success-soft)} :root[data-sam-theme] .create-user label{color:var(--sam-text-dim)} :root[data-sam-theme] .create-user input,:root[data-sam-theme] .create-user select{background:var(--sam-surface)} :root[data-sam-theme] .password-card{background:var(--sam-surface)} :root[data-sam-theme] .password-card label{color:var(--sam-text-dim)} :root[data-sam-theme] .cert-modal{background:var(--sam-bg)} :root[data-sam-theme] .cert-list>p{color:var(--sam-text-faint)} :root[data-sam-theme] .cert-empty{color:var(--sam-text-dim)} :root[data-sam-theme] .cert-empty>svg{color:var(--sam-success)} :root[data-sam-theme] .cert-empty h3{color:var(--sam-text)} :root[data-sam-theme] .certificate-card{background:var(--sam-surface)} :root[data-sam-theme] .certificate-card:after{border:20px solid color-mix(in srgb, var(--sam-accent) 9%, transparent)} :root[data-sam-theme] .cert-seal{color:var(--sam-gold-text);background:var(--sam-ink-panel)} :root[data-sam-theme] .certificate-card span{color:var(--sam-success)} :root[data-sam-theme] .certificate-card p{color:var(--sam-text-faint)} :root[data-sam-theme] .certificate-card code{color:var(--sam-text-dim)} :root[data-sam-theme] .certificate-card>small{color:var(--sam-text-faint)} :root[data-sam-theme] .content-modal{background:var(--sam-bg)} :root[data-sam-theme] .content-course-select{background:var(--sam-surface)} :root[data-sam-theme] .content-course-select select{background:var(--sam-surface)} :root[data-sam-theme] .content-course-select span{color:var(--sam-text-faint)} :root[data-sam-theme] .content-manager-grid>section,:root[data-sam-theme] .exam-editor{background:var(--sam-surface)} :root[data-sam-theme] .lesson-editor{border-top:1px solid var(--sam-line)} :root[data-sam-theme] .lesson-editor>b{color:var(--sam-success);background:var(--sam-hover)} :root[data-sam-theme] .add-lesson{background:var(--sam-bg)} :root[data-sam-theme] .exam-loading,:root[data-sam-theme] .exam-missing{color:var(--sam-text-dim);border:1px dashed var(--sam-line)} :root[data-sam-theme] .exam-missing>svg{color:var(--sam-success)} :root[data-sam-theme] .exam-missing h3{color:var(--sam-text)} :root[data-sam-theme] .exam-runner{background:var(--sam-surface)} :root[data-sam-theme] .exam-runner>p{color:var(--sam-text-dim)} :root[data-sam-theme] .exam-runner legend b{background:var(--sam-hover)} :root[data-sam-theme] .exam-runner fieldset label.selected{background:var(--sam-bg);border-color:var(--sam-success)} :root[data-sam-theme] .exam-result{background:var(--sam-bg)} :root[data-sam-theme] .exam-result.passed{background:var(--sam-hover)} :root[data-sam-theme] .exam-result>span{color:var(--sam-success);background:var(--sam-surface)} :root[data-sam-theme] .exam-result>strong{color:var(--sam-text)} @media (width<=760px){:root[data-sam-theme] .scrim{background:color-mix(in srgb, var(--sam-ink-panel) 50%, transparent)}} /* SamAcademy: Produkt-Anpassungen */ :root[data-sam-theme] .logo-mark{background:url(icon.svg) center/cover no-repeat!important;border:0!important;box-shadow:none!important} :root[data-sam-theme] .logo-mark>span{visibility:hidden} :root[data-sam-theme] .logo>span:last-child{font-weight:300!important;letter-spacing:-.01em;color:var(--sam-text)!important} :root[data-sam-theme] .logo>span:last-child>span{font-weight:600!important;color:inherit!important}