/* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD } /* latin */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD } /* latin */ @font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7MOzlojwUKQ.woff) format('woff'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD } a, a:link, a:visited, a:hover { color:#9E99FF; text-decoration: none; } @media (min-width: 992px) { .custom-vh-100 { height:calc(100vh - 76px); height:calc(100dvh - 76px); } } #section4.custom-vh-100 { height: auto; } #stickyTop { /*height: 76px;*/ padding-top: 0; padding-bottom: 0; } @media (min-width: 992px) { #section1 { height: calc(100vh); /*height: calc(100dvh);*/ } } @media(min-width:1200px) { .custom-vh-100 { height:calc(100vh - 112px); height::calc(100dvh - 112px); } #stickyTop { /*height:112px;*/ } #section1 { height: calc(100vh); height: calc(100dvh); } } #section1:focus, #section2:focus, #section3:focus, #section4:focus, #section5:focus, #section6:focus { outline:none!important; } .loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999; background-color: rgba(0, 0, 0, 1) } @keyframes fade { 0% { background-color: rgba(0, 0, 0, 1) } 50% { background-color: rgba(0, 0, 0, 1) } 100% { background-color: rgba(0, 0, 0, 0) } } .design-element { width: .7917em; height: .7917em; background-image: url('media.php?file=media/images/avatar-mini.webp'); background-size: cover; background-position: bottom left; margin-right: 0.2855em; position: relative; top: 1px; } .custom-body { color: #fff; font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 1.6 } .light.custom-body { color: #141414 } .toast { z-index: 2040; border-radius: 0; background-color: #9E99FF; color: #000; width: auto; margin-top: 2em; letter-spacing: 1px } h1 { font-size: 1em; text-transform: uppercase; width: 0 } ul:not(.audioList):not(.language-dropdown) li { padding-top: .714em; } .bi { color: #FFBE98 } .list-unstyled li { display: flex; align-items: center } .vita-list .list-unstyled li i { flex-shrink: 0; margin-right: .5em; } #skills .bi { font-size: 1.3em } #skills ul li { display: flex; justify-content: left; align-items: center } #skills ul li:last-of-type { margin-bottom: 2em; } #skills ul li div { margin-right: 1em } @media (max-width: 959px) { #skillsRow h3 { text-align: center; margin-bottom: 0; } #skills ul li { display: block; text-align: center; } #skillsRow li div:nth-of-type(2) { font-size: .75em } } #section4 { overflow: hidden; } .typewriter * { overflow: hidden; border-right: .15em solid #FFBE98; white-space: nowrap; margin: 0 auto; letter-spacing: 0em; animation: blink-caret .5s step-end infinite; } /* The typewriter cursor effect */ @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: #FFBE98 } } h2 { font-size: 1.5em; text-transform: uppercase; font-weight: 700; text-align: center; margin-bottom: .8333em; } @media (min-width: 768px) { h2 { text-align: left; } } h3 { font-size: .875em; text-transform: uppercase; font-weight: 700; letter-spacing: 2px } /* colors */ .bg-1 { background-color: #000; } .bg-2 { background-color: #242424; } .bg-3 { background-color: #343434; } .light .bg-1 { background-color: #f4f4f4; } .light .bg-2 { background-color: #e4e4e4; } .light .bg-3 { background-color: #f4f4f4; } @media (min-width: 1280px) and (max-width: 1559px) { .custom-body { font-size: 16px !important; } } @media (min-width: 2400px) { .custom-body { font-size: 24px !important; } } @media (min-width: 3800px) { .custom-body { font-size: 36px !important; } } .nav-black { background-color: #000; padding-top: 0; border-bottom:1px solid rgba(255,255,255,0.22); } .light .nav-black { background-color: #d4d4d4; border-bottom:1px solid rgba(0,0,0,.2); } .custom-navbar { padding-top: .75rem; padding-bottom: 0; z-index: 1; } .custom-navbar-desktop { padding-top: 0; } .custom-navbar .custom-container-fluid { padding-left: 0; padding-right: 0; } .custom-toggler { margin-bottom: .5em; border-color: transparent; } .custom-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%239E99FF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; width: 2em; } .footer-link.nav-link { display: inline; } .custom-navbar .nav-link { font-weight: 700; text-transform: uppercase; font-size: 1.5em; border-bottom: 1px solid #3A3A3A; padding: .75em; color: #fff; background-color: #2A2A2A } .custom-navbar-desktop .nav-link { font-weight: 700; text-transform: uppercase; font-size: 1.5em; border-bottom: 1px solid transparent; padding: .75em; color: #fff; background-color: transparent; margin-right: 1.6665em; } .light .custom-navbar-desktop .nav-link { color: #141414; } .custom-navbar .nav-link.active { color: #9E99FF; } .custom-content-padding { padding: 1.25em .5em } .teaser { display: flex; background-size: 200%; background-position: left bottom; background-repeat: no-repeat; animation: backgroundMove 240s linear infinite; } @media (min-width: 992px) { .teaser { background-image: url("media.php?file=images/teaser-bg.webp"); } } @keyframes backgroundMove { 0% { background-position: left bottom } 100% { background-position: right bottom } } @media (min-width: 768px) and (max-width:991px) { .teaser { height: 338px; } } @media (min-width: 992px) { .teaser { border-bottom-color: #FFBE98; /*height: 100vh;*/ } .custom-content-padding { padding: 5em 4.25em } .content-section h2:not(.accordion-header) { margin-bottom: 1.625em; } } .teaser-left { background-color: rgba(25, 25, 25, .97); display: flex; height: auto; flex-direction: column; position: relative; padding-bottom: 0; } .light .teaser-left { background-color: rgba(200, 200, 200, .97); } /* abobe the fold */ .teaser-left .teaser-headline { display: flex; flex-direction: column; height: 100%; align-items: flex-start; justify-content: center; } .teaser-left .teaser-headline h1 { font-size: min(5vw, 40px); width: 100%; max-width: 100%; } .teaser-right { height: 100px; position: relative; } @media (min-width: 768px) { .teaser-left { padding-bottom: 1.375em; } .teaser-right { height: auto; background: rgba(25, 25, 25, .97) url("media.php?file=images/avatar.webp") center bottom/contain no-repeat; } .light .teaser-right { background: rgba(200, 200, 200, .97) url("media.php?file=images/avatar.webp") center bottom/contain no-repeat; } } .teaser-left .teaser-headline h1 { font-size: calc(4.4vw); white-space: nowrap; position: relative; right: 4px } .teaser .teaser-brand { text-transform: uppercase; } .code { color: #FFBE98; font-family: 'Fira Code', monospace; } .light .code { background-color: #343434; margin-bottom: 1px; width: auto; } @media (max-width:991px) { #section2 { border-top: 1px solid #FFBE98; } .teaser-right { border-bottom: 1px solid #FFBE98; } } .hobbies-list { list-style: none; padding-left: 0; font-size: .875em; margin-bottom: .5em } .vita-list { border-bottom: 1px solid #343434; padding: .625em 0; } .vita-list:first-of-type { padding-top: 0; } .vita-list:last-of-type { padding-bottom: 0; } .vita-list:last-of-type { border-bottom: none; } .vita-list .accordion-button { font-size: 1em; } .vita-list .no-pad-lr { /*padding-left: .25em; padding-right: .25em;*/ } .vita-list p { margin-bottom: .625em; } .vita-employer { text-transform: uppercase; font-weight: 700; } .vita-list .vita-tasks { font-weight: 700; text-transform: uppercase; margin-right: .5em; letter-spacing: 1px; font-size: .5em } .vita-list .accordion-button { padding: 0; box-shadow: none; width: auto; } .vita-list .accordion { --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239E99FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .vita-list .accordion-button:after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239E99FF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .vita-list .accordion, .vita-list .accordion-item, .vita-list .accordion-button, .vita-list .accordion-body { background-color: transparent; color: white; } .light .vita-list .accordion, .light .vita-list .accordion-item, .light .vita-list .accordion-button, .light .vita-list .accordion-body { background-color: transparent; color: #121212; } .vita-list .vita-jobtitle { font-size: 0.875em; } .vita-list .accordion ul { padding-left: 0; font-size: .875em; list-style-position: outside; margin-bottom: 0; } .vita-list .accordion-body { padding: 0; background-color: transparent; color: #fff } .vita-list .job-duration { text-align: right; } /* Footer */ .form-control { border-radius: 0; border: none; background-color: #343434; color: #fff; padding: 1.25em; } .form-control::placeholder { color: #fff !important; } .footer { display: flex; align-items: center; } .footer-content { display: flex; flex-direction: column; align-items: center; } .footer-item:first-of-type { margin-bottom: 1em; } /* Back To Top Button */ #back-to-top { position: fixed; bottom: 20px; right: 20px; display: none; background-color: #000; color: #fff; outline: none; border-color: #FFBE98 transparent transparent transparent; z-index: 2; } .btn { padding: 1em 2em; border-radius: 0; text-transform: uppercase; background-color: #9E99FF; color: #242424; font-weight: bold; } /* CSS für Tablet-Landscape und Desktop-Geräte */ @media (min-width: 768px) { .d-grid { display: flex; justify-content: flex-end; } .btn { width: auto; padding: 1em 2em; } } .mobile-nav-buttons { position: relative; bottom: 0.375em; right: 1em; } /* darkmode button */ .darkmode-button { padding: 0; width: 48px; height: 32px; border: none; } @media (max-width:767px) { .darkmode-button { bottom: .3125em; } } @media (min-width:768px) { .darkmode-button { margin-right: .5em; position: relative; } } .darkmode-button .bi { color: #fff } .darkmode-button:hover, .darkmode-button:active, .darkmode-button.show { background-color: #9E99FF !important; border: 1px solid #fff; } .light .darkmode-button:hover, .light .darkmode-button:active, .light .darkmode-button.show { border: 1px solid #9E99FF; } /* Dropdown */ .dropdown-toggle::after { display: none !important } .language-button { width: auto !important; padding: 0 !important; border: none; } .language-button:hover { outline: 1px solid #9E99FF } .language-dropdown img, .language-button img { width: 3em; height: auto; } .language-dropdown li { margin: 0 !important; } .language-dropdown .dropdown-item { padding: 0 !important; } .language-dropdown .dropdown-item:hover { outline: 1px solid #9E99FF; } .dropup .language-dropdown.dropdown-menu[data-bs-popper] { padding: 0 !important; border-radius: 0 !important; min-width: 3em; } .dropdown-menu[data-bs-popper] { padding: 0 !important; border-radius: 0 !important; min-width: 3em; } .dropdown-menu.show { padding: 0 !important; border-radius: 0 !important; min-width: 3em; border:none; } #section4 h3 { text-align: left } .cover { width: 100%; height: auto; } .audioList { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; list-style: none; padding: 0; } .song-item { flex: 0 0 calc(50% - 1em); max-width: calc(50% - 1em); display: flex; flex-direction: column; align-items: center; text-align: center; } .song-item audio { width: 100%; } .figure-caption { color: #fff; } .light .figure-caption { color: #141414; } .song-item { position: relative; display: inline-block; line-height: 0 } .song-item audio { display: none; } .song-item .custom-audio-controls { position: absolute; bottom:45%; left: 0; width: 100%; box-sizing: border-box; transform: translateY(45%); z-index: 2; opacity: 0; } .song-item .figure-caption { position: absolute; top: 0; z-index: 1; opacity: .02; left: 0; bottom: 0; transition: opacity .2s ease; display: flex; justify-content: center; font-size: .333em; } .song-item .figure-caption span { position: relative; top: 6.66em } @media (max-width:959px) { .song-item .custom-audio-controls { bottom: 50%; transform: translateY(50%); opacity: 1; } .audioList .song-item:hover::before { opacity: 0; } } .song-item .custom-audio-controls button { background: none; border: none; color: #fff; font-size: 4em; cursor: pointer; } .song-item i { color: #fff; font-size: 1em; text-shadow: 0px 0px 1px #000; } .audioList .song-item::before { content: ""; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,.7); width: 100%; height: 100%; color: white; opacity: 0; transition: opacity 0.3s ease; } .audioList .song-item::after { content: attr(data-title); position: absolute; top: 45%; width:100%; left: 0; color: white; display: flex; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .audioList .song-item:hover::before { opacity: 1; } .audioList .song-item:hover::after { opacity: 1; } .audioList .song-item:hover .custom-audio-controls { opacity: 1; } @media (min-width:768px) { .song-item:hover .figure-caption { opacity: .92; } .song-item { flex: 0 0 calc(100%/3 - 1em); max-width: calc(100%/3 - 1em) } } @media (max-width: 414px) and (orientation: portrait) { .custom-navbar .nav-link { font-size: 1em; background-color: #000 } .teaser-left .teaser-headline { align-items: center; text-align: center } .vita-list .job-duration { text-align: left; } #back-to-top { left: 0; right: 0; bottom: 0; } .song-item .figure-caption { font-size: .5em } } @media (max-width: 414px) and (orientation: landscape) { .custom-navbar .nav-link { font-size: 1em; background-color: #000 } .teaser-left .teaser-headline { align-items: center; text-align: center } .vita-list .job-duration { text-align: left; } #back-to-top { left: 0; right: 0; bottom: 0; } } /* FX */ .screen-filter { background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 1) 1px, transparent 1px); background-size: 5px 5px; z-index: 1; opacity: .1; } .monitor-gradient { background-image: radial-gradient(circle, rgba(222, 222, 222, 0.1) 0%, rgba(0, 0, 0, 0) 50%); background-position: center center; background-size: cover; z-index: 1; } .player-container { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.92); padding: 1em 1em 0; box-sizing: border-box; display: none; /* Ausblenden, bis aktiviert */ justify-content: center; align-items: center; z-index: 2000; flex-direction: column; } .ribbon { position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 60px 60px 0; border-color: transparent #000 transparent transparent; z-index: 2009; } #close-btn { position: absolute; top: 0; right: 0; z-index: 2010; padding:0 } #close-btn i { color:#fff } .player-cover { max-width: 300px; max-height: 300px; } .player-controls { display: flex; align-items: center; margin-bottom: 10px; flex-flow: column } .control-btn { background: none; border: none; color: white; font-size: 24px; margin: 0 5px; cursor: pointer; } .control-btn:focus { outline: none; } .player-visualizer { width: 100%; height: 100px; background-color: transparent; } .modal-body { width: calc(100vw - 38.2vw); } .modal-content { background-color: #000; text-align: left; line-height: 2; text-transform: initial; padding: 6em; hyphens: auto; } .light .modal-content { background-color:#eee!important } .light .address { background-color: #000; padding: 1em; } @media(max-width:768px) { .img-webdesign { width:100%; height:auto; } }