*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;background:#171717;color:#f4f0eb;font-family:"Manrope",Arial,sans-serif;font-size:16px;line-height:1.65;overflow-x:hidden}a{color:inherit;text-decoration:none}:root{--bg:#171717;--red:#f12d2d;--white:#f4f0eb;--muted:#aaa29b;--line:#393330;--hand:"Permanent Marker","Caveat",cursive;--caveat:"Caveat",cursive;--mono:"DM Mono",monospace}.red{color:var(--red)}.hand{font-family:var(--hand);font-weight:400;letter-spacing:-.045em;display:inline-block;transform:rotate(-3deg)}.section{width:min(1160px,calc(100% - 48px));margin:0 auto}.skip-link{position:absolute;left:-999px;top:8px;background:white;color:#111;padding:10px;z-index:99}.skip-link:focus{left:10px}
.header{height:82px;position:sticky;top:0;z-index:30;background:rgba(23,23,23,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}.header-inner{height:100%;width:min(1240px,calc(100% - 48px));margin:auto;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:8px}.logo-symbol{width:45px;height:43px}.logo-symbol svg{width:100%;height:100%;fill:none;stroke:#f4f0eb;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.logo-symbol .redstroke{stroke:var(--red);stroke-width:4}.logo-symbol circle{fill:var(--red);stroke:none}.logo-type{display:flex;flex-direction:column;font-family:var(--hand);font-size:17px;line-height:.88;transform:rotate(-3deg)}.logo-type b:first-child{font-size:20px}.logo-type span{color:var(--red)}.nav{display:flex;align-items:center;gap:34px;font-size:12px;font-weight:800}.nav>a{color:#d7d0ca;transition:color .2s}.nav>a:hover{color:#fff}.nav em{font-style:normal;color:var(--red);font-size:17px;margin-left:3px}.nav .nav-cta{padding:9px 16px;border:1px solid #665a53;border-radius:30px;color:#fff}.nav-cta span{color:var(--red);margin-left:10px}.nav-toggle{display:none}
.hero{min-height:700px;padding-top:35px;padding-bottom:25px;position:relative;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}.hero-grain{position:absolute;inset:0;z-index:-1;opacity:.12;background-image:radial-gradient(#fff 0.6px,transparent .7px);background-size:7px 7px;mask-image:linear-gradient(90deg,black,transparent 70%)}.hero-topline,.hero-bottomline{display:flex;justify-content:space-between;color:#7f7771;font:9px var(--mono);letter-spacing:.14em}.hero-copy{padding:55px 0 55px 8%}.eyebrow{font:10px var(--mono);letter-spacing:.16em;color:#aaa19a;display:flex;align-items:center;gap:11px;margin:0 0 25px}.red-dot{width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block;box-shadow:0 0 0 4px rgba(241,45,45,.12)}.hero h1{font-size:clamp(64px,9vw,120px);line-height:.98;letter-spacing:-.085em;margin:0 0 34px;font-weight:800}.hero-hand{font-size:1.03em;color:#fff;text-shadow:2px 2px 0 rgba(241,45,45,.2)}.hero-intro{max-width:470px;color:#b9b0a9;font-size:15px;line-height:1.85}.scribble-link{display:inline-flex;position:relative;align-items:center;gap:18px;margin-top:22px;padding-bottom:16px;font:22px var(--caveat);color:#fff}.scribble-link span{color:var(--red);font:20px var(--sans)}.scribble-link svg{position:absolute;bottom:0;left:0;width:100%;height:13px;fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round}.hero-stamp{position:absolute;right:9%;top:22%;width:116px;height:116px;border:1px solid var(--red);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(11deg);color:var(--red)}.hero-stamp span{font:22px var(--hand)}.hero-stamp b{font:10px var(--mono);line-height:1.2}.hero-stamp small{font:7px var(--mono);margin-top:5px;color:#b7aea7}.hero-doodle{position:absolute;color:var(--red);font-size:50px}.doodle-one{right:23%;bottom:17%;transform:rotate(14deg)}.intro-strip{min-height:100px;background:var(--red);display:flex;align-items:center;justify-content:center;gap:40px;padding:18px 24px;position:relative;overflow:hidden}.intro-strip p{margin:0;text-align:center;font-size:clamp(15px,2vw,22px);font-weight:700;letter-spacing:-.03em}.intro-strip .hand{font-size:1.45em;color:#171717}.strip-star{font-size:30px;color:#171717}
.projects{padding-top:125px;padding-bottom:120px}.section-head{display:grid;grid-template-columns:1fr 270px 100px;align-items:end;gap:35px;margin-bottom:60px;position:relative}.section-head h2,.about-text h2{font-size:clamp(48px,6.2vw,78px);line-height:1.04;letter-spacing:-.075em;margin:0}.underline-red{position:relative}.underline-red:after{content:"";position:absolute;height:5px;background:var(--red);border-radius:50%;left:0;right:-8px;bottom:-4px;transform:rotate(-2deg)}.section-note{font-size:13px;color:var(--muted);line-height:1.8;margin:0 0 7px}.margin-note{font:9px var(--mono);letter-spacing:.12em;color:#817871;transform:rotate(7deg);text-align:center}.margin-note b{display:block;font:26px var(--hand);color:var(--red)}
.project-list{display:flex;flex-direction:column;gap:58px}.project-row{display:grid;grid-template-columns:1.12fr .88fr;gap:7%;align-items:center}.project-row:nth-child(even){grid-template-columns:.88fr 1.12fr}.project-row:nth-child(even) .project-visual{order:2}.project-row:nth-child(even) .project-info{order:1;padding-left:8%}.project-visual{position:relative;min-width:0}.browser-frame,.mock-browser{position:relative;padding:0 0 0;background:#272321;border:1px solid #514943;box-shadow:14px 16px 0 rgba(0,0,0,.25);transform:rotate(-1.1deg);overflow:hidden}.project-row:nth-child(even) .browser-frame,.project-row:nth-child(even) .mock-browser{transform:rotate(1.1deg)}.browser-bar,.mock-top{height:34px;background:#292522;border-bottom:1px solid #4a403b;display:flex;align-items:center;padding:0 12px;gap:5px;color:#9c9189;font:8px var(--mono)}.browser-bar>span,.mock-dots{width:6px;height:6px;border-radius:50%;background:#e75a50}.browser-bar>span:nth-child(2){background:#d5a64c}.browser-bar>span:nth-child(3){background:#6d9b72}.browser-bar i{font-style:normal;margin:auto}.browser-frame img{display:block;width:100%;height:255px;object-fit:cover;object-position:center;background:#dedede}.visual-index{position:absolute;right:-15px;top:-18px;background:var(--red);width:43px;height:43px;border-radius:50%;display:grid;place-items:center;font:12px var(--mono);color:#fff;transform:rotate(9deg);box-shadow:0 5px 15px #111}.project-info{padding:15px 4% 15px 0}.project-category{font:9px var(--mono);letter-spacing:.14em;color:var(--red);margin:0 0 13px}.project-info h3{font-size:clamp(34px,4vw,52px);line-height:1.1;letter-spacing:-.07em;margin:0 0 17px}.project-description{font-size:13px;line-height:1.9;color:#b5aca5;max-width:400px}.project-hand{font:24px var(--caveat);color:#e9e1da;margin:22px 0 24px;transform:rotate(-2deg);display:inline-block}.project-link{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:800;width:max-content;padding-bottom:7px;border-bottom:1px solid #5b514b}.project-link span{color:var(--red);font-size:18px;transition:transform .2s}.project-link:hover span{transform:translate(3px,-3px)}.gallery-footnote{font:10px var(--mono);color:#817871;margin:58px 0 0}.hoppi-screen{height:289px;background:#141414;color:white;border-color:#50423f}.hoppi-screen .mock-top b{margin-left:auto;color:#f22e35;font-size:10px}.mock-dots{width:auto;height:auto;background:none;color:#d8c9c1;font-size:8px;letter-spacing:2px}.hoppi-content{height:254px;padding:22px 9%;position:relative;background:radial-gradient(ellipse at 75% 20%,rgba(236,30,40,.24),transparent 50%),#151515}.hoppi-logo{font:44px var(--hand);color:white;line-height:.9}.hoppi-logo span{color:var(--red)}.hoppi-content small{font:7px var(--mono);letter-spacing:.15em;color:#a79c96}.hoppi-content strong{display:block;font-size:34px;line-height:1.05;letter-spacing:-.06em;margin:12px 0}.hoppi-content strong i{font-family:var(--hand);font-weight:400;color:var(--red)}.schedule{display:flex;gap:5px;align-items:center}.schedule span{border:1px solid #544744;padding:4px 7px;font:7px var(--mono);color:#c9c1ba}.schedule span:nth-child(4){background:var(--red);border-color:var(--red)}.schedule b{font:7px var(--mono);color:#f35a5e;margin-left:auto}.mock-caption{position:absolute;bottom:7px;right:10px;font:7px var(--mono);color:#8e817a;letter-spacing:.1em}.radio-screen{height:289px;background:#171717;color:#fff;border-color:#53413d}.radio-screen .mock-top b{margin-left:auto;color:var(--red);font-size:9px;letter-spacing:.1em}.radio-content{height:254px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 20%,rgba(241,45,45,.25),transparent 45%),#171717}.radio-wave{font:55px var(--hand);color:var(--red);line-height:.9}.radio-content small{font:7px var(--mono);letter-spacing:.2em;color:#aaa}.radio-content strong{font-size:38px;letter-spacing:.12em;margin:5px 0}.radio-content strong span{color:var(--red)}.equalizer{display:flex;align-items:center;gap:4px;height:24px}.equalizer i{width:3px;height:10px;background:var(--red);border-radius:2px}.equalizer i:nth-child(3n){height:21px}.equalizer i:nth-child(2n){height:15px}.playbar{display:flex;align-items:center;gap:12px;margin-top:15px;font:8px var(--mono);letter-spacing:.1em}.playbar b{background:var(--red);width:26px;height:26px;display:grid;place-items:center;border-radius:50%}
.about{border-top:1px solid var(--line);padding-top:120px;padding-bottom:125px;display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}.about-poster{height:330px;background:#24201e;border:1px solid #4b3e39;position:relative;display:flex;flex-direction:column;justify-content:center;padding:35px;transform:rotate(-2deg);overflow:hidden}.poster-small{font:9px var(--mono);letter-spacing:.2em;color:#b5aaa2}.about-poster strong{font-size:clamp(35px,5vw,58px);line-height:.98;letter-spacing:-.07em;margin-top:15px}.about-poster strong i{font-family:var(--hand);font-weight:400;color:var(--red)}.poster-star{position:absolute;right:28px;top:25px;color:var(--red);font-size:55px}.about-poster svg{position:absolute;bottom:30px;left:10%;width:75%;fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round}.about-poster small{position:absolute;bottom:12px;left:35px;font:7px var(--mono);color:#8d8179;letter-spacing:.13em}.about-text h2{margin-bottom:28px}.about-text>p:not(.eyebrow){color:#b8afa8;font-size:13px;line-height:1.95;max-width:490px}.about-signature{font:34px var(--caveat);color:#fff;margin-top:28px;transform:rotate(-5deg);display:inline-block}.about-signature span{color:var(--red);font:19px var(--sans)}
.contact{padding-bottom:100px}.contact-inner{position:relative;overflow:hidden;background:var(--red);padding:70px 9%;color:#fff}.contact-inner .eyebrow{color:#ffe0dc}.contact-inner .red-dot{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.15)}.contact h2{font-size:clamp(58px,8vw,100px);line-height:.95;letter-spacing:-.08em;margin:0 0 20px}.contact h2 .hand{color:#171717}.contact-inner>p:not(.eyebrow){font-size:13px;color:#ffe2df}.contact-button{display:inline-flex;gap:24px;align-items:center;background:#171717;padding:13px 20px;margin-top:15px;font-size:12px;font-weight:800}.contact-button span{color:var(--red);font-size:19px}.contact-mail{display:block;margin-top:16px;font:10px var(--mono);color:#ffe0dc}.contact-spark{position:absolute;right:9%;top:14%;font-size:190px;color:rgba(20,20,20,.15);transform:rotate(12deg)}
.footer{border-top:1px solid var(--line);padding:28px max(24px,calc((100% - 1160px)/2)) 18px}.footer-main{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:26px}.footer-logo{font:28px var(--hand);transform:rotate(-3deg)}.footer-logo span{font-size:18px}.footer-logo i{font-style:normal;color:var(--red);font-size:16px;margin-left:5px}.footer-main p{font:10px var(--mono);line-height:1.6;color:#8f857e;margin:0}.footer-links{display:flex;gap:22px;font-size:10px;color:#aaa19a}.footer-links a:hover{color:white}.footer-bottom{border-top:1px solid #302c29;padding-top:14px;display:flex;justify-content:space-between;color:#716963;font:8px var(--mono);letter-spacing:.13em}
@media(max-width:800px){.hero{min-height:630px}.hero-copy{padding-left:3%;padding-top:70px}.hero-stamp{right:5%;top:16%;width:90px;height:90px}.hero-stamp span{font-size:17px}.hero h1{font-size:clamp(60px,11vw,92px)}.section-head{grid-template-columns:1fr 220px}.margin-note{display:none}.project-row,.project-row:nth-child(even){grid-template-columns:1fr;gap:24px}.project-row:nth-child(even) .project-visual,.project-row:nth-child(even) .project-info{order:initial}.project-row:nth-child(even) .project-info{padding-left:0}.project-info{padding:5px 2%}.project-list{gap:55px}.about{gap:55px}.about-poster{height:290px}}
@media(max-width:600px){.header{height:70px}.header-inner{width:calc(100% - 34px)}.nav-toggle{display:flex;flex-direction:column;gap:6px;border:0;background:none;padding:10px}.nav-toggle i{display:block;width:25px;height:2px;background:white}.nav{display:none;position:absolute;top:70px;left:0;right:0;background:#1c1a19;border-bottom:1px solid #3b3430;padding:22px 25px 28px;flex-direction:column;align-items:flex-start;gap:21px}.nav.open{display:flex}.section{width:calc(100% - 36px)}.hero{min-height:590px;padding-top:22px}.hero-topline span:last-child,.hero-bottomline span:last-child{display:none}.hero-copy{padding:78px 0 65px}.hero h1{font-size:clamp(55px,13.5vw,78px);margin-bottom:25px}.hero-intro{font-size:13px;max-width:340px}.hero-stamp{width:75px;height:75px;right:2%;top:14%}.hero-stamp span{font-size:14px}.hero-stamp b{font-size:8px}.hero-stamp small{font-size:6px}.doodle-one{right:12%;bottom:12%;font-size:34px}.hero-topline,.hero-bottomline{font-size:7px}.intro-strip{min-height:90px;gap:10px}.intro-strip p{font-size:14px}.projects{padding-top:85px;padding-bottom:85px}.section-head{display:block;margin-bottom:40px}.section-head h2,.about-text h2{font-size:clamp(46px,11vw,62px)}.section-note{margin-top:23px;max-width:300px}.project-list{gap:48px}.browser-frame img{height:185px}.hoppi-screen,.radio-screen{height:245px}.hoppi-content,.radio-content{height:210px}.hoppi-content{padding:18px 7%}.hoppi-content strong{font-size:29px}.schedule{gap:3px}.schedule span{padding:4px 5px;font-size:6px}.radio-content strong{font-size:31px}.project-info h3{font-size:38px}.project-description{font-size:12px}.about{padding-top:85px;padding-bottom:85px;grid-template-columns:1fr;gap:42px}.about-poster{height:260px;padding:25px}.about-poster strong{font-size:45px}.contact{padding-bottom:70px}.contact-inner{padding:52px 7%}.contact-spark{font-size:110px;right:2%;top:20%}.contact h2{font-size:clamp(57px,14vw,78px)}.footer{padding:24px 18px 16px}.footer-main{align-items:flex-start;flex-wrap:wrap}.footer-main p{margin-left:auto}.footer-links{width:100%;gap:17px;flex-wrap:wrap}.footer-bottom{font-size:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Echte Projekt-Screenshots */
.browser-frame img{object-fit:cover;object-position:center top}
.project-hoppi .browser-frame img{object-position:center 5%}
.project-ultrawelle .browser-frame img{object-position:center 42%}


/* Hulpi – dauerhaft sichtbares, interaktives Maskottchen */
.mascot-widget{position:fixed;right:18px;bottom:12px;z-index:60;width:clamp(150px,18vw,230px);padding:0;border:0;background:transparent;color:inherit;cursor:pointer;text-align:center;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));transform-origin:50% 90%;animation:mascot-float 6.5s ease-in-out infinite;}
.mascot-widget-art{display:block;width:100%;pointer-events:none;}
.mascot-widget-art svg{display:block;width:100%;height:auto;overflow:visible}
.mascot-widget .pupil{transition:transform .18s ease-out;transform-box:fill-box;transform-origin:center}
.mascot-widget .blink-lids{opacity:0;transform-origin:center;animation:mascot-blink 7.3s infinite}
.mascot-widget .smile{opacity:0;animation:mascot-smile 11s ease-in-out infinite}
.mascot-widget .frown{opacity:1;animation:mascot-frown 11s ease-in-out infinite}
.mascot-whisper{position:absolute;right:8%;top:3%;font:18px var(--caveat);color:#f4f0eb;background:rgba(25,23,22,.88);border:1px solid #65564e;border-radius:14px;padding:5px 11px;opacity:0;transform:translateY(5px) rotate(4deg);transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
.mascot-widget-hint{display:block;margin-top:-12px;font:8px var(--mono);letter-spacing:.22em;color:#aaa29b;opacity:.72;}
.mascot-widget:hover .mascot-whisper,.mascot-widget:focus-visible .mascot-whisper{opacity:1;transform:translateY(0) rotate(4deg)}
.mascot-widget:focus-visible{outline:2px solid var(--red);outline-offset:5px;border-radius:24px}
.mascot-widget.is-sneezing{animation:mascot-sneeze .72s ease-in-out both}
.mascot-widget.is-purring{animation:mascot-purr 1.8s ease-in-out both}
.mascot-widget.is-sneezing .mascot-whisper,.mascot-widget.is-purring .mascot-whisper{opacity:1;transform:translateY(0) rotate(4deg)}
.mascot-widget.is-sneezing .mascot-widget-art{animation:mascot-head-sneeze .72s ease-in-out both}
.mascot-widget.is-purring .mascot-widget-art{animation:mascot-head-purr 1.8s ease-in-out both}
@keyframes mascot-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes mascot-blink{0%,41%,44%,75%,78%,100%{opacity:0}42%,43%,76%,77%{opacity:1}}
@keyframes mascot-smile{0%,18%,50%,100%{opacity:0}25%,43%{opacity:1}}
@keyframes mascot-frown{0%,18%,50%,100%{opacity:1}25%,43%{opacity:0}}
@keyframes mascot-sneeze{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-4px,2px) rotate(-5deg)}45%{transform:translate(5px,-2px) rotate(5deg)}65%{transform:translate(-2px,0) rotate(-2deg)}}
@keyframes mascot-head-sneeze{0%,100%{transform:translate(0,0) scale(1)}28%{transform:translate(-5px,3px) scale(.98)}48%{transform:translate(8px,-4px) scale(1.02)}68%{transform:translate(-2px,0) scale(1)}}
@keyframes mascot-purr{0%,100%{transform:translateY(0) scale(1)}20%,70%{transform:translateY(-2px) scale(1.015)}45%{transform:translateY(1px) scale(.99)}}
@keyframes mascot-head-purr{0%,100%{transform:scale(1)}25%,75%{transform:scale(1.015)}50%{transform:scale(.99)}}
@media(max-width:600px){.mascot-widget{width:132px;right:4px;bottom:6px}.mascot-widget-hint{font-size:7px}.mascot-whisper{font-size:15px;right:12%}}
@media(prefers-reduced-motion:reduce){.mascot-widget,.mascot-widget *{animation:none!important;transition:none!important}.mascot-widget .frown{opacity:1}.mascot-widget .smile,.mascot-widget .blink-lids{opacity:0!important}}

/* Hulpi: kontextbezogene Sprechblasen */
.mascot-whisper{max-width:min(260px,72vw);white-space:normal;line-height:1.25;text-align:center;opacity:0;transform:translateY(8px) scale(.96) rotate(2deg);transform-origin:bottom right;transition:opacity .22s ease,transform .22s ease;z-index:2}
.mascot-widget.is-speaking .mascot-whisper{opacity:1;transform:translateY(0) scale(1) rotate(2deg)}
.mascot-whisper::after{content:"";position:absolute;right:18px;bottom:-7px;width:12px;height:12px;background:rgba(25,23,22,.96);border-right:1px solid #65564e;border-bottom:1px solid #65564e;transform:rotate(45deg)}
@media(max-width:600px){.mascot-whisper{max-width:190px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.mascot-whisper{transition:none}}