html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}:root{--color-primary: #fff132;--color-secondary: #2ecc71;--color-background: #10313d;--color-background-2: #132233;--color-background-dark: #0b1724;--color-text: #ecf0f1;--color-light-gray: #bdc3c7;--color-light-gray-opaque: rgba(189, 195, 199, .5);--color-dark-gray: #202020;--color-dark-gray-opaque: rgba(32, 32, 32, .7);--color-white: #ffffff;--color-cards: rgba(255, 255, 255, .05);--color-background-projects: rgb(0, 0, 0, .1);--color-background-lernen-media: #242424;--color-background-lernen-beschreibung: rgba(51, 90, 105, .3);--font-family-sans-serif: "Inter";--font-logo: "Inter";--font-size-base: 16px;--font-size-h1: 2.5rem;--font-size-h2: 2rem;--font-size-h3: 1.5rem;--font-size-h4: 1.3rem;--font-size-nav: 1.3rem;--font-size-nav_mobile: 1.6rem;--spacing-small: .5rem;--spacing-medium: 1rem;--spacing-large: 2rem;--spacing-extra-large: 2.5rem;--spacing-header-title: 1.5rem;--border-radius: 4px;--border-radius-cards: 12px;--box-shadow: 0 2px 4px rgba(0, 0, 0, .1);--icon-hover-opacity: .75;--mark-color-1: rgba(255, 225, 0, .1);--mark-color-2: rgba(255, 225, 0, .7) 4%;--mark-color-3: rgba(255, 225, 0, .3)}header{background-color:var(--color-dark-gray-opaque);color:var(--color-white);padding:var(--spacing-medium) var(--spacing-large)}.header-content{display:flex;justify-content:space-between;align-items:center;color:var(--color-primary)}header h1{margin:0;font-size:var(--font-size-h2);font-family:var(--font-logo)}.header-right{display:flex;align-items:center;gap:var(--spacing-medium)}header nav ul{display:flex;gap:var(--spacing-medium);list-style:none;margin:0;padding:0}header nav a{display:flex;gap:4px;font-size:var(--font-size-nav);color:var(--color-white);text-decoration:none;transition:color .3s ease;position:relative}header nav a:after{content:"";position:absolute;width:100%;transform:scaleX(0);height:2px;bottom:-5px;left:0;background-color:var(--color-primary);transform-origin:bottom right;transition:transform .25s ease-out}header nav a:hover:after{transform:scaleX(1);transform-origin:bottom left}header nav a:hover{color:var(--color-primary);opacity:1}header nav a:hover>svg{fill:var(--color-primary)}#mobile-menu-open,#mobile-menu-close{display:none;background:none;border:none;cursor:pointer;z-index:1002;padding:0}.mobile-only{display:none}#mobile-nav{position:fixed;top:80px;left:0;width:100%;height:100%;background-color:#000000e6;text-align:center;transition:opacity .2s ease-in-out,visibility .3s ease-in-out;z-index:1000;opacity:0;visibility:hidden}#mobile-nav.mobile-nav-open{right:0}#mobile-nav nav ul{list-style:none;padding:0;margin-top:var(--spacing-large)}#mobile-nav nav li{width:100%;margin-bottom:var(--spacing-medium)}#mobile-nav nav li a{width:fit-content;margin:0 auto;display:flex;gap:4px}#mobile-nav nav a{color:var(--color-white);text-decoration:none;font-size:var(--font-size-nav_mobile);position:relative}#mobile-nav nav a:after{content:"";position:absolute;width:100%;transform:scaleX(0);height:2px;bottom:-5px;left:0;background-color:var(--color-primary);transform-origin:bottom right;transition:transform .25s ease-out}#mobile-nav nav a:hover:after{transform:scaleX(1);transform-origin:bottom left}#mobile-nav nav a:hover{color:var(--color-primary);opacity:1}#mobile-nav nav a:hover>svg{fill:var(--color-primary)}@media (max-width: 768px){.desktop-nav{display:none}.mobile-only,#mobile-menu-open,#mobile-nav{display:block}#mobile-nav.mobile-nav-open{opacity:1;visibility:visible}}@media (max-width: 400px){#mobile-nav{top:64px}}footer{background-color:var(--color-dark-gray-opaque);color:var(--color-white);text-align:center;padding:var(--spacing-medium) var(--spacing-large)}.footer-content{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.4rem}.footer-links{display:flex;flex-direction:row;gap:.4rem}.footer-link{color:var(--color-white);transition:color .3s ease}.footer-link:hover{opacity:var(--icon-hover-opacity)}.footer-link img{width:1.5rem;height:1.5rem}.footer-content div a{color:#fff}.social-links{size:1rem;display:flex;gap:var(--spacing-medium)}.social-links a{display:inline-block}.social-links img{width:24px;height:24px;transition:opacity .3s ease}.social-icons a:nth-child(3){transform:scale(1.2) translateY(1px)}@media (max-width: 768px){.footer-content{flex-direction:column;justify-content:center;gap:1rem}}@media (max-width: 400px){.footer-links{flex-direction:column;align-items:center}.footer-links span{display:none}}.hero-section{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}.hero-content{display:flex;flex-direction:column;padding:var(--spacing-large)}.hero-headline{font-size:2.8rem;font-weight:700;margin-bottom:1rem;width:fit-content;text-wrap:nowrap}.hero-text{font-size:1.2rem;margin-bottom:2rem}.hero-cta{background-color:var(--color-primary);color:var(--color-background);padding:1rem 2rem;border:none;border-radius:8px;cursor:pointer;font-size:1.2rem;font-weight:700;align-self:flex-start;margin-bottom:1rem;transition:transform .3s ease,box-shadow .3s ease}a:has(>.hero-cta):hover{opacity:1}.hero-image{width:100%;height:fit-content;transform:translate(-3rem)}.hero-image picture,.hero-image img{width:100%;height:100%;object-fit:contain;display:block}@media (max-width: 1024px){.hero-section{grid-template-columns:1fr}.hero-content{display:flex;align-items:center;justify-content:center;padding-bottom:var(--spacing-small)}.hero-text{text-align:center}.hero-cta{align-self:center}.hero-image{height:20rem;transform:translate(0)}.contact-me{transform:translate(-.5rem)}}@media (max-width: 768px){.hero-headline{font-size:2.4rem;text-align:center;line-height:1.2}.hero-image{height:17rem;transform:translate(0)}}@media (max-width: 512px){.hero-headline{font-size:1.6rem;text-align:center;line-height:1.2}}#projects{background-color:var(--color-background-projects);padding:var(--spacing-large)}.project-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--spacing-large)}.project-card{background:var(--color-cards);border-radius:var(--border-radius-cards);box-shadow:var(--box-shadow);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;border:1px solid rgba(255,255,255,.2)}.project-card:hover{transform:translateY(-5px);box-shadow:.25rem .5rem #00000080;cursor:pointer;-webkit-user-select:none;user-select:none}.project-card img{width:100%;height:auto;display:block}.project-card h3{padding:var(--spacing-medium) var(--spacing-medium) 0;color:var(--color-white)}.project-card p{padding:0 var(--spacing-medium) var(--spacing-medium);color:var(--color-white)}@media (max-width: 1024px){.project-grid{grid-template-columns:1fr 1fr}.project-card h3{font-size:1.2rem}}@media (max-width: 768px){.project-grid{grid-template-columns:1fr}}@media (max-width: 768px){.project-card h3{font-size:1.1rem}.project-card p{font-size:1.2rem}}#popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000bf;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#popup-overlay.hidden{display:none}#popup-content{background:var(--color-background);color:var(--color-text);padding:var(--spacing-large);border-radius:var(--border-radius);box-shadow:var(--box-shadow-dark);width:70%;max-width:1200px;margin:0 var(--spacing-medium);max-height:90vh;overflow-y:auto;position:relative;transform:scale(.9);opacity:0;display:flex;flex-direction:column;gap:1rem;-ms-overflow-style:none;scrollbar-width:none}#popup-content::-webkit-scrollbar{display:none}#popup-header-controls{position:absolute;top:var(--spacing-medium);right:var(--spacing-medium);display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-medium)}#popup-close{background:none;border:none;font-size:1.6rem;color:var(--color-text);cursor:pointer;transition:color .2s ease}.popup-header{display:flex;flex-direction:row;gap:1rem;align-items:center;padding-bottom:var(--spacing-medium)}#popup-image{width:20%;height:auto;display:block}@media (max-width: 768px){.popup-header{flex-direction:column;align-items:center;justify-content:center}#popup-image{width:80%}}.popup-images-presentation{display:flex;flex-direction:column;gap:1rem}.popup-images-presentation img{width:90%;align-self:center;object-fit:contain}@media (max-width: 768px){.popup-images-presentation img{width:100%;height:auto;object-fit:contain}}#popup-extra{display:none}#popup-extra.accordion{border:1px solid #e0e0e0;border-radius:.5rem;overflow:hidden}#popup-extra.accordion details{border-top:1px solid #e0e0e0}#popup-extra.accordion details:first-child{border-top:none}#popup-extra.accordion summary{display:flex;align-items:center;padding:.75rem 1.25rem;cursor:pointer;position:relative;font-weight:600;-webkit-user-select:none;user-select:none;list-style:none}#popup-extra.accordion summary{-webkit-details-marker:none}#popup-extra.accordion details div{padding:.75rem 1.25rem}#popup-extra.accordion summary:after{content:"+";position:absolute;right:1rem;font-size:1.25rem;transition:transform .2s ease}#popup-extra.accordion details[open] summary:after{content:"−"}#lernen{padding:var(--spacing-large)}.lernen-grid{display:grid;grid-template:"video beschreibung" "map beschreibung" / 1fr 1fr;gap:1rem 0}.box-video{grid-area:video}.box-video lite-youtube{border-top-left-radius:var(--border-radius-cards);border-bottom-left-radius:var(--border-radius-cards)}.box-map{grid-area:map;align-self:flex-end}.box-beschreibung{grid-area:beschreibung;background-color:var(--color-background-lernen-beschreibung);padding:3rem;display:flex;flex-direction:column;gap:1rem}.box-beschreibung h3{color:var(--color-primary)}.box-beschreibung h2{font-size:2.5rem;line-height:1}.box-beschreibung p{text-align:center;font-size:1.2rem;line-height:1.6}.box-beschreibung button{background-color:var(--color-primary);padding:1rem 2rem;margin-top:var(--spacing-large);border:none;border-radius:8px;cursor:pointer;font-size:1.25rem;text-wrap:nowrap;font-weight:700;align-self:center;transition:transform .3s ease,box-shadow .3s ease}.box-beschreibung button a{color:#000}.box-beschreibung button a:hover{opacity:1}.rotate{display:inline-block;transform:rotate(-45deg)}.map-shell{position:relative;min-height:360px;background:#f3f4f6;overflow:hidden;display:grid;place-items:center}.map-viewport{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .35s ease}.map-shell.ready .map-viewport{opacity:1}#load-map{position:relative;z-index:2;background-color:var(--color-primary);color:var(--color-background);padding:1rem 2rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:700;transition:transform .3s ease,box-shadow .3s ease,opacity .2s ease}.map-shell.loading #load-map{opacity:.7;pointer-events:none}.map-shell.hide-button #load-map{opacity:0}.map-shell.loaded #load-map{display:none!important}#myMap{width:100%;height:100%;min-height:360px;aspect-ratio:16 / 9}@media (prefers-reduced-motion: reduce){.map-viewport,#load-map{transition:none!important}}@media (max-width: 1024px){.box-beschreibung{padding:var(--spacing-large);gap:.5rem}.box-beschreibung h3{font-size:1rem}.box-beschreibung h2{font-size:1.6rem}.box-beschreibung p{text-align:left}.box-beschreibung button{align-self:flex-start;font-size:.9rem}}@media (max-width: 840px){.lernen-grid{grid-template-areas:"beschreibung" "video" "map";grid-template-rows:auto;grid-template-columns:1fr;gap:1rem}.box-video lite-youtube,#myMap{border-radius:var(--border-radius-cards)}}.back-to-main{display:flex;align-items:center;text-decoration:none}.back-to-main .icon{width:1.5rem;height:1.5rem;margin-right:.5rem}body{font-family:var(--font-family-sans-serif);color:var(--color-text);line-height:24px;background:var(--color-background)}@media (max-width: 768px){html,body{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}}.container{max-width:1200px;margin:0 auto}.hidden{display:none}h1,h2,h3,h4{font-family:var(--font-family-sans-serif)}h1{font-size:var(--font-size-h1);line-height:48px;margin-bottom:var(--spacing-medium)}h2{font-size:var(--font-size-h2);line-height:40px;margin-bottom:var(--spacing-medium)}h3{font-size:var(--font-size-h3);line-height:32px;margin-bottom:var(--spacing-medium)}h4{font-size:var(--font-size-h4)}@media (max-width: 400px){h1{font-size:2rem;line-height:32px}h2{font-size:1.6rem;line-height:24px}h3{font-size:1.2rem;line-height:24px}}a{color:var(--color-primary);text-decoration:none}a:hover{opacity:var(--icon-hover-opacity)}button:hover{transform:translateY(-5px);box-shadow:.25rem .25rem #00000080}lottie-player:hover{opacity:var(--icon-hover-opacity)}iframe{width:100%;aspect-ratio:16 / 9}.map-shell{min-height:360px;display:grid;place-items:center;background:#f3f4f6}#load-map{background-color:var(--color-primary);color:var(--color-background);padding:1rem 2rem;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:700;transition:transform .3s ease,box-shadow .3s ease}#myMap{min-height:360px;width:100%;height:100%;aspect-ratio:16 / 9}hr{width:100%;border-width:1;margin-bottom:var(--spacing-large)}.flex-container{display:flex;flex-direction:row;gap:.4rem}.flex-container_small{display:flex;flex-direction:row;gap:.1rem}.flex-container-center{display:flex;flex-direction:row;align-items:center;gap:.4rem}.flex-container-column{display:flex;flex-direction:column;gap:.8rem}.flex-container-column_big{display:flex;flex-direction:column;gap:1.2rem}.flex-container-center-wide{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.2rem}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.fade-in_anim_shorter_shorter{opacity:0;animation:fade-in .4s ease-in-out .3s forwards}.fade-in_anim_shorter{opacity:0;animation:fade-in .7s ease-in-out .3s forwards}.fade-in_anim{opacity:0;animation:fade-in 1.1s ease-in-out .3s forwards}.fade-in_anim_longer{opacity:0;animation:fade-in 1.2s ease-in-out .4s forwards}.fade-in_anim_longer_longer{opacity:0;animation:fade-in 1.3s ease-in-out .5s forwards}.mark{padding:.1em .4em;border-radius:.8em .3em;background:transparent;background-image:linear-gradient(to right,var(--mark-color-1),var(--mark-color-2),var(--mark-color-3));-webkit-box-decoration-break:clone;box-decoration-break:clone}.grain{position:fixed;top:-10vmax;right:-10vmax;bottom:-10vmax;left:-10vmax;z-index:-1;pointer-events:none;opacity:.01;mix-blend-mode:soft-light;background-image:url(assets/img/grain.gif);background-size:200px 100px;background-repeat:repeat;filter:contrast(100%) brightness(90%)}@media (prefers-reduced-motion: reduce){.grain{display:none}}