@font-face{font-family:Montserrat;src:url(/fonts/Montserrat-VariableFont_wght.ttf);font-display:swap}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Montserrat,sans-serif;background-color:#fff;color:#000;line-height:1.6;vertical-align:baseline}a{text-decoration:none;color:inherit;transition:.3s ease-in-out}ul{list-style:none}.title-h2{color:#d8ae8f;font-weight:400;font-size:3rem;margin:2rem auto;text-align:center}@media(max-width:600px){.title-h2{font-size:2.5rem}}.btn{display:inline-block;text-transform:uppercase;letter-spacing:.1rem;padding:1rem;background-color:#d8ae8f;color:#000;cursor:pointer;transition:.3s ease-in-out;width:fit-content;border-radius:7px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:none;box-shadow:0 5px 10px #0006}.btn:hover{color:#fff;box-shadow:0 2px 5px #0006}.btn:active{transform:translate(2px,2px);box-shadow:0 0 #000}.btn-contact{font-family:Montserrat,sans-serif;line-height:1.6;list-style:none;font-size:.9rem;text-transform:uppercase;letter-spacing:.1rem;margin:0;padding:0 5px;box-sizing:border-box;text-decoration:none;color:inherit;transition:.3s ease-in-out;background-color:#d8ae8f}.btn-contact:hover{color:#d8ae8f;background-color:transparent}.toast{position:fixed;bottom:20px;right:20px;color:#fff;padding:12px 18px;border-radius:6px;opacity:0;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease;z-index:9999;box-shadow:0 4px 10px #0003}.toast.visible{opacity:1;transform:translateY(0)}.toast-success{background:#0f6131}.toast-error{background:#e74c3c}.toast-info{background:#3498db}.datenschutz-text{max-width:800px;margin:0 auto;text-align:left;padding:2rem 0}.datenschutz-text h1,.datenschutz-text h2,.datenschutz-text h3{margin-top:2rem;margin-bottom:1rem;color:#d8ae8f}.datenschutz-text p{margin-bottom:1rem;line-height:1.6}.datenschutz-text ul{list-style:disc;margin-left:2rem;margin-bottom:1rem}header{position:sticky;top:0;z-index:99;background-color:#fff;padding-bottom:1rem}header #heading{display:flex;justify-content:space-between;align-items:flex-end;margin:0 1rem;padding-top:3rem}@media(max-width:768px){header #heading{flex-direction:column;align-items:center;padding-top:1rem}}header .header-title-text{font-size:2rem;text-align:center;margin:0 1rem}@media(max-width:600px){header .header-title-text{font-size:1.5rem;margin:.5rem 0}}header .nav{display:flex;align-items:flex-end}header .nav-list{display:flex;gap:.8rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.1rem}header .nav-list a:hover{color:#d8ae8f}@media(max-width:768px){header .nav-list{width:100%;justify-content:space-between;font-size:.85rem}}.hero-split{display:flex;justify-content:center;align-items:center;height:90vh;min-height:600px;position:relative}.hero-split .hero-frame{border-radius:7px;position:relative;width:90vw;max-width:1200px;height:60vh;max-height:800px;overflow:hidden;margin-bottom:10vh}@media(min-width:769px){.hero-split .hero-frame:hover .area-designer{opacity:1}}.hero-split .hero{position:absolute;bottom:0;left:50%;transform:translate(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;padding-bottom:2rem}.hero-split .hero-title-main{font-weight:400;font-size:3rem;white-space:nowrap}@media(max-width:768px){.hero-split .hero-title-main{font-size:1.6rem}}.hero-split .hero-area{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;text-align:center;color:#fff;background-size:cover;background-position:center;transition:opacity .7s ease-in-out,justify-content .7s ease-in-out;z-index:2}.hero-split .hero-area:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0000001a;z-index:1}.hero-split .hero-area.area-coder{background-image:url(/img/bg-rechts.png);justify-content:flex-start}.hero-split .hero-area.area-designer{background-image:url(/img/bg-links.png);justify-content:flex-end;opacity:0;z-index:3}@media(max-width:768px){.hero-split .hero-area.area-designer{animation:hero-split-cycle 8s infinite ease-in-out}}.hero-split .hero-content{background-color:#0000004d;border-radius:14px;box-shadow:0 10px 30px #0009;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:3;max-width:400px;padding:20px}@media(max-width:768px){.hero-split .hero-content{display:none}}.hero-split .hero-content .hero-title-sub{font-size:2.5rem;white-space:nowrap}@media(max-width:768px){.hero-split .hero-content .hero-title-sub{font-size:2rem}}.hero-split .hero-content .hero-description{font-size:1.3rem;line-height:1.8}@keyframes hero-split-cycle{0%,45%{opacity:0}50%,95%{opacity:1}to{opacity:0}}.work{padding:5rem 2rem;text-align:center;background-color:#fff}.work .work-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:4rem;max-width:1200px;margin:0 auto 4rem}.work .work-img{display:flex;flex-direction:column;align-items:center;text-align:left}.work .work-img .img-link{width:100%;margin-bottom:1.5rem;overflow:hidden;border-radius:8px;display:block;transition:transform .3s ease-in-out,box-shadow .3s ease-in-out;border:1px solid rgba(216,174,143,.1)}.work .work-img .img-link:hover{transform:translateY(-8px);box-shadow:0 12px 24px #00000026;border-color:#d8ae8f}.work .work-img .img-link:hover img{transform:scale(1.03)}.work .work-img img{width:100%;height:auto;display:block;transition:transform .7s ease-in-out}.work .work-img h3{font-size:1.5rem;margin-bottom:.75rem;color:#000;width:100%}.work .work-img p{font-size:.95rem;margin-bottom:1rem;line-height:1.5}.work .work-img ul{list-style:none;padding:0;font-size:.85rem;margin-bottom:1.5rem;width:100%}.work .work-img ul li{margin-bottom:.4rem}.work .work-img ul li b{color:#d8ae8f;font-weight:600}.work .slider-wrapper{position:relative;max-width:1100px;margin:4rem auto 0;padding:0 60px}.work .slider-content{display:flex;align-items:stretch;gap:2rem;overflow-x:auto;scroll-behavior:smooth;padding:2rem 1rem;scrollbar-width:none}.work .slider-content::-webkit-scrollbar{display:none}.work .slider-card{flex:0 0 300px;background:#fff;padding:1.5rem;border-radius:12px;border:1px solid rgba(216,174,143,.1);transition:all .3s ease;display:flex;flex-direction:column;text-align:left;box-shadow:0 4px 12px #0000000d}.work .slider-card:hover{transform:translateY(-5px);border-color:#d8ae8f;box-shadow:0 10px 20px #0000001a}.work .slider-card .card-image{width:100%;aspect-ratio:16/9;background:#f8f9fa;border-radius:6px;margin-bottom:1.2rem;overflow:hidden;border:1px solid rgba(0,0,0,.05)}.work .slider-card .card-image img{width:100%;height:100%;object-fit:contain;background-color:#f0f0f0;display:block}.work .slider-card h4{margin-bottom:.8rem;font-size:1.1rem;color:#000}.work .slider-card p{font-size:.85rem;line-height:1.4;margin-bottom:1.5rem;flex-grow:1;color:#666}.work .project-links{display:flex;gap:2rem;margin-top:auto}.work .project-links a{font-size:.8rem;letter-spacing:.1rem;text-transform:uppercase;font-weight:700;transition:all .3s ease-in-out}.work .project-links__repo{color:#000}.work .project-links__repo:hover{color:#d8ae8f}.work .project-links__pages{color:#000}.work .project-links__pages:hover{color:#d8ae8f}.work .slider-btn{background:#fff;border:2px solid #d8ae8f;color:#d8ae8f;font-size:1.2rem;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease-in-out;position:absolute;top:50%;transform:translateY(-50%);z-index:10;box-shadow:0 2px 8px #0000001a}.work .slider-btn:hover{background:#d8ae8f;color:#fff}.work .slider-btn.prev{left:10px}.work .slider-btn.next{right:10px}@media(max-width:768px){.work .slider-wrapper{padding:0 10px}.work .slider-card{flex:0 0 80vw}.work .slider-btn{width:35px;height:35px}}.about{display:flex;justify-content:center;background-color:#f9f9f9}.about .about-container{display:flex;align-items:flex-start;width:90%;max-width:1100px;gap:5rem}@media(max-width:768px){.about .about-container{flex-direction:column;gap:3rem}}.about .about-left{flex:1}.about .about-left .title-h2{margin-bottom:2rem;font-size:2.5rem;position:relative}.about .about-left .title-h2:after{content:"";display:block;width:50px;height:4px;background-color:#d8ae8f;margin-top:.5rem}.about .about-left .about-text{font-size:1.1rem;line-height:1.7;color:#333}.about .about-left .about-text p{margin-bottom:1.5rem}.about .about-left .about-text strong{color:#cb9369}.about .about-left .focus-list{list-style:none;padding:0;margin:2rem 0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:600px){.about .about-left .focus-list{grid-template-columns:1fr}}.about .about-left .focus-list li{position:relative;padding-left:1.5rem;font-weight:500}.about .about-left .focus-list li:before{content:">";position:absolute;left:0;color:#d8ae8f;font-family:Courier New,monospace;font-weight:700}.about .about-left .about-note{margin-top:2rem;padding:1rem;border-left:3px solid #d8ae8f;background:#fff;font-size:1rem}.about .about-right{flex:0 0 350px}@media(max-width:768px){.about .about-right{flex:1;width:100%;max-width:400px}}.about .about-right .about-img{width:100%;height:auto;border:1px solid #ddd;filter:grayscale(20%);box-shadow:15px 15px #d8ae8f;transition:all .3s ease-in-out}.about .about-right .about-img:hover{transform:translate(-5px,-5px);box-shadow:20px 20px #d8ae8f;filter:grayscale(0%)}.contact{padding:5rem 1rem;text-align:center}.contact .contact-form{display:flex;flex-direction:column;gap:1.5rem;max-width:600px;margin:3rem auto 0;text-align:left}.contact .contact-form .form-group{display:flex;flex-direction:column;gap:.5rem}.contact .contact-form .form-group label{font-size:.85rem;text-transform:uppercase;letter-spacing:.1rem;color:#0000004d}.contact .contact-form .form-group input,.contact .contact-form .form-group textarea{padding:1rem;border:1px solid rgba(0,0,0,.2);background:transparent;font-family:inherit;font-size:1rem;transition:border-color .3s ease-in-out}.contact .contact-form .form-group input:focus,.contact .contact-form .form-group textarea:focus{outline:none;border-color:#d8ae8f}.contact .contact-form .form-group textarea{min-height:150px;resize:vertical}.contact .contact-form .form-group.pot-field{display:none!important}.contact .contact-form .button-group{display:flex;justify-content:center;margin-top:1rem}.contact .contact-form .checkbox-group{flex-direction:row!important;align-items:flex-start;gap:.75rem;margin-top:.5rem;cursor:pointer}.contact .contact-form .checkbox-group input[type=checkbox]{width:18px;height:18px;margin-top:.2rem;cursor:pointer;accent-color:#d8ae8f}.contact .contact-form .checkbox-group label{font-size:.9rem;text-transform:none;letter-spacing:normal;color:#000;line-height:1.4;cursor:pointer}.contact .contact-form .checkbox-group label a{color:#0f699a;text-decoration:underline}.contact .contact-form .checkbox-group label a:hover{color:#d8ae8f}.footer-container{background-color:#1a1a1a;padding:2rem 0;text-align:center}.footer-container .footer{color:#fff;font-size:.9rem;letter-spacing:.05rem}