@font-face {
     font-family: 'Roboto';
     src: url('../fonts/roboto/regular/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2') format('woff2');
 }

 @font-face {
     font-family: 'Roboto';
     font-weight: bold;
     src: url('../fonts/roboto/bold/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2') format('woff2');
 }

 body,
 h1,
 h2,
 h3,
 h4,
 h5,
 a {
     font-family: Roboto, Verdana, sans-serif;
 }

 body,
 html {
     height: 100%;
     margin: 0;
     color: #fff;
     background-color: #555;
 }

 .accent-color {
     color: #f93
 }

 .accent-color-bg {
     background-color: #f93;
     color: #fff;
 }

 .glass-bg {
     color: white;
     background-color: rgba(0, 0, 0, 0.2);
 }

 .glass-bg-2 {
     color: white;
     background-color: rgba(140, 140, 140, 0.9);
 }

 .glass-bg-3 {
     color: white;
     background-color: rgba(40, 40, 40, 0.5);
 }

 .section-caption {
     padding-top: 20px;
     padding-bottom: 20px;
 }

 .techno-card {
     margin-left: 10px;
     margin-right: 10px;
     margin-bottom: 40px;
     display: inline-block;
     vertical-align: top;
     width: 300px;
     border: 1px solid #fff;
 }

 .migration-card {
     margin-top: 20px;
     margin-left: 10px;
     margin-right: 10px;
     display: inline-block;
     vertical-align: top;
     max-width: 500px;
 }

 .migration-header {
     color: #333;
     font-weight: bold;
 }

 .project-card {
     width: 100%;
     vertical-align: top;
     margin-bottom: 40px;
     border: 1px solid #fff;
 }

 .project-header {
     color: #fff;
     background-color: rgba(255, 153, 51, 0.8);
     letter-spacing: 1px;
 }

 .project-info {
     color: #333;
     background-color: #eee;
 }

 ul.project-info-list {
     padding-left: 16px;
     list-style: square;
 }

 ul.project-info-list li {
     border-style: none;
     padding: 4px;
 }

 .project-footer {
     color: #333;
     background-color: #eee;
 }

 .bgimg-1 {
     background-image: url('../images/james-harrison-vpOeXr5wmR4-unsplash-1920.jpg');
 }

 .bgimg-2 {
     background-image: url("../images/james-harrison-vyhD0pLBu9s-unsplash-1920.jpg");
 }

 .bgimg-3 {
     background-image: url("../images/glenn-carstens-peters-npxXWgQ33ZQ-unsplash-1920.jpg");
 }

 .bgimg-1,
 .bgimg-2,
 .bgimg-3 {
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }

 #sidenav {
     height: 100%;
     position: fixed;
     z-index: 10;
     top: 0;
     left: 0;
     overflow-x: hidden;
     letter-spacing: 2px;
 }

 .navbar-desktop-1 {
     background-color: rgba(140, 140, 140, 0.6)
 }

 .navbar-desktop-2 {
     background-color: rgba(140, 140, 140, 1)
 }

 .navbar-height {
     height: 52px;
 }

 .navbar-margin {
     margin-top: 52px;
 }

 .navbar-scroll-margin {
     scroll-margin-top: 52px;
 }

 .accordion {
     color: white;
     background-color: rgba(140, 140, 140, 0.9);
     cursor: pointer;
     padding: 18px;
     width: 100%;
     text-align: left;
     outline: none;
     transition: 0.4s;
     border-bottom: 1px solid #333;
 }

 .accordion-caption {
     width: 90%;
     display: inline-block;
 }

 .accordion:after {
     content: '\002B';
     color: white;
     font-weight: bold;
     float: right;
     margin-left: 5px;
 }

 .accordion-open:after {
     content: "\2212";
 }

 .accordion-open,
 .accordion:hover {
     background-color: #666;
 }

 .accordion-panel {
     padding: 0 18px;
     color: black;
     background-color: #eee;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.2s ease-out;
 }

 /* small */
 @media screen and (max-width: 600px) {

     .text-normal {
         font-size: 16px;
     }

     .text-large {
         font-size: 20px;
     }

     .text-xlarge {
         font-size: 22px;
     }

     .section-caption {
         font-size: 22px;
         letter-spacing: 2px;
     }

     .header-mobile {
         display: block;
     }

     .header-desktop {
         display: none;
     }

     #sidenav {
         display: none;
         width: 250px;
         padding-top: 22px;
         padding-left: 10px;
         color: white;
         background-color: rgba(140, 140, 140, 1);
     }

     .title {
         font-size: 22px;
         letter-spacing: 2px;
     }

     .erfahrung-display {
         display: inline;
     }

     /* no parallax scrolling */
     .bgimg-1,
     .bgimg-2,
     .bgimg-3 {
         background-attachment: scroll;
         min-height: 400px;
     }

     .medium-only {
         display: none;
     }

     .large-only {
         display: none;
     }

     .chat-widget-size {
         height: 60vh;
         position: fixed;
         top: 0px;
         right: 0px;
         left: 0px;
         padding: 10px;
     }

     .chat-button-size {
         width: 50px;
         height: 50px;
         right: 10px;
         bottom: 10px;
         font-size: 32px;
     }
 }

 /* medium */
 @media screen and (min-width: 601px) {

     .text-normal {
         font-size: 18px;
     }

     .text-large {
         font-size: 22px;
     }

     .text-xlarge {
         font-size: 30px;
     }

     .section-caption {
         font-size: 32px;
         letter-spacing: 4px;
     }

     .header-mobile {
         display: block;
     }

     .header-desktop {
         display: none;
     }

     #sidenav {
         display: none;
         width: 300px;
         padding-top: 22px;
         padding-left: 20px;
         color: white;
         background-color: rgba(140, 140, 140, 1);
     }

     .title {
         font-size: 32px;
         letter-spacing: 4px;
     }

     .erfahrung-display {
         display: block;
     }

     /* no parallax scrolling */
     .bgimg-1,
     .bgimg-2,
     .bgimg-3 {
         background-attachment: scroll;
         min-height: 400px;
     }

     .medium-only {
         display: block;
     }

     .large-only {
         display: none;
     }

     .chat-widget-size {
         width: 50vw;
         height: 50vh;
         position: fixed;
         bottom: 20px;
         right: 20px;
         padding: 10px;
     }

     .chat-button-size {
         width: 70px;
         height: 70px;
         right: 20px;
         bottom: 20px;
         font-size: 44px;
     }
 }

 /* large */
 @media screen and (min-width: 1920px) {

     .text-normal {
         font-size: 20px;
         line-height: 1.8;
     }

     .text-large {
         font-size: 24px;
     }

     .text-xlarge {
         font-size: 32px;
     }

     .section-caption {
         font-size: 38px;
         letter-spacing: 4px;
     }

     .header-mobile {
         display: none;
     }

     .header-desktop {
         display: block;
     }

     #sidenav {
         display: none;
         width: 430px;
         padding-top: 36px;
         padding-left: 40px;
         color: white;
         background-color: rgba(0, 0, 0, 0.4);
     }

     .title {
         font-size: 40px;
         letter-spacing: 4px;
     }

     .erfahrung-display {
         display: block;
     }

     /* parallax scrolling */
     .bgimg-1,
     .bgimg-2,
     .bgimg-3 {
         background-attachment: fixed;
     }

     .bgimg-1 {
         min-height: 100%;
     }

     .bgimg-2,
     .bgimg-3 {
         min-height: 600px;
     }

     .medium-only {
         display: none;
     }

     .large-only {
         display: block;
     }

     .chat-widget-size {
         width: 30vw;
         height: 40vh;
         position: fixed;
         bottom: 30px;
         right: 30px;
         padding: 10px;
         font-size: 18px;
     }

     .chat-button-size {

         line-height: 1;

         width: 100px;
         height: 100px;
         right: 30px;
         bottom: 30px;
         font-size: 60px;
     }
 }

 .gg-mail,
 .gg-mail::after {
     display: block;
     box-sizing: border-box;
     height: 14px;
     border: 2px solid
 }

 .gg-mail {
     overflow: hidden;
     transform: scale(var(--ggs, 1.5));
     position: relative;
     width: 18px;
     border-radius: 2px
 }

 .gg-mail::after {
     content: "";
     position: absolute;
     border-radius: 3px;
     width: 14px;
     transform: rotate(-45deg);
     bottom: 3px;
     left: 0
 }

 .gg-menu {
     transform: scale(var(--ggs, 1.5));
     translate: 0px 6px;
     /* Korr. */
 }

 .gg-menu,
 .gg-menu::after,
 .gg-menu::before {
     box-sizing: border-box;
     position: relative;
     display: block;
     width: 20px;
     height: 2px;
     border-radius: 3px;
     background: currentColor;
 }

 .gg-menu::after,
 .gg-menu::before {
     content: "";
     position: absolute;
     top: -6px
 }

 .gg-menu::after {
     top: 6px
 }

 #chat-widget {
     border: 1px solid #ddd;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     line-height: 1.2;
     color: black;
     background-color: white;
     z-index: 9999;
 }

 #chat-box {
     flex: 1;
     overflow-y: auto;
 }

 #chat-window-buttons {
     margin-bottom: 10px;
 }

 #chat-input-bar {
     display: flex;
     gap: 8px;
     padding-top: 10px;
     border-top: 1px solid #ddd;
 }

 #chat-input {
     flex: 1;
     color: #333;
     background-color: #f5f5f5;
 }

 .chat-input::placeholder {
     color: #555;
     opacity: 1;
 }

 .chat-msg-user {
     color: #333;
     margin-bottom: 10px;
 }

 .chat-msg-bot {
     color: #D16900;
     margin-bottom: 10px;
 }

 .chat-hidden-anim {
     opacity: 1;
     transition: opacity 0.7s;
 }

 .chat-hidden {
     opacity: 0;
     pointer-events: none;
 }

 .chat-typing {
     display: flex;
     gap: 4px;
     align-items: center;
 }

 .chat-typing span {
     width: 10px;
     height: 10px;
     background: gray;
     border-radius: 50%;
     animation: blink 1s infinite;
 }

 .chat-typing span:nth-child(2) {
     animation-delay: 0.2s;
 }

 .chat-typing span:nth-child(3) {
     animation-delay: 0.4s;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 0.2;
     }

     50% {
         opacity: 1;
     }
 }

 #chat-button {
     position: fixed;
     background-color: rgba(255, 153, 51, 1);
     border: 1px solid #fff;
     border-radius: 10px;
     color: #f93;
     cursor: pointer;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
     z-index: 9998;
 }

 #chat-button:hover {
     /*background: #ff9933;*/
     transform: scale(1.08);
 }